restyle

static/css/main.css

@@ -161,13 +161,30 @@ body {
     flex: 1;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    overflow-y: auto;
     background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+    scroll-behavior: smooth;
+}
+
+.chat-main::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-main::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chat-main::-webkit-scrollbar-thumb {
+    background: var(--text-light);
+    border-radius: 3px;
+}
+
+.chat-main::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
 }
 
 /* ===== Welcome Section ===== */
 .welcome-section {
-    flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -175,6 +192,7 @@ body {
     padding: 40px 20px;
     text-align: center;
     animation: fadeIn 0.8s ease-out;
+    flex-shrink: 0;
 }
 
 @keyframes fadeIn {
@@ -264,30 +282,11 @@ body {
 
 /* ===== Messages Container ===== */
 .messages-container {
-    flex: 1;
     display: flex;
     flex-direction: column;
     gap: 16px;
     padding: 24px;
-    overflow-y: auto;
-    scroll-behavior: smooth;
-}
-
-.messages-container::-webkit-scrollbar {
-    width: 6px;
-}
-
-.messages-container::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.messages-container::-webkit-scrollbar-thumb {
-    background: var(--text-light);
-    border-radius: 3px;
-}
-
-.messages-container::-webkit-scrollbar-thumb:hover {
-    background: var(--text-secondary);
+    flex-shrink: 0;
 }
 
 /* ===== Message Styles ===== */
@@ -344,6 +343,38 @@ body {
     text-decoration: underline;
 }
 
+/* ===== Message Content Lists ===== */
+.message ul,
+.message ol {
+    margin: 8px 0;
+    padding-left: 20px;
+}
+
+.message ul {
+    list-style-type: disc;
+}
+
+.message ol {
+    list-style-type: decimal;
+}
+
+.message li {
+    margin: 4px 0;
+    line-height: 1.6;
+}
+
+.message li::marker {
+    color: var(--primary-color);
+}
+
+/* Nested lists */
+.message ul ul,
+.message ol ol,
+.message ul ol,
+.message ol ul {
+    margin: 4px 0;
+}
+
 /* ===== Footer ===== */
 .chat-footer {
     background: white;
@@ -380,6 +411,7 @@ body {
     outline: none;
     min-height: 50px;
     max-height: 150px;
+    field-sizing: content;
     transition: box-shadow var(--transition-fast);
 }
 
@@ -391,6 +423,12 @@ body {
     box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }
 
+.message-input:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: #f3f4f6;
+}
+
 .send-button {
     width: 50px;
     height: 50px;
@@ -470,6 +508,10 @@ body {
         padding: 16px 20px;
     }
 
+    .chat-main {
+        padding: 0;
+    }
+
     .messages-container {
         padding: 16px;
         gap: 12px;