/* Vanta design system. Copied from design_system/
   design-system-discord-punk.html as PRD section 17.1 specifies.
   Adaptations 2, 6 and 7 applied. Do not edit values by hand. */

/* ── 1. TOKENS ──────────────────────────────────────────────────────── */
:root{
--paper:#F4F5F6;--ink:#12141A;--ink-2:#1B1E26;--ink-3:#0C0E12;
--figure:#E2E4E7;--steel:#8B9099;--coral:#FF6B6B;--red:#E5484D;
--inv-10:rgba(244,245,246,.10);--inv-14:rgba(244,245,246,.14);--inv-16:rgba(244,245,246,.16);
--inv-55:rgba(244,245,246,.55);--inv-60:rgba(244,245,246,.60);--inv-70:rgba(244,245,246,.70);
--scrim:rgba(18,20,26,.55);--shadow:0 18px 40px rgba(18,20,26,.16);
--focus:var(--coral);--live:var(--red);--danger:var(--red);
--display:'Chakra Petch',sans-serif;--mono:'Roboto Mono',monospace;
--nav:62px;--strip:0px;--tb:36px;--rail:72px;--side:240px;--mem:240px;--hd:48px;--row:32px;--row-mem:40px;--composer:64px;
--ease-reveal:cubic-bezier(.22,.61,.36,1);--ease-entry:cubic-bezier(.19,1,.22,1);
--t-hover:.3s;--t-overlay:.3s;--t-reveal:.8s;--t-entry-o:1s;--t-entry-t:1.1s;--t-pulse:1.8s;--t-wave:1.2s;
--round-scale:1.08;--lift:-2px;--shift:10px;
}
:root,[data-theme=paper]{
color-scheme:light;
/* .62 instead of .55: 4.99:1 on paper, computed in PRD 17.2.2. */
--mid:rgba(18,20,26,.62);--line:rgba(18,20,26,.14);--hover:rgba(18,20,26,.04);
--bg-app:var(--paper);--bg-rail:var(--paper);--bg-sidebar:var(--paper);--bg-panel:var(--paper);--bg-raised:var(--paper);
--bg-tint:var(--figure);--bg-player:var(--ink);
--text-strong:var(--ink);--text-body:var(--ink);--text-muted:var(--mid);
--block:var(--ink);--on-block:var(--paper);--block-2:var(--ink-3);--fo:-2px;
}
[data-theme=ink],.on-ink{
color-scheme:dark;
--mid:var(--inv-60);--line:var(--inv-14);--hover:var(--inv-10);
--bg-app:var(--ink);--bg-rail:var(--ink-3);--bg-sidebar:var(--ink-2);--bg-panel:var(--ink);--bg-raised:var(--ink-2);
--bg-tint:var(--inv-10);--bg-player:var(--ink-3);
--text-strong:var(--paper);--text-body:var(--inv-70);--text-muted:var(--inv-60);
--block:var(--paper);--on-block:var(--ink);--block-2:var(--figure);--fo:2px;
}
.on-ink{color:var(--text-body)}
@media(prefers-reduced-motion:reduce){
:root{--t-hover:0s;--t-overlay:0s;--t-reveal:0s;--t-entry-o:0s;--t-entry-t:0s;--t-pulse:0s;--t-wave:0s;
--round-scale:1;--lift:0px;--shift:0px}
}
@media(max-width:1080px){:root{--strip:36px}}
@media(max-width:619.98px){:root{--rail:56px}}

/* ── 2. BASE ────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg-app);scroll-padding-top:calc(var(--nav) + var(--strip) + 16px);-webkit-text-size-adjust:100%;
scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg-app);color:var(--text-body);font:400 14px/1.6 var(--mono);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;border-radius:0}
button{cursor:pointer}
button:disabled,[aria-disabled=true]{cursor:not-allowed}
ul,ol{list-style:none}
svg{display:block;flex:none}
table{border-collapse:collapse;width:100%}
code,kbd,pre{font-family:var(--mono)}
[hidden]{display:none}
:focus{outline:0}
:focus-visible,.is-focus{outline:2px solid var(--focus);outline-offset:var(--fo)}
::selection{background:var(--coral);color:var(--ink)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-62px;z-index:110;padding:8px 12px;background:var(--block);color:var(--on-block);font-size:11px}
.skip:focus{top:8px}

/* icons */
.i{width:16px;height:16px;fill:currentColor}
.i-12{width:12px;height:12px}.i-16{width:16px;height:16px}.i-18{width:18px;height:18px}
.i-20{width:20px;height:20px}.i-24{width:24px;height:24px}.i-32{width:32px;height:32px}
.mono{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}

/* type */
.dis{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;color:var(--text-strong)}
.mi{font:400 9px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.t-13{font-size:13px}.t-12{font-size:12px;line-height:1.5}.t-11{font-size:11px;line-height:1.5}
.num{font-variant-numeric:tabular-nums}
.strong{color:var(--text-strong);font-weight:500}
.trunc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
code.c{font-size:.92em;overflow-wrap:anywhere;color:var(--text-strong)}
.prose code,td code,.lead code,figcaption code,li code,p code{overflow-wrap:anywhere}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;
border:1px solid var(--line);font-size:10px;letter-spacing:.06em;color:var(--text-strong);background:var(--bg-app);white-space:nowrap}

/* ── 3. DOCUMENT CHROME, only the rules used by the product ───────── */
.live{display:inline-flex;align-items:center;gap:6px;font-size:9px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--text-strong);white-space:nowrap}
.dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--live);animation:pulse var(--t-pulse) ease-in-out infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
.scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
.tbl{min-width:560px;font-size:12px;line-height:1.5;border-top:1px solid var(--line)}
.tbl th{font:400 9px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mid);text-align:left;padding:10px 12px 10px 0;
border-bottom:1px solid var(--line);vertical-align:bottom;white-space:nowrap}
.tbl td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.tbl td.mid{vertical-align:middle}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl tbody tr{transition:background var(--t-hover)}
.tbl--rows tbody tr:hover{background:var(--hover)}
.r{text-align:right}
.tbl th.r{text-align:right}
.facts{border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:4px 26px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:11px;line-height:1.6;letter-spacing:.1em;text-transform:uppercase;color:var(--text-strong)}
.facts dd{font-size:12px;line-height:1.6;max-width:90ch}
@media(max-width:760px){.facts>div{grid-template-columns:minmax(0,1fr)}}
.note{font-size:12px;line-height:1.6;max-width:72ch}
.note+.note{margin-top:8px}
.gap{margin-top:18px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.row-l{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.stack{display:flex;flex-direction:column;gap:8px;min-width:0}
.stack-l{display:flex;flex-direction:column;gap:16px;min-width:0}
.js .hv{opacity:0;transform:translateY(24px)}
.js .hv.on{opacity:1;transform:none;transition:opacity var(--t-entry-o) var(--ease-entry),transform var(--t-entry-t) var(--ease-entry)}
@media(prefers-reduced-motion:reduce){.js .hv{opacity:1;transform:none}}

/* ── 4. COVER, only .marks ───────────────────────────────────────── */
.marks{display:flex;flex-direction:column;gap:6px;margin-bottom:clamp(18px,3vh,34px)}
.marks i{display:block;height:1px;width:22px;background:var(--text-strong)}
.marks i:nth-child(2){width:12px}.marks i:nth-child(3){width:30px}

/* ── 5. SHARED CONTROLS ─────────────────────────────────────────────── */
/* icon button: square by default */
.ib{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;color:var(--text-strong);transition:background var(--t-hover),color var(--t-hover);flex:none}
.ib:hover,.ib.is-hover{background:var(--hover)}
.ib[aria-pressed=true]{background:var(--block);color:var(--on-block)}
.ib:disabled{opacity:.5}
.ib--sm{width:26px;height:26px}
.ib--box{border:1px solid var(--line)}
/* round button: player, composer add */
.rb{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);color:var(--text-strong);flex:none;transition:transform var(--t-hover),background var(--t-hover)}
.rb:hover,.rb.is-hover{transform:scale(var(--round-scale))}
.rb--play{background:var(--block);border-color:var(--block);color:var(--on-block)}
.rb--46{width:46px;height:46px}
.rb[aria-pressed=true]{color:var(--coral);border-color:var(--coral)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 16px;border:1px solid transparent;
font:700 11px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
transition:background var(--t-hover),color var(--t-hover),border-color var(--t-hover),transform var(--t-hover)}
.btn--sm{height:26px;padding:0 10px;font-size:10px;letter-spacing:.16em}
.btn--lg{height:46px;padding:0 26px;font-size:13px}
.btn--pri{background:var(--block);color:var(--on-block)}
.btn--pri:hover,.btn--pri.is-hover{background:var(--coral);color:var(--ink);transform:translateY(var(--lift))}
.btn--pri:active,.btn--pri.is-active{background:var(--block-2);color:var(--on-block);transform:none}
.btn--sec{border-color:var(--line);color:var(--text-strong)}
.btn--sec:hover,.btn--sec.is-hover{border-color:var(--text-strong);background:var(--hover)}
.btn--sec:active,.btn--sec.is-active{background:var(--bg-tint)}
.btn--gho{color:var(--text-strong)}
.btn--gho:hover,.btn--gho.is-hover{background:var(--hover)}
.btn--gho:active,.btn--gho.is-active{background:var(--bg-tint)}
.btn--dng{background:var(--danger);color:var(--ink)}
.btn--dng:hover,.btn--dng.is-hover{transform:translateY(var(--lift))}
.btn--dng:active,.btn--dng.is-active{transform:none;background:var(--coral)}
.btn:disabled,.btn.is-disabled{opacity:.5;transform:none;cursor:not-allowed}
.btn--sec:disabled:hover{background:none;border-color:var(--line)}
.btn--gho:disabled:hover{background:none}
.btn--pri:disabled:hover{background:var(--block);color:var(--on-block)}

.seg{display:inline-flex;border:1px solid var(--line)}
.seg button{height:26px;padding:0 10px;font-size:10px;font-weight:500;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--text-strong);white-space:nowrap;transition:background var(--t-hover),color var(--t-hover)}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{background:var(--hover)}
.seg button[aria-pressed=true]{background:var(--block);color:var(--on-block)}

.badge{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;background:var(--danger);color:var(--ink);
font:500 10px/1 var(--mono);font-variant-numeric:tabular-nums;flex:none}
.badge--ink{background:var(--block);color:var(--on-block)}
.badge--line{background:none;border:1px solid var(--line);color:var(--text-strong)}
.badge--coral{background:var(--coral);color:var(--ink)}
.badge--wide{padding:0 6px;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border:1px solid var(--line);font:400 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-strong);white-space:nowrap}
.tag--ink{background:var(--block);border-color:var(--block);color:var(--on-block)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;border:1px solid var(--line);font-size:11px;line-height:1;color:var(--text-strong);white-space:nowrap;transition:background var(--t-hover),color var(--t-hover)}
button.chip:hover,.chip.is-hover{background:var(--hover)}
.chip[aria-pressed=true]{background:var(--block);border-color:var(--block);color:var(--on-block)}
.chip .x{display:grid;place-items:center;width:16px;height:16px;margin-right:-4px}

/* avatar: one of the two allowed circles */
.av{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--figure);color:var(--ink);
font:700 13px/1 var(--display);letter-spacing:.02em;flex:none}
.av svg.art{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.av--80{width:80px;height:80px;font-size:26px}.av--56{width:56px;height:56px;font-size:17px}
.av--32{width:32px;height:32px;font-size:11px}.av--24{width:24px;height:24px;font-size:9px}.av--20{width:20px;height:20px;font-size:8px}
.av--ink{background:var(--ink);color:var(--paper);border:1px solid var(--inv-16)}
.st{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:1px solid var(--st-ring,var(--bg-app));background:var(--st-bg,var(--steel));overflow:hidden}
.av--24 .st,.av--20 .st{width:8px;height:8px}
.av--80 .st{width:16px;height:16px;right:2px;bottom:2px}.av--56 .st{width:12px;height:12px;right:0;bottom:0}
.st--ar{background:var(--live);animation:pulse var(--t-pulse) ease-in-out infinite}
.st--on{background:var(--steel)}
.st--away{background:var(--st-ring,var(--bg-app));box-shadow:none;outline:1px solid var(--steel);outline-offset:-3px}
.st--dnd{background:var(--steel)}
.st--dnd::after{content:'';position:absolute;left:1px;right:1px;top:50%;height:2px;margin-top:-1px;background:var(--ink)}
.st--off{background:var(--st-ring,var(--bg-app));outline:1px solid var(--line);outline-offset:-3px}

/* forms */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>label,.lab{font:400 9px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.inp{display:block;width:100%;height:34px;padding:0 10px;border:1px solid var(--line);background:none;color:var(--text-strong);font-size:13px;line-height:1.5;transition:border-color var(--t-hover)}
textarea.inp{height:auto;min-height:88px;padding:8px 10px;resize:vertical;line-height:1.6}
.inp::placeholder{color:var(--mid);opacity:1}
.inp:hover,.inp.is-hover{border-color:var(--text-strong)}
.inp:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.inp.is-focus{outline-offset:-2px}
.inp[aria-invalid=true]{border-color:var(--danger)}
.inp:disabled{opacity:.5;cursor:not-allowed;border-color:var(--line)}
.help{font-size:11px;line-height:1.5}
.err{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.5;color:var(--text-strong)}
.err::before{content:'';display:block;width:8px;height:8px;background:var(--danger);flex:none}
.sel{position:relative;display:block}
.sel select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}
.sel select option{background:var(--bg-raised);color:var(--text-strong)}
.sel>svg{position:absolute;right:10px;top:50%;margin-top:-8px;pointer-events:none;color:var(--text-strong)}
.search{position:relative;display:block;width:100%}
.search input{display:block;width:100%;height:34px;padding:0 34px 0 10px;border:1px solid var(--line);font-size:13px;color:var(--text-strong);transition:border-color var(--t-hover)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.search input::placeholder{color:var(--mid);opacity:1}
.search input:hover{border-color:var(--text-strong)}
.search input:focus-visible,.search input.is-focus{outline:2px solid var(--focus);outline-offset:-2px}
.search>svg{position:absolute;right:10px;top:50%;margin-top:-8px;pointer-events:none;color:var(--text-strong)}
.search--s input{height:26px;padding:0 26px 0 8px;font-size:11px}
.search--s>svg{right:6px}
.opt{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.5;color:var(--text-strong);cursor:pointer;min-height:22px}
.opt input{position:absolute;opacity:0;width:16px;height:16px;margin:0;cursor:inherit}
.opt>i{position:relative;display:grid;place-items:center;width:16px;height:16px;border:1px solid var(--text-strong);flex:none;color:var(--on-block);font-style:normal;transition:background var(--t-hover)}
.opt>i svg{width:12px;height:12px;visibility:hidden}
.opt input:checked+i{background:var(--block);border-color:var(--block)}
.opt input:checked+i svg{visibility:visible}
.opt input:focus-visible+i,.opt>i.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.opt:hover>i,.opt>i.is-hover{background:var(--hover)}
.opt:hover input:checked+i{background:var(--block)}
.opt--radio>i::after{content:'';display:block;width:8px;height:8px;background:var(--on-block);visibility:hidden}
.opt--radio input:checked+i::after{visibility:visible}
.opt:has(input:disabled){opacity:.5;cursor:not-allowed}
.opt--err>i{border-color:var(--danger)}
.sw{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.5;color:var(--text-strong);cursor:pointer;min-height:22px;position:relative}
.sw input{position:absolute;opacity:0;width:34px;height:18px;margin:0;cursor:inherit}
.sw>i{position:relative;display:block;width:34px;height:18px;border:1px solid var(--text-strong);flex:none;transition:background var(--t-hover)}
.sw>i::after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;background:var(--text-strong);transition:transform var(--t-hover),background var(--t-hover)}
.sw input:checked+i{background:var(--block);border-color:var(--block)}
.sw input:checked+i::after{transform:translateX(16px);background:var(--on-block)}
.sw input:focus-visible+i,.sw>i.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.sw:hover>i{background:var(--hover)}
.sw:hover input:checked+i{background:var(--block)}
.sw:has(input:disabled){opacity:.5;cursor:not-allowed}
.rg{position:relative;display:block;height:18px;width:100%;--v:50%}
.rg::before{content:'';position:absolute;left:0;right:0;top:8px;height:1px;background:var(--line)}
.rg>i{position:absolute;left:0;top:8px;height:1px;width:var(--v);background:var(--text-strong)}
.rg input{position:absolute;inset:0;width:100%;height:18px;margin:0;appearance:none;-webkit-appearance:none;background:none;cursor:pointer}
.rg input::-webkit-slider-runnable-track{height:18px;background:none}
.rg input::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:18px;background:var(--block);border:0;border-radius:0}
.rg input::-moz-range-track{height:18px;background:none}
.rg input::-moz-range-thumb{width:10px;height:18px;background:var(--block);border:0;border-radius:0}
.rg input:focus-visible{outline-offset:2px}
.rg input:disabled{opacity:.5;cursor:not-allowed}
.mx{display:grid;grid-template-columns:76px minmax(0,1fr) 44px;gap:12px;align-items:center;padding:8px 0}
.mx output{font-size:11px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-strong)}

/* menu, popover, tooltip, toast */
.pop{background:var(--bg-raised);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--text-body)}
.pop--live{position:fixed;z-index:80;animation:overlay-in var(--t-overlay) var(--ease-reveal);max-height:calc(100svh - 16px);overflow-y:auto}
@keyframes overlay-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.menu{width:220px;padding:6px 0}
.menu-i{display:flex;align-items:center;gap:10px;width:100%;height:32px;padding:0 12px;font-size:12px;line-height:1;color:var(--text-strong);text-align:left;transition:background var(--t-hover),color var(--t-hover)}
.menu-i>span{flex:1;min-width:0}
.menu-i:hover,.menu-i:focus-visible,.menu-i.is-hover{background:var(--block);color:var(--on-block);outline:0}
.menu-i--dng svg{color:var(--danger)}
.menu-i--dng:hover,.menu-i--dng:focus-visible,.menu-i--dng.is-hover{background:var(--danger);color:var(--ink);outline:0}
.menu-i--dng:hover svg,.menu-i--dng:focus-visible svg,.menu-i--dng.is-hover svg{color:var(--ink)}
.menu-i:disabled{opacity:.5;background:none;color:var(--text-strong)}
.menu hr{border:0;height:1px;background:var(--line);margin:6px 0}
.tip{position:fixed;z-index:90;padding:4px 8px;background:var(--block);color:var(--on-block);font:500 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.tip--static{position:relative;z-index:auto;display:inline-block}
.tip--static::after{content:'';position:absolute;left:50%;bottom:-6px;width:1px;height:6px;background:var(--block)}
.toasts{position:fixed;left:50%;top:calc(var(--tb) + 12px);z-index:100;display:flex;flex-direction:column;gap:6px;align-items:center;width:max-content;max-width:calc(100vw - 16px);transform:translateX(-50%);pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;min-height:34px;padding:6px 12px;background:var(--block);color:var(--on-block);font-size:12px;line-height:1.5;pointer-events:auto}
.toast svg{flex:none}
.toast--live{animation:overlay-in var(--t-overlay) var(--ease-reveal)}
.toast--dng{background:var(--danger);color:var(--ink)}
.toast--coral{background:var(--coral);color:var(--ink)}

/* modal */
.modal{position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 16px));height:fit-content;max-height:calc(100svh - 16px);padding:0;border:1px solid var(--line);background:var(--bg-raised);color:var(--text-body);box-shadow:var(--shadow);overflow:auto}
.modal[open]{animation:overlay-in var(--t-overlay) var(--ease-reveal)}
.modal::backdrop{background:rgba(18,20,26,.55);animation:fade-in var(--t-overlay) var(--ease-reveal)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.m-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.m-h h2,.m-h h4{font:700 15px/1.2 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--text-strong)}
.m-b{display:flex;flex-direction:column;gap:12px;padding:16px;font-size:13px;line-height:1.6}
.m-f{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.modal--static{position:static;margin:0;width:100%;max-height:none;height:auto;overflow:visible}

/* profile popover */
.prof{width:280px}
.prof-b{height:62px;background:var(--ink);position:relative}
.prof-b .bars{position:absolute;left:12px;right:12px;bottom:10px;--bar:var(--paper);--bar-2:var(--inv-55)}
.prof-av{margin:-34px 0 0 12px;position:relative;--st-ring:var(--bg-raised)}
.prof-in{padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px}
.prof-in h4{font:700 17px/1.2 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--text-strong)}
.prof dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:11px;line-height:1.5;padding-top:8px;border-top:1px solid var(--line)}
.prof dt{font:400 9px/1.8 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.prof dd{color:var(--text-strong)}
.pop-list{width:320px;max-width:calc(100vw - 16px)}
.pop-h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.pop-i{display:block;width:100%;padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--text-body);transition:background var(--t-hover),padding-left var(--t-hover)}
.pop-i:last-child{border-bottom:0}
button.pop-i:hover{background:var(--hover);padding-left:16px}
.pop-i b{display:block;font-weight:500;color:var(--text-strong)}
.pop-e{padding:16px 12px;font-size:12px;line-height:1.5}

/* notice */
.notice{position:relative;display:flex;gap:10px;align-items:flex-start;padding:10px 12px 10px 16px;border:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--text-body)}
.notice::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--text-strong)}
.notice svg{margin-top:1px;color:var(--text-strong)}
.notice b{font-weight:500;color:var(--text-strong)}
.notice--c::before{background:var(--coral)}
.notice--r::before{background:var(--danger)}

/* rules */
.hr{height:1px;background:var(--line);border:0}
.hr-l{display:flex;align-items:center;gap:12px}
.hr-l::before,.hr-l::after{content:'';flex:1;height:1px;background:var(--line)}
.new{display:flex;align-items:center;gap:8px;margin:16px 16px 0}
.new::before{content:'';flex:1;height:1px;background:var(--coral)}
.new b{font:500 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;background:var(--coral);color:var(--ink);padding:4px 6px}
.date{margin:16px 16px 0}

/* progress, waveform, counters */
.bar{display:block;height:6px;border:1px solid var(--line);position:relative}
.bar>i{position:absolute;left:-1px;top:-1px;bottom:-1px;width:var(--w,50%);background:var(--text-strong)}
.bar--c>i{background:var(--coral)}.bar--r>i{background:var(--danger)}
.bar--th{height:1px;border:0;background:var(--line)}
.bar--th>i{left:0;top:0;bottom:0}
.seg-bar{display:grid;grid-template-columns:repeat(var(--n,12),1fr);gap:2px;height:12px}
.seg-bar>i{display:block;border:1px solid var(--line)}
.seg-bar>i.on{background:var(--text-strong);border-color:var(--text-strong)}
.bars{display:flex;align-items:center;gap:2px;height:26px;--bar:var(--paper);--bar-2:var(--inv-55)}
.bars>i{display:block;flex:1 1 0;min-width:1px;height:100%;background:var(--bar-2);transform:scaleY(var(--h,.5));transform-origin:center;
transition:transform var(--t-hover),background var(--t-hover);animation:wave var(--t-wave) ease-in-out var(--d,0s) infinite alternate}
.bars>i.on{background:var(--bar)}
.bars.is-idle>i{animation:none;transform:scaleY(.16)}
.bars--static>i{animation:none}
@keyframes wave{from{transform:scaleY(calc(var(--h,.5)*.35))}to{transform:scaleY(var(--h,.5))}}
.bars--xl{height:62px;gap:2px}
.count{display:flex;flex-direction:column;gap:4px;min-width:0}
.count b{font:500 26px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--text-strong)}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;border:1px solid var(--line)}
.empty h4{font:600 17px/1.2 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--text-strong)}
.empty p{font-size:12px;line-height:1.6;max-width:44ch}
.empty svg{color:var(--text-strong)}
.pg{display:inline-flex;flex-wrap:wrap;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pg button,.pg span{display:grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-strong);transition:background var(--t-hover),color var(--t-hover)}
.pg button:hover{background:var(--hover)}
.pg button[aria-current]{background:var(--block);color:var(--on-block)}
.pg button:disabled{opacity:.5;background:none}
.tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{position:relative;height:34px;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);white-space:nowrap;transition:color var(--t-hover)}
.tabs button:hover,.tabs button.is-hover{color:var(--text-strong)}
.tabs button[aria-selected=true]{color:var(--text-strong)}
.tabs button[aria-selected=true]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--coral)}
.tabs button:disabled{opacity:.5}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:9px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.crumb a:hover{color:var(--text-strong)}
.crumb [aria-current]{color:var(--text-strong);font:700 15px/1.2 var(--display);letter-spacing:-.01em}
.crumb svg{width:12px;height:12px}

/* skeleton: outlines only */
.skel{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;animation:pulse var(--t-pulse) ease-in-out infinite}
.skel>i{display:block;width:40px;height:40px;border-radius:50%;border:1px solid var(--line)}
.skel>div{display:flex;flex-direction:column;gap:8px;padding-top:2px}
.skel b{display:block;height:10px;border:1px solid var(--line);width:var(--w,100%)}
.skel-rows{display:flex;flex-direction:column;gap:18px}

/* thin scrollbar specimen */
.thin{height:120px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--steel) transparent;font-size:12px;line-height:1.6;border:1px solid var(--line);padding:8px 10px}

/* ── 6. SHELL ───────────────────────────────────────────────────────── */
.ruler{display:grid;grid-template-columns:var(--rail) var(--side) minmax(0,1fr) var(--mem);margin-bottom:6px}
.ruler span{display:block;padding-left:6px;border-left:1px solid var(--line);font:400 9px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mid);white-space:nowrap}
.ruler span:last-child{border-right:1px solid var(--line)}
.app{position:relative;display:grid;grid-template-rows:var(--tb) minmax(0,1fr);grid-template-columns:var(--rail) var(--side) minmax(0,1fr) var(--mem);
min-height:520px;background:var(--bg-app);overflow:hidden;color:var(--text-body)}
.app.no-mem{grid-template-columns:var(--rail) var(--side) minmax(0,1fr)}
.app.no-mem .mem{display:none}
.app-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin-top:8px}

/* titlebar */
.tb{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--bg-app);border-bottom:1px solid var(--line)}
.tb-w{font:700 11px/1 var(--display);letter-spacing:.22em;color:var(--text-strong);white-space:nowrap}
.tb-end{margin-left:auto;display:flex;align-items:center;gap:4px}
.tb-end .live{margin-left:8px}
.tb .ib{width:26px;height:26px}

/* rail */
.rail{position:relative;z-index:21;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;min-height:0;background:var(--bg-rail);border-right:1px solid var(--line);overflow-y:auto;scrollbar-width:none}
.rail-sep{display:block;width:32px;height:1px;background:var(--line);flex:none}
.rail-list{display:flex;flex-direction:column;align-items:center;gap:8px}
.rail-end{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;align-items:center;gap:8px}
.tile{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);color:var(--text-strong);font:700 12px/1 var(--display);letter-spacing:.02em;flex:none;transition:background var(--t-hover),color var(--t-hover)}
.tile:hover,.tile.is-hover{background:var(--hover)}
.tile[aria-current=true],.tile.is-active{background:var(--block);border-color:var(--block);color:var(--on-block)}
.tile[aria-current=true]::before,.tile.is-active::before{content:'';position:absolute;left:-5px;top:-1px;bottom:-1px;width:3px;background:var(--coral)}
.tile.is-unread::before{content:'';position:absolute;left:-5px;top:50%;width:3px;height:10px;margin-top:-5px;background:var(--text-strong)}
.tile[aria-current=true].is-unread::before{top:-1px;bottom:-1px;height:auto;margin:0;background:var(--coral)}
.tile .badge{position:absolute;right:-4px;bottom:-4px}
.tile--home{border-color:transparent}
.tile--home .mono{width:26px;height:26px}
.tile--home[aria-current=true]{border-color:var(--block)}
.tile--grid svg.g{position:absolute;inset:0;width:100%;height:100%;stroke:var(--line);stroke-width:1;fill:none}
.tile--grid .i{position:relative}

/* sidebar */
.side{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg-sidebar);border-right:1px solid var(--line)}
.side-h{display:flex;align-items:center;height:var(--hd);flex:none;border-bottom:1px solid var(--line)}
.side-t{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:100%;padding:0 8px 0 12px;font:700 14px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--text-strong);text-align:left;transition:background var(--t-hover)}
.side-t:hover{background:var(--bg-tint)}
.side-t span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.side-h .ib{margin-right:8px}
.side-l{flex:1;min-height:0;overflow-y:auto;padding:12px 8px;scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
.cat+.cat{margin-top:12px}
.cat-b{display:flex;align-items:center;justify-content:space-between;width:100%;height:26px;padding:0 4px;font:400 9px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mid);transition:color var(--t-hover)}
.cat-b:hover{color:var(--text-strong)}
.cat-b svg{width:12px;height:12px;transition:transform var(--t-hover)}
.cat-b[aria-expanded=false] svg{transform:rotate(-90deg)}
.ch{position:relative;display:flex;align-items:center;gap:6px;width:100%;height:var(--row);padding:0 8px 0 4px;font-size:13px;line-height:1;color:var(--text-body);text-align:left;transition:background var(--t-hover),padding-left var(--t-hover),color var(--t-hover)}
.ch span.n{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.4}
.ch:hover,.ch.is-hover{background:var(--hover);padding-left:var(--shift);color:var(--text-strong)}
.ch[aria-current=true],.ch.is-active{background:var(--block);color:var(--on-block);padding-left:10px}
.ch[aria-current=true]::before,.ch.is-active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--coral)}
.ch.is-unread{font-weight:500;color:var(--text-strong)}
.ch.is-unread:not([aria-current=true])::after{content:'';position:absolute;left:-8px;top:50%;width:3px;height:8px;margin-top:-4px;background:var(--text-strong)}
.ch.is-locked,.ch[aria-disabled=true]{color:var(--mid)}
.ch.is-locked:hover{background:none;padding-left:4px;color:var(--mid)}
.vp{display:flex;flex-direction:column;gap:2px;padding:2px 0 4px 22px}
.vp li{display:flex;align-items:center;gap:6px;height:26px;font-size:12px;color:var(--text-body)}

/* player: the user panel */
.me{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:var(--bg-player);flex:none;color:var(--paper);--line:var(--inv-16);--text-strong:var(--paper);--text-body:var(--inv-70);--mid:var(--inv-60);--block:var(--paper);--on-block:var(--ink);--fo:2px;--st-ring:var(--bg-player);--hover:var(--inv-10)}
.me-top{display:flex;align-items:center;gap:8px;min-width:0}
.me-txt{min-width:0;flex:1}
.me-txt b{display:block;font:600 12px/1.3 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--paper);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.me-txt span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.me-ctl{display:flex;align-items:center;gap:6px}
.me-tm{margin-left:auto;font-size:11px;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--inv-70)}
.me .rb[aria-pressed=true]{background:var(--coral);border-color:var(--coral);color:var(--ink)}

/* chat */
.chat{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg-panel)}
.chat-h{display:flex;align-items:center;gap:8px;height:var(--hd);flex:none;padding:0 12px;border-bottom:1px solid var(--line)}
.chat-g{color:var(--text-strong);flex:none}
.chat-t{font:700 15px/1.2 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:40px}
.chat-tp{flex:1 1 0;min-width:0;padding-left:8px;border-left:1px solid var(--line);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-a{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto}
.chat-a .search{width:200px;margin-right:6px}
.chat-menu{display:none}
.msgs{flex:1;min-height:0;overflow-y:auto;padding:0 0 12px;scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
.msgs:focus-visible{outline-offset:-2px}
.start{padding:26px 16px 10px}
.start .ib{margin-bottom:10px}
.start h3{font:700 26px/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--text-strong);overflow-wrap:anywhere}
.start p{margin-top:6px;font-size:12px;line-height:1.5;max-width:60ch}
.result{padding:12px 16px 0}
.msg{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding:2px 16px 2px 14px;border-left:2px solid transparent;transition:background var(--t-hover),border-color var(--t-hover)}
.msg--first{margin-top:16px;padding-top:4px}
.msg:hover,.msg:focus-within,.msg.is-hover{background:var(--hover);border-left-color:var(--coral)}
.msg:focus-visible{outline-offset:-2px}
.msg--ment{background:var(--hover);border-left-color:var(--coral)}
.msg--in{animation:rise var(--t-reveal) var(--ease-reveal)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.msg-gut{position:relative;min-width:0}
.msg-gut .mi{display:block;visibility:hidden;line-height:22px;font-size:9px;letter-spacing:.06em;text-align:right;white-space:nowrap;margin-right:-6px}
.msg:hover .msg-gut .mi,.msg:focus-within .msg-gut .mi{visibility:visible}
.msg-b{min-width:0}
.msg-m{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.msg-a{font:600 13px/1.6 var(--display);letter-spacing:.02em;color:var(--text-strong);text-transform:uppercase}
.msg-x{font-size:14px;line-height:1.6;overflow-wrap:anywhere;color:var(--text-body)}
.msg-x code{padding:0 4px;background:var(--bg-tint);font-size:12px;color:var(--text-strong)}
.ment{padding:0 2px;background:var(--bg-tint);color:var(--text-strong);font:inherit;font-weight:500;transition:background var(--t-hover),color var(--t-hover)}
button.ment:hover{background:var(--block);color:var(--on-block)}
.msg-sys{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.5;color:var(--text-body)}
.reply{display:flex;align-items:center;gap:6px;min-width:0;grid-column:2;margin-bottom:2px;font-size:11px;line-height:1.5;color:var(--text-body)}
.reply::before{content:'';display:block;width:22px;height:8px;margin-top:6px;border-left:1px solid var(--mid);border-top:1px solid var(--mid);flex:none}
.reply b{font-weight:500;color:var(--text-strong);flex:none}
.tool{position:absolute;top:-12px;right:16px;display:none;background:var(--bg-panel);border:1px solid var(--line);z-index:2}
.msg:hover .tool,.msg:focus-within .tool,.tool.is-on{display:flex}
.tool--static{position:static;display:inline-flex}
.code{margin-top:6px;background:var(--ink-2);color:var(--paper);border:1px solid var(--inv-14);font-size:12px;line-height:1.6;max-width:640px;--fo:2px}
.code-h{display:flex;justify-content:space-between;align-items:center;padding:4px 10px;border-bottom:1px solid var(--inv-14);color:var(--inv-60);font:400 9px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.code pre{padding:8px 10px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
.code code{background:none;padding:0;color:var(--paper);font-size:12px}
.quote{margin-top:6px;padding:4px 12px;border-left:1px solid var(--text-strong);background:var(--bg-panel);font-size:13px;line-height:1.6;color:var(--text-strong);max-width:640px}
.att{margin-top:6px;max-width:360px;border:1px solid var(--line)}
.att svg{display:block;width:100%;height:auto;background:var(--ink)}
.att figcaption{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-top:1px solid var(--line)}
.file{display:flex;align-items:center;gap:10px;margin-top:6px;max-width:420px;min-height:46px;padding:6px 10px;border:1px solid var(--line)}
.file>div{min-width:0;flex:1}
.file b{display:block;font-weight:500;font-size:12px;line-height:1.5;color:var(--text-strong);overflow-wrap:anywhere}
.embed{margin-top:6px;max-width:520px;background:var(--bg-player);color:var(--paper);--line:var(--inv-14);--mid:var(--inv-60);--text-strong:var(--paper);--text-body:var(--inv-70);--block:var(--paper);--on-block:var(--ink);--hover:var(--inv-10);--fo:2px;padding:12px}
.embed h4{font:600 17px/1.2 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--paper);margin:4px 0}
.embed p{font-size:12px;line-height:1.5;color:var(--inv-70)}
.embed .bars{margin-top:8px}
.slots{margin-top:6px;max-width:640px;border-top:1px solid var(--line)}
.slot{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:40px;padding:6px 0;border-bottom:1px solid var(--line);transition:background var(--t-hover),padding-left var(--t-hover)}
.slot:hover,.slot.is-hover{background:var(--hover);padding-left:var(--shift)}
.slot.now{background:var(--block);color:var(--on-block);padding-left:10px;padding-right:10px}
.slot .tm{font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.slot .nm{font:600 13px/1.3 var(--display);text-transform:uppercase;letter-spacing:.02em}
.slot .stt{font:400 9px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.slot.now .stt{color:var(--on-block)}
.react{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.re{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 6px;border:1px solid var(--line);font-size:11px;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-strong);transition:background var(--t-hover),color var(--t-hover)}
.re:hover{background:var(--hover)}
.re[aria-pressed=true]{background:var(--block);border-color:var(--block);color:var(--on-block)}
.re svg{width:12px;height:12px}
.composer{flex:none;min-height:var(--composer);padding:8px 16px;display:flex;flex-direction:column;justify-content:center}
.c-reply{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px;border:1px solid var(--line);border-bottom:0;font-size:11px;line-height:1.5}
.c-reply[hidden]{display:none}
.c-box{display:flex;align-items:center;gap:6px;height:48px;padding:0 8px;border:1px solid var(--text-strong);background:var(--bg-panel)}
.c-box:has(input:focus-visible),.c-box.is-focus{outline:2px solid var(--focus);outline-offset:-2px}
.c-box input{flex:1;min-width:0;height:100%;padding:0 4px;font-size:14px;color:var(--text-strong);outline:0}
.c-box input::placeholder{color:var(--mid);opacity:1}
.c-send{display:grid;place-items:center;width:32px;height:32px;background:var(--block);color:var(--on-block);flex:none;transition:background var(--t-hover),color var(--t-hover)}
.c-send:hover{background:var(--coral);color:var(--ink)}

/* members */
.mem{min-height:0;overflow-y:auto;padding:12px 8px;background:var(--bg-app);scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
.mem-g{padding:0 4px;margin-bottom:4px}
.mem-g:not(:first-child){margin-top:16px}
.mem-r{display:flex;align-items:center;gap:8px;width:100%;height:var(--row-mem);padding:0 4px;text-align:left;transition:background var(--t-hover),padding-left var(--t-hover);--st-ring:var(--bg-app)}
.mem-r:hover,.mem-r.is-hover{background:var(--hover);padding-left:var(--shift)}
.mem-r:focus-visible{outline-offset:-2px}
.mem-r.is-away{opacity:.5}
.mem-r>div{min-width:0;flex:1}
.mem-n{display:block;font-size:13px;line-height:1.3;color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mem-r .mi{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.scrim{display:none}

@media(max-width:1179.98px){
.ruler{grid-template-columns:var(--rail) var(--side) minmax(0,1fr)}
.ruler span:nth-child(4){display:none}
.ruler span:nth-child(3){border-right:1px solid var(--line)}
.app,.app.no-mem{grid-template-columns:var(--rail) var(--side) minmax(0,1fr)}
.mem,.act-mem{display:none}
}
@media(max-width:899.98px){
.ruler{grid-template-columns:var(--rail) minmax(0,1fr)}
.ruler span:nth-child(2){display:none}
.app,.app.no-mem{grid-template-columns:var(--rail) minmax(0,1fr)}
.side{position:absolute;top:var(--tb);bottom:0;left:var(--rail);width:var(--side);max-width:calc(100% - var(--rail));z-index:20;transform:translateX(-100%);visibility:hidden;
transition:transform var(--t-overlay) var(--ease-reveal),visibility var(--t-overlay);border-right:1px solid var(--line)}
.app.is-drawer .side{transform:none;visibility:visible}
.app.is-drawer .scrim{display:block;position:absolute;inset:var(--tb) 0 0 var(--rail);z-index:10;background:var(--scrim);animation:fade-in var(--t-overlay) var(--ease-reveal)}
.chat-menu{display:inline-grid}
.chat-a .search{width:140px}
.chat-tp{display:none}
.chat-a{margin-left:auto}
}
@media(max-width:619.98px){
.chat-a,.chat-tp{display:none}
.composer{padding:8px}
.c-opt{display:none}
.msg{padding-right:8px;padding-left:6px;column-gap:8px;grid-template-columns:32px minmax(0,1fr)}
.msg .av{width:32px;height:32px;font-size:11px}
.tool{right:8px}
.tb-v{display:none}
.start{padding:18px 8px 10px}
.new,.date{margin-left:8px;margin-right:8px}
}