/* Circle Voice Wallboard, v3 (9 Nov 2026)
   Calm, minimal. Hierarchy from whitespace, type scale, tabular numerals and hairlines.
   One accent (Circle Voice teal). Status colours only where they carry meaning.
   Previous versions: style.v2.css, style.v1.css. */
@font-face{font-family:"Raleway";src:url(fonts/Raleway.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter.ttf) format("truetype");font-weight:100 900;font-display:swap}

:root{
  color-scheme:light;
  --bg:#FFFFFF; --surface:#F8F9FB; --hover:#F2F4F7;
  --ink:#0B1C30; --mute:#586577; --dim:#7B8696;
  --line:#E6E8EC; --line2:#D3D8DF;
  --teal:#48ABA7; --teal-ink:#2B7F7B; --teal-tint:rgba(72,171,167,.12); --teal-edge:rgba(72,171,167,.32);
  --av:#1AAA55; --av-t:#127A3D;
  --oc:#00BBF9; --oc-t:#0A7396;
  --rg:#FBD507; --rg-t:#8A6A00;
  --bad:#E03B3B; --bad-t:#C42B2B;
  --btn-bg:#0B1C30; --btn-ink:#FFFFFF;
  --scrim:rgba(11,28,48,.32);
  --r:8px;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Raleway","Inter",system-ui,sans-serif;
  --bar:3.5rem;
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#0B1C30; --surface:#0F2338; --hover:#13293f;
  --ink:#E8EEF4; --mute:#97A8BA; --dim:#6A7C90;
  --line:#1C3450; --line2:#294662;
  --teal-ink:#6CC6C2; --teal-tint:rgba(72,171,167,.16); --teal-edge:rgba(72,171,167,.38);
  --av-t:#3DD17C; --oc-t:#4CCBFA; --rg-t:#FBD507; --bad-t:#FF7D7D;
  --btn-bg:#E8EEF4; --btn-ink:#0B1C30;
  --scrim:rgba(3,9,16,.6);
}

*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);line-height:1.5;-webkit-font-smoothing:antialiased}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--btn-bg);color:var(--btn-ink);padding:.5rem 1rem;z-index:100;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
[hidden]{display:none!important}
a{color:var(--teal-ink)}
.num,.kpi-value,.since,.q-val,.tbl td.num,.v-timer,.row-time{font-variant-numeric:tabular-nums lining-nums}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:.5rem 1.75rem;padding:0 1.5rem;min-height:var(--bar);background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;white-space:nowrap;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.brand-text b{font-weight:500;color:var(--dim);margin-left:.3rem}
.logo{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;background:#0B1C30;border-radius:var(--r);flex:none}
.logo .brand-mark{width:1.15rem;height:auto;display:block}
:root[data-theme=dark] .logo{box-shadow:inset 0 0 0 1px var(--line2)}
.brand.big{font-size:1.2rem}
.brand.big .logo{width:2.4rem;height:2.4rem}.brand.big .brand-mark{width:1.4rem}
.nav{display:flex;gap:.25rem;align-self:stretch}
.nav a{display:flex;align-items:center;color:var(--mute);text-decoration:none;padding:0 .7rem;font-weight:500;font-size:.9rem;position:relative}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink)}
.nav a[aria-current=page]::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:-1px;height:2px;background:var(--teal)}
.tenant{display:flex;align-items:center;gap:.5rem}
.tenant-name{color:var(--mute);font-size:.9rem}
.tenant-select{background:var(--bg);color:var(--ink);border:1px solid var(--line2);border-radius:var(--r);padding:.3rem .5rem;font:inherit;font-size:.875rem}
.top-right{margin-left:auto;display:flex;align-items:center;gap:.4rem 1rem;flex-wrap:wrap}
.who{color:var(--mute);font-size:.85rem;display:flex;align-items:center;gap:.45rem}
.badge{border:1px solid var(--line2);border-radius:99px;padding:0 .5rem;font-size:.6875rem;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;line-height:1.55}
.live{display:flex;align-items:center;gap:.45rem;color:var(--mute);font-size:.8125rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.live.stale{color:var(--rg-t);font-weight:600}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--dim);display:inline-block;flex:none}
.dot.live{background:var(--teal)}
.dot.poll{background:var(--oc)}
.dot.stale{background:var(--rg)}
.dot.bad{background:var(--bad)}

/* ---------- buttons & inputs ---------- */
.btn{font:inherit;font-weight:500;font-size:.875rem;border-radius:var(--r);border:1px solid var(--line2);padding:0 .8rem;cursor:pointer;background:var(--bg);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.1rem}
.btn:hover{background:var(--hover)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;border-color:transparent;color:var(--mute)}
.btn.ghost:hover{color:var(--ink);background:var(--hover)}
.btn.primary{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.btn.primary:hover{opacity:.9}
.btn.danger{color:var(--bad-t);border-color:var(--line2)}
.btn.danger:hover{background:var(--hover);border-color:var(--bad)}
.btn.wide{width:100%;min-height:2.5rem}
.btn.icon{width:2.1rem;padding:0}
.btn svg{width:1rem;height:1rem;display:block}
.input{background:var(--bg);color:var(--ink);border:1px solid var(--line2);border-radius:var(--r);padding:.5rem .7rem;font:inherit;font-size:.9375rem;width:100%;max-width:100%;min-height:2.4rem}
.input::placeholder{color:var(--dim)}
.input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-tint)}

/* ---------- page scaffolding ---------- */
main{padding:2rem 1.5rem 3rem;max-width:2400px;margin:0 auto}
.page-title{font-weight:600;font-size:1.375rem;letter-spacing:-.015em;margin:0 0 1.5rem}
.sec-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:0 0 .9rem}
.sub-title{font-weight:600;font-size:.9375rem;margin:2rem 0 .8rem}
.hint{color:var(--dim);font-size:.8125rem;font-weight:400;text-transform:none;letter-spacing:0}
.msg{min-height:1.2em;margin:.3rem 0;font-size:.875rem}
.msg:empty{display:none}
.msg.err{color:var(--bad-t)}.msg.ok{color:var(--teal-ink)}
.empty{color:var(--dim);padding:.5rem 0;margin:0;font-size:.875rem}

/* ---------- alerts ---------- */
.alerts{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.5rem}
.alerts:empty{display:none}
.alert{display:flex;gap:.75rem;align-items:center;padding:.55rem .9rem;border-radius:var(--r);font-size:.875rem;border:1px solid var(--line);border-left-width:3px;background:var(--surface)}
.alert strong{font-size:.6875rem;letter-spacing:.08em;font-weight:600}
.alert.critical{border-left-color:var(--bad)}.alert.critical strong{color:var(--bad-t)}
.alert.warn{border-left-color:var(--rg)}.alert.warn strong{color:var(--rg-t)}

/* ---------- KPIs: figures on whitespace ---------- */
.kpis{display:flex;flex-wrap:wrap;gap:1.5rem 3.5rem;padding:0 0 1.75rem;margin-bottom:2rem;border-bottom:1px solid var(--line)}
.kpi{min-width:6rem}
.kpi-label{color:var(--mute);font-size:.8125rem;font-weight:500}
.kpi-value{font-weight:600;font-size:2rem;line-height:1.1;letter-spacing:-.03em;margin-top:.3rem}
.kpi.lead .kpi-value{font-size:2.75rem}
.kpi.hot .kpi-value{color:var(--rg-t)}
#kpi-avail-wrap.hot .kpi-value,#kpi-missed-wrap.hot .kpi-value{color:var(--bad-t)}

/* ---------- board body ---------- */
.board-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,32%);gap:3rem;align-items:start}
.side{display:flex;flex-direction:column;gap:2.5rem}

.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.75rem}
.agent{--st:var(--dim);--stt:var(--mute);display:flex;flex-direction:column;gap:.7rem;border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem;background:var(--bg);color:var(--ink);text-decoration:none;min-height:6.6rem}
.agent-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.agent-name{font-weight:600;font-size:.9375rem;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-ext{color:var(--dim);font-size:.75rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.agent-status{display:flex;justify-content:space-between;align-items:center}
.status-pill{display:inline-flex;align-items:center;gap:.45rem;font-weight:500;font-size:.8125rem;color:var(--stt)}
.status-pill::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--st)}
.since{font-size:.8125rem;color:var(--mute)}
.agent-call{display:flex;align-items:center;gap:.6rem;font-size:.8125rem;margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line);min-height:2rem;color:var(--ink)}
.agent-call.idle{color:var(--line2);border-top-color:transparent}
.call-time{margin-left:auto;color:var(--ink);font-weight:500}
.dir{font-weight:500;font-size:.75rem;color:var(--mute);white-space:nowrap}
.dir::before{content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:50%;margin-right:.35rem;background:var(--line2);vertical-align:.05em}
.dir.in::before{background:var(--oc)}.dir.out::before{background:var(--teal)}
a.agent.has-call{cursor:pointer}
a.agent.has-call:hover{border-color:var(--teal);background:var(--surface)}
.agent.s-available{--st:var(--av);--stt:var(--av-t)}
.agent.s-on_call{--st:var(--oc);--stt:var(--oc-t)}
.agent.s-ringing{--st:var(--rg);--stt:var(--rg-t);animation:ring 1.4s ease-in-out infinite}
.agent.s-away{--st:var(--dim);--stt:var(--mute)}
.agent.s-dnd{--st:var(--bad);--stt:var(--bad-t)}
.agent.s-dnd .status-pill::before{border-radius:1px;width:.55rem;height:.2rem}
.agent.s-on_call{border-color:var(--oc)}
.agent.s-on_call .agent-status .since{color:var(--oc-t);font-weight:600;font-variant-numeric:tabular-nums}
.agent.s-offline .status-pill::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--dim)}
.agent.s-on_call .agent-call.idle{color:var(--oc-t)}
.agent.s-offline{--st:var(--line2);--stt:var(--dim);opacity:.6}
@keyframes ring{50%{border-color:var(--rg)}}

.queues{display:flex;flex-direction:column}
.queue{display:grid;grid-template-columns:1fr repeat(3,4.6rem);align-items:center;gap:.5rem;padding:.8rem 0;border-top:1px solid var(--line)}
.queue:first-child{border-top:0;padding-top:0}
.q-name{font-weight:600;font-size:.9375rem}
.q-metric{display:flex;flex-direction:column;align-items:flex-end}
.q-val{font-size:1.25rem;font-weight:600;line-height:1.15;letter-spacing:-.02em}
.q-lbl{color:var(--dim);font-size:.6875rem;font-weight:500}
.queue.hot .q-metric:nth-child(2) .q-val{color:var(--rg-t)}
.queue.crit .q-metric:nth-child(3) .q-val{color:var(--bad-t)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.875rem}
.tbl th,.tbl td{padding:.65rem .75rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th:first-child,.tbl td:first-child{padding-left:0}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl thead th{color:var(--mute);font-size:.75rem;font-weight:500;white-space:nowrap;border-bottom-color:var(--line2);padding-top:.3rem}
.tbl .num{text-align:right}
.tbl tbody th{font-weight:500;white-space:nowrap}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tfoot th,.tbl tfoot td{font-weight:600;border-bottom:0;border-top:1px solid var(--line2)}
.th-btn{all:unset;cursor:pointer;text-transform:inherit;letter-spacing:inherit;padding:.1rem 0;border-radius:4px}
.th-btn:hover{color:var(--ink)}
.th-btn:focus-visible{outline:2px solid var(--teal)}
th[aria-sort=ascending] .th-btn::after{content:" \2191"}
th[aria-sort=descending] .th-btn::after{content:" \2193"}
th[aria-sort=ascending],th[aria-sort=descending]{color:var(--ink)}
tr.clickable{cursor:pointer}
tr.clickable:hover,tr.clickable:focus-visible{background:var(--surface)}
tr.row-missed td:first-child{color:var(--bad-t)}
.chip{font-size:.8125rem;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem}
.chip::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.chip.good{color:var(--av-t)}.chip.bad{color:var(--bad-t)}
.notes{color:var(--mute);font-size:.8125rem}

/* ---------- calls page ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;margin-bottom:1.25rem}
.seg{display:flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;margin:0;padding:0;min-width:0}
.seg-btn{font:inherit;font-size:.8125rem;background:transparent;color:var(--mute);border:0;border-right:1px solid var(--line2);padding:.45rem .85rem;cursor:pointer;font-weight:500}
.seg-btn:last-child{border-right:0}
.seg-btn:hover{color:var(--ink);background:var(--hover)}
.seg-btn[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:inset 0 -2px 0 var(--teal)}
.filters .input{width:20rem}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--bg);border-left:1px solid var(--line);z-index:50;display:flex;flex-direction:column}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.5rem;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;font-weight:600;font-size:1rem}
.drawer-body{overflow-y:auto;padding:1.5rem 1.5rem 3rem}
body.drawer-open{overflow:hidden}
.dsec{margin-bottom:2rem}
.dsec h3{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:0 0 .75rem}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.5rem;margin:0}
.fact dt{color:var(--dim);font-size:.75rem;font-weight:500}
.fact dd{margin:.1rem 0 0;font-size:.875rem;word-break:break-word}
.summary{background:var(--surface);border:1px solid var(--line);padding:.8rem 1rem;border-radius:var(--r);margin:0;line-height:1.6;font-size:.9rem}
.transcript{display:flex;flex-direction:column;gap:.5rem}
.tline{padding:.5rem .8rem;border-radius:var(--r);max-width:88%;background:var(--surface);border:1px solid var(--line);line-height:1.5;font-size:.9rem}
.tline.caller{align-self:flex-start}
.tline.agent{align-self:flex-end;background:var(--teal-tint);border-color:var(--teal-edge)}
.tline.plain{max-width:100%}
.tline .who{display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase;color:var(--mute);letter-spacing:.07em;margin-bottom:.1rem}
.tline.agent .who{color:var(--teal-ink)}
.contact{border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.contact-name{font-size:1rem;font-weight:600}

/* ---------- admin ---------- */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:3rem;align-items:start}
.card .hint{margin:-.4rem 0 1rem}
.form{display:grid;gap:1rem;max-width:30rem}
.field label{display:block;margin-bottom:.3rem;font-weight:500;color:var(--mute);font-size:.8125rem}
.pw{display:flex;gap:.4rem}
.form-actions{padding-top:.25rem}
.actions{text-align:right}

/* ---------- login ---------- */
.login-page{background:var(--surface)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;position:relative}
.login-card{width:min(400px,100%);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:2rem;display:grid;gap:1.1rem}
.login-title{margin:.5rem 0 0;font-weight:600;font-size:1.375rem;letter-spacing:-.015em}
.login-title::after{content:"Live call activity for your team.";display:block;font-size:.875rem;font-weight:400;color:var(--mute);letter-spacing:0;margin-top:.2rem}
.login-theme{position:absolute;top:1rem;right:1rem}

/* ---------- live page ---------- */
body[data-page=live]{overflow:hidden}
.live-main{max-width:none;margin:0;padding:0;display:grid;grid-template-columns:360px minmax(0,1fr);height:calc(100vh - var(--bar));height:calc(100dvh - var(--bar))}
.live-list-pane{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.pane-head{display:flex;align-items:baseline;gap:.6rem;padding:1.25rem 1.25rem .9rem}
.pane-title{margin:0;font-size:.9375rem;font-weight:600}
.pane-count{color:var(--dim);font-size:.8125rem;font-variant-numeric:tabular-nums}
.call-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0;border-top:1px solid var(--line)}
.call-list li{border-bottom:1px solid var(--line)}
.call-row{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;padding:.9rem 1.25rem .95rem;position:relative}
.call-row:hover{background:var(--surface)}
.call-row:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.call-row[aria-current=true]{background:var(--surface);box-shadow:inset 2px 0 0 var(--teal)}
.row-top{display:flex;align-items:center;gap:.5rem}
.row-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--teal);flex:none;animation:pulse 1.6s ease-in-out infinite}
.row-name{font-weight:600;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row-time{margin-left:auto;font-size:.8125rem;color:var(--ink);padding-left:.5rem;white-space:nowrap}
.row-meta{display:flex;align-items:center;gap:.6rem;margin-top:.15rem;font-size:.8125rem;color:var(--mute);font-variant-numeric:tabular-nums}
.row-dir{font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line2);border-radius:4px;padding:0 .35rem;line-height:1.5}
.row-preview{margin-top:.35rem;font-size:.8125rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em}
.call-row.ended .row-name,.call-row.ended .row-time,.call-row.ended .row-preview{color:var(--dim);font-weight:400}
.call-row.ended .row-name{font-weight:500}
.call-row.ended .row-dot{display:none}
.call-row.ended .row-dir{color:var(--dim);border-color:var(--line)}
.call-list li.enter{animation:rowin .35s ease-out}
@keyframes rowin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{opacity:.3}}

.live-view{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0}
.view-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;gap:.35rem}
.empty-title{margin:0;font-size:1rem;font-weight:600}
.empty-sub{margin:0;color:var(--mute);font-size:.875rem}
.view{display:flex;flex-direction:column;flex:1;min-height:0}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:1.25rem 2rem 1rem;border-bottom:1px solid var(--line)}
.v-agent{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.v-meta{display:flex;align-items:center;gap:.75rem;margin-top:.3rem;color:var(--mute);font-size:.875rem;font-variant-numeric:tabular-nums}
.v-state{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--teal-ink);font-weight:500}
.v-state.ended{color:var(--dim)}
.v-state.ended .row-dot{display:none}
.v-timer{font-size:1.75rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.conv-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.conv{max-width:48rem;margin:0 auto;padding:1.75rem 2rem 3rem;display:flex;flex-direction:column;gap:1.4rem}
.run{display:flex;flex-direction:column;gap:.3rem;max-width:82%}
.run.caller{align-self:flex-start;align-items:flex-start}
.run.agent{align-self:flex-end;align-items:flex-end}
.run-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.run.agent .run-label{color:var(--teal-ink)}
.run-lines{display:flex;flex-direction:column;gap:.3rem;align-items:inherit}
.bubble{padding:.5rem .85rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);font-size:.9375rem;line-height:1.55;overflow-wrap:anywhere}
.run.agent .bubble{background:var(--teal-tint);border-color:var(--teal-edge)}
.bubble.partial{color:var(--mute);font-style:italic}
.w{animation:wordin .3s ease-out}
@keyframes wordin{from{opacity:0}to{opacity:1}}
.caret{display:inline-block;width:2px;height:1em;background:var(--teal);vertical-align:-.15em;margin-left:2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.conv-note{align-self:center;color:var(--dim);font-size:.8125rem}
.jump{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);box-shadow:0 1px 2px rgba(11,28,48,.12)}

/* ---------- responsive ---------- */
@media (min-width:1800px){
  html{font-size:18px}
  .live-main{grid-template-columns:420px minmax(0,1fr)}
  .conv{max-width:60rem}
}
@media (min-width:2500px){html{font-size:22px}}
@media (max-width:1300px){
  .board-body{grid-template-columns:1fr;gap:2.5rem}
}
@media (max-width:860px){
  body[data-page=live]{overflow:auto}
  .live-main{display:block;height:auto}
  .live-list-pane{border-right:0;border-bottom:1px solid var(--line)}
  .call-list{max-height:38vh}
  .live-view{height:75vh;min-height:24rem}
  .view-head{padding:1rem 1.25rem .8rem}
  .conv{padding:1.25rem 1.25rem 2.5rem}
  .run{max-width:92%}
}
@media (max-width:800px){
  .topbar{position:static;padding:.6rem 1rem}
  .brand-text b{display:none}
  .nav{order:3;align-self:auto;border-top:1px solid var(--line);margin:0 -1rem;padding:0 .3rem;width:calc(100% + 2rem)}
  .nav a{padding:.6rem .7rem}
  .nav a[aria-current=page]::after{bottom:0}
  .top-right{margin-left:auto;gap:.4rem .6rem}
  .who{display:none}
  main{padding:1.25rem 1rem 2rem}
  .kpis{gap:1.25rem 2rem}
  .kpi.lead .kpi-value{font-size:2.25rem}
  .queue{grid-template-columns:1fr repeat(3,3.6rem)}
  .filters .input{width:100%}
  .facts{grid-template-columns:1fr}
}
body.is-fullscreen .topbar{position:static}
body.is-fullscreen .nav,body.is-fullscreen .who,body.is-fullscreen #signout{display:none}
@media (prefers-reduced-motion:reduce){
  .agent.s-ringing,.row-dot,.caret,.w,.call-list li.enter{animation:none}
}

/* ---------- integrations ---------- */
.int-steps{display:grid;gap:2.5rem;max-width:56rem}
.int-step .sec-title{display:flex;align-items:center;gap:.6rem}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;border:1px solid var(--line2);font-size:.75rem;color:var(--mute);letter-spacing:0}
.crm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem}
.crm-card{font:inherit;text-align:left;background:var(--bg);color:var(--ink);border:1px solid var(--line2);border-radius:var(--r);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.25rem;min-height:4.5rem}
button.crm-card{cursor:pointer}
button.crm-card:hover{background:var(--hover)}
button.crm-card[aria-pressed=true]{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.crm-card.soon{color:var(--mute);border-style:dashed}
.crm-name{font-weight:600;font-size:.9375rem}
.crm-note{color:var(--dim);font-size:.8125rem}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.25rem;margin:0 0 1rem;align-items:center;font-size:.875rem}
.kv dt{color:var(--mute);font-size:.8125rem}
.kv dd{margin:0;word-break:break-all}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.secret-box{border:1px solid var(--teal-edge);background:var(--teal-tint);border-radius:var(--r);padding:.9rem 1rem;margin:0 0 1rem}
.secret-box p{margin:.2rem 0 .6rem}
.warn{color:var(--rg-t);font-size:.875rem;margin:.3rem 0 .8rem}
.instr{margin:1rem 0 0;padding-left:1.3rem;font-size:.875rem;line-height:1.6}
.toggle{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 .9rem;font-size:.875rem}
.toggle input{margin-top:.2rem;accent-color:var(--teal)}
.toggle small{display:block;color:var(--dim);font-size:.8125rem}
.status-grid{display:flex;flex-wrap:wrap;gap:1rem 3rem}
.stat-v{font-size:1.1rem;font-weight:600}
.field .help{color:var(--dim);font-size:.75rem;margin-top:.25rem}
.secret-state{font-size:.8125rem;color:var(--mute);display:flex;gap:.6rem;align-items:center}