/* Nook — XChat-style web prototype. Tokens: see tokens.md */
:root,[data-scope="light"]{
  --accent:#1170CF; --accent-bright:#1D9BF0; --accent-soft:rgba(29,155,240,.12); --on-accent:#fff;
  --bg:#FFFFFF; --sunken:#EFF3F4; --raised:#FFFFFF; --hover:rgba(15,20,25,.05); --press:rgba(15,20,25,.09);
  --border:#EFF3F4; --border-mid:#CFD9DE; --border-strong:#8494A0;
  --text:#0F1419; --muted:#536471; --faint:#8B98A5;
  --ink:#0F1419; --on-ink:#FFFFFF; --success:#00875A; --danger:#D3192A; --danger-soft:rgba(211,25,42,.08);
  --focus:#1170CF; --link:#1170CF;
  --shadow-pop:0 0 0 1px rgba(15,20,25,.06),0 8px 28px rgba(15,20,25,.14);
  --scrim:rgba(15,20,25,.4);
  --nav-sel:rgba(22,24,29,.065); --nav-hover:rgba(22,24,29,.035);
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.2,.8,.2,1);
  --fs:15px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --bg:#000000; --sunken:#202327; --raised:#16181C; --hover:rgba(231,233,234,.06); --press:rgba(231,233,234,.1);
    --border:#2F3336; --border-mid:#2F3336; --border-strong:#5C646B;
    --text:#E7E9EA; --muted:#8B9196; --faint:#536471;
    --ink:#E7E9EA; --on-ink:#0F1419; --success:#00BA7C; --danger:#F4212E; --danger-soft:rgba(244,33,46,.12);
    --focus:#1D9BF0; --link:#1D9BF0; --accent-soft:rgba(29,155,240,.16);
    --shadow-pop:0 0 0 1px #2F3336,0 12px 32px rgba(0,0,0,.6); --scrim:rgba(91,112,131,.4);
    --nav-sel:rgba(255,255,255,.07); --nav-hover:rgba(255,255,255,.035);
    color-scheme:dark;
  }
}
html[data-theme="dark"],[data-scope="dark"]{
  --bg:#000000; --sunken:#202327; --raised:#16181C; --hover:rgba(231,233,234,.06); --press:rgba(231,233,234,.1);
  --border:#2F3336; --border-mid:#2F3336; --border-strong:#5C646B;
  --text:#E7E9EA; --muted:#8B9196; --faint:#536471;
  --ink:#E7E9EA; --on-ink:#0F1419; --success:#00BA7C; --danger:#F4212E; --danger-soft:rgba(244,33,46,.12);
  --focus:#1D9BF0; --link:#1D9BF0; --accent-soft:rgba(29,155,240,.16);
  --shadow-pop:0 0 0 1px #2F3336,0 12px 32px rgba(0,0,0,.6); --scrim:rgba(91,112,131,.4);
  --nav-sel:rgba(255,255,255,.07); --nav-hover:rgba(255,255,255,.035);
  color-scheme:dark;
}
html[data-size="small"]{--fs:14px} html[data-size="large"]{--fs:17px}
*{box-sizing:border-box;margin:0;padding:0}
html,body,#app{height:100%}
body{background:var(--bg);color:var(--text);font:400 var(--fs)/1.35 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
button:disabled{cursor:default}
a{color:var(--link);text-decoration:none}
[hidden]{display:none!important}
a:hover{text-decoration:underline}
a.set-row,a.rail-btn,a.mark-btn,a.btn,.join-top a{color:inherit;text-decoration:none}
a.btn-ink{color:var(--on-ink)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn:focus-visible,.icon-btn:focus-visible,.rail-btn:focus-visible,.tab:focus-visible,.send:focus-visible,.swatch:focus-visible,.react:focus-visible,.chip:focus-visible,.mark-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.swatch[aria-pressed="true"]:focus-visible{box-shadow:0 0 0 2px var(--sunken),0 0 0 4px var(--focus)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:16px;height:16px} svg.i.xs{width:14px;height:14px} svg.i.lg{width:24px;height:24px}
.mark{display:inline-flex;flex:none;height:28px;aspect-ratio:413/448;line-height:0}
.mark img{display:block;height:100%;width:100%;object-fit:contain}
.mark .on-dark{display:none}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .mark .on-light{display:none}html:not([data-theme="light"]) .mark .on-dark{display:block}}
html[data-theme="dark"] .mark .on-light,[data-scope="dark"] .mark .on-light{display:none}
html[data-theme="dark"] .mark .on-dark,[data-scope="dark"] .mark .on-dark{display:block}
[data-scope="light"] .mark .on-light{display:block}[data-scope="light"] .mark .on-dark{display:none}
.lockup{display:block;height:40px}
.lockup .on-dark{display:none}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .lockup .on-light{display:none}html:not([data-theme="light"]) .lockup .on-dark{display:block}}
html[data-theme="dark"] .lockup .on-light{display:none} html[data-theme="dark"] .lockup .on-dark{display:block}
.lockup img{height:100%;width:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;min-width:104px;border-radius:999px;font-weight:700;font-size:15px;white-space:nowrap;transition:transform .22s var(--spring),background-color .15s,opacity .15s;user-select:none}
.btn:active:not(:disabled),.press:active:not(:disabled){transform:scale(.96)}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-ink:hover:not(:disabled){opacity:.88}
.btn-ink:disabled{opacity:.4}
.btn-ghost{color:var(--text);min-width:0;padding:0 16px}
.btn-ghost.muted{color:var(--muted)}
.btn-ghost:hover:not(:disabled){background:var(--hover)}
.btn-outline{border:1px solid var(--border-strong);color:var(--text)}
.btn-outline:hover:not(:disabled){background:var(--hover)}
.btn-danger{color:var(--danger)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-sm{height:32px;padding:0 14px;font-size:14px;min-width:0}
.btn-block{width:100%;height:44px}
.icon-btn{width:40px;height:40px;border-radius:999px;display:inline-grid;place-items:center;color:var(--text);transition:transform .22s var(--spring),background-color .15s;flex:none}
.icon-btn:hover:not(:disabled){background:var(--hover)}
.icon-btn:active:not(:disabled){transform:scale(.9)}
.icon-btn.muted{color:var(--muted)}
.icon-btn.sm{width:32px;height:32px}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex:none}
.spinner.sm{width:14px;height:14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* tooltip */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--on-ink);font-size:12px;font-weight:500;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:50;animation:fade .15s .35s both}
[data-tip-side="right"]:hover::after,[data-tip-side="right"]:focus-visible::after{top:50%;left:calc(100% + 8px);transform:translateY(-50%)}
[data-tip-side="top"]:hover::after{top:auto;bottom:calc(100% + 6px)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- avatar ---------- */
.av{--s:40px;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:calc(var(--s)*.4);flex:none;overflow:hidden;user-select:none;letter-spacing:-.01em;background-size:cover;background-position:center}
.av.group{border-radius:30%}
.av-stack{display:flex}
.av-stack .av{box-shadow:0 0 0 2px var(--bg);margin-left:-8px}
.av-stack .av:first-child{margin-left:0}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:600}
.input-wrap{position:relative;display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:12px;background:var(--bg);box-shadow:0 0 0 0 transparent;transition:border-color .24s var(--ease),box-shadow .28s var(--spring);min-height:52px}
.input-wrap:focus-within{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.input-wrap.err{border-color:var(--danger)}
.input-wrap.err:focus-within{box-shadow:0 0 0 1px var(--danger)}
.input-wrap input,.input-wrap textarea{flex:1;border:0;background:none;padding:14px 14px;outline:none;min-width:0;font-size:16px}
.input-wrap textarea{resize:none;min-height:96px;line-height:1.4}
.input-wrap .prefix{padding-left:14px;color:var(--muted);font-size:16px;margin-right:-12px}
.input-wrap .suffix{padding-right:10px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.hint{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;min-height:18px}
.hint.err{color:var(--danger)} .hint.ok{color:var(--success)}
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--danger-soft);color:var(--text);font-size:14px}
.banner svg{color:var(--danger);margin-top:1px}

/* toggle */
.toggle{position:relative;width:44px;height:26px;flex:none}
.toggle input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.toggle span{position:absolute;inset:0;border-radius:999px;background:var(--border-strong);transition:background .2s}
.toggle span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .25s var(--spring)}
.toggle input:checked+span{background:var(--accent)}
.toggle input:checked+span::after{transform:translateX(18px)}
.toggle input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.toggle input:disabled{cursor:default}.toggle input:disabled+span{opacity:.45}
/* radio */
.radio{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;cursor:pointer;min-height:56px}
.radio:hover{background:var(--hover)}
.radio input{appearance:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);flex:none;display:grid;place-items:center;transition:border-color .15s;cursor:pointer;margin-left:auto}
.radio input:checked{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 5px,transparent 5.5px)}
.radio input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.radio .t{font-weight:600}.radio .s{font-size:13px;color:var(--muted)}

/* ---------- auth ---------- */
.auth{height:100%;overflow:auto;display:grid;place-items:center;padding:48px 24px}
.auth-col{width:100%;max-width:400px;display:flex;flex-direction:column;gap:20px}
.auth-col .mark{height:40px;margin-bottom:12px;align-self:flex-start}
.auth h1{font-size:31px;line-height:36px;font-weight:800;letter-spacing:-.02em}
.auth .sub{color:var(--muted);margin-top:-12px}
.auth form{display:flex;flex-direction:column;gap:16px}
.auth .foot{color:var(--muted);font-size:15px}
.auth .foot a{font-weight:600}
.meter{display:flex;gap:4px;margin-top:2px}
.meter i{flex:1;height:4px;border-radius:2px;background:var(--border-mid);transition:background .25s}
.meter.s1 i:nth-child(1){background:var(--danger)}
.meter.s2 i:nth-child(-n+2){background:var(--muted)}
.meter.s3 i{background:var(--success)}
.auth-legal{font-size:13px;color:var(--muted)}

/* PIN — one focus ring that glides between boxes */
.pin{display:flex;gap:12px;justify-content:center;position:relative;--box:52px;--gap:12px}
.pin input{width:var(--box);height:60px;border-radius:12px;border:1px solid var(--border-strong);background:var(--bg);text-align:center;font-size:24px;font-weight:700;caret-color:transparent;transition:border-color .2s var(--ease),transform .25s var(--spring);position:relative;z-index:1}
.pin input:focus,.pin input:focus-visible{outline:none;box-shadow:none}
.pin input.filled{animation:digitIn .26s var(--spring)}
@keyframes digitIn{0%{transform:scale(.9)}100%{transform:scale(1)}}
.pin-ring{position:absolute;top:-1px;left:0;width:calc(var(--box) + 2px);height:62px;margin-left:-1px;border-radius:13px;border:2px solid var(--focus);pointer-events:none;z-index:2;opacity:0;transform:translateX(0) scale(.96);transition:transform .38s cubic-bezier(.3,1.35,.5,1),opacity .2s var(--ease),border-color .2s}
.pin:focus-within .pin-ring{opacity:1}
.pin-ring.on{transform:translateX(var(--x,0px)) scale(1)}
.pin.err{animation:shake .35s}
.pin.err .pin-ring{border-color:var(--danger)}
.pin.err input{border-color:var(--danger)}
.pin.ok input{border-color:var(--success)}
.pin.ok .pin-ring{border-color:var(--success)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---------- onboarding ---------- */
.ob{height:100%;display:grid;place-items:center;padding:32px;overflow:auto}
.ob-frame{width:560px;display:flex;flex-direction:column;gap:0}
.ob-top{display:flex;align-items:center;justify-content:space-between;height:48px;margin-bottom:16px}
.ob-top .mark{height:28px}
.dots{display:flex;gap:6px}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--border-mid);transition:width .3s var(--ease),background .3s}
.dots i.on{width:18px;background:var(--text)}
.ob-viewport{position:relative;overflow:hidden;height:500px}
.ob-step{position:absolute;inset:0;display:flex;flex-direction:column}
.ob-stage{height:300px;border-radius:20px;background:var(--sunken);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.ob-text{padding:28px 4px 0}
.ob-text h2{font-size:24px;line-height:30px;font-weight:800;letter-spacing:-.015em;display:flex;align-items:center;gap:10px}
.ob-text p{color:var(--muted);margin-top:6px;font-size:16px;max-width:46ch}
.ob-foot{display:flex;align-items:center;gap:8px;margin-top:auto}
.ob-foot .count{color:var(--muted);font-size:14px;margin-right:auto;padding-left:16px}
.ob-foot .spacer{margin-right:auto}
.slide-in-r{animation:inR .38s var(--ease) both}.slide-out-l{animation:outL .38s var(--ease) both}
.slide-in-l{animation:inL .38s var(--ease) both}.slide-out-r{animation:outR .38s var(--ease) both}
@keyframes inR{from{transform:translateX(56px);opacity:0}}@keyframes outL{to{transform:translateX(-56px);opacity:0}}
@keyframes inL{from{transform:translateX(-56px);opacity:0}}@keyframes outR{to{transform:translateX(56px);opacity:0}}
.swatches{display:flex;gap:10px}
.swatch{width:32px;height:32px;border-radius:50%;transition:transform .2s var(--spring);position:relative}
.swatch:hover{transform:scale(1.08)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--sunken),0 0 0 4px var(--text)}
.check-pop{width:24px;height:24px;border-radius:50%;background:var(--success);color:#fff;display:inline-grid;place-items:center;animation:pop .4s var(--spring) both}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.mini-row{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:16px;padding:12px 14px;width:340px;box-shadow:var(--shadow-pop)}
.mini-row .n{font-weight:700}.mini-row .p{color:var(--muted);font-size:14px}
.people{width:400px;background:var(--bg);border-radius:16px;padding:8px;box-shadow:var(--shadow-pop);max-height:268px;overflow:auto}
.people .person{padding:6px 8px}
.person{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px}
.person .n{font-weight:700;line-height:1.2}.person .h{color:var(--muted);font-size:14px}
.person .grow{flex:1;min-width:0}
.btn.add-btn[aria-pressed="true"],.btn.add-btn[aria-pressed="true"]:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.btn.add-btn{min-width:84px}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:76px 380px 1fr auto;height:100%}
.shell.no-list{grid-template-columns:76px 380px 1fr auto}
.rail{display:flex;flex-direction:column;align-items:center;padding:12px 0 16px;gap:4px;border-right:1px solid var(--border)}
.rail .mark-btn{width:48px;height:48px;border-radius:999px;display:grid;place-items:center;margin-bottom:8px}
.rail .mark-btn:hover{background:var(--hover)}
.rail .mark{height:28px}
.rail-btn{width:52px;height:52px;border-radius:999px;display:grid;place-items:center;color:var(--text);position:relative;transition:transform .22s var(--spring),background-color .15s}
.rail-btn:hover{background:var(--hover)}
.rail-btn:active{transform:scale(.92)}
.rail-btn svg{width:26px;height:26px}
.rail-btn[aria-current="page"] svg{stroke-width:2.4}
.rail-btn .dot{position:absolute;top:10px;right:10px;width:10px;height:10px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 0 2px var(--bg)}
.rail .grow{flex:1}

.col{border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0;min-height:0}
.col-head{display:flex;align-items:center;gap:8px;height:56px;padding:0 12px 0 20px;flex:none}
.col-head h1{font-size:20px;font-weight:800;letter-spacing:-.01em;flex:1}
.search{margin:4px 16px 8px;display:flex;align-items:center;gap:10px;height:44px;border-radius:999px;background:var(--sunken);padding:0 16px;color:var(--muted);border:1px solid transparent;transition:border-color .24s var(--ease),background .24s var(--ease),color .24s}
.search:focus-within{border-color:var(--focus);background:var(--bg);color:var(--focus)}
.search input{flex:1;border:0;background:none;outline:none;color:var(--text);min-width:0}
.search input::placeholder{color:var(--muted)}
.tabs{display:flex;gap:8px;padding:4px 16px 8px;flex:none}
.tab{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--border-mid);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:transform .22s var(--spring),background .15s,color .15s,border-color .15s}
.tab:hover{background:var(--hover)}
.tab:active{transform:scale(.95)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.tab .badge{min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center;padding:0 5px}
.list{flex:1;overflow:auto;padding:0 0 12px}
.list-label{font-size:13px;color:var(--muted);font-weight:600;padding:12px 20px 4px}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 20px;min-height:72px;cursor:pointer;position:relative;transition:background .12s;width:100%;text-align:left}
.row:hover{background:var(--hover)}
.row[aria-current="true"]{background:var(--accent-soft)}
.row[aria-current="true"]::before{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--accent-bright)}
.row .body{flex:1;min-width:0}
.row .top{display:flex;align-items:baseline;gap:6px}
.row .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .handle{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;flex:1;min-width:0}
.row .time{color:var(--muted);font-size:13px;flex:none;margin-left:auto}
.row .prev{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px;margin-top:2px}
.row .prev span{overflow:hidden;text-overflow:ellipsis}
.row.unread .prev{color:var(--text);font-weight:600}
.row .meta{display:flex;align-items:center;gap:6px;flex:none;align-self:center;color:var(--muted)}
.row .udot{width:10px;height:10px;border-radius:50%;background:var(--accent-bright)}
.row .typing{color:var(--link);font-weight:500}
.row .more{opacity:0;transition:opacity .12s}
.row:hover .more,.row:focus-within .more,.row .more[aria-expanded="true"]{opacity:1}
.row .av-wrap{position:relative}
.row .av-wrap .online{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:var(--success);box-shadow:0 0 0 2px var(--bg)}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:32px 24px;max-width:360px}
.empty h3{font-size:24px;line-height:28px;font-weight:800;letter-spacing:-.015em}
.empty p{color:var(--muted)}
.empty .btn{margin-top:12px}
.empty.center{align-items:center;text-align:center;margin:auto}

/* skeleton */
.sk{background:var(--sunken);border-radius:6px;position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--hover),transparent);animation:shim 1.2s infinite;transform:translateX(-100%)}
@keyframes shim{to{transform:translateX(100%)}}
.sk-row{display:flex;gap:12px;align-items:center;padding:14px 20px}
.sk-row .sk.c{width:48px;height:48px;border-radius:50%}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:8px}
.sk-note{font-size:13px;color:var(--muted);padding:8px 20px;display:flex;align-items:center;gap:8px}

/* ---------- thread ---------- */
.thread{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.th-head{height:56px;display:flex;align-items:center;gap:12px;padding:0 12px 0 20px;flex:none;border-bottom:1px solid var(--border)}
.th-head .who{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-align:left}
.th-head .nm-btn{font-weight:700;border-radius:6px;padding:0 2px;margin:0 -2px}
.th-head .nm-btn:hover:not(:disabled){text-decoration:underline;text-underline-offset:2px}
.th-head .nm-btn:disabled{cursor:default}
.th-head .nm{font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap}
.th-head .nm svg{color:var(--muted)}
.th-head .sb{font-size:13px;color:var(--muted);white-space:nowrap}
.msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 24px 8px;display:flex;flex-direction:column}
.msgs-inner{display:flex;flex-direction:column;margin-top:auto;max-width:820px;width:100%;margin-left:auto;margin-right:auto}
.sys{align-self:center;text-align:center;color:var(--muted);font-size:13px;padding:10px 16px;display:flex;align-items:center;gap:6px;max-width:440px}
.sys.e2e{margin:8px 0 12px}
.day{align-self:center;font-size:13px;color:var(--muted);font-weight:600;padding:16px 0 8px}
.intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:24px 0 16px}
.intro .nm{font-weight:800;font-size:20px;margin-top:10px}
.intro .h{color:var(--muted)}
.intro .bio{margin-top:6px;max-width:40ch}
.grp{display:flex;gap:8px;margin-top:10px;position:relative}
.grp.me{flex-direction:row-reverse}
.grp .gav{width:32px;align-self:flex-end;flex:none}
.grp .gav .av{--s:32px}
.grp .stack{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:min(560px,72%)}
.grp.me .stack{align-items:flex-end}
.grp .sender{font-size:13px;color:var(--muted);font-weight:600;padding:0 14px 2px}
.grp .stamp{font-size:12px;color:var(--muted);padding:3px 6px 0;display:flex;align-items:center;gap:4px}
.grp .stamp.failed{color:var(--danger);font-weight:600}
.grp .stamp.failed button{color:var(--danger);font-weight:700;text-decoration:underline;text-underline-offset:2px;padding:6px 2px;margin:-6px 0}
.m{position:relative;display:flex;align-items:center;gap:6px;max-width:100%}
.grp.me .m{flex-direction:row-reverse}
.m .b{position:relative;padding:9px 14px;border-radius:20px;background:var(--sunken);color:var(--text);line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;min-width:0;transition:transform .2s var(--ease)}
.grp.me .m .b{background:var(--accent);color:var(--on-accent)}
.grp.me .m .b a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.grp.them .m:not(:last-of-type) .b{border-bottom-left-radius:6px}
.grp.them .m:not(:first-of-type) .b{border-top-left-radius:6px}
.grp.me .m:not(:last-of-type) .b{border-bottom-right-radius:6px}
.grp.me .m:not(:first-of-type) .b{border-top-right-radius:6px}
.grp .m:last-of-type .b{}
.m.deleted .b{background:none !important;color:var(--muted) !important;border:1px solid var(--border-mid);font-style:italic}
.m.failed .b{opacity:.6}
.m.sending .b{opacity:.8}
.m .b .edited{font-size:12px;opacity:.75;margin-left:6px}
.m.hl .b{animation:hl 1.2s var(--ease)}
@keyframes hl{0%,40%{box-shadow:0 0 0 3px var(--accent-bright)}}
.attwrap{max-width:100%;position:relative;z-index:1}
.attwrap+.b{margin-top:2px}
.m .img{display:block;max-width:340px;max-height:320px;border-radius:18px;cursor:zoom-in}
.m .imgwrap{position:relative;border-radius:18px;overflow:hidden;background:var(--sunken)}
.upl{position:absolute;inset:auto 10px 10px 10px;display:flex;align-items:center;gap:8px;background:rgba(15,20,25,.72);color:#fff;border-radius:999px;padding:6px 6px 6px 12px;font-size:12px;font-weight:600}
.upl .bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.upl .bar i{display:block;height:100%;background:#fff;border-radius:2px;transition:width .15s linear}
.upl button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff}
.upl button:hover{background:rgba(255,255,255,.18)}
.file{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;min-width:260px;border-radius:18px;background:var(--sunken)}
.grp.me .file{background:var(--accent);color:#fff}
.file .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--bg);color:var(--text);flex:none}
.grp.me .file .ic{background:rgba(255,255,255,.18);color:#fff}
.file .fn{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.file .fs{font-size:12px;opacity:.8;display:flex;align-items:center;gap:6px}
.file .fbar{height:4px;border-radius:2px;background:rgba(127,127,127,.3);overflow:hidden;width:140px;margin-top:5px}
.file .fbar i{display:block;height:100%;background:currentColor;transition:width .15s linear}
.file .dl{margin-left:auto;color:inherit}
.quote{display:block;border-radius:16px;padding:7px 12px 14px;margin:0 0 -10px;font-size:13px;color:var(--muted);background:var(--sunken);border:0;opacity:.85;max-width:100%;text-align:left;cursor:pointer;position:relative;z-index:0}
.quote b{display:block;font-weight:700;color:var(--text);font-size:12px}
.quote span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.quote:hover{opacity:1}
.grp.me .quote{background:var(--accent-soft);color:var(--text)}
.qwrap{display:flex;flex-direction:column;max-width:100%}
.grp.me .qwrap{align-items:flex-end}
.qwrap .b{z-index:1}
.reacts{display:flex;gap:4px;margin-top:-6px;margin-bottom:2px;position:relative;z-index:2;padding:0 8px}
.grp.me .reacts{justify-content:flex-end}
.react{height:26px;padding:0 8px;border-radius:999px;background:var(--raised);box-shadow:0 0 0 2px var(--bg),0 1px 3px rgba(0,0,0,.12);font-size:13px;display:inline-flex;align-items:center;gap:4px;animation:pop .35s var(--spring) both}
.react.mine{box-shadow:0 0 0 2px var(--bg),inset 0 0 0 1.5px var(--accent-bright)}
.react .c{font-size:12px;font-weight:600;color:var(--muted)}
.acts{display:flex;gap:0;opacity:0;transition:opacity .12s;flex:none}
.m:hover .acts,.m:focus-within .acts,.acts.open{opacity:1}
.acts .icon-btn{width:34px;height:34px;color:var(--muted)}
.acts .icon-btn:hover{color:var(--text)}
.swipe-ic{position:absolute;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);color:var(--text);opacity:0;pointer-events:none}
.typing-b{display:inline-flex;gap:4px;padding:14px 16px;border-radius:20px;background:var(--sunken)}
.typing-b i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:tdot 1.2s infinite}
.typing-b i:nth-child(2){animation-delay:.15s}.typing-b i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.send-anim{animation:sendIn .32s var(--spring) both;transform-origin:bottom right}
.arrive-anim{animation:arrive .32s var(--ease) both;transform-origin:bottom left}
@keyframes sendIn{from{transform:translateY(12px) scale(.94);opacity:0}}
@keyframes arrive{from{transform:translateX(-8px);opacity:0}}

/* composer */
.composer{padding:8px 24px 20px;flex:none}
.composer-in{max-width:820px;margin:0 auto}
.ctx{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 16px;margin-bottom:8px;border-left:3px solid var(--accent-bright);background:var(--sunken);border-radius:4px 14px 14px 4px;animation:ctxIn .22s var(--ease) both}
@keyframes ctxIn{from{transform:translateY(8px);opacity:0}}
.ctx .t{flex:1;min-width:0;font-size:13px}
.ctx .t b{display:block;font-weight:700;font-size:13px}
.ctx .t span{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbox{display:flex;align-items:flex-end;gap:4px;background:var(--sunken);border-radius:24px;padding:4px;border:1px solid transparent;transition:border-color .15s}
.cbox:focus-within{border-color:var(--border-strong)}
.cbox textarea{flex:1;border:0;background:none;outline:none;resize:none;padding:10px 6px;max-height:200px;line-height:1.35;min-height:40px}
.cbox textarea::placeholder{color:var(--muted)}
.send{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;transition:transform .25s var(--spring),opacity .15s,background .15s;flex:none}
.send:disabled{background:transparent;color:var(--faint);opacity:1}
.send:not(:disabled):active{transform:scale(.86)}
.send svg{stroke-width:2.2}
.chint{font-size:12px;color:var(--muted);padding:6px 16px 0;display:flex;gap:12px}
.chint kbd{font:inherit;font-weight:600}
.request-bar{border-top:1px solid var(--border);padding:16px 24px 20px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.request-bar .q{font-weight:700}
.request-bar .s{color:var(--muted);font-size:14px;max-width:52ch}
.request-bar .acts2{display:flex;gap:8px}

/* drop */
.dropzone{position:absolute;inset:0;background:var(--accent-soft);border:2px solid var(--accent-bright);display:grid;place-items:center;font-weight:700;z-index:5;pointer-events:none;border-radius:4px}

/* ---------- side panel ---------- */
.panel{width:0;overflow:hidden;transition:width .3s var(--ease);border-left:1px solid transparent;min-height:0}
.panel.open{width:380px;border-left-color:var(--border)}
.panel-in{width:380px;height:100%;overflow:auto;display:flex;flex-direction:column}
.panel .col-head{padding:0 12px}
.panel .col-head h1{font-size:17px}
.p-hero{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 24px 20px;text-align:center}
.p-hero .nm{font-size:20px;font-weight:800;margin-top:10px}
.p-hero .h{color:var(--muted);font-size:14px}
.sec{padding:8px 0;border-top:1px solid var(--border)}
.sec-t{font-size:15px;font-weight:800;padding:10px 20px 6px;display:flex;align-items:center}
.sec-t .r{margin-left:auto}
.prow{display:flex;align-items:center;gap:12px;padding:10px 20px;min-height:52px;width:100%;text-align:left}
button.prow:hover,label.prow:hover{background:var(--hover)}
label.prow{cursor:pointer}
.prow .grow{flex:1;min-width:0}
.prow .t{font-weight:500}
.prow .s{font-size:13px;color:var(--muted)}
.prow.danger{color:var(--danger)}
.prow .tag{font-size:12px;color:var(--muted);font-weight:600;border:1px solid var(--border-mid);border-radius:999px;padding:2px 8px}
.linkbox{margin:4px 20px 8px;padding:12px 14px;border-radius:12px;background:var(--sunken);display:flex;align-items:center;gap:10px;font-size:14px}
.linkbox code{font:inherit;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbox.off{color:var(--muted)}
.link-acts{display:flex;gap:8px;padding:4px 20px 12px;flex-wrap:wrap}

/* ---------- overlay: menu / modal / toast ---------- */
.layer{position:fixed;inset:0;z-index:100;pointer-events:none}
.layer>*{pointer-events:auto}
.menu{position:fixed;min-width:220px;background:var(--raised);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px 0;animation:menuIn .16s var(--ease) both;transform-origin:top right}
@keyframes menuIn{from{transform:scale(.94);opacity:0}}
.menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;font-weight:600;font-size:15px;text-align:left;min-height:44px}
.menu button:hover,.menu button:focus-visible{background:var(--hover);outline:none}
.menu button.danger{color:var(--danger)}
.picker{position:fixed;display:flex;gap:2px;padding:6px;border-radius:999px;background:var(--raised);box-shadow:var(--shadow-pop);animation:pickIn .22s var(--spring) both}
@keyframes pickIn{from{transform:translateY(6px) scale(.9);opacity:0}}
.picker button{width:44px;height:44px;border-radius:50%;font-size:24px;display:grid;place-items:center;transition:transform .2s var(--spring)}
.picker button:hover{transform:scale(1.25)}
.picker button[aria-pressed="true"]{background:var(--accent-soft)}
.scrim{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;animation:fade .18s both}
.modal{width:min(600px,calc(100vw - 48px));max-height:min(720px,calc(100vh - 48px));background:var(--bg);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;animation:modalIn .28s var(--spring) both;box-shadow:var(--shadow-pop)}
.modal.sm{width:340px;padding:32px;gap:8px}
.modal.sm h2{font-size:20px;font-weight:800;line-height:24px}
.modal.sm p{color:var(--muted);margin-bottom:16px}
.modal.sm .btn{width:100%;height:44px;margin-top:4px}
@keyframes modalIn{from{transform:translateY(16px) scale(.97);opacity:0}}
.m-head{display:flex;align-items:center;gap:12px;height:56px;padding:0 12px;flex:none}
.m-head h2{font-size:20px;font-weight:800;flex:1}
.m-body{overflow:auto;flex:1;min-height:200px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 8px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 4px;border-radius:999px;border:1px solid var(--border-mid);font-weight:600;font-size:14px;animation:pop .3s var(--spring) both}
.chip .av{--s:24px}
.chip:hover{background:var(--hover)}
.sel{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);display:grid;place-items:center;flex:none;margin-left:auto;transition:all .2s var(--spring)}
.sel.on{background:var(--accent);border-color:var(--accent);color:#fff}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:grid;place-items:center;animation:fade .2s both}
.lightbox img{max-width:90vw;max-height:86vh;border-radius:8px;animation:modalIn .3s var(--ease) both}
.lightbox .icon-btn{position:absolute;top:16px;left:16px;color:#fff;background:rgba(255,255,255,.1)}
.toasts{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;align-items:center;pointer-events:none}
.toast{background:var(--accent);color:#fff;font-weight:600;font-size:15px;padding:12px 18px;border-radius:999px;display:flex;align-items:center;gap:10px;animation:toastIn .32s var(--spring) both;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.toast.out{animation:toastOut .22s var(--ease) both}
@keyframes toastIn{from{transform:translateY(24px) scale(.95);opacity:0}}
@keyframes toastOut{to{transform:translateY(12px);opacity:0}}

/* ---------- settings ---------- */
.ident{display:flex;align-items:center;gap:14px;padding:8px 20px 20px;flex:none}
.ident .who{display:flex;flex-direction:column;gap:1px;min-width:0}
.ident .nm{font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ident .un{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-nav{position:relative;isolation:isolate}
.set-hl{position:absolute;left:8px;right:8px;top:0;bottom:auto;border-radius:10px;pointer-events:none;z-index:0}
.set-hl.sel{background:var(--nav-sel);transition-property:top,bottom;transition-duration:var(--lead,.22s),var(--trail,.32s);transition-timing-function:cubic-bezier(.32,.72,0,1)}
.set-hl.hov{background:var(--nav-hover);opacity:0;transition-property:top,bottom,opacity;transition-duration:var(--lead,.16s),var(--trail,.24s),.14s;transition-timing-function:cubic-bezier(.32,.72,0,1)}
.set-hl.hov.on{opacity:1}
.set-nav.noanim .set-hl{transition:none!important}
@media (prefers-reduced-motion:reduce){.set-hl.sel,.set-hl.hov{transition-duration:0s,0s,.12s!important}}
.set-row{display:flex;align-items:center;gap:0;padding:10px 20px;min-height:48px;width:100%;text-align:left;position:relative;z-index:1}
.set-row .grow{flex:1}
.set-row .t{font-weight:500;font-size:15px}
.set-row[aria-current="true"]{background:transparent}
.set-row[aria-current="true"] .t{font-weight:700}
.set-row.danger{color:var(--muted)}
.set-row.danger:hover{color:var(--danger);background:var(--danger-soft)}
.list-rule{border-top:1px solid var(--border);margin:16px 20px 8px;opacity:.85}
.pane{overflow:auto;min-width:0}
.pane-in{max-width:600px;padding:0 0 48px}
.pane-in.enter{animation:paneIn .22s var(--ease) both}
@keyframes paneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.row-ok{display:inline-flex;align-items:center;flex:none;color:var(--muted);opacity:0;margin-left:8px;transition:opacity .2s var(--ease)}
.row-ok.on{opacity:.72}
.row-ok.out{opacity:0;transition-duration:.35s}
.row-ok svg{width:16px;height:16px}
.pane .col-head{padding-left:24px}
.pane .col-head h1{font-weight:700}
.pane-sec{padding:20px 24px 24px}
.pane-sec+.pane-sec{border-top:1px solid var(--border)}
.pane-sec h2{font-size:17px;font-weight:700;letter-spacing:-.015em;margin-bottom:4px}
.pane-sec .lead{color:var(--muted);font-size:14px;margin-bottom:12px}
.pane-sec [role="radiogroup"] + .prow{margin-top:8px;padding-top:12px}
.pane form{display:flex;flex-direction:column;gap:18px}
.prof-av{display:flex;align-items:center;gap:20px}
.theme-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.theme-opt{border-radius:16px;border:2px solid var(--border-mid);padding:10px;display:flex;flex-direction:column;gap:10px;text-align:left;transition:border-color .15s,transform .22s var(--spring);user-select:none;-webkit-user-select:none}
.theme-opt:active{transform:scale(.97)}
.theme-opt[aria-checked="true"]{border-color:var(--accent)}
.theme-opt .pv{height:92px;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:10px;overflow:hidden}
.theme-opt .pv i{display:block;height:14px;border-radius:7px}
.theme-opt .lbl{display:flex;align-items:center;justify-content:space-between;font-weight:600;padding:0 4px}
.pv.l{background:#fff;box-shadow:inset 0 0 0 1px #EFF3F4}.pv.l .a{background:#EFF3F4;width:60%}.pv.l .b{background:#1170CF;width:50%;align-self:flex-end}
.pv.d{background:#000;box-shadow:inset 0 0 0 1px #2F3336}.pv.d .a{background:#202327;width:60%}.pv.d .b{background:#1170CF;width:50%;align-self:flex-end}
.pv.s{background:linear-gradient(90deg,#fff 50%,#000 50%)}.pv.s .a{background:#9aa4ad;width:60%}.pv.s .b{background:#1170CF;width:50%;align-self:flex-end}
.seg{display:inline-flex;background:var(--sunken);border-radius:999px;padding:3px}
.seg button{height:34px;padding:0 16px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted);user-select:none;-webkit-user-select:none}
.seg button[aria-checked="true"]{background:var(--bg);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.status-line{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--sunken);font-size:14px}
.status-line svg{color:var(--success)}

/* join landing */
.join{height:100%;overflow:auto;display:flex;flex-direction:column}
.join-top{height:64px;display:flex;align-items:center;padding:0 32px;justify-content:space-between}
.join-top .lockup{height:28px}
.join-main{flex:1;display:grid;place-items:center;padding:24px}
.join-card{width:420px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.join-card .av{--s:96px;margin-bottom:12px}
.join-card h1{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:32px}
.join-card .meta{color:var(--muted)}
.join-card .desc{margin:10px 0 6px;max-width:36ch}
.join-card .who{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;margin:8px 0 20px}
.join-card .btn-block{margin-top:4px}
.join-card .e2e{font-size:13px;color:var(--muted);margin-top:14px;display:flex;align-items:center;gap:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .btn:active,.icon-btn:active,.rail-btn:active,.tab:active,.press:active{transform:none !important}
}
.th-head .who:disabled{cursor:default}.th-head .who:disabled:hover{background:none}

/* ---------- done checks (picks) ---------- */
.dc{display:inline-block;flex:none;overflow:visible}
.dc .ck{fill:none;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.dc-a .bg{fill:var(--success);transform-origin:24px 24px;animation:dcPop .5s var(--spring) both}
.dc-a .ck{stroke:#fff;animation:dcDraw .34s .2s cubic-bezier(.65,0,.35,1) forwards}
.dc-b .track{fill:none;stroke:var(--success);stroke-width:2.5;opacity:.18}
.dc-b .ring{fill:none;stroke:var(--success);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:24px 24px;animation:dcDraw .55s cubic-bezier(.65,0,.35,1) forwards}
.dc-b .ck{stroke:var(--success);stroke-width:3.4;animation:dcDraw .3s .5s cubic-bezier(.65,0,.35,1) forwards}
.dc-c .bg{fill:var(--ink);transform-origin:24px 24px;animation:dcPop .45s var(--spring) both}
.dc-c .ck{stroke:var(--on-ink);animation:dcDraw .3s .16s cubic-bezier(.65,0,.35,1) forwards}
.dc-c .burst line{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:dcBurst .5s .28s var(--ease) forwards}
.dc-d .lock{fill:none;stroke:var(--text);stroke-width:2.6;stroke-linecap:round;transform-origin:24px 30px;animation:dcLockOut .3s .62s var(--ease) forwards}
.dc-d .shackle{transform:translateY(-4px);animation:dcShut .26s .12s cubic-bezier(.5,0,.6,1.6) forwards}
.dc-d .bg{fill:var(--success);transform:scale(0);transform-origin:24px 24px;animation:dcPop .45s .72s var(--spring) both}
.dc-d .ck{stroke:#fff;animation:dcDraw .3s .92s cubic-bezier(.65,0,.35,1) forwards}
@keyframes dcPop{0%{transform:scale(0)}65%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes dcDraw{to{stroke-dashoffset:0}}
@keyframes dcBurst{0%{opacity:1;stroke-dashoffset:1}60%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:-1}}
@keyframes dcShut{to{transform:translateY(0)}}
@keyframes dcLockOut{to{transform:scale(.4);opacity:0}}

/* ---------- encryption demo ---------- */
.encd{display:grid;grid-template-columns:1fr 132px 1fr;grid-template-rows:auto auto;align-items:center;gap:14px 0;width:100%;padding:0 28px}
.encd-side{display:flex;flex-direction:column;gap:6px}
.encd-side.them{align-items:flex-start}.encd-side.me{align-items:flex-end}
.encd-lbl{font-size:12px;font-weight:600;color:var(--muted)}
.encd-b{position:relative;padding:9px 14px;border-radius:20px;font-size:15px;white-space:pre;font-variant-numeric:tabular-nums;min-height:38px;min-width:40px;transition:background-color .35s var(--ease),color .35s,font-family .1s}
.encd-b.me{background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.encd-b.them{background:var(--bg);color:var(--text);border-bottom-left-radius:6px;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .25s,transform .35s var(--spring),background-color .35s}
.encd-b.them.in{opacity:1;transform:none}
.encd.enc .encd-b.me{background:var(--text);color:var(--bg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
.encd.enc.arrived .encd-b.me{background:var(--accent);color:#fff;font-family:inherit;font-size:15px}
.encd-b.them .t{display:inline-block}
.encd.arrived:not(.done) .encd-b.them{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;background:var(--text);color:var(--bg)}
.encd-wire{position:relative;height:40px;display:flex;align-items:center}
.encd-wire .line{position:absolute;left:8px;right:8px;top:50%;height:0;border-top:1.5px solid var(--border-strong);opacity:.6}
.encd-wire .pkt{position:absolute;left:0;top:50%;transform:translate(-30px,-50%) scale(.6);opacity:0;display:inline-flex;align-items:center;gap:4px;background:var(--bg);color:var(--text);border-radius:999px;padding:4px 8px 4px 6px;font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:var(--shadow-pop);white-space:nowrap}
.encd-wire .pkt.go{animation:pkt .9s var(--ease) forwards}
.encd-wire .pkt.mid{opacity:1;transform:translate(14px,-50%)}
@keyframes pkt{0%{opacity:0;transform:translate(-30px,-50%) scale(.6)}20%{opacity:1;transform:translate(0,-50%) scale(1)}80%{opacity:1;transform:translate(30px,-50%) scale(1)}100%{opacity:0;transform:translate(60px,-50%) scale(.6)}}
.encd-cap{grid-column:1/-1;justify-self:center;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.encd-cap code{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);background:var(--bg);padding:2px 6px;border-radius:6px}
.encd-lock{position:absolute;top:-14px;right:-10px;width:28px;height:28px;border-radius:50%;background:var(--bg);color:var(--text);display:none;place-items:center;box-shadow:var(--shadow-pop)}
.encd.seal .encd-lock{display:grid;opacity:0;transform:translateY(-14px) scale(.7)}
.encd.seal.locking .encd-lock{opacity:1;transform:none;transition:transform .45s var(--spring),opacity .2s}
.encd-lock .sh{transform:translateY(-3px);transition:transform .22s cubic-bezier(.5,0,.6,1.6)}
.encd.seal.locked .encd-lock .sh{transform:none}
.encd.seal.arrived .encd-lock{opacity:0;transform:scale(.6);transition:all .25s}
.encd.static .encd-b.them{opacity:1;transform:none}

/* ---------- encryption in app ---------- */
.e2e-btn{display:inline-grid;place-items:center;width:28px;height:28px;margin:-6px -4px;border-radius:999px;color:var(--muted);position:relative}
.e2e-btn:hover{background:var(--hover);color:var(--text)}
.e2e-btn .vfy{position:absolute;right:1px;bottom:2px;width:10px;height:10px;border-radius:50%;background:var(--success);box-shadow:0 0 0 2px var(--bg)}
.pop{position:fixed;width:300px;background:var(--raised);border-radius:16px;box-shadow:var(--shadow-pop);padding:16px;animation:menuIn .18s var(--ease) both;transform-origin:top left}
.pop h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
.pop p{font-size:14px;color:var(--muted);margin:6px 0 12px}
.pop .row2{display:flex;gap:8px}
.e2e-note{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);background:var(--sunken);padding:8px 14px;border-radius:999px;margin:8px 0 14px;max-width:520px;text-align:center}
.linkish{color:var(--link);font-weight:600;font-size:inherit}
.linkish:hover{text-decoration:underline}
.cbox .clock{display:grid;place-items:center;width:28px;height:40px;color:var(--muted);margin-left:-2px;margin-right:-6px}
.safety{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px;font:600 16px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;background:var(--sunken);border-radius:12px;padding:16px;margin:4px 0 16px;text-align:center}
.modal.md{width:420px;padding:28px;gap:8px}
.modal.md h2{font-size:20px;font-weight:800}
.modal.md p{color:var(--muted)}
.modal.md .acts3{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.explain{display:flex;flex-direction:column;gap:14px;margin:12px 0 8px}
.explain div{display:flex;gap:12px;align-items:flex-start}
.explain svg{margin-top:2px;flex:none}
.explain b{display:block}
.explain span{color:var(--muted);font-size:14px}

/* ---------- crop editor (X style) ---------- */
.crop{width:600px;max-width:calc(100vw - 48px)}
.crop .m-head .btn{margin-left:auto}
.crop-stage{position:relative;height:420px;background:#000;overflow:hidden;touch-action:none;cursor:grab;user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-stage img{position:absolute;left:50%;top:50%;transform-origin:0 0;max-width:none;pointer-events:none;will-change:transform}
.crop-stage img.ease{transition:transform .28s var(--ease)}
.crop-mask{position:absolute;left:50%;top:50%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.9);pointer-events:none}
.crop-stage:focus-visible{outline:none}
.crop-stage:focus-visible .crop-mask{border-color:var(--accent-bright)}
.crop-tools{display:flex;align-items:center;gap:12px;padding:16px 24px;color:var(--muted)}
.crop-tools input[type=range]{flex:1;accent-color:var(--accent);height:24px;cursor:pointer}
.crop-foot{display:flex;justify-content:flex-end;gap:8px;padding:0 16px 16px}
.crop-hint{font-size:13px;color:var(--muted);padding:0 24px 4px}

.saved-row{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--success);min-height:36px}
.saved-row span{color:var(--text)}

/* inbox filter dropdown (XChat "All ⌄") */
.filter-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 14px;border-radius:999px;border:1px solid var(--border-strong);font-weight:700;font-size:14px;transition:transform .22s var(--spring),background .15s}
.filter-btn:hover{background:var(--hover)}
.filter-btn:active{transform:scale(.95)}
.filter-btn svg{transition:transform .25s var(--spring)}
.filter-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.filter-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.filter-btn .badge,.menu .badge{min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center;padding:0 5px}
.menu-filter{min-width:232px;transform-origin:top right;animation:filterIn .24s var(--spring) both}
@keyframes filterIn{from{transform:translateY(-6px) scale(.92);opacity:0}}
.menu-filter button{animation:itemIn .26s var(--ease) both;animation-delay:var(--d)}
@keyframes itemIn{from{transform:translateY(-4px);opacity:0}}
.menu button .ml{flex:1}
.menu .mchk{width:18px;display:inline-grid;place-items:center;color:var(--accent)}
.menu button[aria-checked="true"] .ml{font-weight:800}
.status-line.none svg{color:var(--muted)}
.saved-row.muted-row,.saved-row.muted-row span{color:var(--muted);font-weight:500}

/* ---------- Welcome (step zero) ---------- */
.auth-top{height:44px;margin:-8px 0 -4px -12px}
.auth-back{padding-left:10px}
.wl-page{height:100%;overflow:auto;display:grid;place-items:center;padding:48px 24px}
.wl{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:-4vh}
.wl-mark .mark{height:56px}
.wl-title{margin-top:36px;font-size:34px;line-height:40px;font-weight:800;letter-spacing:-.02em}
.wl-sub{margin-top:10px;color:var(--muted);font-size:17px;line-height:24px;max-width:none}
.wl-actions{margin-top:44px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:10px}
.wl-enter>*{animation:wlUp .6s var(--ease) both}
.wl-enter>:nth-child(2){animation-delay:.07s}.wl-enter>:nth-child(3){animation-delay:.13s}.wl-enter>:nth-child(4){animation-delay:.2s}
@keyframes wlUp{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.wl-enter>*{animation:none!important}}

/* ---------- onboarding encryption options ---------- */
.onb{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
.onb-cur{gap:28px}
.onb-foot{display:none;min-height:36px}
.onb.ended .onb-foot{display:flex;animation:fade .3s var(--ease) both}
.onb-cur.ended .onb-foot{animation:none}
.onb-cap{font-size:14px;color:var(--muted);text-align:center;margin:0}
.onb.static *{transition:none!important;animation:none!important}
/* A · Lock seal */
.sl-b{position:relative;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:22px 22px 6px 22px;background:var(--accent);color:#fff;font-size:16px;white-space:nowrap;
  animation:sendIn .32s var(--spring) both;transition:width .62s cubic-bezier(.3,1.25,.45,1),height .62s cubic-bezier(.3,1.25,.45,1),border-radius .5s var(--ease),background-color .4s var(--ease),padding .5s var(--ease)}
.sl-t{transition:opacity .22s var(--ease),filter .3s var(--ease)}
.sl-badge{position:absolute;top:-12px;right:-12px;width:30px;height:30px;border-radius:50%;background:var(--bg);color:var(--text);display:grid;place-items:center;box-shadow:var(--shadow-pop);
  opacity:0;transform:translateY(-14px) scale(.8);transition:opacity .2s,transform .42s var(--spring)}
.sl-seal{position:absolute;inset:0;display:grid;place-items:center;color:var(--bg);opacity:0;transform:scale(.6);transition:opacity .25s .25s,transform .45s .25s var(--spring)}
.onb-a.badge .sl-badge{opacity:1;transform:none}
.onb-a.sealed .sl-b{height:52px;padding:0;border-radius:26px 26px 8px 26px;background:var(--text)}
.onb-a.sealed .sl-t{opacity:0;filter:blur(3px)}
.onb-a.sealed .sl-badge{opacity:0;transform:translate(-14px,14px) scale(.5);transition:opacity .18s,transform .3s var(--ease)}
.onb-a.sealed .sl-seal{opacity:1;transform:none}
.onb-a.static.sealed .sl-b{width:52px}
/* B · Two phones */
.ph2{display:flex;align-items:center;gap:0}
.ph{display:flex;flex-direction:column;align-items:center;gap:8px}
.ph-scr{width:128px;height:150px;border-radius:22px;border:1.5px solid var(--border-strong);background:var(--bg);padding:22px 8px 10px;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.ph-scr::before{content:"";position:absolute;top:9px;left:50%;width:28px;height:4px;margin-left:-14px;border-radius:2px;background:var(--border-mid)}
.ph-lbl{font-size:13px;font-weight:600;color:var(--muted)}
.ph-b{font-size:13px;line-height:17px;padding:6px 10px;border-radius:14px;white-space:nowrap;opacity:0}
.ph-b.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.ph-b.them{align-self:flex-start;background:var(--sunken);color:var(--text);border-bottom-left-radius:5px}
.ph-wire{position:relative;width:96px;height:24px;margin:0 6px 26px}
.ph-line{position:absolute;left:4px;right:4px;top:50%;border-top:1.5px solid var(--border-mid)}
.ph-dot{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;opacity:0;transform:scale(.4)}
.ph-dot .i.xs{width:12px;height:12px}
.onb-b.sent .ph-b.me{opacity:1;animation:sendIn .32s var(--spring) both}
.onb-b.moving .ph-dot{animation:phDot .76s cubic-bezier(.45,0,.25,1) both}
@keyframes phDot{0%{opacity:0;transform:translateX(0) scale(.4)}18%{opacity:1;transform:translateX(4px) scale(1)}82%{opacity:1;transform:translateX(68px) scale(1)}100%{opacity:0;transform:translateX(72px) scale(.4)}}
.onb-b.arrived .ph-b.them{opacity:1;animation:arrive .32s var(--ease) both}
.onb-b.static .ph-b{opacity:1}
/* C · Scramble in place */
.sc-b{position:relative;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:22px 22px 6px 22px;background:var(--accent);color:#fff;font-size:16px;white-space:nowrap;overflow:visible;
  animation:sendIn .32s var(--spring) both;transition:background-color .3s var(--ease)}
.sc-t{font-variant-numeric:tabular-nums;overflow:hidden}
.onb-c.enc .sc-b{background:var(--text);color:var(--bg)}
.sc-badge{position:absolute;top:-11px;right:-11px;width:28px;height:28px;border-radius:50%;background:var(--bg);color:var(--text);display:grid;place-items:center;box-shadow:var(--shadow-pop);opacity:0;transform:scale(0)}
.onb-c.badge .sc-badge{opacity:1;transform:none;transition:transform .42s var(--spring),opacity .15s}

/* ---------- collapsible sidebar ---------- */
.shell{position:relative;transition:grid-template-columns .46s cubic-bezier(.32,.72,0,1)}
.shell.side-collapsed{grid-template-columns:76px 0px 1fr auto}
#leftcol{overflow:hidden;transition:border-color .3s var(--ease)}
.col-in{width:380px;flex:none;height:100%;min-height:0;display:flex;flex-direction:column;transition:opacity .22s var(--ease),transform .46s cubic-bezier(.32,.72,0,1)}
.side-collapsed #leftcol{border-right-color:transparent}
.side-collapsed .col-in{opacity:0;transform:translateX(-28px)}
.side-show{position:absolute;left:86px;top:6px;z-index:6;visibility:hidden;opacity:0;transform:translateX(-10px);transition:opacity .18s,transform .3s var(--ease),visibility 0s .3s}
.side-collapsed .side-show{visibility:visible;opacity:1;transform:none;transition:opacity .25s .2s,transform .4s .2s var(--spring),visibility 0s}
.th-head{transition:padding-left .46s cubic-bezier(.32,.72,0,1)}
.side-collapsed .th-head{padding-left:68px}
[aria-expanded="true"][data-tip]::after{display:none}

/* ---------- account menu ---------- */
.menu.acct{width:288px;padding:8px 0;transform-origin:bottom left;animation:acctIn .2s cubic-bezier(.3,1.2,.5,1) both}
@keyframes acctIn{from{opacity:0;transform:translateX(-6px) scale(.92)}}
.acct-head{display:flex;align-items:center;gap:12px;padding:8px 16px 12px}
.acct-head .n{font-weight:800;line-height:20px}
.acct-head .h{font-size:14px;color:var(--muted);line-height:18px}
.acct-head .grow{min-width:0}
.acct-head .n,.acct-head .h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-sep{height:1px;background:var(--border);margin:6px 0}
.acct-theme{display:flex;flex-direction:column;gap:8px;padding:10px 16px}
.acct-lbl{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;border-radius:999px;background:var(--sunken)}
.menu .seg button{min-height:34px;padding:0 8px;justify-content:center;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);transition:background-color .15s,color .15s}
.menu .seg button:hover{background:transparent;color:var(--text)}
.menu .seg button[aria-checked="true"]{background:var(--bg);color:var(--text);box-shadow:0 0 0 1px var(--border-mid)}
.menu .seg button:focus-visible{background:var(--bg);box-shadow:0 0 0 2px var(--focus)}
@media (prefers-reduced-motion:reduce){.shell,.col-in,.side-show,.th-head{transition:none!important}.menu.acct{animation:none}}

/* ---------- keyboard shortcuts ---------- */
.keys{display:flex;flex-direction:column;margin:12px 0 16px}
.keys>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;border-bottom:1px solid var(--border)}
.keys>div:last-child{border-bottom:0}
.keys dt{font-size:15px}
.keys dd{display:flex;gap:4px;margin:0}
.keys kbd{font:600 12px/1 inherit;font-family:inherit;min-width:24px;height:24px;padding:0 7px;border-radius:6px;background:var(--sunken);display:inline-grid;place-items:center;color:var(--text)}
.modal.keys-modal{width:400px}

/* ---------- FLIP (pin / unpin) ---------- */
#inbox-list{position:relative}
.row.gliding{z-index:3;background:var(--bg);box-shadow:var(--shadow-pop);border-radius:12px}
.flip-ghost{position:absolute;left:0;right:0;pointer-events:none}


/* ---------- reserved username ---------- */
.status-card{margin:8px 0 4px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;max-width:420px;background:var(--sunken)}
.status-card .k{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px}
.status-card .h{font-size:16px;font-weight:700}
.status-card .s{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.45}
.req-handle-btn{margin-top:10px;padding:0 4px;min-width:0;height:32px;color:var(--accent)}
.handle-wait{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.45}
.modal.md .field{margin-bottom:14px}
.modal.md .field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.modal.md .field label .opt{font-weight:500;color:var(--muted)}
.modal.md textarea{width:100%;min-height:88px;border:1px solid var(--border-strong);border-radius:12px;padding:12px 14px;background:var(--bg);resize:none;outline:none;font-size:15px;line-height:1.5}
.modal.md textarea:focus{border-color:var(--focus)}
.modal.md .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.modal.result{width:360px;padding:40px 32px 28px;text-align:center;overflow:visible;position:relative}
.modal.result h2{font-size:24px;line-height:28px;letter-spacing:-.04em;margin:0 0 8px}
.modal.result p.lead{margin:0 0 24px;font-size:15px;line-height:1.5;color:var(--muted)}
.modal.result .hero{font-size:44px;line-height:1;font-weight:800;letter-spacing:-.06em;margin:8px 0 14px}
.modal.result .hero.muted{color:var(--muted);font-size:40px;letter-spacing:-.05em;position:relative;display:inline-block;margin-left:auto;margin-right:auto}
.modal.result .hero.muted::after{content:"";position:absolute;left:-8px;right:-8px;top:52%;height:3px;background:var(--text);border-radius:2px;transform:rotate(-12deg)}
.burst{position:absolute;inset:-36px -28px 80px;pointer-events:none;overflow:visible}
.burst i{position:absolute;border-radius:1.5px;display:block}