Update static/styles.css

static/styles.css

@@ -22,6 +22,7 @@ body {
     background-color: white;
     display: flex;
     flex-direction: column;
+    margin: 10px; /* Add margin for better spacing on mobile */
 }
 
 .chat-header {
@@ -36,7 +37,7 @@ body {
 .chat-messages {
     flex: 1; /* Allow messages to take available space */
     overflow-y: auto;
-    padding: 20px;
+    padding: 15px; /* Reduced padding for mobile */
     box-sizing: border-box;
 }
 
@@ -47,6 +48,7 @@ body {
     border-radius: 5px;
     max-width: 70%;
     word-wrap: break-word;
+    font-size: 14px; /* Smaller font for mobile */
 }
 
 .user-message {
@@ -58,6 +60,7 @@ body {
     margin-left: auto;
     text-align: right;
     word-wrap: break-word;
+    font-size: 14px; /* Smaller font for mobile */
 }
 
 .chat-input {
@@ -69,14 +72,16 @@ body {
 
 .chat-input input {
     flex: 1;
-    padding: 5px;
+    padding: 8px; /* Slightly larger padding for better touch targets on mobile */
     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 */
 }
 
 .chat-input button {
-    padding: 5px 10px;
+    padding: 8px 15px; /* Larger padding for better touch targets on mobile */
     margin-left: 10px;
     background-color: #f28c38;
     color: white;
@@ -84,6 +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 */
 }
 
 .chat-input button:hover {
@@ -92,7 +99,7 @@ body {
 
 .option-button {
     display: inline-block;
-    padding: 10px 20px;
+    padding: 10px 15px; /* Adjusted padding for mobile */
     margin: 5px;
     background-color: #9c27b0;
     color: white;
@@ -100,6 +107,9 @@ 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 */
+    text-align: center;
 }
 
 .option-button.green {
@@ -112,4 +122,60 @@ body {
 
 .option-button:hover {
     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 */
+    }
+
+    .chat-header {
+        font-size: 18px; /* Slightly smaller header on mobile */
+    }
+
+    .chat-messages {
+        padding: 10px; /* Further reduced padding for mobile */
+    }
+
+    .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 */
+    }
+
+    .option-button {
+        padding: 8px 12px; /* Smaller padding for option buttons */
+        font-size: 12px; /* Smaller font for option buttons */
+        min-width: 90px; /* Adjusted minimum width */
+    }
+}
+
+@media (min-width: 769px) {
+    .chat-container {
+        margin: 20px; /* Increased margin on larger screens */
+    }
+
+    .chat-header {
+        font-size: 22px; /* Slightly larger header on desktop */
+    }
+
+    .bot-message,
+    .user-message {
+        font-size: 16px; /* Larger font for desktop */
+    }
+
+    .chat-input input,
+    .chat-input button {
+        font-size: 16px; /* Larger font for desktop */
+        min-height: 45px; /* Adjusted for desktop */
+    }
+
+    .option-button {
+        font-size: 16px; /* Larger font for desktop */
+        min-width: 120px; /* Adjusted minimum width */
+    }
 }