@font-face{font-family:"Plus Jakarta Sans";src:url(/static/fonts/pjs.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--acc:#BFF747;--acc-ink:#1B1B1B;--brand:#1B1B1B;--ok:#22a861;--bad:#e5484d;--warn:#f5a524;--r:12px;--side:232px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
[data-theme=dark]{--bg:#121212;--panel:#1B1B1B;--panel2:#222;--hover:#2a2a2a;--line:#2e2e2e;--text:#f2f2ef;--muted:#9a9a94;--in:#262626;--out:#BFF747;--out-ink:#1B1B1B;--note:#3a3416;--note-ink:#f3e7a5;--shadow:0 12px 40px #0008;color-scheme:dark}
[data-theme=light]{--bg:#f4f4f1;--panel:#fff;--panel2:#f8f8f6;--hover:#f0f0ec;--line:#e6e6e1;--text:#1B1B1B;--muted:#6b6b66;--in:#efefeb;--out:#1B1B1B;--out-ink:#fff;--note:#fff6d6;--note-ink:#5b4a00;--shadow:0 12px 40px #0002;color-scheme:light}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font:14.5px/1.45 var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}.vh{position:absolute;left:-9999px}.muted{color:var(--muted)}.err{color:var(--bad);min-height:1em}.small{font-size:12.5px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
a{color:inherit}
/* controls */
.btn,button{font:inherit;font-weight:650;border:1px solid transparent;border-radius:10px;padding:9px 14px;cursor:pointer;background:var(--panel2);color:var(--text);display:inline-flex;align-items:center;gap:7px;justify-content:center;transition:background .12s,transform .05s}
button:hover{background:var(--hover)}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}
button.primary,.btn.primary{background:var(--acc);color:var(--acc-ink)}button.primary:hover{filter:brightness(.95)}
button.ok{background:var(--ok);color:#fff}button.danger{background:var(--bad);color:#fff}button.outline{background:transparent;border-color:var(--line)}
button.sm{padding:6px 10px;font-size:13px;border-radius:8px}button.big{width:100%;padding:13px;font-size:16px}
.iconbtn{background:transparent;padding:8px;border-radius:9px;color:var(--muted)}.iconbtn:hover{color:var(--text);background:var(--hover)}
input,select,textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;width:100%;background:var(--panel2);color:var(--text)}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
label{display:block;font-size:12px;color:var(--muted);font-weight:650;margin:10px 0 4px;text-transform:uppercase;letter-spacing:.04em}
kbd{font:600 11px var(--font);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--muted)}
/* auth */
#auth{min-height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 70% -10%,#2a3a10 0,#1B1B1B 45%) #1B1B1B;padding:20px}
.authcard{background:#202020;color:#f2f2ef;border:1px solid #2e2e2e;border-radius:20px;padding:32px 28px;width:100%;max-width:400px;box-shadow:0 30px 80px #0009}
.authcard h1{margin:18px 0 0;font-size:26px;letter-spacing:-.02em}.authcard .sub{color:#9a9a94;margin:2px 0 14px}.authlogo{height:36px}
.authcard input{background:#151515;color:#fff;border-color:#333;margin-bottom:4px}.authcard label{color:#9a9a94}.authfoot{color:#777;font-size:12px;text-align:center;margin:14px 0 0}
.code-in{font-size:28px;letter-spacing:12px;text-align:center}
/* shell */
#shell{display:flex;height:100%}
#side{width:var(--side);background:var(--brand);color:#e9e9e4;display:flex;flex-direction:column;padding:16px 12px;flex:none;border-right:1px solid #262626}
.brand{padding:4px 8px 18px}.logo-full{height:30px}.logo-mark{display:none;width:34px;height:34px}
#nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
#nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;color:#b9b9b3;font-weight:600;text-decoration:none;position:relative}
#nav a:hover{background:#262626;color:#fff}#nav a.on{background:#2b2b2b;color:#fff}#nav a.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--acc)}
#nav a.on .ic{color:var(--acc)}#nav .sep{height:1px;background:#2a2a2a;margin:8px 6px}
.badge{margin-left:auto;background:var(--acc);color:#1B1B1B;border-radius:10px;padding:0 7px;font-size:11.5px;font-weight:800;min-width:20px;text-align:center}.badge.red{background:var(--bad);color:#fff}.badge:empty{display:none}
.side-foot{border-top:1px solid #2a2a2a;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.avail{background:#232323;color:#ddd;justify-content:flex-start;width:100%}.avail i{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px #22a86133}
.avail.dnd i{background:var(--bad);box-shadow:0 0 0 3px #e5484d33}
.agent{display:flex;align-items:center;gap:10px;padding:6px 6px;cursor:pointer;border-radius:10px}.agent:hover{background:#262626}
.av{width:30px;height:30px;border-radius:50%;background:var(--acc);color:#1B1B1B;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.av.lg{width:56px;height:56px;font-size:20px}.av.alt{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.agent-name{font-weight:650;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mainwrap{flex:1;display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel);min-height:58px}
.m-logo{display:none;width:30px;height:30px}
.searchbox{flex:1;max-width:520px;justify-content:flex-start;background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-weight:500}
.searchbox span{flex:1;text-align:left}.top-r{margin-left:auto;display:flex;align-items:center;gap:4px}
.netq{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);padding:5px 10px;border:1px solid var(--line);border-radius:20px;margin-right:6px;white-space:nowrap}
.netq i{width:8px;height:8px;border-radius:50%;background:#777}.netq.ready i,.netq.good i{background:var(--ok)}.netq.fair i{background:var(--warn)}.netq.poor i{background:var(--bad)}.netq.dnd i{background:var(--bad)}
main{flex:1;overflow:auto;min-height:0}#view{height:100%}
.page{padding:22px 26px;max-width:1240px;margin:0 auto}
.page-h{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.page-h h2{margin:0;font-size:22px;letter-spacing:-.02em}.page-h .sp{flex:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px}
.card h3{margin:0 0 10px;font-size:16px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}tr:hover td{background:var(--panel2)}
.tbl{overflow-x:auto}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);font-size:12px;font-weight:600;white-space:nowrap}
.pill.ok{background:#22a8611f;border-color:#22a86155;color:var(--ok)}.pill.bad{background:#e5484d1a;border-color:#e5484d55;color:var(--bad)}.pill.warn{background:#f5a5241f;border-color:#f5a52455;color:#c98200}
[data-theme=dark] .pill.warn{color:var(--warn)}
.linechip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:1px 8px 1px 6px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);white-space:nowrap}
.linechip i{width:8px;height:8px;border-radius:2px;display:inline-block}
.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.row>*{flex:1;min-width:150px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}.stat small{color:var(--muted);font-weight:600}.stat b{display:block;font-size:24px;margin-top:4px}
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg button{background:transparent;padding:6px 11px;font-size:13px;border-radius:7px;color:var(--muted)}.seg button.on{background:var(--panel);color:var(--text);box-shadow:0 1px 3px #0003}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}.empty .ic{width:36px;height:36px;opacity:.5;margin-bottom:8px}
pre{white-space:pre-wrap;background:var(--panel2);padding:10px;border-radius:8px;max-height:300px;overflow:auto;font-size:12px}
.progress{height:8px;border-radius:6px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}.progress i{display:block;height:100%;background:var(--acc)}
/* inbox */
.inbox{display:grid;grid-template-columns:340px 1fr 300px;height:100%;min-height:0}
.inbox .convs{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--panel)}
.convs-h{padding:14px 14px 8px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
.convs-h .t{display:flex;align-items:center;gap:8px}.convs-h h2{margin:0;font-size:18px;flex:1}
.filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.filters select{width:auto;flex:1;padding:7px 9px;font-size:13px}
.chip{background:var(--panel2);border:1px solid var(--line);padding:5px 10px;border-radius:20px;font-size:12.5px;color:var(--muted)}.chip.on{background:var(--acc);color:#1B1B1B;border-color:var(--acc)}
#clist{overflow:auto;flex:1}
.conv{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.conv:hover{background:var(--panel2)}.conv.on{background:var(--hover)}.conv.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.conv .body{flex:1;min-width:0}.conv .l1{display:flex;gap:6px;align-items:center}.conv .nm{font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .tm{font-size:11.5px;color:var(--muted);white-space:nowrap}.conv .pv{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.conv.unread .nm,.conv.unread .pv{color:var(--text);font-weight:750}.conv .l3{display:flex;gap:6px;margin-top:5px;align-items:center}
.ubadge{background:var(--acc);color:#1B1B1B;border-radius:10px;padding:0 7px;font-size:11px;font-weight:800}
.thread{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg)}
.thead{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
.thead .who{flex:1;min-width:140px}.thead .who b{font-size:15.5px}.thead .back{display:none}
.msgs{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.day{align-self:center;font-size:11.5px;color:var(--muted);font-weight:700;margin:10px 0 4px;text-transform:uppercase;letter-spacing:.05em}
.m{max-width:72%;padding:9px 13px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word;line-height:1.4}
.m.in{background:var(--in);align-self:flex-start;border-bottom-left-radius:4px}.m.out{background:var(--out);color:var(--out-ink);align-self:flex-end;border-bottom-right-radius:4px}
.m small{display:block;font-size:11px;opacity:.7;margin-top:4px}.m .err{color:inherit;font-weight:700}
.m.note{background:var(--note);color:var(--note-ink);align-self:center;max-width:86%;border-radius:10px;border:1px dashed currentColor;font-size:13.5px}
.m.callev{align-self:center;background:transparent;color:var(--muted);font-size:12.5px;padding:2px}
.compose{border-top:1px solid var(--line);background:var(--panel);padding:10px 14px}
.compose-top{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}.compose-top label{margin:0}.compose-top select{width:auto;padding:6px 9px;font-size:13px}
.compose-row{display:flex;gap:8px;align-items:flex-end}.compose textarea{resize:none;min-height:44px;max-height:160px}
.compose .meta{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;gap:10px}
.mode-note .compose textarea{background:var(--note);color:var(--note-ink)}
.side-panel{border-left:1px solid var(--line);background:var(--panel);overflow:auto;padding:18px}
.side-panel h4{margin:16px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13.5px}.kv span:first-child{color:var(--muted)}
.qr-pop{position:absolute;bottom:100%;left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:300px;overflow:auto;z-index:5}
.qr-pop div{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line)}.qr-pop div:hover{background:var(--hover)}.qr-pop b{display:block;font-size:13px}.qr-pop small{color:var(--muted)}
/* calls */
.calls{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
.dial{text-align:center;position:sticky;top:0}
.dial .numin{font-size:28px;text-align:center;font-weight:700;border:0;background:transparent;letter-spacing:.5px;padding:8px 4px}
.cid{font-size:12.5px;color:var(--muted);margin:2px 0 6px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px auto;max-width:280px}
.keypad button{aspect-ratio:1/1;border-radius:50%;font-size:26px;font-weight:600;background:var(--panel2);border:1px solid var(--line);flex-direction:column;gap:0;line-height:1}
.keypad button small{font-size:9.5px;letter-spacing:2px;color:var(--muted);font-weight:700;margin-top:3px}.keypad button:active{background:var(--acc);color:#1B1B1B}
.callrow{display:flex;justify-content:center;gap:18px;align-items:center;margin-top:8px}
button.round{width:64px;height:64px;border-radius:50%;padding:0}button.round .ic{width:26px;height:26px}
.cl-item{display:flex;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line)}
.cl-item .dir{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel2);flex:none}
.cl-item.missed .dir{background:#e5484d22;color:var(--bad)}.cl-item.missed .who b{color:var(--bad)}.cl-item.vm .dir{background:#BFF74733;color:var(--text)}
.cl-item .who{flex:1;min-width:0}.cl-item audio{width:100%;max-width:340px;height:34px;margin-top:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--bad);display:inline-block}
/* call bar */
#callbar{position:fixed;right:18px;bottom:18px;z-index:40;background:#1B1B1B;color:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 18px 50px #000a;display:flex;align-items:center;gap:12px;border:1px solid #333;min-width:300px}
#callbar .who{flex:1}#callbar .who b{display:block}#callbar .who small{color:#aaa}#callbar button{background:#2a2a2a;color:#fff;padding:9px}#callbar button.on{background:var(--acc);color:#1B1B1B}#callbar button.danger{background:var(--bad)}
#callbar .q{font-size:11px;color:#aaa}
/* incoming + modal */
#incoming,#modal{position:fixed;inset:0;background:#000a;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.inc-card{background:#1B1B1B;color:#fff;border:1px solid #333;border-radius:24px;padding:30px 28px;text-align:center;min-width:300px;box-shadow:0 30px 80px #000c}
.inc-card h3{font-size:28px;margin:4px 0}.inc-card .eyebrow{color:var(--acc);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:12px;margin:12px 0 0}
.inc-pulse{width:72px;height:72px;border-radius:50%;background:var(--acc);color:#1B1B1B;display:flex;align-items:center;justify-content:center;margin:0 auto;animation:pulse 1.4s infinite}
.inc-pulse .ic{width:32px;height:32px}@keyframes pulse{0%{box-shadow:0 0 0 0 #BFF74799}100%{box-shadow:0 0 0 26px #BFF74700}}
.inc-btns{display:flex;justify-content:center;gap:40px;margin-top:22px}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;width:100%;max-width:560px;max-height:88vh;overflow:auto;box-shadow:var(--shadow)}
.modal-card.wide{max-width:760px}.modal-card h3{margin:0 0 6px;font-size:19px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.sr-item{display:flex;gap:10px;padding:10px;border-radius:10px;cursor:pointer;align-items:center}.sr-item:hover,.sr-item.on{background:var(--hover)}
.sr-item .t{flex:1;min-width:0}.sr-item small{color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
mark{background:var(--acc);color:#1B1B1B;border-radius:3px;padding:0 2px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}
#toast div{background:#1B1B1B;color:#fff;padding:11px 16px;border-radius:12px;box-shadow:var(--shadow);border:1px solid #333;font-weight:600;max-width:90vw}
#tabbar{display:none}
.steps{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}.steps span{padding:5px 12px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--muted)}.steps span.on{background:var(--acc);color:#1B1B1B;border-color:var(--acc)}
.preview-phone{background:var(--panel2);border:1px solid var(--line);border-radius:18px;padding:14px;max-width:340px}
.preview-phone .m{max-width:100%}
.kbd-list div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}
/* tablet: icon rail */
@media (max-width:1280px){.inbox{grid-template-columns:320px 1fr}.side-panel{display:none}}
@media (max-width:1024px){:root{--side:72px}#side{padding:14px 10px;align-items:center}.logo-full{display:none}.logo-mark{display:block}.brand{padding:0 0 16px}
  #nav a{padding:11px;justify-content:center}#nav a span.lbl{display:none}#nav a .badge{position:absolute;top:2px;right:0;margin:0;padding:0 5px;font-size:10px}#nav a.on::before{left:-10px}
  .avail span,.agent-name{display:none}.avail{justify-content:center;width:auto}.agent{justify-content:center}
  .inbox{grid-template-columns:290px 1fr}.calls{grid-template-columns:320px 1fr}.page{padding:18px}}
/* phone */
@media (max-width:720px){#side{display:none}#shell{flex-direction:column}
  .top{padding:8px 12px;gap:8px;min-height:52px;padding-top:max(8px,env(safe-area-inset-top))}.m-logo{display:block}.searchbox span,.searchbox kbd{display:none}.searchbox{flex:0 0 auto;padding:8px}
  #helpbtn{display:none}.netq span{display:none}.netq{padding:6px;margin:0}
  #tabbar{display:flex;border-top:1px solid var(--line);background:var(--panel);padding:4px 4px max(4px,env(safe-area-inset-bottom))}
  #tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:700;color:var(--muted);padding:6px 0;position:relative;text-decoration:none;cursor:pointer}
  #tabbar a.on{color:var(--text)}#tabbar a.on .ic{color:var(--text);stroke-width:2.4}#tabbar .badge{position:absolute;top:0;left:56%;margin:0;font-size:10px;padding:0 5px}
  .inbox{grid-template-columns:1fr}.inbox .thread{display:none}.inbox.open .convs{display:none}.inbox.open .thread{display:flex}.thead .back{display:inline-flex}
  .calls{grid-template-columns:1fr}.dial{position:static}.page{padding:14px}.m{max-width:85%}
  #callbar{left:10px;right:10px;bottom:70px;min-width:0}.modal-card{border-radius:16px;padding:18px}
  table.resp thead{display:none}table.resp tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}table.resp td{display:flex;justify-content:space-between;border:0;padding:4px 6px}
  table.resp td::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:700;margin-right:10px}}
/* ---- v5 view classes ---- */
.ic.sm{width:14px;height:14px}.ic.xl{width:44px;height:44px;opacity:.4}.grow{flex:1}.pad{padding:8px 4px}.wrap{flex-wrap:wrap}
.inbox{grid-template-columns:360px 1fr}
.clist-pane{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--panel)}
.clist-head{padding:12px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
.clist-head .row{align-items:center;gap:8px}.clist-head .row>*{min-width:0}.clist-head .row>input{flex:1}.clist-head .row>button{flex:none}
.filters select{flex:1 1 120px}.filters .seg{flex:none}.chk{display:flex;align-items:center;gap:5px;margin:0;text-transform:none;letter-spacing:0;font-size:13px;flex:none!important;min-width:0!important}.chk input{width:auto}
.clist{overflow:auto;flex:1}
.conv .av{background:var(--lc,var(--acc))}.conv .t{flex:1;min-width:0}
.conv .r1{display:flex;gap:8px;align-items:baseline}.conv .r1 b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conv .r1 small{color:var(--muted);font-size:11.5px}
.conv .r2{display:flex;gap:8px;align-items:center}.conv .prev{flex:1;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conv .r2 .badge{margin:0}
.conv.unread .prev,.conv.unread .r1 b{color:var(--text);font-weight:800}.conv .r3{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:650;padding:1px 8px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);margin-right:4px}.tag.bad{color:var(--bad);border-color:#e5484d55}
.thread-pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg)}
.empty.big{margin:auto}
.thead .av{background:var(--lc,var(--acc))}.thead .t{flex:1;min-width:0}.thead .t small{display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--muted)}.thead .tact{display:flex;gap:2px;flex-wrap:wrap}
.msg{display:flex;flex-direction:column;max-width:72%}.msg.inbound{align-self:flex-start}.msg.outbound{align-self:flex-end;align-items:flex-end}
.bub{padding:9px 13px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word;background:var(--in);border-bottom-left-radius:4px}
.msg.outbound .bub{background:var(--out);color:var(--out-ink);border-radius:16px;border-bottom-right-radius:4px}
.msg small{font-size:11px;color:var(--muted);margin-top:3px;display:flex;gap:6px;align-items:center}
.note{align-self:center;max-width:86%;background:var(--note);color:var(--note-ink);border:1px dashed currentColor;border-radius:10px;padding:8px 12px;font-size:13.5px}.note small{display:block;opacity:.7;font-size:11px}
.banner{padding:10px 14px;border-radius:10px;margin:8px 0;display:flex;gap:8px;align-items:center;font-size:13.5px;background:var(--panel2);border:1px solid var(--line)}.banner.bad{background:#e5484d1a;color:var(--bad)}.banner.warn{background:#f5a5241a;border-color:#f5a52455}
.thread-pane>.banner{margin:0 14px}
.composer{border-top:1px solid var(--line);background:var(--panel);padding:8px 14px 12px}
.ctabs{display:flex;gap:4px;align-items:center;margin-bottom:6px}.ctabs button{background:transparent;padding:5px 10px;font-size:13px;color:var(--muted)}.ctabs button.on{color:var(--text);box-shadow:inset 0 -2px 0 var(--acc);border-radius:0}
.composer textarea{resize:vertical;min-height:48px;max-height:200px}.notemode textarea{background:var(--note);color:var(--note-ink)}
.crow{display:flex;gap:8px;align-items:center;margin-top:6px}
.calls{padding:20px;grid-template-columns:340px 1fr;max-width:1300px;margin:0 auto}
.keypad-card{text-align:center;position:sticky;top:0}.keypad-card label{text-align:left}
.kp-display{display:flex;align-items:center;gap:4px}.kp-display input{font-size:24px;text-align:center;font-weight:700;border:0;background:transparent}
.callbtn{margin-top:12px}.hist-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}.hist-head h3{margin:0;flex:1}
.callrow{justify-content:flex-start;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);margin:0}
.callrow .t{flex:1;min-width:0}.callrow .t small{display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--muted)}.callrow audio{width:100%;max-width:340px;height:34px;margin-top:6px;display:block}
.cicon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel2);flex:none}
.callrow.missed .cicon{background:#e5484d22;color:var(--bad)}.callrow.missed b{color:var(--bad)}.callrow.new{background:#e5484d0d}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}.toolbar input{max-width:340px}.toolbar select{width:auto}.toolbar p{margin:0}
.list{padding:4px 10px}
.ctrow{display:flex;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer}.ctrow:last-child{border-bottom:0}.ctrow:hover{background:var(--panel2)}
.ctrow .t{flex:1;min-width:0}.ctrow .t small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.ctrow .av{background:var(--lc,var(--panel2))}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.bulk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.bulk-grid .row{align-items:center}.bulk-grid input[type=file]{border:0;padding:6px 0;background:none}
.stats{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}.stats div{flex:1;min-width:80px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}.stats b{display:block;font-size:20px}.stats small{color:var(--muted)}
.stats .ok b{color:var(--ok)}.stats .bad b{color:var(--bad)}
.tablewrap{overflow:auto;max-height:340px}tr.dim td{opacity:.55}
.camp{display:flex;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}.camp .t{flex:1;min-width:240px}.camp .t small{display:block;color:var(--muted);margin-top:3px}
.camp-act{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}.camp-body{margin-top:6px;white-space:pre-wrap}
.bar{height:7px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);overflow:hidden;margin-top:8px;max-width:420px}.bar i{display:block;height:100%;background:var(--acc)}
.settings .row>button{flex:none;min-width:0}
#callbar{flex-wrap:wrap}.cb-who{display:flex;gap:10px;align-items:center;flex:1;min-width:0}.cb-who small{display:flex;gap:6px;align-items:center;color:#aaa;flex-wrap:wrap}
.cb-dot{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none}.cb-dot.fair{background:var(--warn)}.cb-dot.poor{background:var(--bad)}
.cb-act{display:flex;gap:6px;align-items:center}#callbar .cb-act .iconbtn{color:#fff}#callbar .round{width:46px;height:46px}
.cb-keys{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:100%}.cb-keys button{padding:8px}
#callbar .linechip{background:#2a2a2a;border-color:#3a3a3a;color:#eee}
@media (max-width:1024px){.inbox{grid-template-columns:300px 1fr}.calls{grid-template-columns:300px 1fr}.bulk-grid{grid-template-columns:1fr}.hide-sm{display:none}}
@media (max-width:720px){.inbox{grid-template-columns:1fr}.inbox .thread-pane{display:none}.inbox.has-thread .clist-pane{display:none}.inbox.has-thread .thread-pane{display:flex}
  .calls{grid-template-columns:1fr;padding:12px}.keypad-card{position:static}.msg{max-width:86%}.grid2{grid-template-columns:1fr}.toolbar input{max-width:none}
  .filters .seg button{padding:6px 8px}body.oncall main{padding-bottom:90px}}
@media (min-width:721px){.thead .back{display:none}}