style: Make chat UI full-screen

static/style.css

@@ -1,21 +1,22 @@
 body {
     font-family: sans-serif;
     background-color: #f4f7f6;
-    margin: 0;
+    margin: 0; /* Remove default body margin */
     display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
+    justify-content: center; /* Center content horizontally */
+    align-items: center;     /* Center content vertically */
+    min-height: 100vh;      /* Ensure body is at least viewport height */
+    overflow: hidden;       /* Prevent scrollbars if content overflows slightly */
 }
 
 .chat-container {
-    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 */
+    width: 100vw;          /* Take full viewport width */
+    height: 100vh;         /* Take full viewport height */
+    max-width: none;        /* Remove max-width restriction */
+    max-height: none;       /* Remove max-height restriction */
     background-color: #fff;
-    border-radius: 10px;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+    border-radius: 0;       /* Remove border-radius */
+    box-shadow: none;       /* Remove box-shadow */
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -23,7 +24,7 @@ body {
 
 .chat-messages {
     flex-grow: 1;
-    padding: 1.5em;
+    padding: 1em;          /* Keep some padding inside chat messages */
     overflow-y: auto;
     display: flex;
     flex-direction: column;
@@ -49,7 +50,7 @@ body {
 }
 
 .input-area {
-    padding: 1.5em;
+    padding: 1em;          /* Keep some padding in input area */
     border-top: 1px solid #e0e0e0;
     display: flex;
 }
@@ -80,63 +81,53 @@ body {
 /* 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 */
+        justify-content: center; /* Re-center on wider screens if needed, or keep as flex-start */
+        padding-left: 0;      /* Remove left padding for full width */
+        background-color: #f4f7f6; /* Revert to default background for consistency */
     }
 
     .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 */
+        max-width: 100vw;     /* Ensure full viewport width on wider screens */
+        max-height: 100vh;    /* Ensure full viewport height on wider screens */
+        margin: 0;            /* Remove margins for full screen */
+        border-radius: 0;       /* Remove border-radius */
+        box-shadow: none;       /* Remove box-shadow */
     }
 
     .chat-messages {
-        font-size: 1.1em; /* Slightly larger font size for messages */
-        padding: 2em; /* More padding in chat messages area */
+        padding: 1.5em;        /* Adjust padding if needed for wider screens */
+        font-size: 1.1em;
     }
 
     .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 */
+        font-size: 1.1em;
+        max-width: 80%;      /* Keep message max-width for readability */
     }
 
     .input-area {
-        padding: 2em; /* More padding in input area */
+        padding: 1.5em;        /* Adjust input area padding if needed for wider screens */
     }
 
     #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 */
+        font-size: 1.1em;
     }
 
     #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 */
+        font-size: 1.1em;
     }
 }
 
-/* Media Query for smaller screens (e.g., phones) - existing styles remain */
+/* Media Query for smaller screens (e.g., phones) - existing styles remain, but ensure full screen */
 @media (max-width: 480px) {
     body {
-        align-items: flex-end; /* Align to the bottom on small screens */
+        align-items: flex-end; /* Keep align-items: flex-end if you want input at bottom on small screens */
     }
 
     .chat-container {
-        width: 100%;
-        height: 100vh;
-        max-width: none;
-        max-height: none;
-        border-radius: 0;
-        box-shadow: none;
+        width: 100vw;         /* Ensure full viewport width on small screens */
+        height: 100vh;        /* Ensure full viewport height on small screens */
+        border-radius: 0;       /* Remove border-radius */
+        box-shadow: none;       /* Remove box-shadow */
     }
 
     .chat-messages {
@@ -145,9 +136,6 @@ body {
     }
 
     .message {
-        padding: 0.7em 0.9em;
-        border-radius: 1em;
-        margin-bottom: 0.7em;
         font-size: 0.9em;
     }
 
@@ -157,8 +145,6 @@ body {
 
     #message-input,
     #send-button {
-        padding: 0.7em;
-        border-radius: 1em;
         font-size: 0.9em;
     }
 }