/* Conversation Manager — operator inbox.
   Light theme (house rule). Brand colour arrives at runtime from workspaces.accent, so every
   non-semantic colour below MUST follow --brand. Green/red/amber mean something and stay put. */

:root{
  --brand:#2F6BFF; --brand-deep:#1B44B8;
  --brand-soft:color-mix(in srgb, var(--brand) 10%, #fff);
  --brand-line:color-mix(in srgb, var(--brand) 28%, #fff);
  --ink:#14181F; --ink-2:#4B5563; --ink-3:#8A93A2;
  --bg:#F6F7F9; --panel:#fff; --line:#E4E7EC;
  --green:#0F8A4D; --green-soft:#E7F6EE;
  --red:#C42B1C;   --red-soft:#FDECEA;
  --amber:#9A6700; --amber-soft:#FFF6DF;
  --r:12px; --r-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.06);
  --top:56px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}   /* overlays use display:flex/fixed, which beat the attribute */
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.loading *{visibility:hidden}
h1,h2,h3{margin:0 0 6px; line-height:1.25}
h1{font-size:22px} h2{font-size:16px; font-weight:650}
p{margin:0 0 10px}
.muted{color:var(--ink-2)}
.small{font-size:13px}
.hint{font-size:12.5px; color:var(--ink-3); margin:-4px 0 12px}
.err{color:var(--red); font-size:13px; margin:2px 0 8px}

input,select,textarea{
  width:100%; min-width:0; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; color:var(--ink); font:inherit; font-size:14px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-line); outline-offset:-1px; border-color:var(--brand)}
textarea{resize:vertical}
label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin:12px 0 5px}

.btn{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:9px 14px; border-radius:var(--r-sm); font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.btn:hover{background:#FAFBFC}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-deep); border-color:var(--brand-deep)}
.btn.small{padding:6px 10px; font-size:13px}
.btn.ghost{background:transparent; border-color:transparent; color:var(--ink-2)}
.btn.danger{color:var(--red); border-color:color-mix(in srgb, var(--red) 30%, #fff)}
.btn.wide{width:100%; margin-top:14px}
.btn:disabled{opacity:.5; cursor:default}
.icon-btn{
  appearance:none; border:0; background:transparent; cursor:pointer; color:var(--ink-2);
  font:inherit; font-size:14px; padding:6px 8px; border-radius:var(--r-sm); position:relative;
}
.icon-btn:hover{background:#EEF1F5; color:var(--ink)}

/* ------------------------------------------------------------------ gate */
.gate{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:18px; background:var(--bg); z-index:50}
.gate-card{width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:22px}
.gate-brand{display:flex; align-items:center; gap:9px; font-weight:700; margin-bottom:16px}
.gate-dot{width:22px; height:22px; border-radius:7px; background:var(--brand); flex:0 0 auto}
.gate-form h1{margin-bottom:4px}

/* ------------------------------------------------------------------ chrome */
.topbar{
  position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:8px 14px; min-height:var(--top);
}
.ws-switch{
  display:flex; align-items:center; gap:8px; background:transparent; border:1px solid transparent;
  padding:5px 8px; border-radius:var(--r-sm); cursor:pointer; font:inherit; font-weight:700; color:var(--ink);
  min-width:0; flex:0 1 auto;
}
.ws-switch:hover{border-color:var(--line); background:#FAFBFC}
body.pinned .ws-switch{pointer-events:none}
body.pinned .ws-caret{display:none}
.ws-mark{
  width:26px; height:26px; border-radius:8px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-size:11px; font-weight:800; flex:0 0 auto;
}
.ws-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px}
.ws-caret{color:var(--ink-3); font-size:11px}

.tabs{display:flex; gap:4px; flex:1 1 auto; min-width:0; overflow:visible}
.tab{
  appearance:none; border:0; background:transparent; padding:7px 12px; border-radius:var(--r-sm);
  font:inherit; font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer; white-space:nowrap;
}
.tab:hover{background:#EEF1F5; color:var(--ink)}
.tab.active{background:var(--brand-soft); color:var(--brand-deep)}
.tab .pill{
  display:none; margin-left:5px; background:var(--red); color:#fff; border-radius:999px;
  font-size:11px; padding:1px 6px; font-weight:700;
}
.tab .pill.on{display:inline-block}
.topbar-right{display:flex; align-items:center; gap:2px; flex:0 0 auto}
.badge{position:absolute; top:2px; right:2px; width:8px; height:8px; border-radius:50%; background:var(--red)}

body:not(.role-admin) .admin-only{display:none !important}
body:not(.is-agency) .agency-only{display:none !important}

.banner{padding:9px 14px; font-size:13.5px; font-weight:600; text-align:center}
.banner.demo{background:var(--amber-soft); color:var(--amber); border-bottom:1px solid color-mix(in srgb, var(--amber) 25%, #fff)}
.banner.warn{background:var(--red-soft); color:var(--red); border-bottom:1px solid color-mix(in srgb, var(--red) 25%, #fff)}

.view{display:block}
.wrap{max-width:900px; margin:0 auto; padding:18px 14px 60px}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:14px; box-shadow:var(--shadow)}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.card-head.bare{background:transparent; border:0; box-shadow:none; padding:0 0 6px}
.card-foot{display:flex; align-items:center; gap:10px; margin-top:16px}
.saved{color:var(--green); font-size:13px; font-weight:600}
.cards2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.row-wrap{display:flex; flex-wrap:wrap; gap:12px}
.field{flex:1 1 160px; min-width:0}
.field.grow{flex:2 1 260px}
.switch{display:flex; align-items:center; gap:8px; margin:12px 0; font-size:14px; font-weight:600; color:var(--ink-2)}
.switch input{width:auto; margin:0}

/* ------------------------------------------------------------------ inbox layout */
#view-inbox{
  display:grid; grid-template-columns:340px minmax(0,1fr); gap:0;
  height:calc(100vh - var(--top)); height:calc(100dvh - var(--top));
}
body.has-detail #view-inbox{grid-template-columns:340px minmax(0,1fr) 300px}
.pane{min-width:0; min-height:0; background:var(--panel); display:flex; flex-direction:column}
.list-pane{border-right:1px solid var(--line)}
.detail-pane{border-left:1px solid var(--line)}

.list-head{padding:10px 12px; border-bottom:1px solid var(--line)}
.search{margin-bottom:8px}
.chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink-2);
  padding:4px 9px; border-radius:999px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.chip span{color:var(--ink-3); margin-left:3px}
.chip.active{background:var(--brand); border-color:var(--brand); color:#fff}
.chip.active span{color:#fff; opacity:.8}

.conv-list{overflow-y:auto; flex:1 1 auto}
.conv{
  display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; align-items:start;
  padding:11px 12px; border-bottom:1px solid var(--line); cursor:pointer; background:#fff;
}
.conv:hover{background:#FAFBFC}
.conv.active{background:var(--brand-soft)}
.conv.needs{box-shadow:inset 3px 0 0 var(--red)}
.av{width:34px; height:34px; border-radius:50%; background:#EEF1F5; color:var(--ink-2); display:grid; place-items:center; font-size:12px; font-weight:700}
.conv-main{min-width:0}
.conv-name{font-weight:650; font-size:14px; overflow-wrap:anywhere}
.conv-prev{font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.conv-meta{text-align:right; font-size:11px; color:var(--ink-3); display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.dot-unread{width:8px; height:8px; border-radius:50%; background:var(--brand)}
.tagline{display:flex; gap:4px; margin-top:4px; flex-wrap:wrap}
.tg{font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:999px; background:#EEF1F5; color:var(--ink-2); text-transform:uppercase; letter-spacing:.02em}
.tg.wa{background:var(--green-soft); color:var(--green)}
.tg.web{background:var(--brand-soft); color:var(--brand-deep)}
.tg.bot{background:var(--brand-soft); color:var(--brand-deep)}
.tg.need{background:var(--red-soft); color:var(--red)}
.empty{padding:28px 16px; text-align:center; color:var(--ink-2); font-size:14px}

.thread-pane{background:#FBFCFD}
.thread-empty{flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; gap:2px}
.thread-empty .big{font-size:17px; font-weight:650; margin:0}
.thread{display:flex; flex-direction:column; height:100%; min-height:0}
.thread-head{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line);
  background:#fff; flex-wrap:wrap;
}
.back-btn{display:none; font-size:18px}
.thread-who{min-width:0; flex:1 1 140px; display:flex; flex-direction:column}
.thread-name{font-weight:700; overflow-wrap:anywhere}
.thread-sub{font-size:12px; color:var(--ink-3)}
.thread-actions{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.bot-toggle{display:flex; align-items:center; gap:6px; margin:0; font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.bot-toggle input{width:auto; margin:0}

.msgs{flex:1 1 auto; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:9px}
.m{max-width:min(74%, 560px); padding:8px 11px; border-radius:14px; font-size:14px; overflow-wrap:anywhere; white-space:pre-wrap}
.m .who{display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; opacity:.62; margin-bottom:2px}
.m .at{display:block; font-size:10.5px; opacity:.55; margin-top:3px}
.m.in{align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px}
.m.bot{align-self:flex-end; background:var(--brand-soft); border:1px solid var(--brand-line); border-bottom-right-radius:4px}
.m.agent{align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:4px}
.m.failed{align-self:flex-end; background:var(--red-soft); border:1px solid color-mix(in srgb, var(--red) 25%, #fff); color:var(--red)}
.m.sys{align-self:center; max-width:88%; background:transparent; color:var(--ink-3); font-size:12px; text-align:center; padding:2px 8px}

.composer{border-top:1px solid var(--line); background:#fff; padding:10px 12px; display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap}
.composer textarea{flex:1 1 200px; min-height:40px; max-height:150px}
.composer-note{flex:1 1 100%; font-size:12.5px; font-weight:600; padding:7px 10px; border-radius:var(--r-sm); background:var(--amber-soft); color:var(--amber)}

.detail-head{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--line)}
.detail-body{overflow-y:auto; padding:12px; font-size:13.5px}
.detail-body label{margin-top:10px}
.dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px; margin:8px 0}
.dl dt{color:var(--ink-3); font-size:12px}
.dl dd{margin:0; overflow-wrap:anywhere}

/* ------------------------------------------------------------------ dashboard */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px; box-shadow:var(--shadow); min-width:0}
.kpi .n{font-size:26px; font-weight:750; line-height:1.1}
.kpi .l{font-size:12.5px; color:var(--ink-2); margin-top:3px}
.kpi .s{font-size:11.5px; color:var(--ink-3); margin-top:5px}
.bars{display:flex; align-items:flex-end; gap:8px; height:130px; padding-top:8px}
.bar-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%}
.bar-stack{flex:1 1 auto; width:100%; display:flex; align-items:flex-end; gap:2px}
.bar-track{display:block; flex:1 1 0; min-width:0; background:#EEF1F5; border-radius:3px 3px 0 0; align-self:flex-end}
.bar-fill{display:block; width:100%; border-radius:3px 3px 0 0}
.bar-fill.in{background:var(--ink-3)}
.bar-fill.bot{background:var(--brand)}
.bar-lab{font-size:10.5px; color:var(--ink-3)}
.legend{font-size:12px; color:var(--ink-2); margin-top:10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.key{display:inline-block; width:10px; height:10px; border-radius:3px}
.key.in{background:var(--ink-3)} .key.bot{background:var(--brand)}
.rows{display:flex; flex-direction:column}
.rw{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.rw:last-child{border-bottom:0}
.rw .v{font-weight:650; white-space:nowrap}
.rw .sub{font-size:12px; color:var(--ink-3)}

/* ------------------------------------------------------------------ agency spend
   The month grid is repeat(7, 1fr): seven columns that divide the container, so it is
   structurally incapable of overflowing a phone. Past months and days stay navigable, because
   this is a record of what was spent, not a booking page. */
.period-label{font-size:13px; color:var(--ink-2); margin:10px 0 4px; font-weight:600}
.cal{border:1px solid var(--line); border-radius:var(--r); padding:10px; margin:10px 0 14px; max-width:340px}
.cal-head{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:6px; margin-bottom:6px}
.cal-head strong{text-align:center; font-size:14px}
.cal-dow,.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-dow span{text-align:center; font-size:10.5px; font-weight:700; color:var(--ink-3); padding:3px 0}
.cal-d{
  appearance:none; border:0; background:transparent; cursor:pointer; font:inherit; font-size:12.5px;
  padding:7px 0; border-radius:6px; color:var(--ink); min-width:0;
}
.cal-d:hover{background:#EEF1F5}
.cal-d.mute{color:var(--ink-3); opacity:.45}
.cal-d.today{box-shadow:inset 0 0 0 1px var(--brand)}
.cal-d.in-range{background:var(--brand-soft); border-radius:0}
.cal-d.edge{background:var(--brand); color:#fff; font-weight:700}
.cal-d.edge.start{border-radius:6px 0 0 6px} .cal-d.edge.end{border-radius:0 6px 6px 0}
.cal-d.edge.start.end{border-radius:6px}
.cal-d:disabled{opacity:.3; cursor:default}

.spend-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:14px 0}
.spend-kpis .kpi{padding:12px}
.spend-kpis .n{font-size:22px}

/* The table is the wide thing, so it scrolls inside its own box. min-width:0 on the box as
   well as overflow-x, or the track still stretches and the whole PAGE scrolls sideways.
   Below 640px it stops being a table at all, see the stacked rule further down. */
.table-scroll{overflow-x:auto; min-width:0; -webkit-overflow-scrolling:touch}
.tbl{width:100%; min-width:520px; border-collapse:collapse; font-size:14px}
.tbl th,.tbl td{padding:9px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl th{font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-3); font-weight:700}
.tbl td.name{white-space:normal; overflow-wrap:anywhere; min-width:130px}
.tbl .num{text-align:right}
.tbl tbody tr:hover{background:#FAFBFC}
.tbl tfoot td{font-weight:750; border-top:2px solid var(--line); border-bottom:0}
.tbl .zero{color:var(--ink-3)}
.tbl .model{display:block; font-size:11px; color:var(--ink-3); font-weight:500}
.tbl .paused{font-size:10.5px; font-weight:700; color:var(--amber); background:var(--amber-soft); padding:1px 6px; border-radius:999px; margin-left:5px}

/* ------------------------------------------------------------------ channels */
.chan{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:15px; margin-bottom:12px; box-shadow:var(--shadow)}
.chan-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.chan-title{display:flex; align-items:center; gap:8px; font-weight:700; min-width:0}
.status{font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em}
.status.ok{background:var(--green-soft); color:var(--green)}
.status.no{background:var(--amber-soft); color:var(--amber)}
.copyrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.copyrow input{flex:1 1 220px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; background:#FAFBFC}
.steps{margin:10px 0 0; padding-left:18px; font-size:13.5px; color:var(--ink-2)}
.steps li{margin-bottom:5px}
code{background:#F1F3F6; padding:1px 5px; border-radius:4px; font-size:12.5px; overflow-wrap:anywhere}
pre{background:#F1F3F6; padding:11px; border-radius:var(--r-sm); overflow-x:auto; font-size:12.5px; margin:8px 0}

.try-row{display:flex; gap:8px; flex-wrap:wrap}
.try-row input{flex:1 1 240px}
.try-out{margin-top:12px; padding:12px; border:1px solid var(--brand-line); background:var(--brand-soft); border-radius:var(--r-sm); font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere}
.try-meta{margin-top:8px; font-size:12px; color:var(--ink-2); display:flex; gap:12px; flex-wrap:wrap}

/* Model comparison. Side by side on a laptop, stacked on a phone: three replies to read is
   exactly the case where squeezing columns makes all three unreadable. */
.cmp{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:14px}
.cmp-card{border:1px solid var(--line); border-radius:var(--r-sm); padding:12px; background:#fff; min-width:0; display:flex; flex-direction:column}
.cmp-card.current{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}
.cmp-head{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px; flex-wrap:wrap}
.cmp-model{font-size:12.5px; font-weight:700; overflow-wrap:anywhere}
.cmp-now{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:var(--brand-soft); color:var(--brand-deep); padding:1px 6px; border-radius:999px}
.cmp-reply{font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; flex:1 1 auto}
.cmp-verdict{margin-top:9px; font-size:12px; font-weight:650; padding:5px 8px; border-radius:6px}
.cmp-verdict.over{background:var(--green-soft); color:var(--green)}
.cmp-verdict.ans{background:var(--brand-soft); color:var(--brand-deep)}
.cmp-foot{margin-top:9px; padding-top:8px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-3); display:flex; gap:10px; flex-wrap:wrap}
.cmp-card.bad{border-color:color-mix(in srgb, var(--red) 30%, #fff)}
.cmp-card.bad .cmp-reply{color:var(--red); font-size:13px}

/* FAQ. summary stays display:block with the flex row on an inner div, or native toggling
   silently breaks in mobile WebKit and the accordion never opens on the client's phone. */
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{display:block; list-style:none; cursor:pointer; padding:12px 0}
.faq summary::-webkit-details-marker{display:none}
.faq-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:650; font-size:14.5px}
.faq-row::after{content:"+"; color:var(--ink-3); font-weight:700; flex:0 0 auto}
.faq details[open] .faq-row::after{content:"−"}
.faq .ans{padding:0 0 14px; color:var(--ink-2); font-size:14px}
.add-user summary{display:block; list-style:none; cursor:pointer; padding:12px 0; font-weight:650}
.add-user summary::-webkit-details-marker{display:none}
.add-user .faq-row::after{content:"+"; color:var(--ink-3)}
.add-user[open] .faq-row::after{content:"−"}

/* ------------------------------------------------------------------ overlays */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:60;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px; font-size:13.5px; font-weight:600;
  max-width:calc(100vw - 32px); text-align:center;
}
.toast.bad{background:var(--red)}
.sheet{position:fixed; inset:0; z-index:55; background:rgba(16,24,40,.35); display:flex; align-items:flex-start; justify-content:center; padding:60px 16px 16px}
.sheet-card{width:100%; max-width:400px; background:#fff; border-radius:var(--r); box-shadow:var(--shadow); padding:14px; max-height:80vh; overflow-y:auto}
.sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.sheet-foot{display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); flex-wrap:wrap}
.sheet-foot input{flex:1 1 160px}
.ws-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer}
.ws-row:last-child{border-bottom:0}
.ws-row:hover .ws-row-name{color:var(--brand-deep)}
.ws-row-name{font-weight:650; overflow-wrap:anywhere}

/* ------------------------------------------------------------------ mobile
   Nav wraps onto a second row, never a sideways scroll: an item past the right edge is a
   feature that quietly stopped existing. Verified at 375, 360 and 320. */
@media (max-width:900px){
  .cards2{grid-template-columns:1fr}
  body.has-detail #view-inbox{grid-template-columns:340px minmax(0,1fr)}
  .detail-pane{position:fixed; top:var(--top); right:0; bottom:0; width:min(320px,86vw); z-index:30; box-shadow:var(--shadow)}
}
@media (max-width:760px){
  .topbar{flex-wrap:wrap; padding:8px 10px; gap:8px}
  .tabs{order:3; flex:1 1 100%; flex-wrap:wrap; gap:4px; overflow:visible}
  .tab{padding:6px 11px; font-size:13px}
  .ws-name{max-width:min(46vw,220px)}
  #view-inbox{display:block; height:auto}
  .list-pane{border-right:0; height:calc(100dvh - var(--top) - 46px)}
  .thread-pane{display:none; position:fixed; inset:var(--top) 0 0; z-index:25; height:auto}
  body.has-thread .list-pane{display:none}
  body.has-thread .thread-pane{display:flex}
  .back-btn{display:block}
  .detail-pane{top:0; width:100%; max-width:none}
  .m{max-width:86%}
}
/* Six columns on a phone means dragging the table sideways to read one client's spend, and
   the figure you want is always the one off the right edge. Below 640px each row becomes its
   own card with the column name printed beside its value, so nothing scrolls and nothing is
   hidden. The header row is what carries the labels on desktop, so it goes away here and the
   labels come from data-l on each cell. */
@media (max-width:640px){
  .table-scroll{overflow-x:visible}
  .tbl{min-width:0; display:block; font-size:14px}
  .tbl thead{display:none}
  .tbl tbody,.tbl tfoot,.tbl tr,.tbl td{display:block}
  .tbl tr{border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; margin-bottom:9px; background:#fff}
  .tbl td{border:0; padding:3px 0; white-space:normal; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:baseline}
  .tbl td::before{content:attr(data-l); font-size:12px; color:var(--ink-3); font-weight:600}
  .tbl td.num{text-align:right}
  .tbl td.name{
    display:block; font-weight:700; font-size:15px; padding-bottom:7px; margin-bottom:5px;
    border-bottom:1px solid var(--line);
  }
  .tbl td.name::before{content:none}
  .tbl tfoot tr{background:var(--brand-soft); border-color:var(--brand-line)}
  .tbl tfoot td{border-top:0}
  .cal{max-width:none}
}
@media (max-width:380px){
  .chip{padding:4px 7px; font-size:12px}
  .thread-actions .btn.small{padding:5px 8px; font-size:12px}
}