Update static/style.css

static/style.css

@@ -10,6 +10,7 @@
     --green: #6c782e;
     --purple: #945e80;
     --visual_green: #d7d9ae;
+    --aqua: #689d6a;
 }
 
 .dark {
@@ -23,8 +24,10 @@
     --green: #a9b665;
     --purple: #d3869b;
     --visual_green: #a9b665;
+    --aqua: #8ec07c;
 }
 
+/* Base Styling */
 body {
     background-color: var(--bg0);
     color: var(--fg0);
@@ -114,14 +117,6 @@ form#chatForm {
   padding: 0.5rem 0.75rem;
 }
 
-/* Add Aqua Variable */
-:root {
-    --aqua: #689d6a;
-}
-.dark {
-    --aqua: #8ec07c;
-}
-
 /* === Loader Dots Animation === */
 @keyframes bounce {
   0%, 80%, 100% {
@@ -137,7 +132,7 @@ form#chatForm {
   height: 8px;
   margin: 0 4px;
   background-color: var(--aqua);
-  border-radius: 50%;
+    border-radius: 50%;
   animation: bounce 1.4s infinite ease-in-out both;
 }
 
@@ -149,7 +144,39 @@ form#chatForm {
   animation-delay: 0.3s;
 }
 
-/* Gruvbox Aqua background */
 .bg-aqua {
   background-color: var(--aqua);
 }
+
+/* === Config Panel Behavior === */
+#configPanel {
+  max-height: 1000px;
+  overflow: hidden;
+  transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
+}
+
+/* When collapsed into minimal */
+#configPanel.minimal {
+  max-height: 120px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  opacity: 0.95;
+}
+
+/* Full expanded config */
+#configPanel.expanded {
+  max-height: 1000px;
+}
+
+/* Smaller model labels */
+.model-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/* Hide dropdown and show only label and loader when minimal */
+#configPanel.minimal .model-dropdown {
+  display: none;
+}