/* ============ Orbit — night-sky design system ============ */
:root,[data-theme=dark]{
  --bg-0:#111214;--bg-1:#17181b;--bg-2:#1d1e22;--bg-3:#26272c;--bg-4:#313238;--tile-bg:#232428;
  --bg-hover:rgba(255,255,255,.045);--bg-active:rgba(255,255,255,.085);--line:rgba(255,255,255,.065);--line-2:rgba(255,255,255,.12);
  --text:#f2f3f5;--text-2:#d2d4d8;--muted:#9a9fa8;--dim:#6d717a;
  --accent:#8b6dff;--accent-2:#b5a3ff;--accent-soft:rgba(139,109,255,.2);--on-accent:#fff;
  --comet:#23a55a;--green:#23a55a;--yellow:#f0b232;--red:#f23f43;--blue:#00a8fc;
  --shadow:0 12px 32px rgba(0,0,0,.45);--glass:rgba(23,24,27,.92);
  --input:#111214;--code:#141518;
  --font:"Onest","Segoe UI",system-ui,sans-serif;--display:"Onest","Segoe UI",system-ui,sans-serif;
  --rail:72px;--side:248px;--members:248px;--fs:15px;
  color-scheme:dark;
}
[data-theme=midnight]{
  --bg-0:#000;--bg-1:#0a0a0b;--bg-2:#0f0f11;--bg-3:#18181b;--bg-4:#222226;--tile-bg:#141416;
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.12);--input:#050506;--code:#050506;--glass:rgba(10,10,11,.92);
}
[data-theme=light]{
  --bg-0:#e3e5e8;--bg-1:#f2f3f5;--bg-2:#ffffff;--bg-3:#ebedef;--bg-4:#dcdee2;--tile-bg:#d7d9dd;
  --bg-hover:rgba(6,6,7,.04);--bg-active:rgba(6,6,7,.08);--line:rgba(6,6,7,.08);--line-2:rgba(6,6,7,.15);
  --text:#1f2024;--text-2:#3a3c42;--muted:#5c5f66;--dim:#8a8e95;--input:#ebedef;--code:#f2f3f5;
  --shadow:0 12px 32px rgba(0,0,0,.14);--glass:rgba(255,255,255,.94);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg-0);color:var(--text);font:400 var(--fs)/1.45 var(--font);-webkit-font-smoothing:antialiased}
body{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
img{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.hidden{display:none!important}
::selection{background:var(--accent-soft)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
.reduce-motion *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- auth ---------- */
.auth{position:fixed;inset:0;display:grid;place-items:center;padding:20px;overflow:auto;background:var(--bg-0)}
.auth::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent),radial-gradient(1px 1px at 72% 12%,#fff6 50%,transparent),radial-gradient(1.5px 1.5px at 85% 64%,#fff7 50%,transparent),
  radial-gradient(1px 1px at 30% 80%,#fff5 50%,transparent),radial-gradient(1px 1px at 55% 45%,#fff4 50%,transparent),radial-gradient(1.5px 1.5px at 8% 60%,#fff6 50%,transparent),
  radial-gradient(900px 520px at 78% 108%,color-mix(in oklab,var(--accent) 38%,transparent),transparent 70%),radial-gradient(700px 420px at 0% 0%,rgba(94,224,214,.12),transparent 70%)}
.auth::after{content:"";position:fixed;width:1400px;height:1400px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-18deg) scaleY(.32);border:1px solid color-mix(in oklab,var(--accent) 35%,transparent);border-radius:50%;pointer-events:none}
.auth-card{position:relative;z-index:1;width:min(440px,100%);background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--line-2);border-radius:22px;padding:34px 32px 30px;box-shadow:var(--shadow)}
.auth-logo{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:22px}
.auth-logo img{width:46px;height:46px;object-fit:contain}
.auth-logo span{font:600 26px/1 var(--display);letter-spacing:.02em}
.auth h1{font:600 21px/1.25 var(--display);text-align:center;margin-bottom:6px}
.auth .sub{color:var(--muted);text-align:center;margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:7px}
.field label .req{color:var(--red)}
.input{width:100%;background:var(--input);border:1px solid var(--line);border-radius:10px;padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.input{resize:vertical;min-height:84px}
select.input{appearance:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;font-weight:600;transition:background .15s,filter .15s,transform .05s;white-space:nowrap}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--accent);color:var(--on-accent)}.btn.primary:hover:not(:disabled){filter:brightness(1.1)}
.btn.secondary{background:var(--bg-4);color:var(--text)}.btn.secondary:hover{filter:brightness(1.15)}
.btn.danger{background:var(--red);color:#fff}.btn.danger:hover{filter:brightness(1.08)}
.btn.ghost{color:var(--text-2)}.btn.ghost:hover{color:var(--text);background:var(--bg-hover)}
.btn.green{background:var(--green);color:#06281b}
.btn.block{width:100%;padding:12px}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:8px}
.auth .err{background:color-mix(in oklab,var(--red) 14%,transparent);color:color-mix(in oklab,var(--red) 60%,var(--text));border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:14px}
.auth .note{background:var(--accent-soft);color:var(--text-2);border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:14px}
.auth .switch{margin-top:16px;font-size:14px;color:var(--muted)}
.auth .switch button{color:var(--accent-2);font-weight:600}
.auth .switch button:hover{text-decoration:underline}
.code-input{letter-spacing:12px;text-align:center;font:600 26px var(--display)}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:var(--rail) var(--side) 1fr;height:100vh;height:100dvh;height:var(--app-h,100dvh);background:var(--bg-0)}
.rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0;overflow-y:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-item{position:relative;width:48px;height:48px;flex:none}
.rail-btn{width:48px;height:48px;border-radius:16px;background:var(--bg-2);display:grid;place-items:center;font:600 14px var(--display);overflow:hidden;transition:border-radius .25s,background .2s,color .2s,box-shadow .25s;color:var(--text-2)}
.rail-btn img{width:100%;height:100%;object-fit:cover}
.rail-btn:hover{border-radius:24px;background:var(--bg-3);color:var(--text)}
.rail-item.active .rail-btn{border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 3px var(--bg-0),0 0 0 5px var(--accent)}
.rail-btn.home{background:var(--bg-2)}
.rail-btn.home img{width:30px;height:30px;object-fit:contain}
.rail-item.active .rail-btn.home{background:var(--bg-3)}
.rail-item .pill{position:absolute;left:-14px;top:50%;width:4px;height:0;background:var(--text);border-radius:0 4px 4px 0;transform:translateY(-50%);transition:height .2s}
.rail-item.unread:not(.active) .pill{height:8px}
.rail-item .badge{position:absolute;right:-5px;bottom:-5px;border:3px solid var(--bg-0)}
.rail-btn.action{color:var(--green);font-size:24px;font-weight:400;background:transparent;border:1px dashed var(--line-2)}
.rail-btn.action:hover{background:var(--green);color:#06281b;border-color:transparent}
.rail-sep{width:28px;height:2px;border-radius:2px;background:var(--line-2);flex:none}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.tip{position:fixed;z-index:200;background:var(--bg-3);color:var(--text);padding:7px 11px;border-radius:9px;font-size:14px;font-weight:600;pointer-events:none;box-shadow:var(--shadow);white-space:nowrap;border:1px solid var(--line)}

.sidebar{background:var(--bg-1);display:flex;flex-direction:column;min-width:0;min-height:0;border-top-left-radius:18px;overflow:hidden}
.side-head{height:56px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 18px;font:600 14px/1.2 var(--display);letter-spacing:.01em;border-bottom:1px solid var(--line);cursor:pointer;gap:8px;transition:background .15s}
.side-head:hover{background:var(--bg-hover)}
.side-head .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-head svg{width:18px;height:18px;color:var(--muted);flex:none}
.side-banner{height:128px;background-size:cover;background-position:center;flex:none;position:relative;cursor:pointer}
.side-banner .side-head{position:absolute;inset:auto 0 0 0;border:0;background:linear-gradient(transparent,rgba(5,3,15,.75));height:56px;color:#fff}
.side-list{flex:1;overflow-y:auto;padding:6px 10px 16px;min-height:0}
.side-search{margin:12px 12px 4px;background:var(--input);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13px;color:var(--muted);text-align:left;width:calc(100% - 24px)}
.side-search:hover{border-color:var(--line-2)}
.cat{display:flex;align-items:center;justify-content:space-between;padding:18px 6px 6px 8px;color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:.01em}
.cat:hover{color:var(--text-2)}
.cat button{font-size:18px;line-height:1;color:var(--muted);padding:0 4px;border-radius:4px}
.cat button:hover{color:var(--text);background:var(--bg-hover)}
.ch{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;margin:1px 0;border-radius:9px;color:var(--muted);text-align:left;position:relative;cursor:pointer}
.ch:hover{background:var(--bg-hover);color:var(--text-2)}
.ch.active{background:var(--bg-active);color:var(--text)}
.ch.unread{color:var(--text);font-weight:600}
.ch.unread::before{content:"";position:absolute;left:-10px;width:4px;height:8px;border-radius:0 4px 4px 0;background:var(--text)}
.ch .ico{width:20px;flex:none;color:var(--dim);display:grid;place-items:center}
.ch .ico svg{width:18px;height:18px}
.ch.active .ico{color:var(--accent-2)}
.ch .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch .act{opacity:0;color:var(--muted);display:flex;gap:2px}
.ch:hover .act,.ch.active .act{opacity:1}
.ch .act button{padding:3px;border-radius:5px;display:grid;place-items:center}
.ch .act button svg{width:15px;height:15px}
.ch .act button:hover{color:var(--text);background:var(--bg-hover)}
.vc-users{padding:2px 0 6px 30px}
.vc-user{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:8px;color:var(--muted);font-size:14px;cursor:pointer}
.vc-user:hover{background:var(--bg-hover);color:var(--text-2)}
.vc-user .icons{margin-left:auto;display:flex;gap:4px;color:var(--dim);align-items:center}
.vc-user .icons svg{width:14px;height:14px}
.vc-user .live,.live{background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:5px}
.av.speaking{box-shadow:0 0 0 2px var(--bg-1),0 0 0 4px var(--comet)}
.dm-item{display:flex;align-items:center;gap:12px;padding:7px 9px;border-radius:10px;color:var(--muted);width:100%;text-align:left;margin:1px 0;position:relative}
.dm-item:hover{background:var(--bg-hover);color:var(--text-2)}
.dm-item.active{background:var(--bg-active);color:var(--text)}
.dm-item.unread{color:var(--text);font-weight:600}
.dm-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-item .nm small{display:block;font-size:12px;font-weight:400;color:var(--dim);overflow:hidden;text-overflow:ellipsis}

.voice-bar{border-top:1px solid var(--line);padding:10px 12px 10px;background:var(--bg-1)}
.voice-bar .row1{display:flex;align-items:center;gap:8px}
.voice-bar .status{flex:1;min-width:0}
.voice-bar .status b{color:var(--green);font-size:14px;display:flex;align-items:center;gap:6px}
.voice-bar .status b svg{width:16px;height:16px}
.voice-bar .status span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.voice-bar .status span:hover{text-decoration:underline}
.voice-bar .row2{display:flex;gap:8px;margin-top:8px}
.voice-bar .row2 button{flex:1;background:var(--bg-3);border-radius:9px;padding:7px;display:grid;place-items:center;color:var(--text-2)}
.voice-bar .row2 button:hover{background:var(--bg-4);color:var(--text)}
.voice-bar .row2 button.on{background:var(--accent);color:var(--on-accent)}
.voice-bar .row2 svg{width:18px;height:18px}
.icon-btn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--text-2);flex:none}
.icon-btn:hover{background:var(--bg-hover);color:var(--text)}
.icon-btn.danger{color:var(--red)}
.icon-btn.active{color:var(--red)}
.icon-btn svg{width:20px;height:20px}
.user-panel{height:62px;flex:none;background:color-mix(in oklab,var(--bg-1) 70%,var(--bg-0));display:flex;align-items:center;gap:4px;padding:0 8px;border-top:1px solid var(--line)}
.user-panel .me{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:5px;border-radius:10px;cursor:pointer;text-align:left}
.user-panel .me:hover{background:var(--bg-hover)}
.user-panel .me .who{min-width:0}
.user-panel .me b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-panel .me span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-panel .icon-btn{width:32px;height:32px}
.user-panel .icon-btn svg{width:18px;height:18px}

/* avatars (crop-aware) */
.av{width:40px;height:40px;border-radius:50%;flex:none;position:relative;display:grid;place-items:center;font-weight:600;color:#fff;background:var(--accent);font-size:15px;user-select:none}
.av .crop{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.av .crop img{width:100%;height:100%;object-fit:cover}
.av .ini{font-family:var(--display);font-size:.82em}
.av.s32{width:32px;height:32px;font-size:13px}
.av.s24{width:24px;height:24px;font-size:10px}
.av.s80{width:84px;height:84px;font-size:28px}
.av.s96{width:96px;height:96px;font-size:34px}
.av .st{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;border:3px solid var(--bg-1);background:var(--dim)}
.av.s24 .st{width:10px;height:10px;border-width:2px}
.av.s80 .st,.av.s96 .st{width:24px;height:24px;border-width:5px;right:0;bottom:0}
.st.online{background:var(--green)!important}.st.idle{background:var(--yellow)!important}.st.dnd{background:var(--red)!important}.st.offline{background:var(--dim)!important}

/* ---------- main ---------- */
.main{background:var(--bg-2);display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.topbar{height:56px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px 0 18px;border-bottom:1px solid var(--line);min-width:0}
.topbar .ico{color:var(--dim);display:grid;place-items:center}
.topbar .title{font-weight:700;white-space:nowrap}
.topbar .topic{color:var(--muted);font-size:14px;border-left:1px solid var(--line-2);padding-left:12px;margin-left:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;cursor:pointer}
.topbar .spacer{flex:1}
.topbar .search{width:180px;background:var(--input);border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:13px;outline:none;transition:width .2s,border-color .15s}
.topbar .search:focus{width:240px;border-color:var(--accent)}
.mobile-only{display:none!important}
.content{flex:1;display:flex;min-height:0;position:relative}
.chat{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.messages{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:14px;min-height:0}
.loader{padding:16px;text-align:center;color:var(--muted);font-size:13px}
.ch-welcome{padding:32px 20px 14px;margin:0 0 6px}
.ch-welcome .big{width:72px;height:72px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;margin-bottom:14px;color:var(--accent-2);box-shadow:0 0 0 1px var(--line-2),0 0 0 10px color-mix(in oklab,var(--accent) 7%,transparent)}
.ch-welcome .big svg{width:36px;height:36px}
.ch-welcome h2{font:600 28px/1.2 var(--display);margin-bottom:8px;letter-spacing:-.005em}
.ch-welcome p{color:var(--muted);max-width:60ch}
.divider{display:flex;align-items:center;gap:10px;margin:16px 20px 6px;color:var(--dim);font-size:12px;font-weight:600}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.divider.new{color:var(--red)}
.divider.new::before,.divider.new::after{background:var(--red)}
.msg{display:flex;gap:16px;padding:2px 56px 2px 20px;position:relative}
.msg:hover{background:var(--bg-hover)}
.msg.head{margin-top:14px}
.msg.mentioned{background:color-mix(in oklab,var(--yellow) 9%,transparent);box-shadow:inset 3px 0 var(--yellow)}
.msg.mentioned:hover{background:color-mix(in oklab,var(--yellow) 13%,transparent)}
.msg.highlight{background:var(--accent-soft)!important;transition:background 1s}
.msg .left{width:40px;flex:none;display:flex;justify-content:center}
.msg .left .time{font-size:11px;color:var(--dim);opacity:0;padding-top:3px}
.msg:hover .left .time{opacity:1}
.msg .left .av{cursor:pointer}
.msg.has-reply .left{padding-top:22px}
.msg .body{flex:1;min-width:0}
.msg .meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.msg .meta .name{font-weight:600;cursor:pointer}
.msg .meta .name:hover{text-decoration:underline}
.msg .meta .ts{font-size:12px;color:var(--dim)}
.msg .text{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);line-height:1.5}
.msg .text .edited{font-size:11px;color:var(--dim)}
.msg .text code{background:var(--code);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font:.87em/1.4 "Cascadia Code",Consolas,"SF Mono",monospace}
.msg .text pre{background:var(--code);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:6px 0;overflow-x:auto;white-space:pre;font:13px/1.5 "Cascadia Code",Consolas,"SF Mono",monospace;max-width:100%}
.msg .text blockquote{border-left:3px solid var(--line-2);padding-left:10px;margin:2px 0;color:var(--text-2)}
.msg .text .mention{background:var(--accent-soft);color:var(--accent-2);border-radius:5px;padding:0 3px;font-weight:600;cursor:pointer}
.msg .text .mention:hover{background:var(--accent);color:var(--on-accent)}
.msg .text .spoiler{background:var(--bg-4);color:transparent;border-radius:5px;cursor:pointer;padding:0 2px}
.msg .text .spoiler.shown{background:var(--bg-3);color:inherit}
.msg .text .big-emoji{font-size:44px;line-height:1.1}
.msg.system .text{color:var(--muted)}
.msg.system .left{color:var(--green);padding-top:2px}
.msg.system .left svg{width:18px;height:18px}
.msg.pending{opacity:.55}
.msg.failed .text{color:var(--red)}
.reply-ref{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin:0 0 3px;position:relative;cursor:pointer;min-width:0}
.reply-ref::before{content:"";position:absolute;left:-36px;top:9px;width:30px;height:11px;border-left:2px solid var(--line-2);border-top:2px solid var(--line-2);border-top-left-radius:8px}
.reply-ref .av{width:16px;height:16px;font-size:8px}
.reply-ref b{color:var(--text-2);font-weight:600;flex:none}
.reply-ref span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-ref:hover span{color:var(--text)}
.attachments{display:flex;flex-direction:column;gap:6px;margin-top:6px;align-items:flex-start}
.att-img{max-width:min(420px,100%);max-height:340px;border-radius:12px;cursor:zoom-in;object-fit:contain;background:var(--bg-1)}
.att-video{max-width:min(480px,100%);max-height:360px;border-radius:12px;background:#000}
.att-audio{width:min(380px,100%);margin-top:6px}
.att-file{display:flex;align-items:center;gap:12px;background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:12px 14px;max-width:min(440px,100%)}
.att-file>svg{width:30px;height:30px;color:var(--accent-2);flex:none}
.att-file .fi{min-width:0;flex:1}
.att-file a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-file small{color:var(--dim)}
.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.react{display:flex;align-items:center;gap:5px;height:27px;padding:0 9px;border-radius:9px;background:var(--bg-3);border:1px solid transparent;font-size:14px}
.react:hover{border-color:var(--line-2)}
.react.mine{background:var(--accent-soft);border-color:var(--accent)}
.react b{font-size:13px;font-weight:600;color:var(--text-2)}
.react.add{opacity:0;color:var(--muted)}
.msg:hover .react.add{opacity:1}
.thread-link{display:inline-flex;align-items:center;gap:8px;margin-top:5px;padding:7px 11px;border-radius:10px;background:var(--bg-1);border:1px solid var(--line);font-size:13px;color:var(--text-2)}
.thread-link svg{width:16px;height:16px}
.thread-link:hover{border-color:var(--accent);color:var(--text)}
.thread-link b{color:var(--accent-2)}
.toolbar{position:absolute;right:20px;top:-18px;display:none;background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:3;overflow:hidden}
.msg:hover .toolbar,.toolbar.open{display:flex}
.toolbar button{width:34px;height:34px;display:grid;place-items:center;color:var(--text-2)}
.toolbar button:hover{background:var(--bg-hover);color:var(--text)}
.toolbar button.danger:hover{color:var(--red)}
.toolbar svg{width:18px;height:18px}
.edit-box{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;resize:none;margin:3px 0}
.edit-hint{font-size:12px;color:var(--muted)}
.edit-hint button{color:var(--accent-2)}
.compact .msg.head{margin-top:6px}
.compact .msg .left .av{width:24px;height:24px;font-size:10px}
.compact .msg{gap:10px;padding-top:1px;padding-bottom:1px}
.compact .msg .left{width:24px}

.composer{padding:0 20px 22px;flex:none;position:relative}
.composer .attach-list{display:flex;gap:10px;overflow-x:auto;background:var(--bg-3);border-radius:14px 14px 0 0;padding:12px;border-bottom:1px solid var(--line)}
.att-chip{position:relative;width:160px;flex:none;background:var(--bg-1);border-radius:10px;padding:8px}
.att-chip .prev{height:100px;border-radius:8px;background:var(--bg-0);display:grid;place-items:center;overflow:hidden;margin-bottom:6px}
.att-chip .prev img,.att-chip .prev video{width:100%;height:100%;object-fit:cover}
.att-chip .prev svg{width:40px;height:40px;color:var(--accent-2)}
.att-chip .n{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-chip .x{position:absolute;top:-8px;right:-8px;background:var(--bg-4);border-radius:8px;width:28px;height:28px;display:grid;place-items:center;color:var(--red)}
.att-chip .x svg{width:16px;height:16px}
.reply-bar{display:flex;align-items:center;gap:8px;background:var(--bg-1);border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;padding:8px 14px;font-size:14px;color:var(--muted)}
.reply-bar b{color:var(--text-2)}
.reply-bar .sp{flex:1}
.reply-bar button{color:var(--muted)}
.reply-bar button svg{width:16px;height:16px}
.reply-bar button:hover{color:var(--text)}
.reply-bar .ping{font-weight:700;font-size:13px}
.reply-bar .ping.on{color:var(--accent-2)}
.cbox{display:flex;align-items:flex-end;gap:4px;background:var(--bg-3);border:1px solid var(--line);border-radius:14px;padding:4px 8px;transition:border-color .15s}
.cbox:focus-within{border-color:var(--line-2)}
.reply-bar+.cbox,.attach-list+.cbox,.reply-slot:not(:empty)+.attach-slot:empty+.cbox,.attach-slot:not(:empty)+.cbox{border-top-left-radius:0;border-top-right-radius:0}
.cbox textarea{flex:1;background:none;border:0;outline:none;resize:none;padding:11px 4px;max-height:40vh;line-height:1.45;min-height:46px}
.cbox .icon-btn{margin-bottom:6px}
.cbox.disabled{opacity:.6}
.typing{position:absolute;left:22px;bottom:3px;font-size:12px;color:var(--text-2);height:18px;display:flex;align-items:center;gap:6px}
.typing .dots{display:inline-flex;gap:3px}
.typing .dots i{width:5px;height:5px;border-radius:50%;background:var(--text-2);animation:blink 1.2s infinite}
.typing .dots i:nth-child(2){animation-delay:.2s}.typing .dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.autocomplete{position:absolute;left:20px;right:20px;bottom:calc(100% - 14px);background:var(--bg-1);border:1px solid var(--line-2);border-radius:14px;padding:6px;box-shadow:var(--shadow);z-index:20;max-height:300px;overflow-y:auto}
.autocomplete .h{font-size:12.5px;color:var(--muted);font-weight:600;padding:4px 8px 6px}
.ac-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;width:100%;text-align:left}
.ac-item.sel,.ac-item:hover{background:var(--bg-active)}
.ac-item small{color:var(--muted);margin-left:auto}
.drop-overlay{position:absolute;inset:0;background:color-mix(in oklab,var(--accent) 14%,transparent);border:2px dashed var(--accent);border-radius:16px;display:grid;place-items:center;z-index:50;font:600 18px var(--display);pointer-events:none;margin:10px}

/* members */
.members{width:var(--members);background:var(--bg-1);overflow-y:auto;padding:6px 10px 20px;flex:none;border-left:1px solid var(--line)}
.members h4{font-size:12.5px;font-weight:600;color:var(--muted);padding:18px 8px 6px}
.mem{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:10px;width:100%;text-align:left;color:var(--muted)}
.mem:hover{background:var(--bg-hover);color:var(--text)}
.mem.offline{opacity:.42}
.mem .av .st{border-color:var(--bg-1)}
.mem .who{min-width:0;flex:1}
.mem .who b{display:flex;align-items:center;gap:4px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem .who small{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem .who small.act-line{color:var(--green)}
.crown{color:var(--yellow);flex:none}

/* thread panel */
.thread-panel{width:420px;max-width:100%;background:var(--bg-2);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;flex:none}
.thread-panel .parent{border-bottom:1px solid var(--line);padding-bottom:8px}

/* voice */
.voice-view{flex:1;display:flex;flex-direction:column;background:var(--bg-0);min-height:0}
.voice-grid{flex:1;display:grid;gap:12px;padding:18px;align-content:center;justify-content:center;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));overflow:auto;min-height:0}
.tile{position:relative;background:var(--bg-2);border-radius:18px;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;min-height:140px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .12s}
.tile.speaking{box-shadow:inset 0 0 0 3px var(--comet)}
.tile video{width:100%;height:100%;object-fit:contain;background:#000}
.tile .label{position:absolute;left:10px;bottom:10px;background:rgba(5,3,15,.62);backdrop-filter:blur(6px);padding:4px 10px;border-radius:8px;font-size:13px;font-weight:600;display:flex;gap:6px;align-items:center;color:#fff}
.tile .label svg{width:14px;height:14px;color:var(--red)}
.tile .av{width:88px;height:88px;font-size:30px}
.tile.focus{grid-column:1/-1}
.tile .expand{position:absolute;top:10px;right:10px;background:rgba(5,3,15,.6);border-radius:8px;padding:5px;opacity:0;color:#fff}
.tile .expand svg{width:16px;height:16px}
.tile:hover .expand{opacity:1}
.voice-controls{display:flex;justify-content:center;gap:12px;padding:16px;flex:none}
.vbtn{width:54px;height:54px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.vbtn:hover{background:var(--bg-4)}
.vbtn.on{background:var(--text);color:var(--bg-0)}
.vbtn.off{color:var(--red)}
.vbtn.leave{background:var(--red);color:#fff;box-shadow:none}
.vbtn svg{width:24px;height:24px}
.voice-empty{text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:14px;margin:auto;padding:24px}
.voice-empty h2{color:var(--text);font:600 24px var(--display)}
.call-strip{background:var(--bg-0);border-bottom:1px solid var(--line);flex:none;max-height:55%;display:flex;flex-direction:column}
.call-strip .voice-grid{grid-template-columns:repeat(auto-fit,minmax(200px,320px));padding:14px}
.call-strip .voice-controls{padding:6px 0 14px}

/* home */
.home-view{flex:1;overflow-y:auto;padding:28px}
.home-view h2{font:600 17px var(--display);margin-bottom:14px}
.friend-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--line);cursor:pointer;border-radius:12px}
.friend-row:hover{background:var(--bg-hover);border-color:transparent}
.friend-row .who{flex:1;min-width:0}
.friend-row .who small{display:block;color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:48px 20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty img{width:96px;opacity:.9}
.empty h2{color:var(--text);font:600 22px var(--display)}

/* popouts / menus */
.layer{position:fixed;inset:0;z-index:100}
.popout{position:fixed;z-index:101;background:var(--bg-1);border-radius:18px;box-shadow:var(--shadow);border:1px solid var(--line-2);overflow:hidden;animation:pop .14s ease-out}
.menu{position:fixed;z-index:101;background:var(--bg-1);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:210px;border:1px solid var(--line-2);animation:pop .1s ease-out}
.menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 10px;border-radius:7px;font-size:14px;color:var(--text-2);text-align:left}
.menu button svg{width:16px;height:16px}
.menu button:hover{background:var(--accent);color:var(--on-accent)}
.menu button.danger{color:var(--red)}
.menu button.danger:hover{background:var(--red);color:#fff}
.menu hr{border:0;border-top:1px solid var(--line);margin:5px 4px}
.status-menu .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px}

/* profile card */
.pc-pop{width:340px;max-width:calc(100vw - 16px);background:transparent;border:0}
.profile-card{--card-a:var(--bg-1);--card-b:var(--bg-1);position:relative;width:100%;background:var(--bg-1);border-radius:18px;overflow:hidden}
.profile-card.themed{background:linear-gradient(180deg,var(--card-a),var(--card-b));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.profile-card .banner{height:118px;position:relative;overflow:hidden}
.profile-card .banner img,.acct-banner img{width:100%;height:100%;object-fit:cover}
.profile-card .avwrap{position:relative;margin:-46px 0 0 16px;width:fit-content;z-index:2}
.profile-card .avwrap .av{box-shadow:0 0 0 6px var(--card-a)}
.profile-card:not(.themed) .avwrap .av{box-shadow:0 0 0 6px var(--bg-1)}
.profile-card .avwrap .av .st{border-color:var(--bg-1)}
.profile-card.themed .avwrap .av .st{border-color:var(--card-a)}
.profile-card .inner{position:relative;z-index:2;margin:12px;background:color-mix(in oklab,var(--bg-0) 72%,transparent);border-radius:14px;padding:14px;max-height:52vh;overflow:auto;backdrop-filter:blur(8px)}
.profile-card.themed .inner{background:rgba(8,6,20,.5);color:#f4f2ff}
.profile-card .dn{font:600 19px/1.25 var(--display);width:fit-content}
.profile-card .un{color:var(--text-2);font-size:14px;margin-top:2px}
.profile-card.themed .un{color:rgba(244,242,255,.78)}
.profile-card .pron{color:var(--muted);margin-left:4px}
.profile-card .pron::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin:0 6px 2px 0;vertical-align:middle}
.profile-card .stt{margin-top:8px;font-size:14px}
.profile-card section{border-top:1px solid rgba(160,150,230,.16);margin-top:12px;padding-top:12px}
.profile-card h5{font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.profile-card.themed h5{color:rgba(244,242,255,.85)}
.profile-card .bio{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.profile-card .since{font-size:13.5px;color:var(--text-2)}
.profile-card.themed .since{color:rgba(244,242,255,.8)}
.since-sep{display:inline-block;width:1px;height:12px;background:currentColor;opacity:.4;margin:0 8px;vertical-align:middle}
.profile-card .none{color:var(--muted);font-size:13px}
.links{display:flex;flex-direction:column;gap:4px}
.links a{display:flex;align-items:center;gap:8px;font-size:14px;color:inherit;padding:4px 6px;margin:0 -6px;border-radius:7px}
.links a:hover{background:rgba(255,255,255,.06);text-decoration:none}
.links a svg{color:var(--accent-2);flex:none}
.conns{display:flex;flex-wrap:wrap;gap:6px}
.conn{display:flex;align-items:center;gap:7px;background:rgba(160,150,230,.1);border-radius:9px;padding:5px 9px 5px 5px;font-size:13px;color:inherit;max-width:100%}
.conn:hover{text-decoration:none;background:rgba(160,150,230,.18)}
.conn .cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conn .ver{color:var(--green);display:grid}
.cg{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;font:700 10px var(--display);flex:none}
.cg.big{width:44px;height:44px;border-radius:12px;font-size:20px}
.activity{border-top:1px solid rgba(160,150,230,.16);margin-top:12px;padding-top:12px}
.act-row{display:flex;gap:12px;align-items:center}
.act-row img,.art-ph{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none;background:var(--bg-3);display:grid;place-items:center}
.act-meta{min-width:0;display:flex;flex-direction:column;font-size:13px;color:var(--text-2)}
.profile-card.themed .act-meta{color:rgba(244,242,255,.8)}
.act-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-title{font-weight:600;color:inherit;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-card .act-title{color:var(--text)}.profile-card.themed .act-title{color:#fff}
.act-bar{height:4px;border-radius:2px;background:rgba(160,150,230,.2);margin-top:10px;overflow:hidden}
.act-bar i{display:block;height:100%;background:var(--text);border-radius:2px}
.act-times{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}
.role-tags{display:flex;flex-wrap:wrap;gap:5px}
.role-tag{display:flex;align-items:center;gap:6px;background:rgba(160,150,230,.12);border-radius:7px;padding:3px 8px;font-size:12px}
.role-tag i{width:10px;height:10px;border-radius:50%;display:block}
.role-tag button{color:var(--muted);font-size:11px}
.role-tag button:hover{color:var(--red)}
.role-tag.add{color:var(--text-2)}
.profile-card .actions{position:relative;z-index:2;display:flex;gap:8px;margin:0 12px 12px;align-items:center}
.profile-card .actions .btn{flex:1}
.profile-card .msgbox{flex:1;min-width:0;background:rgba(8,6,20,.45);border:1px solid rgba(160,150,230,.2);border-radius:10px;padding:10px 12px;outline:none;font-size:14px;color:inherit}
.profile-card:not(.themed) .msgbox{background:var(--input)}
.profile-card .actions .icon-btn{background:rgba(160,150,230,.12)}
/* profile effects */
@keyframes spin{to{transform:rotate(1turn)}}

/* modals */
.modal-wrap{position:fixed;inset:0;z-index:150;background:rgba(5,3,15,.66);backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;animation:fade .12s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:20px;box-shadow:var(--shadow);animation:pop .16s ease-out}
.modal.crop-modal{width:min(560px,100%)}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.modal .mh{padding:24px 24px 6px;text-align:center}
.modal .mh h2{font:600 20px/1.3 var(--display)}
.modal .mh p{color:var(--muted);font-size:14px;margin-top:6px}
.modal .mb{padding:14px 24px}
.modal .mf{padding:14px 24px;background:var(--bg-1);display:flex;justify-content:flex-end;gap:8px;align-items:center;border-top:1px solid var(--line)}
.modal .mf .sp{flex:1}
.modal .x{position:absolute;right:14px;top:14px;color:var(--muted)}
.choice{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;text-align:left;background:var(--bg-1)}
.choice:hover{border-color:var(--line-2)}
.choice.sel{border-color:var(--accent);background:var(--accent-soft)}
.choice .ci{width:40px;height:40px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center}
.choice .ct{flex:1}
.choice .ct small{display:block;color:var(--muted);font-size:13px}
.toggle{position:relative;width:44px;height:26px;flex:none}
.toggle input{opacity:0;width:0;height:0}
.toggle span{position:absolute;inset:0;background:var(--bg-4);border-radius:13px;transition:.2s;cursor:pointer}
.toggle span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.toggle input:checked+span{background:var(--accent)}
.toggle input:checked+span::after{transform:translateX(18px)}
.toggle input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.row-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.row-toggle .rt{flex:1}
.row-toggle .rt small{display:block;color:var(--muted);font-size:13px}
.upload-circle{width:88px;height:88px;border-radius:50%;border:2px dashed var(--line-2);display:grid;place-items:center;margin:0 auto 12px;cursor:pointer;color:var(--muted);font-size:12px;font-weight:600;overflow:hidden;text-align:center}
.upload-circle:hover{border-color:var(--accent);color:var(--text)}
.upload-circle img{width:100%;height:100%;object-fit:cover}
.invite-box{display:flex;background:var(--input);border:1px solid var(--line);border-radius:10px;padding:4px 4px 4px 12px;align-items:center;gap:8px}
.invite-box input{flex:1;background:none;border:0;outline:none;min-width:0}
.ring-modal{text-align:center;padding:30px}
.ring-modal .av{margin:0 auto 14px;animation:pulse 1.4s infinite}
.ring-modal h2{font:600 20px var(--display)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--green) 60%,transparent)}100%{box-shadow:0 0 0 24px transparent}}
.ring-modal .btns{display:flex;justify-content:center;gap:24px;margin-top:22px}
.lightbox{position:fixed;inset:0;z-index:180;background:rgba(5,3,15,.88);display:grid;place-items:center;padding:30px}
.lightbox img{max-width:100%;max-height:85vh;border-radius:10px}
.lightbox a{display:block;margin-top:10px;color:var(--text-2);font-size:14px}

/* cropper */
.cropper{display:grid;place-items:center;padding:8px 0}
.cropper .frame{position:relative;overflow:hidden;cursor:grab;touch-action:none;background:#000;box-shadow:0 0 0 1px var(--line-2),0 0 0 9999px rgba(0,0,0,0)}
.cropper .frame:active{cursor:grabbing}
.cropper .frame img{width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.cropper.round .frame{width:260px;height:260px;border-radius:50%}
.cropper.wide .frame{width:min(480px,100%);aspect-ratio:340/118;border-radius:14px}
.zoom-row{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--muted)}
.zoom-row input[type=range]{flex:1;accent-color:var(--accent)}

/* settings */
.settings{position:fixed;inset:0;z-index:140;background:var(--bg-2);display:flex;animation:fade .15s}
.settings .snav{width:max(232px,calc((100vw - 780px)/2));background:var(--bg-1);display:flex;justify-content:flex-end;overflow-y:auto;flex:none;border-right:1px solid var(--line)}
.settings .snav .in{width:232px;padding:56px 10px 20px 20px}
.settings .snav h6{font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings .snav button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:9px;color:var(--text-2);margin-bottom:2px}
.settings .snav button:hover{background:var(--bg-hover);color:var(--text)}
.settings .snav button.active{background:var(--bg-active);color:var(--text);font-weight:600}
.settings .snav button.danger{color:var(--red)}
.settings .snav hr{border:0;border-top:1px solid var(--line);margin:8px 10px}
.settings .sbody{flex:1;overflow-y:auto;padding:56px 44px 100px;min-width:0}
.settings .sbody .in{max-width:780px}
.settings h2{font:600 22px var(--display);margin-bottom:22px}
.settings h3{font-size:14px;font-weight:600;color:var(--text);margin:26px 0 6px}
.settings .hint{color:var(--muted);font-size:13px;margin-bottom:10px}
.settings .close{position:fixed;top:calc(56px + env(safe-area-inset-top));right:40px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:600;z-index:2}
.settings .close .c{width:38px;height:38px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center}
.settings .close:hover{color:var(--text)}
.settings .close:hover .c{border-color:var(--text)}
.save-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;background:var(--bg-0);border:1px solid var(--line-2);border-radius:14px;padding:10px 12px 10px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);z-index:3;width:min(720px,calc(100% - 32px));animation:pop .15s}
.save-bar span{flex:1;font-size:14px}
.acct-banner{height:110px;overflow:hidden}
.profile-editor{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
.pe-group{padding-bottom:4px}
.pe-group h3{margin-top:22px}
.pe-side{position:sticky;top:0}
.pe-side h3{margin-top:0;margin-bottom:10px}
.pv .profile-card{box-shadow:var(--shadow)}
.preview-card{border-radius:16px;overflow:hidden;background:var(--bg-1);border:1px solid var(--line)}
.media-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.swatch,.tswatch{width:34px;height:34px;border-radius:10px;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.tswatch{width:44px;height:34px;color:var(--muted);font-size:14px}
.swatch.sel,.tswatch.sel{border-color:var(--text)}
.color-dot{width:34px;height:34px;border-radius:10px;overflow:hidden;position:relative;border:1px solid var(--line-2);cursor:pointer;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.color-dot input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);opacity:0;cursor:pointer}
.two-colors{display:flex;gap:14px;align-items:center;margin-top:10px;flex-wrap:wrap}
.two-colors label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.two-colors input[type=color]{width:42px;height:30px;border:1px solid var(--line-2);border-radius:8px;background:none;padding:2px;cursor:pointer}
.link-row{display:grid;grid-template-columns:1fr 1.6fr auto;gap:8px;margin-bottom:8px;align-items:center}
.conn-hero{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-1)}
.conn-hero .grow{flex:1}
.conn-hero small{display:block;color:var(--muted);font-size:13px}
.theme-pick{display:flex;gap:14px;flex-wrap:wrap}
.theme-pick button{display:flex;flex-direction:column;gap:8px;align-items:center;font-size:13px;color:var(--text-2)}
.theme-pick button.on{color:var(--text);font-weight:600}
.th-prev{width:120px;height:76px;border-radius:12px;display:grid;grid-template-columns:18px 30px 1fr;overflow:hidden;border:2px solid transparent}
.theme-pick button.on .th-prev{border-color:var(--accent)}
.th-prev i{display:block}
.th-dark i:nth-child(1){background:#111214}.th-dark i:nth-child(2){background:#17181b}.th-dark i:nth-child(3){background:#1d1e22}
.th-midnight i:nth-child(1){background:#000}.th-midnight i:nth-child(2){background:#0a0a0b}.th-midnight i:nth-child(3){background:#0f0f11}
.th-light i:nth-child(1){background:#e3e5e8}.th-light i:nth-child(2){background:#f2f3f5}.th-light i:nth-child(3){background:#fff}
.list-row{display:flex;align-items:center;gap:12px;padding:11px 10px;border-bottom:1px solid var(--line)}
.list-row .grow{flex:1;min-width:0}
.list-row .grow small{display:block;color:var(--muted);font-size:12px}
.roles-layout{display:grid;grid-template-columns:210px 1fr;gap:22px}
.role-list button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border-radius:9px;color:var(--text-2)}
.role-list button:hover{background:var(--bg-hover)}
.role-list button.active{background:var(--bg-active);color:var(--text)}
.role-list i{width:12px;height:12px;border-radius:50%;display:block;flex:none}
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.perm-row small{display:block;color:var(--muted);font-size:13px}
.danger-zone{border:1px solid color-mix(in oklab,var(--red) 45%,transparent);border-radius:14px;padding:16px;display:flex;align-items:center;gap:16px;margin-top:26px}
.danger-zone .grow{flex:1}
.danger-zone small{display:block;color:var(--muted)}
.chip-select{display:flex;flex-wrap:wrap;gap:6px}
.chip-select button{border:1px solid var(--line-2);border-radius:20px;padding:5px 12px;font-size:13px;display:flex;align-items:center;gap:6px}
.chip-select button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.chip-select i{width:10px;height:10px;border-radius:50%}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--bg-3);color:var(--text);border:1px solid var(--line-2);padding:11px 16px;border-radius:12px;z-index:300;box-shadow:var(--shadow);font-size:14px;animation:pop .15s;max-width:min(560px,92vw)}
.toast.err{background:color-mix(in oklab,var(--red) 22%,var(--bg-2));border-color:color-mix(in oklab,var(--red) 50%,transparent)}
.emoji-picker{width:348px;height:390px;display:flex;flex-direction:column}
.emoji-picker input{margin:10px;width:calc(100% - 20px)}
.emoji-picker .grid{flex:1;overflow-y:auto;padding:0 8px 8px;display:grid;grid-template-columns:repeat(8,1fr);align-content:start}
.emoji-picker .grid h6{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--muted);padding:8px 4px 4px}
.emoji-picker .grid button{font-size:24px;height:38px;border-radius:8px}
.emoji-picker .grid button:hover{background:var(--bg-hover)}
.offline-banner{background:var(--red);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:4px}
.search-results{position:absolute;right:0;top:0;bottom:0;width:420px;max-width:100%;background:var(--bg-1);border-left:1px solid var(--line);display:flex;flex-direction:column;z-index:6}
.search-results .sr-head{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-weight:600}
.search-results .sr-list{flex:1;overflow-y:auto;padding:8px}
.search-results .msg{padding:10px;border-radius:12px;background:var(--bg-2);margin-bottom:8px;cursor:pointer}
.search-results .msg .toolbar{display:none!important}

/* responsive */
@media (max-width:1100px){.members{display:none}.members.force{display:block;position:absolute;right:0;top:0;bottom:0;z-index:8;box-shadow:var(--shadow)}
  .thread-panel{position:absolute;right:0;top:0;bottom:0;z-index:9;box-shadow:var(--shadow)}}
@media (max-width:760px){
  .app{grid-template-columns:var(--rail) 1fr}
  .sidebar{border-top-left-radius:18px}
  .app .main{position:fixed;inset:0;z-index:30;transform:translateX(100%);transition:transform .22s ease}
  .app.show-main .main{transform:none}
  .mobile-only{display:grid!important}
  .topbar .search{display:none}
  .msg{padding-right:12px;padding-left:12px}
  .toolbar{right:8px}
  .composer{padding:0 10px 12px}
  .settings{flex-direction:column}
  .settings .snav{width:100%;flex:none;justify-content:flex-start;border-right:0;border-bottom:1px solid var(--line)}
  .settings .snav .in{width:100%;padding:12px;display:flex;gap:4px;overflow-x:auto}
  .settings .snav h6,.settings .snav hr{display:none}
  .settings .snav button{white-space:nowrap;width:auto}
  .settings .sbody{padding:20px 16px 100px}
  .settings .close{top:auto;bottom:max(16px,env(safe-area-inset-bottom));right:16px;background:var(--bg-1);padding:8px;border-radius:14px}
  .profile-editor,.roles-layout{grid-template-columns:1fr}
  .pe-side{position:static}
  .thread-panel{width:100%}
  .link-row{grid-template-columns:1fr}
}
.pe-group{margin-bottom:18px}.pe-form>.field{margin-top:18px}

/* ============ 1.2 polish ============ */
/* splash */
.splash{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;background:var(--bg-0);color:var(--muted);font-size:14px}
.splash-logo{position:relative;width:96px;height:96px;display:grid;place-items:center}
.splash-logo img{width:76px;height:76px;object-fit:contain;animation:float 2.4s ease-in-out infinite}
.splash-logo i{position:absolute;inset:-14px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);animation:spin 1.1s linear infinite}
@keyframes float{50%{transform:translateY(-4px)}}

/* ambient depth */
.main{background:radial-gradient(1200px 380px at 30% -120px,color-mix(in oklab,var(--accent) 9%,transparent),transparent 70%),var(--bg-2)}
.topbar{background:color-mix(in oklab,var(--bg-2) 82%,transparent);backdrop-filter:blur(12px);position:relative;z-index:4}
.topbar .ico{width:30px;height:30px;border-radius:9px;background:var(--bg-3);color:var(--accent-2)}
.topbar .ico svg{width:17px;height:17px}

/* server icons */
.srv-ini{width:100%;height:100%;display:grid;place-items:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.rail-btn{background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.rail-btn:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.rail-item.active .rail-btn{background:var(--bg-2)}
.rail-btn.home{background:linear-gradient(160deg,var(--bg-3),var(--bg-1))}
.rail-btn.home img{width:32px;height:32px}
.rail-item.active .rail-btn.home{background:linear-gradient(160deg,color-mix(in oklab,var(--accent) 35%,var(--bg-3)),var(--bg-1))}
.sh-icon{width:26px;height:26px;border-radius:8px;overflow:hidden;flex:none;display:grid;font:600 10px var(--display)}
.sh-icon img{width:100%;height:100%;object-fit:cover}
.side-head{justify-content:flex-start}
.side-head .t{flex:1}
.side-banner .sh-icon{box-shadow:0 0 0 2px rgba(255,255,255,.25)}

/* channels */
.ch.active{background:linear-gradient(90deg,var(--accent-soft),transparent 120%);box-shadow:inset 2px 0 var(--accent)}

/* user panel as a floating card */
.user-panel{margin:8px;height:58px;border-radius:14px;border:1px solid var(--line);background:color-mix(in oklab,var(--bg-0) 55%,var(--bg-1))}
.voice-bar{margin:0 8px;border:1px solid var(--line);border-radius:14px;background:color-mix(in oklab,var(--green) 6%,var(--bg-1))}

/* messages */
.divider.date{margin:22px 20px 8px}
.divider.date span{padding:3px 12px;border:1px solid var(--line);border-radius:20px;background:var(--bg-2);color:var(--muted)}
.msg .left .av{transition:transform .15s}
.msg:hover .left .av{transform:scale(1.04)}
.orbit-ring{position:relative}
.orbit-ring::after{content:"";position:absolute;inset:-12px -26px;border:1.5px solid color-mix(in oklab,var(--accent) 55%,transparent);border-radius:50%;transform:rotate(-20deg)}
.ch-welcome .big{background:radial-gradient(circle at 30% 25%,color-mix(in oklab,var(--accent) 55%,var(--bg-3)),var(--bg-3) 70%);color:#fff}

/* composer */
.cbox{background:color-mix(in oklab,var(--bg-3) 92%,transparent);box-shadow:0 10px 30px -12px rgba(5,3,15,.6);padding:5px 6px 5px 8px}
.send-btn{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;margin:0 0 5px 2px;background:var(--bg-4);color:var(--dim);transition:background .15s,color .15s,transform .15s;flex:none}
.send-btn svg{width:18px;height:18px}
.send-btn.ready{background:var(--accent);color:var(--on-accent)}
.send-btn.ready:hover{transform:translateX(1px)}

/* avatars */
.av.s56{width:56px;height:56px;font-size:20px}
.av.s56 .st{width:18px;height:18px;border-width:4px}

/* home */
.home-view{padding:28px 32px 40px}
.home-hero{position:relative;overflow:hidden;border-radius:22px;padding:30px 32px;margin-bottom:18px;border:1px solid var(--line-2);
  background:radial-gradient(500px 220px at 85% 120%,color-mix(in oklab,var(--accent) 45%,transparent),transparent 70%),radial-gradient(400px 200px at 0% 0%,rgba(94,224,214,.14),transparent 70%),var(--bg-1);display:flex;align-items:center;gap:20px}
.home-hero h1{font:600 26px/1.2 var(--display);letter-spacing:-.01em;margin-bottom:6px}
.home-hero p{color:var(--muted)}
.hh-text{flex:1;min-width:0}
.hh-logo{width:120px;height:120px;object-fit:contain;opacity:.95;filter:drop-shadow(0 10px 30px color-mix(in oklab,var(--accent) 50%,transparent));animation:float 5s ease-in-out infinite}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:26px}
.q{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:14px;border-radius:16px;background:var(--bg-1);border:1px solid var(--line);transition:border-color .15s,transform .15s}
.q:hover{border-color:var(--line-2);transform:translateY(-1px)}
.q .qi{grid-row:1/3;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff}
.q .qi svg{width:20px;height:20px}
.q b{font-weight:600}
.q small{color:var(--muted);font-size:13px}
.home-view h2{font:600 15px var(--display);margin:22px 0 12px;color:var(--text-2)}
.muted-note{color:var(--muted)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.people.off{opacity:.6}
.person{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px 14px;border-radius:16px;background:var(--bg-1);border:1px solid var(--line);overflow:hidden;transition:border-color .15s,transform .15s}
.person[style*="--card-a"]{background:linear-gradient(180deg,var(--card-a),var(--card-b))}
.person:hover{border-color:var(--line-2);transform:translateY(-2px)}
.p-banner{display:block;width:calc(100% + 24px);margin:0 -12px}
.pb{height:52px;overflow:hidden}
.pb img{width:100%;height:100%;object-fit:cover}
.person .av{margin-top:-28px;box-shadow:0 0 0 4px var(--bg-1)}
.person[style*="--card-a"] .av{box-shadow:0 0 0 4px var(--card-a)}
.person b{margin-top:8px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person small{color:var(--muted);font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px;justify-content:center}
.person[style*="--card-a"] small{color:rgba(244,242,255,.8)}
.p-actions{display:flex;gap:6px;margin-top:10px;opacity:0;transition:opacity .15s}
.person:hover .p-actions,.person:focus-within .p-actions{opacity:1}
.p-actions .icon-btn{width:32px;height:32px;background:rgba(160,150,230,.14)}
.p-actions .icon-btn svg{width:16px;height:16px}

/* members polish */
.mem{transition:background .12s}
.mem .who small.act-line{color:var(--green);font-weight:500}

/* voice tiles avatars */
.tile .av{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tile.speaking .av{box-shadow:0 0 0 4px var(--comet),0 10px 30px rgba(0,0,0,.35)}

/* modals */
.modal .mh h2{letter-spacing:-.005em}
@media (max-width:760px){.home-view{padding:18px 14px 30px}.home-hero{padding:22px}.hh-logo{width:72px;height:72px}.home-hero h1{font-size:21px}}

/* ============ 1.3 — groups, staff badge, mobile ============ */
.av.gc{background:var(--bg-3);position:relative;overflow:visible}
.av.gc .g1,.av.gc .g2{position:absolute;border-radius:50%;box-shadow:0 0 0 2px var(--bg-1)}
.av.gc .g1{right:0;top:0}.av.gc .g2{left:0;bottom:0}
.av.gc .av{width:62%;height:62%}
.dm-item .av.gc .av,.rail-btn .av.gc .av{position:absolute}
.badge-staff{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.3px;
  color:#fff;background:linear-gradient(135deg,#ff6b8b,#8b6dff);padding:2px 7px 2px 5px;border-radius:6px;position:relative;top:-1px}
.badge-staff svg{color:#fff}
.pchip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-3);border-radius:20px;padding:3px 8px 3px 3px;font-size:13px}
.pchip button{display:grid;place-items:center;color:var(--muted)}
.pchip button:hover{color:var(--red)}
.pick-check{margin-left:auto;color:var(--accent)}
.ac-item.sel{background:var(--accent-soft)}
.gmembers{max-height:300px;overflow:auto}
.dm-item .nm small{display:block;font-size:12px;color:var(--dim)}

/* mobile tuning */
@media (max-width:760px){
  .home-view .people{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .modal{border-radius:18px 18px 0 0;align-self:flex-end;max-height:92dvh;width:100%}
  .modal-wrap{padding:0;place-items:end center}
  .topbar .icon-btn{width:36px;height:36px}
  .av.s80{width:72px;height:72px}
  .pc-pop{width:min(360px,96vw)}
  .settings .sbody{padding-bottom:120px}
}
/* installed PWA: pad for iOS safe areas */
@media (display-mode:standalone){
  .rail{padding-top:max(14px,env(safe-area-inset-top))}
  .user-panel{margin-bottom:max(8px,env(safe-area-inset-bottom))}
  .sidebar,.main{padding-top:env(safe-area-inset-top)}
}

/* ============ 1.4 — friends ============ */
.friends-hub{display:flex;flex-direction:column;height:100%;min-height:0}
.fh-top{display:flex;align-items:center;gap:6px;padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.fh-title{display:flex;align-items:center;gap:8px;font-weight:700;margin-right:10px}
.fh-title svg{width:20px;height:20px;color:var(--muted)}
.ftab{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;color:var(--text-2);font-weight:600;font-size:14px}
.ftab:hover{background:var(--bg-hover);color:var(--text)}
.ftab.active{background:var(--bg-active);color:var(--text)}
.ftab .badge{background:var(--red)}
.fh-add{margin-left:auto}
.fh-add.on{filter:brightness(1.1)}
.fh-body{flex:1;overflow-y:auto;padding:16px 20px 40px}
.fh-body h3{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:4px 0 8px}
.friend-row{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:12px;border-top:1px solid var(--line);cursor:pointer}
.friend-row:first-of-type{border-top:0}
.friend-row:hover{background:var(--bg-hover);border-color:transparent}
.friend-row .who{flex:1;min-width:0}
.friend-row .who b{display:flex;align-items:center;gap:2px}
.friend-row .who small{display:block;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-actions{display:flex;gap:6px;align-items:center}
.fr-actions .icon-btn{background:var(--bg-3)}
.fr-actions .icon-btn:hover{background:var(--bg-4)}
.fr-actions .icon-btn.accept{color:var(--green)}
.pending-tag{font-size:12px;color:var(--muted);font-weight:600}
.add-friend{max-width:620px}
.af-form{display:flex;gap:8px}
.af-form .input{flex:1}
.af-msg{margin-top:12px;font-size:14px;min-height:18px}
.af-msg.ok{color:var(--green)}
.af-msg.err{color:var(--red)}
.profile-card .actions+.actions{margin-top:-4px}

/* ============ 1.5 — call stage, screen share, ringtone ============ */
.stage-wrap{flex:1;display:flex;min-height:0;overflow:hidden}
.stage-wrap.grid-mode{padding:0}
.stage-wrap.grid-mode .voice-grid{flex:1}
.stage-wrap.theater{flex-direction:column;gap:12px;padding:16px}
.stage-wrap.theater .stage{flex:1;min-height:0;display:flex}
.stage-wrap.theater .stage .tile{flex:1;aspect-ratio:auto;border-radius:16px}
.stage-wrap.theater .stage .tile video{object-fit:contain;background:#000}
.strip{flex:none;height:116px;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:2px}
.strip .tile{flex:none;width:188px;aspect-ratio:16/9;min-height:0}
.strip .tile video{object-fit:cover}
.tile .vid-holder{position:absolute;inset:0;display:contents}
.tile .vid-holder video{position:absolute;inset:0;width:100%;height:100%}
.tile .live{background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:5px;letter-spacing:.3px}
.tile-tools{position:absolute;top:10px;right:10px;display:flex;gap:6px;opacity:0;transition:opacity .12s}
.tile:hover .tile-tools{opacity:1}
.tile-tools button{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(5,3,15,.62);backdrop-filter:blur(6px);color:#fff}
.tile-tools button:hover{background:rgba(5,3,15,.85)}
.tile-tools svg{width:17px;height:17px}
.tile.is-fs{border-radius:0}
.tile.is-fs video{object-fit:contain}
.tile:fullscreen{background:#000;display:grid;place-items:center}
.tile:fullscreen video{width:100%;height:100%;object-fit:contain}
.tile:fullscreen .label{bottom:20px;left:20px;font-size:15px}
.vc-bubble{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 30% 25%,color-mix(in oklab,var(--accent) 60%,var(--bg-3)),var(--bg-3) 72%);display:grid;place-items:center;color:#fff;margin-bottom:6px;box-shadow:0 0 0 10px color-mix(in oklab,var(--accent) 7%,transparent)}
.vc-bubble svg{width:40px;height:40px}
/* dm/group call join prompt */
.call-join{display:flex;align-items:center;gap:14px;padding:14px 18px}
.cj-avatars{display:flex}
.cj-avatars .av{margin-left:-8px;box-shadow:0 0 0 3px var(--bg-0)}
.cj-avatars .av:first-child{margin-left:0}
.cj-text{flex:1;min-width:0}
.cj-text b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cj-text span{color:var(--muted);font-size:13px}
/* nicer ringtone modal */
.ring-modal .ring-sub{color:var(--muted);margin-top:4px}
.ring-accept{background:var(--green)!important;color:#06281b!important}
.ring-accept:hover{filter:brightness(1.08)}
.ring-modal .btns .vbtn{transition:transform .1s}
.ring-modal .btns .vbtn:hover{transform:scale(1.06)}

/* GIF picker */
.gif-btn{font:700 11px var(--display);letter-spacing:.3px;width:auto;padding:0 8px;border:1px solid var(--line-2);border-radius:8px}
.gif-btn:hover{color:var(--text);border-color:var(--accent)}
.gif-picker{width:360px;max-width:96vw;height:420px;display:flex;flex-direction:column}
.gp-head{padding:10px;display:flex;gap:8px;align-items:center}
.gp-head .input{flex:1}
.gp-fav-tab{width:38px;height:38px;flex:none;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.gp-fav-tab:hover{color:var(--text);border-color:var(--line-2)}
.gp-fav-tab.on{color:var(--red);border-color:var(--red);background:color-mix(in oklab,var(--red) 12%,transparent)}
.gp-fav-tab.on svg{fill:var(--red)}
.gp-grid{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 8px 8px;display:flex;gap:8px;align-items:flex-start}
.gp-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.gp-item{position:relative;width:100%;border-radius:10px;overflow:hidden;background:var(--bg-3);display:block}
.gp-item img{width:100%;display:block}
.gp-item:hover{outline:2px solid var(--accent)}
.gp-fav{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;background:rgba(5,3,15,.55);backdrop-filter:blur(4px);display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .12s}
.gp-item:hover .gp-fav{opacity:1}
.gp-fav.on{opacity:1;color:var(--red)}
.gp-fav.on svg{fill:var(--red);stroke:var(--red)}
.gp-loading{flex:1;color:var(--muted);text-align:center;padding:30px 10px;font-size:14px}
.gp-foot{padding:6px 10px;font-size:11px;color:var(--dim);border-top:1px solid var(--line);text-align:center}

/* ============ 1.6 — custom audio player + sound picker ============ */
.audio-embed{display:flex;align-items:center;gap:12px;background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:12px 14px;max-width:min(440px,100%);margin-top:6px}
.audio-embed .ae-play{width:42px;height:42px;flex:none;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.audio-embed .ae-play:hover{filter:brightness(1.1)}
.audio-embed .ae-play svg{width:20px;height:20px}
.audio-embed .ae-main{flex:1;min-width:0}
.audio-embed .ae-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px}
.audio-embed .ae-bar{height:6px;border-radius:3px;background:var(--bg-4);cursor:pointer;overflow:hidden}
.audio-embed .ae-fill{height:100%;width:0;background:var(--accent);border-radius:3px}
.audio-embed .ae-time{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.audio-embed .ae-dl{flex:none;color:var(--muted);width:32px;height:32px;display:grid;place-items:center;border-radius:8px}
.audio-embed .ae-dl:hover{color:var(--text);background:var(--bg-hover)}
.audio-embed .ae-dl svg{width:18px;height:18px}
/* sound picker in settings */
.sound-pick{display:flex;flex-direction:column;gap:8px;max-width:420px}
.sound-opt{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;text-align:left;background:var(--bg-1)}
.sound-opt:hover{border-color:var(--line-2)}
.sound-opt.on{border-color:var(--accent);background:var(--accent-soft)}
.sound-opt .so-play{width:34px;height:34px;flex:none;border-radius:50%;background:var(--bg-3);color:var(--text);display:grid;place-items:center}
.sound-opt .so-play:hover{background:var(--accent);color:var(--on-accent)}
.sound-opt .so-play svg{width:16px;height:16px}
.sound-opt .so-name{flex:1;font-weight:600}
.sound-opt .so-check{color:var(--accent);display:grid}

/* call-user context menu */
.call-menu{min-width:240px}
.call-menu .cm-head{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.call-menu .cm-head b{font-weight:600;display:flex;align-items:center}
.call-menu .check.on{color:var(--accent)}
.call-menu .vol-row{display:flex;align-items:center;gap:8px;padding:8px 10px}
.call-menu .vol-row span{font-size:14px;color:var(--text-2)}
.call-menu .vol-row input[type=range]{flex:1;accent-color:var(--accent)}
.call-menu .vol-row .vol-val{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

/* screen-share picker (Discord-style) */
.sp-modal{width:min(820px,96vw)}
.screen-picker{display:flex;flex-direction:column;max-height:86vh}
.sp-tabs{display:flex;gap:6px;padding:16px 16px 0}
.sp-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:10px;color:var(--text-2);font-weight:600;background:var(--bg-1)}
.sp-tabs button svg{width:18px;height:18px}
.sp-tabs button.on{background:var(--accent-soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.sp-grid{flex:1;overflow-y:auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;min-height:200px}
.sp-item{border-radius:12px;overflow:hidden;background:var(--bg-1);border:2px solid transparent;text-align:left}
.sp-item:hover{border-color:var(--line-2)}
.sp-item.sel{border-color:var(--accent)}
.sp-thumb{aspect-ratio:16/10;background:#000;display:grid;place-items:center;overflow:hidden}
.sp-thumb img{width:100%;height:100%;object-fit:contain}
.sp-label{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13px}
.sp-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-ico{width:16px;height:16px;flex:none}
.sp-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px}
.sp-foot{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--line);background:var(--bg-1);flex-wrap:wrap}
.sp-qual{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.sp-qual button{padding:6px 10px;border-radius:8px;font-size:12px;font-weight:600;color:var(--text-2);border:1px solid var(--line)}
.sp-qual button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.sp-actions{display:flex;gap:8px}

/* favorite button on GIF messages */
.att-gif{position:relative;display:inline-block;max-width:min(420px,100%)}
.att-gif .att-img{display:block}
.att-gif .gif-tag{position:absolute;top:8px;left:8px;background:rgba(5,3,15,.6);backdrop-filter:blur(4px);color:#fff;font:700 10px var(--display);letter-spacing:.4px;padding:2px 6px;border-radius:5px;pointer-events:none}
.att-fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(5,3,15,.55);backdrop-filter:blur(4px);display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .12s,transform .1s}
.att-gif:hover .att-fav{opacity:1}
.att-fav:hover{transform:scale(1.1)}
.att-fav.on{opacity:1;color:var(--red)}
.att-fav.on svg{fill:var(--red);stroke:var(--red)}

/* ============ 1.8 — clean neutral theme (no gradients) ============ */
.auth::before{background:radial-gradient(1px 1px at 12% 18%,#fff5 50%,transparent),radial-gradient(1px 1px at 72% 12%,#fff4 50%,transparent),radial-gradient(1.5px 1.5px at 85% 64%,#fff5 50%,transparent),radial-gradient(1px 1px at 30% 80%,#fff3 50%,transparent),radial-gradient(1px 1px at 55% 45%,#fff3 50%,transparent)}
.auth::after{display:none}
.auth-card{background:var(--bg-2);backdrop-filter:none;border-radius:14px;border-color:var(--line)}
.auth h1,.modal .mh h2,.settings h2,.home-hero h1,.ch-welcome h2,.empty h2,.voice-empty h2{font-weight:700;letter-spacing:-.01em}
.main{background:var(--bg-2)}
.topbar{background:var(--bg-2);backdrop-filter:none;height:52px;box-shadow:0 1px 0 var(--line);border-bottom:0}
.topbar .ico{background:none;width:24px;color:var(--dim)}
.topbar .search{background:var(--bg-0);border-color:transparent}
.side-head{height:52px;font-weight:700;font-size:15px}
.sidebar{border-top-left-radius:12px}
.rail{gap:8px}
.rail-btn,.rail-btn.home{border-radius:50%;background:var(--bg-2);box-shadow:none;transition:border-radius .18s,background .18s,color .18s}
.rail-btn:hover,.rail-item.active .rail-btn{border-radius:16px;box-shadow:none}
.rail-btn:hover{background:var(--accent);color:#fff}
.rail-item.active .rail-btn{background:var(--accent);color:#fff}
.rail-btn:has(img):hover,.rail-item.active .rail-btn:has(img){background:var(--bg-2)}
.rail-btn.home:hover,.rail-item.active .rail-btn.home{background:var(--accent)}
.rail-item .pill{left:-12px;background:var(--text)}
.rail-item:hover:not(.active) .pill{height:20px}
.rail-item.active .pill{height:40px}
.rail-sep{width:32px;background:var(--line-2)}
.ch{border-radius:6px;padding:6px 8px}
.ch.active{background:var(--bg-active);box-shadow:none}
.ch.active .ico{color:var(--text-2)}
.dm-item{border-radius:6px}
.user-panel{margin:0;border-radius:0;border:0;border-top:1px solid var(--line);background:var(--bg-0);height:56px}
.voice-bar{margin:0;border-radius:0;border:0;border-top:1px solid var(--line);background:var(--bg-0)}
.ch-welcome .big{background:var(--bg-3);color:var(--text);box-shadow:none}
.home-hero{background:var(--bg-1);border-color:var(--line);border-radius:14px}
.hh-logo{filter:none}
.q,.person,.att-file,.thread-link,.audio-embed{border-radius:10px}
.vc-bubble{background:var(--bg-3);color:var(--text);box-shadow:none}
.badge-staff{background:var(--accent)}
.cbox{background:var(--bg-3);border-color:transparent;border-radius:10px;box-shadow:none}
.cbox:focus-within{border-color:transparent}
.modal{border-radius:12px;border-color:var(--line);background:var(--bg-2)}
.modal-wrap{background:rgba(0,0,0,.7);backdrop-filter:none}
.popout,.pc-pop .profile-card{border-radius:12px}
.menu{border-radius:8px;border-color:var(--line);background:var(--bg-0)}
.menu button{border-radius:4px}
.tip{background:var(--bg-0);border-color:var(--line);border-radius:6px}
.btn{border-radius:8px}
.input{border-radius:8px;border-color:transparent;background:var(--bg-0)}
.members{border-left:0}
.msg .text .mention{background:var(--accent-soft);color:var(--accent-2)}
.divider.date span{background:var(--bg-2)}
.orbit-ring::after{border-color:var(--line-2)}
.lightbox{background:rgba(0,0,0,.88)}
.side-banner .side-head{background:linear-gradient(transparent,rgba(0,0,0,.65))}

/* ============ 1.8 — call stage (Discord-style fit grid, focus, no overlap) ============ */
.voice-view{background:var(--bg-0)}
.stage-wrap{flex:1;display:flex;min-height:0;min-width:0;overflow:hidden;position:relative}
.voice-grid{flex:1;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-content:center;padding:16px;min-height:0;min-width:0;overflow:hidden;grid-template-columns:none}
.tile{position:relative;aspect-ratio:auto;min-height:0;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--tile-bg);box-shadow:none;cursor:pointer}
.tile.has-video{background:#000}
.voice-grid .tile{flex:none;width:var(--tw,320px);height:calc(var(--tw,320px) * 9 / 16)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;box-shadow:inset 0 0 0 0 transparent;transition:box-shadow .12s}
.tile.speaking::after{box-shadow:inset 0 0 0 2px var(--green),inset 0 0 0 4px rgba(0,0,0,.35)}
.tile.speaking{box-shadow:none}
.tile .vid-holder{display:block;position:absolute;inset:0}
.tile:not(.has-video) .vid-holder{display:none}
.tile .vid-holder video,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.tile video.mirror{transform:scaleX(-1)}
.tile .av,.tile .av.s96{width:clamp(44px,calc(var(--tw,320px) * .24),104px);height:clamp(44px,calc(var(--tw,320px) * .24),104px);font-size:clamp(16px,calc(var(--tw,320px) * .08),36px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.tile.speaking .av{box-shadow:0 0 0 3px var(--green),0 6px 20px rgba(0,0,0,.3)}
.tile .av .st{display:none}
.tile .label{position:absolute;left:8px;bottom:8px;z-index:3;max-width:calc(100% - 16px);background:rgba(0,0,0,.6);backdrop-filter:none;padding:3px 8px;border-radius:6px;font-size:13px;font-weight:600;display:flex;gap:5px;align-items:center;color:#fff}
.tile .label .ln{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tile .label svg{width:14px;height:14px;color:var(--red);flex:none}
.tile .live{background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:1px 5px;border-radius:4px;letter-spacing:.4px;flex:none}
.tile-tools{position:absolute;top:8px;right:8px;z-index:3;display:flex;gap:4px;opacity:0;transition:opacity .12s}
.tile:hover .tile-tools,.tile:focus-within .tile-tools{opacity:1}
.tile-tools button{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:rgba(0,0,0,.6);backdrop-filter:none;color:#fff}
.tile-tools button:hover{background:rgba(0,0,0,.85)}
.tile-tools svg{width:16px;height:16px}
/* focused tile fills the call area; others sit in a strip underneath */
.stage-wrap.theater{flex-direction:column;gap:10px;padding:12px 16px 2px}
.stage-wrap.theater .stage{flex:1;min-height:0;display:flex}
.stage-wrap.theater .stage .tile{flex:1;width:auto;height:auto;border-radius:10px;cursor:default}
.stage-wrap.theater .stage .tile .av{width:112px;height:112px;font-size:40px}
.strip{flex:none;height:clamp(64px,18%,124px);display:flex;gap:10px;justify-content:center;overflow-x:auto;overflow-y:hidden;padding:0}
.strip .tile{flex:none;height:100%;width:auto;aspect-ratio:16/9;min-height:0}
.strip .tile .av{width:clamp(28px,40%,52px);height:clamp(28px,40%,52px);font-size:16px}
.strip .tile .label{font-size:12px;padding:2px 6px;left:6px;bottom:6px}
.strip .tile .tile-tools button{width:26px;height:26px}
.strip .tile video{object-fit:cover}
.tile.is-fs,.tile:fullscreen{border-radius:0;background:#000}
.tile:fullscreen::after{display:none}
.tile:fullscreen .label{bottom:20px;left:20px;font-size:15px}
.tile:fullscreen .tile-tools{top:16px;right:16px}
/* controls: grouped like Discord */
.voice-controls{display:flex;justify-content:center;align-items:center;gap:10px;padding:10px 16px 16px;flex:none;position:relative}
.vc-group{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--bg-3)}
.vbtn{width:52px;height:44px;border-radius:10px;background:var(--bg-3);display:grid;place-items:center;color:var(--text);box-shadow:none;transition:background .12s,color .12s}
.vc-group .vbtn{background:transparent}
.vbtn:hover,.vc-group .vbtn:hover{background:var(--bg-4)}
.vbtn.on,.vc-group .vbtn.on{background:var(--text);color:var(--bg-0)}
.vbtn.off,.vc-group .vbtn.off{color:var(--red);background:color-mix(in oklab,var(--red) 16%,transparent)}
.vbtn.leave{width:60px;height:50px;border-radius:12px;background:var(--red);color:#fff}
.vbtn.leave:hover{background:color-mix(in oklab,var(--red) 85%,black)}
.vbtn svg{width:22px;height:22px}
.vbtn.ghost{background:transparent;color:var(--muted);width:40px;height:40px}
.vbtn.ghost:hover{color:var(--text);background:var(--bg-3)}
.vc-expand{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.ring-modal .btns .vbtn{width:56px;height:56px;border-radius:50%}
/* DM / group call area */
.call-strip{background:var(--bg-0);border-bottom:1px solid var(--line);flex:none;height:clamp(260px,46%,560px);max-height:none;display:flex;flex-direction:column;min-height:0}
.call-strip.ringing{height:auto}
.call-strip.expanded{flex:1;height:auto;border-bottom:0}
.call-strip .voice-grid{padding:12px}
.call-strip .voice-controls{padding:6px 16px 12px}
.chat.call-expanded>.messages,.chat.call-expanded>.composer,.chat.call-expanded>.typing{display:none}
.sp-audio{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer}
.sp-tabs button.on{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
@media (max-width:760px){.vbtn{width:46px;height:42px}.vbtn.leave{width:52px;height:46px}.vc-expand{position:static;transform:none}.call-strip{height:clamp(220px,42%,420px)}}

/* ============ 1.9 — resizable calls, group avatars, polish ============ */
.call-strip{position:relative}
.call-resize{position:absolute;left:0;right:0;bottom:-5px;height:10px;cursor:ns-resize;z-index:6;touch-action:none}
.call-resize::after{content:"";position:absolute;left:50%;top:3px;width:44px;height:4px;margin-left:-22px;border-radius:4px;background:var(--line-2);opacity:0;transition:opacity .15s,background .15s}
.call-strip:hover .call-resize::after{opacity:1}
.call-resize:hover::after,body.resizing-call .call-resize::after{opacity:1;background:var(--accent)}
body.resizing-call{cursor:ns-resize;user-select:none}
body.resizing-call iframe,body.resizing-call video{pointer-events:none}
.voice-bar .status b time{margin-left:auto;font:500 12px/1 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.voice-bar .status b{width:100%}
/* group chat avatar: two overlapping faces */
.av.gc{background:transparent!important;overflow:visible}
.av.gc .g1,.av.gc .g2{position:absolute;width:64%;height:64%;border-radius:50%;box-shadow:0 0 0 2px var(--bg-1);display:block}
.av.gc .g1{right:0;top:0}.av.gc .g2{left:0;bottom:0}
.av.gc .g1 .av,.av.gc .g2 .av,.dm-item .av.gc .av,.rail-btn .av.gc .av{position:static;width:100%;height:100%;font-size:max(9px,.42em)}
.av.gc .av .st{display:none}
.dm-item.active .av.gc .g1,.dm-item.active .av.gc .g2,.dm-item:hover .av.gc .g1,.dm-item:hover .av.gc .g2{box-shadow:0 0 0 2px var(--bg-3)}
.main .av.gc .g1,.main .av.gc .g2{box-shadow:0 0 0 2px var(--bg-2)}
/* rail + headers */
.rail-btn.action{background:var(--bg-2);border:0;color:var(--green)}
.rail-btn.action:hover{background:var(--green);color:#fff}
.sh-icon{background:var(--bg-3);border-radius:6px}
.ch-welcome .big{width:68px;height:68px}
/* messages: Discord-like rhythm and hover */
.msg{padding-top:1px;padding-bottom:1px}
.msg.head{margin-top:16px}
.msg:hover{background:rgba(0,0,0,.08)}
[data-theme=light] .msg:hover{background:rgba(6,6,7,.03)}
.msg .meta .name{font-weight:600}
.react{border-radius:8px;height:26px;background:var(--bg-3);border-color:transparent}
.react.mine{background:var(--accent-soft);border-color:var(--accent)}
.toolbar{background:var(--bg-2);border-color:var(--line);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.composer{padding-bottom:20px}
.send-btn{border-radius:8px}
/* lists */
.friend-row{border-radius:8px}
.fh-top{min-height:52px;padding:8px 20px}
.ftab{border-radius:6px;padding:4px 10px}
.members h4{font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.cat{font-size:12px;text-transform:uppercase;letter-spacing:.02em}
.mem{border-radius:6px;padding:5px 8px}
/* subtle motion */
.tile{transition:transform .15s ease}
.voice-grid .tile:hover{transform:translateY(-1px)}
.vbtn{transition:background .12s,color .12s,transform .08s}
.vbtn:active{transform:scale(.95)}
.toast{border-radius:10px;background:var(--bg-0);border-color:var(--line)}
.fh-title{display:none}

/* ============ 1.10 — Discord-style features ============ */
/* markdown */
.msg .text .md-h1{font-size:1.5em;font-weight:700;line-height:1.3;margin:6px 0 2px}
.msg .text .md-h2{font-size:1.25em;font-weight:700;line-height:1.3;margin:6px 0 2px}
.msg .text .md-h3{font-size:1.05em;font-weight:700;margin:4px 0 2px}
.msg .text .md-sub{font-size:12px;color:var(--muted);line-height:1.4}
.msg .text .md-li{position:relative;padding-left:18px}
.msg .text .md-li::before{content:"";position:absolute;left:6px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--text-2)}
.cemoji{width:1.375em;height:1.375em;object-fit:contain;vertical-align:-.35em;display:inline-block}
.big-emoji .cemoji{width:48px;height:48px}
.react .cemoji,.react img{width:18px;height:18px;object-fit:contain}
.emoji-picker .grid button img{width:28px;height:28px;object-fit:contain;margin:auto}
/* link previews */
.embeds{display:flex;flex-direction:column;gap:6px;margin-top:6px;align-items:flex-start}
.embed{position:relative;display:flex;gap:14px;max-width:min(520px,100%);background:var(--bg-1);border-left:4px solid var(--ec);border-radius:6px;padding:10px 14px 12px 12px}
.embed-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.embed-site{font-size:12px;color:var(--muted)}
.embed-title{font-weight:600;color:var(--blue);line-height:1.3}
.embed-desc{font-size:14px;color:var(--text-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.embed-big{margin-top:8px;max-width:100%;max-height:300px;border-radius:6px;object-fit:cover;cursor:zoom-in}
.embed-thumb{width:80px;height:80px;border-radius:6px;object-fit:cover;flex:none}
.embed-x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--bg-0);display:none;place-items:center;color:var(--muted)}
.embed-x svg{width:12px;height:12px}
.msg:hover .embed-x{display:grid}
.embed-x:hover{color:var(--text)}
.embed-img img{max-width:min(420px,100%);max-height:340px;border-radius:8px;cursor:zoom-in}
/* polls */
.poll{margin-top:6px;width:min(440px,100%);background:var(--bg-1);border:1px solid var(--line);border-radius:10px;padding:14px}
.poll-q{font-weight:700;font-size:16px;line-height:1.3}
.poll-sub{font-size:12px;color:var(--muted);margin:2px 0 10px}
.poll-opt{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;margin-bottom:6px;border-radius:8px;background:var(--bg-3);overflow:hidden;border:1px solid transparent}
.poll-opt:hover:not(:disabled){border-color:var(--line-2)}
.poll-opt.mine{border-color:var(--accent)}
.po-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent-soft);transition:width .35s ease}
.poll-opt.win .po-fill{background:color-mix(in oklab,var(--green) 25%,transparent)}
.po-check{position:relative;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;flex:none}
.poll-opt.mine .po-check{background:var(--accent);border-color:var(--accent);color:#fff}
.po-check svg{width:12px;height:12px}
.po-text{position:relative;flex:1;min-width:0;font-weight:500}
.po-n{position:relative;font-size:12px;color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums}
.poll-foot{font-size:12px;color:var(--muted);margin-top:4px}
.poll-answers{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.pa-row{display:flex;gap:6px;align-items:center}
.poll-row{display:flex;gap:16px;align-items:flex-end}
.attach-menu .mi{display:flex;align-items:center;gap:10px}
/* pins */
.pins-pop{width:420px;max-width:calc(100vw - 16px);max-height:min(560px,80vh);display:flex;flex-direction:column}
.pp-head{display:flex;align-items:center;gap:8px;padding:14px 16px;font-weight:700;border-bottom:1px solid var(--line)}
.pp-head svg{width:18px;height:18px}
.pp-list{overflow-y:auto;padding:8px;flex:1}
.pp-item{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;margin-bottom:8px;padding:8px 0}
.pp-item .msg{padding-right:12px}
.pp-item .msg:hover{background:none}
.pp-actions{position:absolute;top:6px;right:8px;display:none;gap:4px;align-items:center}
.pp-item:hover .pp-actions{display:flex}
.pp-empty{text-align:center;color:var(--muted);padding:30px 20px;display:flex;flex-direction:column;gap:8px;align-items:center}
.pp-empty svg{width:40px;height:40px;opacity:.6}
.pp-empty b{color:var(--text)}
.slow-tag{color:var(--muted);display:grid;place-items:center}
.slow-tag svg{width:18px;height:18px}
/* jump to present */
.chat{position:relative}
.jump-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 20px -6px;padding:6px 8px 6px 14px;background:var(--accent);color:#fff;border-radius:8px 8px 0 0;font-size:13px;font-weight:600;position:relative;z-index:2;animation:pop .12s}
.jump-bar button{display:flex;align-items:center;gap:4px;font-weight:700;padding:2px 6px;border-radius:5px}
.jump-bar button:hover{background:rgba(255,255,255,.15)}
.jump-bar svg{width:14px;height:14px}
/* slowmode */
.slow-ind{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;margin:0 4px 13px}
.slow-ind svg{width:16px;height:16px}
.slow-ind.waiting{color:var(--yellow)}
/* collapsible categories + muted */
.cat{cursor:pointer;user-select:none}
.cat span{display:flex;align-items:center;gap:2px}
.cat span svg{width:12px;height:12px;transition:transform .15s;margin-left:-4px}
.cat.collapsed span svg{transform:rotate(-90deg)}
.ch.muted,.dm-item.muted{opacity:.45}
.ch.muted.active,.dm-item.muted.active{opacity:.75}
.rail-item.muted .rail-btn{opacity:.6}
/* quick switcher */
.qs-modal{width:min(560px,100%)}
.qs{padding:18px}
.qs-in{font-size:18px;padding:14px 16px}
.qs-list{margin-top:10px;max-height:min(380px,55vh);overflow-y:auto}
.qs-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:6px;text-align:left;color:var(--text-2)}
.qs-item.sel{background:var(--bg-active);color:var(--text)}
.qs-item.unread .qs-name{font-weight:700;color:var(--text)}
.qs-ico{width:24px;display:grid;place-items:center;color:var(--dim)}
.qs-ico svg{width:18px;height:18px}
.qs-srv{width:24px;height:24px;border-radius:8px;overflow:hidden;background:var(--bg-3);display:grid;place-items:center;font-size:9px;font-weight:700;flex:none}
.qs-srv img{width:100%;height:100%;object-fit:cover}
.qs-name{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qs-sub{margin-left:auto;font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qs-none{text-align:center;color:var(--muted);padding:24px}
.qs-tip{font-size:12px;color:var(--muted);margin-top:12px}
.qs-tip b{color:var(--green)}
kbd{font:600 11px var(--font);background:var(--bg-3);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 5px;margin:0 2px}
/* timeouts */
.to-opts button.on{background:color-mix(in oklab,var(--red) 18%,transparent);border-color:var(--red);color:var(--text)}
/* member rows: banner fades in behind the right side (servers + group chats) */
.mem{position:relative;overflow:hidden;isolation:isolate}
.mem-banner{position:absolute;right:0;top:0;bottom:0;width:62%;background-size:cover;background-position:center;z-index:-1;opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%);transition:opacity .15s}
.mem:hover .mem-banner{opacity:.8}
.mem.offline .mem-banner{opacity:.25}
.mem .who b,.mem .who small{text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* your profile card (bottom-left) */
.self-pop{width:340px;max-width:calc(100vw - 16px);background:transparent;border:0;overflow:visible}
.self-pop .profile-card{box-shadow:var(--shadow);border:1px solid var(--line)}
.status-bubble{position:absolute;left:108px;right:12px;top:126px;z-index:3;text-align:left;background:var(--bg-0);border:1px solid var(--line-2);border-radius:14px;padding:8px 12px;font-size:13px;color:var(--text);box-shadow:0 4px 12px rgba(0,0,0,.3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-bubble::before{content:"";position:absolute;left:-6px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--bg-0);border:1px solid var(--line-2)}
.status-bubble:hover{border-color:var(--accent)}
.sb-ph{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-style:italic}
.self-inner{padding-top:16px}
.self-bio{margin-top:10px;font-size:14px;color:var(--text-2);max-height:120px;overflow:auto}
.self-menu{margin-top:12px;background:color-mix(in oklab,var(--bg-0) 70%,transparent);border-radius:8px;padding:4px}
.self-menu>button,.sm-statuses button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:6px;text-align:left;font-size:14px;color:var(--text-2)}
.self-menu>button:hover,.sm-statuses button:hover{background:var(--bg-hover);color:var(--text)}
.self-menu>button svg{width:16px;height:16px;flex:none}
.self-menu>button span{flex:1}
.self-menu .danger{color:var(--red)}
.self-menu .danger:hover{background:color-mix(in oklab,var(--red) 14%,transparent);color:var(--red)}
.sm-status svg:last-child{transform:rotate(-90deg);transition:transform .15s}
.sm-status.open svg:last-child{transform:none}
.self-menu .dot{width:10px;height:10px;border-radius:50%;flex:none}
.sm-statuses{padding:2px 0 4px 8px}
.sm-statuses button.on{color:var(--text);background:var(--bg-active)}
.sm-statuses small{display:block;font-size:12px;color:var(--muted)}
.sm-sep{height:1px;background:var(--line);margin:4px 8px}
/* server emoji settings */
.emoji-up{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.emoji-table{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.et-h,.et-row{display:grid;grid-template-columns:64px 1fr 44px;gap:12px;align-items:center;padding:8px 12px}
.et-h{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;background:var(--bg-1)}
.et-row{border-top:1px solid var(--line)}
.et-row img{width:32px;height:32px;object-fit:contain}
/* pinned marker */
.msg.pinned .meta::after{content:"📌";font-size:11px;margin-left:2px;opacity:.7}

/* ============ 1.11 — install sheet (phones) ============ */
.install-sheet{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:260;max-width:440px;margin:0 auto;background:var(--bg-1);border:1px solid var(--line-2);border-radius:16px;padding:14px 14px 8px;box-shadow:0 20px 50px rgba(0,0,0,.55);animation:sheetUp .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes sheetUp{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
.is-head{display:flex;align-items:center;gap:12px}
.is-head img{width:48px;height:48px;border-radius:12px;flex:none}
.is-head div{flex:1;min-width:0}
.is-head b{display:block;font-size:16px}
.is-head span{display:block;font-size:13px;color:var(--muted);line-height:1.3}
.is-steps{list-style:none;margin:14px 0 6px;display:flex;flex-direction:column;gap:10px}
.is-steps li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--text-2)}
.is-steps b{color:var(--text)}
.is-steps small{display:block;color:var(--muted);font-size:12px}
.is-n{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;flex:none;margin-top:1px}
.is-chip{display:inline-grid;place-items:center;width:26px;height:24px;border-radius:6px;background:var(--bg-3);color:var(--blue);vertical-align:middle;margin:0 2px}
.is-note{font-size:13px;color:var(--muted);margin:10px 0 4px}
.is-actions{margin:14px 0 4px}
.is-later{display:block;width:100%;padding:10px;color:var(--muted);font-size:13px;font-weight:600}
.is-later:hover{color:var(--text)}
.is-arrow{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);color:var(--accent-2);animation:nudge 1.1s ease-in-out infinite;pointer-events:none}
.is-arrow svg{width:28px;height:28px}
@keyframes nudge{50%{transform:translate(-50%,6px)}}
@media (min-width:900px) and (pointer:fine){.install-sheet{display:none}}

/* ============ 1.12 — avatars load without a colored flash; mobile message sheet ============ */
.av.has-img .crop img{opacity:0;transition:opacity .15s}
.av.has-img .crop img.ok{opacity:1;transition:none}
@media (hover:none) and (pointer:coarse){
  .msg .toolbar,.msg:hover .toolbar{display:none!important}
  .msg:hover{background:none}
  .msg .react.add{display:none}
  .messages .msg{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  .msg.pressed,.msg.sheet-target{background:var(--bg-hover)!important}
  .embed-x{display:grid}
}
.msg-sheet{position:fixed;left:0;right:0;bottom:0;max-height:80vh;overflow-y:auto;background:var(--bg-1);border-radius:18px 18px 0 0;padding:6px 12px calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.5);animation:sheetUp .22s cubic-bezier(.2,.9,.3,1.1);transition:transform .15s}
.ms-grab{width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:4px auto 12px}
.ms-reacts{display:flex;gap:8px;justify-content:space-between;margin-bottom:12px}
.ms-reacts button{flex:1;height:52px;border-radius:14px;background:var(--bg-3);font-size:26px;display:grid;place-items:center;color:var(--text-2)}
.ms-reacts button.on{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.ms-reacts button svg{width:26px;height:26px}
.ms-reacts button:active,.ms-list button:active{transform:scale(.97)}
.ms-list{background:var(--bg-2);border-radius:14px;overflow:hidden}
.ms-list button{display:block;width:100%;text-align:left;padding:16px 18px;font-size:17px;font-weight:500;color:var(--text);border-top:1px solid var(--line)}
.ms-list button:first-child{border-top:0}
.ms-list button.danger{color:var(--red)}
.ms-sep{height:8px;background:var(--bg-1)}
.ms-sep+button{border-top:0}
.ms-cancel{display:block;width:100%;margin-top:10px;padding:15px;border-radius:14px;background:var(--bg-3);font-size:17px;font-weight:600}

/* ============ 1.13 — visual rework: floating panels, violet-tinted night, display type ============ */
:root,[data-theme=dark]{
  --bg-0:#0c0a11;--bg-1:#13111a;--bg-2:#19161f;--bg-3:#221e2b;--bg-4:#2d2838;--tile-bg:#1f1b28;
  --bg-hover:rgba(214,204,255,.045);--bg-active:rgba(214,204,255,.09);--line:rgba(214,204,255,.07);--line-2:rgba(214,204,255,.13);
  --text:#f2eff9;--text-2:#d2cde0;--muted:#9c96b0;--dim:#6e6884;
  --input:#0f0d15;--code:#0f0d15;--shadow:0 16px 40px rgba(4,2,12,.55);--glass:rgba(19,17,26,.92);
  --display:"Bricolage Grotesque","Onest","Segoe UI",system-ui,sans-serif;
}
[data-theme=midnight]{--bg-0:#000;--bg-1:#09080d;--bg-2:#0e0c13;--bg-3:#17141e;--bg-4:#211d2a;--tile-bg:#13111a}
/* panels float on the night background with small gaps */
.app{gap:8px;padding:8px 8px 8px 0}
.sidebar{border-radius:16px;background:var(--bg-1);border:1px solid var(--line)}
.main{border-radius:16px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.rail{padding:8px 0}
/* headings get the display face */
.side-head{font:700 17px/1.2 var(--display);letter-spacing:-.01em;height:56px;border-bottom:1px solid var(--line)}
.topbar{height:56px;box-shadow:none;border-bottom:1px solid var(--line);background:var(--bg-2)}
.topbar .title{font:700 17px/1.2 var(--display);letter-spacing:-.01em}
.topbar .topic{font-size:13.5px}
.ch-welcome h2,.voice-empty h2,.home-hero h1,.modal .mh h2,.settings h2,.auth h1,.empty h2{font-family:var(--display);font-weight:800;letter-spacing:-.025em}
.ch-welcome h2{font-size:32px}
.ch-welcome .big{border-radius:20px;background:var(--accent-soft);color:var(--accent-2)}
/* rail */
.rail-btn,.rail-btn.home{background:var(--bg-2);border:1px solid var(--line)}
.rail-item.active .rail-btn,.rail-btn:hover{border-color:transparent}
.rail-item .pill{left:-8px;width:4px}
/* channel list */
.cat{padding:16px 6px 6px 8px;font-size:11.5px;letter-spacing:.04em}
.ch,.dm-item{border-radius:8px}
.ch.active,.dm-item.active{background:var(--bg-active);color:var(--text)}
.ch.active .ico{color:var(--accent-2)}
.side-search{background:var(--bg-0);border-radius:10px;border-color:transparent;padding:9px 12px}
/* your panel: a card tucked into the bottom of the sidebar */
.user-panel{margin:8px;border-radius:12px;background:var(--bg-0);border:1px solid var(--line);height:56px}
.voice-bar{margin:0 8px;border-radius:12px;background:color-mix(in oklab,var(--green) 7%,var(--bg-0));border:1px solid var(--line)}
/* messages */
.msg:hover{background:rgba(214,204,255,.03)}
.msg .meta .name{font-weight:650}
.msg .meta .ts{font-size:11.5px}
.divider.date span{background:var(--bg-2);border-color:var(--line);font-size:11.5px;font-weight:600}
.reply-ref::before{border-color:var(--bg-4)}
.react{background:var(--bg-3);border-radius:9px}
.react.mine{background:var(--accent-soft)}
.toolbar{background:var(--bg-1);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 8px 24px rgba(4,2,12,.4)}
/* composer: a soft floating bar */
.composer{padding:0 16px 16px}
.cbox{background:var(--bg-3);border:1px solid var(--line);border-radius:14px;padding:4px 6px 4px 8px;transition:border-color .15s,box-shadow .15s}
.cbox:focus-within{border-color:color-mix(in oklab,var(--accent) 45%,transparent);box-shadow:0 0 0 3px var(--accent-soft)}
.send-btn{border-radius:10px}
.send-btn.ready{box-shadow:0 4px 14px -4px color-mix(in oklab,var(--accent) 70%,transparent)}
/* member list */
.members{background:var(--bg-2);border-left:1px solid var(--line)}
.members h4{color:var(--dim)}
.mem{border-radius:10px}
/* popups and menus */
.menu{background:var(--bg-1);border:1px solid var(--line-2);border-radius:12px;padding:6px;box-shadow:var(--shadow)}
.menu button{border-radius:7px}
.modal{background:var(--bg-1);border:1px solid var(--line-2);border-radius:18px}
.modal .mf{background:var(--bg-0);border-top-color:var(--line)}
.popout,.pc-pop .profile-card,.self-pop .profile-card{border-radius:16px}
.tip{background:var(--bg-0);border-radius:8px;font-weight:600}
.toast{background:var(--bg-1);border:1px solid var(--line-2);border-radius:12px}
/* buttons */
.btn{border-radius:10px}
.btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* home / friends */
.fh-top{border-bottom-color:var(--line)}
.friend-row{border-top-color:var(--line)}
/* calls sit on the deepest layer */
.voice-view,.call-strip{background:var(--bg-0)}
/* phones: panels go edge to edge */
@media (max-width:760px){
  .app{gap:0;padding:0}
  .sidebar,.main{border-radius:0;border:0}
  .user-panel{margin:6px 8px calc(6px + env(safe-area-inset-bottom))}
}
.fh-top{border-bottom:0;padding-top:12px}
/* unread badges: clean pill, crisp outline that matches the rail */
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font:700 12px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:0;background:var(--red);color:#fff}
.rail-item .badge{position:absolute;right:-4px;bottom:-4px;box-shadow:0 0 0 3px var(--bg-0);border:0;pointer-events:none}
.rail-btn[data-dm] .av{width:48px;height:48px}
.rail-item.active .rail-btn.home img,.rail-btn.home:hover img{filter:brightness(0) invert(1)}

/* ============ 1.14 — status shapes (not just color) for colorblind users ============ */
/* --ring = the color behind the dot, so the cut-outs match their surroundings */
.av .st{--ring:var(--bg-1);border-color:var(--ring)!important}
.main .av .st,.members .av .st,.home-view .av .st,.messages .av .st{--ring:var(--bg-2)}
.user-panel .av .st{--ring:var(--bg-0)}
.dm-item.active .av .st,.mem:hover .av .st{--ring:color-mix(in oklab,var(--bg-1) 85%,white)}
.profile-card .av .st,.popout .av .st{--ring:var(--bg-1)}
.profile-card.themed .avwrap .av .st{--ring:var(--card-a)}
.st.online{background:var(--green)!important}
.st.idle{background:radial-gradient(circle at 26% 26%,var(--ring) 0 40%,var(--yellow) 41%)!important}   /* moon */
.st.dnd{background:linear-gradient(var(--ring),var(--ring)) center/62% 24% no-repeat,var(--red)!important}  /* dash */
.st.offline{background:radial-gradient(circle,var(--ring) 0 36%,var(--dim) 37%)!important}            /* hollow ring */
.status-menu .dot,.self-menu .dot{position:relative}
.sr-ico{display:inline-flex}
.sr-ico svg{width:14px;height:14px}
.tile .label .sr-ico svg{width:14px;height:14px;color:var(--red)}
.st-solo{position:relative;width:12px;height:12px;flex:none;display:inline-block}
.st-solo .st{position:absolute;inset:0;width:12px;height:12px;border:0!important;border-radius:50%;--ring:var(--bg-1)}
.self-menu .st-solo .st{--ring:color-mix(in oklab,var(--bg-0) 70%,var(--bg-1))}
.self-menu>button .st-solo,.sm-statuses .st-solo{flex:none!important}

/* DND: the red dot and its dash are ONE vector shape (a circle with the dash cut out), so they are
   always rasterized together and the dash can't drift off center at any size or display scaling */
.st.dnd{background:var(--ring)!important}
.st.dnd::after{content:"";position:absolute;inset:0;background:var(--red);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M0 10a10 10 0 1 0 20 0a10 10 0 1 0-20 0zM5 8h10a2 2 0 0 1 0 4H5a2 2 0 0 1 0-4z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M0 10a10 10 0 1 0 20 0a10 10 0 1 0-20 0zM5 8h10a2 2 0 0 1 0 4H5a2 2 0 0 1 0-4z'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* ============ 1.15 — categories, inbox, stickers, voice messages, search filters, forums, devices, DM profile ============ */
/* categories + drag & drop */
.cat-empty{margin:2px 8px 6px 22px;padding:6px 10px;border:1px dashed var(--line-2);border-radius:8px;color:var(--dim);font-size:12px}
.ch[draggable=true],.cat[draggable=true]{cursor:pointer}
.ch.dragging,.cat.dragging{opacity:.4}
.drop-before{box-shadow:inset 0 2px 0 var(--accent)}
.drop-after{box-shadow:inset 0 -2px 0 var(--accent)}
.drop-into{background:var(--accent-soft)!important;border-radius:8px;color:var(--text)}
/* inbox */
.inbox-btn{position:relative}
.inbox-btn.has-new::after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--bg-2)}
.inbox-pop{width:460px;max-width:calc(100vw - 16px);max-height:min(620px,82vh);display:flex;flex-direction:column}
.ib-sub{font-weight:500;font-size:12px;color:var(--muted);margin-left:auto}
.ib-item{cursor:pointer}
.ib-item:hover{border-color:var(--line-2)}
.ib-where{font-size:12px;font-weight:600;color:var(--muted);padding:0 12px 4px 14px}
/* stickers */
.sticker{display:block;width:160px;height:160px;object-fit:contain;margin-top:4px}
.sticker-picker{width:360px;height:400px;display:flex;flex-direction:column}
.sticker-picker input{margin:10px;width:calc(100% - 20px)}
.sp-grid2{flex:1;overflow-y:auto;padding:0 8px 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start}
.sp-grid2 h6{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--muted);padding:8px 4px 2px}
.sp-grid2 button{aspect-ratio:1;border-radius:10px;padding:6px}
.sp-grid2 button:hover{background:var(--bg-hover)}
.sp-grid2 img{width:100%;height:100%;object-fit:contain}
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sg-item{background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.sg-item img{grid-column:1/-1;width:100%;aspect-ratio:1;object-fit:contain}
/* voice messages */
.voice-msg{display:flex;align-items:center;gap:10px;background:var(--bg-1);border:1px solid var(--line);border-radius:22px;padding:6px 14px 6px 6px;width:min(320px,100%);margin-top:4px}
.vm-play{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.vm-play svg{width:16px;height:16px}
.vm-wave{flex:1;height:30px;display:flex;align-items:center;gap:2px;cursor:pointer;min-width:0}
.vm-wave i{flex:1;min-width:2px;border-radius:2px;background:var(--bg-4);transition:background .1s}
.vm-wave i.on{background:var(--accent-2)}
.vm-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
.cbox.recording textarea,.cbox.recording>.icon-btn,.cbox.recording>.send-btn,.cbox.recording>.slow-ind{display:none}
.rec-bar{flex:1;display:flex;align-items:center;gap:10px;padding:4px 0;min-height:46px}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--red);animation:blink 1s infinite}
.rec-time{font-variant-numeric:tabular-nums;font-weight:600;min-width:38px}
.rec-wave{flex:1;height:28px;display:flex;align-items:center;justify-content:flex-end;gap:2px;overflow:hidden}
.rec-wave i{width:3px;flex:none;border-radius:2px;background:var(--accent-2)}
/* search filters */
.search-filters{position:fixed;z-index:120;width:320px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);padding:6px;max-height:360px;overflow-y:auto}
.sf-h{font-size:12px;font-weight:700;color:var(--muted);padding:6px 8px}
.search-filters button{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;text-align:left;padding:7px 8px;border-radius:7px;font-size:14px}
.search-filters button:hover{background:var(--bg-hover)}
.search-filters button b{font-weight:700}
.search-filters button svg{width:16px;height:16px;color:var(--dim)}
.search-filters small{flex-basis:100%;font-size:12px;color:var(--muted)}
.sf-hint{color:var(--muted);font-size:13px}
.sr-item{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:8px 0;cursor:pointer}
.sr-item:hover{border-color:var(--line-2)}
.sr-item .msg{background:none!important}
.sr-more{margin:6px 0 10px}
/* forums */
.forum-view{flex:1;min-width:0;overflow-y:auto;padding:16px 20px 30px}
.fv-head{display:flex;gap:10px;align-items:center;margin-bottom:14px;position:sticky;top:-16px;padding:16px 0 10px;margin-top:-16px;background:var(--bg-2);z-index:2}
.fv-search{flex:1}
.fv-sort{width:auto}
.fv-guide{background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;color:var(--text-2);font-size:14px}
.fv-list{display:flex;flex-direction:column;gap:10px;max-width:900px}
.fp{display:flex;gap:14px;align-items:stretch;text-align:left;width:100%;background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .12s,background .12s}
.fp:hover{border-color:var(--line-2);background:color-mix(in oklab,var(--bg-1) 85%,var(--bg-3))}
.fp.open{border-color:var(--accent)}
.fp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.fp-title{font:700 17px/1.3 var(--display);letter-spacing:-.01em}
.fp-preview{color:var(--text-2);font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fp-meta{display:flex;gap:14px;color:var(--muted);font-size:13px;align-items:center;margin-top:auto}
.fp-meta span{display:inline-flex;align-items:center;gap:5px}
.fp-react{background:var(--bg-3);border-radius:8px;padding:2px 8px}
.fp-img{width:96px;height:96px;object-fit:cover;border-radius:10px;flex:none}
/* devices */
.dev-list h3{margin:22px 0 8px}
.dev-row{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--bg-1)}
.dev-row.current{border-color:color-mix(in oklab,var(--green) 40%,transparent)}
.dev-ico{width:44px;height:44px;border-radius:12px;background:var(--bg-3);display:grid;place-items:center;color:var(--text-2);flex:none}
.dev-row .grow{flex:1;min-width:0}
.dev-row small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.dev-this{font-size:12px;font-weight:700;color:var(--green);background:color-mix(in oklab,var(--green) 15%,transparent);padding:3px 9px;border-radius:999px}
/* DM profile side panel */
.members.dm-panel{width:340px;padding:0;overflow-y:auto;background:var(--bg-1)}
.dm-profile .profile-card{border-radius:0;background:transparent}
.dm-profile .profile-card .inner{margin:12px 14px}
.dmp-extra{padding:0 14px 20px}
.dmp-extra section{background:color-mix(in oklab,var(--bg-0) 72%,transparent);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.dmp-extra h5{font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.dmp-servers{display:flex;flex-direction:column;gap:2px}
.dmp-servers button{display:flex;align-items:center;gap:10px;padding:6px;border-radius:8px;text-align:left;font-size:14px}
.dmp-servers button:hover{background:var(--bg-hover)}
.dmp-extra .actions{margin:0 0 10px}
.dmp-extra .actions .btn{flex:1}
.dmp-full{margin-top:4px}
@media (max-width:1100px){.members.dm-panel.force{width:min(340px,100%)}}

/* DM profile panel, v2: one full-height card in the person's colors */
.members.dm-panel{display:flex;flex-direction:column;padding:0;background:var(--bg-1)}
.dm-panel .profile-card.dmp{flex:1 0 auto;min-height:100%;display:flex;flex-direction:column;border-radius:0;box-shadow:none;border:0;overflow:visible}
.dm-panel .profile-card.dmp:not(.themed){background:var(--bg-1)}
.dm-panel .profile-card.dmp .banner{height:120px;flex:none}
.dm-panel .profile-card.dmp .inner{margin:12px 14px 10px;max-height:none;flex:none}
.dmp-row{margin:0 14px 10px;border-radius:12px;background:color-mix(in oklab,var(--bg-0) 72%,transparent);position:relative;z-index:2}
.profile-card.themed .dmp-row{background:rgba(8,6,20,.5);color:#f4f2ff}
.dmp-row summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-size:13px;font-weight:700;cursor:pointer;border-radius:12px}
.dmp-row summary::-webkit-details-marker{display:none}
.dmp-row summary:hover{background:rgba(255,255,255,.04)}
.dmp-row summary svg{width:16px;height:16px;transition:transform .15s;transform:rotate(-90deg)}
.dmp-row[open] summary svg{transform:none}
.dmp-row .dmp-servers{padding:0 8px 8px}
.dmp-servers button{color:inherit}
.dmp-foot{margin-top:auto;padding:10px 14px 16px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:2}
.dmp-foot .actions{margin:0}
.dmp-foot .actions .btn{flex:1}
.dmp-full{width:100%;padding:11px;border-radius:10px;font-weight:600;font-size:14px;background:color-mix(in oklab,var(--bg-0) 60%,transparent)}
.profile-card.themed .dmp-full{background:rgba(8,6,20,.45);color:#f4f2ff}
.dmp-full:hover{filter:brightness(1.2)}

/* ============ 1.16 — badges ============ */
.profile-card .un{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.profile-card .un-text{min-width:0}
.badges{display:inline-flex;align-items:center;gap:3px;padding:3px 5px;border-radius:8px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.06)}
.profile-card:not(.themed) .badges{background:var(--bg-3);border-color:var(--line)}
.bdg{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;cursor:default;transition:transform .12s,background .12s}
.bdg:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.bdg svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.bdg-mini{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:5px;vertical-align:-3px;flex:none}
.bdg-mini svg{width:16px;height:16px}
.mem .who b .bdg-mini,.friend-row .who b .bdg-mini{margin-left:3px}
.bdg-art{position:relative;display:block;width:100%;height:100%}
.bdg-art svg{position:absolute;inset:0;width:100%!important;height:100%!important}
.bdg-logo{position:absolute;left:8%;top:6%;width:84%;height:84%;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 .5px 0 rgba(40,20,120,.35));pointer-events:none}
.bdg .bdg-art{width:20px;height:20px}
.menu .mi .bdg-art{width:18px;height:18px;flex:none}
.menu .mi{display:flex;align-items:center;gap:10px}

/* ===== 1.18: bookmarks, read receipts, notes, privacy, blocked, stream volume ===== */
.modal.wide{width:min(720px,94vw);max-height:88vh;display:flex;flex-direction:column}
.bookmarks-hub{display:flex;flex-direction:column;min-height:0;flex:1}
.bm-bar{display:flex;gap:8px;margin-bottom:10px}
.bm-search{flex:1;background:var(--input,var(--bg-1));border:1px solid var(--line);border-radius:9px;padding:9px 12px;color:var(--text);font-size:14px}
.bm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bm-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--bg-3);color:var(--text-2);font-size:13px;border:1px solid transparent}
.bm-chip:hover{background:var(--bg-4)}
.bm-chip.on{background:var(--accent-soft);color:var(--text);border-color:var(--accent)}
.bm-chip .dot{width:9px;height:9px;border-radius:50%}
.bm-list{overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:0;flex:1;padding-right:4px}
.bm-empty{color:var(--muted);text-align:center;padding:40px 20px;font-size:14px;line-height:1.6}
.bm-card{background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.bm-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:4px}
.bm-head b{color:var(--text);font-size:14px}
.bm-where{color:var(--accent-2)}
.bm-when{margin-left:auto;color:var(--dim);font-size:12px}
.bm-tag{display:inline-block;background:var(--accent-soft);color:var(--accent-2);font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;margin-bottom:5px}
.bm-body{color:var(--text-2);font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.bm-missing{color:var(--dim)}
.bm-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px}
.link-btn{color:var(--accent-2);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:5px}
.link-btn:hover{text-decoration:underline}
.link-btn.danger{color:var(--red)}
.link-btn .dot{width:9px;height:9px;border-radius:50%}
/* read receipt */
.read-receipt{display:flex;align-items:center;gap:4px;justify-content:flex-end;color:var(--muted);font-size:12px;padding:2px 20px 10px;opacity:.85}
.read-receipt svg{width:13px;height:13px}
/* blocked message run */
.blocked-run{color:var(--dim);font-size:13px;text-align:center;padding:7px;margin:2px 16px;background:var(--bg-1);border-radius:8px}
/* profile note */
.note-sec .note-hint{color:var(--dim);font-weight:400;font-size:11px}
.note-box{width:100%;background:var(--input,var(--bg-1));border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--text);font-size:13px;resize:none;font-family:inherit;line-height:1.4}
.note-box:focus{border-color:var(--accent)}
/* privacy invisible-to grid + blocked chips */
.invis-grid{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.invis-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:999px;background:var(--bg-3);color:var(--text-2);font-size:13px;border:1px solid transparent}
.invis-chip:hover{background:var(--bg-4)}
.invis-chip.on{background:var(--accent-soft);color:var(--text);border-color:var(--accent)}
.invis-chip img{border-radius:50%}
.invis-chip .ic-check,.invis-chip .ic-x{display:inline-flex;width:14px}
.invis-chip .ic-x{color:var(--red)}
/* call menu second volume row */
.call-menu .vol-row span:first-child{min-width:78px}

/* ===== 1.18.1: phones — no zoom-on-focus, no page drift, notch-safe tops ===== */
@media (hover:none) and (pointer:coarse){
  /* iOS zooms into any field under 16px and leaves the page zoomed/cropped */
  input,textarea,select,[contenteditable]{font-size:16px!important}
  /* the page itself never scrolls: only the panes inside it do */
  html,body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
}
/* keep tappable things out from under the notch / status bar (0 in a normal browser tab) */
.sidebar,.main,.settings,.auth,.lightbox{padding-top:env(safe-area-inset-top)}
.rail{padding-top:max(14px,env(safe-area-inset-top))}
.members.force,.thread-panel{padding-top:env(safe-area-inset-top)}
.app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.user-panel{margin-bottom:max(8px,env(safe-area-inset-bottom))}
@media (max-width:760px){
  .app .main{padding-bottom:0;height:var(--app-h,100dvh);bottom:auto}
  .composer{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .members.force{width:min(320px,88vw)}
}

/* ===== 1.19: activities ===== */
.game-tile{width:64px;height:64px;border-radius:14px;flex:none;display:grid;place-items:center;font-weight:800;font-size:22px;letter-spacing:-.02em;color:#fff;
  background:linear-gradient(140deg,hsl(var(--gh) 62% 46%),hsl(calc(var(--gh) + 40) 58% 30%));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.act-game .art-ph svg{width:28px;height:28px;color:var(--muted)}
.act-game .act-meta b{font-weight:700;color:var(--text)}
.act-since{color:var(--accent)!important;font-weight:600}
.act-types{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.act-types .chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-3);border:1px solid var(--line);color:var(--text-2);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.act-types .chip:hover{color:var(--text)}
.act-types .chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.act-types .chip svg{width:15px;height:15px}
.act-game .act-row{gap:14px}
.act-game .game-tile{width:80px;height:80px;border-radius:16px;font-size:28px}
.act-game .act-title{font-size:15px}
.act-elapsed{display:inline-flex;align-items:center;gap:6px;margin-top:4px;color:var(--green)!important;font-weight:600;font-variant-numeric:tabular-nums}
.act-elapsed .act-since{color:inherit!important}
.act-times .act-pos{font-variant-numeric:tabular-nums}
.members .mem{position:relative}
.gm-kick{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--bg-3);color:var(--muted);opacity:0;transition:opacity .12s;cursor:pointer;z-index:2}
.members .mem:hover .gm-kick,.gm-kick:focus{opacity:1}
.gm-kick:hover{background:var(--red);color:#fff}
@media (hover:none){.gm-kick{opacity:.85}}

/* ===== 1.20: desktop title bar ===== */
.titlebar{display:none}
body.has-titlebar .titlebar{position:fixed;top:0;left:0;right:0;height:36px;z-index:200;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:var(--bg-0);color:var(--text-2);-webkit-app-region:drag;user-select:none;padding-left:8px;
  /* leave room for the window's own minimize / maximize / close (Windows) */
  padding-right:calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 6px)}
body.tb-mac .titlebar{padding-left:84px}
.titlebar button{-webkit-app-region:no-drag}
.tb-nav{display:flex;gap:2px}
.tb-btn{width:30px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--muted);position:relative}
.tb-btn svg{width:17px;height:17px}
.tb-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text)}
.tb-btn:disabled{opacity:.35;cursor:default}
.tb-nav .tb-btn:last-child svg{transform:scaleX(-1)}
.tb-where{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);max-width:50vw;overflow:hidden;white-space:nowrap}
.tb-where span:last-child{overflow:hidden;text-overflow:ellipsis}
.tb-where img,.tb-ini{width:20px;height:20px;border-radius:6px;object-fit:cover;flex:none}
.tb-ini{display:grid;place-items:center;background:var(--bg-3);font-size:8px;font-weight:800;color:var(--text-2)}
.tb-ico svg{width:16px;height:16px;color:var(--muted)}
.tb-tools{justify-self:end;display:flex;gap:4px;padding-right:6px}
.tb-btn.has-dot::after{content:"";position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--red)}
body.has-titlebar .app{height:calc(var(--app-h,100dvh) - 36px);margin-top:36px}
body.has-titlebar .settings,body.has-titlebar .modal-wrap,body.has-titlebar .lightbox{top:36px}
/* ===== 1.20: call sizing ===== */
.stage-wrap.theater{gap:0}
.stage-wrap.theater .strip{height:var(--strip-h,116px);margin-top:4px;justify-content:center}
.stage-wrap.theater .strip .tile{width:calc(var(--strip-h,116px) * 16 / 9);cursor:pointer}
.strip-resize{flex:none;height:12px;margin:2px auto 0;width:100%;cursor:ns-resize;position:relative;touch-action:none}
.strip-resize::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:4px;border-radius:2px;background:var(--line-2);transform:translate(-50%,-50%);transition:background .12s,width .12s}
.strip-resize:hover::after{background:var(--accent);width:64px}
.voice-grid .tile,.stage .tile{cursor:pointer}
.vc-right{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;gap:6px}
.voice-view:fullscreen,.call-slot:fullscreen{background:#000;display:flex;flex-direction:column;height:100vh!important;max-height:none}
.voice-view:fullscreen .stage-wrap,.call-slot:fullscreen .stage-wrap{flex:1;min-height:0}
@media (max-width:760px){.vc-right{position:static;transform:none}}

/* ===== 1.21: full profile (Board / Activity / Wishlist) ===== */
.pc-full{position:absolute;top:10px;right:10px;z-index:3;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border-radius:999px;background:rgba(10,8,20,.55);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:600;opacity:0;transition:opacity .15s}
.pc-full svg{width:13px;height:13px}
.profile-card:hover .pc-full,.pc-full:focus-visible{opacity:1}
@media (hover:none){.pc-full{opacity:1}}
.fp .pc-full{display:none}
.fp-wrap{position:fixed;inset:0;display:grid;place-items:center;background:rgba(5,3,12,.72);padding:24px;animation:fade .15s}
.fp{position:relative;display:grid;grid-template-columns:400px 1fr;width:min(1000px,100%);height:min(760px,100%);background:var(--bg-1);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.fp-x{position:absolute;top:12px;right:12px;z-index:5;background:var(--bg-3)}
.fp-left{width:auto;height:100%;overflow-y:auto;border-right:1px solid var(--line)}
.fp-left .profile-card{min-height:100%;border-radius:0}
.fp-right{display:flex;flex-direction:column;min-width:0;min-height:0}
.fp-tabs{display:flex;gap:22px;padding:22px 28px 0;border-bottom:1px solid var(--line)}
.fp-tabs button{padding:0 0 12px;font-weight:600;font-size:15px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.fp-tabs button:hover{color:var(--text)}
.fp-tabs button.on{color:var(--text);border-color:var(--accent)}
.fp-body{flex:1;overflow-y:auto;padding:22px 28px 32px}
.fp-sub{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:22px 0 10px}
.fp-sub:first-child{margin-top:0}
.fp-sub .link-btn{margin-left:auto;text-transform:none;letter-spacing:0;font-size:12px;background:none;border:0;color:var(--accent);font-weight:600;cursor:pointer}
.fp-empty{text-align:center;padding:36px 20px 24px;color:var(--muted)}
.fp-empty>svg{width:34px;height:34px;color:var(--dim);margin-bottom:8px}
.fp-empty h3{color:var(--text);font-size:17px;margin-bottom:6px}
.fp-empty p{max-width:380px;margin:0 auto;font-size:14px;line-height:1.45}
.fp-empty.small{padding:22px 10px}
/* widget picker (what you can add) */
.wg-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
.wg-opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);min-height:112px;overflow:hidden;transition:border-color .12s,transform .12s}
.wg-opt:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
.wg-opt.taken{opacity:.45;cursor:default}
.wg-opt-art{display:flex;gap:6px;margin-bottom:auto;opacity:.55}
.wg-opt-art .game-tile{width:34px;height:34px;border-radius:9px;font-size:12px}
.wg-opt-plus{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff}
.wg-opt-plus svg{width:16px;height:16px}
.wg-opt b{font-size:15px;margin-top:10px}
.wg-opt small{color:var(--muted);font-size:12.5px}
/* widgets on the board */
.wg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wg{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.wg h6{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.wg-games,.wg-custom{grid-column:1/-1}
.wg-fav-row{display:flex;gap:14px;align-items:center}
.wg-fav-row b{font-size:16px}
.wg-fav-row p{color:var(--text-2);font-size:13.5px;margin-top:3px}
.wg-shelf{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px}
.wg-g{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;flex:none}
.wg-g .game-tile{width:64px;height:64px}
.wg-g .wg-gn{font-size:12px;color:var(--text-2);text-align:center;line-height:1.25;max-width:76px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wg-text{color:var(--text-2);font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.wg-tools{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .12s}
.wg:hover .wg-tools,.wg-tools:focus-within{opacity:1}
@media (hover:none){.wg-tools{opacity:1}}
.wg-tools .icon-btn{width:28px;height:28px;background:var(--bg-3)}
.wg-tools svg{width:14px;height:14px}
/* activity + wishlist lists */
.fp-now .activity{border-top:0;margin-top:0;padding:14px 16px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px}
.rg-list,.wl-list{display:flex;flex-direction:column;gap:8px}
.rg-row,.wl-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.rg-row .game-tile,.wl-row .game-tile{width:44px;height:44px;border-radius:11px;font-size:15px}
.rg-row b,.wl-row b{display:block;font-size:14.5px}
.rg-row small,.wl-row small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.wl-row a{color:var(--text)}
.wl-row a:hover{color:var(--accent)}
.wl-add{display:flex;gap:8px;margin-bottom:14px}
.wl-add input[name=n]{flex:2}.wl-add input[name=u]{flex:1}
/* game chips in the widget editor */
.chip-in .chip-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chip-in .chip-list:empty{display:none}
.gchip{display:inline-flex;align-items:center;gap:7px;padding:4px 6px 4px 4px;border-radius:9px;background:var(--bg-3);font-size:13px;font-weight:600}
.gchip .game-tile{width:22px;height:22px;border-radius:6px;font-size:9px}
.gchip button{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--muted)}
.gchip button:hover{background:var(--red);color:#fff}
.gchip svg{width:11px;height:11px}
@media (max-width:820px){
  .fp-wrap{padding:0}
  .fp{grid-template-columns:1fr;height:100%;border-radius:0;overflow-y:auto;display:block}
  .fp-left{height:auto;border-right:0}
  .fp-left .profile-card{min-height:0}
  .wg-grid,.wg-pick{grid-template-columns:1fr}
  .wl-add{flex-wrap:wrap}
}
.game-tile.has-art{background:var(--bg-3);overflow:hidden;padding:0}
.game-tile.has-art img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ===== 1.22: profile effects (drawn over the whole card, never blocking clicks) ===== */
@property --fxa{syntax:'<angle>';inherits:false;initial-value:0deg}
.profile-card{isolation:isolate;container-type:inline-size}
.fx-layer{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;border-radius:inherit}
.fx-layer i{position:absolute;inset:0;display:block}

/* Glow: a slowly turning neon ring around the card, plus a soft halo */
.fx-glow{box-shadow:0 0 28px -4px color-mix(in srgb,var(--card-a,var(--accent)) 70%,var(--accent)),0 0 70px -20px var(--accent)}
.fx-l-glow i:first-child{padding:2.5px;border-radius:inherit;background:conic-gradient(from var(--fxa),var(--accent),#ff7ad9,#7af0ff,var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fxSpinA 5s linear infinite}
.fx-l-glow i:nth-child(2){background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%);animation:fxPulse 3.2s ease-in-out infinite alternate}
@keyframes fxSpinA{to{--fxa:360deg}}
@keyframes fxPulse{from{opacity:.35}to{opacity:1}}

/* Starfield: two layers of twinkling stars + a shooting star now and then */
.fx-l-stars i:first-child,.fx-l-stars i:nth-child(2){background-repeat:repeat;mix-blend-mode:screen;filter:drop-shadow(0 0 3px rgba(255,255,255,.9))}
.fx-l-stars i:first-child{background-image:radial-gradient(2.7px 2.7px at 12px 18px,#fff,transparent 70%),radial-gradient(2.0px 2.0px at 64px 70px,#fff,transparent 70%),radial-gradient(3.4px 3.4px at 110px 34px,#e8e0ff,transparent 70%),radial-gradient(2.2px 2.2px at 150px 120px,#fff,transparent 70%),radial-gradient(3.1px 3.1px at 40px 140px,#cfe9ff,transparent 70%);background-size:120px 120px;animation:fxTwinkle 2.6s ease-in-out infinite alternate}
.fx-l-stars i:nth-child(2){background-image:radial-gradient(2.4px 2.4px at 30px 40px,#fff,transparent 70%),radial-gradient(3.7px 3.7px at 96px 110px,#fff,transparent 70%),radial-gradient(2.0px 2.0px at 140px 60px,#ffe8f6,transparent 70%),radial-gradient(2.7px 2.7px at 75px 15px,#fff,transparent 70%);background-size:140px 140px;animation:fxTwinkle 3.4s ease-in-out -1.7s infinite alternate,fxDrift 60s linear infinite}
.fx-l-stars i:nth-child(3){inset:auto;top:12%;left:-30%;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(18deg);opacity:0;animation:fxShoot 7s ease-in 2s infinite}
.fx-stars{background-image:radial-gradient(140% 70% at 50% 0%,rgba(40,30,110,.35),transparent 70%)}
@keyframes fxTwinkle{from{opacity:.25}to{opacity:1}}
@keyframes fxDrift{to{background-position:0 190px}}
@keyframes fxShoot{0%{opacity:0;transform:translate(0,0) rotate(18deg)}3%{opacity:1}12%{opacity:0;transform:translate(520px,170px) rotate(18deg)}100%{opacity:0;transform:translate(520px,170px) rotate(18deg)}}

/* Aurora: wide soft bands of color drifting across the card */
.fx-l-aurora i{inset:-30%;filter:blur(28px);mix-blend-mode:screen;opacity:.75}
.fx-l-aurora i:first-child{background:radial-gradient(40% 30% at 30% 20%,rgba(80,240,200,.55),transparent 70%),radial-gradient(35% 25% at 75% 35%,rgba(139,109,255,.6),transparent 70%);animation:fxAur1 11s ease-in-out infinite alternate}
.fx-l-aurora i:nth-child(2){background:radial-gradient(45% 25% at 60% 15%,rgba(255,92,180,.4),transparent 70%),radial-gradient(30% 22% at 20% 55%,rgba(90,170,255,.45),transparent 70%);animation:fxAur2 14s ease-in-out infinite alternate}
.fx-l-aurora i:nth-child(3){background:linear-gradient(180deg,transparent 60%,rgba(80,240,200,.12));filter:none;inset:0;opacity:1}
@keyframes fxAur1{from{transform:translate(-8%,-4%) rotate(-6deg)}to{transform:translate(10%,8%) rotate(8deg)}}
@keyframes fxAur2{from{transform:translate(8%,6%) rotate(5deg) scale(1.1)}to{transform:translate(-10%,-6%) rotate(-7deg) scale(.95)}}

/* Embers: glowing sparks floating up from the bottom */
.fx-l-embers i:first-child,.fx-l-embers i:nth-child(2){background-repeat:repeat;mix-blend-mode:screen;filter:drop-shadow(0 0 4px #ff8a3d) drop-shadow(0 0 8px rgba(255,120,40,.6))}
.fx-l-embers i:first-child{background-image:radial-gradient(4.1px 4.1px at 20px 30px,#ffb35c,transparent 70%),radial-gradient(3.1px 3.1px at 90px 80px,#ff7a3d,transparent 70%),radial-gradient(4.8px 4.8px at 140px 20px,#ffd27a,transparent 70%),radial-gradient(2.7px 2.7px at 60px 150px,#ff9a4d,transparent 70%);background-size:170px 170px;animation:fxRise 7s linear infinite,fxFlicker 1.3s ease-in-out infinite alternate}
.fx-l-embers i:nth-child(2){background-image:radial-gradient(3.4px 3.4px at 40px 60px,#ff8a4d,transparent 70%),radial-gradient(5.1px 5.1px at 120px 120px,#ffc46b,transparent 70%),radial-gradient(2.7px 2.7px at 160px 40px,#ff6a3d,transparent 70%);background-size:200px 200px;animation:fxRise2 11s linear infinite,fxFlicker 1.9s ease-in-out -.6s infinite alternate}
.fx-l-embers i:nth-child(3){background:linear-gradient(0deg,rgba(255,110,50,.28),transparent 45%);animation:fxPulse 2.4s ease-in-out infinite alternate}
@keyframes fxRise{to{background-position:20px -170px,-10px -170px,15px -170px,-20px -170px}}
@keyframes fxRise2{to{background-position:-25px -200px,10px -200px,-15px -200px}}
@keyframes fxFlicker{from{opacity:.55}to{opacity:1}}

/* Snowfall: big and small flakes drifting down */
.fx-l-snow i:first-child,.fx-l-snow i:nth-child(2){background-repeat:repeat;filter:drop-shadow(0 0 3px rgba(255,255,255,.8))}
.fx-l-snow i:first-child{background-image:radial-gradient(5.1px 5.1px at 20px 30px,#fff,transparent 70%),radial-gradient(4.1px 4.1px at 100px 90px,#f2f6ff,transparent 70%),radial-gradient(5.8px 5.8px at 150px 10px,#fff,transparent 70%),radial-gradient(3.4px 3.4px at 60px 140px,#fff,transparent 70%);background-size:180px 180px;animation:fxSnow 9s linear infinite;opacity:.9}
.fx-l-snow i:nth-child(2){background-image:radial-gradient(2.5px 2.5px at 30px 50px,#fff,transparent 70%),radial-gradient(3.1px 3.1px at 110px 20px,#fff,transparent 70%),radial-gradient(2.4px 2.4px at 70px 120px,#fff,transparent 70%);background-size:140px 140px;animation:fxSnow2 14s linear infinite;opacity:.7}
.fx-l-snow i:nth-child(3){background:linear-gradient(180deg,rgba(200,225,255,.14),transparent 40%)}
@keyframes fxSnow{to{background-position:40px 180px,10px 180px,-30px 180px,20px 180px}}
@keyframes fxSnow2{to{background-position:-20px 140px,15px 140px,-10px 140px}}

/* Petals: pink petals tumbling across */
.fx-l-sakura i:first-child,.fx-l-sakura i:nth-child(2){background-repeat:repeat;filter:drop-shadow(0 0 3px rgba(255,140,190,.7))}
.fx-l-sakura i:first-child{background-image:radial-gradient(13.6px 8.2px at 30px 40px,#ffb7d5,transparent 70%),radial-gradient(10.9px 7.0px at 120px 100px,#ff9cc6,transparent 70%),radial-gradient(12.2px 8.2px at 80px 160px,#ffc7de,transparent 70%);background-size:190px 190px;animation:fxPetal 10s linear infinite;opacity:.9}
.fx-l-sakura i:nth-child(2){background-image:radial-gradient(6.0px 4.1px at 50px 20px,#ffd3e6,transparent 70%),radial-gradient(6.8px 4.4px at 150px 130px,#ff9cc6,transparent 70%);background-size:220px 220px;animation:fxPetal2 15s linear infinite;opacity:.75}
.fx-l-sakura i:nth-child(3){background:radial-gradient(90% 50% at 100% 0%,rgba(255,150,200,.18),transparent 70%)}
@keyframes fxPetal{to{background-position:-190px 190px,-160px 190px,-210px 190px}}
@keyframes fxPetal2{to{background-position:-220px 220px,-250px 220px}}

/* Prism: a rainbow sheen sweeping over the card */
.fx-l-prism i:first-child{background:linear-gradient(115deg,transparent 30%,rgba(255,120,200,.22) 42%,rgba(255,240,140,.22) 48%,rgba(120,255,220,.22) 54%,rgba(130,150,255,.22) 60%,transparent 72%);background-size:300% 100%;mix-blend-mode:screen;animation:fxSweep 4.5s ease-in-out infinite}
.fx-l-prism i:nth-child(2){padding:1.5px;border-radius:inherit;background:linear-gradient(var(--fxa),#ff7ad9,#ffe27a,#7af0c8,#8f9bff,#ff7ad9);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fxSpinA 6s linear infinite;opacity:.8}
@keyframes fxSweep{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}

@media (prefers-reduced-motion:reduce){.fx-layer i{animation:none!important}}

/* ===== 1.22: status thought bubble next to the avatar ===== */
.profile-card .avwrap .status-bubble{position:absolute;left:calc(100% + 4px);bottom:52px;top:auto;right:auto;width:max-content;max-width:min(210px,calc(100cqw - 124px));
  z-index:5;text-align:left;background:color-mix(in srgb,var(--bg-0) 88%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line-2);border-radius:16px;
  padding:8px 12px;font-size:13px;line-height:1.35;color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:normal;overflow:visible;
  display:block;word-break:break-word}
.profile-card .avwrap .status-bubble::before,.profile-card .avwrap .status-bubble::after{content:"";position:absolute;border-radius:50%;background:inherit;border:1px solid var(--line-2);backdrop-filter:none}
.profile-card .avwrap .status-bubble::before{left:-4px;bottom:-9px;top:auto;width:12px;height:12px}
.profile-card .avwrap .status-bubble::after{left:-13px;bottom:-17px;width:7px;height:7px}
button.status-bubble{cursor:pointer}
button.status-bubble:hover{border-color:var(--accent)}
.status-bubble.empty .sb-ph{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-style:italic}
.status-bubble.empty .sb-ph svg{flex:none}
.act-game .act-row.act-also{margin-top:10px;padding-top:10px;border-top:1px solid rgba(160,150,230,.14)}
.act-game .act-row.act-also .game-tile{width:48px;height:48px;border-radius:12px;font-size:17px}
.act-game .act-row.act-also .act-title{font-size:14px}

/* ===== 1.23: controller mode ===== */
.pad-hints{display:none}
body.pad .pad-hints{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:300;display:flex;gap:16px;align-items:center;padding:8px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--bg-0) 90%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--text-2);box-shadow:var(--shadow);pointer-events:none}
.pad-hints>span{display:inline-flex;align-items:center;gap:6px}
.ph-key{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:11px;font-size:11px;font-weight:800;color:#fff;background:#3a3550}
.ph-a{background:#2ea043}.ph-b{background:#d1404b}.ph-x{background:#2f74d0}.ph-y{background:#c99a1a}.ph-sh{border-radius:6px;background:#4a4560}
body.pad{--fs:16px;cursor:none}
body.pad .pad-focus{outline:3px solid var(--accent)!important;outline-offset:2px;border-radius:10px;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 28%,transparent),0 0 24px -2px var(--accent)!important;position:relative;z-index:2;transition:outline-offset .1s}
body.pad .msg.pad-focus{outline-offset:-2px;background:var(--bg-hover)}
body.pad .rail [data-server].pad-focus,body.pad .rail .pad-focus{border-radius:16px}
body.pad .ch,body.pad .dm-item{min-height:40px}
body.pad .messages{padding-bottom:56px}
body.pad .composer{margin-bottom:46px}
body.pad .msg .toolbar{display:none!important}