Update static/styles.css

static/styles.css

@@ -12,9 +12,9 @@ body {
 
 .chat-container {
     width: 100%;
-    max-width: 400px; /* Maximum width for larger screens */
-    height: 80vh; /* Use viewport height for responsiveness */
-    max-height: 600px; /* Maximum height cap */
+    max-width: 400px;
+    height: 80vh;
+    max-height: 600px;
     border: 1px solid #ccc;
     border-radius: 10px;
     overflow: hidden;
@@ -22,7 +22,7 @@ body {
     background-color: white;
     display: flex;
     flex-direction: column;
-    margin: 10px; /* Add margin for better spacing on mobile */
+    margin: 10px;
 }
 
 .chat-header {
@@ -35,9 +35,9 @@ body {
 }
 
 .chat-messages {
-    flex: 1; /* Allow messages to take available space */
+    flex: 1;
     overflow-y: auto;
-    padding: 15px; /* Reduced padding for mobile */
+    padding: 15px;
     box-sizing: border-box;
 }
 
@@ -48,7 +48,7 @@ body {
     border-radius: 5px;
     max-width: 70%;
     word-wrap: break-word;
-    font-size: 14px; /* Smaller font for mobile */
+    font-size: 14px;
 }
 
 .user-message {
@@ -60,7 +60,7 @@ body {
     margin-left: auto;
     text-align: right;
     word-wrap: break-word;
-    font-size: 14px; /* Smaller font for mobile */
+    font-size: 14px;
 }
 
 .chat-input {
@@ -72,16 +72,16 @@ body {
 
 .chat-input input {
     flex: 1;
-    padding: 8px; /* Slightly larger padding for better touch targets on mobile */
+    padding: 8px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-sizing: border-box;
-    font-size: 14px; /* Smaller font for mobile */
-    min-height: 40px; /* Ensure input is tappable on mobile */
+    font-size: 14px;
+    min-height: 40px;
 }
 
 .chat-input button {
-    padding: 8px 15px; /* Larger padding for better touch targets on mobile */
+    padding: 8px 15px;
     margin-left: 10px;
     background-color: #f28c38;
     color: white;
@@ -89,8 +89,8 @@ body {
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s;
-    font-size: 14px; /* Smaller font for mobile */
-    min-height: 40px; /* Ensure button is tappable on mobile */
+    font-size: 14px;
+    min-height: 40px;
 }
 
 .chat-input button:hover {
@@ -99,7 +99,7 @@ body {
 
 .option-button {
     display: inline-block;
-    padding: 10px 15px; /* Adjusted padding for mobile */
+    padding: 10px 15px;
     margin: 5px;
     background-color: #9c27b0;
     color: white;
@@ -107,8 +107,8 @@ body {
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s;
-    font-size: 14px; /* Smaller font for mobile */
-    min-width: 100px; /* Minimum width for readability */
+    font-size: 14px;
+    min-width: 100px;
     text-align: center;
 }
 
@@ -124,58 +124,57 @@ body {
     opacity: 0.9;
 }
 
-/* Media Queries for Responsiveness */
 @media (max-width: 768px) {
     .chat-container {
-        max-width: 100%; /* Full width on mobile */
-        height: 90vh; /* Use more of the viewport on mobile */
-        margin: 5px; /* Reduced margin on mobile */
+        max-width: 100%;
+        height: 90vh;
+        margin: 5px;
     }
 
     .chat-header {
-        font-size: 18px; /* Slightly smaller header on mobile */
+        font-size: 18px;
     }
 
     .chat-messages {
-        padding: 10px; /* Further reduced padding for mobile */
+        padding: 10px;
     }
 
     .chat-input input,
     .chat-input button {
-        padding: 6px; /* Smaller padding on mobile */
-        font-size: 12px; /* Even smaller font on mobile */
-        min-height: 35px; /* Adjusted for mobile touch */
+        padding: 6px;
+        font-size: 12px;
+        min-height: 35px;
     }
 
     .option-button {
-        padding: 8px 12px; /* Smaller padding for option buttons */
-        font-size: 12px; /* Smaller font for option buttons */
-        min-width: 90px; /* Adjusted minimum width */
+        padding: 8px 12px;
+        font-size: 12px;
+        min-width: 90px;
     }
 }
 
 @media (min-width: 769px) {
     .chat-container {
-        margin: 20px; /* Increased margin on larger screens */
+        margin: 20px;
     }
 
     .chat-header {
-        font-size: 22px; /* Slightly larger header on desktop */
+        font-size: 22px;
     }
 
     .bot-message,
     .user-message {
-        font-size: 16px; /* Larger font for desktop */
+        font-size: 16px;
     }
 
     .chat-input input,
     .chat-input button {
-        font-size: 16px; /* Larger font for desktop */
-        min-height: 45px; /* Adjusted for desktop */
+        font-size: 16px;
+        min-height: 45px;
     }
 
     .option-button {
-        font-size: 16px; /* Larger font for desktop */
-        min-width: 120px; /* Adjusted minimum width */
+        font-size: 16px;
+        min-width: 120px;
     }
 }