:root{
  --bg:#eef1f8;
  --bg2:#f7f8fc;
  --panel:#ffffff;
  --ink:#171d2b;
  --dim:#7b849b;
  --hair:#e6eaf3;
  --accent:#3a6fd8;
  --accentDk:#2f5cb5;
  --ready:#2c8264;
  --check:#b1780f;
  --write:#b04236;
  --soft:0 1px 2px rgba(23,29,43,.03), 0 10px 30px -14px rgba(23,29,43,.16);
  --softer:0 1px 2px rgba(23,29,43,.02), 0 4px 14px -8px rgba(23,29,43,.12);
  --pop:0 2px 6px rgba(23,29,43,.05), 0 18px 44px -18px rgba(23,29,43,.26);
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;
  background:
    radial-gradient(90% 70% at 8% 0%, #f6f4fb 0%, transparent 60%),
    radial-gradient(80% 80% at 100% 100%, #eaf0fb 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font:400 15px/1.55 "IBM Plex Sans",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:default}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#ccd3e3;border-radius:9px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ══════ sign in ══════ */
.gate{height:100%;display:grid;place-items:center;padding:24px}
.gatecard{
  width:360px;background:var(--panel);border-radius:18px;box-shadow:var(--pop);
  padding:34px 32px 28px;display:flex;flex-direction:column;
}
.gav{
  width:56px;height:56px;border-radius:50%;align-self:center;
  background:linear-gradient(150deg,#5b8ae8,#2f5cb5);color:#fff;
  display:grid;place-items:center;font-size:18px;font-weight:600;
  box-shadow:0 8px 20px -10px rgba(47,92,181,.7);margin-bottom:13px;
}
.gatecard b{align-self:center;font-size:20px;font-weight:600;letter-spacing:-.01em}
.gatecard small{align-self:center;color:var(--dim);font-size:12.5px;margin-bottom:20px}
.gatecard label{font-size:12px;font-weight:500;color:var(--dim);margin:12px 0 5px}
.gatecard input{
  border:1px solid var(--hair);background:var(--bg2);border-radius:11px;
  padding:11px 13px;font-size:14px;
}
.gatecard input:focus{outline:none;border-color:var(--accent);background:var(--panel);
  box-shadow:0 0 0 3px rgba(58,111,216,.13)}
.gatecard .btn{margin-top:22px;text-align:center}
.gateerr{font-size:13px;color:var(--write);background:color-mix(in srgb,var(--write) 8%,transparent);
  border-radius:11px;padding:10px 13px;margin:14px 0 0}
.gatefoot{font-size:11.5px;color:var(--dim);text-align:center;margin:20px 0 0;line-height:1.55}

/* ══════ shell ══════ */
.app{height:100%;display:grid;grid-template-columns:236px minmax(340px,404px) 1fr}

/* ── rail ── */
.rail{
  background:var(--panel);display:flex;flex-direction:column;
  padding:30px 20px 22px;border-right:1px solid var(--hair);
}
.you{display:flex;flex-direction:column;align-items:center;gap:11px;padding-bottom:28px}
.you .av{
  width:66px;height:66px;border-radius:50%;background:linear-gradient(150deg,#5b8ae8,#2f5cb5);
  color:#fff;display:grid;place-items:center;font-size:21px;font-weight:600;
  box-shadow:0 8px 20px -10px rgba(47,92,181,.7);
}
.you b{font-size:14.5px;font-weight:600}
.you small{color:var(--dim);font-size:12.5px;margin-top:-6px}

.nav{display:flex;flex-direction:column;gap:2px}
.nav button{
  display:flex;align-items:center;gap:12px;width:100%;
  border:0;background:none;text-align:left;
  padding:11px 13px;border-radius:9px;font-size:13.5px;position:relative;
  transition:background .12s;
}
.nav button:hover{background:#f4f6fb}
.nav button[aria-pressed="true"]{background:#eef3fd;color:var(--accentDk);font-weight:500}
.nav button[aria-pressed="true"]::before{
  content:"";position:absolute;left:-20px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--accent);
}
.ic{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.tally{margin-left:auto;font-size:12px;color:var(--dim);
  background:#f1f4fa;border-radius:20px;padding:1px 8px;min-width:24px;text-align:center}
.nav button[aria-pressed="true"] .tally{background:#dfe9fb;color:var(--accentDk)}
.railfoot{margin-top:auto;padding-top:18px;border-top:1px solid var(--hair);
  font-size:12px;color:var(--dim);line-height:1.5}
.railacts{display:flex;gap:14px;margin-top:11px}
.railacts button{background:none;border:0;padding:0;color:var(--dim);
  text-decoration:underline;font-size:12px}
.railacts button:hover{color:var(--ink)}

/* ── list column ── */
.mid{display:grid;grid-template-rows:auto auto 1fr;min-height:0;padding:26px 20px 18px}
.mid h1{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:0 0 3px}
.mid .sub{color:var(--dim);font-size:13px;margin:0 0 18px}
.seek{display:flex;gap:9px;margin-bottom:14px}
.seek label{flex:1;position:relative;display:flex;align-items:center}
.seek svg{position:absolute;left:13px;width:15px;height:15px;stroke:var(--dim);fill:none;stroke-width:1.8;pointer-events:none}
.seek input{
  width:100%;border:1px solid transparent;background:var(--panel);
  border-radius:11px;padding:11px 13px 11px 36px;font-size:13.5px;box-shadow:var(--softer);
}
.seek input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(58,111,216,.13)}
.sortbtn{border:1px solid transparent;background:var(--panel);border-radius:11px;
  padding:11px 14px;font-size:13.5px;box-shadow:var(--softer);color:var(--dim)}
.sortbtn:hover{color:var(--ink)}

.rows{overflow-y:auto;min-height:0;padding:2px 4px 30px;display:flex;flex-direction:column;gap:11px}

.tile{
  display:block;width:100%;text-align:left;border:1px solid transparent;
  background:var(--panel);border-radius:15px;padding:15px 17px;
  box-shadow:var(--softer);transition:box-shadow .15s,transform .15s;
}
.tile:hover{box-shadow:var(--soft);transform:translateY(-1px)}
.tile[aria-current="true"]{box-shadow:var(--pop);border-color:#d3e0f8;transform:translateY(-1px)}
.tile.settled{opacity:.5}
.t1{display:flex;align-items:center;gap:11px}
.t1 .av{width:38px;height:38px;border-radius:50%;flex:none;color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--av)}
.t1 b{font-size:14px;font-weight:600;display:block}
.t1 small{color:var(--dim);font-size:12px}
.ago{margin-left:auto;font-size:11.5px;color:var(--dim);flex:none;align-self:flex-start}
.tsub{font-size:13.5px;font-weight:500;margin:11px 0 4px}
.tprev{font-size:13px;color:var(--dim);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tfoot{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap}
.pill{font-size:11.5px;padding:3px 10px;border-radius:20px;font-weight:500;
  color:var(--b);background:color-mix(in srgb,var(--b) 11%,transparent)}
.pill.grey{color:var(--dim);background:#f1f4fa;font-weight:400}
.pill.warn{color:var(--write);background:color-mix(in srgb,var(--write) 11%,transparent)}
.louvre{display:flex;flex-direction:column-reverse;gap:2px;width:19px;margin-left:auto;flex:none}
.louvre i{height:2.5px;border-radius:1px;background:#dde3ef;display:block}
.louvre i.on{background:var(--b)}

/* ── thread ── */
.right{padding:26px 26px 26px 6px;min-height:0;display:flex}
.chat{
  flex:1;background:var(--panel);border-radius:18px;box-shadow:var(--soft);
  display:grid;grid-template-rows:auto 1fr auto;min-height:0;overflow:hidden;
}
.chead{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--hair)}
.chead .av{width:42px;height:42px;border-radius:50%;color:#fff;flex:none;
  display:grid;place-items:center;font-size:14px;font-weight:600;background:var(--av)}
.chead b{display:block;font-size:15px;font-weight:600}
.chead small{color:var(--dim);font-size:12.5px}
.chead .tag{margin-left:auto;text-align:right;font-size:12px;color:var(--dim);line-height:1.45}

.stream{overflow-y:auto;min-height:0;padding:24px 22px;display:flex;flex-direction:column;gap:16px;background:var(--bg2)}
.stamp{align-self:center;font-size:11.5px;color:var(--dim)}
.turn{display:flex;gap:10px;align-items:flex-end;max-width:76%}
.turn .av{width:30px;height:30px;border-radius:50%;flex:none;color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--av)}
.turn.them{align-self:flex-start}
.turn.us{align-self:flex-end;flex-direction:row-reverse}
.bub{padding:12px 16px;font-size:14px;line-height:1.6;white-space:pre-wrap;border-radius:16px}
.them .bub{background:var(--accent);color:#fff;border-bottom-left-radius:5px;
  box-shadow:0 6px 18px -10px rgba(58,111,216,.75)}
.us .bub{background:var(--panel);border:1px solid var(--hair);border-bottom-right-radius:5px}
.tm{font-size:11px;color:var(--dim);margin-top:6px;display:block}
.them .tm{color:rgba(255,255,255,.78)}
.sysline{align-self:center;font-size:12.5px;color:var(--dim);text-align:center;max-width:42em}

/* ── composer ── */
.comp{padding:16px 22px 18px;border-top:1px solid var(--hair)}
.verdict{display:flex;align-items:center;gap:11px;font-size:13px;margin-bottom:11px;flex-wrap:wrap}
.score{font-weight:600;font-size:13px;padding:4px 12px;border-radius:20px;color:#fff;background:var(--b)}
.verdict em{font-style:normal;color:var(--dim)}
.risknote{font-size:13px;color:var(--write);background:color-mix(in srgb,var(--write) 8%,transparent);
  border-radius:11px;padding:11px 14px;margin:0 0 11px}
.box{border:1px solid var(--hair);border-radius:15px;overflow:hidden;background:var(--panel);box-shadow:var(--softer)}
.box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(58,111,216,.11)}
.box textarea{width:100%;min-height:104px;max-height:250px;resize:vertical;border:0;
  padding:14px 17px;font-size:14px;line-height:1.62;display:block;background:none}
.box textarea:focus{outline:none}
.tools{display:flex;align-items:center;gap:9px;padding:10px 12px;border-top:1px solid var(--hair);flex-wrap:wrap}
.src{font-size:12px;color:var(--dim);margin-right:auto;max-width:44ch}
.btn{padding:9px 17px;border-radius:10px;border:1px solid var(--hair);background:var(--panel);font-size:13.5px}
.btn:hover{border-color:#c6d0e4}
.btn.go{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500;
  box-shadow:0 8px 20px -10px rgba(58,111,216,.85)}
.btn.go:hover{background:var(--accentDk)}
.why{font-size:11.5px;color:var(--dim);margin:10px 2px 0}
.settledbar{display:flex;align-items:center;gap:11px;font-size:14px;
  background:var(--bg2);border-radius:13px;padding:14px 17px}
.settledbar button{background:none;border:0;color:var(--dim);text-decoration:underline;font-size:12.5px;padding:0}

.blank{display:grid;place-items:center;text-align:center;color:var(--dim);padding:50px}
.blank p{max-width:32em;font-size:14px;line-height:1.7}
.blank b{display:block;color:var(--ink);font-size:17px;font-weight:600;margin-bottom:7px}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:13px;padding:10px 18px;border-radius:11px;
  box-shadow:var(--pop);z-index:50}

@media (max-width:1180px){
  .app{grid-template-columns:78px minmax(300px,360px) 1fr}
  .you b,.you small,.nav button span:not(.tally),.railfoot{display:none}
  .you .av{width:44px;height:44px;font-size:15px}
  .nav button{justify-content:center;padding:12px 0}
  .nav button[aria-pressed="true"]::before{left:-20px}
  .rail{padding:22px 12px}
}
@media (max-width:900px){
  html,body{overflow:auto}
  .app{grid-template-columns:1fr;height:auto}
  .rail{flex-direction:row;align-items:center;gap:14px;padding:12px 16px;border-right:0;border-bottom:1px solid var(--hair)}
  .you{padding:0}
  .nav{flex-direction:row;gap:4px;overflow-x:auto}
  .right{padding:0 14px 20px}
  .mid{padding:20px 14px 10px}
  .rows{max-height:none}
  .chat{min-height:70vh}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── layout corrections ──────────────────────────────────────
   .mid has four children (h1, .sub, .seek, .rows), so it needs
   four tracks. With only three, grid auto-created an implicit
   row, 1fr landed on .seek, and the tiles were pushed down. */
.mid{grid-template-rows:auto auto auto 1fr;overflow:hidden}
.rows{min-height:0;justify-content:flex-start}
.seek{align-items:center}
.seek label{min-width:0}
.sortbtn{flex:none;white-space:nowrap;align-self:center}

/* ── reply / private comment tabs ── */
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tab{border:1px solid var(--hair);background:var(--panel);border-radius:9px;
  padding:6px 13px;font-size:12.5px;color:var(--dim)}
.tab:hover{color:var(--ink);border-color:#c6d0e4}
.tab.on{background:#eef3fd;border-color:#cfe0f7;color:var(--accentDk);font-weight:500}

/* private composer takes an amber cast so it is never mistaken for a reply */
.box.private{border-color:#e8d3a8;background:#fffdf7}
.box.private:focus-within{border-color:#d1a23f;box-shadow:0 0 0 3px rgba(209,162,63,.15)}
.box.private textarea{background:none}

/* ── private notes in the stream ── */
.note{align-self:stretch;max-width:78%;margin:0 auto;background:#fffaf0;
  border:1px solid #ecdcb8;border-left:3px solid #d1a23f;border-radius:11px;
  padding:10px 13px;font-size:13px;display:block}
.note.ai{border-left-color:#7a6ee0;background:#faf9ff;border-color:#ddd8f5}
.nlabel{display:block;font-size:11px;font-weight:600;color:#8a6a1e;margin-bottom:3px}
.note.ai .nlabel{color:#5b4fc4}
.ntext{display:block;white-space:pre-wrap;color:var(--ink)}
.ntime{display:block;font-size:11px;color:var(--dim);margin-top:5px}

/* ── pass dialog ── */
.modal{position:fixed;inset:0;background:rgba(23,29,43,.42);
  display:grid;place-items:center;z-index:60;padding:20px}
.sheet{width:420px;max-width:100%;background:var(--panel);border-radius:16px;
  box-shadow:var(--pop);padding:24px 26px 20px}
.sheet b{font-size:17px;font-weight:600;display:block}
.sheet p{color:var(--dim);font-size:13px;margin:6px 0 16px}
.sheet label{display:block;font-size:12px;font-weight:500;color:var(--dim);margin:12px 0 5px}
.sheet input,.sheet textarea{width:100%;border:1px solid var(--hair);background:var(--bg2);
  border-radius:10px;padding:10px 12px;font-size:13.5px;resize:vertical}
.sheet input:focus,.sheet textarea:focus{outline:none;border-color:var(--accent);
  background:var(--panel);box-shadow:0 0 0 3px rgba(58,111,216,.13)}
.sheetfoot{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.sheeterr{color:var(--write);background:color-mix(in srgb,var(--write) 8%,transparent);
  border-radius:10px;padding:9px 12px;font-size:13px;margin:14px 0 0}

/* ── agent picker ── */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--hair);background:var(--bg2);border-radius:20px;
  padding:5px 12px;font-size:12.5px;color:var(--ink)}
.chip:hover{border-color:var(--accent);background:#eef3fd;color:var(--accentDk)}
.picker{border:1px solid var(--hair);border-radius:10px;background:var(--panel);
  box-shadow:var(--soft);margin-top:5px;max-height:210px;overflow-y:auto}
.prow{display:block;width:100%;text-align:left;border:0;background:none;
  padding:9px 13px;border-bottom:1px solid var(--hair)}
.prow:last-child{border-bottom:0}
.prow:hover{background:#eef3fd}
.prow b{display:block;font-size:13.5px;font-weight:500}
.prow small{color:var(--dim);font-size:12px}

/* ── passed and sent sections ── */
.navgap{height:1px;background:var(--hair);margin:10px 9px}
.tile.onward{opacity:1;border-left:3px solid #7a6ee0;border-radius:15px}
.pill.onward{color:#5b4fc4;background:rgba(122,110,224,.12);font-weight:500}
.pill.ai{color:#3d7a8c;background:rgba(61,122,140,.13);font-weight:500}
html[data-theme="dark"] .pill.ai{background:rgba(120,200,220,.20);color:#8fd4e4}

/* ── AI closure suggestion ── */
.closeprop{display:block;border:1px solid #bfe0cf;background:#f2fbf6;
  border-left:3px solid var(--ready);border-radius:11px;padding:12px 14px;margin:0 0 11px}
.cplabel{display:block;font-size:12px;font-weight:600;color:var(--ready);margin-bottom:3px}
.cpnote{display:block;font-size:13px;color:var(--ink)}
.cpacts{display:flex;justify-content:flex-end;gap:8px;margin-top:11px}
.closednote{font-size:12.5px;color:var(--dim);background:var(--bg2);
  border-radius:10px;padding:9px 13px;margin:0 0 11px}

/* ═══ density pass: everything about 20% tighter, macOS system font ═══ */

body{
  font:400 13px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
       system-ui, "Helvetica Neue", sans-serif;
  letter-spacing:-0.01em;
}
.gatecard b, .brand, .mid h1, .chead b, .blank b{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  letter-spacing:-0.02em;
}

/* shell */
.app{grid-template-columns:196px minmax(290px,340px) 1fr}
.rail{padding:22px 14px 16px}
.you{gap:8px;padding-bottom:20px}
.you .av{width:52px;height:52px;font-size:17px}
.you b{font-size:13px}
.you small{font-size:11.5px;margin-top:-5px}

.nav button{padding:7px 10px;font-size:12.5px;gap:9px;border-radius:7px}
.nav button[aria-pressed="true"]::before{left:-14px;height:18px}
.ic{width:15px;height:15px}
.tally{font-size:11px;padding:0 7px;min-width:21px}
.rail-title{margin:12px 6px 5px}
.navgap{margin:8px 7px}
.railfoot{padding-top:13px;font-size:11px}
.railacts{gap:12px;margin-top:8px}
.railacts button{font-size:11px}

/* list column */
.mid{padding:18px 14px 12px}
.mid h1{font-size:19px;margin:0 0 2px}
.mid .sub{font-size:12px;margin:0 0 13px}
.titlerow{display:flex;align-items:center;gap:9px}
.iconbtn{width:26px;height:26px;flex:none;display:grid;place-items:center;
  border:1px solid var(--hair);background:var(--panel);border-radius:8px;
  box-shadow:var(--softer);color:var(--dim);padding:0}
.iconbtn:hover{color:var(--accentDk);border-color:#c6d0e4}
.iconbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.iconbtn.spin svg{animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.seek{gap:7px;margin-bottom:11px}
.seek input{padding:8px 11px 8px 31px;font-size:12.5px;border-radius:9px}
.seek svg{left:11px;width:13px;height:13px}
.sortbtn{padding:8px 11px;font-size:12.5px;border-radius:9px}
.rows{gap:8px;padding:2px 3px 22px}

.tile{padding:11px 13px;border-radius:12px}
.t1{gap:9px}
.t1 .av{width:31px;height:31px;font-size:11px}
.t1 b{font-size:12.5px}
.t1 small{font-size:11px}
.ago{font-size:10.5px}
.tsub{font-size:12.5px;margin:8px 0 3px}
.tprev{font-size:12px}
.tfoot{gap:6px;margin-top:8px}
.pill{font-size:10.5px;padding:2px 8px}
.louvre{width:16px;gap:1.5px}
.louvre i{height:2px}

/* thread */
.right{padding:18px 18px 18px 4px}
.chat{border-radius:14px}
.chead{padding:12px 17px;gap:10px}
.chead .av{width:35px;height:35px;font-size:12px}
.chead b{font-size:13.5px}
.chead small{font-size:11.5px}
.chead .tag{font-size:11px}
.stream{padding:18px 17px;gap:12px}
.stamp{font-size:11px}
.turn{gap:8px;max-width:78%}
.turn .av{width:26px;height:26px;font-size:10px}
.bub{padding:9px 13px;font-size:12.5px;line-height:1.55;border-radius:13px}
.tm{font-size:10.5px;margin-top:4px}
.sysline{font-size:11.5px}
.note{padding:9px 12px;font-size:12px;border-radius:10px}
.nlabel{font-size:10.5px}
.ntime{font-size:10.5px;margin-top:4px}

/* composer */
.comp{padding:12px 17px 14px}
.verdict{gap:9px;font-size:12px;margin-bottom:9px}
.score{font-size:12px;padding:3px 10px}
.tabs{gap:5px;margin-bottom:8px}
.tab{padding:5px 11px;font-size:11.5px;border-radius:8px}
.box{border-radius:12px}
.box textarea{min-height:82px;max-height:210px;padding:11px 14px;font-size:12.5px;line-height:1.55}
.tools{padding:8px 10px;gap:7px}
.src{font-size:11px;max-width:42ch}
.btn{padding:7px 14px;font-size:12.5px;border-radius:9px}
.why{font-size:10.5px;margin-top:8px}
.risknote,.closednote{font-size:12px;padding:9px 12px;margin-bottom:9px;border-radius:10px}
.closeprop{padding:10px 12px;margin-bottom:9px;border-radius:10px}
.cplabel{font-size:11px}
.cpnote{font-size:12px}
.cpacts{margin-top:9px;gap:7px}
.settledbar{padding:11px 14px;font-size:12.5px;border-radius:11px}

.blank{padding:38px}
.blank p{font-size:12.5px}
.blank b{font-size:15px}

/* dialogs */
.sheet{width:380px;padding:20px 22px 17px;border-radius:14px}
.sheet b{font-size:15px}
.sheet p{font-size:12px;margin:5px 0 13px}
.sheet input,.sheet textarea{padding:8px 11px;font-size:12.5px;border-radius:9px}
.chip{padding:4px 11px;font-size:11.5px}
.prow{padding:8px 12px}
.prow b{font-size:12.5px}
.prow small{font-size:11px}
.toast{font-size:12px;padding:8px 15px}

/* ═══ dark mode ═══ */
:root{ color-scheme:light }
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1319;
  --bg2:#151a22;
  --panel:#1a212b;
  --ink:#e6ebf2;
  --dim:#8b96a8;
  --hair:#262f3c;
  --accent:#4d84e8;
  --accentDk:#6b9bf0;
  --ready:#3fae86;
  --check:#d3a13f;
  --write:#d9695c;
  --soft:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  --softer:0 1px 2px rgba(0,0,0,.24), 0 4px 14px -8px rgba(0,0,0,.45);
  --pop:0 2px 6px rgba(0,0,0,.35), 0 18px 44px -18px rgba(0,0,0,.7);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(90% 70% at 8% 0%, #171d28 0%, transparent 60%),
    radial-gradient(80% 80% at 100% 100%, #141c28 0%, transparent 55%),
    var(--bg);
}
html[data-theme="dark"] .nav button:hover,
html[data-theme="dark"] .fpill:hover{background:#212b38}
html[data-theme="dark"] .nav button[aria-pressed="true"],
html[data-theme="dark"] .fpill[aria-pressed="true"]{background:#1e2e47;color:#8fb6f5}
html[data-theme="dark"] .tally{background:#232d3b}
html[data-theme="dark"] .nav button[aria-pressed="true"] .tally,
html[data-theme="dark"] .fpill[aria-pressed="true"] .tally{background:#2a3f5e;color:#8fb6f5}
html[data-theme="dark"] .seek input,
html[data-theme="dark"] .gatecard input,
html[data-theme="dark"] .sheet input,
html[data-theme="dark"] .sheet textarea{background:#131922}
html[data-theme="dark"] .box textarea{color:var(--ink)}
html[data-theme="dark"] .tile[aria-current="true"]{border-color:#33465f;background:#1d2632}
html[data-theme="dark"] .louvre i{background:#2b3543}
html[data-theme="dark"] .note{background:#241f14;border-color:#3d3521;border-left-color:#b8892f}
html[data-theme="dark"] .note.ai{background:#1d1b2e;border-color:#2f2b47;border-left-color:#8a7ee8}
html[data-theme="dark"] .nlabel{color:#d0a44e}
html[data-theme="dark"] .note.ai .nlabel{color:#a094f0}
html[data-theme="dark"] .closeprop{background:#152620;border-color:#26443a}
html[data-theme="dark"] .box.private{background:#221e15;border-color:#3d3521}
html[data-theme="dark"] .toast{background:#2a3442}
html[data-theme="dark"] .modal{background:rgba(0,0,0,.6)}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2c3746}

/* ═══ motion ═══ */
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulseIn{0%{box-shadow:0 0 0 0 rgba(58,111,216,.45)}100%{box-shadow:0 0 0 12px rgba(58,111,216,0)}}
@keyframes slatUp{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bubbleIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.tile{animation:none}
.tile.fresh{animation:cardIn .22s cubic-bezier(.22,.7,.3,1) backwards}
.tile.fresh:nth-child(1){animation-delay:0ms}
.tile.fresh:nth-child(2){animation-delay:22ms}
.tile.fresh:nth-child(3){animation-delay:44ms}
.tile.fresh:nth-child(4){animation-delay:66ms}
.tile.fresh:nth-child(5){animation-delay:88ms}
.tile.fresh:nth-child(n+6){animation-delay:110ms}
.tile.changed{animation:pulseIn .9s ease-out}

.louvre i.on{transform-origin:left}
.tile.fresh .louvre i.on{animation:slatUp .3s cubic-bezier(.3,.8,.4,1) backwards}
.louvre i.on:nth-child(1){animation-delay:20ms}
.louvre i.on:nth-child(2){animation-delay:40ms}
.louvre i.on:nth-child(3){animation-delay:60ms}
.louvre i.on:nth-child(4){animation-delay:80ms}
.louvre i.on:nth-child(5){animation-delay:100ms}
.louvre i.on:nth-child(6){animation-delay:120ms}
.louvre i.on:nth-child(7){animation-delay:140ms}
.louvre i.on:nth-child(8){animation-delay:160ms}
.louvre i.on:nth-child(9){animation-delay:180ms}
.louvre i.on:nth-child(10){animation-delay:200ms}

.turn,.note{animation:bubbleIn .2s ease-out backwards}
.closeprop{animation:cardIn .25s cubic-bezier(.22,.7,.3,1) backwards}
.btn,.tab,.iconbtn,.fpill{transition:background .13s, border-color .13s, color .13s, transform .09s}
.btn:active,.iconbtn:active{transform:scale(.97)}
.score{transition:background .2s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ═══ filters as a pill row above the list ═══ */
.fpills{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 11px}
.fpills button{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--hair);background:var(--panel);color:var(--dim);
  border-radius:20px;padding:4px 10px;font-size:11.5px;box-shadow:var(--softer);
}
.fpills button:hover{color:var(--ink);border-color:#c6d0e4}
.fpills button[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500;
  box-shadow:0 5px 14px -8px rgba(58,111,216,.9);
}
.fpills .ic{width:12px;height:12px;opacity:.9}
.fpills .tally{margin-left:0;font-size:10.5px;background:rgba(0,0,0,.06);
  color:inherit;padding:0 6px;min-width:18px}
.fpills button[aria-pressed="true"] .tally{background:rgba(255,255,255,.22);color:#fff}
.fpills .navgap{display:none}
html[data-theme="dark"] .fpills .tally{background:rgba(255,255,255,.1)}

/* the rail loses its filter list, so give the avatar room */
.rail{justify-content:flex-start}
.gearbtn{
  display:flex;align-items:center;gap:9px;width:100%;
  border:0;background:none;text-align:left;color:var(--dim);
  padding:8px 10px;border-radius:8px;font-size:12.5px;
}
.gearbtn:hover{background:#f4f6fb;color:var(--ink)}
html[data-theme="dark"] .gearbtn:hover{background:#212b38}
.gearbtn svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ═══ settings sheet ═══ */
.setrow{display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--hair);font-size:12.5px}
.setrow:last-of-type{border-bottom:0}
.setrow b{display:block;font-size:12.5px;font-weight:500}
.setrow small{color:var(--dim);font-size:11px}
.seg{display:inline-flex;border:1px solid var(--hair);border-radius:9px;overflow:hidden}
.seg button{border:0;background:var(--panel);color:var(--dim);padding:5px 11px;font-size:11.5px}
.seg button.on{background:var(--accent);color:#fff;font-weight:500}
.keys{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:12px;margin-top:4px}
.keys kbd{font:500 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--bg2);border:1px solid var(--hair);border-bottom-width:2px;
  border-radius:5px;padding:2px 6px;color:var(--ink);justify-self:start}
.keys span{color:var(--dim);align-self:center}
.sheet h4{margin:16px 0 6px;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--dim);font-weight:600}

/* ═══ rail is just identity and settings now — shrink it right down ═══ */
.app{grid-template-columns:62px minmax(300px,360px) 1fr}
.rail{padding:18px 8px 14px;align-items:center}
.you{padding-bottom:0;gap:0}
.you .av{width:34px;height:34px;font-size:12px}
.you b,.you small{display:none}
.gearbtn{width:34px;height:34px;padding:0;justify-content:center;margin-top:auto;border-radius:9px}
.gearbtn span{display:none}
.gearbtn svg{width:16px;height:16px}
.railfoot{display:none}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{flex-direction:row;justify-content:space-between;padding:10px 14px}
  .gearbtn{margin-top:0}
}

/* gear sits just under the avatar, not pinned to the bottom */
.gearbtn{margin-top:10px}

/* pending send */
.turn.pending .bub,.note.pending{opacity:.55}
.turn.pending .bub{position:relative}

/* unread */
.tile{position:relative}
.tile .dot{position:absolute;top:11px;left:5px;width:6px;height:6px;border-radius:50%;
  background:#e5484d;box-shadow:0 0 0 3px color-mix(in srgb,#e5484d 18%,transparent)}
.tile.unread{border-color:#c9d8ef}
.tile.unread .tsub{font-weight:600}
html[data-theme="dark"] .tile.unread{border-color:#33465f}

/* ═══ glass ═══
   Blur on the surfaces you look past, never on the ones you read.
   Only four blurred layers, to keep scrolling smooth. */

body{
  background:
    radial-gradient(58% 42% at 12% -6%,  rgba(122,110,224,.16) 0%, transparent 62%),
    radial-gradient(52% 46% at 96% 8%,   rgba(58,111,216,.15)  0%, transparent 60%),
    radial-gradient(64% 52% at 78% 104%, rgba(44,130,100,.11)  0%, transparent 58%),
    linear-gradient(168deg, #f3f6fc 0%, #e9eef7 52%, #eef1f8 100%);
  background-attachment:fixed;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(58% 42% at 12% -6%,  rgba(122,110,224,.20) 0%, transparent 62%),
    radial-gradient(52% 46% at 96% 8%,   rgba(58,111,216,.17)  0%, transparent 60%),
    radial-gradient(64% 52% at 78% 104%, rgba(44,130,100,.13)  0%, transparent 58%),
    linear-gradient(168deg, #10151d 0%, #0d1218 52%, #111721 100%);
}

/* 1 — the rail */
.rail{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-right:1px solid rgba(255,255,255,.5);
  box-shadow:inset -1px 0 0 rgba(23,29,43,.045);
}
html[data-theme="dark"] .rail{
  background:rgba(26,33,43,.52);
  border-right-color:rgba(255,255,255,.06);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.3);
}

/* 2 — the chat shell */
.chat{
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%);
  border:1px solid rgba(255,255,255,.6);
}
html[data-theme="dark"] .chat{
  background:rgba(26,33,43,.58);
  border-color:rgba(255,255,255,.07);
}
.chead{background:transparent;border-bottom-color:rgba(23,29,43,.07)}
html[data-theme="dark"] .chead{border-bottom-color:rgba(255,255,255,.07)}
.stream{background:transparent}
.comp{background:transparent;border-top-color:rgba(23,29,43,.07)}
html[data-theme="dark"] .comp{border-top-color:rgba(255,255,255,.07)}

/* 3 — cards and pills: translucent, but no blur (too many of them) */
.tile{background:rgba(255,255,255,.74);border-color:rgba(255,255,255,.7)}
.tile:hover{background:rgba(255,255,255,.85)}
.tile[aria-current="true"]{background:rgba(255,255,255,.94);border-color:rgba(58,111,216,.35)}
html[data-theme="dark"] .tile{background:rgba(26,33,43,.66);border-color:rgba(255,255,255,.06)}
html[data-theme="dark"] .tile:hover{background:rgba(30,38,50,.8)}
html[data-theme="dark"] .tile[aria-current="true"]{background:rgba(32,42,58,.92);border-color:rgba(77,132,232,.45)}

.fpills button,.seek input,.sortbtn,.iconbtn{
  background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.65)
}
html[data-theme="dark"] .fpills button,
html[data-theme="dark"] .seek input,
html[data-theme="dark"] .sortbtn,
html[data-theme="dark"] .iconbtn{
  background:rgba(26,33,43,.6);border-color:rgba(255,255,255,.07)
}

/* 4 — anything you read stays opaque */
.bub,.note,.box,.settledbar,.closeprop,.risknote,.closednote{
  backdrop-filter:none;-webkit-backdrop-filter:none
}
.us .bub{background:var(--panel)}
.box{background:var(--panel)}
html[data-theme="dark"] .us .bub{background:#212a36}
html[data-theme="dark"] .box{background:#1e262f}
html[data-theme="dark"] .box textarea{background:transparent}

/* dialogs get the fourth blur */
.modal{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sheet{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(30px) saturate(160%);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
}
html[data-theme="dark"] .sheet{
  background:rgba(28,36,47,.92);border-color:rgba(255,255,255,.08)
}
.gatecard{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(30px) saturate(160%);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
}
html[data-theme="dark"] .gatecard{
  background:rgba(28,36,47,.85);border-color:rgba(255,255,255,.08)
}

/* if the browser can't blur, fall back to solid rather than washed out */
@supports not (backdrop-filter: blur(1px)){
  .rail,.chat,.sheet,.gatecard{background:var(--panel)}
  .tile{background:var(--panel)}
}

/* ═══ glass, second pass ═══ */

body{
  background:
    radial-gradient(50% 38% at 8% -8%,   rgba(122,110,224,.34) 0%, transparent 64%),
    radial-gradient(46% 40% at 98% 4%,   rgba(58,111,216,.30)  0%, transparent 62%),
    radial-gradient(56% 46% at 72% 108%, rgba(44,160,140,.24)  0%, transparent 60%),
    radial-gradient(40% 34% at 42% 46%,  rgba(224,110,170,.13) 0%, transparent 66%),
    linear-gradient(165deg, #eef2fb 0%, #e4eaf6 55%, #eaeef8 100%);
  background-attachment:fixed;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(50% 38% at 8% -8%,   rgba(122,110,224,.30) 0%, transparent 64%),
    radial-gradient(46% 40% at 98% 4%,   rgba(58,111,216,.26)  0%, transparent 62%),
    radial-gradient(56% 46% at 72% 108%, rgba(44,160,140,.20)  0%, transparent 60%),
    radial-gradient(40% 34% at 42% 46%,  rgba(224,110,170,.11) 0%, transparent 66%),
    linear-gradient(165deg, #0e131b 0%, #0b1016 55%, #0f151e 100%);
}

/* less blur, more saturation — keeps the colour alive underneath */
.rail{
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(16px) saturate(185%);
  -webkit-backdrop-filter:blur(16px) saturate(185%);
  border-right:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 1px 0 22px -12px rgba(23,29,43,.22);
}
.chat{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), var(--soft);
}
.tile{
  background:rgba(255,255,255,.62);
  border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--softer);
}
.tile:hover{background:rgba(255,255,255,.76)}
.tile[aria-current="true"]{
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--pop);
}
.fpills button,.seek input,.sortbtn,.iconbtn{
  background:rgba(255,255,255,.5);
  border-color:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--softer);
}
.sheet,.gatecard{
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), var(--pop);
}

html[data-theme="dark"] .rail{
  background:rgba(22,29,39,.44);
  border-right-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 1px 0 22px -12px rgba(0,0,0,.6);
}
html[data-theme="dark"] .chat{
  background:rgba(22,29,39,.5);
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), var(--soft);
}
html[data-theme="dark"] .tile{
  background:rgba(22,29,39,.56);
  border-color:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--softer);
}
html[data-theme="dark"] .tile:hover{background:rgba(28,37,49,.7)}
html[data-theme="dark"] .tile[aria-current="true"]{background:rgba(32,42,58,.86)}
html[data-theme="dark"] .fpills button,
html[data-theme="dark"] .seek input,
html[data-theme="dark"] .sortbtn,
html[data-theme="dark"] .iconbtn{
  background:rgba(22,29,39,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--softer);
}
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .gatecard{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--pop);
}

/* the bubbles can lift a little too */
.us .bub{box-shadow:inset 0 1px 0 rgba(255,255,255,.75), var(--softer)}
html[data-theme="dark"] .us .bub{box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--softer)}

/* ── composer fixes ── */
.box textarea{min-height:104px}
.src{
  max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.45;
}
.tools{flex-wrap:nowrap;align-items:flex-end}
.tools .btn{flex:none}

/* .mid children: titlerow, .sub, .fpills, .seek, .rows — five tracks, list takes the slack */
.mid{grid-template-rows:auto auto auto auto 1fr}
.rows{min-height:0;justify-content:flex-start}

/* ═══ collapsible filter ═══ */
.fpills{position:relative;display:block;margin:0 0 11px}

.ftoggle{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.5);
  border-radius:20px;padding:5px 11px;font-size:12px;color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--softer);
}
.ftoggle:hover{border-color:#c6d0e4}
.ftoggle.open{background:var(--accent);border-color:var(--accent);color:#fff}
.ftoggle .ic{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round}
.fcurrent{font-weight:500}
.ftoggle .tally{background:rgba(0,0,0,.06);color:inherit;font-size:10.5px;
  padding:0 6px;min-width:18px;margin-left:0}
.ftoggle.open .tally{background:rgba(255,255,255,.22)}
.ftoggle .chev{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  opacity:.6;transition:transform .16s}
.ftoggle.open .chev{transform:rotate(180deg);opacity:1}
html[data-theme="dark"] .ftoggle{
  background:rgba(22,29,39,.5);border-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--softer);
}
html[data-theme="dark"] .ftoggle .tally{background:rgba(255,255,255,.1)}
html[data-theme="dark"] .ftoggle.open{background:var(--accent);border-color:var(--accent)}

.fsheet{
  position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:216px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);border-radius:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), var(--pop);
  padding:5px;animation:cardIn .16s cubic-bezier(.22,.7,.3,1) backwards;
}
html[data-theme="dark"] .fsheet{
  background:rgba(28,36,47,.93);border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), var(--pop);
}
.frow{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:0;background:none;color:var(--ink);
  padding:7px 9px;border-radius:8px;font-size:12.5px;
}
.frow:hover{background:rgba(58,111,216,.09)}
html[data-theme="dark"] .frow:hover{background:rgba(77,132,232,.16)}
.frow.on{color:var(--accentDk);font-weight:500}
.frow .ic{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.flabel{flex:1}
.frow .tally{margin-left:0;font-size:10.5px;background:rgba(0,0,0,.06);
  color:var(--dim);padding:0 6px;min-width:18px}
html[data-theme="dark"] .frow .tally{background:rgba(255,255,255,.1)}
.frow .tick{width:13px;height:13px;flex:none;stroke:var(--accent);fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ═══ messages-app list behaviour ═══ */
.tile .dot{
  top:50%;left:4px;transform:translateY(-50%);
  width:7px;height:7px;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
}
.tile.unread{padding-left:16px}
.tile.unread .tsub{font-weight:600;color:var(--ink)}
.tile.unread .tprev{color:var(--ink);opacity:.82}
.tile.unread .t1 b{font-weight:700}
.tile.unread .ago{color:var(--accent);font-weight:500}
.tile.unread{border-color:rgba(58,111,216,.28)}
html[data-theme="dark"] .tile.unread{border-color:rgba(77,132,232,.34)}

.ago .chev{
  display:inline-block;width:5px;height:5px;margin-left:5px;
  border-right:1.6px solid var(--accent);border-top:1.6px solid var(--accent);
  transform:rotate(45deg);vertical-align:middle;
}

/* the preview is now the latest message, so give it room */
.tprev{-webkit-line-clamp:2}

/* ═══ filter: icon in the title row, sheet from the bottom ═══ */
.titlerow{gap:7px}
.filterbtn{margin-left:auto;position:relative}
.filterbtn.active{color:var(--accent);border-color:rgba(58,111,216,.4)}
.fdot{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px var(--panel)}
html[data-theme="dark"] .fdot{box-shadow:0 0 0 2px #1a212b}

/* the container is out of flow so it does not take a grid track */
.fpills{position:fixed;inset:0;pointer-events:none;margin:0;z-index:70}
.mid{grid-template-rows:auto auto auto 1fr}

.fscrim{
  position:absolute;inset:0;background:rgba(23,29,43,.32);
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.fscrim.on{opacity:1;pointer-events:auto}
html[data-theme="dark"] .fscrim{background:rgba(0,0,0,.5)}

.fsheet{
  position:absolute;left:50%;bottom:0;width:min(420px,calc(100% - 20px));
  transform:translate(-50%,105%);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:18px 18px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 -12px 44px -14px rgba(23,29,43,.4);
  padding:8px 10px 14px;
  pointer-events:none;opacity:0;
  transition:transform .3s cubic-bezier(.32,.72,0,1), opacity .2s ease;
}
.fsheet.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
html[data-theme="dark"] .fsheet{
  background:rgba(28,36,47,.94);border-color:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 -12px 44px -14px rgba(0,0,0,.8);
}

.fgrab{width:34px;height:4px;border-radius:4px;background:var(--hair);
  margin:2px auto 10px}
.fhead{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--dim);font-weight:600;padding:0 9px 6px}
.fcancel{
  width:100%;margin-top:8px;padding:10px;border:0;border-radius:11px;
  background:rgba(0,0,0,.045);color:var(--ink);font-size:13px;font-weight:500;
}
.fcancel:hover{background:rgba(0,0,0,.08)}
html[data-theme="dark"] .fcancel{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .fcancel:hover{background:rgba(255,255,255,.12)}
.fsheet .frow{padding:10px 9px;font-size:13px}

@media (prefers-reduced-motion:reduce){
  .fsheet{transition:opacity .12s}
  .fsheet.on{transform:translate(-50%,0)}
}

/* sheet positions against the viewport, not the container */
.fsheet{
  position:fixed;
  left:50%;
  bottom:0;
  top:auto;
  max-height:70vh;
  overflow-y:auto;
  z-index:80;
}
.fscrim{position:fixed;inset:0;z-index:75}

/* ═══ filter popover, anchored under the icon ═══ */
.fscrim{background:transparent}
html[data-theme="dark"] .fscrim{background:transparent}

.fsheet{
  position:fixed;left:auto;bottom:auto;top:0;
  width:224px;max-height:none;overflow:visible;
  border-radius:14px;padding:5px;
  transform:scale(.94);transform-origin:top right;
  background:rgba(252,252,254,.86);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 2px rgba(23,29,43,.08), 0 14px 40px -10px rgba(23,29,43,.28);
  transition:transform .16s cubic-bezier(.2,.9,.3,1), opacity .13s ease;
}
.fsheet.on{transform:scale(1)}
html[data-theme="dark"] .fsheet{
  background:rgba(38,46,58,.9);border-color:rgba(255,255,255,.1);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 40px -10px rgba(0,0,0,.75);
}

.fgrab,.fhead,.fcancel{display:none}

.fsheet .frow{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px 8px 6px;border-radius:9px;font-size:13.5px;
}
.fcheck{width:16px;flex:none;display:grid;place-items:center}
.fcheck svg{width:13px;height:13px;stroke:var(--accent);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fsheet .frow .ic{width:15px;height:15px;opacity:.75}
.fsheet .frow.on{font-weight:500}
.fsheet .frow:hover{background:rgba(0,0,0,.05)}
html[data-theme="dark"] .fsheet .frow:hover{background:rgba(255,255,255,.08)}
.fsheet .tally{background:transparent;color:var(--dim);font-size:12px;padding:0}

/* keep the popover hidden and in place while closed */
.fsheet{opacity:0;pointer-events:none;visibility:hidden}
.fsheet.on{opacity:1;pointer-events:auto;visibility:visible}

/* the scrim must not intercept clicks unless the popover is open */
.fscrim{pointer-events:none}
.fscrim.on{pointer-events:auto}
.fpills{pointer-events:none}
.fsheet.on,.fscrim.on{pointer-events:auto}

/* ═══ dark mode needs stronger colour: 11% tints vanish on a dark ground ═══ */
html[data-theme="dark"]{
  --ready:#4ecf9e;
  --check:#e8b74a;
  --write:#f0776a;
}
html[data-theme="dark"] .pill{
  background:color-mix(in srgb, var(--b) 22%, transparent);
  color:color-mix(in srgb, var(--b) 88%, #ffffff);
}
html[data-theme="dark"] .pill.warn{
  background:color-mix(in srgb, var(--write) 24%, transparent);
  color:#ff9b8f;
}
html[data-theme="dark"] .pill.grey{background:rgba(255,255,255,.09);color:var(--dim)}
html[data-theme="dark"] .pill.onward{background:rgba(122,110,224,.24);color:#a99ff5}
html[data-theme="dark"] .louvre i{background:rgba(255,255,255,.12)}
html[data-theme="dark"] .louvre i.on{background:var(--b);box-shadow:0 0 4px -1px var(--b)}
html[data-theme="dark"] .tile{border-left-width:3px}
html[data-theme="dark"] .score{color:#0f1319;font-weight:600}
html[data-theme="dark"] .band.ready{background:rgba(78,207,158,.18);color:#4ecf9e}
html[data-theme="dark"] .band.check{background:rgba(232,183,74,.18);color:#e8b74a}
html[data-theme="dark"] .band.write{background:rgba(240,119,106,.18);color:#f0776a}
html[data-theme="dark"] .risknote{background:rgba(240,119,106,.14);color:#ff9b8f}
html[data-theme="dark"] .closeprop{
  background:rgba(78,207,158,.11);border-color:rgba(78,207,158,.28);
  border-left-color:#4ecf9e;
}
html[data-theme="dark"] .cplabel{color:#4ecf9e}
html[data-theme="dark"] .verdict em{color:var(--dim)}
html[data-theme="dark"] .box.private{
  background:#241f14;border-color:#4a3f24;
}
html[data-theme="dark"] .note{
  background:#241f14;border-color:#4a3f24;border-left-color:#e0a94a;
}
html[data-theme="dark"] .nlabel{color:#e0a94a}
html[data-theme="dark"] .note.ai{
  background:#1e1b30;border-color:#37325a;border-left-color:#9b8ef5;
}
html[data-theme="dark"] .note.ai .nlabel{color:#a99ff5}
html[data-theme="dark"] .src,html[data-theme="dark"] .why{color:#8b96a8}
html[data-theme="dark"] .tprev{color:#8b96a8}

/* ═══ smooth the chat pane rebuild ═══
   renderChat replaces the whole innerHTML, which blanks for a frame. A short fade
   on the children hides the swap without slowing anything down. */
@keyframes paneIn{from{opacity:0}to{opacity:1}}
.chat>.chead,.chat>.stream,.chat>.comp{animation:paneIn .13s ease-out backwards}

/* the loading state gets a skeleton instead of a bare line */
.stream .loadbones{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.loadbone{
  height:38px;border-radius:13px;max-width:74%;
  background:linear-gradient(100deg,
    rgba(127,140,160,.10) 30%,
    rgba(127,140,160,.20) 48%,
    rgba(127,140,160,.10) 66%);
  background-size:240% 100%;
  animation:shimmer 1.1s linear infinite;
}
.loadbone.them{align-self:flex-start;width:58%}
.loadbone.us{align-self:flex-end;width:66%}
.loadbone.short{width:38%}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-20% 0}}
html[data-theme="dark"] .loadbone{
  background:linear-gradient(100deg,
    rgba(255,255,255,.05) 30%,
    rgba(255,255,255,.11) 48%,
    rgba(255,255,255,.05) 66%);
  background-size:240% 100%;
}
@media (prefers-reduced-motion:reduce){
  .loadbone{animation:none}
  .chat>.chead,.chat>.stream,.chat>.comp{animation:none}
}

/* One line under the composer, not two. The reason note is the useful one;
   the sources list is long and half of it is noise from loose KB matching. */
.src{display:none}
.tools{justify-content:flex-end}
.why{display:none}

/* keep the reason note, drop the sources line */
.why{display:block}
.src{display:none}

/* ═══ info flag on a sent AI reply ═══ */
.tflag{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;padding:0;margin-left:5px;vertical-align:-2px;
  border:0;background:none;color:var(--dim);position:relative;opacity:.7;
}
.tflag:hover,.tflag.open{opacity:1;color:var(--accent)}
.tflag svg{width:13px;height:13px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round}

.tflag::after{
  content:attr(data-note);
  position:absolute;bottom:calc(100% + 7px);right:-6px;
  width:max-content;max-width:250px;
  padding:7px 10px;border-radius:9px;
  background:#1f2a37;color:#fff;
  font-size:11.5px;font-weight:400;line-height:1.45;text-align:left;
  white-space:normal;box-shadow:var(--pop);
  opacity:0;pointer-events:none;transform:translateY(3px);
  transition:opacity .13s ease, transform .13s ease;
  z-index:40;
}
.tflag::before{
  content:"";position:absolute;bottom:calc(100% + 2px);right:1px;
  border:5px solid transparent;border-top-color:#1f2a37;
  opacity:0;transition:opacity .13s ease;z-index:41;
}
.tflag:hover::after,.tflag.open::after{opacity:1;transform:none}
.tflag:hover::before,.tflag.open::before{opacity:1}
html[data-theme="dark"] .tflag::after{background:#38424f}
html[data-theme="dark"] .tflag::before{border-top-color:#38424f}
/* each note on its own line in the tooltip */
.tflag::after{white-space:pre-line}

/* ═══ per-ticket AI switch ═══ */
.aisw{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:0}
.aisw:disabled{opacity:.5}
.aiswtrack{
  width:34px;height:20px;border-radius:20px;flex:none;position:relative;
  background:#cbd3e0;transition:background .2s cubic-bezier(.2,.8,.3,1);
  box-shadow:inset 0 1px 2px rgba(23,29,43,.14);
}
.aiswknob{
  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(23,29,43,.3);
  transition:transform .2s cubic-bezier(.2,.8,.3,1);
}
.aisw.on .aiswtrack{background:var(--ready)}
.aisw.on .aiswknob{transform:translateX(14px)}
.aiswlabel{font-size:11.5px;color:var(--dim);font-weight:500}
.aisw.on .aiswlabel{color:var(--ready)}
html[data-theme="dark"] .aiswtrack{background:#394453;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}

/* ═══ state-change banner ═══ */
.banner{
  position:fixed;top:18px;left:50%;transform:translate(-50%,-14px);
  display:flex;flex-direction:column;gap:1px;
  padding:11px 20px;border-radius:14px;z-index:90;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 40px -10px rgba(23,29,43,.34);
  opacity:0;pointer-events:none;text-align:center;
  transition:opacity .18s ease, transform .24s cubic-bezier(.2,.9,.3,1);
}
.banner.show{opacity:1;transform:translate(-50%,0)}
.banner b{font-size:13.5px;font-weight:600;color:var(--ink)}
.banner span{font-size:11.5px;color:var(--dim)}
.banner.pos b{color:var(--ready)}
.banner.warn b{color:var(--check)}
html[data-theme="dark"] .banner{
  background:rgba(32,40,52,.94);border-color:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 40px -10px rgba(0,0,0,.8);
}
@media (prefers-reduced-motion:reduce){.banner{transition:opacity .12s}}

/* ═══ global auto-send off strip ═══ */
.gaistrip{
  position:fixed;top:0;left:0;right:0;z-index:85;
  padding:6px 14px;text-align:center;
  font-size:11.5px;font-weight:500;letter-spacing:.01em;
  background:#8a6100;color:#fff;
  box-shadow:0 2px 10px -4px rgba(23,29,43,.4);
}
body:has(.gaistrip) .app{padding-top:26px}
html[data-theme="dark"] .gaistrip{background:#a37518}

/* ═══ AI settings button and popover ═══ */
.aibtn{
  display:inline-flex;align-items:center;gap:6px;position:relative;
  border:1px solid var(--hair);background:rgba(255,255,255,.5);
  border-radius:20px;padding:4px 11px;font-size:11.5px;color:var(--dim);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--softer);
}
.aibtn:hover{color:var(--ink);border-color:#c6d0e4}
.aibtn svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round}
.aibtn.muted{color:var(--check);border-color:rgba(177,120,15,.35)}
.aidot{width:5px;height:5px;border-radius:50%;background:var(--check)}
html[data-theme="dark"] .aibtn{
  background:rgba(22,29,39,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--softer);
}

.aisheet{
  position:fixed;top:0;left:0;width:276px;z-index:88;
  padding:9px;border-radius:14px;
  background:rgba(252,252,254,.9);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 2px rgba(23,29,43,.08), 0 14px 40px -10px rgba(23,29,43,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(.95);transform-origin:top left;
  transition:opacity .13s ease, transform .16s cubic-bezier(.2,.9,.3,1);
}
.aisheet.show{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}
html[data-theme="dark"] .aisheet{
  background:rgba(38,46,58,.93);border-color:rgba(255,255,255,.1);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 40px -10px rgba(0,0,0,.75);
}
.aihead{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--dim);font-weight:600;padding:2px 8px 7px}
.airow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 8px;border-radius:9px}
.airow:hover{background:rgba(0,0,0,.035)}
html[data-theme="dark"] .airow:hover{background:rgba(255,255,255,.05)}
.airow b{display:block;font-size:12.5px;font-weight:500;color:var(--ink)}
.airow small{display:block;font-size:10.5px;color:var(--dim);line-height:1.4;margin-top:1px}
.aiglobal{font-size:10.5px;color:var(--check);padding:8px;line-height:1.45;
  border-top:1px solid var(--hair);margin-top:4px}

/* ═══ Settings sheet: scrolling body, footer always visible ═══ */
.sheet.wide{
  display:flex;flex-direction:column;
  max-height:min(80vh,640px);
  padding:20px 0 0;
}
.sheet.wide > b,
.sheet.wide > p:first-of-type{padding:0 22px}
.sheet.wide > h4,
.sheet.wide > .setrow,
.sheet.wide > .keys,
.sheet.wide > div:not(.sheetfoot){padding-left:22px;padding-right:22px}
.sheet.wide > .setrow,
.sheet.wide > h4,
.sheet.wide > .keys{flex:none}

/* everything between the title and the footer scrolls */
.sheet.wide > h4,
.sheet.wide > .setrow,
.sheet.wide > .keys{overflow:visible}
.sheetfoot{
  margin-top:auto;flex:none;
  padding:14px 22px 18px;
  border-top:1px solid var(--hair);
  background:inherit;
}
.sheeterr{margin:0 22px 14px}

/* toggles instead of Off/On pairs */
.setsw{flex:none;margin-left:14px}
.setrow{align-items:center;gap:14px}
.setrow > span:first-child{min-width:0;flex:1}

/* ═══ Settings sheet, corrected: body scrolls, footer pinned ═══ */
.sheet.wide{
  display:flex;flex-direction:column;
  max-height:min(82vh,660px);
  padding:20px 0 0;
  overflow:hidden;
}
.sheet.wide > b{padding:0 22px;flex:none}
.sheet.wide > p{padding:0 22px;flex:none}
.setbody{
  flex:1;min-height:0;overflow-y:auto;
  padding:0 22px 6px;
  overscroll-behavior:contain;
}
.setbody::-webkit-scrollbar{width:7px}
.sheetfoot{
  flex:none;margin-top:0;
  padding:13px 22px 16px;
  border-top:1px solid var(--hair);
}
.sheeterr{margin:0 22px 12px;flex:none}
.setbody > h4:first-child{margin-top:0}

/* ═══ appearance variables, set from Settings ═══ */
:root{
  --bm-font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --bm-size:13px;
}
body{
  font-family:var(--bm-font);
  font-size:var(--bm-size);
}
.gatecard b, .brand, .mid h1, .chead b, .blank b, .banner b{font-family:var(--bm-font)}
.keys kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* the four size steps nudge the things that don't inherit cleanly */
html{--bm-scale:1}
.mid h1{font-size:calc(var(--bm-size) * 1.46)}
.bub{font-size:calc(var(--bm-size) * 0.96)}
.box textarea{font-size:calc(var(--bm-size) * 0.96);font-family:var(--bm-font)}
.tsub,.t1 b{font-size:calc(var(--bm-size) * 0.96)}
.tprev{font-size:calc(var(--bm-size) * 0.92)}

/* four-button segment needs a touch less padding */
#sizeSeg button,#fontSeg button{padding:5px 9px}

/* ═══ Settings: macOS-style two-pane ═══ */
.sheet.wide{width:min(660px,calc(100vw - 32px));max-height:min(78vh,540px);padding:0}
.setcols{display:grid;grid-template-columns:186px 1fr;flex:1;min-height:0}

.setnav{
  padding:16px 9px;border-right:1px solid var(--hair);
  overflow-y:auto;background:rgba(0,0,0,.018);
}
html[data-theme="dark"] .setnav{background:rgba(0,0,0,.15)}
.setnavhead{
  font-size:15px;font-weight:600;color:var(--ink);
  padding:2px 10px 14px;letter-spacing:-.01em;
}
.snav{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:0;background:none;color:var(--ink);
  padding:7px 10px;border-radius:8px;font-size:12.5px;margin-bottom:1px;
}
.snav:hover{background:rgba(0,0,0,.05)}
html[data-theme="dark"] .snav:hover{background:rgba(255,255,255,.06)}
.snav.on{background:var(--accent);color:#fff;font-weight:500}
.snav svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.snav.on svg{opacity:1}

.setpane{display:flex;flex-direction:column;min-height:0}
.setpanehead{
  padding:18px 24px 10px;font-size:16px;font-weight:600;
  color:var(--ink);letter-spacing:-.01em;flex:none;
}
.setpane .setbody{padding:0 24px 18px;flex:1;min-height:0;overflow-y:auto}
.setnote{
  font-size:11.5px;color:var(--dim);line-height:1.5;
  margin:14px 0 0;padding:0;
}
.sheet.wide .sheetfoot{padding:12px 20px 14px;border-top:1px solid var(--hair)}

@media (max-width:700px){
  .setcols{grid-template-columns:1fr}
  .setnav{
    display:flex;gap:5px;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--hair);padding:12px 10px;
  }
  .setnavhead{display:none}
  .snav{width:auto;flex:none;white-space:nowrap;border-radius:20px}
  .snav span{display:none}
  .snav svg{width:17px;height:17px}
}

/* ═══ writing tools ═══ */
.wtools{display:flex;align-items:center;gap:5px;margin:0 0 8px;flex-wrap:wrap}
.wt{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--hair);background:rgba(255,255,255,.5);
  border-radius:8px;padding:4px 9px;font-size:11.5px;color:var(--dim);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.wt:hover:not(:disabled){color:var(--accentDk);border-color:#c6d0e4;background:#fff}
.wt:disabled{opacity:.45}
.wt svg{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wtchev{width:10px;height:10px;opacity:.6}
.wtsep{width:1px;height:16px;background:var(--hair);margin:0 3px}
.wtnote{font-size:11px;color:var(--dim);margin-left:auto;max-width:32ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wtnote.bad{color:var(--write);font-weight:500;white-space:normal;max-width:44ch}
.wtools.busy .wt{opacity:.5}
html[data-theme="dark"] .wt{background:rgba(22,29,39,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .wt:hover:not(:disabled){background:rgba(30,40,54,.8)}

.tonemenu{
  position:fixed;top:0;left:0;width:228px;z-index:88;
  padding:5px;border-radius:12px;
  background:rgba(252,252,254,.9);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 2px rgba(23,29,43,.08), 0 12px 34px -10px rgba(23,29,43,.3);
  opacity:0;visibility:hidden;transform:scale(.95);transform-origin:top left;
  transition:opacity .12s ease, transform .15s cubic-bezier(.2,.9,.3,1);
}
.tonemenu.show{opacity:1;visibility:visible;transform:scale(1)}
.tonemenu button{
  display:block;width:100%;text-align:left;border:0;background:none;
  padding:7px 9px;border-radius:8px;color:var(--ink);
}
.tonemenu button:hover{background:rgba(58,111,216,.09)}
.tonemenu b{display:block;font-size:12.5px;font-weight:500}
.tonemenu small{display:block;font-size:10.5px;color:var(--dim);margin-top:1px}
html[data-theme="dark"] .tonemenu{
  background:rgba(38,46,58,.93);border-color:rgba(255,255,255,.1);
}
html[data-theme="dark"] .tonemenu button:hover{background:rgba(77,132,232,.16)}

/* ═══ writing tools, now inside the composer footer ═══ */
.tools{flex-wrap:wrap;align-items:center;gap:8px}
.wtools{
  display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;
  margin:0;flex:1;min-width:0;
}
.wt{padding:4px 8px;font-size:11px;border-radius:7px}
.wt svg{width:11px;height:11px}
.wtsep{display:none}
.wtnote{
  font-size:10.5px;margin-left:6px;max-width:26ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wtnote.bad{max-width:34ch;white-space:nowrap}
.tools .btn{flex:none}
/* grow from the bottom edge when it opens upwards */
.tonemenu.up{transform-origin:bottom left}

/* ═══ ticket header: links, owner badge, editable fields ═══ */
.cwho{min-width:0;flex:1}
.cwho small a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent}
.cwho small a:hover{color:var(--accent);border-bottom-color:currentColor}

.cmeta{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.clink{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:600;color:var(--accent);text-decoration:none;
}
.clink:hover{color:var(--accentDk)}
.clink svg{width:11px;height:11px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.8}

.cowner{font-size:10.5px;font-weight:500;padding:2px 8px;border-radius:20px}
.cowner.ai{background:rgba(122,110,224,.14);color:#5b4fc4}
.cowner.manual{background:rgba(0,0,0,.06);color:var(--dim)}
.cowner.warn{background:color-mix(in srgb,var(--check) 16%,transparent);color:var(--check)}
.cowner.onward{background:rgba(122,110,224,.14);color:#5b4fc4}
.cowner.done{background:color-mix(in srgb,var(--ready) 16%,transparent);color:var(--ready)}
html[data-theme="dark"] .cowner.ai,
html[data-theme="dark"] .cowner.onward{background:rgba(122,110,224,.24);color:#a99ff5}
html[data-theme="dark"] .cowner.manual{background:rgba(255,255,255,.09)}

.cbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 22px;border-bottom:1px solid var(--hair);
  background:rgba(0,0,0,.015);
}
html[data-theme="dark"] .cbar{background:rgba(0,0,0,.14)}
.cfield{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--dim)}
.cfield select,.cfield input{
  border:1px solid var(--hair);background:var(--panel);color:var(--ink);
  border-radius:7px;padding:3px 7px;font-size:11.5px;font-family:inherit;
  max-width:170px;
}
.cfield select:focus,.cfield input:focus{outline:none;border-color:var(--accent)}
.cfield select:disabled,.cfield input:disabled{opacity:.5}
.cwait{margin-left:auto;font-size:11px;color:var(--dim)}
html[data-theme="dark"] .cfield select,
html[data-theme="dark"] .cfield input{background:#1e262f}

/* ═══ composer: compact until you use it ═══ */
.comp{transition:padding .18s ease}
.comp.compact{padding-top:9px;padding-bottom:10px}

.comp.compact .box textarea{
  min-height:36px;
  padding-top:9px;padding-bottom:9px;
  transition:min-height .18s cubic-bezier(.2,.8,.3,1);
}
.box textarea{transition:min-height .18s cubic-bezier(.2,.8,.3,1)}

/* hide the scaffolding while collapsed — it comes back on focus */
.comp.compact .wtools,
.comp.compact .why,
.comp.compact .verdict em{display:none}
.comp.compact .tabs{margin-bottom:6px}
.comp.compact .tools{padding:6px 10px}
.comp.compact .verdict{margin-bottom:7px}

/* priority is the least-used field, so it goes at narrow widths */
@media (max-width:1180px){
  .cbar .cfield:nth-child(2){display:none}
}
.cbar{padding-top:6px;padding-bottom:6px;gap:12px}

/* ═══ thinking glow on the composer while the AI works ═══
   A conic gradient rotating behind the box, masked to the border only. */
@property --bmang{ syntax:'<angle>'; initial-value:0deg; inherits:false }

@keyframes bmspin{ to{ --bmang:360deg } }
@keyframes bmfade{ from{opacity:0} to{opacity:1} }

.box{position:relative;isolation:isolate}
.box::before{
  content:"";
  position:absolute;inset:-1.5px;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--bmang),
    #7a6ee0, #3a6fd8, #4ecf9e, #e8b74a, #e0768f, #7a6ee0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;pointer-events:none;z-index:1;
  transition:opacity .25s ease;
}
.box.thinking::before{
  opacity:1;
  animation:bmspin 1.6s linear infinite;
}
/* a soft bloom outside the edge, so it reads as light rather than a stroke */
.box::after{
  content:"";
  position:absolute;inset:-7px;
  border-radius:20px;
  background:conic-gradient(from var(--bmang),
    rgba(122,110,224,.45), rgba(58,111,216,.45), rgba(78,207,158,.4),
    rgba(232,183,74,.4), rgba(224,118,143,.45), rgba(122,110,224,.45));
  filter:blur(11px);
  opacity:0;pointer-events:none;z-index:0;
  transition:opacity .3s ease;
}
.box.thinking::after{
  opacity:.55;
  animation:bmspin 1.6s linear infinite;
}
html[data-theme="dark"] .box.thinking::after{opacity:.7}

/* the text itself dims very slightly while it's being worked on */
.box.thinking textarea{opacity:.72;transition:opacity .2s ease}

@supports not (background:conic-gradient(from 0deg,#000,#fff)){
  .box.thinking::before{background:var(--accent);animation:bmfade .3s ease}
  .box.thinking::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .box.thinking::before,.box.thinking::after{animation:none}
  .box.thinking::before{opacity:1}
}

/* ═══ ticket details: badge in the header, fields in a popover ═══ */
.cbar{display:none}
.cbadges{display:flex;align-items:center;gap:6px}

.cstat{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid transparent;border-radius:20px;
  padding:2px 8px;font-size:10.5px;font-weight:600;
}
.cstat .cchev{width:9px;height:9px;stroke:currentColor;fill:none;
  stroke-width:2.4;stroke-linecap:round;opacity:.65}
.cstat:hover .cchev{opacity:1}
.cpri{font-style:normal;font-weight:700;opacity:.85;
  padding-left:5px;margin-left:1px;border-left:1px solid currentColor}

.st-open{background:rgba(58,111,216,.14);color:var(--accent)}
.st-wait{background:color-mix(in srgb,var(--check) 16%,transparent);color:var(--check)}
.st-dev{background:rgba(122,110,224,.14);color:#5b4fc4}
.st-hot{background:color-mix(in srgb,var(--write) 16%,transparent);color:var(--write)}
.st-done{background:color-mix(in srgb,var(--ready) 16%,transparent);color:var(--ready)}
html[data-theme="dark"] .st-open{background:rgba(77,132,232,.22)}
html[data-theme="dark"] .st-dev{background:rgba(122,110,224,.24);color:#a99ff5}

.detsheet{
  position:fixed;top:0;left:0;width:252px;z-index:88;
  padding:8px;border-radius:13px;
  background:rgba(252,252,254,.9);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 2px rgba(23,29,43,.08), 0 12px 34px -10px rgba(23,29,43,.3);
  opacity:0;visibility:hidden;transform:scale(.95);transform-origin:top right;
  transition:opacity .12s ease, transform .15s cubic-bezier(.2,.9,.3,1);
}
.detsheet.show{opacity:1;visibility:visible;transform:scale(1)}
html[data-theme="dark"] .detsheet{
  background:rgba(38,46,58,.93);border-color:rgba(255,255,255,.1);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px -10px rgba(0,0,0,.75);
}
.dethead{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--dim);font-weight:600;padding:2px 7px 8px}
.detrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 7px;font-size:11.5px;color:var(--dim)}
.detrow select,.detrow input{
  border:1px solid var(--hair);background:var(--panel);color:var(--ink);
  border-radius:7px;padding:4px 7px;font-size:11.5px;font-family:inherit;
  max-width:148px;flex:none;
}
.detrow select:focus,.detrow input:focus{outline:none;border-color:var(--accent)}
.detrow select:disabled,.detrow input:disabled{opacity:.5}
html[data-theme="dark"] .detrow select,
html[data-theme="dark"] .detrow input{background:#1e262f}
.detfoot{font-size:10.5px;color:var(--dim);padding:8px 7px 2px;
  border-top:1px solid var(--hair);margin-top:5px}
/* waiting time beside the ticket number */
.crow{display:inline-flex;align-items:center;gap:8px}
.cwaited{font-size:10.5px;color:var(--dim);white-space:nowrap}
.detfoot{display:none}
/* grow from the bottom edge when it opens upwards */
.aisheet.up{transform-origin:bottom left}

/* ═══ the AI mark ═══ */
.aimark{display:block;flex:none}
.turn .av.avai{
  background:transparent;box-shadow:none;
  display:grid;place-items:center;
}
.aibtn .aimark{margin-right:1px}
.gav{background:transparent;box-shadow:none;display:grid;place-items:center}
.gav .aimark{width:34px;height:34px}

/* ═══ the mark as the loading state ═══
   Breathes and turns slowly. Reads as thinking rather than a spinner. */
.loadmark{
  display:grid;place-items:center;
  padding:44px 0 40px;
  animation:markIn .3s ease-out backwards;
}
@keyframes markIn{from{opacity:0}to{opacity:1}}
@keyframes markBreathe{
  0%   {transform:scale(.9) rotate(0deg);   opacity:.55}
  50%  {transform:scale(1.06) rotate(90deg);opacity:1}
  100% {transform:scale(.9) rotate(180deg); opacity:.55}
}
@keyframes markHalo{
  0%,100%{opacity:.18;transform:scale(.85)}
  50%    {opacity:.42;transform:scale(1.25)}
}
.loadmark{position:relative}
.loadmark::before{
  content:"";position:absolute;
  width:66px;height:66px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(139,124,240,.6) 0%,
    rgba(58,111,216,.35) 45%,
    transparent 72%);
  filter:blur(9px);
  animation:markHalo 2.1s ease-in-out infinite;
  pointer-events:none;
}
.aimark.spark{
  position:relative;z-index:1;
  animation:markBreathe 2.1s ease-in-out infinite;
}
.loadbones{display:none}

@media (prefers-reduced-motion:reduce){
  .aimark.spark,.loadmark::before{animation:none}
  .loadmark::before{opacity:.3}
}

/* ═══ sparkle instead of the rotating border ═══ */
.box::before,.box::after{display:none}
.box.thinking textarea{opacity:1}
.wtbusy{display:inline-flex;align-items:center;margin-left:2px}
.wtbusy .aimark.spark{animation:markBreathe 1.4s ease-in-out infinite}

/* ═══ iOS-style twelve-spoke spinner ═══ */
.loadmark::before{display:none}
.loadmark{padding:40px 0 36px}
.spin12{
  position:relative;display:block;width:26px;height:26px;
}
.spin12 i{
  position:absolute;left:50%;top:50%;
  width:2.4px;height:7px;border-radius:1.2px;
  background:var(--dim);
  transform-origin:50% 50%;
  transform:rotate(calc(var(--n) * 30deg)) translate(0,-9px);
  animation:spin12fade 1s linear infinite;
  animation-delay:calc(var(--n) * -0.0833s);
}
@keyframes spin12fade{
  0%   {opacity:1}
  100% {opacity:.15}
}
@media (prefers-reduced-motion:reduce){
  .spin12 i{animation:none;opacity:.45}
}

/* ═══ sign-in card ═══ */
.gate{position:relative;overflow:hidden}
.gatebloom{
  position:absolute;top:50%;left:50%;
  width:520px;height:520px;margin:-260px 0 0 -260px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,
    rgba(139,124,240,.32) 0%,
    rgba(58,111,216,.22) 38%,
    rgba(63,191,148,.14) 62%,
    transparent 74%);
  filter:blur(40px);
  animation:bloomDrift 14s ease-in-out infinite;
}
@keyframes bloomDrift{
  0%,100%{transform:scale(1) translate(0,0)}
  33%    {transform:scale(1.1) translate(22px,-16px)}
  66%    {transform:scale(.96) translate(-18px,14px)}
}
html[data-theme="dark"] .gatebloom{
  background:radial-gradient(circle,
    rgba(139,124,240,.4) 0%,
    rgba(58,111,216,.26) 38%,
    rgba(63,191,148,.16) 62%,
    transparent 74%);
}

.gatecard{position:relative;z-index:1;width:352px}
.gatecard b{font-size:19px;letter-spacing:-.02em}
.gatecard small{
  text-align:center;line-height:1.5;max-width:26ch;
  margin:3px auto 22px;
}
.gatefoot{margin-top:18px;font-size:10.5px;letter-spacing:.02em}

.pwwrap{position:relative;display:block}
.pwwrap input{width:100%;padding-right:38px}
.pweye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:grid;place-items:center;
  border:0;background:none;color:var(--dim);border-radius:7px;padding:0;
}
.pweye:hover{color:var(--ink);background:rgba(0,0,0,.04)}
.pweye.on{color:var(--accent)}
.pweye svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="dark"] .pweye:hover{background:rgba(255,255,255,.07)}

@media (prefers-reduced-motion:reduce){.gatebloom{animation:none}}

/* the browser adds its own reveal button — we have our own */
.pwwrap input::-ms-reveal,
.pwwrap input::-ms-clear{display:none}
.pwwrap input::-webkit-credentials-auto-fill-button{display:none!important}
.pwwrap input::-webkit-textfield-decoration-container{visibility:visible}

/* ═══ pull-to-refresh on the conversation ═══
   The thread lifts, a spinner sits in the gap, then it settles back. */
.stream{position:relative}
.stream::before{
  content:"";
  position:absolute;top:6px;left:50%;
  width:22px;height:22px;margin-left:-11px;
  border:2px solid var(--hair);
  border-top-color:var(--dim);
  border-radius:50%;
  opacity:0;pointer-events:none;
  transition:opacity .16s ease;
}
.stream.pulling::before{
  opacity:1;
  animation:pullspin .7s linear infinite;
}
@keyframes pullspin{to{transform:rotate(360deg)}}

.stream.pulling,
.stream.settling{
  transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.stream.pulling{transform:translateY(30px)}
.stream.settling{transform:translateY(0)}

/* the top of the thread fades under the spinner while it's lifted */
.stream.pulling > *:first-child{opacity:.45;transition:opacity .2s ease}

@media (prefers-reduced-motion:reduce){
  .stream.pulling,.stream.settling{transition:none;transform:none}
  .stream.pulling::before{animation:none}
}

/* the transition must exist before the class is added, or nothing animates */
.stream{
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  transform:translateY(0);
  will-change:transform;
}
.stream.pulling{transform:translateY(34px)}
.stream.settling{transform:translateY(0)}
.stream.pulling > *:first-child{opacity:1}
.stream::before{top:4px}

/* ═══ pull-to-refresh, corrected ═══
   The parent is overflow:hidden, so translating the whole pane just clips it.
   Animating padding opens a real gap inside the scroll area instead. */
.stream{
  transform:none!important;
  will-change:padding-top;
  transition:padding-top .28s cubic-bezier(.32,.72,0,1);
}
.stream.pulling{padding-top:52px}
.stream.settling{padding-top:18px}
.stream::before{top:14px}

/* ═══ verdict merged into the tabs row ═══ */
.tabs{align-items:center;flex-wrap:nowrap;margin-bottom:8px}
.tabmeta{
  display:inline-flex;align-items:center;gap:7px;
  margin-left:auto;min-width:0;
}
.tabmeta .score{font-size:11.5px;padding:2px 9px;flex:none}
.tabmeta em{
  font-style:normal;font-size:11px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tabmeta .pill.ai{flex:none}
.comp.compact .tabmeta em{display:none}

@media (max-width:1080px){
  .tabmeta em{display:none}
}
@media (max-width:900px){
  .tabs{flex-wrap:wrap}
  .tabmeta{margin-left:0;width:100%}
}

/* the mark beside the portal title */
.titlerow h1{display:inline-flex;align-items:center;gap:8px}
.aimark.titlemark{flex:none;margin-top:-1px}

/* the pass dialog is not the settings sheet — restore its own layout */
.sheet:not(.wide){
  display:block;
  padding:20px 22px 17px;
  max-height:none;
  overflow:visible;
}
.sheet:not(.wide) .sheetfoot{
  margin-top:20px;padding:0;border-top:0;background:none;
}
.sheet:not(.wide) .sheeterr{margin:14px 0 0}

/* confirm sheet */
.sheet.confirm{width:340px}
.sheet.confirm p{margin:7px 0 0;line-height:1.5}

/* ═══ thinking: rotating spectrum on the box edge, plus the sparkle ═══ */
@property --bmang{ syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes bmspin{ to{ --bmang:360deg } }

.box{position:relative;isolation:isolate}
.box::before,.box::after{display:block}

.box::before{
  content:"";
  position:absolute;inset:-1.5px;
  border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--bmang),
    #8b7cf0, #3a6fd8, #3fbf94, #e8b74a, #e0768f, #8b7cf0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;pointer-events:none;z-index:2;
  transition:opacity .22s ease;
}
.box.thinking::before{opacity:1;animation:bmspin 1.8s linear infinite}

.box::after{
  content:"";
  position:absolute;inset:-8px;
  border-radius:20px;
  background:conic-gradient(from var(--bmang),
    rgba(139,124,240,.5), rgba(58,111,216,.5), rgba(63,191,148,.42),
    rgba(232,183,74,.42), rgba(224,118,143,.5), rgba(139,124,240,.5));
  filter:blur(12px);
  opacity:0;pointer-events:none;z-index:0;
  transition:opacity .3s ease;
}
.box.thinking::after{opacity:.6;animation:bmspin 1.8s linear infinite}
html[data-theme="dark"] .box.thinking::after{opacity:.75}

.box.thinking textarea{opacity:.78;transition:opacity .2s ease}

@supports not (background:conic-gradient(from 0deg,#000,#fff)){
  .box.thinking::before{background:var(--accent)}
  .box.thinking::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .box.thinking::before,.box.thinking::after{animation:none}
  .box.thinking::before{opacity:1}
}

/* ═══ attachments ═══ */
.files{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.fchip{
  display:inline-flex;align-items:center;gap:7px;
  max-width:260px;text-decoration:none;
  background:rgba(255,255,255,.7);border:1px solid var(--hair);
  border-radius:9px;padding:6px 9px;
}
.fchip:hover{border-color:var(--accent);background:#fff}
.fkind{
  font-size:8.5px;font-weight:700;letter-spacing:.04em;
  background:var(--accent);color:#fff;
  border-radius:4px;padding:2px 4px;flex:none;
}
.fname{
  font-size:11.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fsize{font-size:10.5px;color:var(--dim);flex:none}
.them .fchip{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.5)}
.them .fname{color:#1f2a37}
html[data-theme="dark"] .fchip{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .fchip:hover{background:rgba(0,0,0,.34)}
html[data-theme="dark"] .fname{color:var(--ink)}
html[data-theme="dark"] .them .fchip{background:rgba(0,0,0,.28)}
html[data-theme="dark"] .them .fname{color:#e6ebf2}

.fimg{
  display:block;border-radius:9px;overflow:hidden;
  border:1px solid var(--hair);max-width:220px;line-height:0;
}
.fimg:hover{border-color:var(--accent)}
.fimg img{display:block;width:100%;height:auto;max-height:170px;object-fit:cover}

/* ═══ drafting indicator ═══ */
.tprev.drafting{
  display:flex;align-items:center;gap:6px;
  color:var(--accent);font-weight:500;
}
.tprev.drafting .aimark{flex:none}
.tprev.drafting .aimark.spark{animation:markBreathe 1.6s ease-in-out infinite}

.cowner.busy{
  background:rgba(122,110,224,.18);
  animation:ownerPulse 1.6s ease-in-out infinite;
}
@keyframes ownerPulse{0%,100%{opacity:.7}50%{opacity:1}}

.compdrafting{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;margin:0 0 8px;
  border:1px solid rgba(122,110,224,.28);
  background:rgba(122,110,224,.07);
  border-radius:11px;
  font-size:12px;color:#5b4fc4;font-weight:500;
}
.compdrafting .aimark.spark{animation:markBreathe 1.6s ease-in-out infinite;flex:none}
html[data-theme="dark"] .compdrafting{
  background:rgba(122,110,224,.13);border-color:rgba(122,110,224,.34);color:#a99ff5;
}

/* ═══ slower, calmer motion ═══ */
.tprev.drafting .aimark.spark,
.compdrafting .aimark.spark{
  animation:markBreathe 3.4s ease-in-out infinite;
}
.box.thinking::before,
.box.thinking::after{
  animation-duration:4s;
}
.wtbusy .aimark.spark{
  animation:markBreathe 2.6s ease-in-out infinite;
}
/* dates make the timestamp longer, so give it room */
.tm{white-space:normal}
.stamp{font-weight:500}

/* ═══ recipients ═══ */
.recip{margin:0 0 8px}
.reciptog{
  display:flex;align-items:center;gap:6px;width:100%;text-align:left;
  border:0;background:none;padding:3px 2px;color:var(--dim);font-size:11px;
}
.reciptog:hover{color:var(--ink)}
.recipsum{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recipchev{width:11px;height:11px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;opacity:.6;transition:transform .16s}
.recip.open .recipchev{transform:rotate(180deg);opacity:1}

.recipfields{display:none;padding:8px 0 2px}
.recip.open .recipfields{display:block;animation:cardIn .16s ease-out backwards}
.recipfields label{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.recipfields span{font-size:10.5px;color:var(--dim);width:28px;flex:none}
.recipfields input{
  flex:1;min-width:0;border:1px solid var(--hair);background:var(--panel);
  color:var(--ink);border-radius:7px;padding:4px 8px;font-size:11.5px;font-family:inherit;
}
.recipfields input:focus{outline:none;border-color:var(--accent)}
html[data-theme="dark"] .recipfields input{background:#1e262f}
.recipall{
  border:1px solid var(--hair);background:none;color:var(--accent);
  border-radius:7px;padding:4px 10px;font-size:11px;margin-top:3px;
}
.recipall:hover{border-color:var(--accent);background:rgba(58,111,216,.07)}
.comp.compact .recip{display:none}

/* ═══ recipients, second pass: a chip in the tools row ═══ */
.recip,.reciptog,.recipfields,.recipsum,.recipchev{display:none!important}

.wtrecip.on{color:var(--accent);border-color:rgba(58,111,216,.4);background:#fff}
html[data-theme="dark"] .wtrecip.on{background:rgba(30,40,54,.9)}

.recipsheet{
  display:none;
  padding:9px 11px;margin:0 0 8px;
  border:1px solid var(--hair);border-radius:11px;
  background:rgba(0,0,0,.02);
}
.recipsheet.open{display:block;animation:cardIn .16s ease-out backwards}
html[data-theme="dark"] .recipsheet{background:rgba(0,0,0,.16)}
.recipsheet label{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.recipsheet span{font-size:10.5px;color:var(--dim);width:26px;flex:none}
.recipsheet input{
  flex:1;min-width:0;border:1px solid var(--hair);background:var(--panel);
  color:var(--ink);border-radius:7px;padding:4px 8px;font-size:11.5px;font-family:inherit;
}
.recipsheet input:focus{outline:none;border-color:var(--accent)}
html[data-theme="dark"] .recipsheet input{background:#1e262f}
.recipall{
  border:1px solid var(--hair);background:none;color:var(--accent);
  border-radius:7px;padding:4px 10px;font-size:11px;margin-top:3px;
}
.recipall:hover{border-color:var(--accent);background:rgba(58,111,216,.07)}
.comp.compact .recipsheet{display:none!important}

/* ═══ sent tick on the tile preview ═══ */
.ttick{
  width:13px;height:9px;flex:none;vertical-align:-1px;margin-right:5px;
  stroke:var(--dim);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75;
}
.ttick.note{width:11px;height:11px;stroke:var(--check);opacity:.9}
.tile.unread .ttick{stroke:var(--accent);opacity:1}

/* ═══ the AI pane icon uses the sparkle, filled not stroked ═══ */
.snav[data-p="ai"] svg{fill:currentColor;stroke:none;opacity:.9}
.snav[data-p="ai"].on svg{fill:#fff}

/* ═══ tabs: readable in dark, and the private one reads as internal ═══ */
.tab{color:var(--ink);opacity:.62}
.tab:hover{opacity:1}
.tab.on{opacity:1}
html[data-theme="dark"] .tab{color:#c3ccda;opacity:.7}
html[data-theme="dark"] .tab.on{
  background:rgba(77,132,232,.22);border-color:rgba(77,132,232,.4);color:#8fb6f5;
}
.tab[data-m="comment"].on{
  background:rgba(224,169,74,.16);border-color:rgba(224,169,74,.42);color:#8a6100;
}
html[data-theme="dark"] .tab[data-m="comment"].on{
  background:rgba(224,169,74,.2);border-color:rgba(224,169,74,.44);color:#e0a94a;
}

/* ═══ dark mode: closer to true black, so OLED panels actually go dark ═══ */
html[data-theme="dark"]{
  --bg:#06080b;
  --bg2:#0b0e13;
  --panel:#12161d;
  --ink:#eef2f8;
  --dim:#8b96a8;
  --hair:#1e242e;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(48% 36% at 8% -8%,   rgba(122,110,224,.26) 0%, transparent 62%),
    radial-gradient(44% 38% at 98% 4%,   rgba(58,111,216,.22)  0%, transparent 60%),
    radial-gradient(54% 44% at 72% 108%, rgba(44,160,140,.16)  0%, transparent 58%),
    linear-gradient(168deg, #080b10 0%, #05070a 55%, #090c12 100%);
}
html[data-theme="dark"] .rail{background:rgba(12,16,22,.5)}
html[data-theme="dark"] .chat{background:rgba(14,18,25,.55)}
html[data-theme="dark"] .tile{background:rgba(15,19,26,.66)}
html[data-theme="dark"] .tile:hover{background:rgba(20,26,35,.82)}
html[data-theme="dark"] .tile[aria-current="true"]{background:rgba(24,32,44,.94)}
html[data-theme="dark"] .fpills button,
html[data-theme="dark"] .seek input,
html[data-theme="dark"] .sortbtn,
html[data-theme="dark"] .iconbtn,
html[data-theme="dark"] .aibtn{background:rgba(14,18,25,.6)}
html[data-theme="dark"] .box{background:#12161d}
html[data-theme="dark"] .box textarea{background:transparent;color:#eef2f8}
html[data-theme="dark"] .us .bub{background:#181f29}
html[data-theme="dark"] .cfield select,html[data-theme="dark"] .cfield input,
html[data-theme="dark"] .detrow select,html[data-theme="dark"] .detrow input,
html[data-theme="dark"] .recipsheet input{background:#0d1117}
html[data-theme="dark"] .sheet{background:rgba(18,23,31,.94)}
html[data-theme="dark"] .fsheet,
html[data-theme="dark"] .aisheet,
html[data-theme="dark"] .detsheet,
html[data-theme="dark"] .tonemenu{background:rgba(24,30,40,.94)}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#232b36}

/* the note marker is a word, not a glyph — the icon read as a smudge */
.ttick.note{display:none}
.tnote{
  display:inline-block;vertical-align:1px;margin-right:6px;
  font-size:9px;font-weight:600;letter-spacing:.03em;
  color:#8a6100;background:rgba(224,169,74,.18);
  border-radius:4px;padding:1px 5px;
}
html[data-theme="dark"] .tnote{color:#e0a94a;background:rgba(224,169,74,.2)}
.ttick{stroke-width:2.4;fill:none!important}

/* ═══ less chrome: typography instead of pills ═══ */

/* the score carries the band colour; the label lives in the tooltip */
.conf{
  display:inline-flex;align-items:baseline;gap:0;
  font-variant-numeric:tabular-nums;cursor:default;
}
.confnum{font-size:15px;font-weight:600;color:var(--b);letter-spacing:-.02em}
.confmax{font-size:10px;color:var(--dim);margin-left:1px}
.tabmeta .score,.tabmeta em:not(.edited),.tabmeta .pill.ai{display:none}
.edited{
  font-style:normal;font-size:10.5px;color:var(--dim);
  letter-spacing:.02em;margin-right:2px;
}

/* AI settings is the mark alone — the tooltip does the explaining */
.aibtn{padding:4px 7px;gap:0}
.aibtn span:not(.aidot){display:none}
.aidot{position:absolute;top:2px;right:2px}
.aibtn{position:relative}

/* owner reads as text, not a badge */
.cownert{font-size:10.5px;font-weight:500;letter-spacing:.01em}
.cownert.ai{color:#5b4fc4}
.cownert.manual{color:var(--dim)}
.cownert.warn{color:var(--check)}
.cownert.onward{color:#5b4fc4}
.cownert.done{color:var(--ready)}
.cownert.busy{color:#5b4fc4;animation:ownerPulse 3s ease-in-out infinite}
html[data-theme="dark"] .cownert.ai,
html[data-theme="dark"] .cownert.onward,
html[data-theme="dark"] .cownert.busy{color:#a99ff5}

.tabmeta{gap:9px}

/* ═══ customer mood: shown only when it is not calm ═══ */
.cmood,.tmood{
  font-size:10px;font-weight:600;letter-spacing:.02em;
  padding:1px 6px;border-radius:4px;
}
.cmood.unhappy,.tmood.unhappy{color:#8a6100;background:rgba(224,169,74,.16)}
.cmood.angry,.tmood.angry{color:var(--write);background:color-mix(in srgb,var(--write) 15%,transparent)}
html[data-theme="dark"] .cmood.unhappy,
html[data-theme="dark"] .tmood.unhappy{color:#e0a94a;background:rgba(224,169,74,.2)}
html[data-theme="dark"] .cmood.angry,
html[data-theme="dark"] .tmood.angry{color:#f0776a;background:rgba(240,119,106,.2)}

/* ═══════════════════════════════════════════════════════════
   Ticket list, second pass.
   Rows with hairlines rather than floating cards. The score is a
   coloured band, not a pill. Hierarchy comes from type and spacing.
   ═══════════════════════════════════════════════════════════ */

.rows{gap:0;padding:0 0 24px}

.tile{
  position:relative;display:flex;gap:10px;align-items:flex-start;
  width:100%;text-align:left;
  padding:10px 13px 11px 11px;
  margin:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;
  border-bottom:1px solid var(--hair);
  transition:background .12s;
}
.tile:hover{background:rgba(0,0,0,.028);box-shadow:none;transform:none}
.tile[aria-current="true"]{
  background:rgba(58,111,216,.1);box-shadow:none;transform:none;border-color:transparent;
}
.tile[aria-current="true"] + .tile{border-top-color:transparent}
html[data-theme="dark"] .tile{background:transparent}
html[data-theme="dark"] .tile:hover{background:rgba(255,255,255,.035)}
html[data-theme="dark"] .tile[aria-current="true"]{background:rgba(77,132,232,.16)}
.tile.settled{opacity:.62}
.tile.onward{opacity:1;border-left:0}

/* confidence as a quiet band down the left edge */
.tband{
  width:3px;flex:none;align-self:stretch;min-height:38px;
  border-radius:2px;background:var(--b);opacity:.85;
}
.tile.settled .tband{opacity:.4}

.tbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}

.trow1{display:flex;align-items:baseline;gap:8px}
.tfrom{
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tago{
  margin-left:auto;flex:none;
  font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums;
}

.trow2{display:flex;align-items:baseline;gap:7px}
.tsub{
  font-size:12.5px;font-weight:400;color:var(--ink);margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tnum{margin-left:auto;flex:none;font-size:10px;color:var(--dim);opacity:.75}

.tprev{
  font-size:11.5px;line-height:1.42;color:var(--dim);margin:1px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.tfoot{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.tmark{
  font-size:9.5px;font-weight:600;letter-spacing:.03em;
  padding:1px 6px;border-radius:4px;
}
.tmark.quiet{color:var(--dim);background:rgba(0,0,0,.05)}
.tmark.warn{color:var(--write);background:color-mix(in srgb,var(--write) 13%,transparent)}
.tmark.angry{color:var(--write);background:color-mix(in srgb,var(--write) 13%,transparent)}
.tmark.unhappy{color:#8a6100;background:rgba(224,169,74,.16)}
.tmark.onward{color:#5b4fc4;background:rgba(122,110,224,.13)}
html[data-theme="dark"] .tmark.quiet{color:var(--dim);background:rgba(255,255,255,.07)}
html[data-theme="dark"] .tmark.unhappy{color:#e0a94a;background:rgba(224,169,74,.18)}
html[data-theme="dark"] .tmark.angry,
html[data-theme="dark"] .tmark.warn{color:#f0776a;background:rgba(240,119,106,.18)}
html[data-theme="dark"] .tmark.onward{color:#a99ff5;background:rgba(122,110,224,.2)}

/* unread: weight, not decoration */
.tile.unread{padding-left:11px}
.tile.unread .dot{display:none}
.tile.unread .tfrom{font-weight:700}
.tile.unread .tsub{font-weight:600}
.tile.unread .tprev{color:var(--ink);opacity:.78}
.tile.unread .tago{color:var(--accent);font-weight:600}
.tile.unread .tband{opacity:1;width:3px}
.tile.unread::before{
  content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}
.tile.unread{padding-left:15px}

/* the old chrome has no place here */
.louvre,.t1,.tile .av,.ago .chev{display:none}
.tile.changed{animation:none;background:rgba(58,111,216,.06)}
html[data-theme="dark"] .tile.changed{background:rgba(77,132,232,.1)}

.tprev.drafting{color:var(--accent);font-weight:500;-webkit-line-clamp:1}
.tprev.drafting .aimark{vertical-align:-1px;display:inline-block;margin-right:5px}

/* ═══════════════════════════════════════════════════════════
   Second pass. Layered neutral surfaces, typography carrying the
   hierarchy, colour reserved for the few things that need it.
   ═══════════════════════════════════════════════════════════ */

/* ── surfaces: three distinct planes, not one flat dark ── */
html[data-theme="dark"]{
  --bg:#1b1d20;
  --bg2:#202327;
  --panel:#26292e;
  --ink:#f0f2f5;
  --dim:#8c93a0;
  --hair:#31353b;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(64% 46% at 14% -10%, rgba(122,110,224,.09) 0%, transparent 66%),
    radial-gradient(58% 44% at 96% 6%,  rgba(58,111,216,.07)  0%, transparent 64%),
    #17191c;
}
html[data-theme="dark"] .rail{
  background:rgba(19,21,24,.72);
  border-right-color:rgba(255,255,255,.05);
  box-shadow:none;
}
html[data-theme="dark"] .mid{background:transparent}
html[data-theme="dark"] .chat{
  background:#212429;
  border-color:rgba(255,255,255,.055);
  box-shadow:0 0 0 .5px rgba(0,0,0,.5), 0 18px 44px -22px rgba(0,0,0,.7);
}
html[data-theme="dark"] .stream{background:transparent}
html[data-theme="dark"] .chead{
  background:rgba(255,255,255,.018);
  border-bottom-color:rgba(255,255,255,.055);
}
html[data-theme="dark"] .comp{
  background:rgba(255,255,255,.022);
  border-top-color:rgba(255,255,255,.055);
}
html[data-theme="dark"] .box{
  background:#2a2e34;border-color:rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
html[data-theme="dark"] .us .bub{background:#2c3037;border-color:rgba(255,255,255,.05)}
html[data-theme="dark"] .tile:hover{background:rgba(255,255,255,.028)}
html[data-theme="dark"] .tile[aria-current="true"]{background:rgba(255,255,255,.075)}

/* ── list: whitespace instead of rules ── */
.rows{padding:0 8px 24px}
.tile{
  gap:0;padding:11px 12px 12px;
  margin-bottom:1px;border-bottom:0;border-radius:9px;
  transition:background .1s ease;
}
.tile:hover{background:rgba(0,0,0,.032)}
.tile[aria-current="true"]{background:rgba(0,0,0,.062);box-shadow:none}
.tband{display:none}
.tile.settled{opacity:.55}

/* ── typography does the work ── */
.tbody{gap:0}
.trow1{margin-bottom:1px}
.tfrom{font-size:13px;font-weight:600;letter-spacing:-.012em}
.tago{font-size:10.5px;color:var(--dim);opacity:.72;font-weight:400}
.tsub{
  font-size:12px;font-weight:400;color:var(--ink);opacity:.88;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-bottom:2px;
}
.trow2,.tnum{display:none}
.tprev{
  font-size:11.5px;line-height:1.45;color:var(--dim);opacity:.82;
  margin:0;-webkit-line-clamp:2;
}

/* ── AI state: one quiet line, not a badge ── */
.tmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-top:6px;font-size:10.5px;letter-spacing:.005em;
}
.tai{display:inline-flex;align-items:center;gap:4px;color:var(--dim);opacity:.85}
.tai .tsparkle{opacity:.75;flex:none}
.tai.ready{color:var(--ready);opacity:.9}
.tai.check{color:var(--check);opacity:.9}
.tai.write{color:var(--dim)}
.tflagtxt{color:var(--dim);opacity:.8}
.tflagtxt.warn{color:var(--write);opacity:.92}
.tflagtxt.soft{color:var(--check);opacity:.92}
.tfoot,.tmark{display:none}

/* ── unread: weight and one dot ── */
.tile.unread{padding-left:12px}
.tile.unread::before{left:3px;width:5px;height:5px}
.tile.unread .tfrom{font-weight:700}
.tile.unread .tsub{opacity:1;font-weight:500}
.tile.unread .tprev{opacity:.95}
.tile.unread .tago{color:var(--accent);opacity:1;font-weight:600}
.tile.changed{background:transparent}
html[data-theme="dark"] .tile.changed{background:transparent}

/* ── header: a conversation header, not a metadata strip ── */
.chead{padding:14px 20px}
.chead b{font-size:14px;letter-spacing:-.01em}
.chead small{font-size:11.5px;opacity:.8}
.clink{font-size:11px;font-weight:500;color:var(--dim)}
.clink:hover{color:var(--accent)}
.clink svg{opacity:.55}
.cwaited{font-size:10.5px;opacity:.7}
.cstat{
  background:transparent!important;border:0;padding:0;
  font-size:10.5px;font-weight:500;letter-spacing:.005em;
}
.cstat .cchev{opacity:.45}
.cstat:hover .cchev{opacity:.8}
.cpri{border-left:0;padding-left:4px;opacity:.7;font-weight:500}
.cmood{background:transparent!important;padding:0;font-weight:500;font-size:10.5px}
.cownert{font-weight:500}
.cmeta{gap:4px}
.cbadges{gap:9px}

/* ── composer: one calm surface ── */
.comp{padding:14px 20px 16px}
.box{
  border-radius:12px;
  box-shadow:0 1px 2px rgba(23,29,43,.04);
}
.box textarea{padding:13px 15px;line-height:1.55}
.tools{
  padding:7px 9px 8px;
  border-top-color:color-mix(in srgb,var(--hair) 60%,transparent);
}
.wt{
  border-color:transparent;background:transparent;
  box-shadow:none;color:var(--dim);font-size:11px;padding:4px 8px;
}
.wt:hover:not(:disabled){background:rgba(0,0,0,.05);border-color:transparent;color:var(--ink)}
html[data-theme="dark"] .wt{background:transparent;box-shadow:none}
html[data-theme="dark"] .wt:hover:not(:disabled){background:rgba(255,255,255,.07)}
.btn{border-color:color-mix(in srgb,var(--hair) 80%,transparent);font-weight:500}
.btn.go{box-shadow:0 1px 2px rgba(58,111,216,.3)}
.tabs{gap:4px}
.tab{border:0;background:transparent;padding:5px 10px}
.tab:hover{background:rgba(0,0,0,.045)}
html[data-theme="dark"] .tab:hover{background:rgba(255,255,255,.06)}
.confnum{font-size:14px;font-weight:600}
.aibtn{border-color:transparent;background:transparent;box-shadow:none}
.aibtn:hover{background:rgba(0,0,0,.05);border-color:transparent}
html[data-theme="dark"] .aibtn{background:transparent;box-shadow:none}
html[data-theme="dark"] .aibtn:hover{background:rgba(255,255,255,.07)}

/* ── search and sort: quieter ── */
.seek input,.sortbtn,.iconbtn,.fpills button,.ftoggle{
  box-shadow:none;border-color:color-mix(in srgb,var(--hair) 70%,transparent);
}
html[data-theme="dark"] .seek input,
html[data-theme="dark"] .sortbtn,
html[data-theme="dark"] .iconbtn,
html[data-theme="dark"] .ftoggle{
  background:rgba(255,255,255,.045);box-shadow:none;border-color:rgba(255,255,255,.06);
}

/* ── bubbles: less shadow, more surface ── */
.bub{box-shadow:none}
.them .bub{box-shadow:0 1px 2px rgba(58,111,216,.18)}
.us .bub{box-shadow:none;border-color:color-mix(in srgb,var(--hair) 70%,transparent)}

/* ═══ filter popover: a native menu, not an icon list ═══ */
.fsheet{width:238px;padding:6px}
.fsheet::before{
  content:"Filter";display:block;
  padding:5px 10px 8px;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim);opacity:.8;
}
.fsheet .frow{
  padding:6px 10px 6px 4px;gap:0;
  font-size:13px;font-weight:400;border-radius:6px;
}
.fsheet .frow .ic{display:none}
.fcheck{width:20px;flex:none;display:grid;place-items:center}
.fcheck svg{width:12px;height:12px;stroke:var(--accent);stroke-width:2.8}
.fsheet .frow.on{font-weight:500;color:var(--ink)}
.fsheet .flabel{flex:1;letter-spacing:-.005em}
.fsheet .tally{
  font-size:12px;color:var(--dim);opacity:.7;
  font-variant-numeric:tabular-nums;background:transparent;padding:0;min-width:20px;
  text-align:right;
}
.fsheet .frow.on .tally{opacity:.9}
.fsheet .frow:hover{background:rgba(0,0,0,.055)}
html[data-theme="dark"] .fsheet .frow:hover{background:rgba(255,255,255,.07)}

/* the ticket list was cutting previews short; the conversation has room to spare */
.app{grid-template-columns:62px minmax(340px,404px) 1fr}
@media (max-width:1180px){
  .app{grid-template-columns:62px minmax(316px,372px) 1fr}
}

/* ═══ filter counts: anchored to their row, not floating ═══ */
.fsheet .frow{
  display:grid;
  grid-template-columns:20px 1fr auto;
  align-items:center;
  column-gap:0;
  padding:5px 6px 5px 4px;
  min-height:30px;
}
.fsheet .flabel{
  justify-self:start;
  padding-right:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fsheet .tally{
  justify-self:end;align-self:center;
  min-width:22px;height:19px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 6px;border-radius:9.5px;
  font-size:11px;font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--dim);
  background:rgba(0,0,0,.055);
  text-align:center;
}
.fsheet .frow.on .tally{
  color:var(--ink);
  background:rgba(0,0,0,.085);
}
html[data-theme="dark"] .fsheet .tally{
  background:rgba(255,255,255,.07);color:var(--dim);
}
html[data-theme="dark"] .fsheet .frow.on .tally{
  background:rgba(255,255,255,.11);color:var(--ink);
}

/* ═══ AI context: the agent's briefing, not a footnote ═══ */
.why{display:none}
.ctx{
  margin:11px 0 0;padding:10px 13px 11px;
  border-radius:10px;
  background:rgba(0,0,0,.028);
}
html[data-theme="dark"] .ctx{background:rgba(255,255,255,.032)}

.ctxhead{
  display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);opacity:.85;margin-bottom:5px;
}
.ctxmark{opacity:.7;flex:none}

.ctxbody{
  margin:0;font-size:11.5px;line-height:1.5;color:var(--ink);opacity:.84;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ctx.open .ctxbody{-webkit-line-clamp:unset;display:block}

.ctxmore{
  display:inline-flex;align-items:center;gap:3px;
  border:0;background:none;padding:5px 0 0;
  font-size:10.5px;color:var(--dim);
}
.ctxmore:hover{color:var(--accent)}
.ctxmore svg{width:11px;height:11px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  opacity:.6;transition:transform .16s}
.ctx.open .ctxmore svg{transform:rotate(180deg);opacity:1}

.ctxextra{display:none;padding-top:8px;margin-top:7px;
  border-top:1px solid color-mix(in srgb,var(--hair) 70%,transparent)}
.ctx.open .ctxextra{display:block;animation:cardIn .16s ease-out backwards}
.ctxlabel{
  display:block;font-size:9.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim);opacity:.7;margin-bottom:3px;
}
.ctxsrc{display:block;font-size:11px;line-height:1.5;color:var(--dim)}

.comp.compact .ctx{display:none}

/* ═══ AI context: one quiet button, revealed on hover or tap ═══ */
.ctx{display:none}
.ctxwrap{position:relative;display:inline-block;margin-top:9px}

.ctxbtn{
  display:inline-flex;align-items:center;gap:5px;
  border:0;background:none;padding:2px 0;
  font-size:10.5px;letter-spacing:.02em;color:var(--dim);
}
.ctxbtn:hover{color:var(--accent)}
.ctxbtn .ctxmark{opacity:.7;flex:none}
.ctxbtn:hover .ctxmark{opacity:1}
.ctxwrap.open .ctxbtn{color:var(--accent)}

.ctxpop{
  position:absolute;bottom:calc(100% + 8px);left:0;
  width:min(390px,60vw);padding:11px 13px;
  border-radius:11px;
  background:rgba(252,252,254,.95);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 2px rgba(23,29,43,.08), 0 14px 36px -12px rgba(23,29,43,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(3px) scale(.98);transform-origin:bottom left;
  transition:opacity .13s ease, transform .16s cubic-bezier(.2,.9,.3,1);
  z-index:60;
}
.ctxwrap:hover .ctxpop,
.ctxwrap.open .ctxpop{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
}
html[data-theme="dark"] .ctxpop{
  background:rgba(40,45,53,.96);border-color:rgba(255,255,255,.09);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -12px rgba(0,0,0,.75);
}
.ctxpop .ctxbody{
  margin:0;font-size:11.5px;line-height:1.55;color:var(--ink);opacity:.9;
  display:block;-webkit-line-clamp:unset;
}
.ctxpop .ctxextra{
  display:block;padding-top:8px;margin-top:8px;
  border-top:1px solid color-mix(in srgb,var(--hair) 70%,transparent);
}
.comp.compact .ctxwrap{display:none}

/* ═══ AI context: one quiet button, revealed on hover or tap ═══ */
.ctx{display:none}
.ctxwrap{position:relative;display:inline-block;margin-top:9px}

.ctxbtn{
  display:inline-flex;align-items:center;gap:5px;
  border:0;background:none;padding:2px 0;
  font-size:10.5px;letter-spacing:.02em;color:var(--dim);
}
.ctxbtn:hover{color:var(--accent)}
.ctxbtn .ctxmark{opacity:.7;flex:none}
.ctxbtn:hover .ctxmark{opacity:1}
.ctxwrap.open .ctxbtn{color:var(--accent)}

.ctxpop{
  position:absolute;bottom:calc(100% + 8px);left:0;
  width:min(390px,60vw);padding:11px 13px;
  border-radius:11px;
  background:rgba(252,252,254,.95);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 2px rgba(23,29,43,.08), 0 14px 36px -12px rgba(23,29,43,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(3px) scale(.98);transform-origin:bottom left;
  transition:opacity .13s ease, transform .16s cubic-bezier(.2,.9,.3,1);
  z-index:60;
}
.ctxwrap:hover .ctxpop,
.ctxwrap.open .ctxpop{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
}
html[data-theme="dark"] .ctxpop{
  background:rgba(40,45,53,.96);border-color:rgba(255,255,255,.09);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -12px rgba(0,0,0,.75);
}
.ctxpop .ctxbody{
  margin:0;font-size:11.5px;line-height:1.55;color:var(--ink);opacity:.9;
  display:block;-webkit-line-clamp:unset;
}
.ctxpop .ctxextra{
  display:block;padding-top:8px;margin-top:8px;
  border-top:1px solid color-mix(in srgb,var(--hair) 70%,transparent);
}
.comp.compact .ctxwrap{display:none}

/* ═══ Quick Look ═══ */
.quicklook{
  position:fixed;top:0;left:0;z-index:70;
  width:min(360px,32vw);padding:13px 15px 14px;
  border-radius:12px;
  background:rgba(252,252,254,.96);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 2px rgba(23,29,43,.08), 0 18px 44px -14px rgba(23,29,43,.32);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-5px);
  transition:opacity .14s ease, transform .18s cubic-bezier(.2,.9,.3,1);
}
.quicklook.show{opacity:1;visibility:visible;transform:none}
html[data-theme="dark"] .quicklook{
  background:rgba(40,45,53,.97);border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 44px -14px rgba(0,0,0,.8);
}

.qlhead{display:flex;align-items:baseline;gap:8px}
.qlhead b{font-size:13px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.qlnum{margin-left:auto;font-size:10px;color:var(--dim);opacity:.7}
.qlsub{font-size:12px;color:var(--ink);opacity:.88;margin-top:1px}

.qlmeta{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:7px;font-size:10.5px;color:var(--dim);
}
.qlai{display:inline-flex;align-items:center;gap:4px}
.qlai.ready{color:var(--ready)}
.qlai.check{color:var(--check)}
.qlwarn{color:var(--write)}
.qlsoft{color:var(--check)}

.qllabel{
  font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim);opacity:.7;margin:11px 0 4px;
  padding-top:9px;border-top:1px solid color-mix(in srgb,var(--hair) 65%,transparent);
}
.qlbody{
  font-size:11.5px;line-height:1.55;color:var(--ink);opacity:.86;
  white-space:pre-wrap;
  display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;
}

@media (max-width:1100px){.quicklook{display:none}}
@media (prefers-reduced-motion:reduce){.quicklook{transition:opacity .1s}}

/* ═══ Quick Look: smoother, and it should not be doing layout work mid-transition ═══ */
.quicklook{
  will-change:opacity, transform;
  transform:translateX(-6px) scale(.985);
  transform-origin:left center;
  transition:opacity .18s cubic-bezier(.2,.8,.3,1),
             transform .22s cubic-bezier(.2,.9,.3,1);
  backface-visibility:hidden;
}
.quicklook.show{transform:translateX(0) scale(1)}

/* ═══ Settings and dialogs: match the new surface language ═══ */
html[data-theme="dark"] .sheet{
  background:rgba(38,41,46,.97);
  border-color:rgba(255,255,255,.07);
  box-shadow:0 0 0 .5px rgba(0,0,0,.55), 0 24px 60px -20px rgba(0,0,0,.8);
}
html[data-theme="dark"] .setnav{
  background:rgba(0,0,0,.16);
  border-right-color:rgba(255,255,255,.055);
}
html[data-theme="dark"] .sheetfoot{border-top-color:rgba(255,255,255,.055)}
html[data-theme="dark"] .setrow{border-bottom-color:rgba(255,255,255,.05)}
html[data-theme="dark"] .snav:hover{background:rgba(255,255,255,.055)}
html[data-theme="dark"] .keys kbd{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);
}
html[data-theme="dark"] .seg{border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .seg button{background:transparent;color:var(--dim)}
html[data-theme="dark"] .seg button.on{background:var(--accent);color:#fff}
html[data-theme="dark"] .modal{background:rgba(0,0,0,.45)}

html[data-theme="dark"] .fsheet,
html[data-theme="dark"] .aisheet,
html[data-theme="dark"] .detsheet,
html[data-theme="dark"] .tonemenu,
html[data-theme="dark"] .ctxpop,
html[data-theme="dark"] .quicklook{
  background:rgba(44,48,54,.97);
  border-color:rgba(255,255,255,.075);
  box-shadow:0 0 0 .5px rgba(0,0,0,.5), 0 18px 44px -16px rgba(0,0,0,.75);
}
html[data-theme="dark"] .gatecard{
  background:rgba(38,41,46,.9);border-color:rgba(255,255,255,.07);
}
html[data-theme="dark"] .banner{
  background:rgba(44,48,54,.97);border-color:rgba(255,255,255,.075);
}

/* sliding between rows is a move, not a new appearance */
.quicklook.moving{
  transition:top .24s cubic-bezier(.22,.8,.28,1),
             left .24s cubic-bezier(.22,.8,.28,1),
             opacity .12s ease;
}
.quicklook.show{transition:opacity .18s cubic-bezier(.2,.8,.3,1),
                            transform .22s cubic-bezier(.2,.9,.3,1)}
.quicklook > *{animation:qlFade .16s ease-out backwards}
@keyframes qlFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .quicklook.moving{transition:none}
  .quicklook > *{animation:none}
}

/* ═══ rewrite menu and the suggestion card ═══ */
.tonemenu{width:236px}
.tsep{display:block;height:1px;margin:5px 9px;
  background:color-mix(in srgb,var(--hair) 80%,transparent)}
.wtimprove{color:var(--accent)}
.wtimprove:hover:not(:disabled){color:var(--accentDk)}
.wtimprove .aimark{vertical-align:-2px;margin-right:1px}

.sugg{
  margin:0 0 10px;padding:11px 13px 12px;
  border-radius:11px;
  background:rgba(58,111,216,.055);
  border:1px solid rgba(58,111,216,.18);
  opacity:0;transform:translateY(-4px);
  transition:opacity .16s ease, transform .2s cubic-bezier(.2,.9,.3,1);
}
.sugg.show{opacity:1;transform:none}
html[data-theme="dark"] .sugg{
  background:rgba(77,132,232,.09);border-color:rgba(77,132,232,.24);
}
.sughead{
  display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);margin-bottom:5px;
}
.sugtext{margin:0;font-size:12px;line-height:1.5;color:var(--ink);opacity:.9}
.sugwarn{margin:7px 0 0;font-size:11px;line-height:1.45;color:var(--write);font-weight:500}
.sugacts{display:flex;justify-content:flex-end;gap:7px;margin-top:10px}
.sugacts .btn{padding:5px 13px;font-size:11.5px}
.comp.compact .sugg{display:none}
/* the status line fades between phrases rather than snapping */
.wtnote{transition:opacity .14s ease}

/* ═══ thinking: the edge alone, no outer bloom ═══ */
.box.thinking::after,
.box::after{display:none!important}

.box.thinking::before{
  inset:-1.5px;
  padding:2px;
  opacity:1;
  filter:saturate(140%);
  animation:bmspin 3.2s linear infinite;
}
.box.thinking textarea{opacity:1}

/* thicker band, a touch brighter */
.box.thinking::before{
  inset:-2.5px;
  padding:3px;
  filter:saturate(165%) brightness(1.08);
}

/* ═══ focus mode ═══ */
.app{transition:grid-template-columns .3s cubic-bezier(.32,.72,0,1)}
body.focusmode .app{grid-template-columns:0 0 1fr}
body.focusmode .rail,
body.focusmode .mid{
  opacity:0;pointer-events:none;overflow:hidden;
  transition:opacity .16s ease;
}
body.focusmode .right{padding:18px}
body.focusmode .chat{max-width:1020px;margin:0 auto;width:100%}

.focusout{
  position:fixed;top:14px;right:16px;z-index:78;
  width:30px;height:30px;display:grid;place-items:center;
  border:.5px solid rgba(0,0,0,.09);border-radius:9px;
  background:rgba(250,250,252,.82);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  color:var(--dim);padding:0;
  box-shadow:0 2px 10px -4px rgba(23,29,43,.25);
  animation:cardIn .22s ease-out backwards;
}
.focusout:hover{color:var(--ink)}
.focusout svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="dark"] .focusout{
  background:rgba(48,52,59,.85);border-color:rgba(255,255,255,.09);
}
@media (prefers-reduced-motion:reduce){
  .app,body.focusmode .rail,body.focusmode .mid{transition:none}
}

/* ═══ measurements read from the ticket ═══ */
.specs{
  margin:0 0 10px;padding:10px 12px 9px;
  border-radius:10px;
  background:rgba(0,0,0,.028);
}
html[data-theme="dark"] .specs{background:rgba(255,255,255,.035)}
.specshead{
  font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);opacity:.85;margin-bottom:7px;
}
.spectbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.spectbl th{
  font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim);opacity:.7;text-align:right;padding:0 0 4px 10px;
}
.spectbl th:first-child{text-align:left;padding-left:0}
.spectbl td{
  font-size:12px;color:var(--ink);text-align:right;
  padding:3px 0 3px 10px;
  border-top:1px solid color-mix(in srgb,var(--hair) 55%,transparent);
}
.spectbl tr:first-child td{border-top:0}
.spclabel{
  text-align:left!important;padding-left:0!important;
  color:var(--ink);opacity:.85;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.spectbl i{font-style:normal;font-size:9.5px;color:var(--dim);margin-left:1px}
.spcnull{color:var(--dim);opacity:.5}
.spcextra td{
  text-align:left!important;padding:2px 0 5px!important;border-top:0!important;
  font-size:10.5px;color:var(--dim);
}
.spcfab{margin-right:9px}
.spcnote{color:var(--check)}
.spcfoot{
  font-size:9.5px;color:var(--dim);opacity:.7;margin-top:7px;
  padding-top:6px;border-top:1px solid color-mix(in srgb,var(--hair) 55%,transparent);
}
.comp.compact .specs{display:none}

/* ═══ measurements: a chip that opens on hover, like AI context ═══ */
.specs{display:none}
.specwrap{position:relative;display:inline-block;margin:0 12px 0 0;vertical-align:middle}

.specbtn{
  display:inline-flex;align-items:center;gap:5px;
  border:0;background:none;padding:2px 0;
  font-size:10.5px;letter-spacing:.02em;color:var(--dim);
}
.specbtn:hover{color:var(--accent)}
.specbtn svg{
  width:13px;height:13px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.7;
}
.specbtn:hover svg{opacity:1}
.specwrap.open .specbtn{color:var(--accent)}

.specpop{
  position:absolute;bottom:calc(100% + 8px);left:0;
  width:max-content;min-width:280px;max-width:min(440px,64vw);
  padding:11px 13px;border-radius:11px;
  background:rgba(252,252,254,.95);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:.5px solid rgba(0,0,0,.09);
  box-shadow:0 1px 2px rgba(23,29,43,.08), 0 14px 36px -12px rgba(23,29,43,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(3px) scale(.98);transform-origin:bottom left;
  transition:opacity .13s ease, transform .16s cubic-bezier(.2,.9,.3,1);
  z-index:62;
}
.specwrap:hover .specpop,
.specwrap.open .specpop{opacity:1;visibility:visible;pointer-events:auto;transform:none}
html[data-theme="dark"] .specpop{
  background:rgba(44,48,54,.97);border-color:rgba(255,255,255,.09);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -12px rgba(0,0,0,.75);
}
.specpop .specshead{
  font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);opacity:.85;margin-bottom:7px;
}
.comp.compact .specwrap{display:none}

/* thicker thinking band */
.box.thinking::before{
  inset:-4px;
  padding:4.5px;
  filter:saturate(175%) brightness(1.1);
}

/* 4.5px was past the point where the mask has anything to show */
.box.thinking::before{
  inset:-3px;
  padding:3.5px;
  filter:saturate(170%) brightness(1.08);
}

/* ═══ thinking glow, rebuilt ═══
   The masked-border approach collapsed once the band got thick. This paints a
   rotating gradient behind the box and lets the box itself cover the middle,
   so the visible ring is just however far it extends past the edges. */
.box.thinking::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:18px;
  padding:0;
  background:conic-gradient(from var(--bmang),
    #8b7cf0, #3a6fd8, #3fbf94, #e8b74a, #e0768f, #8b7cf0);
  -webkit-mask:none;
  mask:none;
  filter:blur(3px) saturate(180%);
  opacity:1;
  z-index:-1;
  animation:bmspin 3.2s linear infinite;
}
.box.thinking{
  position:relative;
  isolation:auto;
  background:var(--panel);
  z-index:0;
}
html[data-theme="dark"] .box.thinking{background:#2a2e34}
.box.thinking::after{display:none!important}
.box.thinking textarea{opacity:1;position:relative;z-index:1}

/* ═══ back to a masked border ring, just thicker ═══
   The mask needs inset smaller in magnitude than padding, or the ring collapses.
   inset -3px with 3px padding gives a 3px band sitting on the edge. */
.box.thinking::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  padding:3px;
  background:conic-gradient(from var(--bmang),
    #8b7cf0, #3a6fd8, #3fbf94, #e8b74a, #e0768f, #8b7cf0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  filter:saturate(175%) brightness(1.06);
  opacity:1;
  z-index:2;
  pointer-events:none;
  animation:bmspin 3.2s linear infinite;
}
.box.thinking{background:var(--panel);isolation:isolate}
html[data-theme="dark"] .box.thinking{background:#2a2e34}
.box.thinking::after{display:none!important}
.box.thinking textarea{opacity:1}

/* The ring renders but sits under the textarea. Lift it above, and let it
   overflow the box rather than being clipped by it. */
.box{overflow:visible}
.box.thinking{isolation:auto;overflow:visible}
.box.thinking::before{z-index:5}
.box.thinking textarea{position:relative;z-index:1;background:transparent}
.box.thinking .tools{position:relative;z-index:2}

/* ═══ ticket rows: let the groups breathe ═══
   Name and time, then subject, then the preview, then the AI line — each with
   real space between rather than stacked flat. */
.tile{padding:12px 12px 13px}
.tbody{gap:0}

.trow1{margin-bottom:2px}
.tfrom{font-size:13px;font-weight:600;letter-spacing:-.012em}

.tsub{
  font-size:12px;font-weight:400;
  color:var(--ink);opacity:.82;
  margin:0 0 7px;
}

.tprev{
  position:relative;
  font-size:11.5px;line-height:1.5;
  color:var(--dim);opacity:.78;
  margin:0;
  -webkit-line-clamp:2;
}

/* a soft fade on the second line reads better than a hard ellipsis */
.tprev::after{
  content:"";
  position:absolute;right:0;bottom:0;
  width:38%;height:1.5em;
  background:linear-gradient(90deg,transparent,var(--tilebg,transparent) 72%);
  pointer-events:none;
}

.tmeta{margin-top:9px;gap:10px}
.tai{font-size:10.5px}

.tile.unread .tsub{opacity:.95;font-weight:500}

/* ═══ customer info popover ═══ */
.cnamebtn{border:0;background:none;padding:0;cursor:pointer;text-align:left}
.cnamebtn b{border-bottom:1px dashed transparent}
.cnamebtn:hover b{border-bottom-color:var(--dim)}

.custpop{
  position:fixed;top:0;left:0;width:236px;z-index:88;
  padding:13px 15px 12px;border-radius:12px;
  background:rgba(252,252,254,.96);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:.5px solid rgba(0,0,0,.09);
  box-shadow:0 1px 2px rgba(23,29,43,.08), 0 16px 40px -14px rgba(23,29,43,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(3px) scale(.98);transform-origin:top left;
  transition:opacity .13s ease, transform .16s cubic-bezier(.2,.9,.3,1);
}
.custpop.show{opacity:1;visibility:visible;pointer-events:auto;transform:none}
html[data-theme="dark"] .custpop{
  background:rgba(44,48,54,.97);border-color:rgba(255,255,255,.09);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -14px rgba(0,0,0,.75);
}

.custload{font-size:12px;color:var(--dim)}
.custhead{margin-bottom:9px}
.custhead b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.custhead small{display:block;font-size:11px;color:var(--dim);margin-top:1px}

.custrow{
  display:flex;align-items:baseline;gap:6px;
  margin-bottom:8px;padding-bottom:9px;
  border-bottom:1px solid color-mix(in srgb,var(--hair) 60%,transparent);
}
.custnum{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.custrow>span:last-child{font-size:11.5px;color:var(--dim)}

.custsplit{display:flex;gap:16px;margin-bottom:9px}
.custsplit span{font-size:11.5px;color:var(--dim)}
.custsplit b{font-size:12.5px;font-weight:600;color:var(--ink);margin-right:3px}

.custlast{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;color:var(--ink);opacity:.85;
  margin-bottom:10px;
}
.custlabel{font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);opacity:.7}

.custlink{
  display:block;text-align:center;
  font-size:11.5px;font-weight:500;color:var(--accent);text-decoration:none;
  padding-top:9px;border-top:1px solid color-mix(in srgb,var(--hair) 60%,transparent);
}
.custlink:hover{color:var(--accentDk)}

/* ═══ "Mate" as a signature accent — everything else stays system font ═══ */
.mate-name{
  font-family:"Playfair Display", Georgia, serif;
  font-style:italic;
  font-weight:600;
  font-size:1.08em;
  letter-spacing:.002em;
  color:inherit;
  position:relative;
  top:0.02em;
}

/* dashboard mark now matches the sign-in size exactly; only spacing differs */
.titlerow{gap:11px}
.titlerow h1{gap:6px}

/* ═══ vertical alignment: inline baseline can't be trusted across two
   different font metrics, so align by flex centering instead ═══ */
.titlerow h1{
  display:inline-flex;
  align-items:center;
}
.titlerow h1 .mate-name{
  display:inline-block;
  position:relative;
  top:auto;
  transform:translateY(0.03em);
}

/* ═══ wordmark: baseline-align "Mate" to "AI", centre the sparkle ═══ */
.titlerow h1{
  align-items:baseline;
  gap:0;
}
.titlerow h1 > .titlemark,
.titlerow h1 > svg,
.titlerow h1 > .sparkle,
.titlerow h1 > i{
  align-self:center;
  margin-right:9px;
  flex:0 0 auto;
}
.titlerow h1 .mate-name{
  display:inline-block;
  position:static;
  top:auto;
  transform:none;
  font-size:0.92em;
  line-height:1;
  margin-right:0.14em;
  letter-spacing:0;
}

/* ═══ Ask Mate: floating button + panel ═══ */
.askfab{
  position:fixed; right:14px; bottom:14px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line,rgba(255,255,255,.10));
  background:var(--card,#1b1d21);
  box-shadow:0 4px 18px rgba(0,0,0,.34);
  cursor:pointer; padding:0;
  transition:transform .14s ease, box-shadow .14s ease;
}
.askfab:hover{ transform:translateY(-1px); box-shadow:0 7px 22px rgba(0,0,0,.42); }
.askfab:active{ transform:translateY(0); }
.askfab .aimark{ display:block; }

.askpanel{
  position:fixed; right:22px; bottom:80px; z-index:61;
  width:390px; max-width:calc(100vw - 44px);
  height:min(560px,calc(100vh - 130px));
  display:flex; flex-direction:column;
  border:1px solid var(--line,rgba(255,255,255,.10));
  border-radius:14px;
  background:var(--card,#1b1d21);
  box-shadow:0 14px 44px rgba(0,0,0,.46);
  overflow:hidden;
}
.askpanel[hidden]{ display:none; }

.askhead{
  display:flex; align-items:center; gap:8px;
  padding:11px 12px;
  border-bottom:1px solid var(--line,rgba(255,255,255,.08));
  flex:0 0 auto;
}
.askhead b{ font-weight:600; font-size:13.5px; }
.askmark{ display:inline-flex; align-items:center; }
.askctx{
  flex:1 1 auto; min-width:0;
  font-size:11.5px; opacity:.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:right; padding-left:6px;
}
.askx{
  flex:0 0 auto; border:0; background:none; cursor:pointer;
  font-size:19px; line-height:1; opacity:.45; padding:0 2px;
  color:inherit;
}
.askx:hover{ opacity:.85; }

.askbody{
  flex:1 1 auto; overflow-y:auto;
  padding:13px 13px 4px;
  display:flex; flex-direction:column; gap:9px;
}
.askempty{ font-size:12.5px; opacity:.55; line-height:1.55; }
.askseeds{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.askseed{
  border:1px solid var(--line,rgba(255,255,255,.12));
  background:none; color:inherit;
  border-radius:13px; padding:5px 10px;
  font:inherit; font-size:11.5px; opacity:.8;
  cursor:pointer;
}
.askseed:hover{ opacity:1; background:rgba(127,127,127,.10); }

.askmsg{
  font-size:13px; line-height:1.55;
  border-radius:11px; padding:8px 11px;
  max-width:88%; word-wrap:break-word;
}
.ask-user{
  align-self:flex-end;
  background:rgba(90,130,230,.16);
  border:1px solid rgba(90,130,230,.22);
}
.ask-ai{
  align-self:flex-start;
  background:rgba(127,127,127,.09);
  border:1px solid var(--line,rgba(255,255,255,.07));
}
.askwait{ opacity:.5; font-style:italic; }

.askfoot{
  flex:0 0 auto;
  display:flex; align-items:flex-end; gap:7px;
  padding:10px 11px;
  border-top:1px solid var(--line,rgba(255,255,255,.08));
}
.askfoot textarea{
  flex:1 1 auto; resize:none; overflow-y:auto;
  max-height:120px; min-height:20px;
  border:0; background:none; color:inherit;
  font:inherit; font-size:13px; line-height:1.5;
  outline:none; padding:2px 0;
}
.asksend{
  flex:0 0 auto;
  width:27px; height:27px; border-radius:50%;
  border:0; cursor:pointer;
  background:rgba(90,130,230,.85); color:#fff;
  font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.asksend:hover{ background:rgba(90,130,230,1); }

@media (max-width:560px){
  .askpanel{ right:12px; left:12px; width:auto; bottom:74px; }
  .askfab{ right:14px; bottom:14px; }
}

/* ═══ Ask Mate, v2 — frosted panel, works in both themes ═══
   Local vars so light/dark is one small override rather than a
   second copy of every rule. */
.askpanel, .askfab{
  --ask-bg:rgba(28,30,34,.82);
  --ask-edge:rgba(255,255,255,.09);
  --ask-ink:#f2f3f5;
  --ask-dim:rgba(242,243,245,.52);
  --ask-field:rgba(255,255,255,.06);
  --ask-mine:rgba(96,138,240,.22);
  --ask-mine-edge:rgba(96,138,240,.32);
  --ask-theirs:rgba(255,255,255,.055);
  --ask-accent:#4a7ce8;
  --ask-shadow:0 18px 50px rgba(0,0,0,.5);
}
[data-theme="light"] .askpanel, [data-theme="light"] .askfab{
  --ask-bg:rgba(252,252,253,.86);
  --ask-edge:rgba(0,0,0,.09);
  --ask-ink:#14161a;
  --ask-dim:rgba(20,22,26,.5);
  --ask-field:rgba(0,0,0,.045);
  --ask-mine:rgba(74,124,232,.14);
  --ask-mine-edge:rgba(74,124,232,.26);
  --ask-theirs:rgba(0,0,0,.04);
  --ask-accent:#3f6fd8;
  --ask-shadow:0 18px 44px rgba(20,26,40,.16);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .askpanel, :root:not([data-theme]) .askfab{
    --ask-bg:rgba(252,252,253,.86);
    --ask-edge:rgba(0,0,0,.09);
    --ask-ink:#14161a;
    --ask-dim:rgba(20,22,26,.5);
    --ask-field:rgba(0,0,0,.045);
    --ask-mine:rgba(74,124,232,.14);
    --ask-mine-edge:rgba(74,124,232,.26);
    --ask-theirs:rgba(0,0,0,.04);
    --ask-accent:#3f6fd8;
    --ask-shadow:0 18px 44px rgba(20,26,40,.16);
  }
}

.askfab{
  width:46px; height:46px;
  background:var(--ask-bg);
  border:1px solid var(--ask-edge);
  box-shadow:var(--ask-shadow);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}

.askpanel{
  width:400px;
  border-radius:20px;
  background:var(--ask-bg);
  border:1px solid var(--ask-edge);
  box-shadow:var(--ask-shadow);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  color:var(--ask-ink);
}

.askhead{
  padding:12px 13px 10px;
  border-bottom:1px solid var(--ask-edge);
  gap:9px;
}
.askhead b{ font-size:13.5px; color:var(--ask-ink); }
.askctx{ color:var(--ask-dim); font-size:11px; }
.askx{
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ask-field); color:var(--ask-ink);
  font-size:15px; opacity:.6; transition:opacity .12s ease;
}
.askx:hover{ opacity:1; }

.askbody{ padding:14px 14px 6px; gap:10px; }
.askempty{ color:var(--ask-dim); font-size:12.5px; }
.askseed{
  background:var(--ask-field);
  border:1px solid var(--ask-edge);
  color:var(--ask-ink);
  border-radius:14px; padding:6px 11px;
  opacity:.9; transition:opacity .12s ease, transform .12s ease;
}
.askseed:hover{ opacity:1; transform:translateY(-1px); background:var(--ask-field); }

.askmsg{ border-radius:14px; padding:9px 12px; color:var(--ask-ink); }
.ask-user{ background:var(--ask-mine); border:1px solid var(--ask-mine-edge); }
.ask-ai{ background:var(--ask-theirs); border:1px solid var(--ask-edge); }
.askwait{ color:var(--ask-dim); }

/* the composer sits as its own pill, like the reference */
.askfoot{
  padding:10px 11px 12px;
  border-top:0;
  gap:8px;
  align-items:center;
}
.askfoot{
  margin:0 11px 11px;
  padding:6px 6px 6px 14px;
  border:1px solid var(--ask-edge);
  border-radius:22px;
  background:var(--ask-field);
}
.askfoot textarea{ color:var(--ask-ink); font-size:13px; padding:6px 0; }
.askfoot textarea::placeholder{ color:var(--ask-dim); }
.asksend{
  width:30px; height:30px;
  background:var(--ask-accent);
  font-size:15px;
  transition:transform .12s ease, filter .12s ease;
}
.asksend:hover{ background:var(--ask-accent); filter:brightness(1.1); transform:translateY(-1px); }

/* ═══ Ask Mate v3 — dots, beta tag, tighter panel, idle nudge ═══ */
.askpanel{
  width:360px;
  height:min(460px,calc(100vh - 190px));
  bottom:78px; right:18px;
}

.askbeta{
  font-size:8.5px; font-weight:700; letter-spacing:.07em;
  padding:2px 5px; border-radius:4px; margin-left:5px;
  color:var(--ask-accent);
  background:color-mix(in srgb, var(--ask-accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--ask-accent) 30%, transparent);
  position:relative; top:-1px;
}

/* three dots instead of the word "thinking" */
.askwait{ display:flex; gap:4px; align-items:center; padding:12px 13px; }
.askwait i{
  width:5px; height:5px; border-radius:50%;
  background:var(--ask-dim);
  animation:askdot 1.25s infinite ease-in-out;
}
.askwait i:nth-child(2){ animation-delay:.16s; }
.askwait i:nth-child(3){ animation-delay:.32s; }
@keyframes askdot{
  0%,60%,100%{ opacity:.25; transform:translateY(0); }
  30%{ opacity:.9; transform:translateY(-3px); }
}

/* the bubble: label slides out when idle, tucks back in */
.askfab{
  width:auto; min-width:46px; height:46px;
  border-radius:23px;
  padding:0 12px;
  gap:0;
  overflow:hidden;
  justify-content:flex-start;
}
.askfab .aimark{ flex:0 0 auto; }
.askfablabel{
  font-size:12.5px; font-weight:500; color:var(--ask-ink);
  white-space:nowrap;
  max-width:0; opacity:0; margin-left:0;
  transition:max-width .42s cubic-bezier(.4,0,.2,1),
             opacity .28s ease, margin-left .42s cubic-bezier(.4,0,.2,1);
}
.askfab.peek .askfablabel,
.askfab:hover .askfablabel{
  max-width:80px; opacity:1; margin-left:7px;
}
.askfab.isopen .askfablabel{ max-width:0; opacity:0; margin-left:0; }

/* ═══ Ask Mate docked in the composer tab row ═══ */
.askfab{ display:none !important; }   /* the floating bubble is retired */

.askdock{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:4px;
}
.askdock .askdockmark{ display:inline-flex; align-items:center; }
.askdock .askdockmark svg{ display:block; }
.askdock .askbeta{ margin-left:2px; }
.askdock.on, .askdock[aria-expanded="true"]{ opacity:1; }

/* panel now anchors above the composer rather than the window corner */
.askpanel{ bottom:96px; right:34px; }

/* ═══ header: one line, no wrap ═══ */
.askhead{ flex-wrap:nowrap; }
.askhead b{
  display:inline-flex; align-items:baseline; gap:4px;
  white-space:nowrap; flex:0 0 auto;
}
.askhead b .mate-name{ font-size:1em; }
.askhead .askbeta{ flex:0 0 auto; align-self:center; }
.askctx{ flex:1 1 auto; min-width:0; }

/* open/close without the flicker */
.askpanel{
  transition:opacity .16s ease, transform .16s cubic-bezier(.4,0,.2,1);
}
.askpanel[hidden]{
  display:flex !important;
  opacity:0; transform:translateY(6px) scale(.985);
  pointer-events:none;
}
.askpanel:not([hidden]){ opacity:1; transform:none; }

/* ═══ open without dimming the pane behind it ═══ */
.askpanel[hidden]{
  display:flex !important;
  opacity:0;
  transform:translateY(6px) scale(.985);
  pointer-events:none;
  backdrop-filter:none;                 /* the blur was tinting the whole pane */
  -webkit-backdrop-filter:none;
  visibility:hidden;
}
.askpanel:not([hidden]){
  opacity:1; transform:none; visibility:visible;
  transition:opacity .15s ease, transform .15s cubic-bezier(.4,0,.2,1);
}

/* ═══ open without dimming the pane behind it ═══ */
.askpanel[hidden]{
  display:flex !important;
  opacity:0;
  transform:translateY(6px) scale(.985);
  pointer-events:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  visibility:hidden;
}
.askpanel:not([hidden]){
  opacity:1; transform:none; visibility:visible;
  transition:opacity .15s ease, transform .15s cubic-bezier(.4,0,.2,1);
}

/* askdock is no longer a .tab, so it needs the row's look on its own */
.tabs .askdock{
  border:0; background:none; color:inherit;
  font:inherit; font-size:13px;
  padding:7px 10px; cursor:pointer;
  opacity:.72; transition:opacity .12s ease;
}
.tabs .askdock:hover{ opacity:1; }

/* ═══ no fade when swapping tickets ═══
   paneIn replays on every render because the elements are rebuilt each time,
   which reads as a flash rather than an entrance. Keep it for the first paint
   only — .chat gets .swapped once a ticket has been opened. */
.chat.swapped>.chead,
.chat.swapped>.stream,
.chat.swapped>.comp{ animation:none; }

/* the dock sparkle breathes gently — it is new, agents should notice it */
.askdock .askdockmark svg{ animation:askbreathe 3.4s ease-in-out infinite; }
@keyframes askbreathe{
  0%,100%{ opacity:.75; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.14); }
}
@media (prefers-reduced-motion:reduce){
  .askdock .askdockmark svg{ animation:none; }
}

/* the sparkle alone read as decoration — say what the button does */
.aibtn{ width:auto; gap:5px; padding:0 9px; }
.aibtn .aibtntxt{
  font-size:11.5px; font-weight:500;
  white-space:nowrap; opacity:.8;
}
.aibtn:hover .aibtntxt{ opacity:1; }
.aibtn.muted .aibtntxt{ opacity:.55; }

/* ═══ Ask Mate: a slow glow pulse so agents notice it ═══ */
.tabs .askdock{
  position:relative;
  border-radius:14px;
  opacity:1;
}
.tabs .askdock::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 0 0 rgba(90,130,230,.55);
  animation:askglow 5s ease-out infinite;
}
@keyframes askglow{
  0%   { box-shadow:0 0 0 0 rgba(90,130,230,.5);   background:rgba(90,130,230,.14); }
  22%  { box-shadow:0 0 0 8px rgba(90,130,230,0);  background:rgba(90,130,230,0); }
  100% { box-shadow:0 0 0 0 rgba(90,130,230,0);    background:rgba(90,130,230,0); }
}
.tabs .askdock:hover::before{ animation:none; }
@media (prefers-reduced-motion:reduce){
  .tabs .askdock::before{ animation:none; }
}

/* line 2105 hides all spans in .aibtn to keep it icon-only — the label needs out */
.aibtn .aibtntxt{ display:inline !important; }
.aibtn{ padding:4px 9px !important; gap:5px !important; width:auto !important; }

/* the glow is a first-time nudge, not a permanent blink */
.askdock.used::before,
body.askseen .askdock::before{ animation:none !important; }

/* the hidden-state rules leaked into the open panel and blocked the input */
.askpanel:not([hidden]){ pointer-events:auto; }
.askpanel:not([hidden]) *{ pointer-events:auto; }
.askfoot{ position:relative; z-index:2; }
.askfoot textarea{ cursor:text; user-select:text; }

/* the composer's own stacking context was swallowing clicks meant for the panel */
.askpanel{ z-index:2147483000 !important; }
.askpanel, .askpanel *{ pointer-events:auto !important; }
.askpanel[hidden], .askpanel[hidden] *{ pointer-events:none !important; }

/* dragging: no text selection, no transition fighting the pointer */
.askpanel.dragging{ transition:none !important; user-select:none; }
.askpanel .askhead{ touch-action:none; }

/* ═══ collapsed: header only, still draggable ═══ */
.askpanel.mini{
  height:auto !important;
  min-height:0;
}
.askpanel.mini .askbody,
.askpanel.mini .askfoot{ display:none; }
.askpanel.mini .askhead{ border-bottom:0; }
.askmin{ font-size:17px; }
.askpanel.mini .askmin::after{ content:""; }

/* the open transition moved the panel under the pointer, so early clicks missed.
   Fade opacity only — no transform — and keep the hit area still. */
.askpanel[hidden]{
  opacity:0;
  transform:none;
  visibility:hidden;
  pointer-events:none !important;
}
.askpanel:not([hidden]){
  opacity:1;
  transform:none;
  visibility:visible;
  transition:opacity .1s ease;
  pointer-events:auto !important;
}
.askpanel:not([hidden]) *{ pointer-events:auto !important; }

/* belt and braces — kill the pulse once seen, whatever the selector path */
body.askseen .tabs .askdock::before{ animation:none !important; box-shadow:none !important; background:none !important; }

/* the panel outranked the modals; it should sit above the app but below them */
.askpanel{ z-index:500 !important; }
.modal{ z-index:1000; }
.modal:not([hidden]) ~ .askpanel{ pointer-events:none; }

/* ═══ settings sidebar: match the glass used across the rest of the app ═══ */
.setnav{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-right:1px solid rgba(0,0,0,.07);
}
html[data-theme="dark"] .setnav{
  background:rgba(255,255,255,.035);
  border-right-color:rgba(255,255,255,.06);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}

/* the extra tint made the sidebar read as a different material to the pane.
   One surface, divided by the hairline only. */
.setnav,
html[data-theme="dark"] .setnav{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-theme="dark"] .setnav{ border-right-color:rgba(255,255,255,.07); }

/* ═══ settings dialog: fixed height so panes don't resize the box ═══
   Appearance is taller than Account, so switching panes made the whole
   dialog jump. Pin the height and let the pane scroll instead. */
.sheet.setsheet,
.modal .sheet{
  height:min(430px, calc(100vh - 120px));
  max-height:min(430px, calc(100vh - 120px));
}
.setpane{ min-height:0; overflow:hidden; }
.setpane .setbody{
  overflow-y:auto;
  min-height:0;
  flex:1 1 auto;
  scrollbar-width:thin;
}
.setnav{ min-height:0; overflow-y:auto; }

/* ═══ settings: tabs across the top instead of a sidebar ═══ */
.setflat .setcols{ display:flex; flex-direction:column; min-height:0; }
.setflat .setrow-nav{
  display:flex; gap:2px;
  padding:10px 14px 0;
  border-right:0;
  border-bottom:1px solid var(--hair);
  overflow-x:auto; overflow-y:hidden;
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  flex:0 0 auto;
}
.setflat .setrow-nav .snav{
  flex:0 0 auto;
  padding:7px 11px 9px;
  border-radius:8px 8px 0 0;
  border-bottom:2px solid transparent;
  background:none;
  white-space:nowrap;
}
.setflat .setrow-nav .snav.on{
  background:none;
  color:var(--ink);
  border-bottom-color:var(--go,#3a6fd8);
}
.setflat .setrow-nav .snav.on svg{ stroke:var(--go,#3a6fd8); }
.setflat .setpanehead{ padding-top:16px; }
html[data-theme="dark"] .setflat .setrow-nav{ border-bottom-color:rgba(255,255,255,.07); }

/* the tabs were collapsing into one; stop them shrinking */
.setflat .setrow-nav{ flex-wrap:nowrap; }
.setflat .setrow-nav .snav{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0;
}
.setflat .setrow-nav .snav span{ display:inline !important; }
.rail[hidden]{ display:none !important; }

/* ═══ avatar + gear in the header, replacing the left rail ═══ */
.avtop{
  width:26px; height:26px; border-radius:50%;
  border:0; cursor:pointer; flex:0 0 auto;
  font:inherit; font-size:10.5px; font-weight:600; letter-spacing:.02em;
  background:var(--go,#3a6fd8); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:2px;
  transition:filter .12s ease, transform .12s ease;
}
.avtop:hover{ filter:brightness(1.1); transform:translateY(-1px); }

/* ═══ rail removed — its grid column has to go too, at every breakpoint,
   or the remaining panes get squeezed into the wrong tracks ═══ */
.app{ grid-template-columns:minmax(340px,404px) 1fr !important; }
@media (max-width:1180px){
  .app{ grid-template-columns:minmax(300px,360px) 1fr !important; }
}
@media (max-width:820px){
  .app{ grid-template-columns:1fr !important; }
}

/* ═══ settings: size to content, cap at a sensible max ═══
   The fixed height left a large void under short panes like Account.
   Grow with content instead, and scroll only when it exceeds the cap. */
.sheet.setflat,
.modal .sheet.setflat{
  height:auto !important;
  max-height:min(560px, calc(100vh - 120px)) !important;
}
.setflat .setpane .setbody{
  max-height:none;
  padding-bottom:14px;
}
.setflat .setrow{ gap:18px; }
.setflat .setrow > span:first-child{ flex:1 1 auto; min-width:0; }
.setflat .setrow > .btn,
.setflat .setrow > button{ flex:0 0 auto; }

/* light mode read as solid white — drop the fill so the blur is visible */
[data-theme="light"] .askpanel,
[data-theme="light"] .askfab{
  --ask-bg:rgba(255,255,255,.55);
  --ask-edge:rgba(0,0,0,.07);
  --ask-field:rgba(255,255,255,.5);
  --ask-theirs:rgba(255,255,255,.45);
  --ask-shadow:0 16px 40px rgba(20,26,40,.13);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .askpanel,
  :root:not([data-theme]) .askfab{
    --ask-bg:rgba(255,255,255,.55);
    --ask-edge:rgba(0,0,0,.07);
    --ask-field:rgba(255,255,255,.5);
    --ask-theirs:rgba(255,255,255,.45);
    --ask-shadow:0 16px 40px rgba(20,26,40,.13);
  }
}
.askpanel{
  backdrop-filter:blur(30px) saturate(190%) !important;
  -webkit-backdrop-filter:blur(30px) saturate(190%) !important;
}

/* ═══ BETA pill + send button, matching the reference ═══ */
.askbeta{
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
  padding:3px 8px;
  border-radius:7px;
  border:0;
  background:rgba(122,162,247,.20);
  color:#5b8ae8;
  position:relative;
  top:0;
}
[data-theme="light"] .askbeta,
:root:not([data-theme]) .askbeta{
  background:rgba(122,162,247,.18);
  color:#4a7ce8;
}

.asksend{
  width:34px; height:34px;
  border-radius:11px;
  background:#4a7ce8;
  font-size:0;
  position:relative;
  box-shadow:0 2px 8px rgba(74,124,232,.32);
}
.asksend::after{
  content:"";
  position:absolute;
  inset:0;
  background:currentColor;
  -webkit-mask:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  color:#fff;
}
.asksend:hover{
  background:#3d6fd8;
  box-shadow:0 3px 12px rgba(74,124,232,.42);
}