:root { --bg:#0e1116; --card:#171c24; --line:#252c38; --fg:#e8ecf2; --muted:#8a94a6; --acc:#4f8cff; --ok:#3ecf8e; --bad:#ff6b6b; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
main { max-width:560px; margin:0 auto; padding:16px 14px calc(76px + env(safe-area-inset-bottom)); }
#login { padding-top:20vh; text-align:center; }
h1 { font-size:22px; margin:6px 0 12px; } h2 { font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:22px 4px 8px; }
header { display:flex; align-items:center; justify-content:space-between; }
.muted { color:var(--muted); font-size:13px; } .err { color:var(--bad); min-height:1.2em; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:10px 0; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .grid .card { margin:0; }
.list .item { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:8px 0; cursor:pointer; }
.item .top { display:flex; justify-content:space-between; gap:10px; } .item .sum { color:var(--muted); font-size:14px; margin-top:4px; }
.pill { font-size:12px; padding:2px 9px; border-radius:99px; background:var(--line); color:var(--muted); white-space:nowrap; }
.pill.answered,.pill.active { background:#143d2c; color:var(--ok); } .pill.missed,.pill.failed { background:#40201f; color:var(--bad); }
.pill.ringing { background:#1d3157; color:var(--acc); }
.turns { display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow:auto; }
.turn { max-width:86%; padding:8px 11px; border-radius:12px; font-size:15px; }
.turn.caller { align-self:flex-start; background:#232a36; } .turn.agent { align-self:flex-end; background:#1d3157; }
.turn small { display:block; color:var(--muted); font-size:11px; margin-bottom:2px; }
input,textarea,button { font:inherit; color:inherit; }
input,textarea { width:100%; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:6px 0 12px; }
label { display:block; font-size:13px; color:var(--muted); }
button { background:var(--acc); border:0; border-radius:10px; padding:10px 16px; color:#fff; cursor:pointer; }
button.link { background:none; color:var(--acc); padding:8px 4px; } button.danger { background:#40201f; color:var(--bad); }
nav { position:fixed; left:0; right:0; bottom:0; display:flex; background:var(--card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
nav button { flex:1; background:none; color:var(--muted); border-radius:0; padding:14px 0; } nav button.on { color:var(--fg); box-shadow:inset 0 2px 0 var(--acc); }
.dot { width:10px; height:10px; border-radius:50%; background:var(--bad); } .dot.on { background:var(--ok); }
.switch { position:relative; width:52px; height:30px; flex:none; } .switch input { opacity:0; width:0; height:0; margin:0; }
.switch span { position:absolute; inset:0; background:var(--line); border-radius:99px; transition:.15s; }
.switch span:before { content:""; position:absolute; width:24px; height:24px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; }
.switch input:checked + span { background:var(--ok); } .switch input:checked + span:before { transform:translateX(22px); }
[hidden] { display:none !important; }
.ask { border-color:var(--acc); position:sticky; top:8px; z-index:5; } .ask b { display:block; margin:6px 0 12px; font-size:17px; } .ask button { flex:1; padding:14px; }