:root {
  --brand:#0f766e; --brand-hover:#115e59; --accent:var(--brand); --accent-bg:rgba(15,118,110,.12); --on-brand:#fff;
  --bg:#f4f6f8; --card:#fff; --surface-3:#eef1f4; --text:#1f2937; --fg:var(--text); --muted:#5b6472; --line:#e5e7eb; --line-strong:#cfd5dc;
  --err:#b91c1c; --danger:var(--err); --err-bg:#fde2e1; --ok:#16a34a; --ok-bg:#dcfce7; --warn:#b45309; --warn-bg:#fff1d6; --idle:#d1d5db; --star:#f59e0b;
  --note-bg:#fef3c7; --note-fg:#78350f; --note-line:#d97706; --focus:#2563eb;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-bubble:18px; --r-full:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.06); --sh-2:0 4px 16px rgba(0,0,0,.12); --sh-3:0 8px 24px rgba(0,0,0,.2); --scrim:rgba(0,0,0,.45);
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:28px;
  --dur:180ms; --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0f1419; --card:#161c23; --surface-3:#1d252e; --text:#e5e7eb; --muted:#9ca3af; --line:#2d3540; --line-strong:#3b4552;
  --accent-bg:rgba(45,212,191,.14); --err-bg:#3b1716; --ok-bg:#12321f; --warn:#f59e0b; --warn-bg:#3a2a0c; --idle:#4b5563;
  --note-bg:#3a2f0b; --note-fg:#fde68a; --focus:#60a5fa; --sh-2:0 4px 16px rgba(0,0,0,.5); --sh-3:0 8px 24px rgba(0,0,0,.6);
} }
:root[data-theme="dark"] {
  --bg:#0f1419; --card:#161c23; --surface-3:#1d252e; --text:#e5e7eb; --muted:#9ca3af; --line:#2d3540; --line-strong:#3b4552;
  --accent-bg:rgba(45,212,191,.14); --err-bg:#3b1716; --ok-bg:#12321f; --warn:#f59e0b; --warn-bg:#3a2a0c; --idle:#4b5563;
  --note-bg:#3a2f0b; --note-fg:#fde68a; --focus:#60a5fa; --sh-2:0 4px 16px rgba(0,0,0,.5); --sh-3:0 8px 24px rgba(0,0,0,.6);
}
* { box-sizing:border-box; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
@font-face { font-family:'Twemoji Country Flags'; src:url(/vendor/TwemojiCountryFlags.woff2) format('woff2'); unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E007F; font-display:swap; }
body { margin:0; font:var(--fs-md)/1.45 'Twemoji Country Flags',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); }
.wrap { max-width:420px; margin:8vh auto; padding:0 16px; }
.logo { font-size:28px; font-weight:700; color:var(--brand); text-align:center; margin-bottom:4px; }
.sub { text-align:center; color:var(--muted); margin-bottom:24px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px; margin-bottom:16px; }
label { display:block; font-size:13px; color:var(--muted); margin:12px 0 4px; }
input { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:transparent; color:inherit; font:inherit; }
button { margin-top:18px; width:100%; padding:11px; border:0; border-radius:8px; background:var(--brand); color:var(--on-brand); font:inherit; font-weight:600; cursor:pointer; }
button.ghost { background:transparent; color:var(--brand); border:1px solid var(--brand); width:auto; padding:6px 14px; margin:0; }
button:disabled { opacity:.6; }
.err { color:var(--err); font-size:14px; min-height:20px; margin-top:10px; }
.switch { text-align:center; margin-top:14px; font-size:14px; }
a { color:var(--brand); cursor:pointer; }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
code, pre { font:13px ui-monospace,Consolas,monospace; }
pre { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; white-space:pre-wrap; word-break:break-all; }
.prop { border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.hidden { display:none !important; }
select, textarea { padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:transparent; color:inherit; font:inherit; }
.cfg { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; } .cfg .full { grid-column:1/-1; }
@media (max-width:640px) { .cfg { grid-template-columns:1fr; } }
.vt td, .vt th { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top; }
.vt { width:100%; border-collapse:collapse; } .vt small { color:var(--muted); word-break:break-all; }
.sc { position:relative; } .scpop { position:absolute; bottom:100%; left:0; right:0; background:var(--card); border:1px solid var(--line); border-radius:8px; max-height:180px; overflow-y:auto; }
.scpop div { padding:6px 10px; cursor:pointer; font-size:14px; } .scpop div.on, .scpop div:hover { background:var(--bg); }
.inline { display:flex; gap:8px; } .inline input { flex:1; } .inline button { width:auto; margin:0; }
/* toast + modal */
.toasts { position:fixed; right:16px; bottom:16px; left:16px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; z-index:1000; pointer-events:none; }
.toast { pointer-events:auto; max-width:360px; background:var(--card); color:var(--text); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:8px; padding:10px 14px; box-shadow:0 4px 16px rgba(0,0,0,.15); font-size:14px; }
.toast.error { border-left-color:var(--err); } .toast.ok { border-left-color:var(--ok); }
.modal-bg { position:fixed; inset:0; background:var(--scrim); display:flex; align-items:center; justify-content:center; padding:16px; z-index:1001; }
.modal { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:20px; max-width:380px; width:100%; }
.modal .acts { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; } .modal .acts button { width:auto; margin:0; padding:8px 16px; }

/* shell */
.muted { color:var(--muted); font-size:13px; }
h1, h2, h3, h4 { line-height:1.25; font-weight:600; }
h2 { margin:0 0 12px; font-size:var(--fs-2xl); }
.shell { display:grid; grid-template-columns:64px 1fr; height:100dvh; }
.rail { background:var(--card); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:stretch; padding:8px 4px; gap:2px; overflow-y:auto; }
.rlogo { text-align:center; font-weight:800; color:var(--brand); font-size:22px; margin:2px 0 8px; }
.rail a { position:relative; display:flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--muted); padding:6px 2px; border-radius:8px; font-size:11px; }
.rail a i { font-style:normal; font-size:18px; line-height:1.2; }
.rail a:hover, .rail a.on { background:var(--bg); color:var(--brand); }
.rsp { flex:1; }
.rbtn { margin:0; padding:6px 2px; font-size:11px; background:transparent; color:var(--muted); border:1px solid var(--line); width:100%; font-weight:500; }
.nb { position:absolute; top:0; right:4px; background:var(--err); color:var(--on-brand); border-radius:9px; font-style:normal; font-size:11px; min-width:16px; text-align:center; padding:0 4px; }
.main { min-width:0; min-height:0; overflow:hidden; }
.view { height:100%; }
.page { overflow-y:auto; padding:20px max(20px, calc(100% - 880px)) 20px 20px; }
.inboxv { display:grid; grid-template-columns:300px minmax(0,1fr) 280px; }
.inboxv.noinfo { grid-template-columns:300px minmax(0,1fr); }
.pane { display:flex; flex-direction:column; min-height:0; min-width:0; border-right:1px solid var(--line); }
.phead { display:flex; justify-content:space-between; align-items:center; padding:12px; gap:8px; }
.conn { font-size:12px; color:var(--muted); }
.filter { margin:0 12px 8px; width:auto; }
.ci { padding:8px 10px; border-radius:8px; cursor:pointer; margin-bottom:2px; position:relative; }
.ci:hover, .ci.on { background:var(--bg); }
.ci .r1 { display:flex; justify-content:space-between; gap:6px; align-items:baseline; }
.ci .r1 b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci .tm { font-size:11px; color:var(--muted); flex:none; }
.ci .r2 { display:flex; justify-content:space-between; gap:6px; align-items:center; }
.ci small { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--idle); margin-right:6px; }
.ci .dot.live { background:var(--ok); }
.ci.unread b, .ci.unread small { color:var(--text); font-weight:700; }
.ci .bd { background:var(--brand); color:var(--on-brand); border-radius:9px; font-size:11px; min-width:18px; text-align:center; padding:0 5px; flex:none; }
.thread { flex:1; }
.thead { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); font-weight:600; }
.tht { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thead small { font-weight:400; color:var(--muted); }
.thead .ghost, .phead .ghost { margin:0; padding:4px 10px; }
.back { display:none; }
.tmsgs { flex:1; overflow-y:auto; padding:8px 12px; }
.bub { max-width:75%; padding:7px 11px; border-radius:12px; margin:4px 0; white-space:pre-wrap; word-wrap:break-word; }
.bub.visitor { background:var(--bg); border:1px solid var(--line); }
.bub.agent { background:var(--brand); color:var(--on-brand); margin-left:auto; }
.bub.system { max-width:none; text-align:center; background:none; color:var(--muted); font-size:12px; margin:8px auto; padding:0; }
.bub .who { display:block; font-size:11px; opacity:.8; }
.bub .ts { display:block; font-size:11px; opacity:.7; text-align:right; }
.day { text-align:center; color:var(--muted); font-size:12px; margin:10px 0 4px; }
.tnote { color:var(--muted); font-size:12px; padding:0 12px; }
.composer { display:flex; gap:8px; align-items:flex-end; padding:10px 12px; border-top:1px solid var(--line); position:relative; }
.composer textarea { flex:1; resize:none; max-height:40vh; }
.composer button { margin:0; width:auto; padding:9px 14px; }
.composer .ib { padding:6px 8px; font-size:18px; }
.emojipop { position:absolute; bottom:100%; left:12px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; max-width:300px; }
.emojipop span { cursor:pointer; text-align:center; font-size:20px; padding:2px; border-radius:6px; } .emojipop span:hover { background:var(--bg); }
.vinfo { border-right:0; border-left:1px solid var(--line); }
.vbody { padding:0 12px 12px; overflow-y:auto; font-size:14px; }
.vbody dt { color:var(--muted); font-size:12px; margin-top:10px; } .vbody dd { margin:0; word-break:break-word; }
.inbox .list { width:240px; flex:none; border-right:1px solid var(--line); }
.chk { display:flex; gap:8px; align-items:center; color:var(--text); font-size:14px; } .chk input { width:auto; }
.qs div { padding:8px 10px; border-radius:8px; cursor:pointer; } .qs div.on { background:var(--bg); }
.txm { max-width:720px; height:min(86vh,760px); display:flex; flex-direction:column; padding:0; overflow:hidden; }
.txh { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); } .txh .tsp { flex:1; } .txh button { width:auto; margin:0; padding:4px 10px; }
.txav { width:32px; height:32px; border-radius:50%; background:var(--line); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; } .txav .flg { width:32px; height:32px; object-fit:cover; margin:0; }
.txt1 { min-width:0; } .txmeta { display:flex; flex-wrap:wrap; gap:4px; align-items:center; font-size:12px; margin-top:2px; } .txmeta .chip { font-size:11px; }
.txtabs { display:flex; gap:4px; padding:0 12px; border-bottom:1px solid var(--line); } .txtabs button { width:auto; margin:0; background:none; color:var(--muted); border:0; border-bottom:2px solid transparent; border-radius:0; padding:10px 12px; }
.txtabs button.on { color:var(--text); border-bottom-color:currentColor; font-weight:600; }
.txb { flex:1; overflow:auto; padding:12px 16px; } .txb .tmsgs { overflow:visible; height:auto; }
.pcard { border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin:0 auto 10px; max-width:360px; font-size:13px; }
.navl { text-align:center; color:var(--muted); font-size:12px; margin:6px 0; word-break:break-all; }
.tline { list-style:none; padding:0; margin:0; } .tline li { padding:8px 0 8px 14px; border-left:2px solid var(--line); }
@media print { body.printtx > *:not(#txm) { display:none !important; } body.printtx #txm { position:static; background:none; } body.printtx .txm { height:auto; max-width:none; border:0; } body.printtx .txh button, body.printtx .txtabs { display:none; } body.printtx .txb { overflow:visible; } }
#qs .modal { max-width:460px; } #qsIn { margin-bottom:8px; }
.vt th { cursor:pointer; user-select:none; }
.danger { color:var(--err); border-color:var(--err); }
@media (max-width:1100px) {
  .inboxv, .inboxv.noinfo { grid-template-columns:280px minmax(0,1fr); }
  .vinfo { position:fixed; top:0; right:0; bottom:0; width:min(320px,90vw); background:var(--card); z-index:50; box-shadow:-4px 0 16px rgba(0,0,0,.2); }
}
@media (max-width:640px) {
  .shell { grid-template-columns:1fr; grid-template-rows:1fr 56px; }
  .rail { grid-row:2; flex-direction:row; border-right:0; border-top:1px solid var(--line); padding:2px; overflow-x:auto; }
  .rail a { flex:1; min-width:52px; } .rlogo, .rsp, .rbtn { display:none; }
  .inboxv, .inboxv.noinfo { grid-template-columns:1fr; }
  .inboxv .thread { display:none; } .inboxv.chatopen .plist { display:none; } .inboxv.chatopen .thread { display:flex; }
  .back { display:inline-block; }
  .page { padding:12px; }
  .inbox { flex-direction:column; height:auto; } .inbox .list { width:auto; max-height:180px; border:0; } .inbox .tmsgs { height:300px; flex:none; }
}
.list { overflow-y:auto; padding:0 8px; flex:1; }
.inbox { display:flex; gap:12px; height:420px; }

/* B2-B15 */
.tabs{display:flex;gap:4px;padding:6px 10px}.tabs button{flex:1;padding:5px;font-size:13px;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:6px;cursor:pointer}.tabs button.on{background:var(--brand);color:var(--on-brand);border-color:transparent}
.tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line);font-size:13px}.tools .tl{display:flex;gap:4px;align-items:center}.tools button{padding:3px 8px;font-size:12px}
.bub.internal{background:var(--note-bg);color:var(--note-fg);border:1px dashed var(--note-line);align-self:flex-end}.wh{font-size:12px;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}.chip{color:var(--on-brand);border-radius:10px;padding:1px 8px;font-size:12px}.chip a{margin-left:4px;cursor:pointer}
.xh{font-weight:600;margin:12px 0 4px;font-size:13px}.note{background:rgba(127,127,127,.12);border-radius:6px;padding:4px 8px;margin:4px 0;font-size:13px}.note a{cursor:pointer;float:right}
.stars{color:var(--star);letter-spacing:1px}.trail{list-style:none;padding:0;margin:0;font-size:12px;word-break:break-all}
.hf{margin-bottom:8px;flex-wrap:wrap}.hl{display:flex;flex-direction:column}
.kpis{display:flex;flex-wrap:wrap;gap:10px}.kpi{flex:1;min-width:120px;border:1px solid var(--line);border-radius:8px;padding:10px}.kpi b{display:block;font-size:22px}.kpi span{font-size:12px;opacity:.7}
.bars{display:flex;align-items:flex-end;gap:2px;height:120px}.bars div{flex:1;background:var(--brand);min-height:2px;position:relative;border-radius:2px 2px 0 0}.bars em{position:absolute;top:-14px;left:0;right:0;text-align:center;font-size:11px;font-style:normal}
.hm{display:grid;grid-template-columns:32px repeat(24,1fr);gap:2px;font-size:11px;max-width:700px}.hm i{height:16px;background:var(--brand);border-radius:2px}.hm i.hh{background:none;height:auto;text-align:center;font-style:normal}
.hours .hr{display:flex;gap:6px;align-items:center;margin:3px 0}.hours .chk{min-width:70px}
.att { display:block; color:inherit; text-decoration:underline; margin-bottom:4px; }
.att img { display:block; max-width:240px; max-height:240px; border-radius:8px; }
/* D0 avatar menu, D1 home */
.avatar { position:relative; margin:4px auto 0; width:40px; height:40px; border-radius:50%; padding:0; background:var(--brand); color:var(--on-brand); font-weight:600; }
.avatar .dot { position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:50%; border:2px solid var(--card); background:var(--ok); }
.avatar .dot.away { background:var(--star); } .avatar .dot.invisible { background:var(--muted); }
.memenu { position:fixed; left:70px; bottom:12px; z-index:40; width:240px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.memenu.hidden { display:none; } .memenu .mmh { display:flex; flex-direction:column; border-bottom:1px solid var(--line); padding-bottom:8px; }
.memenu label { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0; } .memenu select { width:auto; margin:0; } .memenu button { width:100%; margin:0; }
.hgrid { display:grid; grid-template-columns:2fr 1fr; gap:12px; } .hstats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hc { margin:0; } .hct { font-weight:600; margin-bottom:6px; } .hbig b { font-size:28px; } .up { color:var(--ok); } .down { color:var(--err); }
.hlive { margin:0; } .hlive svg { width:100%; height:160px; display:block; } .hlive .gl { stroke:var(--line); } .hlive .ln { fill:none; stroke:var(--brand); stroke-width:2; }
.hax { display:flex; justify-content:space-between; font-size:11px; }
#hLive { position:relative; } .hly { position:absolute; left:0; top:0; height:160px; display:flex; flex-direction:column; justify-content:space-between; font-size:10px; pointer-events:none; } .hlive svg { padding-left:18px; box-sizing:border-box; } .hlive .now { fill:var(--brand); stroke:var(--bg, #fff); stroke-width:2; } .hlive .hit { fill:transparent; } .hlive .hit:hover { fill:var(--brand); opacity:.35; }
.hrow { display:grid; grid-template-columns:2fr 1fr 1fr; gap:8px; padding:8px 4px; border-top:1px solid var(--line); cursor:pointer; } .hrow.hhd { cursor:default; border-top:0; font-size:12px; }
.hrow:not(.hhd):hover { background:var(--bg); }
@media (max-width:760px) { .hgrid { grid-template-columns:1fr; } .avatar { flex:0 0 40px; margin:6px; } .memenu { left:8px; bottom:64px; } }
/* D2 inbox table */
.tgrid { display: grid; grid-template-columns: 140px 1fr; gap: 16px; }
.tnav { display: flex; flex-direction: column; gap: 4px; }
.tnav button { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; color: inherit; cursor: pointer; }
.tnav button.on { background: var(--accent-bg); font-weight: 600; }
.tbulk { margin: 8px 0; align-items: center; }
.tscroll { overflow-x: auto; padding: 0; }
.ttbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.ttbl th, .ttbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.ttbl tbody tr { cursor: pointer; }
.ttbl tbody tr:hover, .ttbl tbody tr:focus { background: var(--bg); }
.ttbl .tpv { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pri { font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.pri.p1 { background: var(--warn-bg); color: var(--warn); }
.pri.p2 { background: var(--err-bg); color: var(--err); }
@media (max-width: 700px) { .tgrid { grid-template-columns: 1fr; } .tnav { flex-direction: row; } }
.augrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; align-content:start; } .au { margin:0; } .au.soon { opacity:.7; }

/* E0.5 icon sprite */
.ic { width:20px; height:20px; flex:none; vertical-align:middle; }
button .ic { width:18px; height:18px; }

/* E0.4 shared components */
.mt-2 { margin-top:var(--s-2); } .mt-3 { margin-top:var(--s-3); } .mb-0 { margin-bottom:0; }
.fs-sm { font-size:var(--fs-sm, 13px); } .w-160 { max-width:160px; } .w-full { width:100%; }
.btn { display:inline-flex; align-items:center; gap:var(--s-2); padding:var(--s-2) var(--s-4); border-radius:var(--r-md); border:1px solid transparent; background:var(--brand); color:var(--on-brand); font:inherit; font-weight:600; cursor:pointer; transition:background var(--dur) var(--ease); }
.btn:hover { background:var(--brand-hover); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover { background:var(--surface-3); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-sm { padding:var(--s-1) var(--s-3); font-size:var(--fs-xs); }
.field { display:flex; flex-direction:column; gap:var(--s-1); }
.field > label { font-size:var(--fs-xs); color:var(--muted); font-weight:600; }
.badge { display:inline-flex; align-items:center; min-width:18px; height:18px; padding:0 6px; border-radius:var(--r-full); background:var(--brand); color:var(--on-brand); font-size:11px; font-weight:700; justify-content:center; }
.pill { display:inline-flex; align-items:center; gap:4px; padding:2px var(--s-2); border-radius:var(--r-full); background:var(--surface-3); color:var(--text); font-size:var(--fs-xs); }
.pill.ok { background:var(--ok-bg); color:var(--ok); } .pill.warn { background:var(--warn-bg); color:var(--warn); } .pill.err { background:var(--err-bg); color:var(--err); }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-4); }
.page-head h2 { margin:0; font-size:var(--fs-2xl); }
.menu, .popover { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:var(--s-1); }
.menu > button, .menu > a { display:flex; width:100%; gap:var(--s-2); padding:var(--s-2) var(--s-3); border:0; background:none; color:var(--text); text-align:left; border-radius:var(--r-sm); cursor:pointer; }
.menu > button:hover, .menu > a:hover { background:var(--surface-3); }
.empty { text-align:center; padding:var(--s-8) var(--s-4); color:var(--muted); }
.empty .ic { width:40px; height:40px; opacity:.5; margin-bottom:var(--s-2); }
.skeleton { background:linear-gradient(90deg,var(--surface-3) 25%,var(--line) 50%,var(--surface-3) 75%); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:var(--r-sm); min-height:12px; }
@keyframes sk { to { background-position:-200% 0; } }
.kbd, kbd { font:600 11px ui-monospace,monospace; padding:1px 5px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:4px; background:var(--card); }
.wprev { width:220px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; font-size:13px; }
.wprev-h { color:#fff; padding:8px 10px; font-weight:600; }
.wprev-g { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:6px 9px; }

/* E1 rail: 6 primary items, sections via subnav */
.main { display:flex; flex-direction:column; }
.main > .view { flex:1; min-height:0; height:auto; }
.rail a.sec { display:none; }
.rail a.on::before { content:""; position:absolute; left:-4px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--brand); }
.subnav { display:flex; gap:var(--s-1); padding:var(--s-2) var(--s-4) 0; border-bottom:1px solid var(--line); background:var(--card); overflow-x:auto; flex:none; }
.subnav a { padding:var(--s-2) var(--s-3); color:var(--muted); text-decoration:none; font-weight:600; font-size:var(--fs-sm,13px); border-bottom:2px solid transparent; white-space:nowrap; }
.subnav a:hover { color:var(--text); }
.subnav a.on { color:var(--brand); border-bottom-color:var(--brand); }
@media (max-width:640px) { .rail a.on::before { left:8px; right:8px; top:-2px; bottom:auto; width:auto; height:3px; border-radius:0 0 3px 3px; } }
@media (min-width:1280px) { .shell { grid-template-columns:72px 1fr; } }

/* E2 inbox rows + thread grouping */
.ci { display:flex; gap:var(--s-3); align-items:center; min-height:64px; padding:var(--s-2) var(--s-3); }
.ci.on { box-shadow:inset 3px 0 0 var(--brand); }
.ci .cb { flex:1; min-width:0; }
.ci .av { position:relative; flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff; background:hsl(var(--h) 55% 45%); }
.ci .av .dot { position:absolute; right:-1px; bottom:-1px; margin:0; width:10px; height:10px; border:2px solid var(--card); }
.ci .wait { flex:none; font-size:11px; font-weight:700; padding:0 6px; border-radius:var(--r-full); background:var(--surface-3); color:var(--muted); }
.ci .wait.warn { background:var(--warn-bg); color:var(--warn); }
.ci .wait.late { background:var(--err-bg); color:var(--err); }
.ci .asg { flex:none; width:18px; height:18px; border-radius:50%; background:var(--surface-3); color:var(--text); font-size:9px; font-weight:700; display:grid; place-items:center; }
.bub.grp .ts { display:none; }
.bub.cont { margin-top:1px; }
.bub.visitor.grp { border-bottom-left-radius:4px; } .bub.visitor.cont { border-top-left-radius:4px; }
.bub.agent.grp { border-bottom-right-radius:4px; } .bub.agent.cont { border-top-right-radius:4px; }
.bub.internal .who::before { content:"🔒 "; }
.bub:hover .ts { display:block; }

/* E2 thread actions */
.tools .tsp { flex:1; }
.tools #resolveBtn { background:var(--ok); color:#fff; border:0; border-radius:var(--r-md); font-weight:600; }
.tools .mwrap { position:relative; }
.tools .menu { position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:190px; }
.tools .menu button { font-size:13px; padding:var(--s-2) var(--s-3); }
.menu .danger { color:var(--danger); }
.thread .composer #closeChat { display:none; }
/* E3 composer */
.composer .ctabs{display:flex;border:1px solid var(--line);border-radius:var(--r-2,8px);overflow:hidden;flex:none}
.composer .ctabs button{background:none;color:var(--muted);border:0;border-radius:0;padding:6px 10px;font-size:13px}
.composer .ctabs button.on{background:var(--brand);color:#fff}
.composer.note{background:var(--note-bg)}.composer.note textarea{background:var(--note-bg);color:var(--note-fg);border-color:var(--note-line)}
.composer.note .ctabs button.on{background:var(--note-line);color:var(--note-fg)}
.composer button[type=submit]:disabled{opacity:.5;cursor:not-allowed}
.composer #upChip{align-self:center;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropping{outline:2px dashed var(--brand);outline-offset:-6px}
.composer .fmt{display:flex}.composer .fmt .ib{font-size:13px;padding:6px 7px}
.composer .split{display:flex}.composer .split #sendBtn{border-radius:var(--r-2,8px) 0 0 var(--r-2,8px)}
.composer .split #sendResolve{border-radius:0 var(--r-2,8px) var(--r-2,8px) 0;border-left:1px solid #fff4;padding:9px 10px}
.composer .split button:disabled{opacity:.5;cursor:not-allowed}
.composer #upChip img{height:22px;width:22px;object-fit:cover;border-radius:4px;vertical-align:middle;margin-right:6px}
.bub code{font-family:ui-monospace,monospace;background:#0001;padding:0 4px;border-radius:4px}

.flg{width:18px;height:13.5px;margin-right:6px;border-radius:2px;vertical-align:-2px;box-shadow:0 0 0 1px #0002}
.flgE{margin-right:5px}
.tksplit{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:16px}.tksplit .list{max-height:70vh;overflow:auto}
#tkDetail select{margin-left:4px}.tkmsgs{margin:12px 0;display:grid;gap:8px}.tkmsgs .note{padding:8px;border:1px solid var(--line,#ddd);border-radius:8px}
#tkList .chip,#banList .chip{color:#fff;border-radius:10px;padding:1px 7px;font-size:11px}
@media (max-width:760px){.tksplit{grid-template-columns:1fr}}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line,#ddd)}
.txm.live{max-width:900px}.txlive{flex:1;display:flex;min-height:0}.txlive .pane.thread{flex:1;display:flex;flex-direction:column;min-height:0;border:0;width:100%}
.txlive #backList,.txlive #infoBtn{display:none}.txm:not(.live) .lv,.txm:not(.live) [data-tx=chat],.txm.live [data-tx=transcript]{display:none}
.txdock{position:fixed;right:16px;bottom:16px;z-index:50;border-radius:20px;padding:8px 14px;box-shadow:0 4px 16px #0003}
.txfind{margin:6px 16px 0;max-width:260px}.bub.miss{opacity:.3}.bub.hit{outline:2px solid #d97706}
@media (max-width:700px){.txm.live{max-width:none;width:100vw;height:100dvh;border-radius:0}.txh{flex-wrap:wrap}.txtabs{overflow-x:auto;white-space:nowrap}.txfind{max-width:none}.txdock{right:8px;bottom:8px}}
.logo{display:flex;align-items:center;justify-content:center;gap:8px}.logo img,.rlogo img{display:block;border-radius:8px}.rlogo img{margin:0 auto}
.hrow{display:grid;grid-template-columns:1.2fr 2fr .7fr;gap:8px;padding:6px 4px;border-bottom:1px solid var(--line,#eee);cursor:pointer;font-size:13px}
.hrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow.hhd{cursor:default;font-size:12px}
#hVis .hrow:hover{background:rgba(0,0,0,.04)}
.vt tr.vclick{cursor:pointer}.vt tr.vclick:hover{background:rgba(127,127,127,.08)}.vt a[data-chat]{cursor:pointer}
.avb{display:grid;grid-template-columns:140px 1fr 200px;gap:8px;align-items:center;margin:6px 0;font-size:13px}
.avbar{display:flex;height:14px;background:var(--line,#eee);border-radius:4px;overflow:hidden}
.av-online{background:#22a06b}.av-away{background:#e2a03f}.av-invisible{background:#8a8f98}
@media (max-width:600px){.avb{grid-template-columns:1fr}}
.snz{font-size:12px}