:root { --bg:#0f1115; --panel:#181b22; --ink:#e8ecf3; --muted:#8b93a3; --accent:#4f8cff; --me:#24324d; --ok:#2fa36b; --bad:#d25555; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font:16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
section { height:100%; display:flex; flex-direction:column; }
#pair { align-items:center; justify-content:center; padding:24px; text-align:center; gap:8px; }
.logo { width:72px; height:72px; }
form#pair-form { display:flex; flex-direction:column; gap:10px; width:100%; max-width:320px; }
input { background:var(--panel); color:var(--ink); border:1px solid #2a2f3a; border-radius:12px; padding:12px 14px; font-size:16px; width:100%; }
button { background:var(--accent); color:#fff; border:0; border-radius:12px; padding:12px 16px; font-size:16px; cursor:pointer; }
button.link { background:none; color:var(--muted); padding:4px 8px; margin-left:auto; font-size:14px; }
.error { color:var(--bad); min-height:1.4em; }
code { background:var(--panel); padding:2px 6px; border-radius:6px; }
header { display:flex; align-items:center; gap:8px; padding:12px 16px; padding-top:max(12px, env(safe-area-inset-top)); border-bottom:1px solid #222733; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--bad); }
.dot.on { background:var(--ok); }
.muted { color:var(--muted); font-size:14px; }
main { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:85%; padding:10px 14px; border-radius:16px; background:var(--panel); white-space:pre-wrap; word-wrap:break-word; }
.msg.me { align-self:flex-end; background:var(--me); }
.msg.sys { align-self:center; background:none; color:var(--muted); font-size:14px; }
.confirm { display:flex; gap:8px; margin-top:8px; }
.confirm button.deny { background:#3a2026; color:#ffb4b4; }
.confirm button.approve { background:var(--ok); }
footer { padding:10px 12px; padding-bottom:max(10px, env(safe-area-inset-bottom)); border-top:1px solid #222733; display:flex; flex-direction:column; gap:8px; }
#send-form { display:flex; gap:8px; }
#send-form button { width:56px; }
.talk { width:100%; padding:16px; font-size:18px; user-select:none; -webkit-user-select:none; touch-action:none; }
.talk.rec { background:var(--bad); }
dialog { background:var(--panel); color:var(--ink); border:1px solid #2a2f3a; border-radius:16px; }
dialog::backdrop { background:rgba(0,0,0,.6); }
menu { display:flex; gap:8px; justify-content:flex-end; padding:0; }