:root {
  --bg: #0b1220;
  --panel: #111a2e;
  --msg: #1e293b;
  --user: #2563eb;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --danger: #dc2626;
  --ok: #16a34a;
  --border: #1f2a44;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
#app { display:flex; flex-direction:column; height:100vh; height:100dvh; }
header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:10px; }
.logo { width:28px; height:28px; border-radius:6px; object-fit:cover; }
h1 { font-size:18px; margin:0; }
.sub { font-size:12px; color:var(--muted); margin:0; }
.iconBtn { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:8px; padding:6px 10px; font-size:18px; cursor:pointer; }
.status { padding:6px 16px; font-size:13px; font-weight:500; }
.status.connected { background:rgba(22,163,74,.15); color:#4ade80; }
.status.disconnected { background:rgba(220,38,38,.15); color:#f87171; }
.status.connecting { background:rgba(234,179,8,.15); color:#facc15; }
main#chat { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:85%; padding:10px 12px; border-radius:12px; white-space:pre-wrap; word-break:break-word; font-size:14px; line-height:1.4; }
.msg.user { align-self:flex-end; background:var(--user); color:#fff; }
.msg.assistant { align-self:flex-start; background:var(--msg); }
.msg.system { align-self:center; background:transparent; color:var(--muted); font-size:12px; font-style:italic; }
.msg img { max-width:100%; border-radius:8px; margin-top:6px; }
.pending { margin:0 16px 8px; padding:10px; background:#312e1a; border:1px solid #854d0e; border-radius:8px; font-size:13px; }
.pending.hidden { display:none; }
.pending button { margin-top:6px; }
.composer { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--panel); border-top:1px solid var(--border); }
.composer textarea { flex:1; resize:none; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:14px; max-height:120px; }
.sendBtn { background:var(--user); color:#fff; border:none; border-radius:8px; padding:8px 14px; cursor:pointer; font-weight:600; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10; }
.modal.hidden { display:none; }
.modalCard { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:20px; width:100%; max-width:420px; max-height:90vh; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.modalCard h2,.modalCard h3 { margin:8px 0 4px; }
.modalCard label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.modalCard input { padding:8px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text); }
.row { display:flex; gap:8px; }
.row button { flex:1; }
button { cursor:pointer; border-radius:8px; padding:8px 12px; border:1px solid var(--border); background:var(--msg); color:var(--text); font-weight:600; }
button.secondary { background:transparent; }
.hint { font-size:12px; color:var(--muted); }
.checkbox { flex-direction:row; align-items:center; gap:8px; color:var(--text); }
hr { border:none; border-top:1px solid var(--border); }