/* Every rupee amount in the app was rendering as a peso.
   Myriad Pro predates the 2010 Indian rupee sign and has no glyph for U+20B9,
   so amounts fell through to the next face in the stack — PT Sans, a Russian
   typeface whose U+20B9 is drawn like a ruble. Two reasonable font choices
   combining into a wrong currency.
   This borrows the single codepoint from a face that draws it correctly and
   leaves everything else alone. If none of these are installed the browser
   simply carries on down the normal stack, so it can only improve matters. */
@font-face{
  font-family:'RupeeSign';
  src:local('Segoe UI'),local('Nirmala UI'),local('Helvetica Neue'),
      local('Noto Sans'),local('DejaVu Sans'),local('Arial'),local('Liberation Sans');
  unicode-range:U+20B9;
  font-display:swap;
}
:root{
  --ink:#15181d; --ink-soft:#3a4049; --mute:#7d8590; --line:#e7e9ee;
  --paper:#f6f7f9; --card:#ffffff; --panel:#f1f3f6;
  --brand:#15181d;               /* Shells black */
  --accent:#2fa5b3;              /* Shells teal #3CA8B4 tuned for UI */
  --accent-ink:#1c7a86; --accent-soft:#e4f4f6;
  --lead:#6f5cf0; --deliver:#0e9f6e; --bill:#e9820a;
  --ok:#0e9f6e; --warn:#e9820a; --bad:#e0473c;
  --shadow:0 1px 2px rgba(21,24,29,.04),0 10px 26px rgba(21,24,29,.06);
  --r:14px;
  --sans:'RupeeSign','Myriad Pro','Myriad Set Pro','PT Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Roboto Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--ink)}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#d4d9e2;border-radius:20px}
::-webkit-scrollbar-track{background:transparent}

.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--brand);color:#aeb6c2;padding:16px 12px;display:flex;flex-direction:column;gap:1px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 15px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.brand .logo{width:34px;height:34px;border-radius:9px;background:#000;display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.14)}
.brand .logo svg{width:21px;height:19px}
.brand .logo img{width:21px;height:19px}
.brand b{color:#fff;font-size:15px;letter-spacing:.3px;line-height:1.1;display:block;font-style:italic;font-weight:800}
.brand span{font-size:9px;color:#8b93a2;letter-spacing:1.5px;text-transform:uppercase}
.navlbl{font-size:9.5px;color:#767e8c;text-transform:uppercase;letter-spacing:.9px;padding:13px 10px 5px;font-weight:700}
.navitem{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;color:#b8bfca;font-size:13px;font-weight:500;transition:.12s;width:100%;text-align:left}
.navitem:hover{background:rgba(255,255,255,.06);color:#fff}
.navitem.on{background:var(--accent);color:#fff;font-weight:600}
.navitem svg{width:17px;height:17px;flex:none;opacity:.8}
.navitem.on svg{opacity:1}
.navitem .badge{margin-left:auto;background:rgba(255,255,255,.14);color:#fff;font-size:10px;padding:1px 7px;border-radius:20px;font-weight:600;min-width:19px;text-align:center}
.navitem.on .badge{background:rgba(0,0,0,.22)}
.navitem .badge.hot{background:var(--bad);color:#fff}
.who{margin-top:auto;padding-top:11px;border-top:1px solid rgba(255,255,255,.08)}
.who .row{display:flex;align-items:center;gap:9px}
.avatar{border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700;flex:none;width:32px;height:32px;font-size:12px}
.who b{color:#fff;font-size:13px;line-height:1.2;display:block}
.who small{color:#8b93a2;font-size:11px}
.who .lo{color:#8b93a2;font-size:11.5px;margin-top:9px;display:flex;align-items:center;gap:5px}
.who .lo:hover{color:#fff}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:16px;padding:15px 28px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:20}
.top h1{font-size:18.5px;letter-spacing:-.4px;font-weight:700}
.top .sub{font-size:12.5px;color:var(--mute);margin-top:1px}
.top .actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.wrap{padding:22px 28px 70px;max-width:1320px;width:100%}

.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;font-size:13px;font-weight:600;background:var(--accent);color:#fff;transition:.12s;white-space:nowrap}
.btn:hover{background:var(--accent-ink)}
.btn:disabled{opacity:.5;cursor:default}
.btn.dark{background:var(--brand)}.btn.dark:hover{background:#000}
.btn.ghost{background:var(--panel);color:var(--ink-soft)}
.btn.ghost:hover{background:#e7eaf0}
.btn.line{background:#fff;border:1px solid var(--line);color:var(--ink-soft)}
.btn.line:hover{border-color:#c7cdd8}
.btn.sm{padding:5px 11px;font-size:12px}
.btn svg{width:15px;height:15px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:18px}
.grid{display:grid;gap:16px}
.muted{color:var(--mute)}
.hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.hd h3{font-size:15px;font-weight:700;letter-spacing:-.2px}
.hd .r{margin-left:auto}

.tag{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:6px}
.chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--panel);color:var(--ink-soft)}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--mute);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
td{padding:11px 14px;font-size:13px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:.1s}
tbody tr:hover{background:#fafbfc}
td b,td .nm{color:var(--ink);font-weight:600}
.tbl-wrap{overflow-x:auto;border-radius:var(--r)}

.stat .n{font-size:26px;font-weight:700;letter-spacing:-1px;color:var(--ink);font-family:var(--mono);line-height:1}
.stat .l{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:7px}
.stat .d{font-size:11.5px;font-weight:600;margin-top:4px}

input.f,select.f,textarea.f{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;outline:none;transition:.12s}
input.f:focus,select.f:focus,textarea.f:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,165,179,.12)}
label.fl{font-size:11.5px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:5px}
.frow{margin-bottom:13px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

.scrim{position:fixed;inset:0;background:rgba(21,24,29,.48);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:90vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.3);animation:pop .16s ease}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal .mh{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;position:sticky;top:0;background:#fff;z-index:2}
.modal .mh h3{font-size:16px;font-weight:700}
.modal .mb{padding:20px}
.modal .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;background:#fff}
.x{margin-left:auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--mute);font-size:18px}
.x:hover{background:var(--panel)}

.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;align-items:start}
.col{background:var(--panel);border-radius:12px;padding:11px;min-height:80px}
.col h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);margin-bottom:10px;display:flex;align-items:center;gap:8px;font-weight:700}
.col h4 .c{margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:0 8px;font-size:11px;color:var(--mute)}
.kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:9px;box-shadow:0 1px 2px rgba(0,0,0,.03);cursor:pointer;transition:.12s}
.kcard:hover{border-color:#c7cdd8;transform:translateY(-1px);box-shadow:var(--shadow)}
.kcard .kt{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
.kcard .km{font-size:11px;color:var(--mute);margin-top:7px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}

.flow{display:flex;align-items:center;margin:6px 0 2px;flex-wrap:wrap;gap:4px}
.fstep{flex:1;min-width:66px;text-align:center;font-size:10.5px;font-weight:600;padding:8px 4px;border-radius:8px;color:var(--mute);background:var(--panel);line-height:1.2}
.fstep.done{background:var(--accent-soft);color:var(--accent-ink)}
.fstep.cur{background:var(--accent);color:#fff}

.empty{text-align:center;padding:44px 20px;color:var(--mute)}
.empty .big{font-size:15px;font-weight:600;color:var(--ink-soft);margin-bottom:4px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bar{height:7px;border-radius:20px;background:var(--panel);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:20px}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;gap:12px}
.kv:last-child{border:none}.kv b{color:var(--ink);text-align:right}
.seg{display:inline-flex;background:var(--panel);border-radius:9px;padding:3px}
.seg button{padding:5px 12px;font-size:12px;font-weight:600;border-radius:7px;color:var(--mute)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* chat */
.chat{display:grid;grid-template-columns:230px 1fr;height:calc(100vh - 150px);min-height:430px;max-height:calc(100vh - 150px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.chan{border-right:1px solid var(--line);overflow-y:auto;background:var(--panel)}
.chan .ch-h{padding:13px 15px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--mute);position:sticky;top:0;background:var(--panel);z-index:2}
.chan button{width:100%;text-align:left;padding:8px 15px;font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;font-weight:500}
.chan button:hover{background:#e9ecf1}
.chan button.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.chan button .u{margin-left:auto;background:var(--bad);color:#fff;font-size:9.5px;padding:0 6px;border-radius:20px;font-weight:700}
.thread{display:flex;flex-direction:column;min-width:0}
.thread .t-h{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.thread .t-h b{font-size:14px}
.msgs{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:13px}
.msg{display:flex;gap:10px;max-width:88%}
.msg .body b{font-size:12.5px}
.msg .body .time{font-size:10.5px;color:var(--mute);margin-left:6px;font-weight:500}
.msg .body p{font-size:13px;color:var(--ink-soft);margin-top:2px;line-height:1.45;background:var(--panel);padding:8px 11px;border-radius:10px;border-top-left-radius:3px}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .body{text-align:right}
.msg.me .body p{background:var(--accent);color:#fff;border-top-left-radius:10px;border-top-right-radius:3px;text-align:left}
.composer{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:9px}
.composer input{flex:1;padding:10px 13px;border:1px solid var(--line);border-radius:10px;outline:none}
.composer input:focus{border-color:var(--accent)}

.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1000px 520px at 18% -10%,#123239 0,transparent 60%),radial-gradient(760px 460px at 100% 110%,#0d2429 0,transparent 55%),#0a0d12}
.loginbox{width:376px;background:#fff;border-radius:18px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.loginbox .lg{width:48px;height:48px;border-radius:12px;background:#000;display:grid;place-items:center;margin-bottom:15px;border:1px solid rgba(0,0,0,.1)}
.loginbox .lg svg{width:28px;height:26px}
/* the real lockup carries the wordmark, so the heading beside it stays quiet */
.loginbox .lockup{width:96px;height:auto;display:block;margin-bottom:14px}
.loginbox h2{font-size:17px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.loginbox p{color:var(--mute);font-size:13px;margin:3px 0 16px}
.userpick{display:flex;flex-direction:column;gap:5px;max-height:300px;overflow:auto;margin-top:6px}
.userrow{display:flex;align-items:center;gap:11px;padding:8px 9px;border:1px solid var(--line);border-radius:11px;transition:.12s;text-align:left;width:100%}
.userrow:hover{border-color:var(--accent);background:var(--accent-soft)}
.userrow b{font-size:13.5px;display:block;color:var(--ink)}
.userrow small{font-size:11px;color:var(--mute)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;font-weight:500;z-index:99;box-shadow:0 12px 30px rgba(0,0,0,.3);animation:pop .2s}
.scope-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.scope-cell{background:var(--panel);border-radius:10px;padding:10px;text-align:center}
.scope-cell .big{font-size:20px;font-weight:700;font-family:var(--mono);color:var(--ink)}
.scope-cell .lbl{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.res-cell{padding:5px;border-radius:7px;font-size:10.5px;font-weight:600;margin-bottom:4px;line-height:1.3}
/* Mobile top bar + off-canvas drawer. The sidebar used to be display:none on
   phones, which meant no navigation existed at all below 860px. */
.mtop{display:none}
.mscrim{position:fixed;inset:0;background:rgba(10,13,18,.45);z-index:65}
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;top:0;left:0;bottom:0;width:274px;max-width:82vw;z-index:70;
    transform:translateX(-105%);transition:transform .18s ease;height:100vh;height:100dvh}
  .side.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.55)}
  .mtop{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--brand);
    color:#fff;position:sticky;top:0;z-index:40}
  .mtop b{font-style:italic;font-weight:800;font-size:15px;letter-spacing:.3px}
  .mbtn{width:38px;height:38px;display:grid;place-items:center;color:#fff;border-radius:9px;flex:none}
  .mbtn:active{background:rgba(255,255,255,.12)}
  .msearch{margin-left:auto}
  .top{position:static}   /* one sticky header on a phone, not two stacked */
  .split,.f2,.f3{grid-template-columns:1fr}
  .wrap{padding:16px}
  .chat{grid-template-columns:1fr}
}

/* ===== GLOBAL SEARCH ===== */
.sidesearch{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 6px;padding:8px 10px;border-radius:9px;
  background:rgba(255,255,255,.07);color:#b8bfca;font-size:12.5px;font-weight:500;transition:.12s;min-width:0}
.sidesearch:hover{background:rgba(255,255,255,.13);color:#fff}
.sidesearch span{flex:1;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidesearch svg{flex:none;opacity:.75}
.sidesearch kbd{flex:none;font:600 9.5px var(--sans);letter-spacing:.3px;color:#8b93a2;background:rgba(0,0,0,.28);
  border-radius:5px;padding:2px 5px}
.cmd-row{width:100%;text-align:left;display:flex;align-items:center;gap:11px;padding:9px 16px;border:none;cursor:pointer;min-width:0}
.cmd-row svg{flex:none;color:var(--mute)}
.cmd-txt{flex:1;min-width:0}
.cmd-txt b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-txt small{display:block;font-size:11px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.cmd-type{flex:none;font-size:10px}

/* ===== SPILL CONTROL =====
   Flex and grid children default to min-width:auto, so a long client name, a
   crore-scale figure or an email address refuses to shrink and shoves itself
   out of the tile, card or modal holding it. Reset that wherever it bites,
   then let genuinely unbreakable strings break instead of overflowing.
   Every rule here traces to a measured spill (tools/overflow-audit.js). */
.grid>*,.split>*,.f2>*,.f3>*,.board>*,.flow>*,.hd>*,.kv>*,.top>*,.who .row>*,.cmd-row>*{min-width:0}
.card,.kcard,.col,.modal,.stat,.thread,.msg,.msg .body,.main,.wrap{min-width:0}

/* page header — title block and action buttons wrap instead of pushing each
   other off-screen (this was the single most common spill, on 8 screens) */
.top{flex-wrap:wrap;row-gap:8px}
.top>div:first-child{flex:1 1 240px;min-width:0}
.top h1,.top .sub{overflow-wrap:anywhere}
.top .actions{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}

/* long unbroken tokens: emails, URLs, GSTINs, file names, domains */
.card,.kcard,.empty,.kv,.modal .mb,.msg .body p,td,th{overflow-wrap:break-word}
/* file names and slugs join on underscores, which break-word won't split */
.kcard,.kcard *,.card .km,.card small,.tbl-wrap td{overflow-wrap:anywhere}

/* headline figures wrap rather than burst the tile, and step down on small ones */
.stat{container-type:inline-size}
.stat .n,.stat .l,.tile .n,.scope-cell .big,.big{overflow-wrap:anywhere}
@container (max-width:180px){.stat .n{font-size:21px;letter-spacing:-.5px}}
@container (max-width:132px){.stat .n{font-size:17px}}

/* a form control must never dictate the width of the row it sits in */
input.f,select.f,textarea.f,input,select,textarea{min-width:0;max-width:100%}

/* chips and pills clip rather than push their container open */
.chip,.pill,.tag{max-width:100%;min-width:0;overflow:hidden}

/* chat channel list: long job titles ellipsis instead of overflowing */
.chan button{min-width:0}
.chan button>span:not(.u){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread .t-h b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* sub-tab rows scroll sideways on a phone instead of overflowing the page */
.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}

/* safety net: a table that nobody wrapped in .tbl-wrap still scrolls
   rather than tearing the whole page sideways */
.card:has(>table),.card.pad:has(>table),.col:has(>table){overflow-x:auto}

/* modal headers: a long title must not push the close button out of reach */
.modal .mh h3{min-width:0;overflow-wrap:anywhere}
.modal .mh .x{flex:none}

/* below the sidebar breakpoint the page still needs breathing room */
@media(max-width:560px){
  .wrap{padding:14px 12px 60px}
  .top{padding:12px 14px}
  .top h1{font-size:16.5px}
  .pad{padding:14px}
  .f2,.f3{grid-template-columns:1fr}
  .scrim{padding:10px}
  .modal .mb,.modal .mh,.modal .mf{padding-left:14px;padding-right:14px}
}

/* month calendar: scrolls sideways on a phone rather than crushing the cells */
.calwrap{overflow-x:auto}
.calgrid{min-width:600px}
/* key/value rows drop the value to its own line when it can't sit alongside */
.kv{flex-wrap:wrap}
.kv>*{overflow-wrap:anywhere}
/* unclassed flex rows inside cards hold the same squeeze — reset them too */
.card div,.card b,.card span,.card small,.card p{min-width:0}
.card b{overflow-wrap:anywhere}

/* Vertical twin of the spill-control rules above. .chat is a fixed-height grid,
   but grid and flex children default to min-height:auto — so .chan and .thread
   grew to fit their content (897px inside a 650px box) and got clipped, taking
   the section headers and the thread header above the top of the panel with
   them. The channel list could not even scroll back to them because its own
   height had grown past the container. Letting them shrink puts the scrolling
   back where it belongs: inside .chan and .msgs, with the composer pinned. */
.chat>*{min-height:0}
.chan,.thread,.msgs{min-height:0}

/* ===== MENTIONS ===== */
.mention{display:inline;font-weight:600;font-size:inherit;line-height:inherit;padding:1px 4px;border-radius:5px;
  background:var(--accent-soft);color:var(--accent-ink);cursor:pointer;border:none}
.mention:hover{background:var(--accent);color:#fff}
.mention.m-all{background:#fdf1e0;color:#a35f06}
.mention.m-all:hover{background:var(--warn);color:#fff}
.mention.m-c,.mention.m-j,.mention.m-f{background:#ece9fd;color:#4a3bc4}
.mention.m-c:hover,.mention.m-j:hover,.mention.m-f:hover{background:var(--lead);color:#fff}
.msg.me .mention{background:rgba(255,255,255,.24);color:#fff}
.msg.me .mention:hover{background:#fff;color:var(--accent-ink)}
/* a message that names you gets a rail, so it reads at a glance in a long thread */
.msg .body p.hasme{box-shadow:inset 3px 0 0 var(--warn)}
.chan button .u[title="you were mentioned"]{background:var(--warn);font-weight:700}

.mentionbox{position:absolute;bottom:calc(100% + 7px);left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:11px;box-shadow:0 14px 40px rgba(21,24,29,.18);overflow:hidden;z-index:30;max-height:260px;overflow-y:auto}
.mentionbox button{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;padding:7px 12px;min-width:0}
.mentionbox button.on{background:var(--accent-soft)}
.mentionbox button b{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.mentionbox button small{font-size:11px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.mentionbox .mhint{padding:5px 12px;font-size:10.5px;color:var(--mute);border-top:1px solid var(--line);background:var(--panel)}