:root {
  color-scheme: light dark;
  --bg: #0b0f1a;
  --panel: #0f172a;
  --border: #1f2937;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --user: #2563eb;
  --assistant: #374151;
  --accent: #22c55e;
}
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.app { display: grid; grid-template-rows: auto 1fr auto; height: 100%; max-width: 900px; margin: 0 auto; }
.header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--panel); }
.brand { font-weight: 700; }
.model { font-size: 12px; color: var(--muted); margin-left: auto; }
.chat { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.bubble { max-width: 80%; padding: 10px 12px; border-radius: 12px; }
.bubble .sender { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.bubble .content { white-space: pre-wrap; line-height: 1.4; }
.bubble.user { margin-left: auto; background: var(--user); color: white; }
.bubble.assistant { margin-right: auto; background: var(--assistant); color: #f3f4f6; }
.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--panel); }
textarea { flex: 1; resize: none; padding: 10px; border-radius: 8px; border: 1px solid #263144; background: #0b1220; color: var(--text); }
button { padding: 10px 16px; border-radius: 8px; background: var(--accent); border: none; color: #062010; font-weight: 600; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: default; }