@font-face{font-family:"Figtree";font-style:normal;font-display:swap;font-weight:300 900;src:url(/fonts/figtree-latin-wght-normal-202cfb54d4e66d1702404ade49339ceb.woff2) format("woff2-variations"),url(/fonts/figtree-latin-wght-normal-202cfb54d4e66d1702404ade49339ceb.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-display:swap;font-weight:300 900;src:url(/fonts/figtree-latin-ext-wght-normal-eca8d8b337ff647d44857ad24dae0251.woff2) format("woff2-variations"),url(/fonts/figtree-latin-ext-wght-normal-eca8d8b337ff647d44857ad24dae0251.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;src:url(/fonts/jetbrains-mono-latin-wght-normal-b058178d7f309414f8f856b99fd80d9b.woff2) format("woff2-variations"),url(/fonts/jetbrains-mono-latin-wght-normal-b058178d7f309414f8f856b99fd80d9b.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* CLASS Agent Softphone. The approved design's styles (docs/design/softphone-design.html, Sutherland tokens from
   docs/design/design-tokens.css) followed by the rules of the live pages. No inline styles anywhere: the
   Content-Security-Policy forbids them, so every style lives here. */
:root{color-scheme:light}
body{margin:0;background:#F2F3F6}
.app{--bg:#F2F3F6;--surface:#FFFFFF;--surface-2:#F6F7F9;--surface-3:#ECEEF2;--border:#E1E3E8;--border-strong:#C5C7C5;--text:#1B1A2E;--text-2:#454F52;--muted:#5F6A6D;--primary:#2E79BB;--primary-h:#25659E;--link:#2468A6;--primary-soft:#E7F0F9;--navy:#26235D;--navy-2:#1C1A4A;--navy-3:#353172;--red:#DE1B54;--red-btn:#C8174A;--red-text:#B0123F;--red-soft:#FCE8EE;--orange:#F99F42;--orange-text:#8F4C00;--orange-soft:#FEF1E2;--green:#6CC049;--green-text:#2C7314;--green-soft:#E9F6E3;--yellow:#F7D752;--yellow-soft:#FEF8D8;--violet:#5B4FC4;--shadow:0 1px 2px rgba(20,18,60,.06),0 1px 3px rgba(20,18,60,.05);font-family:Figtree,"Segoe UI",Arial,sans-serif;color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.app *{box-sizing:border-box}
.app a{color:var(--link)}
a:not([href]){cursor:default}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:12px}
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.s14{width:14px;height:14px}
svg.i.s18{width:18px;height:18px}
h1,h2,h3,h4{margin:0}
.top{min-height:56px;background:var(--navy-2);color:#fff;display:flex;align-items:center;gap:14px;padding:8px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;padding-right:6px}
.app .brand{color:#fff}
.brand .bt{font-weight:800;letter-spacing:.06em;font-size:15px}
.env{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:12px;border:1px solid #F15C87;color:#FF9FBB;font-size:11px;font-weight:700;letter-spacing:.08em}
.env .dot{width:7px;height:7px;border-radius:50%;background:#F15C87}
.tsel{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:4px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#E6E5F5;font:inherit;font-size:13px}
.gsearch{flex:1 1 260px;max-width:520px;display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#BDBBDA}
.gsearch input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:inherit;font-size:13.5px}
.gsearch input::placeholder{color:#AFADD0}
.gsearch kbd{font-family:inherit;font-size:11px;border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:1px 5px;color:#CFCDEA}
.tr{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.idle,.conn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#CFCDEA}
.idle b{color:#fff;font-weight:500}
.conn{color:#A9E290}
.ib{position:relative;width:36px;height:36px;border-radius:4px;border:0;background:transparent;color:#E6E5F5;display:inline-flex;align-items:center;justify-content:center}
.bdg{position:absolute;top:3px;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--navy-2)}
.um{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;color:#fff;font:inherit;padding:2px 4px;text-align:left}
.umt{display:flex;flex-direction:column;line-height:1.15}
.umt b{font-size:13px}
.umt small{font-size:11.5px;color:#BDBBDA}
.body{display:flex;flex-wrap:wrap;flex:1;align-items:stretch}
.nav{background:var(--navy);color:#D3D2EA;flex:1 0 236px;max-width:100%;padding:10px 0 20px;display:flex;flex-direction:column}
@media (min-width:900px){.nav{flex:0 0 236px}}
.nav-g{padding:16px 20px 6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9C9AC9;font-weight:700}
.app .nv{display:flex;align-items:center;gap:11px;min-height:34px;margin:1px 10px;padding:0 10px;border-radius:4px;color:#D8D7EE;text-decoration:none;font-size:13.5px}
.app .nv.on{background:var(--navy-3);color:#fff;font-weight:600}
.nv.on svg{color:#FF7FA2}
.nv svg{color:#A9A7D3}
.nv .new{margin-left:auto;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;background:#FF7FA2;color:var(--navy-2);border-radius:7px;padding:1px 6px}
.nb{margin-left:auto;min-width:20px;height:18px;border-radius:9px;background:rgba(255,255,255,.12);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px;color:#fff}
.nav-foot{margin-top:auto;padding:20px 20px 0;font-size:11.5px;color:#A6A4CF;line-height:1.4}
.page{flex:999 1 560px;min-width:0;padding:20px 28px 48px}
@media (max-width:600px){.page{padding:16px}}
.crumb{font-size:12.5px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.app .crumb a{text-decoration:none}
.h1{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-top:4px}
.h1-count{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:9px;background:var(--surface-3);color:var(--muted);font-size:11px;font-weight:600;line-height:14px;letter-spacing:0;vertical-align:super}
.sub{color:var(--muted);font-size:13px;margin-top:4px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.ph{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border-radius:4px;font-family:inherit;font-size:13px;font-weight:600;border:1px solid transparent;background:#E8E8E8;color:#454F52;white-space:nowrap;text-decoration:none;line-height:1}
.app .btn-primary{background:var(--primary);color:#fff}
.app .btn-secondary{background:var(--surface);color:var(--text-2);border-color:var(--border-strong)}
.app .btn-danger-o{background:transparent;color:var(--red-text);border-color:var(--red-text)}
.app .btn-ghost{background:transparent;color:var(--text-2)}
.btn[aria-disabled=true]{opacity:.45}
.btn-sm{height:28px;padding:0 10px;font-size:12px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.card-h h3{font-size:15px;font-weight:700}
.card-b{padding:16px}
.eyebrow{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.kpi{padding:14px 16px}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:4px;line-height:1.1}
.kpi .d{font-size:12.5px;color:var(--muted);margin-top:4px}
.tbox{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{background:var(--surface-3);text-align:left;font-weight:600;color:var(--text-2);font-size:12px;padding:0 12px;height:40px;white-space:nowrap}
.tbl td{padding:0 12px;height:44px;border-top:1px solid var(--border);white-space:nowrap}
.tbl tbody tr:nth-child(even) td{background:var(--surface-2)}
.app .tbl a.lk{color:var(--link);font-weight:600;text-decoration:none}
.tbl tr.sel td{background:var(--primary-soft)!important}
.tbl td.num,.tbl th.num{text-align:right}
.tbl td.wr{white-space:normal;line-height:1.35;padding-block:7px;min-width:220px}
.tbl td.org-cell{height:auto;padding-top:5px;padding-bottom:5px;line-height:1.3}
.org-cell .org-c,.org-cell .org-s{display:block}
.org-cell .org-c{font-size:13.5px;font-weight:500;color:var(--text)}
.org-cell .org-s{font-size:12.5px;color:var(--muted)}
.check-col{width:36px}
.tbl tr.gr td{background:var(--surface-3)!important;height:44px;border-top:1px solid var(--border-strong);color:var(--text)}
.gc{display:flex;align-items:center;gap:10px;font-weight:700;flex-wrap:wrap}
.gc .tw{display:inline-flex}
.gr.shut .tw{transform:rotate(-90deg)}
.gcont{font-weight:400;color:var(--muted)}
.gstat{display:inline-flex;gap:14px;font-weight:400;color:var(--muted);font-size:12.5px;margin-left:6px;flex-wrap:wrap}
.gstat b{color:var(--text);font-weight:600}
.tbl tr.gr ~ tr > td:first-child:not(.check-col){padding-left:22px}
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:11px;font-size:12px;font-weight:600;white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.p-green{background:var(--green-soft);color:var(--green-text)}
.p-red{background:var(--red-soft);color:var(--red-text)}
.p-orange{background:var(--orange-soft);color:var(--orange-text)}
.p-blue{background:var(--primary-soft);color:var(--link)}
.p-gray{background:var(--surface-3);color:var(--text-2)}
.p-violet{background:#EEECFB;color:#4B40AE}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:4px;background:var(--surface-3);color:var(--text-2);font-size:12.5px;border:1px solid var(--border)}
.chip b{color:var(--text)}
.av{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;border:2px solid var(--surface);flex:none;background:#2E79BB}
.top .av{border-color:var(--navy-2)}
.av-sm{width:24px;height:24px;font-size:10px}
.av-v{background:#5B4FC4}.av-o{background:#C26A00}.av-g{background:#4F9E2F}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.input{height:36px;border:1px solid var(--border-strong);border-radius:4px;padding:0 10px;background:var(--surface);color:var(--text);font-family:inherit;font-size:13.5px;width:100%;min-width:0}
textarea.input{height:auto;padding:8px 10px;resize:vertical}
select.input{appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 15px) 16px,calc(100% - 10px) 16px;background-size:5px 5px;background-repeat:no-repeat}
.w-auto{width:auto}
.w80{width:80px}
.help{font-size:12px;color:var(--muted)}
.sw{display:inline-flex;align-items:center;gap:10px;font-size:13.5px}
.sw .tk{width:36px;height:20px;border-radius:10px;background:var(--border-strong);position:relative;flex:none}
.sw .tk::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw .tk.on{background:var(--primary)}
.sw .tk.on::after{left:18px}
.app input[type=checkbox],.app input[type=radio]{accent-color:#2E79BB;width:16px;height:16px;margin:0}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto}
.app .tab{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap;margin-bottom:-1px}
.app .tab.on{color:var(--text);border-bottom-color:var(--primary)}
.tab .ct{font-size:11px;font-weight:700;background:var(--surface-3);color:var(--text-2);border-radius:9px;padding:1px 7px}
.alert{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:5px;font-size:13px}
.alert b{display:block;font-size:13.5px;margin-bottom:1px}
.a-warn{background:var(--yellow);color:#1B1A2E}
.a-soft{background:var(--primary-soft);color:var(--text);border:1px solid #C9DDF0}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--border);font-size:13px}
.feed li:first-child{border-top:0}
.kv{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:9px 14px;font-size:13px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0}
.tool{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px}
.bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px;border-top:1px solid var(--border);background:var(--surface-2);font-size:13px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}
.pg{display:flex}
.app .pg a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:34px;padding:0 12px;border:1px solid var(--border);margin-left:-1px;text-decoration:none;color:var(--link);font-size:13px;background:var(--surface)}
.app .pg a.on{background:var(--primary);border-color:var(--primary);color:#fff}
.app .pg a.dis{color:var(--muted)}
.savebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 6px 6px}
.mut{color:var(--muted)}
.edit-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--orange-text)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
/* review page */
.scr{margin-top:34px}
.cap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:8px;margin-bottom:12px;border-bottom:2px solid var(--navy)}
.cap .no{background:var(--navy);color:#fff;font-weight:800;font-size:12px;border-radius:3px;padding:2px 8px}
.cap h2{font-size:17px}
.cap p{margin:0;color:var(--muted);font-size:12.5px;flex:1 1 300px}
.frame{border:1px solid var(--border-strong);border-radius:8px;background:var(--bg);padding:18px;display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:12px}
.grow{flex:1}
.split{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.split>.mn{flex:999 1 560px;min-width:0}
.split>.sd{flex:1 1 320px;min-width:0}
.notes h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.notes ul{margin:0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:5px}
.code{background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:10px 12px;font-family:"JetBrains Mono",monospace;font-size:11.5px;white-space:pre-wrap;margin:6px 0 0;color:var(--text-2)}
.drop{border:2px dashed var(--border-strong);border-radius:6px;background:var(--surface-2);padding:16px;text-align:center;font-size:13px;color:var(--text-2)}
.chk{list-style:none;margin:0;padding:0;font-size:13px}
.chk li{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--border)}
.chk li:first-child{border-top:0}
.chk .r{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.ok{color:var(--green-text)}.fx{color:var(--orange-text)}.no2{color:var(--red-text)}
.box{border:1px solid var(--border);border-radius:5px;padding:12px;background:var(--surface)}
.f3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.f4{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end}
.sm{font-size:12px}
.b{font-weight:700}
.dim td{color:var(--muted)}
.sec{font-size:13px;font-weight:700;padding-top:4px}
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:4px;overflow:hidden}
.seg span{padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--text-2);background:var(--surface)}
.seg .on{background:var(--primary);color:#fff}
.attr{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:8px 16px;align-items:center;padding:10px 0;border-top:1px solid var(--border);font-size:13px}
.attr:first-child{border-top:0}
.attr .an b{display:block}
.attr .an span{font-size:12px;color:var(--muted)}
@media (max-width:600px){.attr{grid-template-columns:1fr}}
.sq{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none;vertical-align:-1px}
.c-teal{background:#1E9A8A}.c-amber{background:#F99F42}.c-red{background:#DE1B54}.c-blue{background:#2E79BB}.c-violet{background:#5B4FC4}.c-gray{background:#8A9093}.c-green{background:#6CC049}.c-yellow{background:#F7D752}
.sw-pick{display:flex;gap:6px;flex-wrap:wrap}
.sw-pick .sq{width:22px;height:22px;border-radius:4px;border:2px solid transparent}
.sw-pick .sq.on{border-color:var(--text);box-shadow:0 0 0 2px #fff inset}
.ord{display:flex;flex-direction:column;gap:6px}
.oi{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border);border-radius:5px;background:var(--surface);font-size:13px}
.oi .grip{color:var(--border-strong);letter-spacing:-2px;font-weight:700}
.oi .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.og{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:6px 2px 0}
.desk{width:300px;max-width:100%;border:1px solid #CFD3DA;border-radius:6px;background:#fff;box-shadow:0 8px 24px rgba(20,18,60,.14);font-size:13px;overflow:hidden}
.desk-h{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#2B2F36;color:#fff;font-weight:600}
.desk-h .st{margin-left:auto;font-size:12px;font-weight:500;color:#F9C784}
.dm{list-style:none;margin:0;padding:4px 0}
.dm li{display:flex;align-items:center;gap:9px;padding:6px 12px}
.dm li.hd{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 12px 3px}
.dm li.hl{background:var(--primary-soft)}
.dm li.in{padding-left:34px;font-size:12.5px;color:var(--text-2)}
.dm li.sep{border-top:1px solid var(--border);padding:0;margin:4px 0}
.dm .k{margin-left:auto;font-size:11px;color:var(--muted)}
.bar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;width:120px;display:inline-block;vertical-align:middle}
.bar>span{display:block;height:100%;border-radius:3px;background:var(--primary)}
.bar>.b-ok{background:var(--green)}.bar>.b-near{background:var(--orange)}.bar>.b-over{background:var(--red)}
.w20{width:20%}.w45{width:45%}.w60{width:60%}.w85{width:85%}.w92{width:92%}.w100{width:100%}
.diff-del{background:#FDECEF;color:#8A0F33}
.diff-add{background:#E6F5DE;color:#1F5C0B}
.dl{font-family:"JetBrains Mono",monospace;font-size:12px;padding:3px 8px;border-radius:3px}
.logo{width:28px;height:28px;flex:none}
.sr{position:absolute;width:0;height:0;overflow:hidden}
.tbl tr.warn td{background:var(--orange-soft)!important}
/* agent assist review */
.a-err{background:var(--red-btn);color:#fff}
.a-ok{background:#4F9E2F;color:#fff}
.app .btn-danger{background:var(--red-btn);color:#fff}
.nb.nb-r{background:var(--red)}
.tk-row{display:flex;gap:6px;flex-wrap:wrap}
.tok{font-family:"JetBrains Mono",monospace;font-size:11.5px;background:#EEECFB;color:#4B40AE;border-radius:3px;padding:1px 6px;white-space:nowrap}
.tok.rq{background:var(--green-soft);color:var(--green-text)}
.tok.fb{background:var(--red-soft);color:var(--red-text)}
.prov{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--border-strong);border-radius:4px;background:var(--surface-2);font-size:12.5px}
.coach{width:380px;max-width:100%;border:1px solid #CFD3DA;border-radius:6px;background:#F8F8F8;box-shadow:0 8px 24px rgba(20,18,60,.14);font-size:13px;overflow:hidden;flex:none}
.coach-h{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#26235D;color:#fff;font-weight:700}
.coach-h .r{margin-left:auto;display:flex;gap:8px;align-items:center;font-weight:500;font-size:12px}
.live{background:#34BD99;color:#fff;border-radius:9px;padding:1px 8px;font-size:11px;font-weight:700}
.wrap{background:#F99F42;color:#1B1A2E;border-radius:9px;padding:1px 8px;font-size:11px;font-weight:700}
.coach-c{background:#fff;border-bottom:1px solid var(--border);padding:10px 12px}
.coach-s{display:flex;align-items:center;gap:8px;padding:8px 12px 4px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.coach-b{padding:4px 12px 12px;display:flex;flex-direction:column;gap:8px}
.coach-f{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted);background:#fff}
.dotg{width:8px;height:8px;border-radius:50%;background:#34BD99;display:inline-block}
.ut{max-width:88%;padding:7px 10px;border-radius:12px 12px 12px 2px;background:#fff;border:1px solid var(--border);font-size:12.5px}
.ut.me{align-self:flex-end;border-radius:12px 12px 2px 12px;background:var(--primary-soft);border-color:#C9DDF0}
.ut .who{display:block;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.sg{border-radius:5px;padding:8px 10px;border:1px solid var(--border);background:#fff;font-size:12.5px}
.sg b{display:block}
.sg .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.sg.cmp{background:#FCE8EE;border-color:#F3B5C8}.sg.cmp .k{color:#B0123F}
.sg.cau{background:#FEF8D8;border-color:#EAD58A}.sg.cau .k{color:#7A5B00}
.sg.tip .k{color:var(--link)}.sg.pos .k{color:var(--green-text)}.sg.inf .k{color:#4B40AE}
.sg .say{margin-top:4px;padding:5px 8px;background:var(--surface-2);border-radius:4px;font-style:italic}
.sg .acts2{display:flex;gap:6px;margin-top:6px;align-items:center}
.gap{font-size:11px;color:var(--muted);text-align:center;border-top:1px dashed var(--border-strong);padding-top:4px}
.sent{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.sbar{display:inline-flex;gap:2px}
.sbar i{width:6px;height:14px;border-radius:2px;background:var(--surface-3);display:block}
.sbar i.n{background:var(--red)}.sbar i.m{background:var(--orange)}.sbar i.p{background:var(--green)}
.snip{font-size:12.5px;color:var(--text-2);white-space:normal;line-height:1.35;max-width:360px}
.tbl td.snipc{white-space:normal;padding-block:6px;min-width:260px}
.red{font-family:"JetBrains Mono",monospace;font-size:11px;background:var(--surface-3);border-radius:3px;padding:0 4px;color:var(--text-2)}
.mode{display:inline-flex;gap:4px}
.lt{display:flex;flex-direction:column;gap:6px;font-size:13px}
.lt .ln{display:grid;grid-template-columns:52px 76px 1fr;gap:8px;align-items:baseline}
.lt .tm{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}
.lt .sp{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.lt .ln.al{background:var(--red-soft);border-radius:4px;padding:4px 6px}
.ch{width:100%;height:150px;display:block}
.ch .ax{stroke:var(--border);stroke-width:1}
.ch .bl{fill:#2E79BB}.ch .bv{fill:#5B4FC4}.ch .bo{fill:#F99F42}
.ch text{font:11px Figtree,Arial,sans-serif;fill:var(--muted)}
.ch .vl{fill:var(--text);font-weight:600}
.lg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.lg span{display:inline-flex;gap:6px;align-items:center}
.w8{width:8%}.w12{width:12%}.w31{width:31%}.w38{width:38%}.w54{width:54%}.w66{width:66%}.w71{width:71%}.w78{width:78%}
.stack{display:flex;flex-direction:column;gap:10px}
.rule{display:grid;grid-template-columns:60px 1fr;gap:6px 10px;font-size:13px;align-items:baseline}
.rule .w{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lk2{color:var(--link);font-weight:600}
.ta{font-family:"JetBrains Mono",monospace;font-size:12.5px;line-height:1.6}
.tbl tr.gr ~ tr > td:first-child{padding-left:22px}
.tbl td.ck,.tbl th.ck{width:110px;text-align:center}
.ph2{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
/* ---------- agent softphone review ---------- */
.vp{overflow-x:auto;border-radius:8px}
.dsk{position:relative;min-width:1240px;max-width:1366px;margin:0 auto;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(20,18,60,.10)}
.dsk.h680{height:680px}.dsk.h720{height:720px}.dsk.h760{height:760px}
.dtop{min-height:52px;background:var(--navy-2);color:#fff;display:flex;align-items:center;gap:12px;padding:0 14px;flex:none}
.dtop .bt{font-weight:800;letter-spacing:.05em;font-size:14px;white-space:nowrap}
.stb{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 8px;border-radius:17px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:13px;white-space:nowrap}
.stb .sd{width:10px;height:10px;border-radius:50%;flex:none}
.stb .tm{font-family:"JetBrains Mono",monospace;font-weight:500;font-size:12px;color:#CFCDEA}
.sd.rdy{background:#6CC049}.sd.nr{background:#F99F42}.sd.acw{background:#F7D752}.sd.tk{background:#4FA3E8}.sd.off{background:#8A9093}.sd.red{background:#DE1B54}
.chn{display:flex;gap:6px}
.chn span{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:13px;background:rgba(255,255,255,.06);font-size:11.5px;color:#D8D7EE}
.chn span .sd{width:7px;height:7px;border-radius:50%;padding:0}
.dtop .tr{gap:12px}
.lnk{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#A9E290}
.lnk.w{color:#FFD08A}
.qw{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#CFCDEA}
.qw b{color:#fff;font-size:13px}
.dbody{display:grid;grid-template-columns:276px minmax(0,1fr) 344px;flex:1;min-height:0}
.dbody.two{grid-template-columns:276px minmax(0,1fr)}
.lcol{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.ccol{display:flex;flex-direction:column;min-width:0;min-height:0}
.rcol{background:#F8F8F8;border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.sp{padding:12px;border-bottom:1px solid var(--border)}
.sp .dial{display:flex;gap:6px}
.sp .dial .input{height:34px}
.btn-call{background:#4F9E2F;color:#fff}
.app .btn-call{background:#3D8A22;color:#fff}
.app .btn-hang{background:var(--red-btn);color:#fff}
.btn-ic{width:34px;padding:0}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.pad span{display:flex;flex-direction:column;align-items:center;justify-content:center;height:40px;border:1px solid var(--border);border-radius:5px;background:var(--surface-2);font-weight:700;font-size:15px}
.pad span small{font-size:8.5px;letter-spacing:.12em;color:var(--muted);font-weight:600}
.ilh{display:flex;align-items:center;gap:8px;padding:10px 12px 6px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.il{list-style:none;margin:0;padding:0 6px 6px;overflow:hidden}
.ii{display:grid;grid-template-columns:30px 1fr auto;gap:2px 9px;align-items:center;padding:8px;border-radius:5px;margin-bottom:2px;font-size:12.5px;border:1px solid transparent}
.ii.on{background:var(--primary-soft);border-color:#C9DDF0}
.ii.new{background:#FFF7EC;border-color:#F6D2A6}
.ii .mi{grid-row:span 2;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.mi.v{background:#2E79BB}.mi.c{background:#1E9A8A}.mi.e{background:#5B4FC4}.mi.s{background:#C26A00}.mi.r{background:#B0123F}
.ii b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ii .t{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);text-align:right}
.ii .s{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.ii .u{min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;justify-self:end}
.lfoot{margin-top:auto;padding:10px 12px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.ihd{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap}
.ihd h3{font-size:16px}
.ihd .meta{font-size:12.5px;color:var(--muted)}
.ctl{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);align-items:center}
.cb{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:60px;height:50px;padding:0 6px;border-radius:5px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);font-size:11px;font-weight:600}
.cb.on{background:var(--orange-soft);border-color:#F6C48A;color:var(--orange-text)}
.cb.hang{background:var(--red-btn);border-color:var(--red-btn);color:#fff}
.cb.pay{border-color:#9B92E6;color:#4B40AE;background:#F3F1FD}
.cb[aria-disabled=true]{opacity:.4}
.ctimer{font-family:"JetBrains Mono",monospace;font-size:20px;font-weight:500;color:var(--text)}
.cscroll{flex:1;min-height:0;overflow:hidden;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.rtabs{display:flex;background:var(--surface);border-bottom:1px solid var(--border)}
.rtabs span{flex:1;text-align:center;padding:10px 4px;font-size:12px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;display:inline-flex;gap:5px;justify-content:center;align-items:center}
.rtabs span.on{color:var(--text);border-bottom-color:var(--red)}
.rb{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.rcol .coach{width:auto;border:0;border-radius:0;box-shadow:none;flex:1;display:flex;flex-direction:column}
.rcol .coach .coach-b{flex:1}
.toast{position:absolute;right:360px;top:62px;width:340px;background:var(--surface);border:1px solid var(--border-strong);border-left:5px solid #2E79BB;border-radius:6px;box-shadow:0 12px 30px rgba(20,18,60,.22);padding:12px 14px;z-index:3;font-size:12.5px}
.toast.c{border-left-color:#1E9A8A}
.toast h4{font-size:14px;margin:2px 0}
.toast .acts{margin-top:10px}
.menu{position:absolute;top:50px;width:290px;background:var(--surface);border:1px solid var(--border-strong);border-radius:6px;box-shadow:0 12px 30px rgba(20,18,60,.22);z-index:4;font-size:13px;padding:4px 0}
.menu.l1{left:250px}
.menu .mh{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 12px 3px}
.menu .mi2{display:flex;align-items:center;gap:9px;padding:6px 12px}
.menu .mi2 .k{margin-left:auto;font-size:11px;color:var(--muted)}
.menu .mi2.hl{background:var(--primary-soft)}
.menu .sep{border-top:1px solid var(--border);margin:4px 0}
.menu .in{padding-left:30px;font-size:12.5px;color:var(--text-2)}
.bub{max-width:72%;padding:8px 11px;border-radius:12px 12px 12px 3px;background:var(--surface);border:1px solid var(--border);font-size:13px;line-height:1.4}
.bub.me{align-self:flex-end;border-radius:12px 12px 3px 12px;background:var(--primary-soft);border-color:#C9DDF0}
.bub.bot{background:#F3F1FD;border-color:#D9D4F7}
.bub .who{display:block;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.bub .ts{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;text-align:right}
.sys{align-self:center;font-size:11.5px;color:var(--muted);background:var(--surface-3);border-radius:10px;padding:2px 10px}
.rcard{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface);width:240px}
.rcard .im{height:84px;background:linear-gradient(135deg,#2E79BB,#26235D);color:#fff;display:flex;align-items:flex-end;padding:8px 10px;font-weight:700}
.rcard .bd{padding:8px 10px;font-size:12.5px}
.rcard .sr{display:flex;border-top:1px solid var(--border)}
.rcard .sr span{flex:1;text-align:center;padding:7px 4px;color:var(--link);font-weight:600;font-size:12px}
.qr{display:flex;gap:6px;flex-wrap:wrap}
.qr span{border:1px solid var(--primary);color:var(--link);border-radius:14px;padding:3px 10px;font-size:12px;font-weight:600;background:var(--surface)}
.compose{border-top:1px solid var(--border);background:var(--surface);padding:10px 16px;display:flex;flex-direction:column;gap:8px}
.compose .ta2{border:1px solid var(--border-strong);border-radius:5px;padding:8px 10px;min-height:58px;font-size:13px;color:var(--text)}
.sugg{border:1px solid #C9DDF0;background:var(--primary-soft);border-radius:5px;padding:6px 10px;font-size:12.5px;display:flex;gap:8px;align-items:center}
.srl{list-style:none;margin:0;padding:0;font-size:12.5px}
.srl li{padding:8px 12px;border-top:1px solid var(--border);background:var(--surface)}
.srl li.hl{background:var(--primary-soft)}
.srl li b{display:block;font-size:13px}
.srl li .mut{display:block}
.mailh{display:grid;grid-template-columns:70px 1fr;gap:5px 10px;font-size:12.5px}
.mailh dt{color:var(--muted)}.mailh dd{margin:0}
.mailbody{font-size:13px;line-height:1.55;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:12px 14px}
.quote{border-left:3px solid var(--border-strong);padding-left:10px;color:var(--muted);margin-top:8px}
.rtb{display:flex;gap:2px;border:1px solid var(--border-strong);border-bottom:0;border-radius:5px 5px 0 0;padding:4px;background:var(--surface-2)}
.rtb span{width:28px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;font-weight:700;font-size:12px;color:var(--text-2)}
.rte{border:1px solid var(--border-strong);border-radius:0 0 5px 5px;padding:10px 12px;min-height:150px;background:#fff;font-size:13px;line-height:1.55}
.sum{border:1px solid var(--border);border-radius:6px;background:var(--surface)}
.sum .sh{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border);font-weight:700;font-size:13px}
.sum .sb{padding:10px 12px;font-size:13px;line-height:1.5}
.sum .sb p{margin:0 0 6px}
.edited{background:#FFF7D6;border-radius:2px;padding:0 2px}
.acwbar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#FEF8D8;border-bottom:1px solid #EAD58A;flex-wrap:wrap}
.acwbar .big{font-family:"JetBrains Mono",monospace;font-size:22px;font-weight:600;color:#5C4500}
.prog{height:8px;border-radius:4px;background:#F2E7B1;overflow:hidden;flex:1 1 200px;min-width:160px}
.prog span{display:block;height:100%;background:#C79A00;border-radius:4px}
.radio-l{display:flex;flex-direction:column;gap:2px}
.radio-l label{display:flex;gap:9px;align-items:center;padding:7px 10px;border:1px solid var(--border);border-radius:5px;font-size:13px;background:var(--surface)}
.radio-l label.on{border-color:var(--primary);background:var(--primary-soft)}
.radio-l .ai{margin-left:auto}
.kb-r{padding:10px 12px;border-top:1px solid var(--border);background:var(--surface);font-size:12.5px}
.kb-r b{font-size:13.5px;display:block;color:var(--link)}
.kb-r .src{font-size:11px;color:var(--muted);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
.kb-art{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:14px 16px;font-size:13px;line-height:1.55}
.kb-art h4{font-size:15px;margin-bottom:6px}
.kb-art ol{margin:6px 0;padding-left:20px}
mark{background:#FFF0A8;padding:0 1px;border-radius:2px}
.spay{border:1px solid #D9D4F7;border-radius:6px;background:#fff;overflow:hidden}
.spay .ph3{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#26235D;color:#fff;font-weight:700;font-size:13px}
.spay .ph3 .r{margin-left:auto;font-weight:500;font-size:12px}
.steps{list-style:none;margin:0;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.steps li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;padding:6px 0}
.steps li .n{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;background:var(--surface-3);color:var(--muted)}
.steps li.dn .n{background:var(--green);color:#fff}
.steps li.cur .n{background:#5B4FC4;color:#fff}
.steps li.cur{font-weight:700}
.steps li .r{font-size:11.5px;color:var(--muted)}
.mask{display:flex;gap:10px;align-items:center;padding:10px 12px;background:#F3F1FD;border-top:1px solid #D9D4F7;font-size:12.5px}
.field-st{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:10px 12px;border-top:1px solid var(--border);font-size:12.5px}
.big-kpi{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.trend{font-size:12px;font-weight:600}
.trend.up{color:var(--green-text)}.trend.dn{color:var(--red-text)}
.spark{width:100%;height:36px;display:block;margin-top:6px}
.spark path{fill:none;stroke:#2E79BB;stroke-width:1.75}
.spark .tg{stroke:var(--border-strong);stroke-dasharray:3 3;stroke-width:1}
.statebar{display:flex;height:22px;border-radius:4px;overflow:hidden}
.statebar span{display:block;height:100%}
.sb-t{background:#2E79BB}.sb-r{background:#6CC049}.sb-a{background:#F7D752}.sb-n{background:#F99F42}.sb-b{background:#DE1B54}
.w5{width:5%}.w9{width:9%}.w14{width:14%}.w22{width:22%}.w50{width:50%}
.src-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:3px;padding:1px 6px;white-space:nowrap}
.src-app{background:#EEECFB;color:#4B40AE}.src-grp{background:var(--primary-soft);color:var(--link)}.src-me{background:var(--green-soft);color:var(--green-text)}.src-lock{background:var(--surface-3);color:var(--text-2)}
.meter{display:flex;gap:2px;align-items:flex-end;height:16px}
.meter i{display:block;width:5px;border-radius:1px;background:var(--surface-3)}
.meter i.g{background:var(--green)}
.meter .h3{height:5px}.meter .h5{height:7px}.meter .h7{height:9px}.meter .h9{height:11px}.meter .h11{height:13px}.meter .h13{height:15px}.meter .h15{height:16px}
.login-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;min-height:560px;background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;overflow:hidden}
.login-art{background:linear-gradient(160deg,#26235D 0%,#1C1A4A 55%,#353172 100%);color:#fff;padding:40px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.login-art h2{font-size:28px;line-height:1.15}
.login-art p{color:#CFCDEA;margin:0;font-size:14px}
.login-art .feat{display:flex;gap:10px;align-items:center;color:#E6E5F5;font-size:13px}
.login-art .feat svg{color:#FF7FA2}
.login-f{padding:36px 40px;display:flex;flex-direction:column;gap:14px;max-width:460px}
.sso{display:flex;flex-direction:column;gap:8px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--border)}
.place{display:flex;flex-direction:column;gap:6px}
.place label{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px}
.place label.on{border-color:var(--primary);background:var(--primary-soft)}
.place label .mut{display:block;font-size:12px}
.dev-check{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dev-check div{border:1px solid var(--border);border-radius:5px;padding:8px 10px;font-size:12px;display:flex;flex-direction:column;gap:3px}
.dev-check b{font-size:12.5px}
.narrow{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.nw{border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:var(--bg);font-size:11.5px}
.nw .dtop{min-height:40px;gap:8px;padding:0 10px}
.nw .bt{font-size:12px}
.nw-1024{width:520px}.nw-768{width:400px}.nw-390{width:210px}
.nwb{display:grid;height:260px}
.nw-1024 .nwb{grid-template-columns:120px 1fr 44px}
.nw-768 .nwb{grid-template-columns:44px 1fr}
.nw-390 .nwb{grid-template-columns:1fr}
.nwb>div{border-right:1px solid var(--border);padding:8px;display:flex;flex-direction:column;gap:6px}
.nwb .blk{background:var(--surface);border:1px solid var(--border);border-radius:4px;height:26px}
.nwb .blk.t{height:90px}.nwb .blk.s{height:16px}
.nwb .rail{background:#F8F8F8;align-items:center}
.nwb .ic{width:24px;height:24px;border-radius:5px;background:var(--surface-3)}
.nwb .ic.on{background:var(--red)}
.nwl{font-size:12px;color:var(--muted);margin-top:6px;max-width:520px}
.optt td.k{font-family:"JetBrains Mono",monospace;font-size:12px}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:0}
.hl-box{outline:2px dashed var(--red);outline-offset:2px;border-radius:5px}
.callout{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:800;flex:none}
.ann{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 18px;font-size:12.5px;color:var(--text-2)}
.ann li{display:block;position:relative;padding-left:28px;line-height:1.45}
.ann li .callout{position:absolute;left:0;top:0}
.toc{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:12.5px}
.toc a{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-decoration:none;color:var(--text-2)}
.toc a b{color:var(--navy)}
.ihd .mi{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.card .gsearch,.rcol .gsearch{max-width:none;background:var(--surface);border-color:var(--border-strong);color:var(--muted)}
.card .gsearch input,.rcol .gsearch input{color:var(--text)}
.card .gsearch kbd{border-color:var(--border-strong);color:var(--muted)}
.rcol .card-b{display:flex;flex-direction:column;gap:6px}
.toc{margin-top:18px}
.mono{overflow-wrap:anywhere}
.ann{margin-top:12px}
/* ===================================================================== live pages (not in the review canvas) */
[hidden]{display:none!important}
html,body{height:100%}
.app button{font-family:inherit}
.btn{cursor:pointer}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-lg{height:40px;font-size:14px}
.app .btn-primary:hover{background:var(--primary-h)}
.app .btn-call:hover{background:#2F7019}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}
.a-info{background:var(--primary-soft);color:var(--text);border:1px solid #C9DDF0}
.alert .grow{flex:1}
.alert .x{margin-left:auto;background:transparent;border:0;color:inherit;cursor:pointer;padding:0 2px;display:inline-flex}

/* the desk: full window, top bar + three columns (Phase 2: the right column has the Contact tab; Coach, Knowledge and Pay come later) */
.shell{position:relative;height:100vh;min-height:560px;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.shell .dbody{flex:1;min-height:0}
.shell .lcol,.shell .ccol,.shell .rcol{min-height:0}
.shell .ccol{overflow:auto}
.dtop .brand-s{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.links{display:flex;align-items:center;gap:12px}
.lnk.down{color:#FF9FBB}
.lnk .dotr{width:8px;height:8px;border-radius:50%;background:#F15C87;display:inline-block}

/* the state button and its menu (screen 2): a <details>, so it opens without script */
.stw{position:relative}
.stw>summary{list-style:none;cursor:pointer}
.stw>summary::-webkit-details-marker{display:none}
.stw .menu.l1{left:0;top:42px;max-height:70vh;overflow:auto}
.stb.alert{border-color:#FFD08A}
.stb.alert .tm{color:#FFD08A}
.stb.over{border-color:#F15C87;background:rgba(222,27,84,.35)}
.stb.over .tm{color:#fff}
.stb .sd.c-gray,.stb .sd.c-blue,.stb .sd.c-teal,.stb .sd.c-green,.stb .sd.c-yellow,.stb .sd.c-amber,.stb .sd.c-red,.stb .sd.c-violet{width:10px;height:10px}
.menu .mi2{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--text)}
.menu button.mi2:hover{background:var(--primary-soft)}
.menu .mi2[disabled]{opacity:.5;cursor:not-allowed}
.menu .mi2 .why{font-size:11px;color:var(--muted);margin-left:auto}
.menu .pend{padding:6px 12px;font-size:12px;color:var(--orange-text);display:flex;gap:8px;align-items:center}
.menu .pend button{margin-left:auto}
.legend-dot.c-gray,.legend-dot.c-blue,.legend-dot.c-teal,.legend-dot.c-green,.legend-dot.c-yellow,.legend-dot.c-amber,.legend-dot.c-red,.legend-dot.c-violet{border-radius:50%}

/* user menu */
.um-menu{position:relative}
.um-menu>summary{list-style:none;cursor:pointer}
.um-menu>summary::-webkit-details-marker{display:none}
.um-pop{right:0;left:auto;top:46px;width:260px;color:var(--text)}
.um-pop .mh{padding-top:10px}
.um-pop .lk-row{display:flex;gap:9px;align-items:center;padding:7px 12px;color:var(--text);text-decoration:none;font-size:13px}
.um-pop .lk-row:hover{background:var(--primary-soft)}

/* interactions, dialer, call controls */
.il .ii{cursor:pointer;width:100%;text-align:left;background:transparent;font:inherit;color:var(--text)}
.il li{list-style:none}
.il .empty{padding:10px 8px;font-size:12.5px;color:var(--muted)}
.pad button{display:flex;flex-direction:column;align-items:center;justify-content:center;height:40px;border:1px solid var(--border);border-radius:5px;background:var(--surface-2);font-weight:700;font-size:15px;cursor:pointer;color:var(--text)}
.pad button small{font-size:8.5px;letter-spacing:.12em;color:var(--muted);font-weight:600}
.pad button:hover{background:var(--surface-3)}
button.cb{cursor:pointer;font-family:inherit}
button.cb:hover:not([disabled]){border-color:var(--primary)}
button.cb[disabled]{opacity:.4;cursor:not-allowed}
.empty-state{margin:auto;max-width:420px;text-align:center;color:var(--muted);padding:40px 16px;display:flex;flex-direction:column;gap:8px;align-items:center}
.empty-state svg.i{width:28px;height:28px;color:var(--border-strong)}
.empty-state b{color:var(--text);font-size:15px}
.notes-form textarea{min-height:110px}
.notes-form .row{justify-content:space-between}
.kv dd.dd-wrap{overflow-wrap:anywhere}

/* toast (screen 2): over the centre column */
.shell .toast{right:16px;top:62px}
.toast .acts .btn-call{flex:1}

/* after-call work (screen 7) */
.acwbar form{display:inline-flex;gap:6px;align-items:center}
.acwbar select.input{height:28px;font-size:12px;width:auto}
.prog span{width:0}
.radio-l label{cursor:pointer}
.radio-l input{accent-color:#2E79BB}
.sd2{display:flex;flex-direction:column;gap:10px}

/* notice under the top bar */
.notice-slot{padding:0 16px}
.notice-slot .alert{margin-top:10px}

/* sign-in (screen 1, step 1) */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
.login-page .login-wrap{width:min(1040px,100%)}
.login-f form{display:flex;flex-direction:column;gap:14px}
.login-foot{margin-top:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:#CFCDEA}
.login-legal{font-size:11.5px;color:var(--muted);margin:0}
@media (max-width:760px){.login-wrap{grid-template-columns:1fr}.login-art{display:none}}

/* place, audio check (screen 1, step 2) */
.place-step{flex:1;overflow:auto;padding:24px;display:flex;justify-content:center;align-items:flex-start}
.place-step .card{width:min(760px,100%)}
.place label{cursor:pointer}
.place label:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.place .other{display:flex;flex-direction:column;gap:6px}
.place-results{display:flex;flex-direction:column;gap:4px}
.place-results button{border:1px solid var(--border);border-radius:5px;background:var(--surface);padding:7px 10px;text-align:left;cursor:pointer;font:inherit;font-size:13px}
.place-results button:hover{background:var(--primary-soft)}
.dev-check select.input{height:30px;font-size:12px}
.meter{height:16px}
.meter i{height:4px}
.meter i.l1{height:5px}.meter i.l2{height:7px}.meter i.l3{height:9px}.meter i.l4{height:11px}.meter i.l5{height:13px}.meter i.l6{height:15px}.meter i.l7{height:16px}.meter i.l8{height:16px}
.btn-link{background:none;border:0;padding:0;color:var(--link);font:inherit;font-weight:600;cursor:pointer;text-align:left}
.ok.sm,.no2.sm{font-size:12px}

/* settings (screen 11, audio) */
.settings-page{flex:1;overflow:auto;padding:20px 28px 48px}
.settings-page .split{margin-top:16px}
.attr select.input{max-width:320px}

/* idle warning and logout dialogs */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,18,60,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{width:min(460px,100%)}
.modal-head{display:flex;gap:12px;padding:16px 18px 6px;align-items:flex-start}
.modal-head h2{font-size:17px}
.modal-head p{margin:4px 0 0;color:var(--muted);font-size:13px}
.modal-body{padding:8px 18px 12px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 6px 6px}
.idle-countdown{font-size:32px;font-weight:600;margin:6px 0 10px}
.bar.wide{width:100%}
.bar-warn{background:var(--orange)}
dialog.card{padding:0;border:1px solid var(--border-strong);color:var(--text);width:min(440px,92vw)}
dialog::backdrop{background:rgba(20,18,60,.45)}
dialog form{margin:0}

/* the right column (Phase 2): Contact is the only active tab */
.rtabs span.off{opacity:.45;cursor:not-allowed}
.contact-tab{overflow:auto}
.contact-tab .coach-c .pill{margin-left:6px}
.contact-tab .coach-c .help{display:block;margin-top:2px}
.contact-tab .feed li{padding:8px 0}
.contact-tab .feed svg.i{flex:none;color:var(--muted)}
.empty-state.sm-empty{padding:28px 16px}
@media (max-width:1365px){.dbody{grid-template-columns:276px minmax(0,1fr) 300px}}

/* transfer and conference (screen 4) */
.transfer-dialog{width:min(660px,94vw)}
.transfer-dialog .card-h{display:flex;align-items:center;gap:10px;justify-content:space-between}
.transfer-results{max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:5px}
.transfer-results:empty{display:none}
.transfer-results .help,.transfer-results .alert{margin:8px 10px}
.tbl td.pick,.tbl th.pick{width:34px;text-align:center;padding:0 6px}
.tbl tr:has(input:checked) td{background:var(--primary-soft)!important}
.tbl td label{cursor:pointer}
.seg-r label{position:relative;cursor:pointer;display:inline-flex}
.seg-r input{position:absolute;opacity:0;pointer-events:none}
.seg-r label:has(input:checked) span{background:var(--primary);color:#fff}
.seg-r label:has(input:focus-visible) span{outline:2px solid var(--primary);outline-offset:-2px}
.consult .consult-calls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.consult .ii.on{border-color:var(--primary);background:var(--primary-soft)}
.ctl.ctl-in{padding:0;border:0;background:transparent}
.consult .kv{font-size:12px}
.shell .cscroll{overflow:auto}
.transfer-dialog .gsearch{flex:none;height:36px;max-width:none}
.transfer-results .tbl td{white-space:normal;height:auto;padding-block:8px}
.transfer-results .tbl td:nth-child(3){white-space:nowrap}

/* video (Phase 2V; screens 1, 2, 4, 5, 13 and 14 of the approved design) */
.mi.vd{background:#3F4C9E}
.vstage{position:relative;background:linear-gradient(160deg,#2B3550 0%,#1A1F33 100%);border-radius:8px;overflow:hidden;aspect-ratio:16/9;flex:none;color:#fff;width:100%}
.vstage.sm{aspect-ratio:4/3}
.vmedia{position:absolute;inset:0}
.vmedia video{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
.vmedia .vremote:not(.live){visibility:hidden}
.vpip{position:absolute;right:12px;bottom:58px;width:23%;min-width:96px;aspect-ratio:16/9;border:2px solid #fff;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,#5E6E8F,#39456A);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.vpip video{object-fit:cover;transform:scaleX(-1)}
.vpip.screen video{transform:none;object-fit:contain}
.vpip.hidden-self{display:none}
.vpip .lb,.vpip-lb{position:absolute;font-size:10.5px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.vpip-lb{right:16px;bottom:62px;max-width:22%;text-align:right;pointer-events:none}
.vov{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vov.r{left:auto;right:12px}
.vtag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:11px;background:rgba(10,10,30,.62);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap}
.vtag .rd{width:8px;height:8px;border-radius:50%;background:#FF4D7A}
.vtag.ok{color:#B6EFA0}.vtag.wn{color:#FFD08A}
.vname{position:absolute;left:12px;bottom:62px;font-size:13px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.vbar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;justify-content:center;align-items:center;padding:8px;background:linear-gradient(0deg,rgba(10,10,30,.75),rgba(10,10,30,0));flex-wrap:wrap}
.vb{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:54px;height:42px;padding:0 6px;border-radius:6px;background:rgba(255,255,255,.14);color:#fff;font-size:10.5px;font-weight:600;border:0;font-family:inherit;cursor:pointer}
.vb.off{background:#FFFFFF;color:#B0123F}
.vb.on{background:#2E79BB}
.vb[disabled],.vb[aria-disabled=true]{opacity:.4;cursor:not-allowed}
.qbars{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.qbars i{display:block;width:3px;border-radius:1px;background:rgba(255,255,255,.35)}
.qbars i:nth-child(1){height:4px}.qbars i:nth-child(2){height:7px}.qbars i:nth-child(3){height:10px}.qbars i:nth-child(4){height:12px}
.qbars i.g{background:#8CE070}.qbars i.a{background:#FFC46B}
.vcol{display:flex;flex-direction:column;gap:10px;padding:12px 16px;flex:1;min-height:0}
.offer{border:1px solid #C9DDF0;background:var(--primary-soft);border-radius:6px;padding:10px 12px;font-size:12.5px;display:flex;flex-direction:column;gap:6px}
.offer.wait{border-color:#F6D2A6;background:#FFF7EC}
.offer.done{border-color:#B9E0A6;background:var(--green-soft)}
.offer.fail{border-color:#F3B7C6;background:var(--red-soft)}
.offer .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dev-check.four{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.camrow{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:12px;align-items:start}
@media (max-width:600px){.camrow{grid-template-columns:1fr}}
.vprev{width:200px;max-width:100%}
.vprev video{transform:scaleX(-1)}
.chn button.chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:13px;background:rgba(255,255,255,.06);font-size:11.5px;color:#D8D7EE;border:0;font-family:inherit;cursor:pointer}
.chn button.chip:hover{background:rgba(255,255,255,.14)}
.chn button.chip .sd{width:7px;height:7px;border-radius:50%;padding:0}
.toast .pill.p-indigo{background:#E8EAF7;color:#3F4C9E}
.pill.p-indigo{background:#E8EAF7;color:#3F4C9E}
.cam-settings video{width:200px;max-width:100%;border-radius:6px;background:#1A1F33;transform:scaleX(-1)}
.cam-settings .vprev{aspect-ratio:16/9}
/* narrower screens (screen 14): the stage keeps 16:9 and is the last thing to shrink */
@media (max-width:1279px){.vpip{width:25%}}
@media (max-width:1023px){.vbar .vb.more-hide{display:none}.ctl{row-gap:6px}}
@media (max-width:767px){.vstage .vmedia,.vstage .vbar,.vstage .vpip-lb{display:none}}

/* ---------- Phase 3: screen 12 (My statistics and queues), the top bar's queue count, screen 13 tabs ---------- */
a.qw{text-decoration:none}
a.qw:hover b{text-decoration:underline}
a.qw:empty{display:none}
.statebar .empty{background:var(--border);width:100%}
.stats-off{color:var(--muted)}
.tabs a.tab{text-decoration:none;color:inherit}
.pres{display:inline-flex;gap:8px;align-items:center}
/* the day-by-state bar's widths, in whole percent (no inline style: the CSP forbids it) */
.pw0{width:0%}.pw1{width:1%}.pw2{width:2%}.pw3{width:3%}.pw4{width:4%}.pw5{width:5%}.pw6{width:6%}.pw7{width:7%}.pw8{width:8%}.pw9{width:9%}
.pw10{width:10%}.pw11{width:11%}.pw12{width:12%}.pw13{width:13%}.pw14{width:14%}.pw15{width:15%}.pw16{width:16%}.pw17{width:17%}.pw18{width:18%}.pw19{width:19%}
.pw20{width:20%}.pw21{width:21%}.pw22{width:22%}.pw23{width:23%}.pw24{width:24%}.pw25{width:25%}.pw26{width:26%}.pw27{width:27%}.pw28{width:28%}.pw29{width:29%}
.pw30{width:30%}.pw31{width:31%}.pw32{width:32%}.pw33{width:33%}.pw34{width:34%}.pw35{width:35%}.pw36{width:36%}.pw37{width:37%}.pw38{width:38%}.pw39{width:39%}
.pw40{width:40%}.pw41{width:41%}.pw42{width:42%}.pw43{width:43%}.pw44{width:44%}.pw45{width:45%}.pw46{width:46%}.pw47{width:47%}.pw48{width:48%}.pw49{width:49%}
.pw50{width:50%}.pw51{width:51%}.pw52{width:52%}.pw53{width:53%}.pw54{width:54%}.pw55{width:55%}.pw56{width:56%}.pw57{width:57%}.pw58{width:58%}.pw59{width:59%}
.pw60{width:60%}.pw61{width:61%}.pw62{width:62%}.pw63{width:63%}.pw64{width:64%}.pw65{width:65%}.pw66{width:66%}.pw67{width:67%}.pw68{width:68%}.pw69{width:69%}
.pw70{width:70%}.pw71{width:71%}.pw72{width:72%}.pw73{width:73%}.pw74{width:74%}.pw75{width:75%}.pw76{width:76%}.pw77{width:77%}.pw78{width:78%}.pw79{width:79%}
.pw80{width:80%}.pw81{width:81%}.pw82{width:82%}.pw83{width:83%}.pw84{width:84%}.pw85{width:85%}.pw86{width:86%}.pw87{width:87%}.pw88{width:88%}.pw89{width:89%}
.pw90{width:90%}.pw91{width:91%}.pw92{width:92%}.pw93{width:93%}.pw94{width:94%}.pw95{width:95%}.pw96{width:96%}.pw97{width:97%}.pw98{width:98%}.pw99{width:99%}
.pw100{width:100%}
/* ---- Phase 4: the right column's tabs, the Coach tab (screen 3) and the summary review (screen 9) ---- */
.rtabs button{flex:1;text-align:center;padding:10px 4px;font:inherit;font-size:12px;font-weight:600;color:var(--muted);border:0;border-bottom:2px solid transparent;background:transparent;display:inline-flex;gap:5px;justify-content:center;align-items:center;cursor:pointer}
.rtabs button.on{color:var(--text);border-bottom-color:var(--red)}
.rtabs button.off{opacity:.45;cursor:not-allowed}
.rtabs button .pill{padding:0 6px;font-size:10.5px}
.coach-tab{overflow:hidden}
.coach-tab .coach{min-height:0}
.coach-tab .coach-b{overflow:auto;min-height:0}
.coach-views{display:flex;gap:4px;padding:8px 12px 0}
.coach-views button{border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:3px 10px;font:inherit;font-size:12px;font-weight:600;color:var(--muted);display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.coach-views button.on{border-color:var(--navy);color:var(--navy);background:#EEEDF8}
.coach-tab .sg .help{display:block;margin:2px 0}
.coach-tab .sg .acts2 .lk2{margin-left:auto}
.thumb{border:1px solid var(--border);background:var(--surface);border-radius:4px;width:26px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;padding:0}
.thumb.on{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.thumb.down svg{transform:rotate(180deg)}
.tlines{gap:4px}
.tl{margin:0;font-size:12.5px;line-height:1.45;padding:3px 0;border-bottom:1px solid var(--surface-3)}
.tl b{display:inline-block;min-width:76px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.tl.cust b{color:var(--navy)}
.tl.you b{color:var(--green-text)}
.tl.sys{color:var(--muted);font-style:italic;text-align:center;border-bottom:1px dashed var(--border-strong)}
.coach-f .dotr,.coach-f .dotg{flex:none}
.sum-edit{margin-top:8px}
.sum-edit>summary{cursor:pointer;list-style:none;display:inline-block}
.sum-edit>summary::-webkit-details-marker{display:none}
.sum-edit form{margin-top:8px}
.sum .sb p.mut b{color:var(--muted)}
.coach-f .dotr{width:8px;height:8px;border-radius:50%;background:#F15C87;display:inline-block}
.rb[hidden],.coach-b[hidden]{display:none}

/* ---- Phase 5a: chat (screen 7) ---- */
.ccolw{display:flex;flex-direction:column;min-width:0;min-height:0}
.ccolw>.ccol{flex:1}
.shell .ccolw{min-height:0}
.chatlog{list-style:none;margin:0;overflow-y:auto}
.chatlog .bub{overflow-wrap:anywhere;align-self:flex-start}
.chatlog .bub .tx{white-space:pre-wrap}
.chatlog .bub.me{align-self:flex-end}
.chatlog .bub .file{display:inline-flex;gap:6px;align-items:center}
.chatlog .sys{text-align:center;max-width:90%}
.chatlog .typing{align-self:flex-start;font-size:12px;font-style:italic;color:var(--muted)}
#chat-compose textarea{min-height:58px;resize:vertical;font-family:inherit}
.p-teal{background:#E3F4F1;color:#14695E}
.xfer{position:relative}
.xfer>summary{list-style:none;cursor:pointer}
.xfer>summary::-webkit-details-marker{display:none}
.xfer-pop{position:absolute;right:0;top:34px;width:280px;z-index:4;padding:12px;gap:8px}
.wrap{margin:12px 16px 0}
.tabpane{flex:1;min-height:0;display:flex;flex-direction:column}
.tabpane[hidden]{display:none}
.responses-tab{overflow-y:auto}
.responses-tab .gsearch{flex:none;height:36px;max-width:none;background:var(--surface);border-color:var(--border-strong);color:var(--muted)}
.responses-tab .gsearch input{color:var(--text)}

/* ==== Phase 5b/5c: SMS and email (screens 7 and 8) ==== */
.ihd h3 .badge{margin-left:8px;vertical-align:middle}
.ii .pill.p-red{grid-column:3;justify-self:end}
.optout{margin:12px 16px 0;align-items:center}
.optout .btn{flex:none}
.seg-count{white-space:nowrap}
.seg-count.over{color:var(--red-text);font-weight:600}
.wbins{display:flex;flex-direction:column}
.wbins .il{flex:none}
.wb-err{padding:0 12px 6px}
.chatlog .mailline{list-style:none;align-self:stretch}
.mailbody{display:flex;flex-direction:column;gap:10px}
.mailbody .mailh dd{overflow-wrap:anywhere}
.mchips{display:flex;flex-wrap:wrap;gap:6px}
.mchips .chip{color:var(--text-2);text-decoration:none}
.mchips .chip.refused{background:var(--red-soft);color:var(--red-text);border-color:var(--red-soft)}
.mchips .chip .x{background:transparent;border:0;color:inherit;cursor:pointer;padding:0 0 0 4px;font:inherit}
.mailhtml{overflow-wrap:anywhere;overflow-x:auto}
.mailhtml p{margin:0 0 8px}
.mailhtml blockquote{border-left:3px solid var(--border-strong);margin:8px 0;padding-left:10px;color:var(--muted)}
.mailhtml table{border-collapse:collapse}
.mailhtml td,.mailhtml th{border:1px solid var(--border);padding:3px 6px}
.mail-compose{gap:0}
.mail-compose>.row{margin-top:8px}
.mail-compose .rtb button{width:28px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;
  font-weight:700;font-size:12px;color:var(--text-2);background:transparent;border:0;cursor:pointer;font-family:inherit}
.mail-compose .rtb button:hover{background:var(--surface-3)}
.mail-compose .rtb .grow{flex:1}
.mail-compose .rte{max-height:260px;overflow-y:auto;outline:none;background:var(--surface)}
.mail-compose .rte:focus{border-color:var(--primary)}
.mail-compose .rte p{margin:0 0 6px}
.mail-compose .quote[hidden],.mail-compose .chip[hidden]{display:none}
#mail-files:empty{display:none}
/* ---------- SecurePay (Phase 6, screen 11) ---------- */
.pay-tab{overflow:auto;padding:12px}
.pay-tab .spay .card-b{padding:12px}
.pay-tab .spay .card-b.row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
.pay-tab .spay .kv{grid-template-columns:minmax(70px,auto) 1fr;font-size:12.5px}
.pay-tab .spay .kv .input{width:100%}
.pay-tab .spay .ctl{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid #D9D4F7}
.pay-tab .spay .ctl .cb{min-width:54px}
.pay-tab .seg-r label.off{opacity:.45;cursor:not-allowed}
.pay-tab .mask .i{flex:none;color:#4B40AE}
.pay-tab .steps li.cur .r{color:#4B40AE}
button.cb.pay{cursor:pointer}
.vmedia.pay-paused video{visibility:hidden}
.vpaused{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:6px;background:rgba(38,35,93,.88);color:#fff;font-size:13px;font-weight:600;z-index:3}

/* ================================================================================================ Phase 7
   Themes (display.theme: system, light, dark) and the compact layout (display.compact), stored since Phase 3: the body
   gets t-system / t-light / t-dark and compact (DisplayAdvice). The tokens are those of docs/design/design-tokens.css
   (.app.t-dark), written with light-dark() so one declaration serves both schemes; t-system follows the computer's
   prefers-color-scheme through color-scheme. Then the narrow layouts of screen 14. */
.app.t-light{color-scheme:light}
.app.t-dark{color-scheme:dark}
.app.t-system{color-scheme:light dark}
.app{--bg:light-dark(#F2F3F6,#100F22);--surface:light-dark(#FFFFFF,#18172F);--surface-2:light-dark(#F6F7F9,#1F1E3A);--surface-3:light-dark(#ECEEF2,#28274A);--border:light-dark(#E1E3E8,#2D2C52);--border-strong:light-dark(#C5C7C5,#45446E);--text:light-dark(#1B1A2E,#ECECF5);--text-2:light-dark(#454F52,#C7C8DA);--muted:light-dark(#5F6A6D,#A0A2BA);--link:light-dark(#2468A6,#7FB3E6);--primary-soft:light-dark(#E7F0F9,#1D3150);--navy:light-dark(#26235D,#141331);--navy-2:light-dark(#1C1A4A,#0B0A1E);--navy-3:light-dark(#353172,#2A2860);--red-text:light-dark(#B0123F,#FF7FA2);--red-soft:light-dark(#FCE8EE,#3A1628);--orange-text:light-dark(#8F4C00,#FFB774);--orange-soft:light-dark(#FEF1E2,#3A2814);--green-text:light-dark(#2C7314,#94DB77);--green-soft:light-dark(#E9F6E3,#1B3317);--yellow-soft:light-dark(#FEF8D8,#37311A);--shadow:light-dark(0 1px 2px rgba(20,18,60,.06),none);--soft-border:light-dark(#C9DDF0,#2B4A72);--violet-soft:light-dark(#EEECFB,#2A2650);--violet-text:light-dark(#4B40AE,#B9B1FF)}
.app a:hover{color:light-dark(#25659E,#A5CBF0)}
/* the top bar's queue count is a link on navy: its own colour, in both themes (it took the page's link blue) */
.app .dtop a.qw,.app .dtop a.qw:hover{color:#CFCDEA;text-decoration:none}
.app .btn{background:light-dark(#E8E8E8,#2D2C52);color:light-dark(#454F52,#ECECF5)}
.rcol,.nwb .rail{background:light-dark(#F8F8F8,#1F1E3A)}
.desk,.spay,.sg,.coach-c,.coach-f{background:var(--surface)}
.coach{background:light-dark(#F8F8F8,#1F1E3A);border-color:var(--border)}
.a-soft,.a-info,.ii.on{border-color:var(--soft-border)}
.p-violet,.tok,.src-app{background:var(--violet-soft);color:var(--violet-text)}
.sg.inf .k{color:var(--violet-text)}
.sg.cmp{background:var(--red-soft);border-color:light-dark(#F3B5C8,#6B2A45)}
.sg.cmp .k{color:var(--red-text)}
.sg.cau{background:var(--yellow-soft);border-color:light-dark(#EAD58A,#6A5A22)}
.sg.cau .k{color:light-dark(#7A5B00,#FFD27A)}
.ii.new,.offer.wait{background:light-dark(#FFF7EC,#3A2814);border-color:light-dark(#F6D2A6,#7A5A2E)}
.cb.pay{border-color:light-dark(#9B92E6,#6E64C8);color:var(--violet-text);background:light-dark(#F3F1FD,#2A2650)}
.bub.bot{background:light-dark(#F3F1FD,#2A2650);border-color:light-dark(#D9D4F7,#45407A)}
.mask{background:light-dark(#F3F1FD,#2A2650);border-top-color:light-dark(#D9D4F7,#45407A)}
.edited{background:light-dark(#FFF7D6,#4A3F12)}
mark{background:light-dark(#FFF0A8,#5A4A10);color:var(--text)}
.acwbar{background:var(--yellow-soft);border-bottom-color:light-dark(#EAD58A,#6A5A22)}
.acwbar .big{color:light-dark(#5C4500,#FFD27A)}
.prog{background:light-dark(#F2E7B1,#5A4E22)}
.pill.p-indigo,.toast .pill.p-indigo{background:light-dark(#E8EAF7,#262B55);color:light-dark(#3F4C9E,#AEB8F5)}
.p-teal{background:light-dark(#E3F4F1,#143A35);color:light-dark(#14695E,#7FD8C9)}
.coach-views button.on{border-color:light-dark(#26235D,#8F8AE0);color:light-dark(#26235D,#D6D3FF);background:light-dark(#EEEDF8,#2A2860)}
.diff-del{background:light-dark(#FDECEF,#3A1628);color:light-dark(#8A0F33,#FFB3C6)}
.diff-add{background:light-dark(#E6F5DE,#1B3317);color:light-dark(#1F5C0B,#B8EBA3)}
.app input[type=checkbox],.app input[type=radio],.radio-l input{accent-color:light-dark(#2E79BB,#7FB3E6)}

/* compact layout: the same screens with less padding and smaller controls */
.app.compact{font-size:13px}
.compact .dtop{min-height:44px}
.compact .btn{height:30px;padding:0 11px}
.compact .input{height:32px}
.compact .ii{padding:5px 8px}
.compact .ii .mi{width:26px;height:26px}
.compact .sp{padding:8px 10px}
.compact .pad{gap:4px;margin-top:6px}
.compact .pad button{height:32px}
.compact .ctl{padding:6px 12px;gap:4px}
.compact .cb{height:42px;min-width:54px}
.compact .ihd{padding:8px 12px}
.compact .cscroll{padding:10px 12px;gap:8px}
.compact .card-h{padding:9px 12px}
.compact .card-b{padding:12px}
.compact .rtabs button{padding:7px 4px}
.compact .sg{padding:6px 8px}
.compact .lfoot{padding:6px 10px}

/* channel chips folded into the state button (shown only below 1024 px) */
.chn-dots{display:none;gap:3px;align-items:center}
.chn-dots .sd{width:7px;height:7px}
.chn-fold{display:none;padding:0 12px 6px}
.chn-fold .chn{flex-wrap:wrap}
.chn-fold .chn>span,.chn-fold .chip{background:var(--surface-3);color:var(--text-2)}
.narrow-note,.mtabs{display:none}

/* screen 14, 1024–1279: the right panel becomes an icon rail; a tab opens its panel as a 344 px overlay (coach.js keeps
   which one, and opens Coach by itself for a compliance alert). Video: the self-view 25 %, at least 96 px. */
@media (max-width:1279px){
    .dbody{grid-template-columns:276px minmax(0,1fr) 48px}
    .rcol{position:relative;z-index:3}
    .rcol .rtabs{flex-direction:column;border-bottom:0;height:100%;gap:2px;padding-top:6px;background:light-dark(#F8F8F8,#1F1E3A)}
    .rcol .rtabs button{flex:none;width:48px;height:46px;padding:0;font-size:0;gap:0;border-bottom:0;border-left:3px solid transparent;position:relative}
    .rcol .rtabs button svg.i{width:18px;height:18px}
    .rcol .rtabs button.on{border-bottom:0;border-left-color:var(--red)}
    .rcol .rtabs button .pill{position:absolute;top:4px;right:3px;height:16px;font-size:10px;padding:0 4px}
    .rcol>.rb{display:none}
    .rcol.rail-open>.rb:not([hidden]){display:flex;position:absolute;top:0;bottom:0;right:48px;width:344px;max-width:calc(100vw - 96px);background:light-dark(#F8F8F8,#1F1E3A);border-left:1px solid var(--border-strong);box-shadow:-12px 0 30px rgba(20,18,60,.22)}
    .rcol:not(.rail-open) .rtabs button.on{border-left-color:transparent}
    .shell .toast{right:64px}
}

/* 768–1023: the interaction list becomes a rail too (one icon per interaction, the unread badge kept); it opens over
   the centre on hover or keyboard focus. The channel chips fold into the state button; the stage takes the centre
   width, the stage controls fold to Mute, Camera and More, and the call controls wrap. */
@media (max-width:1023px){
    .dbody{grid-template-columns:64px minmax(0,1fr) 48px}
    .lcol{position:relative;z-index:3;overflow:visible}
    .lcol>*{width:64px}
    .lcol .sp,.lcol .lfoot{display:none}
    .lcol .ilh{font-size:0;padding:10px 0 4px;justify-content:center}
    .lcol .il{padding:0 4px}
    .lcol .ii{grid-template-columns:30px;justify-items:center;padding:6px 0;position:relative}
    .lcol .ii b,.lcol .ii .t,.lcol .ii .s,.lcol .ii .pill{display:none}
    .lcol .ii .u{position:absolute;top:2px;right:6px}
    .lcol .ii.new .mi{box-shadow:0 0 0 3px light-dark(#F6D2A6,#7A5A2E)}
    .lcol:hover,.lcol:focus-within{width:276px;box-shadow:12px 0 30px rgba(20,18,60,.22)}
    .lcol:hover>*,.lcol:focus-within>*{width:276px}
    .lcol:hover .sp,.lcol:focus-within .sp,.lcol:hover .lfoot,.lcol:focus-within .lfoot{display:flex}
    .lcol:hover .sp,.lcol:focus-within .sp{display:block}
    .lcol:hover .ilh,.lcol:focus-within .ilh{font-size:11px;padding:10px 12px 6px;justify-content:flex-start}
    .lcol:hover .ii,.lcol:focus-within .ii{grid-template-columns:30px 1fr auto;justify-items:stretch;padding:8px}
    .lcol:hover .ii b,.lcol:focus-within .ii b,.lcol:hover .ii .t,.lcol:focus-within .ii .t,.lcol:hover .ii .s,.lcol:focus-within .ii .s{display:block}
    .lcol:hover .ii .u,.lcol:focus-within .ii .u{position:static}
    .lcol{width:64px;transition:width .12s}
    .links>.chn{display:none}
    .chn-dots{display:inline-flex}
    .chn-fold{display:block}
    .dtop .brand-s .bt{display:none}
    .shell .toast{right:56px;width:min(340px,calc(100vw - 140px))}
}

/* below 768: one column with tabs (Work, Interactions, Contact & Coach), for supervisors and checks; agents are told it
   isn't supported. No video at this size (the stage hides its media). */
@media (max-width:767px){
    .narrow-note{display:flex;gap:8px;align-items:flex-start;padding:8px 12px;background:var(--yellow-soft);color:var(--text);font-size:12.5px;border-bottom:1px solid var(--border)}
    .mtabs{display:flex;background:var(--surface);border-bottom:1px solid var(--border)}
    .mtabs label{flex:1;text-align:center;padding:10px 4px;font-size:12.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer}
    .mtabs input:checked+label{color:var(--text);border-bottom-color:var(--red)}
    .mtabs input:focus-visible+label{outline:2px solid var(--primary);outline-offset:-2px}
    .dbody{display:flex;flex-direction:column}
    .dbody>.lcol,.dbody>.rcol{display:none;width:auto;border:0}
    .dbody>.ccolw{flex:1}
    .shell:has(#mtab-ixn:checked) .dbody>.lcol{display:flex;flex:1}
    .shell:has(#mtab-ixn:checked) .dbody>.ccolw,.shell:has(#mtab-side:checked) .dbody>.ccolw{display:none}
    .shell:has(#mtab-side:checked) .dbody>.rcol{display:flex;flex:1}
    .lcol>*,.lcol:hover>*,.lcol:focus-within>*{width:auto}
    .lcol:hover,.lcol:focus-within{width:auto;box-shadow:none}
    .lcol .sp,.lcol .lfoot{display:block}
    .lcol .ilh{font-size:11px;padding:10px 12px 6px;justify-content:flex-start}
    .lcol .ii{grid-template-columns:30px 1fr auto;justify-items:stretch;padding:8px}
    .lcol .ii b,.lcol .ii .t,.lcol .ii .s{display:block}
    .lcol .ii .u{position:static}
    .rcol .rtabs{flex-direction:row;height:auto;padding-top:0}
    .rcol .rtabs button{flex:1;width:auto;height:auto;padding:10px 4px;font-size:12px;gap:5px;border-left:0;border-bottom:2px solid transparent}
    .rcol .rtabs button.on,.rcol:not(.rail-open) .rtabs button.on{border-bottom-color:var(--red);border-left:0}
    .rcol .rtabs button .pill{position:static}
    .rcol>.rb:not([hidden]),.rcol.rail-open>.rb:not([hidden]){display:flex;position:static;width:auto;max-width:none;box-shadow:none;border:0}
    .dtop{flex-wrap:wrap;padding:6px 10px;gap:8px}
    .dtop .tr{gap:8px}
    .dtop .qw,.dtop .lnk{display:none}
    .shell .toast{left:8px;right:8px;width:auto}
    .shell:has(#workspace[hidden]) .mtabs{display:none}
}
/* Phase 7 dark theme: the Pay tab's violet details (Phase 6) */
.pay-tab .spay .ctl{border-top-color:light-dark(#D9D4F7,#45407A)}
.pay-tab .mask .i,.pay-tab .steps li.cur .r{color:var(--violet-text)}