/* WeCore Staff console - WeCore Glass design tokens (dark default, light via [data-theme=light]). */
:root{--bg:#0a0d14;--bg2:#0e1320;--card:#12151C;--card2:#161b27;--line:#222c44;--line2:#2a3552;--txt:#eef1f8;--txt2:#c2cae0;--mut:#9aa3bd;--mut2:#5f6883;
  --acc:#5b8cff;--acc2:#3ad6c5;--ok:#4ade80;--warn:#fcd34d;--bad:#fb7185;--shadow:0 10px 30px -12px rgba(0,0,0,.5);--r:14px;
  --font:'Sora',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--mono:'Space Grotesk',ui-monospace,monospace;color-scheme:dark}
:root[data-theme=light]{--bg:#f3f5fa;--bg2:#eef1f7;--card:#ffffff;--card2:#f7f9fc;--line:rgba(15,23,42,.10);--line2:rgba(15,23,42,.16);--txt:#0e1320;--txt2:#2b3550;
  --mut:#5f6883;--mut2:#8a93ab;--acc:#2f5fd6;--acc2:#0f9f90;--ok:#15803d;--warn:#b45309;--bad:#be123c;--shadow:0 8px 24px -12px rgba(15,23,42,.18);color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{min-height:100vh}
a{color:var(--acc)}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:var(--mono)}
.ltr{direction:ltr;unicode-bidi:isolate}
.muted{color:var(--mut)}
.small{font-size:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--card2);color:var(--txt2);padding:8px 13px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap}
.btn:hover{border-color:var(--acc)}
.btn:focus-visible,.inp:focus-visible,.nav a:focus-visible,.item:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.btn.pri{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border-color:transparent}
.btn.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.btn.ok{color:var(--ok)}
.btn.sm{padding:5px 9px;font-size:12px;border-radius:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.inp{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--txt);font-size:13.5px}
textarea.inp{min-height:96px;resize:vertical}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px;font-size:14px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc)}
.tag.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.tag.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.tag.mut{background:color-mix(in srgb,var(--mut) 14%,transparent);color:var(--mut)}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--card);border-inline-end:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:9px;padding:4px 8px 16px;font-weight:800;font-size:16px}
.brand .b2{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--acc2);background:color-mix(in srgb,var(--acc2) 14%,transparent);padding:2px 7px;border-radius:5px}
.nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:10px;color:var(--txt2);text-decoration:none;font-weight:600;font-size:13.5px}
.nav a:hover{background:var(--card2)}
.nav a.on{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--txt)}
.nav .cnt{font-size:11px;min-width:20px;text-align:center;border-radius:9px;padding:1px 6px;background:var(--bad);color:#fff}
.side .foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mut)}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 18px;display:flex;gap:10px;align-items:center}
.top .q{max-width:420px}
.page{padding:18px;display:flex;flex-direction:column;gap:14px}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.kpi .v{font-size:24px;font-weight:800;font-family:var(--mono)}
.kpi .l{font-size:12px;color:var(--mut)}
.split{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr) minmax(260px,340px);gap:14px;align-items:start}
.list{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 170px);overflow:auto;padding-inline-end:2px}
.item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.item:hover{border-color:var(--line2)}
.item.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.item .t{font-weight:700;font-size:13.5px;display:flex;gap:6px;align-items:center}
.item .s{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pri1{border-inline-start:3px solid var(--bad)}
.pri2{border-inline-start:3px solid var(--line2)}
.pri3{border-inline-start:3px solid var(--mut2)}
.msgs{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;padding:4px}
.bubble{max-width:82%;padding:9px 12px;border-radius:12px;font-size:13px;white-space:pre-wrap;word-break:break-word}
.bubble.in{background:var(--card2);border:1px solid var(--line);align-self:flex-start}
.bubble.out{background:color-mix(in srgb,var(--acc) 18%,var(--card));align-self:flex-end}
.bubble.note{background:color-mix(in srgb,var(--warn) 12%,var(--card));border:1px dashed color-mix(in srgb,var(--warn) 50%,transparent);align-self:stretch;max-width:100%}
.bubble .m{font-size:10.5px;color:var(--mut);margin-top:3px}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:start;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--mut2);padding:8px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:var(--card2)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;font-size:12.5px}
.kv .k{color:var(--mut)}
.banner{padding:9px 12px;border-radius:10px;font-size:12.5px;background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.banner.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.banner.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.auth{min-height:100vh;display:grid;place-items:center;padding:16px}
.auth .card{width:100%;max-width:420px;padding:26px}
.auth h1{font-size:20px;margin:0 0 4px}
.steps{display:flex;gap:6px;margin:10px 0 18px}
.steps span{flex:1;height:4px;border-radius:2px;background:var(--line)}
.steps span.on{background:linear-gradient(90deg,var(--acc),var(--acc2))}
label.f{display:block;font-size:12px;color:var(--mut);margin:12px 0 6px;font-weight:600}
.pal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;z-index:50}
.pal .box{width:min(620px,92vw);background:var(--card);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.pal .res{max-height:52vh;overflow:auto}
.pal .res div{padding:10px 14px;border-top:1px solid var(--line);cursor:pointer;display:flex;gap:8px;align-items:center}
.pal .res div.on,.pal .res div:hover{background:var(--card2)}
.toast{position:fixed;bottom:18px;inset-inline-start:18px;background:var(--card);border:1px solid var(--line2);padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);z-index:60;font-size:13px;max-width:360px}
.hide{display:none!important}
.chip{font-size:11.5px;padding:3px 8px;border-radius:7px;border:1px solid var(--line2);color:var(--txt2);cursor:pointer;background:transparent}
.chip.on{border-color:var(--acc);color:var(--acc)}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--mut)}
.pb ol{margin:6px 0;padding-inline-start:20px}
.pb li{margin:3px 0}
@media (max-width:1180px){.split{grid-template-columns:minmax(240px,320px) minmax(0,1fr)}.split .panel{grid-column:1/-1}}
@media (max-width:820px){.shell{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;overflow-x:auto;padding:8px}.side .foot,.brand .b2{display:none}
  .nav{display:flex;gap:4px}.nav a{white-space:nowrap}.split{grid-template-columns:1fr}.list{max-height:none}.top .q{max-width:none}.page{padding:12px}}
/* ---- T-308 unified inbox (#inbox2) + team admin. Status = colour AND label, never colour alone. */
:root{--q-new:#5b8cff;--q-mine:#a78bfa;--q-wait:#fbbf24;--q-over:#fb7185;--q-done:#4ade80;--q-snz:#94a3b8}
:root[data-theme=light]{--q-new:#2f5fd6;--q-mine:#7c3aed;--q-wait:#b45309;--q-over:#be123c;--q-done:#15803d;--q-snz:#64748b}
.ibx{display:grid;grid-template-columns:150px minmax(240px,330px) minmax(0,1fr) minmax(240px,300px);gap:12px;align-items:start;min-height:calc(100vh - 110px)}
.ib-rail{display:flex;flex-direction:column;gap:4px;position:sticky;top:70px}
.ib-q{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--txt2);cursor:pointer;font-weight:600;font-size:13px;border-inline-start:4px solid var(--line2)}
.ib-q.on{background:color-mix(in srgb,var(--acc) 14%,var(--card));color:var(--txt)}
.ib-q .cnt{font-size:11px;min-width:22px;text-align:center;border-radius:9px;padding:1px 6px;background:var(--card2);border:1px solid var(--line2)}
.ib-q.q-mine{border-inline-start-color:var(--q-mine)}.ib-q.q-unassigned{border-inline-start-color:var(--q-new)}.ib-q.q-waiting{border-inline-start-color:var(--q-wait)}
.ib-q.q-snoozed{border-inline-start-color:var(--q-snz)}.ib-q.q-done{border-inline-start-color:var(--q-done)}
.ib-help{margin-top:8px;padding:4px 10px}
.ib-listcol{display:flex;flex-direction:column;gap:8px;min-width:0}
.ib-filters{display:flex;flex-direction:column;gap:6px}
.ib-item{border-inline-start:4px solid var(--line2)}
.ib-item.q-new{border-inline-start-color:var(--q-new)}.ib-item.q-mine{border-inline-start-color:var(--q-mine)}.ib-item.q-waiting{border-inline-start-color:var(--q-wait)}
.ib-item.q-overdue{border-inline-start-color:var(--q-over)}.ib-item.q-done{border-inline-start-color:var(--q-done)}.ib-item.q-snoozed{border-inline-start-color:var(--q-snz)}
.ib-item .dot{width:8px;height:8px;border-radius:50%;background:var(--q-new);flex:none}
.q-new-tag{background:color-mix(in srgb,var(--q-new) 14%,transparent);color:var(--q-new)}
.ch{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:18px;padding:0 4px;border-radius:5px;font-size:10px;font-weight:800;font-family:var(--mono);background:var(--card2);border:1px solid var(--line2);flex:none}
.ch-whatsapp{color:#25d366}.ch-email{color:var(--acc)}.ch-messenger{color:#0084ff}.ch-instagram{color:#e1306c}
.chip-st{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.st-open{background:color-mix(in srgb,var(--q-new) 15%,transparent);color:var(--q-new)}
.st-pending{background:color-mix(in srgb,var(--q-wait) 16%,transparent);color:var(--q-wait)}
.st-snoozed{background:color-mix(in srgb,var(--q-snz) 16%,transparent);color:var(--q-snz)}
.st-resolved{background:color-mix(in srgb,var(--q-done) 15%,transparent);color:var(--q-done)}
.st-overdue{background:color-mix(in srgb,var(--q-over) 15%,transparent);color:var(--q-over)}
.ib-empty{padding:28px 14px;text-align:center;color:var(--mut);border:1px dashed var(--line2);border-radius:12px}
.ib-thread{display:flex;flex-direction:column;gap:8px;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-height:60vh}
.ib-head{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}
.ib-title{font-weight:800;font-size:15px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ib-back{display:none}
.ib-actions{gap:6px}
.sel-sm{width:auto;padding:5px 8px;font-size:12px}
.ib-banners{display:flex;flex-direction:column;gap:6px}
.banner.warn{background:color-mix(in srgb,var(--q-wait) 16%,transparent);color:var(--q-wait)}
.banner.ok-b{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.ib-timeline{flex:1;display:flex;flex-direction:column;gap:8px;overflow:auto;max-height:52vh;padding:4px}
.bub{max-width:80%;padding:9px 12px;border-radius:12px;font-size:13px;word-break:break-word}
.bub .body{white-space:pre-wrap}
.bub .meta{font-size:10.5px;color:var(--mut);margin-bottom:3px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.bub.in{background:var(--card2);border:1px solid var(--line);align-self:flex-start}
.bub.out{background:color-mix(in srgb,var(--acc) 16%,var(--card));align-self:flex-end}
.bub.note{background:color-mix(in srgb,var(--q-wait) 10%,var(--card));border:1px solid color-mix(in srgb,var(--q-wait) 45%,transparent);border-inline-start:4px solid var(--q-wait);align-self:stretch;max-width:100%}
.bub.draft{border:1px dashed var(--mut2);background:transparent}
.sysline{align-self:center;font-size:11.5px;color:var(--mut);background:var(--card2);border-radius:999px;padding:3px 12px}
.ticks{font-family:var(--mono);color:var(--mut)}.ticks.read{color:var(--acc)}
.chip-fail{font-size:11px;font-weight:700;color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent);border-radius:7px;padding:1px 7px}
.mailframe{width:100%;min-height:240px;border:1px solid var(--line);border-radius:8px;background:#fff}
.linkbtn{background:none;border:0;color:var(--acc);cursor:pointer;padding:2px 0}
.att{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.att-img{max-width:260px;max-height:260px;border-radius:8px;border:1px solid var(--line)}
.ib-composer{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:8px}
.note-chip.on{border-color:var(--q-wait);color:var(--q-wait)}
.hint{color:var(--mut)}
.ib-card .card{display:flex;flex-direction:column;gap:4px}
.ib-cname{font-weight:800;font-size:15px}
.hist{cursor:pointer;padding:4px;border-radius:8px}.hist:hover{background:var(--card2)}
.ib-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;justify-content:center;align-items:flex-start;padding-top:10vh;z-index:55}
.ib-modal .card{width:min(520px,92vw);display:flex;flex-direction:column;gap:8px}
.ib-modal .card.wide{width:min(900px,96vw);max-height:80vh;overflow:auto}
.ib-tour{position:fixed;bottom:22px;inset-inline-end:22px;width:min(360px,92vw);z-index:58;border-color:var(--acc)}
.tour-hl{outline:3px solid var(--acc);outline-offset:3px;border-radius:12px}
.grid-roles td,.grid-roles th{text-align:center}.grid-roles td:first-child{text-align:start}
tr.chg td{color:var(--q-wait)}
@media (max-width:1280px){.ibx{grid-template-columns:130px minmax(220px,300px) minmax(0,1fr)}.ib-card{grid-column:2/-1}}
@media (max-width:820px){.ibx{grid-template-columns:1fr}.ib-rail{position:static;flex-direction:row;overflow-x:auto}.ib-q{white-space:nowrap}
  .ibx.has-sel .ib-rail,.ibx.has-sel .ib-listcol{display:none}.ibx:not(.has-sel) .ib-thread,.ibx:not(.has-sel) .ib-card{display:none}
  .ib-back{display:inline-flex}.ib-card{grid-column:auto}.bub{max-width:92%}.ib-timeline{max-height:none}}
