:root { color-scheme: dark; --bg:#0d1117; --panel:#161b22; --line:#2a313c; --text:#e6edf3; --muted:#9aa4b2; --accent:#4cc38a; --me:#1f3a5f; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; }
.top { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.brand { font-weight: 700; letter-spacing: .04em; }
.sub { color: var(--muted); }
.gate, .chat { background: var(--panel); border:1px solid var(--line); border-radius: 12px; padding: 16px; }
.gate p { margin: 0 0 8px; }
.small { font-size: 13px; }
.muted { color: var(--muted); }
a { color: var(--accent); }
.log { list-style: none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:10px; max-height: 60vh; overflow-y:auto; }
.log li { max-width: 85%; padding: 10px 14px; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; }
.log li.assistant { background:#1c2330; align-self:flex-start; border-bottom-left-radius: 4px; }
.log li.customer { background:var(--me); align-self:flex-end; border-bottom-right-radius: 4px; }
.log li.pending { color: var(--muted); font-style: italic; }
.composer { display:flex; gap:8px; }
.composer textarea { flex:1; resize: vertical; background:#0b0f14; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px; font: inherit; }
.composer button { background: var(--accent); color:#06160e; border:0; border-radius:8px; padding: 0 18px; font-weight:600; cursor:pointer; }
.composer button[disabled] { opacity:.5; cursor: default; }
.done .composer { display:none; }