:root{
  --rail:#2a0a2b; --side:#3f0e40; --side-text:#cdbfcd; --side-dim:#a592a5; --side-hover:rgba(255,255,255,.08); --side-line:rgba(255,255,255,.12);
  --accent:#2563eb; --accent-hover:#1d4fc4; --green:#2bac76; --green-hover:#238f61; --red:#e01e5a; --amber:#ecb22e;
  --bg:#ffffff; --bg2:#f8f8f8; --text:#1d1c1d; --muted:#616061; --line:#e3e3e3; --card:#ffffff; --shadow:0 8px 30px rgba(0,0,0,.18);
  --font:"Lato","Segoe UI",system-ui,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#1a1d21; --bg2:#222529; --text:#d1d2d3; --muted:#ababad; --line:#35373b; --card:#222529; --shadow:0 8px 30px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--rail);color:var(--text);font:15px/1.4 var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select{font:inherit;color:inherit}
kbd{font:600 11px var(--font);padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.14);color:#e8dce8}

/* title bar (Slack-style search) */
#titlebar{position:fixed;top:0;left:0;right:0;height:40px;background:var(--rail);display:flex;align-items:center;-webkit-app-region:drag;z-index:20}
.tb-left{width:70px}
.tb-right{width:150px}
.tb-mid{flex:0 1 720px;margin:0 auto;display:flex;align-items:center;gap:8px;min-width:0}
#tb-report,#tb-feature{-webkit-app-region:no-drag;flex:none;height:26px;border-radius:7px;background:rgba(255,255,255,.12);color:#e8dce8;display:flex;align-items:center;gap:6px;padding:0 11px;font-size:12.5px;font-weight:600;white-space:nowrap;border:0;cursor:pointer}
#tb-report:hover,#tb-feature:hover{background:rgba(255,255,255,.22)}#tb-report svg,#tb-feature svg{width:14px;height:14px}
:root[data-skin="light"] #tb-report,:root[data-skin="light"] #tb-feature{background:rgba(15,23,42,.07);color:#475569}
@media (max-width:900px){#tb-report span:nth-child(2),#tb-feature span:nth-child(2){display:none}}
#tb-search{-webkit-app-region:no-drag;flex:1 1 560px;margin:0;height:26px;border-radius:7px;background:rgba(255,255,255,.18);color:#e8dce8;display:flex;align-items:center;gap:8px;padding:0 10px;font-size:13px}
#tb-search:hover{background:rgba(255,255,255,.26)}
#tb-search span:nth-child(2){flex:1;text-align:left;opacity:.9}
#tb-search svg{width:14px;height:14px}

/* shell */
#app{position:fixed;top:40px;left:0;right:0;bottom:0;display:flex}
#rail{width:70px;background:var(--rail);display:flex;flex-direction:column;align-items:center;padding:6px 0 12px;gap:6px;flex:none}
.ws{width:38px;height:38px;border-radius:10px;background:#fff;color:#2a0a2b;font-weight:900;font-size:19px;display:grid;place-items:center;margin-bottom:8px}
.rail-btn{width:52px;padding:6px 0 4px;border-radius:10px;color:#cdbfcd;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;position:relative}
.rail-btn .bx{width:36px;height:36px;border-radius:9px;display:grid;place-items:center}
.rail-btn:hover .bx{background:rgba(255,255,255,.12)}
.rail-btn.on .bx{background:rgba(255,255,255,.22);color:#fff}
.rail-btn.on{color:#fff}
.rail-btn svg{width:20px;height:20px}
.badge{position:absolute;top:2px;right:6px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;border:2px solid var(--rail)}
.spacer{flex:1}
.me{position:relative;width:38px;height:38px;cursor:pointer}
.me .av{width:38px;height:38px;border-radius:9px}
.dot{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;border:3px solid var(--rail);background:#7a6a7a}
.dot.on{background:var(--green)} .dot.connecting{background:var(--amber)} .dot.dnd{background:var(--red)} .dot.away{background:#7a6a7a}

#side{width:268px;background:var(--side);border-top-left-radius:10px;display:flex;flex-direction:column;color:var(--side-text);flex:none;min-height:0}
.side-head{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 16px;border-bottom:1px solid var(--side-line);color:#fff;font-weight:900;font-size:18px}
.side-head .compose{width:34px;height:34px;border-radius:50%;background:#fff;color:#3f0e40;display:grid;place-items:center}
.side-head .compose:hover{background:#efe6ef}
.side-head svg{width:18px;height:18px}
.side-scroll{flex:1;overflow:auto;padding:10px 0}
.side-scroll::-webkit-scrollbar{width:8px}.side-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.sec{padding:12px 16px 4px;font-size:13px;font-weight:700;color:var(--side-dim);display:flex;align-items:center;gap:6px}
.item{display:flex;align-items:center;gap:9px;height:30px;margin:0 8px;padding:0 10px;border-radius:7px;cursor:pointer;color:var(--side-text);white-space:nowrap;overflow:hidden}
.item:hover{background:var(--side-hover)}
.item.on{background:var(--accent);color:#fff}
.item svg{width:16px;height:16px;flex:none;opacity:.85}
.item .t{flex:1;overflow:hidden;text-overflow:ellipsis}
.item.unread .t{color:#fff;font-weight:800}
.item .cnt{background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:9px;padding:0 6px;min-width:18px;text-align:center}
.item .av.sm{width:20px;height:20px;border-radius:5px;font-size:10px;position:relative}
.empty-side{padding:6px 18px;font-size:13px;color:var(--side-dim)}

/* huddle-style call bar in sidebar */
.huddle{margin:8px;border-radius:10px;background:#1b3d2f;border:1px solid #2bac76;color:#fff;padding:10px 12px;display:none;align-items:center;gap:10px}
.huddle.show{display:flex}
.huddle .hn{flex:1;min-width:0}.huddle .hn b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.huddle .hn span{font-size:12px;opacity:.8}
.huddle button{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff}
.huddle button.end{background:var(--red)}
.huddle svg{width:15px;height:15px}

/* main */
#main{flex:1;min-width:0;background:var(--bg);display:flex;flex-direction:column;position:relative;border-top-left-radius:0}
#side + #main{border-left:1px solid var(--line)}
.m-head{height:50px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 20px}
.m-head h1{margin:0;font-size:18px;font-weight:900;display:flex;align-items:center;gap:8px}
.m-head .sub{color:var(--muted);font-size:13px}
.m-head .grow{flex:1}
.m-body{flex:1;overflow:auto;min-height:0}
.m-body::-webkit-scrollbar{width:10px}.m-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.pill-btn{height:30px;padding:0 12px;border-radius:7px;border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;background:var(--bg)}
.pill-btn:hover{background:var(--bg2)}
.pill-btn svg{width:15px;height:15px}
.pill-btn.green{background:var(--green);border-color:var(--green);color:#fff}.pill-btn.green:hover{background:var(--green-hover)}
.pill-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.pill-btn.primary:hover{background:var(--accent-hover)}
.pill-btn.danger{color:var(--red);border-color:var(--red)}

/* feed (message-style call log) */
.day{display:flex;align-items:center;gap:12px;margin:14px 20px 6px;color:var(--muted);font-size:13px;font-weight:700}
.day::before,.day::after{content:"";flex:1;height:1px;background:var(--line)}
.day span{border:1px solid var(--line);border-radius:14px;padding:2px 12px;background:var(--bg)}
.row{display:flex;gap:10px;padding:6px 20px;position:relative}
.row:hover{background:var(--bg2)}
.av{width:36px;height:36px;border-radius:7px;color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center;flex:none;text-transform:uppercase}
.row .who{font-weight:900}
.row .ts{color:var(--muted);font-size:12px;margin-left:6px}
.row .what{display:flex;align-items:center;gap:6px;color:var(--text)}
.row .what svg{width:15px;height:15px}
.row .what.missed{color:var(--red);font-weight:700}
.row .what .num{color:var(--muted)}
.row .tools{position:absolute;right:20px;top:-14px;display:none;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.row:hover .tools{display:flex}
.row .tools button{width:30px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}
.row .tools button:hover{background:var(--bg2);color:var(--text)}
.row .tools svg{width:16px;height:16px}
.empty{padding:60px 20px;text-align:center;color:var(--muted)}
.empty .big{font-size:20px;font-weight:900;color:var(--text);margin-bottom:6px}

/* composer */
.composer{flex:none;margin:0 20px 18px;border:1px solid var(--line);border-radius:10px;background:var(--bg);display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px}
.composer:focus-within{border-color:#8a8a8a;box-shadow:0 0 0 1px #8a8a8a}
.composer input{flex:1;border:0;outline:0;background:none;height:34px;font-size:15px}
.composer .go{height:34px;padding:0 16px;border-radius:7px;background:var(--green);color:#fff;font-weight:800;display:flex;align-items:center;gap:6px}
.composer .go:hover{background:var(--green-hover)}
.composer .go svg{width:16px;height:16px}

/* dialpad */
.dial{max-width:360px;margin:0 auto;padding:26px 20px}
.dial .display{width:100%;text-align:center;font-size:30px;font-weight:700;letter-spacing:.5px;border:0;outline:0;background:none;height:56px;border-bottom:1px solid var(--line)}
.dial .who{height:22px;text-align:center;color:var(--muted);font-size:13px;margin:6px 0 10px}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 18px}
.key{height:62px;border-radius:12px;border:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:22px;font-weight:800;line-height:1}
.key small{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--muted);margin-top:3px;height:9px}
.key:hover{background:var(--bg2)}.key:active{transform:scale(.97)}
.dial-actions{display:grid;grid-template-columns:1fr 2fr 1fr;gap:12px;align-items:center}
.callbtn{height:54px;border-radius:27px;background:var(--green);color:#fff;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.callbtn:hover{background:var(--green-hover)}.callbtn svg{width:20px;height:20px}
.ghost{height:54px;border-radius:12px;display:grid;place-items:center;color:var(--muted)}.ghost:hover{background:var(--bg2)}.ghost svg{width:22px;height:22px}
.suggest{margin-top:16px}
.suggest .s{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;cursor:pointer}.suggest .s:hover{background:var(--bg2)}

/* contacts grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding:18px 20px}
.card{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;gap:12px;align-items:center;background:var(--bg);cursor:pointer}
.card:hover{background:var(--bg2)}
.card .av{width:44px;height:44px;border-radius:9px;font-size:16px}
.card .n{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card .e{color:var(--muted);font-size:13px}
.search{margin:14px 20px 0;display:flex}.search input{flex:1;height:36px;border-radius:8px;border:1px solid var(--line);padding:0 12px;background:var(--bg);outline:0}

/* settings */
.settings{max-width:680px;padding:8px 24px 40px}
.settings h2{font-size:16px;margin:26px 0 4px;font-weight:900}
.settings p.d{color:var(--muted);font-size:13px;margin:0 0 12px}
.field{display:grid;grid-template-columns:170px 1fr;gap:10px;align-items:center;margin:8px 0}
.field label{font-weight:700;font-size:13px}
.field input,.field select{height:34px;border-radius:7px;border:1px solid var(--line);background:var(--bg);padding:0 10px;outline:0;width:100%}
.field input:focus,.field select:focus{border-color:var(--accent)}
.switch{display:flex;align-items:center;gap:10px;margin:10px 0}
.status-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:2px 10px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.status-chip i{width:9px;height:9px;border-radius:50%;background:#999;display:inline-block}
.status-chip.on i{background:var(--green)}.status-chip.connecting i{background:var(--amber)}
.banner{margin:14px 20px 0;border-radius:10px;padding:10px 14px;background:#fff6dd;color:#5b4300;border:1px solid #f0d58a;display:flex;gap:10px;align-items:center;font-size:14px}
:root[data-theme="dark"] .banner{background:#3a3016;color:#f0d58a;border-color:#6b5a1f}
.banner button{margin-left:auto;font-weight:800;text-decoration:underline}

/* call card (huddle-ish floating card) */
#callcard{position:absolute;right:20px;bottom:20px;width:340px;border-radius:14px;background:#1a1d21;color:#fff;box-shadow:var(--shadow);padding:18px;display:none;z-index:15;border:1px solid #35373b}
#callcard.show{display:block;animation:pop .18s ease-out}
@keyframes pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.cc-top{display:flex;gap:12px;align-items:center}
.cc-top .av{width:52px;height:52px;border-radius:12px;font-size:20px}
.cc-top .nm{font-size:17px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-top .st{font-size:13px;color:#ababad}
.cc-top .cc-compact{margin-left:auto;align-self:flex-start;flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:inherit;font-size:12px;font-weight:700;cursor:pointer}
/* Call history: the User box is a search field with a pick list */
.mg-usearch{min-width:220px}
.mg-usearch::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
/* Admin: per-tab search + filters */
.adm-searchbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 8px 6px}
.adm-searchbar #adm-q{flex:0 1 320px;min-width:200px}
.adm-searchbar select{width:auto;max-width:220px}
.adm-searchbar .muted{margin-left:auto;font-size:12.5px}
/* Admin > Music on hold: two panels like the portal (Music | Messages) */
.moh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px;padding:0 6px 6px;align-items:start}
.moh-card{display:block;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.moh-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.moh-head h3{margin:0 auto 0 0;font-size:18px}
.moh-head .pill-btn{white-space:nowrap}
.moh-t{width:100%}
.moh-t td,.moh-t th{vertical-align:middle}
.moh-t .moh-n{width:44px}
.moh-t .moh-nm{word-break:break-word}
.moh-t .moh-acts{white-space:nowrap;text-align:right}
.moh-t .moh-acts .pill-btn{margin-left:6px;padding:4px 10px}
.moh-foot{font-size:12px;margin:10px 0 0}
.moh-empty{padding:18px 0;text-align:center}
.moh-intro{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:rgba(124,58,237,.18);color:#a78bfa}
#callcard.cc-small{width:330px;padding:12px 14px}
#callcard.cc-small .cc-top .av{width:40px;height:40px;font-size:16px;border-radius:10px}
#callcard.cc-small .cc-top .nm{font-size:15px}
#callcard.cc-small .cc-top .st{font-size:12px}
.cc-minirow{display:flex;gap:8px;margin-top:10px}
.cc-minirow button{flex:1;height:34px;border-radius:9px;background:#374151;color:#fff;font-weight:700;font-size:13px;white-space:nowrap;padding:0 8px}
.cc-minirow button:hover{background:#4b5563}
.cc-minirow button.on{background:#d97706}
.cc-minirow button.end{background:#dc2626}.cc-minirow button.end:hover{background:#b91c1c}
.cc-top .cc-compact:hover{background:rgba(255,255,255,.14)}
html[data-theme="light"] .cc-top .cc-compact{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.04)}
.cc-timer{font-variant-numeric:tabular-nums}
.cc-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.cc-btns button{height:62px;border-radius:12px;background:#2c2f33;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#d1d2d3}
.cc-btns button:hover{background:#383b40}.cc-btns button.on{background:#fff;color:#1a1d21}
.cc-btns svg{width:20px;height:20px}
.cc-end{margin-top:10px;width:100%;height:44px;border-radius:10px;background:var(--red);color:#fff;font-weight:900;display:flex;gap:8px;align-items:center;justify-content:center}
.cc-end:hover{background:#c4174d}.cc-end svg{width:18px;height:18px}
.cc-in{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.cc-in button{height:46px;border-radius:10px;font-weight:900;color:#fff;display:flex;gap:8px;align-items:center;justify-content:center}
.cc-in .acc{background:var(--green)}.cc-in .dec{background:var(--red)}.cc-in svg{width:18px;height:18px}
.cc-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.cc-pad button{height:40px;border-radius:8px;background:#2c2f33;font-weight:800;font-size:16px;color:#fff}.cc-pad button:hover{background:#383b40}
.cc-xfer{display:flex;gap:6px;margin-top:12px}.cc-xfer input{flex:1;height:36px;border-radius:8px;border:1px solid #444;background:#111316;color:#fff;padding:0 10px;outline:0}
.cc-xfer button{padding:0 14px;border-radius:8px;background:var(--accent);font-weight:800;color:#fff}
.ring .av{animation:ring 1s infinite}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(-10deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-6deg)}60%{transform:rotate(6deg)}}

/* menus, switcher, toasts */
.menu{position:fixed;z-index:50;min-width:230px;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px}
.menu .mi{padding:7px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:14px}
.menu .mi:hover{background:var(--accent);color:#fff}
.menu .mi i{width:9px;height:9px;border-radius:50%;display:inline-block}
.menu hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.menu .mh{padding:6px 12px;font-weight:900}.menu .mh span{display:block;font-weight:400;color:var(--muted);font-size:12px}
#qs{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:none;align-items:flex-start;justify-content:center;padding-top:90px}
#qs.show{display:flex}
.qs-box{width:560px;max-width:92vw;background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}
.qs-box input{width:100%;height:52px;border:0;border-bottom:1px solid var(--line);background:none;padding:0 18px;font-size:17px;outline:0}
.qs-list{max-height:360px;overflow:auto;padding:6px}
.qs-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer}
.qs-item.on{background:var(--accent);color:#fff}.qs-item .m{margin-left:auto;font-size:12px;opacity:.8}
#toasts{position:fixed;top:52px;right:16px;z-index:80;display:flex;flex-direction:column;gap:8px}
.toast{background:#1d1c1d;color:#fff;padding:10px 14px;border-radius:9px;box-shadow:var(--shadow);max-width:340px;font-size:14px;animation:pop .18s}
.toast.err{background:#9c1a3f}

/* login */
#login{position:fixed;inset:40px 0 0 0;background:linear-gradient(135deg,#2a0a2b,#4a154b);display:grid;place-items:center;z-index:40}
.login-card{width:400px;background:var(--card);border-radius:14px;padding:32px;box-shadow:var(--shadow)}
.login-card .ws{background:var(--side);color:#fff;width:48px;height:48px;font-size:24px;margin:0 0 14px}
.login-card h1{margin:0 0 4px;font-size:26px;font-weight:900}.login-card p{margin:0 0 20px;color:var(--muted)}
.login-card input{width:100%;height:44px;border-radius:8px;border:1px solid var(--line);background:var(--bg);padding:0 14px;margin-bottom:12px;outline:0;font-size:15px}
.login-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.login-card .go{width:100%;height:44px;border-radius:8px;background:var(--accent);color:#fff;font-weight:900;font-size:16px}.login-card .go:hover{background:var(--accent-hover)}
.login-card .go[disabled]{opacity:.6}
.login-card .err{color:var(--red);font-size:13px;min-height:18px;margin-bottom:8px}
.login-card .links{margin-top:14px;font-size:13px;display:flex;justify-content:space-between}.login-card .links a{color:var(--accent);cursor:pointer}

/* ---- user panel (Discord-style) ---- */
.userbar{flex:none;height:56px;background:rgba(0,0,0,.22);display:flex;align-items:center;gap:8px;padding:0 8px 0 10px}
.userbar .me{width:34px;height:34px;flex:none}.userbar .me .av{width:34px;height:34px;border-radius:50%}
.userbar .dot{border-color:#2b1630}
.userbar .un{flex:1;min-width:0;line-height:1.2}.userbar .un b{display:block;color:#fff;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userbar .un span{font-size:12px;color:var(--side-dim);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userbar .ub{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;color:var(--side-text)}
.userbar .ub:hover{background:var(--side-hover);color:#fff}.userbar .ub.off{color:var(--red)}.userbar .ub svg{width:18px;height:18px}
.huddle .hn em{display:block;font-style:normal;font-size:12px;font-weight:800;color:#3ddc97}
.huddle .hn b{font-size:14px}

/* ---- members list (Discord-style) ---- */
#members{width:232px;flex:none;background:var(--bg2);border-left:1px solid var(--line);overflow:auto;padding:8px 8px 16px}
@media (max-width:1060px){#members{display:none}}
.mh2{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);padding:16px 8px 4px}
.mem{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:6px;cursor:pointer;color:var(--muted)}
.mem:hover{background:var(--line);color:var(--text)}
.mem span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.mem em{font-style:normal;font-size:12px;opacity:.7}
.mem .av.sm{width:30px;height:30px;border-radius:50%;font-size:11px}

/* ---- Discord skin ---- */
:root[data-skin="discord"]{
  --rail:#1e1f22; --side:#2b2d31; --side-text:#949ba4; --side-dim:#80848e; --side-hover:rgba(79,84,92,.4); --side-line:rgba(0,0,0,.3);
  --accent:#5865f2; --accent-hover:#4752c4; --green:#23a559; --green-hover:#1a8746; --red:#da373c;
  --bg:#313338; --bg2:#2b2d31; --text:#dbdee1; --muted:#949ba4; --line:#3f4147; --card:#2b2d31;
}
:root[data-skin="discord"] .item.on{background:#404249;color:#fff}
:root[data-skin="discord"] .item .av.sm,:root[data-skin="discord"] .row .av{border-radius:50%}
:root[data-skin="discord"] .ws{background:#5865f2;color:#fff;border-radius:16px}
:root[data-skin="discord"] #side{border-top-left-radius:0}
:root[data-skin="discord"] .userbar{background:#232428}
:root[data-skin="discord"] .userbar .dot{border-color:#232428}
:root[data-skin="discord"] #tb-search{background:#1e1f22;color:#949ba4}
:root[data-skin="discord"] .composer{background:#383a40;border-color:#383a40}
:root[data-skin="discord"] .composer:focus-within{box-shadow:none;border-color:#383a40}
:root[data-skin="discord"] .key,:root[data-skin="discord"] .card{background:#2b2d31;border-color:#2b2d31}
:root[data-skin="discord"] #members{background:#2b2d31}
/* ---- logo ---- */
.ws img{width:28px;height:28px;display:block}
.ws{background:#fff!important}
.side-head .brand{display:flex;align-items:center;gap:9px}.side-head .brand img{width:28px;height:28px;background:transparent;object-fit:contain}
.login-card .ws{width:56px;height:56px;border-radius:14px}.login-card .ws img{width:38px;height:38px}

/* ---- texts + chat sidebar rows ---- */
.item.conv{height:52px;gap:10px}
.item.conv .av.sm{width:34px;height:34px;border-radius:8px;font-size:13px}
.item .t2{flex:1;min-width:0;line-height:1.25}
.item .t2 b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.item .t2 span{display:block;font-size:12.5px;color:var(--side-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item.on .t2 span{color:rgba(255,255,255,.8)}
.item.unread .t2 b{color:#fff;font-weight:900}.item.unread .t2 span{color:#fff}
.item.conv em{font-style:normal;font-size:11px;color:var(--side-dim);align-self:flex-start;margin-top:9px}
.vdot{width:12px;height:12px;border-radius:50%;background:#7a6a7a;flex:none;margin:0 11px}
.vdot.waiting{background:var(--amber)}.vdot.active{background:var(--green)}
.hashc{width:34px;text-align:center;font-weight:900;font-size:20px;color:var(--side-dim);flex:none}
.hashc.big{width:auto;color:var(--muted);font-size:24px}

/* ---- sms bubbles ---- */
#thread{padding:6px 0 10px}
.bubrow{display:flex;flex-direction:column;padding:2px 24px;align-items:flex-start}
.bubrow.out{align-items:flex-end}
.bubrow:not(.grp){margin-top:8px}
.bub{max-width:min(520px,72%);padding:8px 13px;border-radius:18px;background:var(--bg2);border:1px solid var(--line);white-space:pre-wrap;word-break:break-word}
.bubrow.in .bub{border-bottom-left-radius:5px}
.bubrow.out .bub{background:var(--accent);border-color:var(--accent);color:#fff;border-bottom-right-radius:5px}
.bt{font-size:11px;color:var(--muted);margin:3px 6px 0}
.att{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:underline;margin-top:4px}
.bub .att{display:flex}
.composer textarea,.ta{flex:1;border:0;outline:0;background:none;resize:none;font:inherit;color:inherit;padding:8px 0;max-height:140px;line-height:1.35}
.ta{border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;background:var(--bg)}
.go.blue{background:var(--accent)}.go.blue:hover{background:var(--accent-hover)}
.composer{align-items:flex-end}.composer .go{margin-bottom:0}

/* ---- chat thread ---- */
.row.cont{padding-top:0;padding-bottom:2px}.av-gap{width:36px;flex:none}
.cbody{white-space:pre-wrap;word-break:break-word}
.row.note{background:rgba(236,178,46,.12)}
.sysmsg{text-align:center;color:var(--muted);font-size:13px;font-style:italic;padding:8px 20px}
.connect{max-width:440px;margin:50px auto;padding:0 20px;text-align:center}
.connect h2{margin:12px 0 4px;font-size:22px;font-weight:900}.connect p{color:var(--muted);margin:0 0 14px}
.connect ol{text-align:left;color:var(--muted);padding-left:20px;line-height:1.7}.connect a{color:var(--accent)}
.connect input{width:100%;height:42px;border-radius:8px;border:1px solid var(--line);background:var(--bg);padding:0 12px;margin:10px 0 4px;outline:0}
.connect .err{color:var(--red);font-size:13px;min-height:20px}
select{height:34px;border-radius:7px;border:1px solid var(--line);background:var(--bg);padding:0 8px;outline:0}
/* ---- voicemail + diagnostics ---- */
.vmlist{padding:10px 20px 24px;display:flex;flex-direction:column;gap:10px}
.vmcard{display:flex;gap:12px;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg)}
.vmcard.isnew{border-left:4px solid var(--accent)}
.vmbody{flex:1;min-width:0}
.vmtop{display:flex;align-items:center;gap:8px}.vmtop b{font-weight:900}.vmtop .ts{margin-left:auto;color:var(--muted);font-size:12px}
.newtag{background:var(--accent);color:#fff;font-size:10px;font-weight:900;border-radius:4px;padding:1px 6px;letter-spacing:.5px}
.vmsub{color:var(--muted);font-size:13px}
.vmtext{margin:8px 0;padding:8px 10px;border-radius:8px;background:var(--bg2);font-size:14px;color:var(--text)}
.vmcard audio{width:100%;margin:8px 0;height:36px}
.vmact{display:flex;gap:8px;margin-top:10px}
.diag{font-size:12px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-height:220px;overflow:auto;background:var(--bg2)}
.diag div{margin-bottom:8px}.diag code{display:block;color:var(--muted);word-break:break-all;white-space:pre-wrap;font-family:Consolas,monospace}
/* ---- support chat ---- */
.verify{margin:12px 20px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.verify .vrow{display:flex;gap:8px;margin-top:8px}.verify input{height:34px;border-radius:7px;border:1px solid var(--line);background:var(--bg);padding:0 10px;width:140px;outline:0;letter-spacing:3px;text-align:center}
.banner button{margin-left:6px}
/* ---- calling-device chip ---- */
.fromrow{padding:0 20px 6px;display:flex}
.fromchip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:13px}
.fromchip:hover{background:var(--bg2);color:var(--text)}.fromchip b{color:var(--text);font-weight:800}.fromchip svg{flex:none}
.menu .mi{white-space:pre}
/* ---- voicemail detail ---- */
.vmdetail{max-width:720px;padding:22px 28px}
.vmmeta{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:8px}
.vmplayer{margin:16px 0 22px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.vmplayer audio{width:100%}
.vmplay{width:100%;height:46px;border-radius:10px;background:var(--accent);color:#fff;font-weight:900;font-size:15px}.vmplay:hover{background:var(--accent-hover)}
.vmdetail h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.vmtext.big{font-size:16px;line-height:1.55;padding:14px 16px}
.vmraw{margin-top:18px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--bg2)}
.vmraw summary{cursor:pointer;color:var(--muted);font-size:13px;font-weight:700}
.vmraw pre{margin:8px 0 0;font-size:12px;white-space:pre-wrap;word-break:break-all;color:var(--muted);max-height:240px;overflow:auto;font-family:Consolas,monospace}
.vmrawbar{margin-top:8px}
/* ---- links, composer tools, attachments, emoji, caller ID, devices ---- */
.lnk{color:#4a9eff;text-decoration:underline;cursor:pointer;word-break:break-all}
.bubrow.out .bub .lnk{color:#fff}
.cbtn{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--muted);flex:none;align-self:flex-end}
.cbtn:hover{background:var(--bg2);color:var(--text)}
.attchip{display:flex;align-items:center;gap:10px;margin:0 20px 8px;padding:6px 8px 6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);max-width:420px}
.attchip img{width:38px;height:38px;object-fit:cover;border-radius:6px}.attchip span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.attchip i{color:var(--muted);font-style:normal}
.attchip button{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}.attchip button:hover{background:var(--line);color:var(--text)}
.mms{display:block;max-width:300px;max-height:300px;border-radius:12px;margin-top:4px;cursor:pointer}
.bub .mms{margin:-2px -6px 2px;max-width:280px}
.emojipop{width:332px;display:grid;grid-template-columns:repeat(9,1fr);gap:2px;padding:8px;min-width:0}
.emojipop .em{height:34px;display:grid;place-items:center;font-size:21px;border-radius:7px;cursor:pointer}.emojipop .em:hover{background:var(--bg2)}
.cidpop{width:340px;padding:8px}
.cidpop input{width:100%;height:34px;border-radius:7px;border:1px solid var(--line);background:var(--bg);padding:0 10px;margin:6px 0;outline:0}
.cidlist{max-height:300px;overflow:auto}
.cidrow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:14px}
.cidrow span{color:var(--muted);font-size:12px;margin-left:auto;text-align:right}.cidrow:hover{background:var(--accent);color:#fff}.cidrow:hover span{color:#e8eeff}
.cidrow.on{background:var(--bg2);box-shadow:inset 3px 0 0 var(--accent)}
.cidnone{padding:12px;color:var(--muted);font-size:13px}
.devbox{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--bg2)}
.devrow{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px;border-bottom:1px solid var(--line)}.devrow:last-of-type{border-bottom:0}
.devrow em{color:var(--muted);font-style:normal}.devrow a{color:var(--accent);font-weight:700}
/* ---- AI Notes ---- */
.cc-notes{margin-top:10px;width:100%;height:42px;border-radius:10px;background:#2c2f33;color:#d1d2d3;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px}
.cc-notes:hover{background:#383b40;color:#fff}
.cc-rec{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:13px;color:#e8e8e8;background:#2a1a1f;border:1px solid #6b2433;border-radius:10px;padding:8px 10px}
.cc-rec.dim{background:#2c2f33;border-color:#3d4045;color:#aeb0b4}
.cc-rec button{margin-left:auto;background:#3d4045;color:#fff;border-radius:6px;padding:3px 10px;font-weight:800;font-size:12px}
.recdot{width:10px;height:10px;border-radius:50%;background:#ff3b5c;flex:none;animation:recblink 1.2s infinite}
@keyframes recblink{50%{opacity:.25}}
.cc-caps{margin-top:10px;position:relative;background:rgba(0,0,0,.6);border-radius:10px;padding:8px 38px 8px 10px;font-size:13.5px;line-height:1.4;color:#f3f4f6;min-height:22px}.cc-caps b{color:#9ecbff;margin-right:4px}.cc-caps i{color:#9ca3af;font-size:12.5px}.cc-capsoff{position:absolute;right:8px;top:8px;border:1px solid #6b7280;background:transparent;color:#d1d5db;border-radius:6px;font-size:11px;font-weight:800;padding:1px 5px;cursor:pointer;line-height:1.3}.cc-capsoff:hover{background:#374151}
.cc-live{margin-top:8px;max-height:120px;overflow:auto;font-size:13px;line-height:1.4;background:#111316;border-radius:10px;padding:8px 10px;color:#cfd0d2}
.cc-live b{color:#7fb1ff;margin-right:4px}.cc-live i{color:#8a8c90}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;display:grid;place-items:center}
.modal-card{width:460px;max-width:92vw;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow)}
.modal-card h2{margin:0 0 10px;font-size:20px;display:flex;align-items:center;gap:8px}
.modal-card p{margin:0 0 10px;color:var(--text)}.modal-card ul{margin:0 0 12px;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.5}
.modal-card .warn{background:rgba(236,178,46,.14);border-radius:8px;padding:8px 10px;font-size:13.5px}
.modal-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.notechip{display:inline-flex;align-items:center;gap:6px;margin-top:5px;padding:3px 10px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--accent);font-size:13px;font-weight:700;text-decoration:none}
.notechip:hover{background:var(--line)}
.notebody{max-width:760px;padding:8px 28px 40px}
.notebody h3{margin:22px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.notebody p{margin:0;font-size:16px;line-height:1.55}.notelist{margin:0;padding-left:20px;font-size:15.5px;line-height:1.6}
.muted{color:var(--muted)}
.transcript{margin-top:8px;font-size:14.5px;line-height:1.5}.tl{padding:3px 0}.tl .who{font-weight:900;color:var(--muted);margin-right:6px}.tl .who.me{color:var(--accent)}
.aibar{display:inline-block;vertical-align:middle;width:180px;height:8px;border-radius:4px;background:var(--line);margin:0 10px;overflow:hidden}.aibar div{height:100%;background:var(--accent);transition:width .2s}
/* ---- wordmark logo ---- */
.wordmark{display:inline-flex;align-items:center;background:#fff;border-radius:9px;padding:0 11px;height:32px}
.wordmark img{height:21px;width:auto;display:block}
.wordmark.lg{height:52px;padding:0 18px;border-radius:12px;margin-bottom:16px;border:1px solid var(--line)}
.wordmark.lg img{height:32px}
/* wordmark now includes the Wi-Fi arcs (taller artwork): give it a little more room */
.wordmark{height:36px;padding:0 12px}
.wordmark img{height:27px}
.wordmark.lg{height:64px;padding:0 20px}
.wordmark.lg img{height:44px}
/* logo with no tile: white/cyan version on the always-dark sidebar; sign-in card follows the theme */
.wordmark.flat{background:none;border:0;padding:0;height:36px}
.wordmark.flat img{height:32px}
.wordmark.lg.flat{height:64px;margin-bottom:14px}.wordmark.lg.flat img{height:56px}
.wm-on-dark{display:none}
:root[data-theme="dark"] .wm-on-light{display:none}
:root[data-theme="dark"] .wm-on-dark{display:block}
/* ---- status + presence ---- */
.dot.st-away{background:#9aa0a6}.dot.st-break,.dot.st-lunch{background:var(--amber)}.dot.st-meeting,.dot.st-dnd{background:var(--red)}.dot.st-offline{background:#6b6b6b}
.av{position:relative}
.av .pd{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;border:2px solid var(--bg);background:#8a8a8a;box-sizing:border-box}
#side .av .pd{border-color:var(--side)}.card .av .pd{border-color:var(--bg)}
.av .pd.on{background:var(--green)}.av .pd.busy{background:var(--red)}.av .pd.off{background:#6b6b6b}
.av.sm .pd{width:9px;height:9px;border-width:2px;right:-3px;bottom:-3px}
.mem small{display:block;font-weight:400;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .stmsg{color:var(--accent);font-weight:700}
.pst{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap}.pst i{width:7px;height:7px;border-radius:50%;background:#8a8a8a;flex:none}.pst.on i{background:var(--green)}.pst.busy i{background:var(--red)}.pst.busy{color:var(--red);font-weight:700}.pst.off i{background:#6b6b6b}
#side .item .pst{font-size:11px;margin-left:6px;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.se-grp{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:8px 8px 2px}.se-row{position:relative}.se-mv{margin-left:auto;display:inline-flex;gap:2px;flex:none}.se-arr{width:24px;height:22px;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.se-arr svg{transform:rotate(180deg)}.se-arr.dn svg{transform:none}.se-arr:hover{color:var(--text);border-color:var(--text)}.se-row small{margin-left:auto}.se-row small+.se-mv{margin-left:10px}
.rep-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid var(--line)}
.rep-bar select,.rep-bar input{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;max-width:260px}
.rep-body{padding:16px 20px}
.rep-who{position:relative;display:inline-flex;align-items:center}.rep-who input{width:300px;max-width:100%;padding-right:28px}
.rep-x{position:absolute;right:6px;border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1}
.rep-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:0 0 14px}
.rep-tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.rep-tile b{display:block;font-size:24px;line-height:1.2}.rep-tile span{display:block;font-weight:700;font-size:13px}.rep-tile small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:12px;margin:0 0 12px}.rep-card.wide{grid-column:1/-1}
.rep-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 12px;min-width:0}.rep-grid .rep-card{margin:0}
.rep-card h3{margin:0 0 8px;font-size:14px}.rep-card h3 small{font-weight:400;font-size:12px}
.rep-svg{width:100%;height:190px;color:var(--text);display:block}
.rep-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:0 0 4px}.rep-lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.rep-heat{display:grid;grid-template-columns:38px repeat(24,1fr);gap:3px;font-size:10px;color:var(--muted);align-items:center}.rep-heat i{display:block;height:16px;border-radius:3px}.rep-heat b{font-weight:600}
.rep-tw{overflow:auto;max-height:520px}
.rep-t{width:100%;border-collapse:collapse;font-size:13px}.rep-t th{position:sticky;top:0;background:var(--card);text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
.rep-t td{padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}.rep-t td small{color:var(--muted)}.rep-click{cursor:pointer}.rep-click:hover td{background:var(--bg2)}
.rep-bad{color:#dc2626;font-weight:600}.rep-k{font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;text-transform:capitalize}.rep-k.inbound{background:rgba(47,111,235,.15);color:#4c8dff}.rep-k.outbound{background:rgba(22,163,74,.15);color:#22c55e}.rep-k.internal{background:rgba(168,85,247,.15);color:#c084fc}
.addon-why{margin:6px 0 4px;padding-left:20px;line-height:1.5}.addon-why li{margin:0 0 9px}
.cc-desk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin:8px 0 2px;line-height:1.35}
.ls-days{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}.ls-day{min-width:46px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-weight:600;cursor:pointer}.ls-day.on{background:#2f6feb;border-color:#2f6feb;color:#fff}
.ls-times{display:flex;gap:12px;flex-wrap:wrap}.ls-times label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);flex:1;min-width:120px}.ls-times input{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}
.avw{position:relative;flex:none;display:inline-flex}.avw .pdot{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:#8a8a8a;border:2px solid var(--side);box-sizing:border-box}.avw .pdot.on{background:var(--green)}.avw .pdot.busy{background:var(--red)}.avw .pdot.off{background:#6b6b6b}
.userbar .un{cursor:pointer}.userbar .un:hover b{text-decoration:underline}
.modal-card .field{grid-template-columns:110px 1fr}
/* ---- visible status button in the user bar ---- */
.userbar .stbtn{display:flex;align-items:center;gap:6px;color:var(--side-dim);font-size:12.5px;margin-top:1px}
.userbar .stbtn u{text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.userbar .stbtn svg{flex:none;opacity:.8}
.userbar .un:hover .stbtn{color:#fff}
.sdot{width:9px;height:9px;border-radius:50%;flex:none;background:#7a6a7a}
.sdot.on{background:var(--green)}.sdot.connecting{background:var(--amber)}.sdot.off{background:#7a6a7a}
.sdot.st-away{background:#9aa0a6}.sdot.st-break,.sdot.st-lunch{background:var(--amber)}.sdot.st-meeting,.sdot.st-dnd{background:var(--red)}.sdot.st-offline{background:#6b6b6b}
/* ---- incoming-call check ---- */
.chk{max-height:340px;overflow:auto;margin:6px 0 4px}
.chkrow{display:flex;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line)}.chkrow:last-child{border-bottom:0}
.chkrow i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:13px;flex:none;color:#fff;background:#8a8a8a;margin-top:1px}
.chkrow.ok i{background:var(--green)}.chkrow.bad i{background:var(--red)}.chkrow.warn i{background:var(--amber);color:#3a2a00}
.chkrow b{display:block;font-size:14px}.chkrow span{display:block;color:var(--muted);font-size:13px;margin-top:1px}
.modal-card:has(.chk){width:560px}
/* ---- version under the logo ---- */
.brandwrap{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.brandwrap .wordmark.flat{height:30px}.brandwrap .wordmark.flat img{height:27px}
.brandwrap .ver{font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--side-dim);opacity:.75;margin:1px 0 0 3px}
/* ---- version at the bottom of the left bar ---- */
.railver{font-size:10px;font-weight:700;letter-spacing:.3px;color:rgba(255,255,255,.45);padding:2px 0 2px;text-align:center;width:100%}
/* ---- channels ---- */
.sec{position:relative}
.secplus{margin-left:auto;width:22px;height:22px;border-radius:6px;font-size:17px;line-height:20px;color:var(--side-dim);display:grid;place-items:center}
.secplus:hover{background:var(--side-hover);color:#fff}
.chbadge{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;font-weight:900;font-size:19px;flex:none}
.chbadge.big{width:36px;height:36px;background:var(--bg2);color:var(--text);border:1px solid var(--line)}
.item.on .chbadge{background:rgba(255,255,255,.25)}
.chbadge.xch{box-shadow:inset 0 0 0 2px #e0a526}.xtag{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.05em;color:#e0a526;border:1px solid #e0a526;border-radius:4px;padding:0 4px;margin-left:4px;vertical-align:1px}
.xtag.big{font-size:11px;padding:2px 7px;border-radius:999px;margin:0 8px;letter-spacing:0;font-weight:700;white-space:nowrap}
.xg-head{margin:12px 0 6px;font-size:13px;line-height:1.45}.xg-head .muted{font-size:12px}
.xg-list{border:1px solid var(--line);border-radius:10px;overflow:hidden}.xg-list .pkrow{cursor:default}
.xbadge{font-size:9.5px;font-weight:800;color:#e0a526;border:1px solid #e0a526;border-radius:4px;padding:0 4px;flex:none}
.xg-rm{margin-left:8px;border:0;background:none;color:var(--muted);cursor:pointer;display:inline-flex;padding:2px}.xg-rm:hover{color:var(--red)}
.xg-add{display:flex;gap:6px;padding:8px}.xg-add input{flex:1;min-width:0;background:#fff;color:#111;border:1px solid var(--line);border-radius:8px;padding:7px 10px}.xg-add input::placeholder{color:#6b7280}.xg-add input:first-child{flex:.7}
.pkfilter{width:100%;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--bg);padding:0 12px;outline:0;margin:4px 0 8px}
.pklist{max-height:290px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.pkrow{display:flex;align-items:center;gap:10px;padding:7px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.pkrow:last-child{border-bottom:0}.pkrow:hover{background:var(--bg2)}
.pkrow span{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkrow em{font-style:normal;color:var(--muted);font-size:12.5px}
.pkbox{width:18px;height:18px;border-radius:5px;border:2px solid var(--muted);flex:none;position:relative}
.pkrow.on .pkbox{background:var(--accent);border-color:var(--accent)}
.pkrow.on .pkbox::after{content:"";position:absolute;left:4px;top:0px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pkcount{margin-top:8px;color:var(--muted);font-size:13px}
.modal-card:has(.pklist){width:520px}
/* ---- obvious "New text" button ---- */
.newrow{padding:8px 10px 6px}
.newbtn{width:100%;height:36px;border-radius:9px;background:var(--green);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px}
.newbtn:hover{background:var(--green-hover)}
/* ---- reply / forward / group text ---- */
.bubrow{position:relative}
.mtools{position:absolute;top:-14px;display:none;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px;box-shadow:0 2px 8px rgba(0,0,0,.18);z-index:3}
.bubrow:hover .mtools,.showtools .bubrow .mtools{display:flex}
.bubrow.out .mtools{right:24px}.bubrow.in .mtools{left:24px}
.mtools button{width:30px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}.mtools button:hover{background:var(--bg2);color:var(--text)}
.showtools .row .tools{display:flex}
.quote{border-left:3px solid var(--accent);background:rgba(127,127,127,.16);border-radius:6px;padding:4px 9px;margin-bottom:5px;font-size:13px}
.quote b{display:block;font-size:12px;color:var(--accent)}
.quote span{display:block;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px}
.bubrow.out .bub .quote{background:rgba(255,255,255,.2);border-left-color:#fff}.bubrow.out .bub .quote b{color:#fff}
.fwdtag{font-size:11.5px;font-style:italic;opacity:.78;display:flex;align-items:center;gap:4px;margin-bottom:3px}
.replybar{display:flex;align-items:center;gap:10px;margin:0 20px;padding:8px 8px 8px 12px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--bg2);border-left:4px solid var(--accent)}
.replybar div{flex:1;min-width:0}.replybar b{display:block;font-size:12.5px;color:var(--accent)}
.replybar span{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.replybar button{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}.replybar button:hover{background:var(--line);color:var(--text)}
.replybar + .composer,.replybar + .attchip{margin-top:0}
.replybar ~ .composer{border-top-left-radius:0;border-top-right-radius:0}
.fwdprev{margin:6px 0 10px;padding:8px 12px;border-left:3px solid var(--line);background:var(--bg2);border-radius:6px;font-size:14px;color:var(--muted);max-height:90px;overflow:auto;white-space:pre-wrap}
.hint{margin:-2px 0 12px 180px;color:var(--muted);font-size:12.5px;max-width:560px}
.mtools{top:-20px}
.pkrow span.chbadge{flex:none;width:34px;height:34px}
.matchhint a{color:#4a9eff;font-weight:800;text-decoration:underline}

#side .sec{cursor:pointer;user-select:none}
#side .sec svg{transition:transform .15s}
#side .sec.shut svg:first-child{transform:rotate(-90deg)}

/* Manage */
.mg-search{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;width:210px}
.mg-wrap{padding:0;overflow:auto}
.mgt{width:100%;border-collapse:collapse;font-size:13px}
.mgt th{position:sticky;top:0;background:var(--bg2);text-align:left;padding:9px 10px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.mgt td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.mgt tbody tr{cursor:pointer}.mgt tbody tr:hover,.mgt tbody tr.on{background:var(--bg2)}
.mgt .nw{white-space:nowrap}.mg-na{color:var(--muted);font-size:12px}.mg-empty{text-align:center;color:var(--muted);padding:30px}
.spill,.cpill{display:inline-block;min-width:38px;text-align:center;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;margin-right:4px}
.spill.pos{background:#5b8def}.spill.neu{background:#f2b705;color:#3a2e00}.spill.neg{background:#e0357a}
.cpill.positive{background:#2bac76}.cpill.neutral{background:#f2b705;color:#3a2e00}.cpill.negative{background:#e0357a}
.topic{display:inline-block;background:var(--line);color:var(--text);border-radius:999px;padding:2px 9px;font-size:12px;margin:0 4px 3px 0}
.mg-rec{background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:4px 7px;cursor:pointer}.mg-rec:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.mgdetail{border-top:1px solid var(--line);background:var(--bg);max-height:46%;overflow:auto;padding:12px 18px}
.mgd-head{display:flex;gap:12px;align-items:center;margin-bottom:6px}.mgd-head span:not(.grow){color:var(--muted);font-size:13px}
.mgd-body{display:flex;gap:22px;flex-wrap:wrap}.mgd-col{min-width:240px;flex:1}.mgd-col.wide{flex:2;min-width:300px}
.mgd-col h4{margin:10px 0 4px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mgd-col audio{width:100%}.mgd-sum{line-height:1.5}
.mgd-tx p{margin:3px 0;line-height:1.45}.mgd-tx p.negative{border-left:3px solid #e0357a;padding-left:8px}.mgd-tx p.positive{border-left:3px solid #2bac76;padding-left:8px}
.mgt td:nth-child(n+2):nth-child(-n+5){white-space:nowrap}
.mg-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:10px 16px;border-bottom:1px solid var(--line)}
.mg-filters label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mg-filters select,.mg-filters input{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:13px;text-transform:none;letter-spacing:0;min-width:110px}
.kind{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--line);color:var(--text);text-transform:capitalize}
.kind.inbound{background:#2bac7633;color:#2bac76}.kind.outbound{background:#5b8def33;color:#5b8def}.kind.internal{background:#f2b70533;color:#c99700}
.mon-btn{background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:4px 9px;margin-right:5px;cursor:pointer;font:inherit;font-size:12.5px;display:inline-flex;align-items:center;gap:5px}
.mon-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}.mon-btn:disabled{opacity:.35;cursor:not-allowed}
.moncodes{margin:10px 16px 0;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--bg2)}.moncodes summary{cursor:pointer;font-weight:700}.moncodes p{color:var(--muted);font-size:13px;line-height:1.45;margin:8px 0 0}.moncodes .mg-filters{border:0;padding:10px 0 4px}
.mgdetail{max-height:38%}

.rail-btn.small{font-size:10.5px;opacity:.8;margin-bottom:4px}
.rp-l{display:block;font-size:12px;color:var(--muted);margin:10px 0 0}.rp-l input,.rp-l textarea{display:block;width:100%;margin-top:4px;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;font-size:14px;box-sizing:border-box;resize:vertical}
.rp-c{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:12px 0 0;line-height:1.4}.rp-err{color:#ff7a8a;font-size:13px;min-height:18px;margin-top:8px}.rp-err a{color:var(--accent)}
.psearch{padding:2px 12px 6px}.psearch input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.1);color:var(--side-text,#fff);border:1px solid var(--side-line);border-radius:8px;padding:6px 9px;font:inherit;font-size:13px}.psearch input::placeholder{color:var(--side-dim)}

.lvred{color:#ff3b4e;display:inline-flex;animation:lvp 1.2s ease-in-out infinite}@keyframes lvp{50%{opacity:.45}}.lvbtn{animation:lvp 1.2s ease-in-out infinite}

.wordmark img.wm-on-dark{display:none}:root[data-theme="dark"] .wordmark img.wm-on-light{display:none}:root[data-theme="dark"] .wordmark img.wm-on-dark{display:block}

.cc-mon{display:flex;gap:6px;margin:8px 0}.cc-mon button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:7px 4px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}.cc-mon button.on{background:var(--accent);border-color:var(--accent);color:#fff}.cc-mon button:not(.on):hover{border-color:var(--accent)}

.sysck{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;margin-left:auto}
.viewseg{display:inline-flex;gap:0;margin-right:8px}.viewseg .pill-btn{border-radius:0}.viewseg .pill-btn:first-child{border-radius:999px 0 0 999px}.viewseg .pill-btn:last-child{border-radius:0 999px 999px 0}
.grid.list{display:flex;flex-direction:column;gap:0;padding:6px 20px 18px}.grid.list .card{border-radius:0;border-width:0 0 1px;padding:7px 10px;background:transparent;gap:10px}.grid.list .card:hover{background:var(--bg2)}.grid.list .card .av{width:32px;height:32px;min-width:32px;flex:none;font-size:13px;border-radius:7px}.grid.list .card>div:not(.av){display:flex;gap:12px;align-items:baseline;flex:1;min-width:0}.grid.list .card .n{flex:0 1 260px}.grid.list .card .e{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid.list .empty{padding:14px 4px 0;text-align:left}

.parkrow .pkdot{width:9px;height:9px;border-radius:50%;background:#2bac76;margin:0 8px 0 4px;flex:none}
.parkrow.occ .pkdot{background:#ff3b4e;animation:lvp 1s ease-in-out infinite}
.parkrow.occ .t{font-weight:700;color:#fff}.parkrow em{font-style:normal;font-size:12px;opacity:.8;margin-left:auto}
.parkcnt{background:#ff3b4e;color:#fff;border-radius:999px;padding:0 7px;font-size:11px;margin-left:6px}
.parkdot{position:absolute;top:6px;right:16px;width:10px;height:10px;border-radius:50%;background:#ff3b4e;animation:lvp 1s ease-in-out infinite}
.rail-btn{position:relative}
.cc-park{width:100%;margin:6px 0 0;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:8px;font:inherit;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}.cc-park:hover{border-color:var(--accent)}
.parkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;padding:18px}
.parktile{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.parktile.occ{border-color:#ff3b4e;box-shadow:0 0 0 1px #ff3b4e55}
.pt-top{display:flex;align-items:center;gap:8px}.pt-top em{margin-left:auto;font-style:normal;color:var(--muted);font-size:12px}
.pt-st{font-size:15px;min-height:38px;color:var(--muted)}.parktile.occ .pt-st{color:var(--text)}.pt-wait{color:#ff3b4e;font-weight:700}.pt-from{color:var(--muted);font-size:13px;margin-top:2px}
.parktile .pill-btn:disabled{opacity:.4;cursor:not-allowed}
.cc-park svg,.parktile .pill-btn svg,.parkgrid svg{width:16px;height:16px;flex:none}

/* Dashboard */
.dash{padding:16px 20px 28px;display:flex;flex-direction:column;gap:16px}
.dh-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.dh-tile{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:default}
.dh-tile[data-act]{cursor:pointer}.dh-tile[data-act]:hover{border-color:var(--accent)}
.dh-v{font-size:30px;font-weight:800;line-height:1.1}.dh-l{font-size:13px;font-weight:700;margin-top:4px}.dh-s{font-size:12px;color:var(--muted);margin-top:2px}
.dh-tile.bad{border-color:#ff3b4e66}.dh-tile.bad .dh-v{color:#ff5a6b}.dh-tile.warn .dh-v{color:#f2b705}.dh-tile.live{border-color:#ff3b4e;animation:lvp 1.4s ease-in-out infinite}.dh-tile.live .dh-v{color:#ff3b4e}
.dh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
.dh-wide{grid-column:1/-1}.dh-col{display:flex;flex-direction:column;gap:14px}
.dh-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dh-card header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.dh-card header h3{margin:0;font-size:14px;display:flex;align-items:center;gap:6px;flex:1}.dh-card header a{font-size:12.5px;color:var(--accent);text-decoration:none}
.dh-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--line);cursor:pointer}.dh-row:last-child{border-bottom:0}.dh-row:hover{background:var(--bg)}
.dh-main{flex:1;min-width:0;display:flex;flex-direction:column}.dh-main b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dh-main b.red{color:#ff5a6b}.dh-main span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-meta{text-align:right;font-size:12px;color:var(--muted);white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end}.dh-meta em{font-style:normal}
.dh-dir{width:22px;text-align:center;font-weight:800;font-size:15px;flex:none;display:inline-flex;justify-content:center}.dh-dir.in{color:#2bac76}.dh-dir.out{color:#5b8def}.dh-dir.miss{color:#ff5a6b}.dh-dir.vm{color:var(--muted)}
.dh-go{background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:5px 7px;cursor:pointer}.dh-go:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.dh-empty{padding:18px 16px;color:var(--muted);font-size:13px}.dh-pills{white-space:nowrap;display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}.dh-live{width:100%}
.dh-bars{display:flex;align-items:flex-end;gap:3px;height:120px;padding:14px 16px 4px}.dh-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.dh-bar i{display:block;width:100%;background:#5b8def;border-radius:3px 3px 0 0;min-height:2px}.dh-bar.now i{background:#2bac76}.dh-bar u{text-decoration:none;font-size:10px;color:var(--muted);height:14px}
.dh-ag{display:flex;align-items:center;gap:10px;padding:7px 16px;font-size:13px}.dh-ag span{width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dh-ag div{flex:1;background:var(--bg);border-radius:99px;height:8px}.dh-ag div i{display:block;height:100%;background:#5b8def;border-radius:99px}.dh-ag b{width:28px;text-align:right}
.dh-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-right:8px}.dh-seg button{background:none;border:0;color:var(--text);padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}.dh-seg button.on{background:var(--accent);color:#fff}
.dh-tile.good .dh-v{color:#2bac76}.dh-mood{display:flex;height:6px;border-radius:99px;overflow:hidden;margin-top:7px;background:var(--bg)}.dh-mood i{display:block;height:100%}.dh-mood .h{background:#2bac76}.dh-mood .n{background:#f2b705}.dh-mood .u{background:#e0357a}

/* Video */
.vid-start{display:flex;flex-direction:column;gap:14px;padding:18px;max-width:640px}.vid-pad{padding:14px 16px}.vid-pad p{margin:0 0 12px}.vid-pad input{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit}
.vid-body{display:flex;flex-direction:column;padding:0}#vid-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-auto-rows:minmax(180px,1fr);gap:8px;padding:10px}
.vid-tile{position:relative;background:#0b0c0e;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:160px}.vid-tile.screen{grid-column:1/-1;grid-row:span 2}
.vid-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}.vid-tile .vid-av{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px}.vid-tile.has .vid-av{display:none}
.vid-tile .vid-nm{position:absolute;left:8px;bottom:8px;background:#000a;color:#fff;padding:3px 9px;border-radius:8px;font-size:13px;z-index:2}
.vid-bar{display:flex;gap:10px;justify-content:center;padding:12px;border-top:1px solid var(--line);background:var(--bg2);flex-wrap:wrap}
.vid-bar button{display:inline-flex;align-items:center;gap:7px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 16px;font:inherit;font-weight:700;cursor:pointer}.vid-bar button.off{background:#e0245e33;border-color:#e0245e}.vid-bar button.on{background:var(--accent);border-color:var(--accent);color:#fff}.vid-bar button.end{background:#e0245e;border-color:#e0245e;color:#fff}
.ai-body{padding:16px;display:flex;flex-direction:column;gap:14px;max-width:1000px;overflow:auto}.ai-body>*{flex-shrink:0}.ai-pad{padding:4px 16px 14px;display:flex;flex-direction:column;gap:10px}
.ai-pad label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}.ai-pad textarea{width:100%;resize:vertical}.ai-pad input,.ai-pad select,.ai-pad textarea,.ai-inl select{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-weight:400}.ai-pad input[type=checkbox]{padding:0}.dh-card header h3 svg{width:16px;height:16px;vertical-align:-3px}
.ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.ai-state{font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px;background:#e0245e22;color:#ff7a8a;margin-left:10px}.ai-state.on{background:#16a34a22;color:#4ade80}
.ai-hours{display:flex;flex-direction:column;gap:6px}.ai-day{display:grid;grid-template-columns:150px 120px 24px 120px;align-items:center;gap:8px}.ai-day label.ai-open{flex-direction:row;align-items:center;gap:8px}.ai-day input[type=checkbox]{width:auto;margin:0}
.ai-inl{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12.5px;font-weight:600}
.ai-t{display:grid;grid-template-columns:1fr 160px 2fr;gap:8px;margin-bottom:6px}
.ai-save{display:flex;justify-content:flex-end}.ai-sum{max-width:420px;white-space:normal;font-size:12.5px}
.ai-tabs{display:flex;gap:8px;flex-wrap:wrap}.ai-tabs button{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:20px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-weight:600;cursor:pointer}.ai-tabs button.on{border-color:var(--accent);background:var(--accent);color:#fff}
.ai-dot{width:8px;height:8px;border-radius:50%;background:#e0245e}.ai-dot.on{background:#22c55e}
.ai-empty{max-width:520px;margin:50px auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}.ai-empty svg{color:var(--accent)}
.rep-t th.rep-sort{cursor:pointer;user-select:none;white-space:nowrap}.rep-t th.rep-sort:hover{color:var(--text)}.rep-t th.rep-sort.on{color:var(--accent)}
.gc-cols{display:flex;gap:8px;margin:2px 0 4px}.gc-col{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}.gc-col.sel{border-color:var(--text);box-shadow:0 0 0 2px var(--bg)}
.csh-list{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.csh-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);cursor:pointer}.csh-row:last-child{border-bottom:0}.csh-row:hover{background:var(--bg2)}
.csh-row input{width:auto;margin:0}.csh-row span,.csh-row b{flex:1}.csh-row small{color:var(--muted)}.csh-all{background:var(--bg2)}
.vbg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin:12px 0;max-height:380px;overflow:auto}
.vbg-t{display:flex;flex-direction:column;gap:5px;padding:5px;border:2px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;font-size:12px;cursor:pointer;text-align:left}.vbg-t:hover{border-color:var(--accent)}.vbg-t.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.vbg-t img,.vbg-t i{width:100%;aspect-ratio:16/9;border-radius:6px;object-fit:cover;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:26px;background:var(--bg2);color:var(--muted)}
.vbg-t i.vbg-blur{background:linear-gradient(135deg,#8a8f98,#c9ced6);color:#fff;filter:blur(.4px)}.vbg-t i.vbg-blur.strong{background:linear-gradient(135deg,#6b7079,#b4bac3)}
.vbg-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.vid-src{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0;max-height:340px;overflow:auto}.vid-src .vs{border:1px solid var(--line);border-radius:10px;padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:5px}.vid-src .vs:hover{border-color:var(--accent)}.vid-src img{width:100%;border-radius:6px;background:#000}.vid-src span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.vid-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:3;opacity:0;transition:opacity .15s}.vid-tile:hover .vid-tools,.vid-tile.ctrl .vid-tools{opacity:1}
.vid-tools button{background:#000b;color:#fff;border:1px solid #fff3;border-radius:8px;padding:5px 11px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}.vid-tools button:hover,.vid-tools button.on{background:var(--accent);border-color:var(--accent)}
.rcbadge{background:#e0245e;color:#fff;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:700}
.vid-tile.ctrl{outline:3px solid #e0245e;outline-offset:-3px;cursor:crosshair}.vid-tile.pointing{cursor:crosshair}
#rc-banner{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:99999;background:#e0245e;color:#fff;font:700 14px 'Segoe UI',sans-serif;padding:8px 14px;border-radius:0 0 12px 12px;display:flex;gap:14px;align-items:center;box-shadow:0 4px 14px #0008}#rc-banner button{background:#fff;color:#e0245e;border:0;border-radius:8px;padding:4px 14px;font:inherit;cursor:pointer}

.ra-step{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:10px 0}.ra-step ol{margin:6px 0 0;padding-left:20px;line-height:1.55;font-size:14px}

.vid-main{flex:1;min-height:0;display:flex}.vid-main #vid-grid{flex:1}
#vid-panel{width:300px;border-left:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;min-height:0}
.vp-tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--line)}.vp-tabs button{flex:1;background:none;border:0;color:var(--text);padding:7px;border-radius:8px;font:inherit;font-weight:700;cursor:pointer}.vp-tabs button.on{background:var(--accent);color:#fff}.vp-tabs button:last-child{flex:0 0 34px}
#vid-chat-list,#vid-people{flex:1;overflow:auto;padding:10px}.vc{margin-bottom:10px}.vc b{font-size:13px}.vc span{font-size:11px;color:var(--muted);margin-left:6px}.vc p{margin:2px 0 0;font-size:14px;line-height:1.4;word-break:break-word}.vc.me b{color:var(--accent)}
.vid-cin{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}.vid-cin input{flex:1;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit}.vid-cin button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:0 14px;font:inherit;font-weight:700;cursor:pointer}
.vp{display:flex;justify-content:space-between;gap:8px;padding:7px 4px;border-bottom:1px solid var(--line);font-size:14px}
.vid-tile.speaking{outline:3px solid #2bac76;outline-offset:-3px}.vid-tile{cursor:pointer}.vid-tile.pinned{grid-column:1/-1;grid-row:span 2}#vid-grid.haspin .vid-tile:not(.pinned){min-height:110px}
.vid-react{position:absolute;bottom:40px;font-size:38px;z-index:4;pointer-events:none;animation:vrise 3s ease-out forwards}@keyframes vrise{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-140px);opacity:0}}
.vid-rwrap{position:relative;display:inline-flex}.vid-rmenu{position:absolute;bottom:52px;left:0;display:flex;gap:4px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:6px;z-index:6}.vid-rmenu button{border:0;background:none;font-size:24px;padding:4px 6px}.vid-rmenu button:hover{background:var(--bg)}

#upd-banner{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:99998;background:#2563eb;color:#fff;font:700 14px 'Segoe UI',sans-serif;padding:7px 14px;border-radius:0 0 12px 12px;display:flex;gap:14px;align-items:center;box-shadow:0 4px 14px #0007}#upd-banner button{background:#fff;color:#2563eb;border:0;border-radius:8px;padding:4px 14px;font:inherit;cursor:pointer}

.vid-body{overflow:hidden;min-height:0}.vid-main{overflow:hidden}.vid-main #vid-grid{overflow:auto;min-height:0;grid-auto-rows:minmax(170px,auto)}.vid-bar{flex:none}

/* ---- Light skin ---- */
:root[data-skin="light"]{
  --rail:#e9edf3; --side:#f4f6fa; --side-text:#334155; --side-dim:#64748b; --side-hover:rgba(15,23,42,.07); --side-line:rgba(15,23,42,.1);
  --accent:#2563eb; --accent-hover:#1d4fc4; --green:#16a34a; --green-hover:#15803d; --red:#dc2626;
  --bg:#ffffff; --bg2:#f6f8fb; --text:#0f172a; --muted:#64748b; --line:#e2e8f0; --card:#ffffff; --shadow:0 8px 30px rgba(15,23,42,.14);
}
:root[data-skin="light"] #tb-search{background:rgba(15,23,42,.07);color:#475569}
:root[data-skin="light"] #tb-search:hover{background:rgba(15,23,42,.12)}
:root[data-skin="light"] .ws{box-shadow:0 0 0 1px #d6dde8}
:root[data-skin="light"] .rail-btn{color:#475569}
:root[data-skin="light"] .rail-btn:hover .bx{background:rgba(15,23,42,.08)}
:root[data-skin="light"] .rail-btn.on .bx{background:#2563eb;color:#fff}
:root[data-skin="light"] .rail-btn.on{color:#0f172a}
:root[data-skin="light"] .railver{color:rgba(15,23,42,.45)}
:root[data-skin="light"] .side-head{color:#0f172a}
:root[data-skin="light"] .side-head .compose{background:#2563eb;color:#fff}
:root[data-skin="light"] .side-head .compose:hover{background:#1d4fc4}
:root[data-skin="light"] #side .wordmark img{content:url("logo-wordmark.png")}
:root[data-skin="light"] .side-head .brand img{background:transparent}
:root[data-skin="light"] .item.on{background:#dbe7ff;color:#0f2a6b}
:root[data-skin="light"] .item.on .t2 span{color:#475569}
:root[data-skin="light"] .item.unread .t,:root[data-skin="light"] .item.unread .t2 b,:root[data-skin="light"] .item.unread .t2 span{color:#0f172a}
:root[data-skin="light"] .item.on .chbadge{background:rgba(15,23,42,.12)}
:root[data-skin="light"] .userbar{background:#e9edf3}
:root[data-skin="light"] .userbar .dot{border-color:#e9edf3}
:root[data-skin="light"] .userbar .un b,:root[data-skin="light"] .userbar .un:hover .stbtn,:root[data-skin="light"] .userbar .ub:hover,:root[data-skin="light"] .secplus:hover{color:#0f172a}
:root[data-skin="light"] .huddle{background:#e8f7ef;border-color:#16a34a;color:#0f172a}
:root[data-skin="light"] .huddle button{background:rgba(15,23,42,.1);color:#0f172a}
:root[data-skin="light"] .huddle button.end{background:var(--red);color:#fff}
:root[data-skin="light"] .huddle .hn em{color:#15803d}
/* ---- Dark skin ---- */
:root[data-skin="dark"]{
  --rail:#0b0d10; --side:#12151a; --side-text:#aab2bd; --side-dim:#7d8693; --side-hover:rgba(255,255,255,.07); --side-line:rgba(255,255,255,.08);
  --accent:#3b82f6; --accent-hover:#2563eb; --green:#22c55e; --green-hover:#16a34a; --red:#ef4444;
  --bg:#171a1f; --bg2:#1e2227; --text:#e5e7eb; --muted:#9ca3af; --line:#2b3037; --card:#1e2227; --shadow:0 8px 30px rgba(0,0,0,.65);
}
:root[data-skin="dark"] .item.on{background:#1f3a66;color:#fff}
:root[data-skin="dark"] .userbar{background:#0d0f12}
:root[data-skin="dark"] .userbar .dot{border-color:#0d0f12}
:root[data-skin="dark"] #tb-search{background:rgba(255,255,255,.08);color:#aab2bd}
:root[data-skin="dark"] .side-head .compose{background:#3b82f6;color:#fff}

/* ---- loading placeholders + section fade-in ---- */
.sk{display:block;border-radius:7px;background:linear-gradient(90deg,var(--bg2) 25%,var(--line) 37%,var(--bg2) 63%);background-size:400% 100%;animation:shim 1.4s ease infinite;height:12px;margin:5px 0}
@keyframes shim{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sk-av{width:40px;height:40px;border-radius:50%;flex:none;margin:0}
.sk-row{display:flex;gap:10px;align-items:center;padding:8px 16px}.sk-row>div{flex:1}
.sk-side .sk{background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.14) 37%,rgba(255,255,255,.06) 63%);background-size:400% 100%}
:root[data-skin="light"] .sk-side .sk{background:linear-gradient(90deg,rgba(15,23,42,.05) 25%,rgba(15,23,42,.11) 37%,rgba(15,23,42,.05) 63%);background-size:400% 100%}
.sk-card{display:flex;gap:11px;align-items:center;padding:14px}
#main.vin>:not(#callcard){animation:vin .22s ease-out}@keyframes vin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ---- rail: more buttons, tighter spacing, scrolls if the window is short ---- */
#rail{overflow-y:auto;scrollbar-width:none}#rail::-webkit-scrollbar{display:none}
.rail-btn{padding:3px 0 2px}.rail-btn .bx{width:34px;height:30px}.rail-btn .soon{position:absolute;top:-1px;right:-2px;font-style:normal;font-size:8px;font-weight:800;background:#f59e0b;color:#1f1300;border-radius:6px;padding:0 4px;text-transform:uppercase}
.rm-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:var(--bg2)}.rm-row[draggable=true]{cursor:grab}.rm-row.off{opacity:.5}.rm-grip{color:var(--muted);font-weight:900}.rm-ic svg{width:18px;height:18px}.rm-b{border:1px solid var(--line);border-radius:7px;padding:3px 8px;background:var(--bg);color:var(--text);cursor:pointer}.rm-row small{color:var(--muted);font-size:11.5px}
.soon-card{max-width:520px;margin:50px auto;text-align:center;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:36px 30px}.soon-ic{color:var(--accent);margin-bottom:6px}.soon-ic svg{width:60px;height:60px}.soon-card p{color:var(--muted);line-height:1.6}.soon-pill{display:inline-block;background:#f59e0b;color:#1f1300;font-weight:800;border-radius:99px;padding:4px 16px;margin-top:8px}
/* ---- notes ---- */
.cn-edit{display:flex;flex-direction:column;gap:10px;padding:18px 22px;max-width:820px;height:100%}.cn-title{font:inherit;font-size:20px;font-weight:800;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);padding:6px 0;outline:0}
.cn-meta{display:flex;gap:12px}.cn-meta label{flex:1;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:flex;flex-direction:column;gap:3px}.cn-meta input{font:inherit;font-size:14px;text-transform:none;letter-spacing:0;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px}
.cn-text{flex:1;min-height:260px;font:inherit;font-size:15px;line-height:1.55;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:12px;resize:none;outline:0}.cn-foot{color:var(--muted);font-size:12.5px}
.cc-notebtn{width:100%;margin:6px 0 0;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:8px;font:inherit;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}.cc-notebtn:hover{border-color:var(--accent)}.cc-note{width:100%;margin-top:6px;min-height:90px;resize:vertical;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:8px;font:inherit;font-size:13.5px}
.qchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.qchips .pill-btn{font-size:12.5px}.mon-btn.msg{margin-left:4px}.ns-h{margin:12px 0 4px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
/* ---- calendar ---- */
.cal-wrap{display:flex;gap:0;padding:0;overflow:hidden}.cal-grid{flex:1;display:flex;flex-direction:column;min-width:0;padding:10px 12px}.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);font-size:12px;color:var(--muted);font-weight:700;padding:0 2px 4px}.cal-dow span{text-align:center}
.cal-cells{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:4px;min-height:0}.cal-d{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:4px 5px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:0}
.cal-d.out{opacity:.45}.cal-d.today .n{background:var(--accent);color:#fff;border-radius:99px;padding:0 7px}.cal-d.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.cal-d .n{font-size:12.5px;font-weight:700;align-self:flex-start}
.cal-d i{font-style:normal;font-size:11px;color:#fff;border-radius:5px;padding:1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-d small{font-size:10.5px;color:var(--muted)}
.cal-side{width:300px;border-left:1px solid var(--line);padding:12px 14px;overflow:auto;background:var(--bg)}.cal-side h3{margin:4px 0 8px;font-size:14px}
.cal-e{border-left:4px solid var(--accent);background:var(--bg2);border-radius:8px;padding:7px 10px;margin-bottom:6px;cursor:pointer}.cal-e b{display:block;font-size:13.5px}.cal-e span{display:block;font-size:12px;color:var(--muted)}.cal-e em{font-style:normal;font-size:11px;color:var(--accent);display:inline-flex;gap:3px;align-items:center}.cal-up small{display:block;color:var(--muted);font-size:11px;margin:6px 0 2px}
.cal-mn{min-width:140px;text-align:center}.cal-f{display:flex;flex-direction:column;gap:9px}.cal-f label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}.cal-f input,.cal-f textarea{font:inherit;font-size:14px;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px}.cal-r{display:flex;gap:8px}.cal-r label{flex:1}.cal-ck{flex-direction:row!important;align-items:center;gap:8px!important;color:var(--text)!important;font-size:14px!important}
.cal-srcs{margin:8px 0}.cal-src{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line)}.cal-src i{width:12px;height:12px;border-radius:50%;flex:none}.cal-src div{flex:1;min-width:0}.cal-src small{display:block;color:var(--muted)}

.dh-close{padding:14px 16px}.dh-cs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.dh-cs div{border-radius:10px;padding:10px;text-align:center}.dh-cs b{display:block;font-size:26px}.dh-cs span{font-size:12px;font-weight:700}
.dh-cs .pos{background:#2bac7626;color:#2bac76}.dh-cs .neu{background:#f2b70526;color:#c99700}.dh-cs .neg{background:#e0357a26;color:#e0357a}.dh-close .dh-mood{margin:0 0 8px}

.dh-sel{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font:inherit;font-size:12.5px}.dh-bars.wide{gap:2px}.dh-bars.wide .dh-bar u{font-size:9.5px;white-space:nowrap}
.upd-notes{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:10px 0}.upd-notes ul{margin:6px 0 0;padding-left:20px;line-height:1.55;font-size:14px}.upd-notes li{margin-bottom:2px}

.sm-f{max-height:62vh;overflow:auto;padding-right:6px}.sm-f select{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;font-size:14px}
.sm-box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:7px}.sm-box>b{font-size:13px;color:var(--text)}.sm-box small{color:var(--muted);font-weight:400}
#sm-people{max-height:140px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--bg2)}.sm-p{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;color:var(--text)!important;font-size:14px!important;padding:2px 0}.sm-p small{margin-left:auto}
.sm-soon{opacity:.55}

.dh-vm{border-bottom:1px solid var(--line)}.dh-vm:last-child{border-bottom:0}.dh-vm .dh-row{border-bottom:0}.dh-audio{display:block;width:calc(100% - 32px);margin:0 16px 10px;height:36px}.dh-go.del:hover{background:#dc2626;border-color:#dc2626}
.joinvid{display:inline-block;background:var(--accent);color:#fff!important;border-radius:9px;padding:6px 12px;font-weight:700;text-decoration:none!important}

.fax-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px;padding:16px 20px;align-items:start}.fax-grid .mgt{margin:0}.fax-steps{margin:0 0 12px;padding-left:20px;line-height:1.7;color:var(--muted)}.fax-steps b{color:var(--text)}

.cc-queues{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:14px}.cc-q.hot{border-color:#ff3b4e;box-shadow:0 0 0 1px #ff3b4e55}.cc-q header small{margin-left:auto}
.cc-qstats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:12px 8px;border-bottom:1px solid var(--line)}.cc-qstats b{display:block;font-size:26px}.cc-qstats span{font-size:12px;color:var(--muted)}.cc-qfoot{padding:8px 12px}
#cc-root .mgt{margin-top:14px}
.m-head h1{white-space:nowrap}#cc-q.mg-search{width:170px}@media (max-width:1300px){#cc-sub{display:none}}

#upd-banner.err{background:#dc2626}

.nb-wrap{padding:16px 20px}.nb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.nb-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-height:150px;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:transform .12s}.nb-card:hover{transform:translateY(-2px)}
.nb-top{display:flex;gap:6px;align-items:flex-start}.nb-top b{flex:1;font-size:15px;line-height:1.3;word-break:break-word}.nb-pin{background:none;border:0;opacity:.35;cursor:pointer;font-size:15px}.nb-pin.on,.nb-card:hover .nb-pin{opacity:1}
.nb-body{flex:1;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;overflow:hidden;max-height:130px;opacity:.9}.nb-foot{display:flex;justify-content:space-between;font-size:11.5px;opacity:.7}.nb-foot em{font-style:normal}
.cn-colors{display:flex;align-items:center;gap:6px}.cn-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);cursor:pointer}.cn-dot.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.pill-btn.on{background:var(--accent);color:#fff}
.sm-peoplebox{max-height:140px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--bg2)}

.lm-opts{display:flex;flex-direction:column;gap:8px;margin:10px 0}.lm-opt{text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--bg2);color:var(--text);padding:11px 14px;cursor:pointer;display:flex;flex-direction:column;gap:3px;font:inherit}.lm-opt:hover{border-color:var(--accent);background:var(--bg)}.lm-opt b{font-size:15px}.lm-opt span{font-size:12.5px;color:var(--muted);line-height:1.4}

.cal-oa{display:flex;flex-wrap:wrap;gap:10px}.cal-oa .pill-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;font-weight:600;background:#fff;color:#1f2937;border:1px solid #cbd5e1}.cal-oa .pill-btn:hover{background:#f1f5f9}
.cal-adv{margin:12px 0 0}.cal-adv summary{cursor:pointer;color:var(--muted);font-size:13px;padding:4px 0}

.vi-list{max-height:170px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px}.vi-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;cursor:pointer}.vi-row:hover{background:var(--bg2)}.vi-row small{margin-left:auto;color:var(--muted)}
.vi-link{border:1px dashed var(--line);border-radius:10px;padding:8px 10px;margin:0 0 8px;overflow:auto}.vi-link code{font-size:12.5px;word-break:break-all}

.dh-ev{position:relative;padding-left:16px}.dh-ev.past{opacity:.55}.dh-evbar{position:absolute;left:6px;top:9px;bottom:9px;width:4px;border-radius:3px}.dh-now{background:#e11d48;color:#fff;border-radius:8px;padding:1px 8px;font-size:11px;font-style:normal;font-weight:700}

.nav-back{flex:none;margin-right:2px}

.side-search{padding:6px 12px 2px}.side-search input{width:100%;box-sizing:border-box;padding:7px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.22);color:inherit;font-size:13.5px}

body.mac #titlebar{padding-left:86px}

.cidrow{position:relative}.cid-ed{margin-left:8px;font-style:normal;opacity:.55;cursor:pointer;padding:0 4px}.cid-ed:hover{opacity:1}

.item .ex{margin-left:auto;font-size:12px;opacity:.55;padding-left:8px}.side-me{padding:0 16px 6px;font-size:12.5px;opacity:.7;margin-top:-4px}

.dh-ag{display:flex;align-items:center;gap:10px}.dh-ag>span{flex:0 0 38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dh-ag>div{flex:1}.dh-hp{font-style:normal;font-size:12.5px;min-width:54px;text-align:right;opacity:.85}.dh-hp.good{color:#2bac76}.dh-hp.bad{color:#e8a33d}.dh-aghead{display:flex;gap:10px;justify-content:flex-end;font-size:11px;opacity:.55;padding:2px 0}.dh-aghead em{font-style:normal;min-width:54px;text-align:right}.dh-aghead b{min-width:24px;text-align:right;font-weight:600}

.vmactions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}

.vs-wrap h3{margin:18px 0 8px;font-size:14px;opacity:.8}.vs-ck{display:flex;align-items:center;gap:9px;padding:5px 0}.vs-row{display:flex;align-items:center;gap:12px;padding:6px 0}.vs-row select{min-width:260px}.vs-btns{margin-top:18px;display:flex;align-items:center;gap:12px}

.pt-clear{margin-left:10px;font-size:12px;opacity:.7;white-space:nowrap}

.cal-q{width:190px;padding:6px 11px;border-radius:9px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:13px;margin-right:6px}

.ced-row{display:flex;align-items:center;gap:16px;margin:10px 0}.ced-big{width:84px;height:84px;font-size:28px;flex:none;display:grid;place-items:center;border-radius:50%}.ced-btns{display:flex;flex-direction:column;gap:8px}.ced-btns label{cursor:pointer;text-align:center}

.gr-tabs{display:flex;gap:8px;margin:8px 0 12px}.gr-tabs .pill-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.mic-meter{height:8px;border-radius:5px;background:rgba(255,255,255,.12);margin:10px 0 6px;max-width:460px;overflow:hidden}.mic-meter i{display:block;height:100%;width:0;background:#2bac76;transition:width .08s}

.dh-x{opacity:0;border:0;background:transparent;color:inherit;cursor:pointer;font-size:11px;padding:0 4px;margin-left:-6px}.dh-ag:hover .dh-x{opacity:.6}.dh-x:hover{opacity:1!important}.dh-hidnote{font-size:12px;opacity:.6;padding:6px 0 2px}

.cal-ext{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 4px}.cal-ext .pill-btn{display:inline-flex;align-items:center;gap:7px}

.mgt th.mg-sortable{cursor:pointer;user-select:none;white-space:nowrap}.mgt th.mg-sortable:hover{color:var(--accent,#7aa7ff)}.mgt th.mg-sortable.on{color:var(--accent,#7aa7ff)}

.ch-title{cursor:pointer}.ch-title:hover{text-decoration:underline dotted}.ch-ren{flex:none;padding:3px 10px;font-size:12.5px}.m-head .sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.addon-steps{padding-left:20px;line-height:1.7}.addon-steps li{margin:8px 0}.addon-steps code{word-break:break-all;background:var(--bg2);padding:1px 6px;border-radius:5px;font-size:12px}

.mention{background:rgba(59,130,246,.22);color:#9cc2ff;border-radius:5px;padding:0 4px;font-weight:600}.mention-pop{position:fixed;z-index:200;min-width:220px;max-height:260px;overflow:auto;padding:4px;background:var(--bg2,#23262d);border:1px solid var(--line,#3a3f4a);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.4)}.mention-pop .mrow{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;cursor:pointer}.mention-pop .mrow.on,.mention-pop .mrow:hover{background:rgba(59,130,246,.25)}

.who-link{cursor:pointer}.who-link:hover{text-decoration:underline}

/* team map */
.map-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
#map-canvas{flex:1;min-height:240px;background:#dfe6ee}
:root[data-theme="dark"] #map-canvas{background:#1b1e23}
:root[data-theme="dark"] .leaflet-tile{filter:brightness(.72) contrast(1.1) saturate(.8)}
.map-list{max-height:38%;overflow:auto;border-top:1px solid var(--line);padding:6px 0}
.map-row{margin:0 8px;color:var(--text)}.map-row .t2 span{color:var(--muted)}.map-row.on{background:var(--bg2);color:var(--text)}
.map-tip{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;font-weight:700;font-size:12px;padding:3px 8px;box-shadow:0 2px 8px rgba(0,0,0,.2);text-align:center;line-height:1.25}.map-tip small{display:block;font-weight:500;font-size:10.5px;color:var(--muted)}
.leaflet-popup-content-wrapper{background:var(--card);color:var(--text);border-radius:10px;box-shadow:var(--shadow)}.leaflet-popup-tip{background:var(--card)}.leaflet-popup-content{margin:12px 14px;font:13px/1.45 inherit}.leaflet-container a.leaflet-popup-close-button{color:var(--muted)}
.map-pop .muted{font-size:12px}.map-pop-btns{display:flex;gap:6px;margin-top:10px}.map-pop-btns button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);color:var(--text);font-weight:600;font-size:12px;cursor:pointer}.map-pop-btns button:hover{border-color:var(--text)}
.leaflet-container{font:inherit}
.rail-btn.long{font-size:9px;letter-spacing:-.2px;line-height:1.15}
.crm-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0;max-width:640px;background:var(--bg2)}.crm-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}.crm-top small{display:block;color:var(--muted);font-size:12.5px}.crm-top .grow{flex:1}
.crm-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#e42527,#f9b21d 55%,#089949);color:#fff;font-weight:800;display:grid;place-items:center;font-size:17px;flex:none}.crm-logo.sm{width:20px;height:20px;border-radius:6px;font-size:11px}
.cc-crm{display:flex;align-items:center;gap:8px;margin:8px 0 2px;padding:7px 10px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);font-size:13px}.cc-crm .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cc-crm small{color:var(--muted)}.cc-crm a{font-weight:700;white-space:nowrap}

/* Recents: call recording + sentiment */
.hrec{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hrec .dh-pills{margin-top:5px}.row .dh-audio{width:min(420px,100%);margin:6px 0 2px}

/* alerts bell (title bar) */
#tb-bell{-webkit-app-region:no-drag;position:relative;flex:none;width:30px;height:26px;border-radius:7px;background:rgba(255,255,255,.12);color:#e8dce8;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer}
#tb-bell:hover{background:rgba(255,255,255,.22)}#tb-bell svg{width:15px;height:15px}
#tb-demo{-webkit-app-region:no-drag;flex:none;height:26px;border-radius:7px;background:#f59e0b;color:#1f1300;border:0;padding:0 10px;font-size:11.5px;font-weight:800;letter-spacing:.6px;cursor:pointer;margin-right:6px}
#tb-demo:hover{background:#fbbf24}
body>#tb-demo{position:fixed;top:6px;right:120px;z-index:50}
:root[data-skin="light"] #tb-bell{background:rgba(15,23,42,.07);color:#475569}
#tb-bell .bell-n{position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e11d48;color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--rail)}
#bell-panel{position:fixed;top:44px;right:12px;z-index:60;width:400px;max-width:calc(100vw - 24px);max-height:min(620px,calc(100vh - 60px));display:flex;flex-direction:column;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.bell-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}.bell-h b{font-size:16px}
.bell-cnt{font-size:12px;font-weight:700;color:#fff;background:#e11d48;border-radius:10px;padding:1px 8px}
.bell-x{margin-left:auto;width:28px;height:28px;border-radius:7px;color:var(--muted)}.bell-x:hover{background:var(--line)}
.bell-list{flex:1;overflow:auto;min-height:120px}
.bell-it{position:relative;display:flex;gap:12px;padding:12px 40px 12px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.bell-it:hover{background:rgba(127,127,127,.08)}.bell-it.new{background:rgba(37,99,235,.07)}.bell-it.new::before{content:'';position:absolute;left:5px;top:20px;width:7px;height:7px;border-radius:50%;background:#2563eb}
.bell-ic{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(127,127,127,.14)}
.bell-it.k-sent .bell-ic{background:rgba(225,29,72,.14);color:#e11d48}.bell-it.k-miss .bell-ic{background:rgba(234,88,12,.14);color:#ea580c}.bell-it.k-vm .bell-ic{background:rgba(37,99,235,.14);color:#2563eb}.bell-it.k-cal .bell-ic{background:rgba(22,163,74,.14);color:#16a34a}
.bell-tx p{margin:0 0 3px;font-size:13.5px;line-height:1.4}.bell-tx time{font-size:12px;color:var(--muted)}
.bell-del{position:absolute;right:10px;top:10px;width:24px;height:24px;border-radius:6px;color:var(--muted);opacity:0}.bell-it:hover .bell-del{opacity:1}.bell-del:hover{background:var(--line)}
.bell-empty{padding:36px 20px;text-align:center;color:var(--muted)}.bell-empty p{margin:8px 0 4px;font-weight:700;color:var(--text)}.bell-empty span{font-size:13px}
.bell-f{display:flex;border-top:1px solid var(--line)}.bell-f button{flex:1;padding:13px;font-weight:700;color:var(--accent)}.bell-f button+button{border-left:1px solid var(--line)}.bell-f button:hover:not(:disabled){background:rgba(127,127,127,.08)}.bell-f button:disabled{color:var(--muted);opacity:.6;cursor:default}

/* call transcripts: one bubble per segment */
.tx-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 8px}.tx-head h4{margin:0 8px 0 0}
.tx-c{font-size:11.5px;font-weight:700;color:#fff;border-radius:10px;padding:2px 9px}.tx-c.pos{background:#5b8def}.tx-c.neu{background:#e0a800}.tx-c.neg{background:#db2777}
.tx-dl{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none}
.tx-list{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto;padding-right:4px}
.tx-seg{border-left:4px solid #e0a800;padding-left:10px}.tx-seg.pos{border-left-color:#5b8def}.tx-seg.neg{border-left-color:#db2777}
.tx-meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:4px}.tx-meta time{color:var(--muted);font-variant-numeric:tabular-nums}
.tx-b{border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13.5px;line-height:1.45;background:rgba(127,127,127,.05)}
.tx-modal .tx-list{max-height:300px}

/* ---- WhatsApp skins: teal-green accents, round avatars, chat wallpaper, green "sent" bubbles ---- */
:root[data-skin="whatsapp"]{
  --rail:#f0f2f5; --side:#ffffff; --side-text:#3b4a54; --side-dim:#667781; --side-hover:#f5f6f6; --side-line:#e9edef;
  --accent:#00a884; --accent-hover:#008f6f; --green:#00a884; --green-hover:#008f6f; --red:#ea0038; --amber:#ffb02e;
  --bg:#ffffff; --bg2:#f0f2f5; --text:#111b21; --muted:#667781; --line:#e9edef; --card:#ffffff; --shadow:0 8px 30px rgba(11,20,26,.16);
  --wa-chat:#efeae2; --wa-dot:rgba(84,101,111,.07); --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-out-text:#111b21; --wa-sel:#f0f2f5;
}
:root[data-skin="whatsapp-dark"]{
  --rail:#202c33; --side:#111b21; --side-text:#e9edef; --side-dim:#8696a0; --side-hover:#202c33; --side-line:#222d34;
  --accent:#00a884; --accent-hover:#06cf9c; --green:#00a884; --green-hover:#06cf9c; --red:#f15c6d; --amber:#ffb02e;
  --bg:#111b21; --bg2:#202c33; --text:#e9edef; --muted:#8696a0; --line:#222d34; --card:#233138; --shadow:0 8px 30px rgba(0,0,0,.6);
  --wa-chat:#0b141a; --wa-dot:rgba(255,255,255,.035); --wa-in:#202c33; --wa-out:#005c4b; --wa-out-text:#e9edef; --wa-sel:#2a3942;
}
:root[data-skin^="whatsapp"] .rail-btn{color:var(--side-dim)}
:root[data-skin^="whatsapp"] .rail-btn:hover .bx{background:rgba(134,150,160,.18)}
:root[data-skin^="whatsapp"] .rail-btn.on{color:var(--text)}
:root[data-skin^="whatsapp"] .rail-btn.on .bx{background:rgba(0,168,132,.18);color:#00a884}
:root[data-skin^="whatsapp"] .railver{color:var(--side-dim)}
:root[data-skin^="whatsapp"] .side-head{color:var(--text)}
:root[data-skin^="whatsapp"] .side-head .compose{background:#00a884;color:#fff}
:root[data-skin^="whatsapp"] .side-head .compose:hover{background:#008f6f}
:root[data-skin^="whatsapp"] .side-head .brand img{background:transparent}
:root[data-skin="whatsapp"] #side .wordmark img{content:url("logo-wordmark.png")}
:root[data-skin^="whatsapp"] .item.on{background:var(--wa-sel);color:var(--text)}
:root[data-skin^="whatsapp"] .item.on .t2 span{color:var(--muted)}
:root[data-skin^="whatsapp"] .item.unread .t,:root[data-skin^="whatsapp"] .item.unread .t2 b{color:var(--text)}
:root[data-skin^="whatsapp"] .item.on .chbadge{background:rgba(134,150,160,.2)}
:root[data-skin^="whatsapp"] .cnt{background:#25d366;color:#111b21}
:root[data-skin^="whatsapp"] .userbar{background:var(--rail)}
:root[data-skin^="whatsapp"] .userbar .dot{border-color:var(--rail)}
:root[data-skin^="whatsapp"] .userbar .un b{color:var(--text)}
:root[data-skin^="whatsapp"] #tb-search{background:var(--side);color:var(--side-dim);box-shadow:0 0 0 1px var(--side-line)}
:root[data-skin^="whatsapp"] #tb-report,:root[data-skin^="whatsapp"] #tb-feature,:root[data-skin^="whatsapp"] #tb-bell{background:rgba(134,150,160,.14);color:var(--side-text)}
:root[data-skin^="whatsapp"] kbd{background:rgba(134,150,160,.2);color:var(--side-dim)}
:root[data-skin^="whatsapp"] .av,:root[data-skin^="whatsapp"] .item .av.sm,:root[data-skin^="whatsapp"] .row .av,:root[data-skin^="whatsapp"] .ws{border-radius:50%}
:root[data-skin^="whatsapp"] .m-head{background:var(--bg2)}
:root[data-skin^="whatsapp"] #thread{background-color:var(--wa-chat);background-image:radial-gradient(var(--wa-dot) 1.2px,transparent 1.3px),radial-gradient(var(--wa-dot) 1.2px,transparent 1.3px);background-size:26px 26px;background-position:0 0,13px 13px}
:root[data-skin^="whatsapp"] .bub{border:0;border-radius:8px;background:var(--wa-in);box-shadow:0 1px .5px rgba(11,20,26,.13)}
:root[data-skin^="whatsapp"] .bubrow.in .bub{border-top-left-radius:0;border-bottom-left-radius:8px}
:root[data-skin^="whatsapp"] .bubrow.out .bub{background:var(--wa-out);color:var(--wa-out-text);border-top-right-radius:0;border-bottom-right-radius:8px}
:root[data-skin^="whatsapp"] .bubrow.out .bub a{color:inherit}
:root[data-skin^="whatsapp"] .composer{border-radius:24px;background:var(--bg);border-color:var(--line)}
:root[data-skin^="whatsapp"] .composer:focus-within{box-shadow:none;border-color:#00a884}
:root[data-skin^="whatsapp"] .composer .go{border-radius:20px}
:root[data-skin^="whatsapp"] .huddle{background:rgba(0,168,132,.12);border-color:#00a884;color:var(--text)}

/* ---- Mini mode (Windows): phone-sized window ---- */
#tb-mini{-webkit-app-region:no-drag;flex:none;height:26px;border-radius:7px;background:rgba(255,255,255,.12);color:#e8dce8;display:flex;align-items:center;gap:6px;padding:0 11px;font-size:12.5px;font-weight:600;white-space:nowrap;border:0;cursor:pointer}
#tb-mini:hover{background:rgba(255,255,255,.22)}#tb-mini svg{width:14px;height:14px}
:root[data-skin="light"] #tb-mini{background:rgba(15,23,42,.07);color:#475569}:root[data-skin^="whatsapp"] #tb-mini{background:rgba(134,150,160,.14);color:var(--side-text)}
html[data-mini] .tb-left{width:10px}html[data-mini] .tb-right{width:140px}
html[data-mini] .tb-mid{margin:0;flex:1;justify-content:flex-end;gap:6px;padding-right:6px}
html[data-mini] #tb-search,html[data-mini] #tb-report,html[data-mini] #tb-feature{display:none!important}
html[data-mini] #app{flex-direction:column}
html[data-mini] #rail,html[data-mini] #members{display:none!important}
html[data-mini] #side{display:none}
html[data-mini][data-mini-list] #side{display:flex;width:auto;flex:1;border-radius:0}
html[data-mini][data-mini-list] #main{display:none}
html[data-mini] #main{flex:1;min-height:0}
#minibar{flex:none;display:flex;align-items:stretch;gap:2px;padding:4px 6px;background:var(--rail);border-bottom:1px solid var(--side-line)}
.mini-tab{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 0 3px;border-radius:8px;color:var(--side-text);font-size:10.5px;font-weight:700}
.mini-tab:hover{background:var(--side-hover)}.mini-tab.on{background:rgba(255,255,255,.16);color:#fff}
:root[data-skin="light"] .mini-tab.on,:root[data-skin^="whatsapp"] .mini-tab.on{background:rgba(0,0,0,.08);color:var(--text)}
.mini-tab em{position:absolute;top:0;right:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-style:normal;font-size:10px;line-height:16px}
.mini-back,.mini-pin{flex:none;width:30px;border-radius:8px;color:var(--side-text);display:grid;place-items:center}
.mini-back svg{transform:rotate(90deg)}.mini-back:hover,.mini-pin:hover{background:var(--side-hover)}
.mini-pin{opacity:.55}.mini-pin.on{opacity:1;color:var(--accent)}
html[data-mini] .m-head{height:auto;min-height:46px;flex-wrap:wrap;gap:6px;padding:6px 10px}
html[data-mini] .m-head h1{font-size:15px}
html[data-mini] .m-head .pill-btn{padding:4px 8px;font-size:12px}
html[data-mini] .dial{padding:12px 16px}html[data-mini] .keys{gap:8px;margin:6px 0 12px}html[data-mini] .key{height:52px}
html[data-mini] .composer{margin:0 8px 8px}
html[data-mini] .bubrow{padding:2px 10px}html[data-mini] .bub{max-width:88%}
html[data-mini] #callcard{left:8px;right:8px;bottom:8px;width:auto}
html[data-mini] .banner{display:none}

/* ---- Profile menu (title bar, top right) ---- */
#tb-me{-webkit-app-region:no-drag;position:relative;flex:none;width:34px;height:34px;margin:0 8px;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer}
#tb-me .av{width:30px;height:30px;font-size:12px;border-radius:50%}
#tb-me:hover .av{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
#tb-me .me-dot{position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--rail);background:#8a8a8a}
#tb-me .me-dot.on{background:var(--green)}#tb-me .me-dot.busy{background:var(--red)}#tb-me .me-dot.away{background:var(--amber)}
#me-panel{position:fixed;top:44px;right:150px;z-index:60;width:320px;max-width:calc(100vw - 24px);background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
body.mac #me-panel,html[data-mini] #me-panel{right:12px}
.me-h{display:flex;gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--line)}.me-h .av{width:46px;height:46px;font-size:17px;border-radius:50%}
.me-h b{display:block;font-size:15px}.me-h span{display:block;font-size:12.5px;color:var(--muted)}
.me-st{margin-top:6px;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--text)}.me-st:hover{background:rgba(127,127,127,.1)}
.me-sec{padding:6px 0;border-bottom:1px solid var(--line)}.me-sec:last-child{border-bottom:0}
.me-sw{display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;font-size:14px}.me-sw:hover{background:rgba(127,127,127,.08)}
.me-sw input{display:none}.me-sw i{position:relative;flex:none;width:36px;height:20px;border-radius:10px;background:rgba(127,127,127,.4);transition:background .15s}
.me-sw i::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.me-sw input:checked+i{background:var(--accent)}.me-sw input:checked+i::after{left:18px}
.me-it{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;font-size:14px;text-align:left}.me-it:hover{background:rgba(127,127,127,.08)}.me-it svg{color:var(--muted)}.me-it.red,.me-it.red svg{color:var(--red)}

/* Texts / Chat list filter button */
.side-search:has(.sq-more){display:flex;gap:6px;align-items:center}.side-search .sq-more{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--side-text);background:rgba(255,255,255,.08)}.side-search .sq-more:hover{background:var(--side-hover)}.side-search .sq-more.on{background:var(--accent);color:#fff}
:root[data-skin="light"] .side-search .sq-more,:root[data-skin="whatsapp"] .side-search .sq-more{background:rgba(15,23,42,.06)}

.nc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}@media (max-width:520px){.nc-grid{grid-template-columns:1fr}}

.vm-box{display:flex;align-items:center;gap:8px;padding:6px 12px 0}.vm-box label{font-size:12px;font-weight:700;color:var(--side-dim);text-transform:uppercase;letter-spacing:.4px}.vm-box select{flex:1;min-width:0;padding:6px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.22);color:inherit;font-size:13px}.vm-box select option{color:#111}

/* ---- Call Overview window ---- */
#ov{position:fixed;inset:0;z-index:80;display:grid;place-items:center}
.ov-bg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.ov-win{position:relative;width:min(1100px,94vw);height:min(860px,92vh);display:flex;flex-direction:column;background:var(--bg2);color:var(--text);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.ov-top{flex:none;display:flex;align-items:center;padding:14px 20px;background:linear-gradient(90deg,var(--accent),#4f46e5);color:#fff;font-size:18px}
.ov-x{margin-left:auto;width:32px;height:32px;border-radius:8px;color:#fff;font-size:16px}.ov-x:hover{background:rgba(255,255,255,.18)}
.ov-scroll{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px;min-height:0}
.ov-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width:860px){.ov-row{grid-template-columns:1fr}}
.ov-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.ov-card h3{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px}
.ov-h3{display:flex;align-items:center;gap:8px;margin-bottom:10px}.ov-h3 h3{margin:0;flex:1}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.ov-grid>div{padding:8px 0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px}
.ov-grid span{color:var(--muted);min-width:96px}.ov-grid b{display:inline-flex;align-items:center;gap:4px}.ov-grid em{flex-basis:100%;font-style:normal;font-size:12px;color:var(--muted);padding-left:102px}
.ov-pill{padding:3px 12px;border-radius:7px;font-size:13px;font-weight:700}.ov-pill.positive{background:#bbf7d0;color:#14532d}.ov-pill.neutral{background:#fed7aa;color:#7c2d12}.ov-pill.negative{background:#fecdd3;color:#881337}
.ov-ib{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(127,127,127,.14);color:var(--text)}.ov-ib:hover{background:rgba(127,127,127,.26)}.ov-ib.sm{width:24px;height:24px;color:var(--accent);background:transparent}
.ov-legend{display:flex;gap:14px;font-size:12.5px;color:var(--muted);margin-bottom:10px}.ov-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.ov-legend .pos,.ov-track .pos{background:#4ade80}.ov-legend .neu,.ov-track .neu{background:#fdba74}.ov-legend .neg,.ov-track .neg{background:#fb7185}
.ov-play{width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:10px;background:var(--accent);color:#fff;font-weight:800;margin-bottom:12px}.ov-play span{font-weight:600;opacity:.85}
#ov-audio{width:100%;margin-bottom:12px}
.ov-lane{display:flex;align-items:center;gap:10px;margin:8px 0}.ov-lane label{flex:none;width:118px;font-size:13px;color:var(--muted)}
.ov-track{position:relative;flex:1;height:16px;border-radius:8px;background:rgba(127,127,127,.14);overflow:hidden}.ov-track i{position:absolute;top:2px;bottom:2px;border-radius:5px;cursor:pointer}.ov-track i:hover{filter:brightness(1.15)}
.ov-main{display:grid;grid-template-columns:170px 1fr;gap:14px;align-items:start}@media (max-width:760px){.ov-main{grid-template-columns:1fr}}
.ov-tabs{display:flex;flex-direction:column;gap:2px;position:sticky;top:0}.ov-tabs button{text-align:left;padding:10px 12px;border-radius:8px;color:var(--muted);font-weight:600}.ov-tabs button:hover{background:rgba(127,127,127,.1)}.ov-tabs button.on{background:rgba(37,99,235,.14);color:var(--text);box-shadow:inset -3px 0 0 var(--accent)}
.ov-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.ov-sum{margin:0;line-height:1.55}
.ov-txc #ov-q{width:220px;max-width:40%;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:13px}
.ov-names{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--muted);margin:0 4px 6px}
.ov-tx{display:flex;flex-direction:column;gap:10px}
.ov-b{display:flex}.ov-b.ov-me{justify-content:flex-end}
.ov-b>div{max-width:78%;display:flex;gap:10px;padding:9px 13px;border-radius:14px;line-height:1.45;font-size:14px;cursor:pointer;border-left:3px solid transparent}
.ov-b.ov-them>div{background:rgba(74,222,128,.16);border-bottom-left-radius:4px}.ov-b.ov-me>div{background:rgba(99,102,241,.16);border-bottom-right-radius:4px}
.ov-b.neg>div{border-left-color:#fb7185}.ov-b.pos>div{border-left-color:#4ade80}
.ov-b time{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:1px}
.ov-b mark{background:#fde047;color:#111;border-radius:3px}
.ov-acts{display:flex;flex-wrap:wrap;gap:8px}

/* voicemail mailbox picker (office managers) */
#vm-box-btn{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.22);color:inherit;font-size:13px;text-align:left;white-space:nowrap;overflow:hidden}
#vm-box-btn svg{margin-left:auto;flex:none}#vm-box-btn em,.vmb-it em{font-style:normal;font-size:11px;font-weight:800;background:var(--red);color:#fff;border-radius:9px;padding:0 6px;min-width:18px;text-align:center}
:root[data-skin="light"] #vm-box-btn,:root[data-skin="whatsapp"] #vm-box-btn{border-color:rgba(15,23,42,.15);background:rgba(15,23,42,.04)}
#vmbox-pop{position:fixed;z-index:70;max-height:min(420px,70vh);display:flex;flex-direction:column;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
#vmbox-q{margin:8px;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:13px;outline:none}#vmbox-q:focus{border-color:var(--accent)}
#vmbox-list{overflow:auto;padding:0 4px 6px}
.vmb-it{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13.5px}.vmb-it:hover{background:rgba(127,127,127,.12)}.vmb-it.on{background:var(--accent);color:#fff}
.vmb-it span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vmb-it i{font-style:normal;opacity:.65}
.vmb-w{width:10px;height:10px;border-radius:50%;border:2px solid rgba(127,127,127,.4);border-top-color:transparent;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}.vmb-none{padding:14px;color:var(--muted);font-size:13px}

.xl-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding:10px 12px;border-radius:10px;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.45);font-size:13px}.xl-note span{flex:1;min-width:180px}

/* plain inputs placed straight in a window (Forward voicemail / Transfer search) follow the theme instead of the browser's white box */
.modal-card > input:not([type=checkbox]):not([type=radio]):not([type=file]){display:block;width:100%;box-sizing:border-box;padding:9px 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:14px;outline:none}.modal-card > input:focus{border-color:var(--accent)}.modal-card > input::placeholder{color:var(--muted)}

/* meeting whiteboard: the board fills the stage, video tiles move to a strip on the right */
.vid-main.wbon{gap:8px}.vid-main.wbon #vid-wb{flex:1;min-width:0;min-height:0;padding:8px 0 8px 8px}.vid-main.wbon #vid-grid{flex:none;width:220px;grid-template-columns:1fr!important;grid-auto-rows:130px}@media (max-width:900px){.vid-main.wbon #vid-grid{display:none}}

.tr-noask{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:12.5px;color:var(--muted)}

/* picture lightbox */
#lb{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.88);display:flex;flex-direction:column}
.lb-top{display:flex;align-items:center;gap:8px;padding:10px 14px;color:#e5e7eb;font-size:13px}.lb-top .grow{flex:1}
.lb-b{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;font-weight:600;font-size:13px;text-decoration:none;border:0;cursor:pointer}.lb-b:hover{background:rgba(255,255,255,.22)}.lb-x{font-size:16px}
.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:auto;padding:0 60px 20px}
#lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.6);cursor:zoom-in;background:#fff}
#lb-img.zoom{max-width:none;max-height:none;cursor:zoom-out}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;border:0;cursor:pointer;z-index:2}.lb-nav:hover{background:rgba(255,255,255,.28)}.lb-nav.l{left:8px}.lb-nav.r{right:8px}
.bub img.mms{cursor:zoom-in}

/* screenshot markup + screen recording bar */
.modal-card.shot-card{width:min(1100px,94vw);max-width:94vw;padding:16px 18px}
.shot-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}.shot-bar button{border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:8px;padding:6px 10px;font-weight:600;font-size:13px;cursor:pointer}.shot-bar button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.shot-bar .sw{width:24px;height:24px;padding:0;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 1px var(--line)}.shot-bar .sw.on{box-shadow:0 0 0 2px var(--accent)}.shot-bar .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.shot-stage{position:relative;max-height:62vh;overflow:auto;border-radius:8px;background:#0003;text-align:center}.shot-stage canvas{max-width:100%;max-height:62vh;cursor:crosshair;touch-action:none;vertical-align:top}
.shot-txt{position:absolute;z-index:2;font:700 16px Segoe UI,sans-serif;padding:4px 6px;border:2px solid var(--accent);border-radius:6px;background:#fff;min-width:160px;outline:none}
#rec-bar{position:fixed;left:50%;top:48px;transform:translateX(-50%);z-index:85;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:24px;background:#111827;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.4);font-size:13px}
#rec-bar i{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:recp 1s infinite}@keyframes recp{50%{opacity:.3}}#rec-bar span{color:#9ca3af}
#rec-bar button{border:0;border-radius:16px;padding:6px 12px;background:#ef4444;color:#fff;font-weight:700;cursor:pointer}#rec-bar button.x{background:rgba(255,255,255,.14);padding:6px 10px}

/* floating park buttons */
#park-dock{position:fixed;right:18px;bottom:110px;z-index:40;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);width:118px;user-select:none}
#park-dock.fold{width:auto;padding:6px}
.pd-h{display:flex;align-items:center;gap:8px;cursor:grab;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.pd-p{position:relative;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;font-size:14px;border:0;cursor:pointer}.pd-p.busy{background:var(--red)}
.pd-p em{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;border-radius:8px;background:#fff;color:var(--red);font-style:normal;font-size:10px;line-height:16px;box-shadow:0 0 0 1px var(--red)}
.pd-s{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 9px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer;text-align:left}
.pd-s b{font-size:13px;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pd-s span{font-size:11px;color:var(--muted)}
.pd-s:hover{border-color:var(--accent)}.pd-s.busy{background:rgba(224,30,90,.16);border-color:var(--red)}.pd-s.busy span{color:var(--red);font-weight:700;font-variant-numeric:tabular-nums}
#park-dock.oncall .pd-s:not(.busy){border-style:dashed;border-color:var(--green)}#park-dock.oncall .pd-s:not(.busy) span{color:var(--green);font-weight:700}

/* the lightbox starts below the title bar, so the Windows window buttons never cover its Close button */
#lb{top:40px}.lb-x{width:38px;height:34px;justify-content:center;background:rgba(255,255,255,.2)}

.bub .att-audio{display:block;width:min(320px,60vw);height:38px;margin:4px 0}.bub .att-video{display:block;max-width:min(420px,70vw);max-height:300px;border-radius:8px;margin:4px 0;background:#000}

.pd-h .pd-x{margin-left:auto;width:22px;height:22px;border-radius:6px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px}.pd-h .pd-x:hover{background:var(--line);color:var(--text)}

/* add call / conference */
.cc-add{background:rgba(43,172,118,.18)!important;color:#7ee2b3!important}
.cc-conf{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12.5px;font-weight:700;color:#7ee2b3}
.cc-leg2{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.07)}.cc-leg2 .t{flex:1;min-width:0;display:flex;flex-direction:column}.cc-leg2 .t b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cc-leg2 .t span{font-size:12px;color:#aab}
.cc-leg2 button{border:0;border-radius:8px;padding:6px 10px;font-weight:700;cursor:pointer;color:#fff}.cc-leg2 .merge{background:#2bac76}.cc-leg2 .end{background:#e01e5a;display:grid;place-items:center}

#park-dock{right:376px;bottom:20px}@media (max-width:900px){#park-dock{right:12px;bottom:auto;top:60px}}

/* video messages: thumbnail with a play button, plays in the lightbox */
.vthumb{position:relative;display:inline-block;margin:4px 0;border-radius:10px;overflow:hidden;cursor:pointer;background:#000;max-width:min(320px,60vw)}
.vthumb video{display:block;width:100%;max-height:200px;object-fit:cover;pointer-events:none}
.vthumb .vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:22px;display:grid;place-items:center;padding-left:4px;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.vthumb:hover .vplay{background:var(--accent)}.vthumb.aud{width:220px;height:64px}.vthumb.aud video{display:none}
#lb-vid{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.6);background:#000}

#members .mem small.mst{color:var(--muted)}#members .mem small.mst.on{color:var(--green)}#members .mem small.mst.busy{color:var(--red)}#members .mem small.mst.off{opacity:.7}

#park-dock{width:150px}.pd-s em{font-style:normal;font-size:11.5px;max-width:126px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pd-s .pd-who{font-weight:700;color:var(--text)}.pd-s .pd-num{color:var(--muted)}

/* bottom profile bar moved into the profile menu */
.userbar{display:none}.me-reg{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--amber)}
.me-audio .me-it.on{color:var(--red)}.me-audio .me-it.on svg{color:var(--red)}
#tb-me .me-mute{position:absolute;left:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;border:2px solid var(--rail)}#tb-me .me-mute svg{width:9px;height:9px}

.menu{z-index:70}

#tb-me .me-dot{background:var(--green)}#tb-me .me-dot.st-away{background:#9aa0a6}#tb-me .me-dot.st-break,#tb-me .me-dot.st-lunch{background:var(--amber)}#tb-me .me-dot.st-meeting,#tb-me .me-dot.st-dnd{background:var(--red)}#tb-me .me-dot.st-offline{background:#6b6b6b}

/* drag the call onto a park button or a person */
.cc-drag{cursor:grab!important;background:rgba(124,92,255,.16)!important;color:#c9bcff!important;border:1px dashed rgba(160,140,255,.55)!important}
.cc-drag:active{cursor:grabbing!important}
.cc-drag .grip{font-size:16px;line-height:1;margin-right:2px}
body.dx-dragging [data-act="pd-slot"],body.dx-dragging [data-act="peer"]{outline:1px dashed rgba(160,140,255,.45);outline-offset:-1px}
.dx-over{outline:2px solid #8b6cff!important;outline-offset:-2px;background:rgba(124,92,255,.22)!important}

/* Hebrew: right-to-left layout. The title bar stays left-to-right so the window buttons keep their place */
html[dir="rtl"] #titlebar{direction:ltr}
html[dir="rtl"] #titlebar .tb-mid{direction:rtl}
html[dir="rtl"] input[type="tel"],html[dir="rtl"] #xfer-in,html[dir="rtl"] .ex,html[dir="rtl"] kbd{direction:ltr;unicode-bidi:isolate}

/* recent calls under the dialpad */
.dial-recent{max-width:520px;margin:4px auto 24px}
html[data-mini] .dial-recent{display:none}
html[dir="rtl"] .keys,html[dir="rtl"] .cc-pad,html[dir="rtl"] .dial .display{direction:ltr}
/* movable call box */
#callcard .cc-top{cursor:grab;user-select:none}
#callcard.cc-moving{animation:none;transition:none;cursor:grabbing;box-shadow:0 18px 50px rgba(0,0,0,.55)}
#callcard.cc-moving .cc-top{cursor:grabbing}
html[data-mini] #callcard .cc-top{cursor:default}
/* company dashboard: exactly three columns sharing the full width */
.dh-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* the window minus the menus (~340px) decides: 3 columns only when each gets ~360px+, then 2, then 1 */
@media (max-width:1440px){.dh-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.dh-grid3{grid-template-columns:minmax(0,1fr)}}
/* HubSpot badge */
.crm-logo.hs{background:#ff7a59}
/* HubSpot calling window (web phone opened by HubSpot): compact, no title bar */
html[data-hubspot] #titlebar{display:none}
html[data-hubspot] .mini-pin{display:none}
.hs-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin:0 0 12px;border-radius:12px;background:rgba(255,122,89,.12);border:1px solid rgba(255,122,89,.35)}
.hs-bar .t{display:flex;flex-direction:column;flex:1;min-width:120px}.hs-bar .t small{color:var(--muted);font-size:11.5px}
.hs-logo{width:26px;height:26px;border-radius:7px;background:#ff7a59;color:#fff;font-weight:800;display:grid;place-items:center;flex:none}
.hs-ask{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);width:100%}.hs-ask input{width:auto}
/* Settings tabs */
.set-tabs{display:flex;gap:4px;max-width:720px;margin:0 auto 6px;padding:0 4px;border-bottom:1px solid var(--line)}
.set-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 14px;font-weight:600;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.set-tabs button.on{color:var(--text);border-bottom-color:var(--accent)}
/* Reports boxes open the matching calls */
.rep-tile.rep-go{cursor:pointer;transition:transform .12s,box-shadow .12s}
.rep-tile.rep-go:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
/* sentiment pills inside call rows: the row's grey text colour must not reach them */
.dh-main .spill,.dh-main .cpill,.dh-row .spill,.mgt .spill,#feed .spill{color:#fff!important;opacity:1}
.dh-main .spill.neu,.dh-row .spill.neu,.mgt .spill.neu,#feed .spill.neu{color:#3a2e00!important}
/* park buttons stuck to the call box */
.pd-link{background:none;border:0;color:var(--muted);cursor:pointer;padding:2px;display:grid;place-items:center;border-radius:6px}.pd-link.on{color:var(--green)}.pd-link:hover{background:rgba(127,127,127,.15)}
/* the CRM line on the call box: its Open link in the app's colours, not browser blue */
.cc-crm a{color:var(--accent,#2bac76);font-weight:700;text-decoration:none}.cc-crm a:hover{text-decoration:underline}
/* web mini pop-up: no 'keep on top' pin (a browser window cannot do that) */
html[data-web][data-mini] .mini-pin{display:none}

/* Admin edit forms: label above a themed field */
.adm-f{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}.adm-f > span{font-weight:700;font-size:13px;color:var(--text)}
.adm-f input,.adm-f select{display:block;width:100%;box-sizing:border-box;height:36px;padding:0 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:14px;outline:none}
.adm-f input:focus,.adm-f select:focus{border-color:var(--accent)}.adm-f input::placeholder{color:var(--muted)}.adm-f select option{background:var(--bg);color:var(--text)}

/* Admin: the tabs stay at the top, the list scrolls under them (column titles stay too) */
.m-body.adm-body{display:flex;flex-direction:column;overflow:hidden}.adm-body > .adm-tabs{flex:none}.adm-scroll{flex:1;min-height:0;overflow:auto}
.adm-t th.adm-sh{cursor:pointer;user-select:none}.adm-t th.adm-sh:hover,.adm-t th.adm-sh.on{color:var(--text)}
/* Admin: auto attendant key table + desk phone stored settings */
.aa-keys td{padding:5px 6px;vertical-align:middle}.aa-keys select,.aa-keys input{width:100%;box-sizing:border-box;height:32px;padding:0 8px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:13px}.aa-keys select option{background:var(--bg);color:var(--text)}
.adm-pre{max-height:260px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;font:12px/1.5 Consolas,monospace;white-space:pre-wrap;word-break:break-all;color:var(--text)}
/* popups never taller than the window: they scroll inside. Admin edit windows: fields two per row, a bit wider */
.modal-card{max-height:calc(100vh - 32px);overflow-y:auto;box-sizing:border-box}
.adm-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.modal-card:has(.adm-grid),.modal-card:has(.aa-keys){width:640px}
@media (max-width:560px){.adm-grid{grid-template-columns:1fr}}
/* call waiting bar in the call box */
.cc-wait{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:10px;padding:10px;border-radius:10px;border:1px solid var(--accent);background:rgba(37,99,235,.12);animation:cwpulse 1.6s ease-in-out infinite}.cc-wait .t{display:flex;flex-direction:column;min-width:0;flex:1}.cc-wait .t span{font-size:12px;color:var(--muted)}
.cw-btns{display:flex;gap:6px;width:100%}.cw-btns button{flex:1;padding:7px 6px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-weight:600;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer}.cw-btns .green{background:#16a34a;border-color:#16a34a;color:#fff}.cw-btns .red{color:#ef4444}
@keyframes cwpulse{50%{box-shadow:0 0 0 3px rgba(37,99,235,.25)}}
.cw-btns{flex-wrap:wrap}.cw-btns button{min-width:calc(50% - 3px)}
/* channel Lists + Files */
.pl-tabs{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--line);flex:none}.pl-tabs button{padding:10px 14px;font-weight:600;font-size:13.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;border-radius:0;box-shadow:none}
.pl-tabs button.on{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}.pl-tabs button em{font-style:normal;font-size:11px;background:rgba(127,127,127,.18);border-radius:999px;padding:1px 7px}
.pl-body{padding:18px 22px}.pl-new{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}.pl-new b{margin-right:6px}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.pl-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--card);cursor:pointer}.pl-card:hover{border-color:var(--accent)}
.pl-cn{display:flex;align-items:center;gap:8px;font-size:15px}.pl-cd{color:var(--muted);font-size:12.5px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-bar{height:6px;border-radius:3px;background:rgba(127,127,127,.2);margin:12px 0 8px;overflow:hidden}.pl-bar i{display:block;height:100%;background:#16a34a}.pl-cm{font-size:12px;color:var(--muted)}
.pl-lh{display:flex;align-items:center;gap:12px;margin-bottom:8px}.pl-lh h2{margin:0;font-size:22px;cursor:pointer}.pl-lh .grow{flex:1}
.pl-desc{color:var(--muted);font-size:13.5px;margin:0 0 14px;cursor:pointer}
.pl-tools{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}.pl-tools button{padding:6px 12px;border-radius:8px;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted)}.pl-tools button.on{color:var(--text);border-color:var(--accent);background:rgba(37,99,235,.1)}
.pl-tools input{margin-left:auto;width:220px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 10px}
.pl-table{width:100%;border-collapse:collapse;font-size:13.5px}.pl-table th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:8px;border-bottom:1px solid var(--line)}
.pl-table td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}.pl-table tr.done .pl-t span{text-decoration:line-through;color:var(--muted)}
.pl-t{cursor:pointer;width:40%}.pl-t span{font-weight:600}.pl-t small{margin-left:8px;color:var(--muted);font-size:11.5px;display:inline-flex;align-items:center;gap:3px}.pl-t:hover span{color:var(--accent)}
.pl-chk{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#fff;padding:0}.pl-chk.on{background:#16a34a;border-color:#16a34a}
.pl-in{height:30px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--text);font:inherit;font-size:13px;padding:0 6px;max-width:170px}.pl-in:hover,.pl-in:focus{border-color:var(--line);background:var(--bg)}.pl-in option{background:var(--bg);color:var(--text)}.pl-in.late{color:#ef4444;font-weight:600}
.pl-add{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--muted)}.pl-add input{flex:1;height:36px;border-radius:8px;border:1px dashed var(--line);background:transparent;color:var(--text);padding:0 10px}
.pl-sec{display:flex;align-items:center;justify-content:space-between;margin:14px 0 6px}.pl-ta{width:100%;box-sizing:border-box;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;padding:8px 10px;resize:vertical}
.pl-comments{max-height:200px;overflow:auto}.pl-cmt{display:flex;gap:10px;padding:6px 0}.pl-cmt .ts{color:var(--muted);font-size:11.5px}
/* CRM caller profile in the call box */
.cc-crp{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(127,127,127,.06)}
.crp-h{display:flex;align-items:center;gap:10px}.crp-n{display:flex;flex-direction:column;min-width:0;flex:1}.crp-n b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crp-n span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crp-open{font-size:12px;font-weight:700;white-space:nowrap}.crp-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}.crp-chips i{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(127,127,127,.16)}.crp-chips i.st{background:rgba(255,122,89,.18);color:#ff7a59}
.crp-r{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:4px 0;border-top:1px dashed rgba(127,127,127,.18)}.crp-r span{color:var(--muted);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.crp-r b{font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* profile picture in the profile menu */
.me-pic{position:relative;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;flex:none}.me-pic i{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;box-shadow:0 0 0 2px var(--card)}
.me-pic:hover i{opacity:1}.me-pic:hover .av{filter:brightness(.85)}.me-picl{display:block;font-size:11.5px;margin:2px 0}.me-picl a{font-weight:600}
/* calendar: drag events to another day */
.cal-d i[draggable="true"],.cal-e[draggable="true"]{cursor:grab}.cal-d i[draggable="true"]:active{cursor:grabbing}
body.cal-dragging .cal-d{transition:box-shadow .1s}.cal-d.drop{box-shadow:inset 0 0 0 2px var(--accent);background:rgba(37,99,235,.10)}
/* recents: each call on two lines - details left, recording / sentiment / notes / player right */
.rc2{display:flex;align-items:center;gap:14px;min-width:0;flex:1}.rc2-l{min-width:0;flex:1}.rc2-l .what{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc2-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:60%}.rc2-r:empty{display:none}
.rc2-r .hrec{display:flex;align-items:center;gap:8px;margin:0}.rc2-r .notechip{margin:0}.rc2-r .dh-audio{height:32px;width:260px;margin:0}
@media (max-width:760px){.rc2{flex-wrap:wrap}.rc2-r{max-width:100%;justify-content:flex-start}}
/* Admin tabs: one line each, full width; scroll sideways on a narrow window */
.adm-tabs{max-width:none;flex-wrap:nowrap;overflow-x:auto;justify-content:safe center;scrollbar-width:thin}.adm-tabs button{white-space:nowrap;flex:none}

.tf-week input[type=checkbox]{width:18px;height:18px}
.crm-logo.sf{background:#00a1e0}.crm-logo.ns{background:#1f3a5f}.crm-card.soon{opacity:.8}
.adm-tabs{overflow-y:hidden}.adm-tabs::-webkit-scrollbar{height:4px}
/* CRM: real logos, grouped and collapsible */
.crm-logo.img{background:#fff;padding:4px;box-sizing:border-box}.crm-logo.img img{width:100%;height:100%;object-fit:contain;display:block}.crm-logo.sm.img{padding:2px}
.crm-fold{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--muted);flex:none;transform:rotate(-90deg);transition:transform .15s}.crm-fold.open{transform:none}.crm-fold:hover{background:rgba(127,127,127,.15)}
.crm-group{border:1px solid var(--line);border-radius:12px;margin-top:10px;padding:0 12px}.crm-group>summary{display:flex;align-items:center;gap:10px;padding:12px 2px;cursor:pointer;list-style:none}.crm-group>summary::-webkit-details-marker{display:none}
.crm-group>summary::before{content:'›';font-size:18px;color:var(--muted);transition:transform .15s;width:12px}.crm-group[open]>summary::before{transform:rotate(90deg)}.crm-group>summary .muted{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-logos{display:inline-flex}.crm-logos .crm-logo{margin-right:-4px;box-shadow:0 0 0 2px var(--card)}.crm-group .crm-card{margin-bottom:8px}
.adm-tabs .adm-live{font-style:normal;font-size:11px;background:#e01e5a;color:#fff;border-radius:999px;padding:1px 7px;margin-left:4px}
/* Contacts (light CRM) */
.cx-split{display:flex;flex:1;min-height:0;overflow:hidden}.cx-list{flex:1;min-width:0;overflow:auto;padding:12px 18px}.cx-detail{width:440px;max-width:48%;flex:none;border-left:1px solid var(--line);overflow:auto;padding:14px 16px}
.cx-tools{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}.cx-tools input{flex:1;min-width:200px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 10px}.cx-tools .pl-in{height:34px;border-color:var(--line);max-width:none}
.cx-table tr{cursor:pointer}.cx-table tr:hover td,.cx-table tr.on td{background:rgba(37,99,235,.08)}.cx-nm{display:flex;align-items:center;gap:10px}.cx-nm small{display:block;color:var(--muted);font-size:11.5px}.cx-em{color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-type{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(37,99,235,.15);color:#60a5fa;margin-right:4px;white-space:nowrap}.cx-type.t-lead{background:rgba(236,178,46,.18);color:#eab308}.cx-type.t-partner{background:rgba(168,85,247,.18);color:#c084fc}.cx-type.t-vendor{background:rgba(20,184,166,.18);color:#2dd4bf}.cx-type.t-other{background:rgba(127,127,127,.18);color:var(--muted)}
.cx-vis,.cx-tag{font-style:normal;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(127,127,127,.15);color:var(--muted);margin-right:4px;display:inline-flex;align-items:center;gap:3px}
.cx-qa{white-space:nowrap}.cx-qa button{width:28px;height:26px;border-radius:7px;display:inline-grid;place-items:center;color:var(--muted)}.cx-qa button:hover{background:rgba(127,127,127,.15);color:var(--text)}
.cx-badge{font-style:normal;font-size:11px;background:rgba(127,127,127,.25);border-radius:999px;padding:1px 7px;margin-left:4px}.cx-badge.due{background:#e01e5a;color:#fff}
.cx-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--card)}.cx-ch{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}.cx-ch h2{margin:0;font-size:18px}
.cx-f{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px dashed rgba(127,127,127,.18);font-size:13px}.cx-f>span:first-child{width:70px;color:var(--muted);font-size:12px;flex:none}.cx-f b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.cx-notes{margin-top:8px;font-size:13px;white-space:pre-wrap;background:rgba(127,127,127,.06);border-radius:8px;padding:8px 10px}.cx-own{font-size:11.5px;margin-top:8px}
.cx-add{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:10px}.cx-add textarea{width:100%;box-sizing:border-box;border:0;background:transparent;color:var(--text);font:inherit;resize:vertical;outline:none}.cx-addrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.cx-addrow .pl-in{border-color:var(--line);max-width:none}
.cx-h3{margin:16px 0 6px;font-size:14px}.cx-act{display:flex;gap:10px;padding:8px 0;border-top:1px solid rgba(127,127,127,.14);font-size:13px}.cx-act .ts{font-size:11.5px;color:var(--muted);margin-top:2px}.cx-act.done b{text-decoration:line-through;color:var(--muted)}.cx-act b.late{color:#ef4444}
.cx-ai{width:26px;height:26px;border-radius:50%;background:rgba(127,127,127,.15);display:grid;place-items:center;flex:none;color:var(--muted)}.cx-ai.miss{color:#ef4444}.cx-disp{font-style:normal;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:rgba(43,172,118,.18);color:#4ade80}.cx-txt{white-space:pre-wrap;margin-top:2px}
tr.late td{color:#ef4444}.ce-row{display:flex;gap:6px;margin-bottom:6px}.ce-row input{flex:1;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 10px}.ce-row select{height:34px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 8px}
.cc-cx{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px}.cc-cx .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cc-cx a{font-weight:700;font-size:12.5px;white-space:nowrap}
.cc-cx.on{display:block}.cc-cxh{display:flex;align-items:center;gap:8px}.cc-cxn{display:flex;gap:6px;margin-top:8px}.cc-cxn input{flex:1;min-width:0;height:30px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 8px}.cc-cxn select{height:30px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--text);max-width:120px}
.crm-req{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border:1px dashed var(--line);border-radius:12px}.crm-req>div{flex:1;min-width:0}.crm-req small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
@media (max-width:900px){.cx-detail{position:absolute;inset:0;max-width:none;width:auto;background:var(--bg);z-index:5}.cx-split{position:relative}}
/* contact form: number / email boxes take the room, the label dropdown stays narrow */
.adm-f .ce-row{display:flex;gap:6px;margin-bottom:6px;width:100%}.adm-f .ce-row input{flex:1;width:auto;min-width:0}.adm-f .ce-row select{width:130px;flex:none}.adm-f .ce-row .pill-btn{flex:none;width:auto;height:36px}
.adm-f a[data-act=cx-addph],.adm-f a[data-act=cx-addem]{color:var(--accent);text-decoration:none;font-weight:600;align-self:flex-start}

/* top bar: phone line status chip */
#tb-reg{-webkit-app-region:no-drag;flex:none;height:26px;border-radius:7px;display:flex;align-items:center;gap:7px;padding:0 11px;font-size:12.5px;font-weight:600;white-space:nowrap;border:0;cursor:pointer;margin-right:6px}
#tb-reg i{width:8px;height:8px;border-radius:50%;flex:none}#tb-reg b{font-weight:800}
#tb-reg.down{background:rgba(224,30,90,.22);color:#ffd1dc}#tb-reg.down i{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.3);animation:regpulse 1.4s ease-in-out infinite}#tb-reg.down:hover{background:rgba(224,30,90,.35)}
#tb-reg.warn{background:rgba(236,178,46,.2);color:#fde68a}#tb-reg.warn i{background:#eab308}#tb-reg.busy{background:rgba(127,127,127,.2);color:#e5e7eb;cursor:default}#tb-reg.busy i{background:#eab308}
:root[data-skin="light"] #tb-reg.down{color:#9f1239}:root[data-skin="light"] #tb-reg.warn{color:#854d0e}:root[data-skin="light"] #tb-reg.busy{color:#334155}
@keyframes regpulse{50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}
html[data-mini] #tb-reg span{display:none}html[data-mini] #tb-reg{padding:0 8px}
#upd-banner .upd-x{background:transparent!important;border:0;color:inherit;opacity:.8;font-size:14px;padding:0 4px;margin-left:2px;cursor:pointer}#upd-banner .upd-x:hover{opacity:1}
/* report: attachments */
.rp-att{display:flex;align-items:center;gap:10px;margin:10px 0 4px;flex-wrap:wrap}.rp-att small{font-size:12px}
#rp-files{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.rp-file{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:1px solid var(--line);border-radius:8px;padding:4px 6px 4px 4px;font-size:12.5px;background:rgba(127,127,127,.08)}
.rp-file img{width:34px;height:26px;object-fit:cover;border-radius:4px}.rp-file span{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rp-file small{color:var(--muted)}.rp-file button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 2px}.rp-file button:hover{color:#ef4444}
/* call box links readable on the dark card */
.cc-crp a,.cc-cx a,.cc-crm a{color:#60a5fa;text-decoration:none}.cc-crp a:hover,.cc-cx a:hover,.cc-crm a:hover{text-decoration:underline}
.cc-sw{border:1px solid rgba(96,165,250,.35)!important}

.cb-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.cb-quick .pill-btn{padding:4px 10px;font-size:12px}

.rf-grid{display:grid;grid-template-columns:140px 1fr;gap:10px 16px;align-items:center;margin:10px 0}.rf-grid>label{text-align:right;font-weight:600}.rf-grid input,.rf-grid select{width:100%}
.rf-sep{border-top:1px solid var(--line,rgba(127,127,127,.25));padding-top:14px}
.rep-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 20px 8px}.rep-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(47,111,235,.12);border:1px solid rgba(47,111,235,.35);border-radius:999px;padding:2px 4px 2px 10px;font-size:12px}
.rep-chip button{border:0;background:none;color:inherit;font-size:15px;line-height:1;cursor:pointer;padding:0 4px;opacity:.7}.rep-chip button:hover{opacity:1}
@media (max-width:560px){.rf-grid{grid-template-columns:1fr}.rf-grid>label{text-align:left}}
.rf-grid input,.rf-grid select{font:inherit;font-size:14px;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px}.rf-grid input::placeholder{color:var(--muted);opacity:1}[data-theme=dark] .rf-grid input[type=date]{color-scheme:dark}.rf-grid input:focus,.rf-grid select:focus{outline:none;border-color:#2f6feb}
.rf-grid select{height:auto;min-height:38px;line-height:1.3;padding:8px 10px}.rf-clear,.rep-chips a{color:#60a5fa;text-decoration:none;font-weight:600}.rf-clear:hover,.rep-chips a:hover{text-decoration:underline}[data-theme=light] .rf-clear,[data-theme=light] .rep-chips a{color:#2563eb}

#tb-ask{-webkit-app-region:no-drag;flex:none;height:26px;border-radius:7px;background:linear-gradient(135deg,rgba(124,58,237,.55),rgba(37,99,235,.55));color:#fff;display:flex;align-items:center;gap:6px;padding:0 11px;font-size:12.5px;font-weight:700;white-space:nowrap;border:0;cursor:pointer}#tb-ask:hover{filter:brightness(1.15)}
@media (max-width:900px){#tb-ask span:nth-child(2){display:none}}
#hb{position:fixed;right:14px;top:52px;bottom:14px;width:380px;max-width:calc(100vw - 28px);z-index:9000;display:flex;flex-direction:column;background:var(--bg,#1f2228);color:var(--text,#e8eaed);border:1px solid var(--line,rgba(127,127,127,.3));border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden;animation:hbIn .18s ease-out}
@keyframes hbIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.hb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line,rgba(127,127,127,.3));background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(37,99,235,.12))}
.hb-head b{display:block;font-size:15px}.hb-head small{display:block;font-size:11.5px;color:var(--muted,#9ca3af);margin-top:2px}
.hb-x{border:0;background:none;color:inherit;font-size:22px;line-height:1;cursor:pointer;opacity:.7;padding:0 4px}.hb-x:hover{opacity:1}
.hb-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.hb-m{max-width:92%;width:auto;min-width:0;flex:none;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;word-break:break-word}
.hb-m.hb-me{align-self:flex-end;background:#2563eb;color:#fff;border-bottom-right-radius:4px}
.hb-m.hb-bot{align-self:flex-start;background:var(--bg2,rgba(127,127,127,.12));border-bottom-left-radius:4px}
.hb-m ul{margin:6px 0 0;padding-left:18px}.hb-m li{margin:2px 0}
.hb-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.hb-btns .pill-btn{padding:5px 12px;font-size:12.5px}
.hb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.hb-chips button{border:1px solid rgba(96,165,250,.45);background:rgba(37,99,235,.1);color:inherit;border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer}.hb-chips button:hover{background:rgba(37,99,235,.25)}
.hb-in{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line,rgba(127,127,127,.3))}
.hb-in input{flex:1;font:inherit;font-size:14px;background:var(--bg2,rgba(127,127,127,.12));color:var(--text,inherit);border:1px solid var(--line,rgba(127,127,127,.3));border-radius:9px;padding:8px 10px}.hb-in input:focus{outline:none;border-color:#2563eb}
.nb-card[data-nb-id]{cursor:grab;user-select:none}body.nb-moving,body.nb-moving *{cursor:grabbing!important;user-select:none!important}.nb-card.nb-dragging{opacity:.45}.nb-card.nb-over-l{box-shadow:-4px 0 0 #2563eb}.nb-card.nb-over-r{box-shadow:4px 0 0 #2563eb}
.hb-audio{display:block;width:100%;margin-top:8px;height:36px}
.hb-tools{display:flex;align-items:center;gap:2px}.hb-spk{border:0;background:none;font-size:16px;cursor:pointer;opacity:.85;padding:2px 6px;border-radius:6px}.hb-spk:hover{background:rgba(127,127,127,.18)}
.hb-mic{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line,rgba(127,127,127,.3));background:var(--bg2,rgba(127,127,127,.12));font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center}.hb-mic:hover{border-color:#2563eb}
.hb-mic.on{background:#dc2626;border-color:#dc2626;animation:hbPulse 1.2s ease-in-out infinite}@keyframes hbPulse{50%{box-shadow:0 0 0 7px rgba(220,38,38,.25)}}

.modal-card.bb-modal{width:min(1080px,95vw);max-width:95vw}
.bb-wrap{display:grid;grid-template-columns:minmax(260px,1fr) 1.25fr;gap:18px;align-items:start}
.bb-phone{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;position:sticky;top:0}
.bb-model{font-weight:700;font-size:13px;margin-bottom:10px;color:var(--muted)}
.bb-body{display:flex;gap:8px;align-items:stretch;justify-content:center;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px}
.bb-col{display:flex;flex-direction:column;gap:7px;justify-content:center}
.bb-key{width:30px;height:16px;border-radius:5px;border:1px solid var(--line);background:var(--bg2);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bb-key i{width:12px;height:5px;border-radius:3px;background:rgba(127,127,127,.35)}
.bb-key.on i{background:#4f7df0}.bb-key.on{border-color:#4f7df0}.bb-key.sel{outline:2px solid #22c55e;outline-offset:1px}
.bb-screen{flex:1;min-height:130px;max-width:190px;border-radius:8px;background:linear-gradient(160deg,#1e293b,#0f172a);border:2px solid #334155;display:flex;align-items:center;justify-content:center;padding:8px;color:#cbd5e1;font-size:12px;text-align:center}
.bb-pad{display:grid;grid-template-columns:repeat(3,22px);gap:6px;justify-content:center;margin:12px 0 8px}.bb-pad i{height:16px;border-radius:50%;border:1px solid var(--line);background:var(--bg)}
.bb-phone p{font-size:12px;margin:6px 0 0;text-align:center}
.bb-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}.bb-top select{width:auto}.bb-top a{margin-left:auto;font-size:12.5px}
.bb-list{display:flex;flex-direction:column;gap:7px}
.bb-card{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:8px 10px;background:var(--bg2)}
.bb-card.sel{border-color:#22c55e;box-shadow:0 0 0 1px #22c55e inset}.bb-card.bb-over{box-shadow:0 -3px 0 #2563eb}.bb-card.bb-dragging{opacity:.45}
.bb-num{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:rgba(127,127,127,.3);color:#fff}
.bb-card.on .bb-num{background:#6366f1}
.bb-txt{flex:1;min-width:0;cursor:pointer;line-height:1.25}.bb-txt small{display:block;font-size:11px;color:var(--muted);font-weight:700}.bb-txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bb-txt em{display:block;font-size:11.5px;color:var(--muted);font-style:normal}.bb-txt i{color:var(--muted)}
.bb-grip{flex:none;cursor:grab;color:var(--muted);font-size:16px;letter-spacing:-3px;padding:4px;user-select:none}
body.bb-moving,body.bb-moving *{cursor:grabbing!important;user-select:none!important}
.bb-edit{border:1px solid #22c55e;border-top:0;margin-top:-9px;border-radius:0 0 11px 11px;padding:12px 12px 10px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;background:var(--bg)}
.bb-edit label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}.bb-edit select,.bb-edit input{width:100%;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 8px;font:inherit;font-size:13.5px}
.bb-ebtns{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.bb-foot{align-items:center}.bb-dirty{margin-right:auto;color:#f59e0b;font-size:13px;font-weight:600}
@media (max-width:760px){.bb-wrap{grid-template-columns:1fr}.bb-phone{position:static}.bb-edit{grid-template-columns:1fr}}

.modal-card.au-modal{width:min(980px,95vw);max-width:95vw}
.au-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:4px 0 14px;overflow-x:auto}
.au-tabs button{border:0;background:none;color:var(--muted);padding:9px 14px;font-weight:700;font-size:14px;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer}
.au-tabs button.on{color:var(--text);border-bottom-color:#22c55e}.au-tabs button:hover{color:var(--text)}
.au-body{min-height:260px}.au-h{margin:18px 0 8px;font-size:15px}.au-body .au-h:first-child{margin-top:0}
.au-wide{grid-column:1/-1}.adm-f small.muted{font-size:11.5px}
.au-badge{background:rgba(127,127,127,.25);border-radius:6px;padding:2px 8px;font-size:12.5px}
.au-act{display:flex;align-items:center;gap:12px;margin:12px 0;flex-wrap:wrap}.au-act .muted{font-size:13px}
.au-rules{display:flex;flex-direction:column;gap:8px}
.au-rule{border:1px solid var(--line);border-radius:11px;background:var(--bg2);overflow:hidden}.au-rule.open{border-color:#22c55e}.au-rule.off .au-rh b{opacity:.55}
.au-rh{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;flex-wrap:wrap}.au-rh .muted{flex:1;font-size:13px;min-width:180px}.au-chev{color:var(--muted)}
.au-live{background:#16a34a;color:#fff;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700}
.au-re{padding:4px 14px 12px;border-top:1px solid var(--line);background:var(--bg)}
.au-fw{display:grid;grid-template-columns:260px 1fr;gap:4px 12px;align-items:center;margin:6px 0}.au-fw small{grid-column:2}
.au-fw input,.au-add input,.au-add select{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13.5px;width:100%}
.au-ebtns{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.au-add{display:flex;align-items:center;gap:8px;margin:12px 0}.au-add select{max-width:260px}
.au-tw{overflow-x:auto}.au-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#dc2626}.au-dot.on{background:#16a34a}
@media (max-width:700px){.au-fw{grid-template-columns:1fr}.au-fw small{grid-column:1}}

.bb-draw{position:relative;width:100%;overflow:hidden;border-radius:10px;background:#fff;margin-bottom:6px}
.bb-draw img{position:absolute;max-width:none;height:auto;pointer-events:none;user-select:none}
.bb-draw.noimg{background:var(--bg)}.bb-draw.noimg img{display:none}
.bb-dot{position:absolute;transform:translate(-50%,-50%);min-width:20px;height:20px;padding:0 4px;border-radius:999px;border:2px solid #fff;background:#9ca3af;color:#fff;font:800 10.5px/16px system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);z-index:1}
.bb-dot.on{background:#6366f1}.bb-dot.sel{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.35);z-index:2}.bb-dot:hover{transform:translate(-50%,-50%) scale(1.15)}
.bb-wrap{grid-template-columns:minmax(300px,1.2fr) 1fr}

.reactpop{display:flex;gap:2px;padding:6px 8px!important;border-radius:999px!important;align-items:center}
.reactpop .em{font-size:24px;line-height:1;padding:4px;cursor:pointer;border-radius:50%;transition:transform .12s}.reactpop .em:hover{transform:scale(1.25);background:rgba(127,127,127,.15)}
.reactpop .em.more{font-size:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(127,127,127,.18);color:var(--text);margin-left:2px}
.reacts{display:flex;gap:4px;flex-wrap:wrap;margin:-4px 0 2px}.bubrow.out .reacts{justify-content:flex-end}
.rx{display:inline-flex;align-items:center;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:1px 7px;font-size:14px;line-height:20px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.rx b{font-size:11.5px;color:var(--muted)}.rx.mine{border-color:#2563eb}
.blk-tag{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:700;color:#ef4444;background:rgba(239,68,68,.12);border-radius:999px;padding:1px 8px}
.gd-st{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px}.gd-st i{width:9px;height:9px;border-radius:50%;background:#9ca3af}.gd-st.on i{background:#16a34a}.gd-st.on{color:#16a34a}.gd-st.off i{background:#dc2626}.gd-st.off{color:#ef4444}.gd-st.bad i{background:#f59e0b}.gd-st.bad{color:#f59e0b}

/* ---- Meeting home (Iotum-style): meeting room header, big Start / Schedule / Join, today's meetings, recordings ---- */
.mh-wrap{max-width:780px;margin:0 auto;padding:26px 16px 40px;display:flex;flex-direction:column;align-items:center}
.mh-av{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px;font-weight:700;letter-spacing:.5px}
.mh-title{margin:14px 0 4px;font-size:24px;font-weight:700;text-align:center}
.mh-link{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;margin-bottom:22px;max-width:100%}
.mh-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh-link button{border:0;background:none;color:var(--accent);cursor:pointer;padding:4px;border-radius:6px;display:flex}.mh-link button:hover{background:var(--bg2)}
.mh-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}
.mh-big{display:flex;align-items:center;gap:14px;justify-content:flex-start;height:82px;padding:0 22px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--accent);font-size:17px;font-weight:600;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:transform .08s,box-shadow .12s}
.mh-big:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-1px)}.mh-big.on{border-color:var(--accent)}
.mh-big svg{flex:none}.mh-big:disabled{opacity:.6;cursor:default}
.mh-startw{display:flex;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.mh-start{flex:1;border:0;border-radius:0;background:#4f5be8;color:#fff;box-shadow:none}.mh-start:hover{background:#4350d6;transform:none}
.mh-caret{width:52px;border:0;border-left:1px solid rgba(255,255,255,.25);background:#4f5be8;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.mh-caret:hover{background:#4350d6}
.mh-caret svg{transform:none}
.mh-joinrow{display:flex;gap:8px;width:100%;margin-top:14px}.mh-joinrow input{flex:1}
.mh-sec{width:100%;margin-top:26px}
.mh-sh{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}.mh-sh b{font-size:16px}.mh-sh small{color:var(--muted)}.mh-sh a{color:var(--accent);font-size:13px;text-decoration:none;font-weight:600}
.mh-list{border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.mh-empty{padding:18px;text-align:center;color:var(--muted);font-size:13.5px}
.mh-sub{padding:8px 14px 4px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;border-top:1px solid var(--line)}
.mh-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line)}.mh-list>.mh-row:first-child{border-top:0}
.mh-when{width:74px;flex:none;display:flex;flex-direction:column}.mh-when small,.mh-t small{color:var(--muted);font-size:12px}
.mh-t{flex:1;min-width:0;display:flex;flex-direction:column}.mh-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh-rec{color:#e01e5a;font-weight:700}
@media (max-width:700px){.mh-acts{grid-template-columns:1fr}.mh-big{height:64px}}
/* recording in a meeting */
.vid-recbadge{margin-left:10px;padding:3px 10px;border-radius:12px;background:#e01e5a;color:#fff;font-size:12px;font-weight:700;animation:recpulse 1.6s infinite}
@keyframes recpulse{50%{opacity:.55}}
.pill-btn.recon{background:#e01e5a;border-color:#e01e5a;color:#fff}.pill-btn.recon:hover{background:#c41a4f}
.recdot2{display:inline-block;width:10px;height:10px;border-radius:50%;background:#e01e5a;margin-right:6px;vertical-align:-1px}.pill-btn.recon .recdot2{background:#fff;border-radius:2px;animation:recpulse 1.6s infinite}

.rec-modal{width:min(920px,94vw)!important;max-width:none!important}
.rec-player{width:100%;max-height:62vh;background:#000;border-radius:8px;display:block}
.pill-btn.icon-only{padding:0 9px}


/* meeting live captions */
.vid-main{position:relative}
.vid-caps{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);max-width:min(860px,86%);z-index:5;background:rgba(0,0,0,.72);color:#fff;border-radius:10px;padding:8px 14px;font-size:17px;line-height:1.4;pointer-events:none;text-align:center}
.vid-caps div{margin:2px 0}.vid-caps b{color:#9cc3ff;font-weight:700;margin-right:4px}
.cc-mark{display:inline-block;border:2px solid currentColor;border-radius:4px;font-size:10px;line-height:1;padding:2px 3px;margin-right:6px;font-weight:800}


/* meeting host controls, polls, speaker view */
.vid-lockbadge{margin-left:8px;padding:3px 10px;border-radius:12px;background:#334155;color:#fff;font-size:12px;font-weight:700}
.vp-sec{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:10px 10px 4px}
.vp.wait{background:rgba(245,158,11,.12)}
.vp-b{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:6px;padding:2px 8px;font-size:12px;font-weight:600;cursor:pointer;margin-left:6px}
.vp-b.ok{background:#16a34a;border-color:#16a34a;color:#fff}.vp-b.no{color:#e01e5a}
#vid-pollbox{position:absolute;left:16px;top:16px;z-index:6;max-width:360px;width:calc(100% - 32px)}
.vid-poll{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.vid-poll .vp-h{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}.vid-poll .vp-h b{flex:1;font-size:14.5px}.vid-poll .vp-h button{border:0;background:none;color:var(--muted);cursor:pointer}
.vp-o{position:relative;display:flex;width:100%;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg2);color:var(--text);border-radius:8px;padding:8px 10px;margin:5px 0;cursor:pointer;overflow:hidden;text-align:left;font:inherit}
.vp-o:disabled{cursor:default}.vp-o.mine{border-color:var(--accent)}
.vp-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(37,99,235,.18);transition:width .3s}
.vp-t{position:relative;flex:1;font-weight:600}.vp-n{position:relative;font-size:12px;color:var(--muted)}
.vp-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}.vp-f small{color:var(--muted)}

/* camera off: the PrimeCall logo on a soft card instead of a black box */
.vid-tile .vid-logo{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#ffffff 0%,#eef2f8 60%,#dfe6f0 100%)}
.vid-tile .vid-logo img{width:46%;max-width:320px;min-width:90px;height:auto}
.vid-tile:not(.has):not(.screen) .vid-logo,.vid-tile.camoff .vid-logo{display:flex}
.vid-tile.camoff video{visibility:hidden}
.vid-tile:not(.has):not(.screen) .vid-av,.vid-tile.camoff .vid-av{display:none}
.vid-tile .vid-nm{z-index:2}


.mh-phone{color:var(--muted);font-size:13.5px;margin:-16px 0 20px;text-align:center}


/* ---------- call screen (fills the main area, like the product tour) ---------- */
#callcard.cv-full{position:absolute;inset:0;width:auto;max-height:none;border-radius:0;border:0;box-shadow:none;padding:0;background:var(--bg);color:var(--text);flex-direction:column;z-index:14;animation:none}
#callcard.cv-full.show{display:flex}
#callcard.cv-full .cv-head{height:50px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 20px}
#callcard.cv-full .cv-head h2{margin:0;flex:1;font-size:16px;font-weight:900;display:flex;align-items:center;gap:8px;min-width:0}
#callcard.cv-full .cv-head h2 small{font-size:12px;color:var(--muted);font-weight:400}
#callcard.cv-full .cv-hbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg2);color:var(--text);border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:700;cursor:pointer}
#callcard.cv-full .cv-hbtn:hover{filter:brightness(.96)}
#callcard.cv-full .cv-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:20px 24px;max-width:900px;width:100%;margin:0 auto;box-sizing:border-box}
#callcard.cv-full .cv-top{display:flex;align-items:center;gap:16px}
#callcard.cv-full .cv-top .av.xl{width:68px;height:68px;border-radius:50%;font-size:24px}
#callcard.cv-full .cv-n{font-size:22px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#callcard.cv-full .cv-s{color:var(--muted);font-size:13px;margin-top:2px}
#callcard.cv-full .cv-st{font-size:13px;margin-top:5px;font-weight:700;color:var(--green);display:flex;align-items:center;gap:8px}
#callcard.cv-full .cv-recp{background:var(--red);color:#fff;border-radius:6px;font-size:11px;font-weight:900;padding:2px 7px;display:inline-flex;align-items:center;gap:5px}
#callcard.cv-full .cv-recp i{width:7px;height:7px;border-radius:50%;background:#fff;animation:recpulse 1s infinite}
#callcard.cv-full .cc-crm,#callcard.cv-full .cc-cx{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);color:var(--text);margin:0}
#callcard.cv-full .cv-caps{flex:1;min-height:150px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;font-size:14px;color:var(--text);position:relative;overflow:hidden}
#callcard.cv-full .cv-caps .cch{font-size:11px;font-weight:900;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:auto;letter-spacing:.03em}
#callcard.cv-full .cv-caps .cl{display:flex;gap:10px;line-height:1.45}
#callcard.cv-full .cv-caps .cl b{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding-top:2px;width:60px;flex:none;color:var(--green);overflow:hidden;text-overflow:ellipsis}
#callcard.cv-full .cv-caps .cl.you b{color:var(--accent)}
#callcard.cv-full .cv-caps i{color:var(--muted)}
#callcard.cv-full .cv-caps .cc-capsoff{position:absolute;top:8px;right:10px}
#callcard.cv-full .cv-caps.off{justify-content:space-between;align-items:flex-start}
#callcard.cv-full .cv-spacer{flex:1}
#callcard.cv-full .cv-ctrls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
#callcard.cv-full .cvb{width:66px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--muted);background:none;border:0;cursor:pointer;padding:0}
#callcard.cv-full .cvb span.c{width:46px;height:46px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;color:var(--text);font-size:17px;transition:.15s}
#callcard.cv-full .cvb span.c svg{width:19px;height:19px}
#callcard.cv-full .cvb:hover span.c{filter:brightness(.94)}
#callcard.cv-full .cvb.on span.c{background:var(--accent);color:#fff;border-color:transparent}
#callcard.cv-full .cvb.ai span.c{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;border-color:transparent}
#callcard.cv-full .cv-hang{align-self:center;min-width:150px;height:46px;border-radius:23px;background:var(--red);color:#fff;border:0;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:900;font-size:15px;cursor:pointer;flex:none;padding:0 22px;box-shadow:0 8px 20px rgba(224,30,90,.3)}
#callcard.cv-full .cv-hang:hover{filter:brightness(1.07)}
#callcard.cv-full .cv-drag{align-self:center;border:1px dashed var(--line);background:none;color:var(--muted);border-radius:8px;padding:5px 12px;font-size:12px;cursor:grab}
#callcard.cv-full .cc-pad{max-width:260px;align-self:center;width:100%}
#callcard.cv-full .cc-pad button{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:50%;aspect-ratio:1/1;font-size:19px;font-weight:700}
#callcard.cv-full .cc-xfer{max-width:420px;align-self:center;width:100%}
#callcard.cv-full .cc-desk,#callcard.cv-full .cc-conf{color:var(--muted)}
#callcard.cv-full .cc-rec{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:10px}
/* incoming call: a card in the top-right corner */
#callcard.cv-inc{top:14px;right:14px;bottom:auto;left:auto;width:340px;border-radius:16px;background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.3)}
#callcard.cv-inc .cc-top .av{border-radius:50%}
#callcard.cv-inc .st{color:var(--muted)}
#huddle .hud-go{display:flex;align-items:center;gap:9px;flex:1;min-width:0;cursor:pointer}

#callcard.cv-full .cv-hang svg{width:20px;height:20px;flex:none}
#callcard.cv-full .cvb span.c svg,#callcard.cv-full .cv-hbtn svg{flex:none}
#callcard.cv-full .cc-live{max-height:150px;overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--text)}
#callcard.cv-full .cc-live b{color:var(--green);margin-right:6px}


/* ---------- Dialpad like the product tour: round keys, big number, chips, round green call button ---------- */
.dial{max-width:420px;padding:30px 20px 18px;display:flex;flex-direction:column;align-items:center}
.dial .display{font-size:30px;border-bottom:0;height:52px;border-radius:10px}
.dial .display::placeholder{font-size:18px;font-weight:400;color:var(--muted)}
.dial .who{color:var(--green);font-weight:700;margin:2px 0 10px}
.dial .keys{grid-template-columns:repeat(3,64px);gap:10px 14px;justify-content:center;margin:6px 0 18px}
.dial .key{width:64px;height:54px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);font-size:21px;font-weight:700;transition:transform .08s,background .1s}
.dial .key small{font-size:9px;letter-spacing:.12em;color:var(--muted);font-weight:700;margin-top:2px}
.dial .key:active{transform:scale(.92);background:var(--line)}
.dial .dial-actions{grid-template-columns:62px 62px 62px;justify-content:center;gap:18px;margin-top:4px}
.dial .callbtn{width:62px;height:62px;border-radius:50%;padding:0;font-size:0;gap:0;box-shadow:0 8px 20px rgba(43,172,118,.4)}
.dial .callbtn svg{width:26px;height:26px}
html[data-mini] .dial .key{height:48px;width:58px}
/* ---------- Voicemail like the product tour ---------- */
.vmdetail.vm2{max-width:820px;padding:22px 28px}
.vm-top{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.vm-top .av.xl{width:72px;height:72px;border-radius:50%;font-size:26px}
.vm-n{font-size:22px;font-weight:900}.vm-s{color:var(--muted);font-size:13px;margin-top:3px}
.vm-wave{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:var(--bg2);border-radius:14px;padding:12px 16px;margin-bottom:18px}
.vm-pbtn{width:46px;height:46px;flex:none;border-radius:50%;background:var(--accent);color:#fff;font-size:16px;display:grid;place-items:center;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.vm-pbtn:hover{filter:brightness(1.08)}
.vm-bars{flex:1;height:44px;display:flex;align-items:center;gap:3px;cursor:pointer;min-width:0}
.vm-bars i{flex:1;min-width:2px;border-radius:2px;background:var(--line);transition:background .15s}
.vm-bars i.p{background:var(--accent)}
.vm-time{font-size:12.5px;font-weight:700;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.vm-trh{display:flex;align-items:center;justify-content:space-between;color:var(--muted);margin:0 2px 6px}.vm-trh b{font-size:11.5px;letter-spacing:.06em}
.vm-tcard{border:1px solid var(--line);border-radius:14px;background:var(--card);margin:0 0 14px}
.vm-acts{margin-top:4px}

.dial{max-width:560px}
#callcard.cv-full .cc-live{flex:1;max-height:none;min-height:120px}


/* ---------- People cards like the product tour: round avatars, quick call / message ---------- */
#cgrid .card{border-radius:14px;background:var(--card)}
#cgrid .card .av{width:44px;height:44px;border-radius:50%;font-size:15px}
#cgrid .card > div:nth-child(2){flex:1}
#cgrid .card .pa{display:flex;gap:4px;flex:none}
#cgrid .card .pa button{width:30px;height:30px;border-radius:8px;background:var(--bg2);color:var(--muted);display:grid;place-items:center;border:0;cursor:pointer}
#cgrid .card .pa button:hover{color:var(--accent);filter:brightness(.97)}
#cgrid.list .card .pa button{width:26px;height:26px}
/* sidebar selection: the calmer blue of the tour (purple skin) */
:root[data-skin="slack"] #side .item.on{background:#1164a3}
/* ---------- meeting: dark stage, compact icon toolbar (labels as tooltips), red Leave ---------- */
.vid-body{background:#15171c}
.vid-body .vid-main{background:#15171c}
.vid-bar{background:#1b1e24;border-top:1px solid #2a2e36;gap:8px;padding:10px 14px}
.vid-bar > button,.vid-bar .vid-rwrap > button{width:48px;height:46px;border-radius:12px;padding:0;font-size:0;gap:0;background:#2a2e36;color:#e5e7eb;border:0;display:grid;place-items:center;position:relative}
.vid-bar > button svg,.vid-bar .vid-rwrap > button svg{width:20px;height:20px}
.vid-bar > button .cc-mark{font-size:10px;margin:0}
.vid-bar > button:hover{background:#353a44}
.vid-bar > button.on{background:#2563eb;color:#fff}
.vid-bar > button.off{background:#3b2a30;color:#ff8aa5}
.vid-bar > button .cnt{position:absolute;top:-4px;right:-4px;font-size:10px}
.vid-bar .vid-rwrap > button{font-size:18px}
.vid-bar > button.end{width:auto;padding:0 18px;font-size:14px;font-weight:800;background:#e01e5a;color:#fff;display:flex;gap:6px;align-items:center}
.vid-bar > button.end:hover{background:#c41a4f}

.vid-bar .ei{font-size:19px;line-height:1}


#cgrid .card .pa button{background:var(--bg2);border:1px solid var(--line)}


/* ---------- Call park like the product tour ---------- */
.parkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:18px 20px}
.parktile.pk2{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--card);min-height:0}
.parktile.pk2 .pk-num{width:48px;height:48px;flex:none;border-radius:50%;background:var(--bg2);color:var(--muted);display:grid;place-items:center;font-weight:900;font-size:15px}
.parktile.pk2.occ{border-color:var(--amber);box-shadow:0 0 0 3px rgba(236,178,46,.2)}
.parktile.pk2.occ .pk-num{background:var(--amber);color:#2a1a00}
.parktile.pk2 .pk-info{flex:1;min-width:0}.parktile.pk2 .pk-info b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.parktile.pk2 .pk-info small{color:var(--muted);font-size:12px}
.parktile.pk2 .pt-clear{display:block;font-size:11.5px;margin-top:2px}

.parktile.pk2{flex-direction:row;text-align:left;justify-content:flex-start}
.parktile.pk2 .pk-num{border:1px solid var(--line)}
.parktile.pk2 .pt-clear{color:var(--muted);text-decoration:underline}
.parktile.pk2 .pill-btn{flex:none;margin:0}


/* meeting tile: the person's picture when their camera is off */
.vid-tile .vid-pic{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#ffffff 0%,#eef2f8 60%,#dfe6f0 100%)}
.vid-tile .vid-pic i{width:38%;max-width:180px;min-width:64px;aspect-ratio:1;border-radius:50%;background:#ccc center/cover no-repeat;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.vid-tile.pic:not(.has):not(.screen) .vid-pic,.vid-tile.pic.camoff .vid-pic{display:flex}
.vid-tile.pic .vid-logo{display:none!important}

/* call screen: chat with the agent while monitoring */
#callcard.cv-full.cv-mon .cv-body{max-width:none;padding-right:380px}
#callcard.cv-full .cv-chat{position:absolute;top:66px;right:16px;bottom:16px;width:340px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--bg2);overflow:hidden}
#callcard .cv-chat .mc-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
#callcard .cv-chat .mc-h b{display:block;font-size:14px}
#callcard .cv-chat .mc-h span{display:block;font-size:11.5px;color:var(--muted)}
#callcard .cv-chat .mc-list{flex:1;min-height:0;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
#callcard .cv-chat .mc-empty{color:var(--muted);font-size:12.5px;text-align:center;margin:auto 8px}
#callcard .cv-chat .mc-m{display:flex;flex-direction:column;align-items:flex-start;max-width:85%}
#callcard .cv-chat .mc-m.mc-me{align-self:flex-end;align-items:flex-end}
#callcard .cv-chat .mc-m .mc-b{padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.35;white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--line)}
#callcard .cv-chat .mc-m.mc-me .mc-b{background:var(--accent);border-color:var(--accent);color:#fff}
#callcard .cv-chat .mc-m span{font-size:10.5px;color:var(--muted);margin-top:2px}
#callcard .cv-chat .mc-q{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0}
#callcard .cv-chat .mc-q button{border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:14px;padding:4px 9px;font-size:11.5px;cursor:pointer}
#callcard .cv-chat .mc-q button:hover{border-color:var(--accent)}
#callcard .cv-chat .mc-in{display:flex;gap:8px;align-items:flex-end;padding:10px 12px 12px}
#callcard .cv-chat .mc-in textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg);color:var(--text);font:inherit;font-size:13px}
#callcard .cv-chat .mc-in .pill-btn{height:38px;padding:0 12px}
@media (max-width:1050px){#callcard.cv-full.cv-mon .cv-body{padding-right:24px;padding-bottom:300px}#callcard.cv-full .cv-chat{top:auto;left:16px;width:auto;height:280px}}


/* call screen: drag the caller header to park or transfer */
#callcard.cv-full .cv-top.cv-grab{cursor:grab;border-radius:14px;padding:6px;margin:-6px}
#callcard.cv-full .cv-top.cv-grab:hover{background:var(--bg2)}
#callcard.cv-full .cv-top.cv-grab:active{cursor:grabbing}

/* sign-in: Sign in with Microsoft */
.login-card .l-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:12px 0 8px}
.login-card .l-or::before,.login-card .l-or::after{content:"";flex:1;height:1px;background:var(--line)}
.login-card .l-ms{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#1f2937;font-weight:700;font-size:14px;cursor:pointer}
.login-card .l-ms:hover{background:#f5f6f8}.login-card .l-ms:disabled{opacity:.6;cursor:default}
.login-card .l-link{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--muted);text-align:left}
.login-card .l-link a{color:var(--accent);cursor:pointer;font-weight:700}

/* dashboard widgets: Customize mode */
.dh-top{display:flex;flex-direction:column;gap:14px}
.dh-gridn{grid-template-columns:repeat(var(--dh-n),minmax(0,1fr))}
@media (max-width:1440px){.dh-gridn.dh-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.dh-gridn{grid-template-columns:minmax(0,1fr)}}
.dw-edit{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border:1px dashed var(--accent);border-radius:12px;background:var(--bg2)}
.dw-edit b{display:inline-flex;align-items:center;gap:6px}
.dash.editing [data-zone]{min-height:70px;border:2px dashed transparent;border-radius:14px;padding:4px;transition:border-color .12s,background .12s}
.dash.editing [data-zone].dw-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.dw{border:1px solid var(--line);border-radius:14px;background:var(--bg);overflow:hidden;cursor:grab}
.dw.dragging{opacity:.4}
.dw.dw-before{box-shadow:0 -4px 0 0 var(--accent)}
.dw-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg2);border-bottom:1px solid var(--line);font-size:12.5px}
.dw-bar b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-grip{color:var(--muted);font-size:16px;line-height:1}
.dw-x{border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;border-radius:6px;padding:0 6px}
.dw-x:hover{background:#fee2e2;color:#b91c1c}
.dw-body{pointer-events:none;max-height:260px;overflow:hidden}   /* while customizing, the cards are previews */
.dw-drop{display:none;color:var(--muted);font-size:12px;text-align:center;padding:14px;border:1px dashed var(--line);border-radius:10px}
.dash.editing [data-zone] .dw-drop{display:block}
.dash.editing [data-zone]:has(.dw) .dw-drop{display:none}
.dash.editing [data-zone].dw-over .dw-drop{display:block}

/* Contacts: email addresses are links */
a.cx-mail{color:var(--accent);text-decoration:none;cursor:pointer}
a.cx-mail:hover{text-decoration:underline}

/* Admin > Billing */
.bill-body{padding:16px 20px}
.bill-card{max-width:640px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.bill-card h3{margin:0 0 6px;font-size:17px}.bill-card p{margin:0 0 14px;color:var(--muted);line-height:1.5}
.bill-host{position:relative;height:calc(100vh - 190px);min-height:420px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.bill-frame{position:fixed;z-index:5;border:0;border-radius:12px;background:#fff;display:none}

/* Customize: columns fill the height so any spot counts, and the dragged widget shows where it will land */
.dash.editing .dh-gridn{align-items:stretch}
.dash.editing .dh-gridn > [data-zone]{min-height:240px}
.dw.dragging{opacity:.35;outline:2px dashed var(--accent);outline-offset:-2px}

/* Admin: big tile buttons with a category icon */
.adm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;padding:12px 0 14px;border:0}
.adm-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:84px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:var(--bg2);color:var(--text);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:center;transition:transform .08s,border-color .12s,box-shadow .12s}
.adm-tile:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.adm-tile .adm-ti{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.adm-tile.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg2));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.adm-tile.on .adm-ti{background:var(--accent);color:#fff}
.adm-tile .adm-tl{line-height:1.2}
.adm-tabs.adm-tiles{overflow:visible;flex-wrap:wrap;padding:12px 4px 14px}.adm-tabs.adm-tiles button{white-space:normal}

/* Admin > Billing: the account as the app's own screens */
.bill-body .bn{display:flex;gap:16px;align-items:flex-start}
.bn-nav{flex:none;width:200px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
.bn-n{display:flex;align-items:center;gap:10px;padding:9px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left}
.bn-n:hover{background:var(--bg2)}.bn-n span{flex:1}.bn-n svg{color:var(--muted)}
.bn-n em{font-style:normal;font-size:11px;font-weight:700;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:0 7px}
.bn-n.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}.bn-n.on svg{color:var(--accent)}.bn-n.on em{background:var(--accent);color:#fff;border-color:var(--accent)}
.bn-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.bn-h h2{margin:0;font-size:20px}.bn-h p{margin:2px 0 0;color:var(--muted)}
.bn-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.bn-kpi{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.bn-kpi:hover{border-color:var(--accent)}.bn-kpi span{color:var(--muted);font-size:12.5px;font-weight:600}.bn-kpi b{font-size:24px}.bn-kpi small{color:var(--muted);font-size:12px}
.bn-due{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:14px;border:1px solid #fcd34d;background:color-mix(in srgb,#f59e0b 12%,transparent)}
.bn-due b{display:block;font-size:16px}.bn-due span{color:var(--muted);font-size:12.5px}
.bn-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;overflow-x:auto}
.bn-card h3{margin:0 0 10px;font-size:15px}.bn-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.bn-ch h3{margin:0}
.bn-t{width:100%;border-collapse:collapse;font-size:13.5px}
.bn-t th{text-align:left;color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:6px 8px;border-bottom:1px solid var(--line)}
.bn-t td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}.bn-t tr:last-child td{border-bottom:0}
.bn-t .r{text-align:right}.bn-t .nw{white-space:nowrap}.bn-t small{display:block;color:var(--muted)}.bn-wrap{max-width:320px;word-break:break-word}
.bn-neg{color:#b91c1c}.bn-pos{color:#047857}
.bn-pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700;background:#e2e8f0;color:#475569}
.bn-pill.ok{background:#d1fae5;color:#047857}.bn-pill.bad{background:#fee2e2;color:#b91c1c}.bn-pill.wait{background:#fef3c7;color:#b45309}
.bn-empty{color:var(--muted);padding:14px 4px}
.bn-seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.bn-seg button{border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.bn-seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:900px){.bill-body .bn{flex-direction:column}.bn-nav{width:auto;flex-direction:row;flex-wrap:wrap;position:static}}

/* Admin tiles on Reports / AI Receptionist / Billing: right under the page header */
.adm-tiles-wrap{flex:none;padding:0 20px}

/* AI Receptionist uses the full width, like the other Admin pages */
.ai-body{max-width:none}


/* Schedules (time frames): cards with a week chart, the editor */
.tf-intro{display:flex;gap:14px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:4px 0 14px;font-size:13.5px;line-height:1.45}
.tf-intro>div{flex:1}.tf-intro .pill-btn{flex:none}
.tf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px}
.tf-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:12px;transition:border-color .12s,box-shadow .12s}
.tf-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}.tf-card.ro{cursor:default}.tf-card.ro:hover{border-color:var(--line);box-shadow:none}
.tf-ch{display:flex;align-items:center;gap:10px}.tf-ch b{display:block;font-size:15px}.tf-ch small{color:var(--muted);font-size:12px}.tf-ch .grow{flex:1}
.tf-ic{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);flex:none}
.tf-st{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted);white-space:nowrap}
.tf-st.on{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.tf-cf{display:flex;align-items:center;gap:8px;font-size:12.5px;border-top:1px solid var(--line);padding-top:10px}.tf-cf .grow{flex:1}.tf-edit{color:var(--accent);font-weight:700;display:inline-flex;gap:4px;align-items:center}
.tf-up{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.tf-up li{display:flex;justify-content:space-between;gap:10px;font-size:13px}.tf-up li span{color:var(--muted);text-align:right}
.tfb{display:flex;flex-direction:column;gap:5px}
.tfb-r,.tfb-ax{display:grid;grid-template-columns:34px 1fr 128px;align-items:center;gap:8px;font-size:12px}
.tfb-r>span{color:var(--muted);font-weight:700}.tfb-r.today>span{color:var(--accent)}
.tfb-r>em{font-style:normal;color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfb-t{position:relative;height:14px;border-radius:7px;background:color-mix(in srgb,var(--muted) 14%,transparent);overflow:hidden}
.tfb-t i{position:absolute;top:0;bottom:0;background:var(--green);border-radius:7px;opacity:.85}
.tfb-t u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--red);text-decoration:none}
.tfb-ax>div{display:flex;justify-content:space-between;color:var(--muted);font-size:10.5px}.tfb-ax b{font-weight:600}
.modal-card:has(.tfe){width:min(860px,94vw);max-width:none}
.tfe-name{display:flex;align-items:center;gap:10px;font-weight:700;margin:0 0 10px}.tfe-name input{flex:1;max-width:360px}
.tfe-pre{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}.tfe-pre label{display:inline-flex;align-items:center;gap:6px}.tfe-pre select{width:auto}
.tfe-days{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.tfe-day{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.tfe-day>b{width:38px}.tfe-day.off{opacity:.7}
.tfe-sw{display:inline-flex;align-items:center;gap:6px;min-width:84px;cursor:pointer}.tfe-sw input,.tfe-brk input{width:auto;margin:0}
.tfe-hrs{display:inline-flex;align-items:center;gap:6px}.tfe-hrs select{width:auto;min-width:96px}.tfe-hrs i{font-style:normal;color:var(--muted)}
.tfe-brk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px}
.tfe-h{margin:6px 0 8px;font-size:13px;color:var(--muted)}.tfe-note{font-size:12.5px;margin-top:10px}
.tfe-rng{display:flex;flex-direction:column;gap:8px}.tfe-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.tfe-r label{display:inline-flex;align-items:center;gap:6px}.tfe-r input[type=date]{width:auto}.tfe-r .pill-btn{margin-left:auto;padding:3px 9px}
.tfe-hol{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px;max-height:46vh;overflow:auto}
.tfe-h1{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--bg2)}
.tfe-h1 input{width:auto;margin:0;grid-row:span 2}.tfe-h1 span{color:var(--muted);font-size:12px}
.tf-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 4px}
.tf-pk{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg2);color:var(--text);font:inherit;cursor:pointer}
.tf-pk:hover{border-color:var(--accent)}.tf-pk b{font-size:14.5px}.tf-pk small{color:var(--muted);font-size:12.5px;line-height:1.4}
@media (max-width:700px){.tf-grid{grid-template-columns:1fr}.tf-pick{grid-template-columns:1fr}.tfb-r,.tfb-ax{grid-template-columns:30px 1fr}.tfb-r>em,.tfb-ax>em{display:none}.tf-intro{flex-direction:column;align-items:flex-start}}
.tfe-r input[type=date]{color:var(--text);color-scheme:light dark}

.tf-ch{flex-wrap:wrap}.tf-ch>div{flex:1 1 150px;min-width:0}.tf-ch>.grow{display:none}.tf-st{margin-left:auto}

/* Schedules: what follows each schedule */
.tf-use{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.tf-use h5{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tf-u{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.tf-u>b{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:13px}
.tf-u>span{font-size:12.5px;line-height:1.35}.tf-u>span i{display:block;font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.tf-u .on i{color:var(--green)}.tf-u .off i{color:var(--muted)}.tf-u small{color:var(--muted)}
.tf-u0{margin:0;font-size:12.5px}
.tfe .tf-use{border:0;padding:0 0 12px;margin-top:-4px}
@media (max-width:700px){.tf-u{grid-template-columns:1fr}}
/* business-hours editor: draggable chart */
.tfb.ed{gap:7px;user-select:none}
.tfb.ed .tfb-t{height:22px;border-radius:8px;cursor:copy;touch-action:none}
.tfb.ed .tfb-t i{border-radius:8px;cursor:grab;opacity:1}
.tfb.ed .tfb-t i:active{cursor:grabbing}
.tfb.ed .tfh{position:absolute;top:0;bottom:0;width:10px;cursor:ew-resize}
.tfb.ed .tfh.l{left:-3px}.tfb.ed .tfh.r{right:-3px}
.tfb.ed .tfh::after{content:'';position:absolute;top:5px;bottom:5px;left:4px;width:2px;border-radius:1px;background:rgba(255,255,255,.85)}
.tfb.ed .tfb-r>em{font-size:12px;color:var(--text)}
.tfe-h .muted{font-weight:400;font-size:12px}
/* tutorials */
.tut-btn{display:inline-flex;align-items:center;gap:8px;margin-left:8px;padding:8px 16px 8px 10px;border:0;border-radius:999px;background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(124,58,237,.35);position:relative;white-space:nowrap;flex:none}
.tut-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.tut-pl{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center}
.tut-pl::before{content:'';border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.tut-btn.new::after{content:'';position:absolute;inset:-4px;border-radius:999px;border:2px solid #db2777;animation:tutPulse 1.8s ease-out infinite}
@keyframes tutPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
#tut{position:fixed;inset:0;z-index:100000;animation:tutFade .25s ease}@keyframes tutFade{from{opacity:0}}
.tut-shade{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(8,10,20,.6);transition:left .55s cubic-bezier(.65,0,.35,1),top .55s cubic-bezier(.65,0,.35,1),width .55s cubic-bezier(.65,0,.35,1),height .55s cubic-bezier(.65,0,.35,1)}
.tut-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 3px #a78bfa,0 0 22px 6px rgba(167,139,250,.55);transition:left .55s cubic-bezier(.65,0,.35,1),top .55s cubic-bezier(.65,0,.35,1),width .55s cubic-bezier(.65,0,.35,1),height .55s cubic-bezier(.65,0,.35,1);pointer-events:none}
.tut-hand{position:fixed;width:30px;height:30px;margin:-4px 0 0 -6px;transition:left .7s cubic-bezier(.45,0,.2,1),top .7s cubic-bezier(.45,0,.2,1);pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));z-index:2}
.tut-hand i{position:absolute;left:2px;top:2px;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:3px solid #fbbf24;opacity:0}
.tut-hand.tap svg{animation:tutPress .45s ease}
.tut-hand.tap i{animation:tutRipple .9s ease-out 2}
@keyframes tutPress{50%{transform:scale(.82)}}
@keyframes tutRipple{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(3.2)}}
.tut-card{position:fixed;background:var(--bg);color:var(--text);border-radius:16px;padding:14px 16px 12px;box-shadow:0 18px 50px rgba(0,0,0,.45);transition:left .5s cubic-bezier(.65,0,.35,1),top .5s cubic-bezier(.65,0,.35,1);border:1px solid var(--line)}
.tut-card.in h3,.tut-card.in p{animation:tutIn .45s ease both}.tut-card.in p{animation-delay:.08s}
@keyframes tutIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tut-top{display:flex;align-items:center;gap:8px;font-size:12px}.tut-sec{color:#7c3aed;text-transform:uppercase;letter-spacing:.05em}.tut-n{color:var(--muted);margin-left:auto}
.tut-x{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.tut-card h3{margin:6px 0 4px;font-size:17px}.tut-card p{margin:0 0 10px;font-size:14px;line-height:1.45;color:var(--text)}
.tut-bar{height:3px;border-radius:2px;background:color-mix(in srgb,var(--muted) 22%,transparent);overflow:hidden;margin-bottom:10px}.tut-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7c3aed,#db2777)}
.tut-btns{display:flex;align-items:center;gap:6px}.tut-btns .grow{flex:1}
.tut-b{border:1px solid var(--line);background:var(--bg2);color:var(--text);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.tut-b:disabled{opacity:.4;cursor:default}
.tut-b.pri{background:linear-gradient(135deg,#7c3aed,#db2777);border:0;color:#fff}
.tut-dots{display:inline-flex;gap:4px;margin-right:6px}.tut-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--muted) 40%,transparent)}.tut-dots i.on{background:#7c3aed;width:16px;border-radius:3px}.tut-dots i.done{background:#c4b5fd}
@media (max-width:700px){.tut-btn{padding:7px 10px 7px 8px;font-size:0}.tut-btn .tut-pl{font-size:13px}}
.tut-hand.drag{transition:left 1s cubic-bezier(.45,0,.2,1),top .7s}.tut-hand.drag svg{transform:scale(.85)}.tut-hand.drag i{opacity:.8;transform:scale(1.2);animation:none}.tut-dots small{color:var(--muted);font-size:12px;font-weight:700}

/* team map: fold the people list */
.map-lh{display:flex;align-items:center;gap:8px;padding:7px 14px;border-top:1px solid var(--line);background:var(--bg2);cursor:pointer;user-select:none;font-size:13px}.map-lh .grow{flex:1}.map-lh:hover{background:color-mix(in srgb,var(--accent) 8%,var(--bg2))}
.map-lt{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:700}.map-chev{display:inline-flex;transition:transform .2s}.map-chev.up{transform:rotate(180deg)}
.map-list{transition:max-height .2s}.map-list.min{max-height:0;padding:0;overflow:hidden;border-top:0}

/* one sentiment bar: the mood of most of the call */
.smood{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:150px;max-width:220px;height:22px;padding:0 10px;border-radius:999px;overflow:hidden;font-size:12px;font-weight:700;white-space:nowrap;vertical-align:middle}
.smood i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;opacity:.9}.smood b,.smood em{position:relative;font-style:normal}.smood em{margin-left:auto}
.smood.pos{background:color-mix(in srgb,#2bac76 16%,transparent);color:#17734d}.smood.pos i{background:color-mix(in srgb,#2bac76 38%,transparent)}
.smood.neu{background:color-mix(in srgb,#ecb22e 16%,transparent);color:#8a6410}.smood.neu i{background:color-mix(in srgb,#ecb22e 38%,transparent)}
.smood.neg{background:color-mix(in srgb,#e01e5a 14%,transparent);color:#b0143f}.smood.neg i{background:color-mix(in srgb,#e01e5a 34%,transparent)}
[data-theme=dark] .smood.pos{color:#7ee2b0}[data-theme=dark] .smood.neu{color:#f5d47a}[data-theme=dark] .smood.neg{color:#ff8fae}

/* online demo for prospects: none of the internal toolbar */
[data-demo-web] #tb-report,[data-demo-web] #tb-feature,[data-demo-web] #tb-mini,[data-demo-web] #tb-bell,[data-demo-web] #tb-reg,[data-demo-web] #pc-winapp,[data-demo-web] #pc-install,[data-demo-web] #pc-install-x{display:none!important}

/* waiting room (joining another company's meeting) */
.vid-wait{position:fixed;inset:0;z-index:95;background:#15171c;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px}.vid-wait h2{margin:0}.vid-wait p{margin:0;opacity:.75;max-width:420px}.vid-wait-i{font-size:44px}.vid-wait .pill-btn{margin-top:12px}