/* Tokens and components copied from lotus-admin static/style.css (same look as the dev site), plus support parts at the end. */
:root{color-scheme:light;
--bg:#f6f7f9;--surface:#fff;--surface-2:#f2f4f7;--surface-3:#e9ecf1;--seg:#eceef2;--seg-on:#fff;
--border:#e4e7ec;--border-strong:#d0d5dd;
--text:#101828;--text-2:#344054;--muted:#667085;
--brand:#4BBA3A;--accent:#107569;--accent-hover:#125d56;--accent-fg:#fff;--accent-soft:#e6f6f2;--accent-text:#107569;--focus:#15b79e;
--ok:#067647;--ok-bg:#ecfdf3;--ok-bd:#abefc6;
--warn:#b54708;--warn-bg:#fffaeb;--warn-bd:#fedf89;
--bad:#b42318;--bad-bg:#fef3f2;--bad-bd:#fecdca;--bad-solid:#d92d20;
--info:#3538cd;--info-bg:#eef4ff;--info-bd:#c7d7fe;
--neutral-bg:#f2f4f7;--neutral-bd:#e4e7ec;
--violet:#6941c6;--violet-bg:#f4f3ff;--violet-bd:#d9d6fe;--sky:#026aa2;--sky-bg:#f0f9ff;--sky-bd:#b9e6fe;
--shadow-sm:0 1px 2px rgba(16,24,40,.05);--shadow-seg:0 1px 2px rgba(16,24,40,.12);
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
--r-sm:6px;--r:8px;--r-lg:12px;--r-full:999px;
--fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:26px;
--font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--maxw:1120px}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;
--bg:#0c0e12;--surface:#14171c;--surface-2:#1a1e25;--surface-3:#232831;--seg:#1a1e25;--seg-on:#2a303a;
--border:#262b33;--border-strong:#383e49;
--text:#f0f2f5;--text-2:#c4cad4;--muted:#8e97a5;
--brand:#4BBA3A;--accent:#0e7f72;--accent-hover:#119585;--accent-fg:#fff;--accent-soft:#0d2a26;--accent-text:#5fe9d0;--focus:#2ed3b7;
--ok:#75e0a7;--ok-bg:#0b2a1c;--ok-bd:#165c3a;
--warn:#fdb022;--warn-bg:#2b1d05;--warn-bd:#5c3d0a;
--bad:#fda29b;--bad-bg:#2d1110;--bad-bd:#6a1f1a;--bad-solid:#d92d20;
--info:#a4bcfd;--info-bg:#151c3d;--info-bd:#2d3a7a;
--neutral-bg:#1f242c;--neutral-bd:#2c323c;
--violet:#bdb4fe;--violet-bg:#221a45;--violet-bd:#4a3a8c;--sky:#7cd4fd;--sky-bg:#0b2333;--sky-bd:#1a4a66;
--shadow-sm:none;--shadow-seg:0 1px 2px rgba(0,0,0,.4)}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-base)/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1{font-size:var(--fs-xl);line-height:1.25;font-weight:650;letter-spacing:-.015em;margin:0}
h2{font-size:var(--fs-md);line-height:1.3;font-weight:600;margin:0}
p{margin:0 0 var(--sp-3)}
code{font:12.5px/1.5 var(--mono);background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.muted{color:var(--muted)}
.hi{color:var(--bad);font-weight:600}
.ok{color:var(--ok)}
.top{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--border)}
.top-in{max-width:var(--maxw);margin:0 auto;padding:var(--sp-2) var(--sp-4);min-height:56px;display:flex;align-items:center;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:var(--fs-md);color:var(--text);margin-right:auto;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand small{font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
.logo{display:inline-flex;flex:none;width:32px;height:32px;color:var(--brand)}   /* green cburnett bishop; gold rook on lotus-admin, org/system/brand/ */
.logo svg{width:100%;height:100%}
.logo.lg{width:64px;height:64px}
.topnav{display:flex;align-items:center;gap:2px}
.topnav a{display:flex;align-items:center;min-height:32px;padding:0 10px;border-radius:var(--r);color:var(--text-2);font-size:var(--fs-sm);font-weight:500}
.topnav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.user{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text-2)}
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);font-size:var(--fs-xs);font-weight:650}
main{max-width:var(--maxw);margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-7)}
main.wide,body:has(main.wide) .top-in{max-width:1440px}
.ph{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);margin:0 0 var(--sp-4)}
.ph .sub{margin:var(--sp-1) 0 0;color:var(--muted);font-size:var(--fs-sm)}
.ph .tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--sp-2)}
.crumbs{margin:0 0 6px;font-size:var(--fs-sm);color:var(--muted)}
.crumbs a{color:var(--muted)}
nav.tabs{display:flex;gap:2px;width:max-content;max-width:100%;margin:0 0 var(--sp-4);padding:3px;background:var(--seg);border:1px solid var(--border);border-radius:10px;overflow-x:auto;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{flex:none;display:flex;align-items:center;min-height:30px;padding:0 12px;border-radius:7px;color:var(--text-2);font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
nav.tabs a:hover{color:var(--text);text-decoration:none}
nav.tabs a.on{background:var(--seg-on);color:var(--text);box-shadow:var(--shadow-seg)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin:0 0 var(--sp-4);overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}
.card-h .muted{font-size:var(--fs-xs)}
.card-b{padding:var(--sp-4)}
.card-b>:last-child{margin-bottom:0}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin:0 0 var(--sp-4)}
.metric{min-width:0;padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.metric .k{font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
.metric .v{margin-top:2px;font-size:var(--fs-2xl);font-weight:650;line-height:1.25;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th{padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);color:var(--muted);font-size:var(--fs-xs);font-weight:600;text-align:left;white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
th:first-child,td:first-child{padding-left:var(--sp-4)}
th:last-child,td:last-child{padding-right:var(--sp-4)}
tbody tr:last-child>td{border-bottom:0}
.ts{color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:var(--r-full);border:1px solid var(--neutral-bd);background:var(--neutral-bg);color:var(--text-2);font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
.pill.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}
.pill.bad{background:var(--bad-bg);border-color:var(--bad-bd);color:var(--bad)}
.pill.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:var(--r);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:500 var(--fs-sm)/1 var(--font);cursor:pointer}
.btn:hover{background:var(--surface-2)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.danger{color:var(--bad);border-color:var(--bad-bd);background:var(--bad-bg)}
.btn.sm{min-height:28px;padding:0 10px;font-size:var(--fs-xs)}
input[type=text],input[type=password]{min-height:36px;padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:var(--fs-base) var(--font);max-width:100%}
label.f{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-3)}
.err{margin:var(--sp-3) 0 0;color:var(--bad);font-size:var(--fs-sm)}
.okmsg{margin:var(--sp-3) 0 0;color:var(--ok);font-size:var(--fs-sm)}
.center{max-width:420px;margin:12vh auto 0;padding:0 var(--sp-4)}
.center .card-b{display:flex;flex-direction:column;gap:var(--sp-3)}
.soon{margin:0;padding-left:var(--sp-5);color:var(--text-2)}
.soon li{margin:2px 0}
@media (max-width:720px){.user .who{display:none}.topnav{order:3;width:100%;overflow-x:auto;scrollbar-width:none}.topnav a{white-space:nowrap}main{padding-top:var(--sp-4)}}
.topnav a.on{background:var(--accent-soft);color:var(--accent-text)}
select{min-height:36px;padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:var(--fs-base) var(--font);max-width:100%}
.vfilter{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}
td.wrap{white-space:pre-wrap;overflow-wrap:anywhere;min-width:200px}
td.bad-cell{color:var(--bad)}
pre.pgn{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.5 var(--mono)}
.actions{align-items:center}.actions form.act{display:flex;align-items:center;gap:var(--sp-2)}
/* ---- support ---- */
.banner{padding:var(--sp-2) var(--sp-4);text-align:center;font-size:var(--fs-sm);font-weight:600;background:var(--bad-bg);color:var(--bad);border-bottom:1px solid var(--bad-bd)}
.spend{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.list{list-style:none;margin:0;padding:0}
.list>li{border-bottom:1px solid var(--border)}
.list>li:last-child{border-bottom:0}
a.qrow{display:block;padding:var(--sp-3) var(--sp-4);color:var(--text)}
a.qrow:hover{background:var(--surface-2);text-decoration:none}
.qrow .l1{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.qrow .nm{font-weight:600}
.qrow .meta{font-size:var(--fs-xs);color:var(--muted)}
.qrow .snip{margin-top:4px;font-size:var(--fs-sm);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.stars{color:var(--warn);letter-spacing:1px}
.st-drafted{color:var(--brand);font-weight:600}.st-new,.st-approved{font-weight:600}
.empty{padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--muted)}
.msgs{display:flex;flex-direction:column;gap:var(--sp-3)}
.msg{max-width:92%;padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-base)}
.msg.out{align-self:flex-end;background:var(--accent-soft);border-color:transparent}
.msg .mh{display:block;margin-bottom:6px;font-size:var(--fs-xs);color:var(--muted);white-space:normal}
.note{padding:var(--sp-3) var(--sp-4);border-radius:var(--r);background:var(--info-bg);border:1px solid var(--info-bd);color:var(--text);font-size:var(--fs-sm);white-space:pre-wrap}
.lint{margin:0 0 var(--sp-3);padding:0;list-style:none;font-size:var(--fs-sm)}
.lint li.e{color:var(--bad)}.lint li.w{color:var(--warn)}
textarea{display:block;width:100%;min-height:220px;padding:var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:var(--fs-base)/1.5 var(--font);resize:vertical}
input[type=text].wide{width:100%}
.count{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.count.over{color:var(--bad);font-weight:600}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3)}
.bar .grow{margin-right:auto}
details.en{margin:var(--sp-3) 0}
details.en summary{cursor:pointer;font-size:var(--fs-sm);color:var(--muted)}
details.en .msg{margin-top:var(--sp-2);max-width:100%}
.esc{padding:var(--sp-3) var(--sp-4);border-radius:var(--r);background:var(--bad-bg);border:1px solid var(--bad-bd);color:var(--bad);font-size:var(--fs-sm);margin:0 0 var(--sp-4)}
.wait{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);justify-content:space-between}
.link{display:block;padding:var(--sp-3);border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border);font:12.5px/1.5 var(--mono);overflow-wrap:anywhere;user-select:all}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.auditrow td{font-size:var(--fs-xs)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4)}
.grid2>.card{margin:0}
.center h1{text-align:center}
.center .lead{text-align:center;color:var(--muted);font-size:var(--fs-sm);margin:0}
.center .btn{width:100%;min-height:44px;font-size:var(--fs-base)}
.center .logo.lg{display:block;margin:0 auto var(--sp-3)}
@media (max-width:720px){.msg{max-width:100%}.bar .btn{flex:1 1 auto}main{padding-left:var(--sp-3);padding-right:var(--sp-3)}}
/* ---- summaries, split view ---- */
.sum{display:flex;gap:var(--sp-2);margin-top:4px;font-size:var(--fs-sm);color:var(--text-2)}
.sum .sl{flex:none;width:68px;font-size:var(--fs-xs);font-weight:600;color:var(--muted);padding-top:1px}
.sum.out .sl{color:var(--accent-text)}
.tldr .card-b{padding:var(--sp-3) var(--sp-4)}.tldr .sum{margin:2px 0;font-size:var(--fs-base);color:var(--text)}
main:has(.split){max-width:1440px}
body:has(.split) .top-in{max-width:1440px}
.split{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--sp-4);align-items:start}
.side{position:sticky;top:72px;max-height:calc(100vh - 88px);overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.side-h{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:var(--sp-2) var(--sp-3);background:var(--surface);border-bottom:1px solid var(--border);font-size:var(--fs-sm);font-weight:600}
.side-h a{color:var(--text)}
a.srow{display:block;padding:var(--sp-2) var(--sp-3);color:var(--text);border-left:3px solid transparent}
a.srow:hover{background:var(--surface-2);text-decoration:none}
a.srow.on{background:var(--accent-soft);border-left-color:var(--accent)}
.srow .l1{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-sm)}
.srow .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .meta{flex:none;font-size:var(--fs-xs);color:var(--muted)}
.srow .s2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;font-size:var(--fs-xs);color:var(--text-2);overflow-wrap:anywhere}
.pill.sm{min-height:18px;padding:0 6px;font-size:11px}
.pager{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-3)}
.pager .btn.off{opacity:.4;pointer-events:none}
.pager .keys{margin-left:auto;font-size:var(--fs-xs)}
.donebar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-3);padding:var(--sp-2) var(--sp-4);border-radius:var(--r);background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok);font-size:var(--fs-sm)}
.presets{margin:0 0 var(--sp-3)}
@media (max-width:1000px){.split{grid-template-columns:minmax(0,1fr)}.side{display:none}.pager .keys{display:none}}
/* ---- chat view + customer panel ---- */
main:has(.split){max-width:1600px}
body:has(.split) .top-in{max-width:1600px}
.split{grid-template-columns:280px minmax(0,1fr) 260px}
.tname{margin:0 0 0 var(--sp-2);font-size:var(--fs-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager .pill{margin-left:auto}
.chat{display:flex;flex-direction:column;gap:var(--sp-3);margin:0 0 var(--sp-4)}
.bubble{max-width:82%;padding:var(--sp-2) var(--sp-3);border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.bubble.in{align-self:flex-start;border-bottom-left-radius:4px}
.bubble.out{align-self:flex-end;background:var(--accent-soft);border-color:transparent;border-bottom-right-radius:4px}
.bubble.draft{width:82%;background:var(--surface);border:2px dashed var(--accent)}
.bubble .bh{font-size:var(--fs-xs);color:var(--muted);margin-bottom:4px}
.bubble .bt{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-base);line-height:1.5}
.bubble textarea{min-height:180px;margin:var(--sp-2) 0}
.bubble .note,.bubble .lint{margin:var(--sp-2) 0}
details.full{margin-top:var(--sp-2);font-size:var(--fs-sm)}
details.full summary{cursor:pointer;color:var(--muted);font-size:var(--fs-xs)}
details.full .bt{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--border);color:var(--text-2);font-size:var(--fs-sm)}
.tools{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.tools .chips{margin-top:var(--sp-2)}
.info{position:sticky;top:72px;max-height:calc(100vh - 88px);overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.info dl{margin:0;padding:var(--sp-2) var(--sp-3)}
.info dt{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-2)}
.info dd{margin:0;font-size:var(--fs-sm);overflow-wrap:anywhere;display:flex;gap:4px;align-items:flex-start}
.info dd span{flex:1;min-width:0}
.info .small{padding:0 var(--sp-3) var(--sp-2);font-size:var(--fs-xs)}
button.cp{flex:none;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);border-radius:6px;font-size:12px;line-height:1;padding:3px 6px;cursor:pointer}
button.cp:hover{color:var(--text)}
@media (max-width:1300px){.split{grid-template-columns:260px minmax(0,1fr)}.info{position:static;grid-column:2;grid-row:1;max-height:none}.body{grid-column:2}.side{grid-row:1 / span 2}
 .info dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));column-gap:var(--sp-3)}.info dt{grid-row:auto}}
@media (max-width:1000px){.split{grid-template-columns:minmax(0,1fr)}.info,.body{grid-column:1}.bubble,.bubble.draft{max-width:100%;width:auto}}
.tagl{padding:0 var(--sp-3) var(--sp-3)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.bubble .bh{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}
button.lt{flex:none;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);border-radius:var(--r-full);font-size:11px;line-height:1;padding:3px 8px;cursor:pointer}
button.lt:hover{color:var(--text)}
.bubble .en-draft{margin:0 0 var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r);background:var(--surface-2);color:var(--text-2)}
.en-draft .lbl{display:block;font-size:var(--fs-xs);color:var(--muted);margin-bottom:2px}
[hidden]{display:none !important}
#lang-all{margin-left:var(--sp-2)}
/* ---- inboxes: Feedback / Partners ---- */
nav.boxes{display:flex;gap:var(--sp-4);margin:0 0 var(--sp-3);border-bottom:1px solid var(--border)}
nav.boxes a{display:flex;align-items:center;gap:6px;padding:var(--sp-2) 2px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--text-2);font-size:var(--fs-md);font-weight:600}
nav.boxes a:hover{color:var(--text);text-decoration:none}
nav.boxes a.on{color:var(--text);border-bottom-color:var(--accent)}
nav.boxes .badge{min-width:20px;padding:1px 7px;border-radius:var(--r-full);background:var(--accent);color:var(--accent-fg);font-size:11px;text-align:center}
form.redraft input.instr{flex:1;min-width:0}
.redrafting{align-self:flex-end;display:flex;align-items:center;gap:var(--sp-2);width:82%;padding:var(--sp-2) var(--sp-3);border-radius:var(--r);background:var(--accent-soft);color:var(--accent-text);font-size:var(--fs-sm)}
.redrafting + .bubble.draft{opacity:.5}
.spin{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.nm .spin{display:inline-block;vertical-align:-2px;width:11px;height:11px;margin-right:6px;color:var(--accent-text)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
@media (max-width:1000px){.redrafting{width:auto;align-self:stretch}}
.brief{display:grid;gap:var(--sp-2);margin:0 0 var(--sp-3);padding:var(--sp-3);border:1px solid var(--info-bd);border-radius:var(--r);background:var(--info-bg)}
.brow{display:grid;grid-template-columns:88px 1fr;gap:var(--sp-2);align-items:baseline}
.bk{font-size:var(--fs-xs);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bv.strong{font-weight:600;color:var(--text)}
.todo{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.todo li{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.todo li .pill{flex:none}
.todo .k-unlock_pro,.todo .k-refund{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
details.note>summary{cursor:pointer;color:var(--muted);font-size:var(--fs-sm)}
.chat-h{font-size:var(--fs-xs);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:var(--sp-4) 0 var(--sp-2)}
@media (max-width:640px){.brow{grid-template-columns:1fr;gap:2px}}
.btn.mic{flex:none;padding-inline:var(--sp-3);display:inline-flex;align-items:center;justify-content:center}
.btn.mic.rec{background:var(--bad-bg);border-color:var(--bad-bd);color:var(--bad);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px var(--bad-bg)}}
@media (prefers-reduced-motion:reduce){.btn.mic.rec{animation:none}}
.ov{display:grid;gap:var(--sp-3)}
.ov h2{margin:0;font-size:var(--fs-lg)}
.ov ol{margin:0;padding-left:1.2em;display:grid;gap:var(--sp-2)}
.ov li b{display:block}
.chips.tight{gap:4px;margin-top:4px}
.bars{display:flex;align-items:flex-end;gap:4px;height:64px}
.bars span{flex:1;background:var(--accent-soft);border:1px solid var(--info-bd);border-radius:3px 3px 0 0;min-height:2px}
.kv{display:flex;flex-wrap:wrap;gap:6px}
.wants{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.wants li{display:flex;gap:var(--sp-2);align-items:baseline}
.wants .num{min-width:2.5em;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
blockquote.q{margin:0;padding-left:var(--sp-3);border-left:3px solid var(--neutral-bd);color:var(--text-2)}
/* queue tags: category = tinted chip with a dot, theme = outlined in the color of its group, language/version quiet */
.pill.cat{font-weight:600}
.pill.cat::before{content:"";width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor}
.pill.c-bug{background:var(--bad-bg);border-color:var(--bad-bd);color:var(--bad)}
.pill.c-feature-wish{background:var(--violet-bg);border-color:var(--violet-bd);color:var(--violet)}
.pill.c-question{background:var(--info-bg);border-color:var(--info-bd);color:var(--info)}
.pill.c-praise{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}
.pill.c-purchase-refund{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.pill.c-account,.pill.c-sync{background:var(--sky-bg);border-color:var(--sky-bd);color:var(--sky)}
.pill.c-spam{color:var(--muted)}
.pill.th{background:transparent}
.pill.t-money{border-color:var(--warn-bd);color:var(--warn)}
.pill.t-broken{border-color:var(--bad-bd);color:var(--bad)}
.pill.t-learn{border-color:var(--violet-bd);color:var(--violet)}
.pill.t-app{border-color:var(--sky-bd);color:var(--sky)}
.pill.mono{background:transparent;border-color:var(--border);color:var(--muted);font-family:var(--mono);font-size:11px}
.pill.faint{background:transparent;border-style:dashed;color:var(--muted)}
.pill.pf{background:var(--surface-3);border-color:var(--border-strong);color:var(--text);font-weight:600}
/* conversation: the customer's screenshots in a row under the message */
.mrow{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.mrow.out{align-items:flex-end}
.mrow .bubble{max-width:82%;min-width:0}
.shots{display:flex;flex-wrap:wrap;gap:var(--sp-2);max-width:100%}
.shots a{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:var(--surface-2);box-shadow:var(--shadow-sm)}
.shots a:hover{border-color:var(--accent)}
.shots img{display:block;height:320px;width:auto;max-width:100%;object-fit:contain}
@media (max-width:700px){.mrow .bubble{max-width:100%}.shots img{height:200px}}
.sbox{display:flex;align-items:center;gap:4px;min-width:0}
.sarr{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;color:var(--text-2)!important;font-size:16px;line-height:1}
.sarr:hover{background:var(--seg);text-decoration:none}
.sfold{border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.sfold summary{cursor:pointer;padding:var(--sp-2) var(--sp-3);color:var(--text-2)}
.sfold summary .muted{font-size:var(--fs-xs)}
/* queue filters: one grid (label | group, three pairs per row) so labels and groups line up in columns;
   segments share their group's width evenly, text centred; status counts have fixed-width digits */
.fgrid{display:grid;grid-template-columns:repeat(3,max-content max-content);align-items:center;gap:10px 12px;margin-bottom:var(--sp-4)}
.fgrid nav.tabs{margin:0 16px 0 0;width:auto}
.fgrid .sfl{color:var(--muted);font-size:var(--fs-sm)}
.fgrid .fx{grid-column:span 2;display:flex;align-items:center;gap:12px}
nav.seg a{flex:1 1 0;justify-content:center;gap:6px;min-height:28px;padding:0 12px;font-size:var(--fs-sm)}
nav.seg-status a{min-width:7.5em}   /* fits "Closed 9999": counts never change the width */
.cnt{color:var(--muted);font-variant-numeric:tabular-nums}
nav.seg a.on .cnt{color:var(--text-2)}
.sreset{font-size:var(--fs-sm)}
.sfh{font-size:var(--fs-xs)}
@media (max-width:1100px){.fgrid{grid-template-columns:auto minmax(0,1fr);gap:8px 10px}.fgrid nav.tabs{margin:0;width:100%}.fgrid .fx{grid-column:1 / -1}}   /* three groups per row need ~1060 px */
@media (max-width:720px){nav.seg a{padding:0 6px}nav.seg-status a{min-width:0}
 nav.seg-source a{padding:0 4px;font-size:var(--fs-xs)}}   /* five sources fit a 320 px phone */
.sfold .fgrid{grid-template-columns:minmax(0,1fr);gap:4px;padding:0 var(--sp-3) var(--sp-3);margin:0}
.sfold .fgrid .sfl{margin-top:6px}
.sfold .fgrid nav.tabs{margin:0;width:100%;flex-wrap:wrap;overflow:visible}
.sfold nav.seg a{flex:1 1 auto;padding:0 8px;font-size:var(--fs-xs)}
.sfold nav.seg-status a{min-width:6em}
.sfold .fgrid .fx{grid-column:1;margin-top:6px}
/* Knowledge tab (Learned page) */
.ksrc{list-style:none;counter-reset:k;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2);margin:0 0 var(--sp-4);padding:0}
.ksrc li{counter-increment:k}
.ksrc a,.ksrc .ksrc-x{display:flex;flex-direction:column;gap:2px;height:100%;box-sizing:border-box;padding:var(--sp-3) var(--sp-3) var(--sp-3) 40px;position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);color:var(--text)}
.ksrc a:hover{border-color:var(--border-strong);text-decoration:none}
.ksrc a::before,.ksrc .ksrc-x::before{content:counter(k);position:absolute;left:12px;top:13px;width:20px;height:20px;border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent-text);font-size:var(--fs-xs);font-weight:600;display:flex;align-items:center;justify-content:center}
.ksrc b{font-weight:600;font-size:var(--fs-sm)}
.ksrc span span,.ksrc a span{color:var(--muted);font-size:var(--fs-xs)}
.kbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-4)}
.kbar input[type=search]{flex:1 1 280px;min-height:36px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:var(--fs-base) var(--font)}
.kdoc{padding:0}
.khead{padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.khead p{margin:2px 0 0;font-size:var(--fs-xs)}
.kdec{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.ktoc{padding:0 var(--sp-4) var(--sp-3)}
.ktoc .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ktoc .pill:hover{border-color:var(--border-strong);color:var(--text);text-decoration:none}
.kbody{padding:0 var(--sp-4) var(--sp-3);color:var(--text-2);font-size:var(--fs-sm);line-height:1.6;overflow-wrap:anywhere}
.kbody ul{margin:0 0 var(--sp-2);padding-left:20px}
.kbody li{margin:2px 0}
.kbody li::marker{color:var(--muted)}
.kbody h3{font-size:var(--fs-sm);font-weight:600;color:var(--text);margin:var(--sp-3) 0 var(--sp-1)}
.kbody strong{color:var(--text)}
.kintro{padding-top:var(--sp-1)}
.ksec,.kdoc{scroll-margin-top:72px}
.ksec{border-top:1px solid var(--border)}
.ksec>summary{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-4);cursor:pointer;list-style:none;font-weight:500;color:var(--text)}
.ksec>summary::-webkit-details-marker{display:none}
.ksec>summary::before{content:"";flex:none;width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;margin-right:4px}
.ksec[open]>summary::before{transform:rotate(45deg)}
.ksec>summary:hover{background:var(--surface-2)}
.ksec[open]>summary{background:var(--surface-2)}
.ksec[open]>.kbody{padding-top:var(--sp-3)}
.ksec:target>summary,.ksec.khit>summary{color:var(--accent-text)}
mark.kq{background:var(--warn-bg);color:inherit;border-radius:3px;padding:0 1px;box-shadow:0 0 0 1px var(--warn-bd)}
@media (max-width:720px){.ksec,.kdoc{scroll-margin-top:150px}}
@media (max-width:900px){.ksrc{grid-template-columns:repeat(2,minmax(0,1fr))}.ksrc a,.ksrc .ksrc-x{padding:var(--sp-2) var(--sp-2) var(--sp-2) 36px}.ksrc a::before,.ksrc .ksrc-x::before{left:10px;top:10px}}
