| :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; } | |