:root{--bg:#f5f6f8;--panel:#fff;--border:#e3e6eb;--text:#1b1f24;--muted:#6b7280;--accent:#2563eb;--client:#eef2f7;--operator:#dbeafe;--live:#dc2626;--ok:#16a34a;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#0f1115;--panel:#171a21;--border:#2a2f3a;--text:#e6e8eb;--muted:#9aa3af;--accent:#60a5fa;--client:#222733;--operator:#1e3a5f}}*{box-sizing:border-box}body{background:var(--bg);margin:0}button,.button,input,select{font:inherit;color:inherit}button,.button{background:var(--panel);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:6px 12px;text-decoration:none;display:inline-block}button:hover,.button:hover{border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}input,select{border:1px solid var(--border);background:var(--bg);border-radius:6px;width:100%;margin-top:4px;padding:8px 10px}label{margin:12px 0;font-size:14px;display:block}.muted{color:var(--muted)}.small{font-size:12px}.pad{padding:0 12px}.error{color:var(--live);margin:8px 0}.center{place-items:center;min-height:100vh;display:grid}.transcript-pane .center{height:100%;min-height:0}.center-text{text-align:center;margin-top:40px}.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:20px}.login{width:min(360px,100vw - 32px)}.login button{width:100%;margin-top:8px}.brand{align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}.logo{background:var(--accent);border-radius:6px;width:22px;height:22px}.layout{flex-direction:column;height:100vh;display:flex}header{background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:12px;padding:10px 16px;display:flex}header nav{gap:4px;display:flex}.tab.active{border-color:var(--accent);color:var(--accent)}.spacer{flex:1}.conn{border-radius:10px;padding:2px 8px;font-size:12px}.conn.ok{color:var(--ok);border:1px solid var(--ok)}.conn.down{color:var(--live);border:1px solid var(--live)}.main{flex:1;grid-template-columns:320px 1fr;min-height:0;display:grid}aside{border-right:1px solid var(--border);background:var(--panel);overflow-y:auto}aside h3{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:16px 12px 8px;font-size:12px}.call-item{text-align:left;border:none;border-bottom:1px solid var(--border);background:0 0;border-radius:0;width:100%;padding:10px 12px;display:block}.call-item.selected{background:var(--operator)}.row{justify-content:space-between;gap:8px;display:flex}.live-dot{color:var(--live);font-size:11px;font-weight:700}.live-dot:before{content:"";background:var(--live);border-radius:50%;width:7px;height:7px;margin-right:4px;animation:1.2s infinite pulse;display:inline-block}@keyframes pulse{50%{opacity:.3}}.transcript-pane{flex-direction:column;min-height:0;display:flex}.call-head{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.call-head h2{margin:0;font-size:18px}.actions{gap:8px;display:flex}.transcript-wrap{flex:1;min-height:0;position:relative}.transcript{flex-direction:column;gap:10px;height:100%;padding:16px;display:flex;overflow-y:auto}.msg{flex-direction:column;max-width:75%;display:flex}.msg.client{align-self:flex-start}.msg.operator{align-self:flex-end;align-items:flex-end}.msg.mixed{align-self:center}.meta{color:var(--muted);margin-bottom:2px;font-size:11px}.bubble{background:var(--client);white-space:pre-wrap;border-radius:12px;padding:8px 12px;line-height:1.4}.msg.operator .bubble{background:var(--operator)}.msg.partial .bubble{opacity:.65;font-style:italic}.jump{position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #00000026}.users{grid-template-columns:1fr 360px;align-items:start;gap:16px;padding:16px;display:grid;overflow-y:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;border-bottom:1px solid var(--border);padding:8px}@media (width<=800px){.main{grid-template-rows:40% 60%;grid-template-columns:1fr}aside{border-right:none;border-bottom:1px solid var(--border)}.msg{max-width:90%}.users{grid-template-columns:1fr}}