File size: 1,672 Bytes
e618a4f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
: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; }
|