:root { --bg:#faf7f2; --fg:#1d1a16; --muted:#7a7166; --card:#fff; --line:#ebe4d8; --ember:#e2572b; --good:#1f8a4c; --ok:#b7791f; --bad:#c53030; }
@media (prefers-color-scheme: dark) { :root { --bg:#16130f; --fg:#f3ede4; --muted:#a39889; --card:#211d18; --line:#3a332b; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; justify-content:space-between; align-items:center; padding:14px 22px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:19px; display:flex; align-items:center; gap:10px; }
.brand em { font-style:normal; color:var(--muted); font-weight:500; }
.flame { width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:linear-gradient(135deg,#ffb347,var(--ember)); }
#status { color:var(--muted); font-size:13px; } #status.live { color:var(--good); } #status.err { color:var(--bad); } #status.warn { color:#e0a030; }
main { display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:20px; padding:20px 22px; max-width:1200px; margin:0 auto; }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }
.controls { display:flex; gap:10px; align-items:center; }
button { font:inherit; font-weight:600; padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; }
#start { background:var(--ember); color:#fff; border-color:var(--ember); }
button:disabled { opacity:.45; cursor:default; }
.meter { flex:1; height:6px; background:var(--line); border-radius:3px; overflow:hidden; } #meter { height:100%; width:0; background:var(--ember); transition:width .05s; }
.hint { color:var(--muted); font-size:13px; margin:10px 0 4px; }
#stats { font-size:13px; color:var(--muted); min-height:20px; font-variant-numeric: tabular-nums; }
#convo { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.line { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 12px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.line .who { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); min-width:48px; }
.line.ember .who { color:var(--ember); }
.line.caller:not(.final) .txt { color:var(--muted); }
.line .txt { flex:1; }
.line .src { font-size:11px; color:var(--muted); }
.lat { font-size:12px; font-weight:700; padding:1px 8px; border-radius:999px; color:#fff; font-variant-numeric: tabular-nums; }
.lat.good { background:var(--good); } .lat.ok { background:var(--ok); } .lat.bad { background:var(--bad); }
aside { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; max-height:80vh; overflow:auto; }
aside h2 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 8px; }
.agent-ev { font:12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; padding:4px 0; border-bottom:1px dashed var(--line); word-break:break-word; }
.who-select { font-size:13px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.who-select select { font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:4px 8px; }
header { gap:14px; flex-wrap:wrap; }