:root { --bg:#111827; --card:#1f2937; --fg:#f9fafb; --mut:#9ca3af; --acc:#2563eb; --rec:#dc2626; --ok:#059669; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg);
  font: 16px/1.4 system-ui, -apple-system, Roboto, sans-serif; }
body { display:flex; flex-direction:column; padding:16px; padding-bottom:max(16px, env(safe-area-inset-bottom)); }
button { font: inherit; color: var(--fg); }
.agents, .modes, .bar { display:flex; gap:8px; }
.agents button, .modes button { flex:1; padding:12px 6px; border:0; border-radius:12px; background:var(--card); }
.agents button.on, .modes button.on { background:var(--acc); }
.bar { margin-top:10px; }
.modes { flex:1; }
.modes button { font-size:14px; padding:10px 4px; }
#camBtn { width:56px; border:0; border-radius:12px; background:var(--card); font-size:22px; }
#camBtn.on { background:var(--ok); }
.opt { display:block; margin-top:8px; color:var(--mut); font-size:13px; }
#log { flex:1; overflow-y:auto; margin:12px 0; display:flex; flex-direction:column; gap:10px; }
.msg { padding:10px 12px; border-radius:12px; max-width:88%; white-space:pre-wrap; word-wrap:break-word; }
.me { background:#374151; align-self:flex-end; }
.bot { background:var(--card); align-self:flex-start; }
#cam { width:100%; max-height:32vh; object-fit:cover; border-radius:12px; margin-bottom:10px; background:#000; }
#status { text-align:center; color:var(--mut); min-height:22px; margin-bottom:10px; }
#talk { width:100%; height:120px; border:0; border-radius:60px; background:var(--acc); color:#fff;
  font-size:20px; touch-action:none; user-select:none; -webkit-user-select:none; }
#talk.rec { background:var(--rec); }
#talk.listen { background:#7c3aed; }
#talk.play { background:var(--ok); }
#talk:disabled { opacity:.4; }