Update style.css

style.css

@@ -1,49 +1,104 @@
-:root{
---bg:#0f1720; /* dark background */
---panel:#0b1116;
---muted:#9aa4ad;
---accent:#10a37f;
---bubble:#111827;
+:root {
+  --bg: #0f1720;
+  --accent: #10a37f;
+  --assistant-bg: #1f2937;
+  --user-bg: #0b2a2a;
 }
 
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: #f0f0f0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
 
-*{box-sizing:border-box}
-html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto, "Helvetica Neue",Arial}
-body{background:linear-gradient(180deg,#071018 0%, #0b1520 100%);color:#e6eef3}
-.app{max-width:900px;margin:28px auto;padding:20px}
-.app-header h1{margin:0 0 12px;font-size:20px}
-.chat-area{display:grid;grid-template-columns:320px 1fr;gap:18px}
-
-
-.controls{background:var(--panel);padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:8px}
-.label{font-size:12px;color:var(--muted)}
-.single-line{background:#07121a;border:1px solid rgba(255,255,255,0.03);color:#e6eef3;padding:10px;border-radius:8px;font-size:14px;outline:none}
-.single-line::placeholder{color:rgba(230,238,243,0.5)}
-.single-line{white-space:nowrap;overflow:auto}
-
+.chat-container {
+  width: 100%;
+  max-width: 900px;
+  height: 95vh;
+  display: flex;
+  flex-direction: column;
+  background: #0c131c;
+  border-radius: 10px;
+  overflow: hidden;
+}
 
-.send-btn{margin-top:6px;padding:10px;border-radius:10px;border:none;background:var(--accent);color:white;font-weight:600;cursor:pointer}
-.send-btn:disabled{opacity:0.6;cursor:not-allowed}
+.chat-header {
+  padding: 12px 16px;
+  background: #0b1116;
+  text-align: center;
+  font-weight: 600;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+}
 
+.chat-window {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
 
-.chat-display{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:12px;min-height:520px;overflow:auto}
+.message {
+  display: flex;
+  margin-bottom: 12px;
+  gap: 8px;
+  max-width: 80%;
+  word-wrap: break-word;
+}
 
+.message.user {
+  justify-content: flex-end;
+  margin-left: auto;
+}
 
-.message{display:flex;gap:12px;margin-bottom:12px}
-.msg-meta{font-size:12px;color:var(--muted);margin-bottom:6px}
-.bubble{padding:12px;border-radius:12px;max-width:78%;line-height:1.4}
-.user .bubble{background:#0b2a2a;border:1px solid rgba(255,255,255,0.02);margin-left:auto}
-.assistant .bubble{background:#0f1720;border:1px solid rgba(255,255,255,0.03)}
+.message.assistant {
+  justify-content: flex-start;
+  margin-right: auto;
+}
 
+.bubble {
+  padding: 10px 14px;
+  border-radius: 10px;
+  line-height: 1.4;
+}
 
-.app-footer{margin-top:16px;color:var(--muted);font-size:13px}
+.user .bubble {
+  background: var(--user-bg);
+}
 
+.assistant .bubble {
+  background: var(--assistant-bg);
+}
 
-/* make the chat display look like stacked messages */
-.message.user{justify-content:flex-end}
-.message.assistant{justify-content:flex-start}
+.chat-input-area {
+  display: flex;
+  border-top: 1px solid rgba(255,255,255,0.1);
+}
 
+.chat-input-area textarea {
+  flex: 1;
+  resize: none;
+  background: #0b1116;
+  color: #f0f0f0;
+  border: none;
+  padding: 14px;
+  font-size: 15px;
+  outline: none;
+}
 
-@media (max-width:780px){
-.chat-area{grid-template-columns:1fr;}
-}
+.chat-input-area button {
+  background: var(--accent);
+  color: white;
+  border: none;
+  padding: 14px 20px;
+  cursor: pointer;
+  font-weight: bold;
+}
+.chat-input-area button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}