Update style.css

style.css

@@ -474,6 +474,23 @@ a {
     text-decoration: none !important;
 }
 
+/* Follow-up Examples Styles */
+#follow-up-examples {
+    height: 15vh;
+    overflow-y: auto;
+    padding: 10px 0;
+    display: none; /* Hide by default */
+}
+
+#follow-up-examples:not(:empty) {
+    display: block; /* Show only when there's content */
+}
+
+#follow-up-button {
+    height: 100%;
+    overflow-y: auto;
+}
+
 /* Media Queries */
 /* Desktop Media Query */
 @media screen and (min-width: 1024px) {
@@ -497,7 +514,19 @@ a {
     }
 
     div#chatbot-row {
-        max-height: calc(100vh - 90px) !important;
+        max-height: calc(100vh - 200px) !important;
+    }
+
+    div#chatbot {
+        height: 80vh !important; /* Increased height when no follow-ups */
+        max-height: 80vh !important;
+        transition: height 0.3s ease;
+    }
+
+    /* Adjust chatbot height when follow-up examples are present */
+    div#chatbot:has(+ #follow-up-examples:not(:empty)) {
+        height: 65vh !important;
+        max-height: 65vh !important;
     }
 
     div#graphs-container {
@@ -514,7 +543,17 @@ a {
 /* Mobile Media Query */
 @media screen and (max-width: 767px) {
     div#chatbot {
-        height: 500px !important;
+        height: 500px !important; /* Increased height when no follow-ups */
+        transition: height 0.3s ease;
+    }
+
+    /* Adjust chatbot height when follow-up examples are present */
+    div#chatbot:has(+ #follow-up-examples:not(:empty)) {
+        height: 400px !important;
+    }
+
+    #follow-up-examples {
+        height: 100px;
     }
 
     #submit-button {