Adding better css

style.css

@@ -71,12 +71,13 @@ input::placeholder {
 /* Main container styles */
 main {
     display: flex;
-    height: 100%;
+    flex: 1;
     justify-content: center;
     align-items: center;
-    flex: 1;
+    padding: 1rem;
 }
 
+/* Hidden class */
 .hidden {
     display: none !important;
 }
@@ -108,11 +109,13 @@ main {
 #chat {
     display: flex;
     flex-direction: column;
+    flex: 1;
     width: 100%;
     padding: 1rem;
     background-color: #1E1E1E;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
 }
 
 #header {
@@ -129,10 +132,13 @@ main {
 
 #messages {
     flex: 1;
+    min-height: 200px; /* Ensures minimum height to prevent squishing */
     overflow-y: auto;
     padding: 1rem;
     background-color: #262626;
     border-radius: 4px;
+    display: flex;
+    flex-direction: column;
 }
 
 #message-form {