:root{ --bg:#0f172a; --panel:#111827; --text:#e5e7eb; --muted:#9ca3af; --accent:#60a5fa; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; }
header, footer{ padding:16px; text-align:center; }
#chat-container{ max-width:920px; margin:0 auto; padding:16px; }
#messages{ background:var(--panel); border-radius:12px; padding:16px; height:60vh; overflow:auto; }
.message{ margin:12px 0; }
.message.user{ text-align:right; }
.bubble{ display:inline-block; padding:10px 12px; border-radius:10px; max-width:80%; white-space:pre-wrap; }
.user .bubble{ background:#1e293b; }
.assistant .bubble{ background:#111827; border:1px solid #1f2937; }
form{ display:flex; gap:8px; margin-top:12px; }
input[type=text]{ flex:1; padding:10px 12px; border-radius:8px; border:1px solid #374151; background:#0b1220; color:var(--text); }
button{ padding:10px 14px; border-radius:8px; border:1px solid #374151; background:#0b1220; color:var(--text); cursor:pointer; }
button:hover{ border-color:var(--accent); }
.small{ color:var(--muted); font-size:12px; }