Update chatbot responses

FRONTEND/src/App.css

@@ -571,6 +571,7 @@ img {
   gap: 12px;
   min-height: 0;
   height: 100%;
+  min-width: 0;
 }
 
 .chatIntroCard,
@@ -773,6 +774,12 @@ textarea:focus {
   padding-right: 4px;
 }
 
+.sidePanel > .card,
+.sidePanel > .authCard,
+.sidePanel > .conversationCard {
+  min-width: 0;
+}
+
 .suggestions {
   display: flex;
   flex-direction: column;
@@ -1103,6 +1110,85 @@ textarea:focus {
   animation-delay: 0.3s;
 }
 
+@media (max-width: 1400px) {
+  .main {
+    grid-template-columns: minmax(0, 1fr) 300px;
+    gap: 14px;
+    padding: 14px 18px;
+  }
+
+  .topbar {
+    padding: 14px 18px;
+  }
+
+  .topbar h1 {
+    font-size: 26px;
+  }
+
+  .topbar p {
+    font-size: 14px;
+  }
+
+  .chatIntroCard,
+  .card {
+    padding: 14px 16px;
+  }
+
+  .chatBox {
+    padding: 14px;
+  }
+
+  .bubble {
+    max-width: min(680px, 94%);
+  }
+}
+
+@media (max-width: 1200px) {
+  .app.chatPage {
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+
+  .main {
+    grid-template-columns: 1fr;
+    gap: 14px;
+    padding: 14px 16px 18px;
+    overflow: visible;
+  }
+
+  .chatArea,
+  .sidePanel {
+    height: auto;
+    min-height: auto;
+  }
+
+  .sidePanel {
+    overflow: visible;
+    padding-right: 0;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  .sidePanel .card,
+  .sidePanel .authCard,
+  .sidePanel .conversationCard {
+    height: 100%;
+  }
+
+  .chatBox {
+    min-height: 420px;
+    max-height: 56vh;
+  }
+
+  .composer {
+    position: sticky;
+    bottom: 12px;
+    z-index: 10;
+  }
+}
+
 @media (max-width: 980px) {
   .siteNav,
   .topbar {
@@ -1177,6 +1263,8 @@ textarea:focus {
 
   .composer {
     flex-direction: column;
+    position: sticky;
+    bottom: 8px;
   }
 
   .sendBtn {
@@ -1232,6 +1320,33 @@ textarea:focus {
     line-height: 1.6;
   }
 
+  .main {
+    padding-bottom: 20px;
+  }
+
+  .chatIntroCard h2,
+  .card h2 {
+    font-size: 21px;
+  }
+
+  .sidePanel {
+    grid-template-columns: 1fr;
+  }
+
+  .chatBox {
+    min-height: 340px;
+    max-height: none;
+  }
+
+  .meta {
+    gap: 6px;
+  }
+
+  .chip {
+    font-size: 11px;
+    padding: 4px 8px;
+  }
+
   .medicalHero h2 {
     font-size: 30px;
   }
@@ -1314,13 +1429,18 @@ textarea:focus {
     padding: 12px;
   }
 
+  .chatIntroCard,
+  .card {
+    padding: 12px 13px;
+  }
+
   .bubble {
     padding: 12px 13px;
     border-radius: 14px;
   }
 
-  .chip {
-    font-size: 11px;
+  .meta {
+    display: none;
   }
 
   .topbar h1 {
@@ -1341,6 +1461,15 @@ textarea:focus {
     min-height: 64px;
   }
 
+  .composer textarea,
+  .symptomField select,
+  .symptomField input,
+  .symptomField textarea,
+  .authField input,
+  textarea {
+    font-size: 16px;
+  }
+
   .medicalList {
     padding-left: 18px;
   }