feat: Add wide screen support and improve UI

static/style.css

@@ -9,8 +9,10 @@ body {
 }
 
 .chat-container {
-    width: 400px;
-    height: 600px;
+    width: 90%; /* Use percentage for width */
+    max-width: 400px; /* Keep a maximum width for smaller screens */
+    height: 80vh; /* Use viewport height for height */
+    max-height: 600px; /* Keep a maximum height for smaller screens */
     background-color: #fff;
     border-radius: 10px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
@@ -21,52 +23,142 @@ body {
 
 .chat-messages {
     flex-grow: 1;
-    padding: 20px;
+    padding: 1.5em;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
+    font-size: 1em;
 }
 
 .message {
     background-color: #e0e0e0;
     color: #333;
-    padding: 10px 15px;
-    border-radius: 20px;
-    margin-bottom: 10px;
-    align-self: flex-start; /* Default to left align for user messages */
+    padding: 0.8em 1em;
+    border-radius: 1.5em;
+    margin-bottom: 0.8em;
+    align-self: flex-start;
     max-width: 80%;
     word-wrap: break-word;
+    font-size: 1em;
 }
 
 .message.bot {
     background-color: #007bff;
     color: white;
-    align-self: flex-end; /* Right align for bot messages */
+    align-self: flex-end;
 }
 
 .input-area {
-    padding: 20px;
+    padding: 1.5em;
     border-top: 1px solid #e0e0e0;
     display: flex;
 }
 
 #message-input {
     flex-grow: 1;
-    padding: 10px;
-    border-radius: 20px;
+    padding: 0.8em;
+    border-radius: 1.5em;
     border: 1px solid #ccc;
-    margin-right: 10px;
+    margin-right: 1em;
+    font-size: 1em;
 }
 
 #send-button {
     background-color: #007bff;
     color: white;
     border: none;
-    padding: 10px 20px;
-    border-radius: 20px;
+    padding: 0.8em 1.5em;
+    border-radius: 1.5em;
     cursor: pointer;
+    font-size: 1em;
 }
 
 #send-button:hover {
     background-color: #0056b3;
 }
+
+/* Media Query for screens wider than 768px (typical tablets/desktops) */
+@media (min-width: 769px) {
+    body {
+        justify-content: flex-start; /* Align to the start on wider screens */
+        padding-left: 20px; /* Add some padding on the left */
+        background-color: #e9f5f3; /* Slightly different background for wider screens */
+    }
+
+    .chat-container {
+        max-width: 90%; /* Let it take more width on wider screens */
+        max-height: 90vh; /* Increase max height for larger screens */
+        height: auto; /* Adjust height automatically based on content */
+        margin: 20px; /* Add margin around the chat container */
+        border-radius: 15px; /* Slightly larger border-radius */
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow */
+    }
+
+    .chat-messages {
+        font-size: 1.1em; /* Slightly larger font size for messages */
+        padding: 2em; /* More padding in chat messages area */
+    }
+
+    .message {
+        padding: 1em 1.2em; /* Adjust message padding */
+        border-radius: 1.8em; /* Slightly larger message border-radius */
+        margin-bottom: 1em; /* Slightly larger message margin */
+        font-size: 1.1em; /* Slightly larger font size for messages */
+        max-width: 60%; /* Reduce max width for messages on wider screens */
+    }
+
+    .input-area {
+        padding: 2em; /* More padding in input area */
+    }
+
+    #message-input {
+        padding: 1em; /* Adjust input padding */
+        border-radius: 1.8em; /* Slightly larger input border-radius */
+        font-size: 1.1em; /* Slightly larger font size for input */
+    }
+
+    #send-button {
+        padding: 1em 2em; /* Adjust button padding */
+        border-radius: 1.8em; /* Slightly larger button border-radius */
+        font-size: 1.1em; /* Slightly larger font size for button */
+    }
+}
+
+/* Media Query for smaller screens (e.g., phones) - existing styles remain */
+@media (max-width: 480px) {
+    body {
+        align-items: flex-end; /* Align to the bottom on small screens */
+    }
+
+    .chat-container {
+        width: 100%;
+        height: 100vh;
+        max-width: none;
+        max-height: none;
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    .chat-messages {
+        padding: 1em;
+        font-size: 0.9em;
+    }
+
+    .message {
+        padding: 0.7em 0.9em;
+        border-radius: 1em;
+        margin-bottom: 0.7em;
+        font-size: 0.9em;
+    }
+
+    .input-area {
+        padding: 1em;
+    }
+
+    #message-input,
+    #send-button {
+        padding: 0.7em;
+        border-radius: 1em;
+        font-size: 0.9em;
+    }
+}