Update static/styles.css

static/styles.css

@@ -1,37 +1,79 @@
 :root {
-  --bg-main: #0f172a;
-  --bg-sidebar: #020617;
-  --bg-user: #2563eb;
-  --bg-ai: #1e293b;
-  --border: #1e293b;
-  --text-main: #e5e7eb;
+  --bg: #0f0f10;
+  --panel: #1a1a1c;
+  --border: #2a2a2d;
+  --text: #e5e7eb;
+  --muted: #9ca3af;
+  --accent: #10a37f;
+}
+
+* {
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont;
 }
 
 body {
-  background: var(--bg-main);
-  color: var(--text-main);
-  font-family: ui-sans-serif, system-ui, -apple-system;
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  display: flex;
+  height: 100vh;
+}
+
+/* SIDEBAR */
+.sidebar {
+  width: 260px;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  padding: 12px;
 }
-.msg-user {
-  background: var(--bg-user);
-  margin-left: auto;
+
+.new-chat {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px;
+  text-align: center;
+  cursor: pointer;
+}
+
+/* CHAT AREA */
+.chat {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-.msg-ai {
-  background: var(--bg-ai);
-  margin-right: auto;
+.messages {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
 }
 
 .msg {
   max-width: 720px;
-  padding: 14px 18px;
-  border-radius: 14px;
-  white-space: pre-wrap;
-  line-height: 1.6;
+  margin-bottom: 24px;
 }
-.chat-input {
-  background: #020617;
+
+.user {
+  align-self: flex-end;
+}
+
+.assistant {
+  align-self: flex-start;
+}
+
+/* INPUT */
+.input {
+  border-top: 1px solid var(--border);
+  padding: 16px;
+}
+
+textarea {
+  width: 100%;
+  background: #1f1f22;
   border: 1px solid var(--border);
   border-radius: 12px;
-  padding: 14px;
+  padding: 12px;
+  color: var(--text);
+  resize: none;
 }