/* fonts come from this server, never from Google (Google Fonts shares every visitor's IP address with Google) */
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url('/fonts/pixelify-sans-latin-500-normal.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url('/fonts/pixelify-sans-latin-700-normal.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
/* Sonion Chat — chalk on black, red only where attention is needed */
:root {
  --bg: #000000; --panel: #141416; --panel-2: #1d1d21; --panel-3: #26262b; --line: #2b2b31;
  --hover: rgba(255, 255, 255, .055); --active: rgba(255, 255, 255, .10);
  --ink: #f4f4f5; --ink-2: #b9b9c1; --ink-3: #85858e;
  --red: #c70026; --red-hi: #e4173f; --red-soft: rgba(199, 0, 38, .14);
  --ok: #2fb67a; --idle: #e0a33a; --dnd: #c70026; --off: #6b6b73;
  --shadow: 0 10px 34px rgba(0, 0, 0, .55);
  --r-s: 6px; --r-m: 10px; --r-l: 16px;
  --rail: 72px; --side: 248px; --members: 248px;
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ffffff; --panel: #f3f3f5; --panel-2: #e9e9ec; --panel-3: #dedee2; --line: #d8d8dd;
  --hover: rgba(0, 0, 0, .045); --active: rgba(0, 0, 0, .08);
  --ink: #0b0b0c; --ink-2: #44444b; --ink-3: #6c6c74; --red-soft: rgba(199, 0, 38, .09);
  --shadow: 0 10px 30px rgba(0, 0, 0, .14);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 400 1rem/1.4 var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: #4ea1ff; }
:root[data-theme="light"] a { color: #0a63c9; }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 2px; border-radius: 4px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.muted { color: var(--ink-3); }
.small { font-size: .82rem; }
.pad { padding: 8px 12px; }
.pad-l { padding: 20px 28px; }
.mobile-only { display: none !important; }
.reduce-motion *, .reduce-motion *::before { transition: none !important; animation: none !important; }
/* the device's "fewer animations" setting is applied through html.reduce-motion (main.js), so Settings → Appearance → Animations → Always on can overrule it */
::selection { background: var(--red); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 1000; background: transparent; display: grid; place-items: center; transition: opacity .56s ease; mix-blend-mode: screen; }
/* see-through, like the logo: the whole intro is blended onto what's behind it, so the video's black (dark theme) or
   white (light theme) background disappears and only the drawing stays. The app behind it is dimmed and blurred. */
.intro[data-theme-intro="light"] { mix-blend-mode: multiply; }
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* the two corner logos of the intro sit in the real corners of the screen (not inside the 16:9 / 9:16 picture) */
.intro-corner { position: absolute; bottom: calc(max(14px, 2vmin) + env(safe-area-inset-bottom)); width: auto; pointer-events: none; }
.intro-corner.o { left: calc(max(12px, 2vmin) + env(safe-area-inset-left)); height: clamp(46px, 7.4vmin, 110px); aspect-ratio: 170 / 176; }
.intro-corner.sk { right: calc(max(12px, 2vmin) + env(safe-area-inset-right)); height: clamp(70px, 11.4vmin, 170px); aspect-ratio: 290 / 270; }
.intro-skip, .intro-hint { mix-blend-mode: normal; }
html.intro-on .shell, html.intro-on .auth { filter: blur(12px) brightness(.45) saturate(.8); transition: filter .5s ease; }
html.intro-on[data-theme="light"] .shell, html.intro-on[data-theme="light"] .auth { filter: blur(12px) brightness(1.25) saturate(.6); }
.intro.static .intro-video { opacity: 1; }
.intro.out { opacity: 0; pointer-events: none; }
.intro-hint { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; margin: 0; color: #888; font-size: .9rem; }
.intro-skip { position: absolute; right: 24px; top: calc(20px + env(safe-area-inset-top)); color: #777; font-size: .85rem; padding: 6px 12px; border-radius: 99px; border: 1px solid #333; }
.intro[data-theme-intro="light"] .intro-skip { border-color: #ccc; }
.intro-skip:hover { color: #ccc; }

/* ---------- buttons & fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--r-s); font-weight: 600; font-size: .94rem; transition: background .15s, transform .1s; white-space: nowrap; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.sm { height: 32px; padding: 0 12px; font-size: .85rem; }
.btn.wide { width: 100%; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hi); }
.btn-ghost { background: var(--panel-2); color: var(--ink); }
.btn-ghost:hover { background: var(--panel-3); }
.btn-danger { background: transparent; color: var(--red-hi); box-shadow: inset 0 0 0 1.5px var(--red-hi); }
.btn-danger:hover { background: var(--red); color: #fff; box-shadow: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.busy { color: transparent; position: relative; }
.btn.busy::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.linkish { color: #4ea1ff; font-weight: 500; padding: 0; }
:root[data-theme="light"] .linkish { color: #0a63c9; }
.linkish:hover { text-decoration: underline; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-s); color: var(--ink-2); flex: none; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn.off { color: var(--red-hi); }
.icon-btn.on { color: var(--ink); }
.icon-btn.danger:hover { background: var(--red); color: #fff; }
.field { display: grid; gap: 6px; margin: 0 0 16px; border: 0; padding: 0; }
.field > span, .field > legend { font-size: .78rem; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea, select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; outline: none; transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--ink-3); }
textarea { resize: vertical; }
input[type=color] { width: 56px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); padding: 2px; }
input[type=range] { width: 100%; accent-color: var(--red); }
input[type=checkbox], input[type=radio] { accent-color: var(--red); width: 18px; height: 18px; }
input[role=switch] { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: var(--panel-3); position: relative; cursor: pointer; transition: background .15s; flex: none; }
input[role=switch]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
input[role=switch]:checked { background: var(--red); }
input[role=switch]:checked::after { transform: translateX(18px); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch-row span { display: grid; gap: 2px; } .switch-row small { color: var(--ink-3); font-size: .82rem; }
.check { display: flex; align-items: center; gap: 8px; }
.form-error { color: var(--red-hi); font-size: .88rem; min-height: 1em; margin: 4px 0 12px; }
.form-msg.ok { color: var(--ok); } .form-msg.err { color: var(--red-hi); }
.notice { background: var(--panel-2); border-left: 3px solid var(--red); padding: 10px 14px; border-radius: var(--r-s); margin: 0 0 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tag { font-size: .68rem; font-weight: 800; padding: 1px 6px; border-radius: 4px; background: var(--red); color: #fff; margin-left: 6px; vertical-align: 2px; }
.tag.ok { background: var(--ok); } .tag.warn { background: var(--idle); color: #000; }
kbd { background: var(--panel-3); border-radius: 4px; padding: 1px 6px; font: .82rem var(--mono); }
.spin { display: inline-block; width: 22px; height: 22px; border: 2.5px solid var(--ink-3); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 48px 16px; display: grid; gap: 8px; justify-items: center; }
.empty-t { font-weight: 700; font-size: 1.05rem; margin: 0; }
.empty p { margin: 0; }

/* ---------- auth ---------- */
.auth { position: fixed; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 6vh 20px 40px; background: var(--bg); transition: opacity .35s; }
.auth.leaving { opacity: 0; }
.auth-wordmark { width: min(360px, 72vw); height: auto; margin-bottom: 28px; transform-origin: center; }
.auth-card { width: min(400px, 100%); }
.auth-card h1 { font-size: 1.6rem; margin: 0 0 18px; font-weight: 800; }
.auth-card form { display: block; }
.auth-card .btn-primary { width: 100%; height: 44px; margin-top: 4px; }
.auth-card .linkish { font-size: .86rem; display: block; margin: -6px 0 12px; }
.switch { color: var(--ink-3); font-size: .9rem; margin-top: 18px; } .switch .linkish { display: inline; margin: 0; font-size: .9rem; }
.btn-google { width: 100%; height: 44px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }
.btn-google:hover { background: #f4f4f4; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: .8rem; margin: 16px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-foot { color: var(--ink-3); font-size: .82rem; margin-top: auto; padding-top: 32px; text-align: center; max-width: 380px; }
.auth-invite { display: flex; gap: 14px; align-items: center; background: var(--panel); border-radius: var(--r-m); padding: 14px; margin-bottom: 22px; }
.auth-invite h2 { margin: 2px 0; font-size: 1.15rem; } .auth-invite p { margin: 0; }

/* ---------- avatars & icons ---------- */
.av { --s: 40px; position: relative; width: var(--s); height: var(--s); flex: none; display: inline-block; }
.av img, .av-fallback { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.av-fallback { color: #fff; font-weight: 700; font-size: calc(var(--s) * .36); }
.av.group .av-fallback { background: var(--panel-3); color: var(--ink-2); }
.av.group .ic { width: 55%; height: 55%; }
.av .st { position: absolute; right: -2px; bottom: -2px; width: calc(var(--s) * .32 + 4px); height: calc(var(--s) * .32 + 4px); min-width: 12px; min-height: 12px; border-radius: 50%; border: 3px solid var(--panel); background: var(--off); }
.st-online { background: var(--ok) !important; } .st-idle { background: var(--idle) !important; } .st-dnd { background: var(--dnd) !important; }
.st-idle::after { content: ''; position: absolute; width: 55%; height: 55%; top: -1px; left: -1px; border-radius: 50%; background: var(--panel); }
.st-dnd::after { content: ''; position: absolute; left: 22%; right: 22%; top: 42%; height: 18%; background: var(--panel); border-radius: 2px; }
.st-offline::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: var(--panel); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .dot.online { background: var(--ok); }
.srv-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--panel-2) center/cover; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: var(--ink); flex: none; overflow: hidden; }
.srv-icon.sm { width: 24px; height: 24px; font-size: .55rem; } .srv-icon.lg { width: 56px; height: 56px; border-radius: 16px; } .srv-icon.xl { width: 80px; height: 80px; border-radius: 24px; font-size: 1.4rem; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 800; display: inline-grid; place-items: center; line-height: 1; }
.live { background: var(--red); color: #fff; font-size: .62rem; font-weight: 800; padding: 1px 5px; border-radius: 4px; letter-spacing: .02em; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--rail) var(--side) 1fr var(--members); height: 100dvh; }
.shell.no-members { grid-template-columns: var(--rail) var(--side) 1fr 0; }
.shell.no-members .members { display: none; }
body.offline .shell::before { content: 'Reconnecting to Sonion Chat…'; position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--idle); color: #000; text-align: center; font-size: .82rem; font-weight: 700; padding: 3px; }

/* rail */
.rail { background: var(--bg); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail hr { width: 32px; border: 0; border-top: 2px solid var(--panel-3); margin: 2px 0; }
.rail-btn { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.rail-btn .srv-icon, .rail-btn.home img, .rail-btn.action { transition: border-radius .18s ease, background .15s; }
.rail-btn.home { background: var(--panel-2); border-radius: 50%; }
.rail-btn.home img { width: 22px; height: auto; }
.rail-btn:hover .srv-icon, .rail-btn.active .srv-icon, .rail-btn.home:hover, .rail-btn.home.active { border-radius: 15px; }
.rail-btn.home.active { background: var(--red); }
:root[data-theme="light"] .rail-btn.home.active img { filter: invert(1); }
.rail-btn.action { background: var(--panel-2); border-radius: 50%; color: var(--ink-2); }
.rail-btn.action:hover { border-radius: 15px; background: var(--ink); color: var(--bg); }
.rail-btn .badge { position: absolute; right: -4px; bottom: -4px; box-shadow: 0 0 0 4px var(--bg); }
.rail-btn .pill { position: absolute; left: -12px; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: var(--ink); transition: height .18s; }
.rail-btn.unread .pill { height: 8px; } .rail-btn:hover .pill { height: 20px; } .rail-btn.active .pill { height: 40px; }
.rail-voice { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg); }
.rail-voice .ic { width: 12px; height: 12px; }

/* sidebar */
.side { background: var(--panel); display: flex; flex-direction: column; min-width: 0; }
.side-h { height: 52px; flex: none; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line); position: relative; }
.server-name { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 6px; font-weight: 800; text-align: left; overflow: hidden; }
.server-name span { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-name .ic { position: relative; }
.srv-banner { position: absolute; inset: -1px -10px; background: center/cover; opacity: .55; mask-image: linear-gradient(to bottom, #000 30%, transparent); }
.search-fake { width: 100%; height: 30px; border-radius: var(--r-s); background: var(--bg); color: var(--ink-3); font-size: .84rem; text-align: left; padding: 0 10px; }
.side-body { flex: 1; overflow-y: auto; padding: 10px 8px 16px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 10px; border-radius: var(--r-s); color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }
.nav-item:hover { background: var(--hover); color: var(--ink); } .nav-item.active { background: var(--active); color: var(--ink); }
.nav-item .badge { margin-left: auto; }
.side-label { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 4px; font-size: .78rem; font-weight: 700; color: var(--ink-3); }
.side-label .icon-btn { width: 22px; height: 22px; } .side-label .ic { width: 16px; height: 16px; }
.dm-row { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px; border-radius: var(--r-s); color: var(--ink-2); cursor: pointer; }
.dm-row:hover { background: var(--hover); color: var(--ink); } .dm-row.active { background: var(--active); color: var(--ink); }
.dm-row.unread .dm-name { color: var(--ink); font-weight: 700; }
.dm-row .av .st { border-color: var(--panel); }
.dm-text { flex: 1; min-width: 0; display: grid; } .dm-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-text small { color: var(--ink-3); font-size: .76rem; }
.dm-row .close { opacity: 0; width: 22px; height: 22px; } .dm-row:hover .close { opacity: 1; } .dm-row .close .ic { width: 15px; height: 15px; }
.live-dot { color: var(--ok); } .live-dot .ic { width: 16px; height: 16px; }
.cat { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px 4px 0; }
.cat-btn { display: flex; align-items: center; gap: 2px; font-size: .8rem; font-weight: 700; color: var(--ink-3); flex: 1; text-align: left; }
.cat-btn:hover { color: var(--ink); } .cat-btn .ic { width: 14px; height: 14px; transition: transform .15s; }
.cat.collapsed .cat-btn .ic { transform: rotate(-90deg); }
.cat .icon-btn { width: 22px; height: 22px; } .cat .icon-btn .ic { width: 16px; height: 16px; }
.ch { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; margin: 1px 0; border-radius: var(--r-s); color: var(--ink-3); cursor: pointer; }
.ch .ic { width: 19px; height: 19px; opacity: .85; }
.ch:hover { background: var(--hover); color: var(--ink-2); }
.ch.active { background: var(--active); color: var(--ink); }
.ch.unread { color: var(--ink); font-weight: 700; }
.ch.muted { opacity: .45; }
.ch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread-pip { position: absolute; left: -8px; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: var(--ink); transition: height .15s; }
.ch.unread .unread-pip { height: 8px; }
.lock { position: absolute; left: 18px; top: 6px; } .lock .ic { width: 10px; height: 10px; stroke-width: 2.4; }
.ch-tools { display: none; gap: 0; } .ch:hover .ch-tools, .ch.active .ch-tools { display: flex; }
.ch-tools .icon-btn { width: 22px; height: 22px; } .ch-tools .ic { width: 15px; height: 15px; }
.ch .limit { font-size: .7rem; background: var(--panel-3); padding: 0 5px; border-radius: 4px; }
.ch.thread { height: 30px; padding-left: 28px; font-size: .92rem; }
.branch { position: absolute; left: 16px; top: -6px; width: 10px; height: 20px; border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); border-bottom-left-radius: 8px; }
.vc-status { padding: 0 8px 0 33px; font-size: .78rem; color: var(--ink-3); margin-top: -2px; }
.vc-users { list-style: none; margin: 0 0 4px; padding: 0 0 0 26px; }
.vc-user { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px; border-radius: var(--r-s); color: var(--ink-2); font-size: .9rem; cursor: pointer; }
.vc-user:hover { background: var(--hover); }
.vc-user .av { box-shadow: 0 0 0 2px transparent; border-radius: 50%; transition: box-shadow .1s; }
.vc-user.speaking .av { box-shadow: 0 0 0 2px var(--ok); }
.vc-user > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-flags { display: flex; gap: 2px; align-items: center; color: var(--ink-3); } .vc-flags .ic { width: 15px; height: 15px; } .vc-flags .red { color: var(--red-hi); }

/* voice panel + me panel */
.voice-panel { border-top: 1px solid var(--line); padding: 8px 8px 6px; background: var(--panel); }
.vp-top { display: flex; align-items: center; justify-content: space-between; }
.vp-info { display: grid; text-align: left; min-width: 0; }
.vp-info b { display: flex; align-items: center; gap: 6px; font-size: .86rem; } .vp-info b.ok { color: var(--ok); } .vp-info b.warn { color: var(--idle); }
.vp-info b .ic { width: 16px; height: 16px; } .vp-info small { color: var(--ink-3); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-info:hover small { color: var(--ink); text-decoration: underline; }
.vp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.vp-btn { height: 32px; border-radius: var(--r-s); background: var(--panel-2); color: var(--ink-2); display: grid; place-items: center; }
.vp-btn:hover { background: var(--panel-3); color: var(--ink); } .vp-btn.on { background: var(--ink); color: var(--bg); } .vp-btn.live { background: var(--red); color: #fff; }
.me-panel { height: 56px; flex: none; display: flex; align-items: center; gap: 2px; padding: 0 8px; background: var(--panel-2); }
:root[data-theme="dark"] .me-panel { background: #0d0d0f; }
.me-btn { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 4px; border-radius: var(--r-s); text-align: left; }
.me-btn:hover { background: var(--hover); }
.me-btn .av .st { border-color: var(--panel-2); }
:root[data-theme="dark"] .me-btn .av .st { border-color: #0d0d0f; }
.me-text { display: grid; min-width: 0; } .me-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-text b { font-size: .88rem; } .me-text small { color: var(--ink-3); font-size: .75rem; }

/* main */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.main-h { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.h-title { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.h-title .ic { color: var(--ink-3); width: 22px; height: 22px; }
.h-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.h-topic { color: var(--ink-3); font-size: .86rem; padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--line); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.h-topic br { display: none; }
.h-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.h-search { position: relative; margin-left: 6px; }
.h-search input { width: 150px; height: 28px; padding: 0 28px 0 8px !important; font-size: .84rem; background: var(--panel) !important; transition: width .2s; }
.h-search input:focus { width: 230px; }
.h-search .ic { position: absolute; right: 6px; top: 5px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.main-body { flex: 1; min-height: 0; display: flex; position: relative; }
.main-body:has(> .call-bar-slot) { flex-direction: column; }
.call-bar-slot:empty { display: none; }
.tabs { display: flex; align-items: center; gap: 4px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); overflow-x: auto; }
.tab { height: 30px; padding: 0 10px; border-radius: var(--r-s); color: var(--ink-2); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tab:hover { background: var(--hover); color: var(--ink); } .tab.active { background: var(--active); color: var(--ink); }
.tab.add { background: var(--red); color: #fff; } .tab.add.active { background: transparent; color: var(--red-hi); }

/* friends */
.friends { flex: 1; overflow-y: auto; max-width: 900px; }
.mem-h { font-size: .76rem; font-weight: 700; color: var(--ink-3); margin: 14px 8px 6px; }
.friend { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; }
.friend:hover { background: var(--hover); border-top-color: transparent; }
.friend-text { flex: 1; display: grid; min-width: 0; } .friend-text small { color: var(--ink-3); }
.friend-actions { display: flex; gap: 8px; }
.round { width: 36px; height: 36px; border-radius: 50%; background: var(--panel); color: var(--ink-2); display: grid; place-items: center; }
.round:hover { color: var(--ink); background: var(--panel-2); } .round.ok:hover { color: var(--ok); }
.round.big { width: 60px; height: 60px; } .round.big.danger { background: var(--red); color: #fff; } .round.big.ok { background: var(--ok); color: #fff; }
.add-friend { max-width: 720px; } .add-friend h2 { margin: 0 0 4px; }
.inline-form { display: flex; gap: 10px; margin-top: 16px; background: var(--panel); padding: 8px; border-radius: var(--r-m); border: 1px solid var(--line); }
.inline-form input { border: 0 !important; background: transparent !important; }

/* members */
.members { background: var(--panel); overflow-y: auto; padding: 8px 8px 20px; }
.mem { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px; border-radius: var(--r-s); cursor: pointer; }
.mem:hover { background: var(--hover); }
.mem.off { opacity: .4; } .mem.off:hover { opacity: 1; }
.mem-text { min-width: 0; display: grid; } .mem-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-name { font-weight: 600; color: var(--rc, var(--ink-2)); display: flex; align-items: center; gap: 4px; }
[data-grad] { background: linear-gradient(90deg, var(--rc), var(--rc2)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.mem-text small { color: var(--ink-3); font-size: .76rem; }
.crown { color: var(--idle); } .crown .ic { width: 14px; height: 14px; }

/* ---------- chat ---------- */
.chat-split { flex: 1; display: flex; min-width: 0; min-height: 0; }
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.chat.drop::after { content: 'Drop files to upload'; position: absolute; inset: 12px; border: 2px dashed var(--red); border-radius: var(--r-l); background: rgba(0,0,0,.6); display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: #fff; z-index: 5; }
.thread-pane { border-left: 1px solid var(--line); max-width: 46%; }
.thread-pane.full { max-width: none; border: 0; }
.thread-h { height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1px solid var(--line); flex: none; }
.thread-h .h-topic { display: none; }
.scroller { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.msgs { padding: 0 0 16px; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.loading-msgs { display: grid; place-items: center; padding: 40px; }
.load-more { display: grid; place-items: center; padding: 20px; }
.chan-intro { padding: 32px 16px 8px; display: grid; gap: 6px; justify-items: start; }
.chan-intro h2 { margin: 6px 0 0; font-size: 1.8rem; font-weight: 800; } .chan-intro p { margin: 0; }
.chan-intro.small h2 { font-size: 1.3rem; }
.intro-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; }
.intro-ic .ic { width: 36px; height: 36px; }
.day { display: flex; align-items: center; margin: 22px 16px 6px; color: var(--ink-3); font-size: .74rem; font-weight: 700; }
.day::before, .day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.day span { padding: 0 8px; }
.new-line { display: flex; align-items: center; margin: 10px 16px 4px 16px; }
.new-line::before { content: ''; flex: 1; height: 1px; background: var(--red); }
.new-line span { background: var(--red); color: #fff; font-size: .62rem; font-weight: 800; padding: 1px 6px; border-radius: 0 4px 4px 0; }

.msg { position: relative; display: grid; grid-template-columns: 72px 1fr; padding: 2px 48px 2px 0; margin-top: 16px; min-width: 0; }
.msg.grouped { margin-top: 0; }
.msg:hover { background: var(--hover); }
.msg.mentioned { background: var(--red-soft); box-shadow: inset 2px 0 0 var(--red); }
.msg.flash { animation: flash 2s ease; }
@keyframes flash { 0%, 40% { background: rgba(199, 0, 38, .28); } }
.msg.pending .msg-c { opacity: .55; }
.msg.failed .md { color: var(--red-hi); }
.msg-c[data-progress]::after { content: 'Uploading ' attr(data-progress); font-size: .75rem; color: var(--ink-3); }
.msg-av { grid-row: span 2; justify-self: center; align-self: start; margin-top: 2px; }
.msg-h { margin: 0; font-size: 1rem; font-weight: 600; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.author { font-weight: 700; color: var(--rc, var(--ink)); }
.author:hover { text-decoration: underline; }
.msg-h time { color: var(--ink-3); font-size: .74rem; font-weight: 500; }
.role-ic { width: 18px; height: 18px; object-fit: contain; align-self: center; }
.gutter-time { grid-row: 1; justify-self: center; align-self: center; font-size: .66rem; color: var(--ink-3); opacity: 0; }
.msg.grouped:hover .gutter-time { opacity: 1; }
.msg-c { grid-column: 2; min-width: 0; }
.md { line-height: 1.375; overflow-wrap: anywhere; white-space: pre-wrap; }
/* (a 'content' rule on br used to be here: the desktop app's Chromium then dropped every line break in messages and bios) */
.md strong { font-weight: 800; }
.md .md-h { margin: 8px 0 2px; line-height: 1.25; } h3.md-h { font-size: 1.5rem; } h4.md-h { font-size: 1.25rem; } h5.md-h { font-size: 1.05rem; }
.md ul, .md ol { margin: 4px 0; padding-left: 22px; white-space: normal; }
.md blockquote { margin: 4px 0; padding: 0 0 0 12px; border-left: 4px solid var(--panel-3); }
.subtext { display: block; color: var(--ink-3); font-size: .78rem; }

code.icode { font-family: var(--mono); font-size: .85em; background: var(--panel-2); padding: 1px 4px; border-radius: 4px; }
pre.code { position: relative; margin: 6px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; overflow-x: auto; max-width: 860px; white-space: pre; }
pre.code code { font: .84rem/1.5 var(--mono); }
pre.code .lang { position: absolute; top: 4px; right: 60px; font: .68rem var(--mono); color: var(--ink-3); }
.copy-code { position: absolute; top: 6px; right: 6px; font-size: .72rem; padding: 2px 8px; border-radius: 4px; background: var(--panel-2); opacity: 0; } pre.code:hover .copy-code { opacity: 1; }
.spoiler { background: var(--panel-3); color: transparent; border-radius: 4px; cursor: pointer; transition: color .1s; }
.spoiler * { visibility: hidden; } .spoiler.shown { color: inherit; background: var(--panel-2); } .spoiler.shown * { visibility: visible; }
.mention { background: rgba(199, 0, 38, .18); color: #ff9db0; border-radius: 4px; padding: 0 3px; font-weight: 600; cursor: pointer; }
:root[data-theme="light"] .mention { color: #9e001f; }
.mention:hover { background: var(--red); color: #fff; }
.mention.role { background: color-mix(in srgb, var(--rc) 22%, transparent); color: var(--rc); }
.mention.channel { background: var(--panel-3); color: var(--ink); }
.emoji { width: 22px; height: 22px; vertical-align: -5px; object-fit: contain; }
.jumbo-wrap { font-size: 2.6rem; line-height: 1.15; } .emoji.jumbo { width: 48px; height: 48px; }
time.ts { background: var(--panel-2); border-radius: 4px; padding: 0 3px; }
.edited { color: var(--ink-3); font-size: .7rem; margin-left: 4px; }
.reply-ref { grid-column: 2; display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-3); margin: 2px 0 2px; position: relative; cursor: pointer; min-width: 0; }
.reply-ref::before { content: ''; position: absolute; left: -38px; top: 9px; width: 30px; height: 12px; border-left: 2px solid var(--panel-3); border-top: 2px solid var(--panel-3); border-top-left-radius: 6px; }
.reply-ref b { color: var(--ink-2); white-space: nowrap; } .reply-ref span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-ref:hover span { color: var(--ink); }
.msg .reply-ref + .msg-av { grid-row: 2 / span 2; }
.msg-tools { position: absolute; right: 12px; top: -16px; display: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--shadow); padding: 2px; z-index: 3; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { display: flex; }
.msg-tools button { width: 32px; height: 30px; border-radius: 4px; display: grid; place-items: center; color: var(--ink-2); font-size: 1rem; }
.msg-tools button:hover { background: var(--panel-2); color: var(--ink); }
.msg.system { display: flex; align-items: center; gap: 12px; padding: 4px 16px 4px 26px; margin-top: 8px; color: var(--ink-3); font-size: .92rem; }
.msg.system p { margin: 0; } .msg.system b { color: var(--ink); cursor: pointer; } .msg.system time { font-size: .72rem; margin-left: 4px; }
.sys-ic { width: 28px; display: grid; place-items: center; } .msg.join .sys-ic { color: var(--ok); } .msg.automod .sys-ic { color: var(--red-hi); }
.msg.system blockquote { margin: 4px 0 0; padding-left: 8px; border-left: 3px solid var(--red); color: var(--ink-2); }
.msg.blocked { display: block; padding: 6px 16px 6px 72px; }
.msg.editing .msg-tools { display: none !important; }
.edit-box textarea { min-height: 44px; margin: 4px 0; background: var(--panel) !important; }
.edit-box p { margin: 0 0 4px; }
.fail-note { color: var(--red-hi); font-size: .8rem; margin: 2px 0; }
.xpost { color: var(--ink-3); font-size: .78rem; display: flex; gap: 4px; align-items: center; margin: 0; }
.xpost .ic { width: 14px; height: 14px; }
.fwd { border-left: 3px solid var(--panel-3); padding-left: 10px; margin: 4px 0; } .fwd p { margin: 2px 0; } .fwd .ic { width: 14px; height: 14px; vertical-align: -2px; }

/* attachments */
.media-grid { display: grid; gap: 4px; margin-top: 6px; max-width: 520px; }
.media-grid.n2, .media-grid.n4 { grid-template-columns: 1fr 1fr; } .media-grid.n3 { grid-template-columns: 1fr 1fr 1fr; }
.media-grid:not(.n1) .att-img { aspect-ratio: 1; }
.att-img { position: relative; display: block; max-width: 100%; border-radius: var(--r-m); overflow: hidden; background: var(--panel); }
.att-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spoiler-media img, video.spoiler-media { filter: blur(44px); }
.spoiler-media.shown img, video.spoiler-media.shown { filter: none; }
.sp-label { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; background: rgba(0,0,0,.65); color: #fff; font-weight: 800; padding: 6px 12px; border-radius: 99px; font-size: .8rem; }
.spoiler-media.shown .sp-label { display: none; }
.att-video { display: block; max-width: min(520px, 100%); max-height: 400px; border-radius: var(--r-m); margin-top: 6px; background: #000; }
.att-file { display: flex; align-items: center; gap: 12px; padding: 12px; margin-top: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); max-width: 440px; }
.att-file > .ic { width: 32px; height: 32px; color: var(--ink-3); }
.att-file > div { flex: 1; min-width: 0; display: grid; } .att-file a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-file small { color: var(--ink-3); }
.att-file audio { width: 100%; height: 34px; margin-top: 6px; }
.voice-msg { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-top: 6px; background: var(--panel); border-radius: 99px; max-width: 360px; }
.vm-play { width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; }
.vm-play .ic { width: 16px; height: 16px; }
.vm-wave { flex: 1; height: 28px; display: flex; align-items: center; gap: 2px; }
.vm-wave i { flex: 1; background: var(--ink-3); border-radius: 2px; min-height: 3px; } .vm-wave i.on { background: var(--ink); }
.vm-time { font: .74rem var(--mono); color: var(--ink-3); }
.vm-speed { font-size: .72rem; font-weight: 800; background: var(--panel-3); border-radius: 99px; padding: 2px 6px; }
.embed { margin-top: 6px; max-width: 440px; background: var(--panel); border-left: 4px solid var(--ec, var(--panel-3)); border-radius: var(--r-s); padding: 10px 14px 14px; display: grid; gap: 4px; }
.embed p { margin: 0; font-size: .86rem; color: var(--ink-2); } .embed-t { font-weight: 700; }
.embed-img { max-width: 100%; max-height: 260px; border-radius: var(--r-s); margin-top: 6px; }
.yt { position: relative; aspect-ratio: 16/9; width: 100%; background: #000 center/cover; border-radius: var(--r-s); margin-top: 6px; display: grid; place-items: center; }
.yt .ic { width: 56px; height: 56px; color: #fff; background: var(--red); border-radius: 50%; padding: 14px; }
.yt-frame { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-s); margin-top: 6px; }
.spotify { width: 100%; height: 152px; border: 0; border-radius: 12px; margin-top: 6px; }
.poll { margin-top: 6px; max-width: 440px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; }
.poll-q { font-weight: 800; margin: 0; } .poll > p { margin: 2px 0 10px; }
.poll-a { position: relative; display: flex; justify-content: space-between; width: 100%; padding: 10px 12px; margin-bottom: 6px; border-radius: var(--r-s); background: var(--panel-2); overflow: hidden; text-align: left; border: 1.5px solid transparent; }
.poll-a::before { content: ''; position: absolute; inset: 0; width: var(--pct); background: var(--panel-3); transition: width .4s; }
.poll-a > * { position: relative; } .poll-a.mine { border-color: var(--red); } .poll-a:not([disabled]):hover { border-color: var(--ink-3); }
.poll .muted.small:last-child { margin: 8px 0 0; }
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.react { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--panel); border: 1px solid transparent; font-size: .9rem; }
.react b { font-size: .8rem; color: var(--ink-2); }
.react:hover { border-color: var(--ink-3); }
.react.me { background: var(--red-soft); border-color: var(--red); } .react.me b { color: var(--ink); }
.react.burst { background: linear-gradient(90deg, var(--red-soft), transparent); }
.react.add { opacity: 0; color: var(--ink-3); } .msg:hover .react.add { opacity: 1; } .react.add .ic { width: 16px; height: 16px; }
.react .emoji { width: 18px; height: 18px; vertical-align: 0; }
.thread-chip { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px; background: var(--panel); border-radius: var(--r-s); border: 1px solid var(--line); max-width: 440px; text-align: left; }
.thread-chip span { color: #4ea1ff; font-size: .82rem; margin-left: auto; } .thread-chip:hover { border-color: var(--ink-3); }
.jump-present { position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; background: var(--red); color: #fff; font-weight: 700; padding: 6px 16px; border-radius: 99px; box-shadow: var(--shadow); font-size: .85rem; z-index: 4; }

/* composer */
.composer-wrap { padding: 0 16px 20px; flex: none; position: relative; }
.typing { height: 20px; font-size: .78rem; color: var(--ink-2); display: flex; align-items: center; gap: 6px; padding-left: 4px; }
.dots { display: inline-flex; gap: 3px; } .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); animation: blink 1.2s infinite; } .dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.composer { background: var(--panel); border-radius: var(--r-m); border: 1px solid var(--line); position: relative; }
.composer.disabled { padding: 14px 16px; color: var(--ink-3); } .composer.disabled p { margin: 0; }
.comp-row { display: flex; align-items: flex-end; gap: 2px; padding: 4px 6px; }
.comp-row textarea { flex: 1; resize: none; border: 0 !important; background: transparent !important; padding: 10px 6px !important; max-height: 320px; line-height: 1.4; }
.comp-row .icon-btn { width: 38px; height: 40px; } .comp-row .ic { width: 22px; height: 22px; }
.comp-row .send { color: var(--ink-3); } .comp-row .send:hover { color: var(--red-hi); }
.comp-row .rec { color: #fff; background: var(--red); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(199, 0, 38, .25); } }
.reply-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--panel-2); border-radius: var(--r-m) var(--r-m) 0 0; font-size: .84rem; color: var(--ink-2); }
.reply-bar span { flex: 1; } .ping-toggle { display: flex; gap: 6px; align-items: center; font-weight: 700; font-size: .78rem; } .ping-toggle input { width: 14px; height: 14px; }
.files { display: flex; gap: 10px; padding: 12px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.file-chip { position: relative; width: 160px; flex: none; background: var(--panel-2); border-radius: var(--r-s); padding: 8px; display: grid; gap: 4px; font-size: .8rem; }
.file-chip img { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; } .file-chip > .ic { width: 100%; height: 100px; color: var(--ink-3); padding: 28px; }
.file-chip.sp img { filter: blur(12px); }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-chip small { color: var(--ink-3); }
.chip-tools { position: absolute; top: -8px; right: -6px; display: flex; background: var(--panel); border-radius: var(--r-s); box-shadow: var(--shadow); }
.chip-tools .icon-btn { width: 28px; height: 28px; } .chip-tools .ic { width: 16px; height: 16px; }
.autocomplete { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow); max-height: 320px; overflow-y: auto; padding: 6px; z-index: 6; }
.ac-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-s); cursor: pointer; }
.ac-item small { color: var(--ink-3); margin-left: auto; } .ac-item.sel, .ac-item:hover { background: var(--panel-2); }
.ac-item .emo { font-size: 1.2rem; width: 24px; text-align: center; }
.role-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.slow-note { font-size: .74rem; color: var(--ink-3); margin: 4px 4px 0; }

/* search pane */
.search-pane { width: 400px; flex: none; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.search-pane header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.search-body { flex: 1; overflow-y: auto; padding: 8px; }
.search-help { text-decoration: underline dotted; cursor: help; float: right; }
.search-hit { display: grid; gap: 4px; width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px; margin-bottom: 8px; }
.search-hit:hover { border-color: var(--ink-3); } .hit-head { display: flex; align-items: center; gap: 8px; }

/* forum */
.forum { flex: 1; overflow-y: auto; max-width: 980px; }
.forum-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.forum-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-btn { padding: 4px 10px; border-radius: 99px; background: var(--panel-2); font-size: .82rem; } .tag-btn.on { background: var(--red); color: #fff; }
.posts { display: grid; gap: 10px; }
.post { display: flex; gap: 14px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; }
.post:hover { border-color: var(--ink-3); }
.post-text { display: grid; gap: 4px; min-width: 0; flex: 1; } .post-text b { font-size: 1.05rem; }
.post-ex { color: var(--ink-2); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-text small { display: flex; gap: 4px; align-items: center; } .post-text small .ic { width: 14px; height: 14px; }
.post-tags { display: flex; gap: 4px; } .post-tags i { font-style: normal; font-size: .72rem; background: var(--panel-3); padding: 1px 8px; border-radius: 99px; }
.post-img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--r-s); order: 2; }
.posts:has(.post.media) { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.post.media { flex-direction: column; } .post.media .post-img { width: 100%; height: 180px; order: 0; }

/* ---------- voice view ---------- */
.voice-split { flex: 1; display: flex; min-width: 0; }
.voice-view { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #000; color: #fff; padding: 16px; position: relative; }
:root[data-theme="light"] .voice-view { background: #0c0c0d; }
.voice-chat { max-width: 420px; border-left: 1px solid var(--line); background: var(--bg); }
.voice-empty { margin: auto; text-align: center; display: grid; justify-items: center; gap: 4px; color: #ddd; }
.voice-empty .ic { width: 48px; height: 48px; color: #666; }
.voice-empty h2 { margin: 6px 0 0; }
.tiles { flex: 1; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-content: center; max-width: 1400px; width: 100%; margin: 0 auto; }
.tiles.n1 { grid-template-columns: minmax(240px, 760px); justify-content: center; }
.tile { position: relative; aspect-ratio: 16/9; background: #18181b; border-radius: var(--r-m); overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .1s; }
.tile.speaking { box-shadow: inset 0 0 0 3px var(--ok); }
.tile video { width: 100%; height: 100%; object-fit: contain; background: #000; } .tile video.mirror { transform: scaleX(-1); object-fit: cover; }
.tile-av .av-fallback, .tile-av img { box-shadow: 0 0 0 6px rgba(255,255,255,.04); }
.tile-name { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.6); padding: 3px 8px; border-radius: 6px; font-size: .84rem; font-weight: 600; }
.tile-name .ic { width: 15px; height: 15px; color: var(--red-hi); } .tile-name small { display: inline-flex; align-items: center; gap: 2px; color: #bbb; } .tile-name small .ic { color: #bbb; width: 13px; }
.tile-act { position: absolute; inset: auto 8px 8px auto; background: var(--red); color: #fff; font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 99px; }
.focus-layout { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.tile.big { flex: 1; aspect-ratio: auto; min-height: 0; }
.big-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.tile.big:hover .big-tools, .tile.big:focus-within .big-tools { opacity: 1; } .big-tools .icon-btn { background: rgba(0,0,0,.6); color: #fff; }
.strip { display: flex; gap: 10px; overflow-x: auto; flex: none; } .strip .tile { width: 200px; flex: none; }
.stream-preview { display: grid; justify-items: center; gap: 10px; text-align: center; } .stream-preview p { margin: 0; color: #ccc; }
.vc-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; padding: 16px 8px 0; flex: none; max-width: 100%; container-type: inline-size; }
.ctl { width: 52px; height: 52px; border-radius: 50%; background: #26262b; color: #fff; display: grid; place-items: center; }
.ctl:hover { background: #34343a; } .ctl.off { background: #fff; color: var(--red); } .ctl.on { background: #fff; color: #000; } .ctl.live { background: var(--red); color: #fff; } .ctl.danger { background: var(--red); } .ctl.danger:hover { background: var(--red-hi); }
.ctl .ic { width: 24px; height: 24px; }
.stage { flex: 1; overflow-y: auto; } .stage .mem-h { color: #999; }
.stage .tiles { align-content: start; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.audience { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 8px; }
.aud { display: grid; justify-items: center; gap: 4px; width: 92px; font-size: .8rem; text-align: center; position: relative; }
.aud.speaking .av { box-shadow: 0 0 0 3px var(--ok); border-radius: 50%; }
.hand { position: absolute; top: 0; right: 14px; background: var(--idle); color: #000; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; } .hand .ic { width: 14px; height: 14px; }
.call-bar { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 16px; background: #000; color: #fff; border-bottom: 1px solid var(--line); }
.call-people { display: flex; gap: 16px; } .call-av { border-radius: 50%; transition: box-shadow .1s; } .call-av.speaking { box-shadow: 0 0 0 3px var(--ok); }
.call-ctl { display: flex; gap: 10px; } .call-ctl .ctl { width: 44px; height: 44px; }
.call-in { padding: 28px 20px 24px; } .call-in h2 { margin: 12px 0 2px; }
.call-btns { display: flex; gap: 40px; justify-content: center; margin-top: 22px; }
.call-view .modal-body, .call-view { padding: 0; }
.modal.call-view { width: min(1200px, 96vw); height: min(760px, 90vh); }
.call-full, .call-full .voice-view { height: 100%; }

/* ---------- overlays ---------- */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .72); display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal-back.out { opacity: 0; transition: opacity .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(480px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; background: var(--panel); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; animation: pop .18s cubic-bezier(.2, .9, .3, 1.2); border: 1px solid var(--line); }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.modal.sm { width: min(420px, 100%); } .modal.lg { width: min(760px, 100%); } .modal.xl { width: min(1100px, 100%); }
.modal > header { display: flex; align-items: center; gap: 10px; padding: 18px 18px 8px 22px; }
.modal > header h2 { margin: 0; font-size: 1.25rem; flex: 1; }
.modal-body { padding: 8px 22px 18px; overflow-y: auto; }
.modal-body.center { text-align: center; display: grid; justify-items: center; }
.modal > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; background: var(--panel-2); }
.qs-modal { width: min(560px, 100%); } .qs { padding: 18px; } .qs-in { font-size: 1.1rem; height: 52px; }
.qs-list { margin: 10px 0; max-height: 360px; overflow-y: auto; }
.qs-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border-radius: var(--r-s); text-align: left; font-weight: 600; }
.qs-item small { color: var(--ink-3); font-weight: 400; } .qs-item.sel, .qs-item:hover { background: var(--panel-2); }
.tpl-list { display: grid; gap: 8px; margin: 14px 0; }
.tpl { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); text-align: left; }
.tpl b { flex: none; } .tpl small { color: var(--ink-3); flex: 1; } .tpl .ic { transform: rotate(-90deg); color: var(--ink-3); } .tpl:hover { background: var(--panel-2); }
.join-box { text-align: center; padding-top: 8px; } .join-box h3 { margin: 6px 0 10px; font-size: 1rem; }
.upload-circle { width: 88px; height: 88px; border-radius: 50%; border: 2px dashed var(--ink-3); display: grid; place-items: center; align-content: center; gap: 2px; margin: 8px auto 18px; cursor: pointer; background: center/cover; color: var(--ink-3); font-size: .74rem; font-weight: 700; }
.upload-circle.has { border: 0; color: transparent; } .upload-circle.has .ic { display: none; }
.types { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; } .types legend { font-size: .78rem; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.type { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--panel-2); border-radius: var(--r-s); cursor: pointer; border: 1.5px solid transparent; }
.type:has(input:checked) { border-color: var(--red); } .type span { display: grid; } .type small { color: var(--ink-3); font-size: .8rem; } .type input { margin-left: auto; order: 3; }
.pick { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-s); cursor: pointer; }
.pick:hover { background: var(--panel-2); } .pick > span:not(.role-dot):not(.role-chips):not(.av):not(.srv-icon) { flex: 1; display: grid; min-width: 0; } .pick small { color: var(--ink-3); font-size: .8rem; }
.pick-search, .disc-q, .mq, .u-q { margin-bottom: 10px; }
.pick-list { max-height: 320px; overflow-y: auto; }
.copy-row { display: flex; gap: 8px; }
.inv-opts { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: .86rem; color: var(--ink-2); }
.inv-opts select { width: auto; margin-left: 6px; padding: 6px 8px; }
.inv-friends { max-height: 220px; overflow-y: auto; margin-bottom: 14px; }
.invite-card h2 { margin: 2px 0 4px; } .invite-card .srv-icon { margin-bottom: 10px; }
.disc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.disc { position: relative; background: var(--panel-2); border-radius: var(--r-m); padding: 0 14px 14px; display: grid; gap: 6px; overflow: hidden; }
.disc-banner { height: 80px; margin: 0 -14px; background: var(--panel-3) center/cover; } .disc .srv-icon { margin-top: -28px; border: 4px solid var(--panel-2); }
.disc p { margin: 0; }
.cs-row { display: flex; gap: 8px; } .cs-row .cs-emoji { width: 64px; text-align: center; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0 0 16px; }
.seg legend { font-size: .78rem; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; width: 100%; }
.seg label { cursor: pointer; } .seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 8px 14px; border-radius: var(--r-s); background: var(--panel-2); font-weight: 600; font-size: .88rem; border: 1.5px solid transparent; }
.seg input:checked + span { border-color: var(--red); background: var(--red-soft); } .seg input:focus-visible + span { outline: 2px solid var(--red-hi); }
.seg.big span { padding: 14px 22px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.answers .field { margin-bottom: 8px; }
.tag-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .tag-pick label span { padding: 4px 10px; border-radius: 99px; background: var(--panel-2); font-size: .84rem; } .tag-pick input { display: none; } .tag-pick input:checked + span { background: var(--red); color: #fff; }
.event { background: var(--panel-2); border-radius: var(--r-m); padding: 14px; margin-bottom: 10px; } .event h3 { margin: 4px 0; }
.ev-when { color: var(--red-hi); font-weight: 700; font-size: .84rem; margin: 0; display: flex; gap: 6px; align-items: center; } .ev-when .ic { width: 16px; height: 16px; }
.ev-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.lightbox { width: auto; max-width: 96vw; background: transparent; border: 0; box-shadow: none; align-items: center; }
.lightbox img { max-width: 92vw; max-height: 84vh; border-radius: var(--r-s); }
.lb-open { color: #ccc; font-size: .84rem; margin-top: 8px; } .lb-close { position: fixed; top: 16px; right: 16px; color: #fff; }

.menu { position: fixed; z-index: 200; min-width: 200px; max-width: 280px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow); padding: 6px; animation: fade .1s; max-height: 80vh; overflow-y: auto; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.menu-h { font-size: .72rem; font-weight: 700; color: var(--ink-3); margin: 6px 8px 2px; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 4px; text-align: left; font-size: .88rem; font-weight: 500; }
.menu-item span { flex: 1; } .menu-item small { color: var(--ink-3); font-size: .74rem; }
.menu-item:hover, .menu-item:focus-visible { background: var(--red); color: #fff; outline: none; } .menu-item:hover small { color: #ffd5dd; }
.menu-item.danger { color: var(--red-hi); } .menu-item.danger:hover { color: #fff; }
.menu-item[disabled] { opacity: .4; }
.menu-item .check { font-style: normal; width: 14px; }
.popover { position: fixed; z-index: 150; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); animation: fade .1s; max-width: calc(100vw - 16px); }
.popover.wide { width: 440px; }
.panel h3 { margin: 0; padding: 14px 16px 10px; font-size: 1rem; border-bottom: 1px solid var(--line); }
.panel-body { max-height: 440px; overflow-y: auto; padding: 8px; }
.pin-row { display: flex; gap: 10px; padding: 10px; border-radius: var(--r-s); background: var(--bg); margin-bottom: 6px; } .pin-row > div { flex: 1; min-width: 0; }
.thread-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px; border-radius: var(--r-s); text-align: left; } .thread-row:hover { background: var(--panel-2); } .thread-row small { margin-left: auto; }
.picker { width: 352px; display: flex; flex-direction: column; height: 380px; }
.pk-search { margin: 10px; width: calc(100% - 20px) !important; }
.pk-body { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.pk-h { font-size: .74rem; font-weight: 700; color: var(--ink-3); margin: 10px 4px 4px; }
.pk-grid { display: grid; grid-template-columns: repeat(8, 1fr); }
.pk-grid button { height: 40px; font-size: 1.5rem; border-radius: var(--r-s); display: grid; place-items: center; }
.pk-grid button:hover { background: var(--panel-2); } .pk-grid img { width: 30px; height: 30px; object-fit: contain; }
.sb { width: 360px; } .sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sb-btn { padding: 10px 6px; border-radius: var(--r-s); background: var(--panel-2); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-btn:hover { background: var(--red); color: #fff; }

/* profile */
.profile-card { width: 320px; overflow: hidden; border-radius: var(--r-l); --accent: var(--panel-3); }
.pc-banner { height: 92px; background: var(--accent) center/cover; } .pc-banner.tall { height: 140px; }
.pc-av { margin: -44px 0 0 16px; } .pc-av .av { box-shadow: 0 0 0 6px var(--panel); border-radius: 50%; } .pc-av .av .st { border-width: 5px; }
.pc-body { padding: 8px 16px 16px; } .pc-body h3 { margin: 0; font-size: 1.25rem; } .pc-body > p { margin: 0 0 6px; }
.pc-status { background: var(--panel-2); border-radius: var(--r-s); padding: 6px 10px; }
.pc-voice { display: flex; gap: 6px; align-items: center; color: var(--ok); font-size: .84rem; font-weight: 600; } .pc-voice .ic { width: 16px; height: 16px; }
.pc-sec { border-top: 1px solid var(--line); padding: 10px 0 4px; } .pc-sec h4 { margin: 0 0 6px; font-size: .74rem; color: var(--ink-3); }
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.role-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; padding: 2px 8px; background: var(--panel-2); border-radius: 4px; }
.role-chip i { width: 10px; height: 10px; border-radius: 50%; }
.pc-msg input { margin-top: 10px; }
.profile-pop { padding: 0; }
.profile-modal { width: min(600px, 100%); }
.profile-full { --accent: var(--panel-3); } .pf-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 18px; margin-top: -48px; }
.pf-head .av { box-shadow: 0 0 0 7px var(--panel); border-radius: 50%; } .pf-actions { display: flex; gap: 8px; align-items: center; padding-bottom: 6px; }
.pf-body { padding: 10px 22px 22px; max-height: 60vh; overflow-y: auto; } .pf-body h2 { margin: 0; }
.mutual { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 6px 0; padding: 4px 10px 4px 4px; border-radius: 99px; background: var(--panel-2); font-size: .86rem; }
.note { min-height: 50px; background: transparent !important; border-style: dashed !important; }

/* settings */
.settings { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); background: var(--bg); animation: fade .15s; }
.set-nav { background: var(--panel); display: flex; justify-content: flex-end; overflow-y: auto; padding: 56px 8px 40px 20px; }
.set-nav-in { width: 200px; }
.set-h { font-size: .74rem; font-weight: 800; color: var(--ink-3); margin: 16px 10px 6px; }
.set-tab { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: var(--r-s); color: var(--ink-2); font-weight: 600; margin-bottom: 2px; }
.set-tab:hover { background: var(--hover); color: var(--ink); } .set-tab.active { background: var(--active); color: var(--ink); }
.set-tab.danger { color: var(--red-hi); } .set-nav hr { border: 0; border-top: 1px solid var(--line); margin: 10px; }
.set-main { overflow-y: auto; padding: 56px 40px 80px; }
.set-content { max-width: 740px; }
.set-content h2 { margin: 0 0 6px; font-size: 1.35rem; } .set-content h2 + .muted { margin-top: 0; }
.set-content h3 { font-size: 1rem; margin: 28px 0 8px; } .danger-h { color: var(--red-hi); }
.set-content > .field, .set-content > .switch-row, .set-content > .seg { margin-top: 16px; }
.set-close { position: fixed; top: 44px; right: 36px; display: grid; justify-items: center; gap: 4px; color: var(--ink-3); font-size: .72rem; font-weight: 700; }
.set-close .ic { width: 36px; height: 36px; padding: 6px; border-radius: 50%; border: 2px solid var(--ink-3); }
.set-close:hover { color: var(--ink); } .set-close:hover .ic { border-color: var(--ink); }
.acct-card { display: flex; align-items: center; gap: 16px; background: var(--panel); border-radius: var(--r-l); padding: 18px; margin: 18px 0; } .acct-card div { flex: 1; } .acct-card h3 { margin: 0; }
.kv { background: var(--panel); border-radius: var(--r-l); padding: 6px 18px; margin: 0; }
.kv > div { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .kv > div:last-child { border: 0; }
.kv dt { font-size: .76rem; font-weight: 800; color: var(--ink-3); width: 140px; flex: none; } .kv dd { margin: 0; flex: 1; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.steps { padding-left: 18px; line-height: 1.6; } .key { display: block; font: 1rem var(--mono); background: var(--panel-2); padding: 8px 12px; border-radius: var(--r-s); margin: 6px 0; letter-spacing: .08em; }
.profile-edit { display: grid; grid-template-columns: 1fr 320px; gap: 28px; margin-top: 16px; align-items: start; }
.pe-preview .profile-card { background: var(--panel); border: 1px solid var(--line); }
.session { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); } .session > div:nth-child(2) { flex: 1; display: grid; }
.sound-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); } .sound-row span { flex: 1; }
.mic-test { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; } .meter { flex: 1; height: 10px; background: var(--panel-2); border-radius: 99px; overflow: hidden; } .meter i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .06s; }
.about-wm { width: 260px; margin: 12px 0; }
.ov-top { display: flex; gap: 20px; align-items: center; margin-top: 12px; } .ov-top .upload-circle { margin: 0; } .grow { flex: 1; }
.roles-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin-top: 16px; align-items: start; }
.role-list { display: grid; gap: 2px; position: sticky; top: 0; } .role-list .btn { margin-bottom: 8px; } .role-list select { margin-top: 10px; }
.role-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-s); text-align: left; font-weight: 600; color: var(--ink-2); }
.role-item i { width: 12px; height: 12px; border-radius: 50%; flex: none; } .role-item small { margin-left: auto; color: var(--ink-3); }
.role-item:hover { background: var(--hover); } .role-item.active { background: var(--active); color: var(--ink); }
.perms h3 { margin-top: 22px; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.perm-row span:first-child { display: grid; } .perm-row small { color: var(--ink-3); font-size: .8rem; }
.tri { display: flex; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--line); flex: none; }
.tri button { width: 34px; height: 28px; font-weight: 800; color: var(--ink-3); }
.tri button.on.deny { background: var(--red); color: #fff; } .tri button.on.inherit { background: var(--panel-3); color: var(--ink); } .tri button.on.allow { background: var(--ok); color: #fff; }
.sticky-save { position: sticky; bottom: -80px; background: var(--bg); padding: 14px 0; margin-top: 10px; }
.emoji-list { margin-top: 16px; } .emoji-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); } .emoji-row img { width: 32px; height: 32px; object-fit: contain; } .emoji-row b { flex: 1; }
.sb-add { display: flex; gap: 8px; margin: 14px 0; } .sb-add .em { width: 80px; }
.audit { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .audit p { margin: 0 0 2px; } .quote { border-left: 3px solid var(--panel-3); padding-left: 8px; }
.report { background: var(--panel-2); border-radius: var(--r-m); padding: 14px; margin: 10px 0; } .report p { margin: 0 0 4px; }
.rep-ctx { background: var(--bg); border-radius: var(--r-s); padding: 8px 10px; font-size: .86rem; margin: 8px 0; } .rep-ctx p.hl { background: var(--red-soft); border-left: 3px solid var(--red); padding-left: 6px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.stats > div { background: var(--panel-2); border-radius: var(--r-m); padding: 14px; } .stats dt { color: var(--ink-3); font-size: .78rem; font-weight: 700; } .stats dd { margin: 4px 0 0; font-size: 1.4rem; font-weight: 800; } .stats small { font-size: .74rem; color: var(--ink-3); font-weight: 500; }

/* toasts */
#toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1100; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); font-weight: 600; padding: 10px 18px; border-radius: 12px; box-shadow: var(--shadow); font-size: .9rem; animation: up .2s ease; max-width: min(90vw, 560px); text-align: center; }
.toast-error { background: var(--red); color: #fff; }
.toast.out { opacity: 0; transform: translateY(-8px); transition: .25s; }
@keyframes up { from { transform: translateY(-10px); opacity: 0; } }

/* compact density */
[data-density="compact"] .msg { margin-top: 2px; grid-template-columns: 72px 1fr; }
[data-density="compact"] .msg-av { display: none; }
[data-density="compact"] .msg-h { grid-column: 2; }

/* ---------- phones ---------- */
@media (max-width: 1100px) { .shell { grid-template-columns: var(--rail) var(--side) 1fr 0; } .members { display: none; } .search-pane { position: absolute; inset: 0 0 0 auto; width: min(400px, 100%); z-index: 5; } }
@media (max-width: 760px) {
  .mobile-only { display: inline-grid !important; }
  .shell, .shell.no-members { grid-template-columns: var(--rail) 1fr; grid-template-rows: 100dvh; }
  .shell[data-pane="main"] .rail, .shell[data-pane="main"] .side { display: none; }
  .shell[data-pane="main"] { grid-template-columns: 1fr; }
  .shell[data-pane="side"] .main { display: none; }
  .side { padding-bottom: env(safe-area-inset-bottom); }
  .main-h { padding-left: 4px; } .h-topic, .h-search, [data-chat=threads] { display: none !important; }
  .msg { grid-template-columns: 56px 1fr; padding-right: 8px; }
  .msg-tools { right: 4px; } .composer-wrap { padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  .thread-pane:not(.full) { position: absolute; inset: 0; max-width: none; z-index: 6; background: var(--bg); }
  .tabs { margin-left: 4px; padding-left: 4px; }
  .settings { grid-template-columns: 1fr; } .set-nav { padding: 56px 12px 40px; justify-content: stretch; } .set-nav-in { width: 100%; }
  .set-main { position: absolute; inset: 0; background: var(--bg); padding: 20px 16px 80px; display: none; } .settings.show-main .set-main { display: block; }
  .set-close { top: 12px; right: 12px; } .profile-edit, .roles-layout, .two { grid-template-columns: 1fr; } .pe-preview { order: -1; } .pe-preview .profile-card { width: 100%; }
  .tiles { grid-template-columns: 1fr 1fr; } .ctl { width: 46px; height: 46px; }
  .popover.wide, .picker, .sb { width: calc(100vw - 16px); }
  .voice-chat { position: absolute; inset: 0; max-width: none; z-index: 6; }
  .modal { max-height: 92vh; }
}

/* role editor tabs + role members */
.role-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 16px; overflow-x: auto; }
.role-tabs button { padding: 10px 12px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.role-tabs button:hover { color: var(--ink); } .role-tabs button.on { color: var(--ink); border-bottom-color: var(--red); }
.rt-members .row-actions { margin-bottom: 10px; } .rt-members .rmq { flex: 1; min-width: 0; }
.rm-list .pick { cursor: default; }

/* profile editor */
.pc-banner.draggable { cursor: grab; touch-action: none; } .pc-banner.dragging { cursor: grabbing; }
.pc-banner.draggable::after { content: 'Drag to reposition'; position: absolute; right: 8px; top: 8px; font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; opacity: 0; transition: opacity .15s; pointer-events: none; }
.pc-banner { position: relative; } .pc-banner.draggable:hover::after { opacity: 1; }
.accent-row { align-items: center; flex-wrap: wrap; } .accent-row input[type=color] { width: 44px; height: 36px; padding: 2px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); } .swatch:hover { transform: scale(1.1); }
.pe-save { position: sticky; bottom: 8px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-m, 10px); background: var(--panel-3); box-shadow: 0 6px 24px rgba(0,0,0,.35); margin-top: 16px; z-index: 2; }
.pe-save span { flex: 1; font-weight: 600; font-size: .9rem; }
.pv-bio { font-size: .9rem; }

/* ---------- phones + installed app polish ---------- */
.composer textarea:focus-visible, .composer [contenteditable]:focus-visible { outline: none; }
.composer:focus-within { border-color: var(--ink-3); }
.set-back { align-items: center; gap: 4px; grid-auto-flow: column; justify-content: start; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; padding: 6px 0; }
.set-back .ic { transform: rotate(90deg); width: 20px; height: 20px; }
.toast { pointer-events: auto; cursor: pointer; }
@media (max-width: 1100px) {
  .shell.members-sheet .members { display: block; position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); z-index: 40; padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); box-shadow: -12px 0 40px rgba(0,0,0,.5); animation: sheet-in .18s ease; }
  .shell.members-sheet::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 39; }
  @keyframes sheet-in { from { transform: translateX(100%); } }
}
@media (max-width: 760px) {
  /* notch / status bar / home indicator (installed app and landscape) */
  .shell { padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); box-sizing: border-box; }
  .rail { padding-bottom: env(safe-area-inset-bottom); }
  .set-nav { padding-top: calc(56px + env(safe-area-inset-top)); }
  .set-main { padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .set-close { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); } .set-close small { display: none; }
  .set-main h2 { padding-right: 48px; }
  .modal-back { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  #toasts { top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); }
  .toast { font-size: .85rem; padding: 9px 14px; }
  /* friends header fits on one line */
  .main-h:has(.tabs) .h-title { display: none; }
  .main-h .h-title { flex: 1 1 auto; } .main-h .h-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .main-h > .icon-btn, .main-h .h-actions { flex: none; }
  .inline-form { flex-direction: column; } .inline-form .btn { width: 100%; }
  .main-h .tabs { margin-left: 2px; padding-left: 8px; gap: 2px; flex: 1; }
  .main-h .tabs .tab { padding: 0 8px; font-size: .85rem; }
}

/* ---------- raid lockdown ---------- */
:root { --tape: #ffbe00; --raid-h: 0px; }
body.raid { --raid-h: calc(44px + env(safe-area-inset-top)); }
body.raid .shell { height: calc(100dvh - var(--raid-h)); margin-top: var(--raid-h); padding-top: 0; }
#raid-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--raid-h); padding-top: env(safe-area-inset-top); display: flex; align-items: stretch; background: #0b0b0c; color: var(--tape); border-bottom: 2px solid var(--tape); }
#raid-banner .rb-tape { flex: 0 0 64px; background: repeating-linear-gradient(-45deg, var(--tape) 0 12px, #111 12px 24px); }
#raid-banner .rb-text { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px; font-size: .88rem; white-space: nowrap; overflow: hidden; }
#raid-banner .rb-text b { overflow: hidden; text-overflow: ellipsis; }
#raid-banner .rb-timer { flex: none; color: #fff; font-weight: 700; } #raid-banner time { font-family: 'JetBrains Mono', monospace; color: var(--tape); }
#raid-banner .rb-staff { flex: none; color: var(--ink-2); font-size: .8rem; }
#raid-banner .rb-btn { flex: none; background: var(--tape); color: #000; font-weight: 800; border-radius: 6px; padding: 4px 10px; font-size: .8rem; }
@media (max-width: 760px) {
  body.raid { --raid-h: calc(52px + env(safe-area-inset-top)); }
  #raid-banner .rb-tape { flex-basis: 14px; } #raid-banner .rb-text { white-space: normal; font-size: .74rem; line-height: 1.25; flex-wrap: wrap; gap: 2px 8px; text-align: center; }
  #raid-banner .rb-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #raid-banner .rb-staff { display: none; }
}
.raid-anim { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .25s; }
.raid-anim-in { width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; display: grid; place-items: center; }
.raid-anim-in img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.raid-anim.out { opacity: 0; transition: opacity .4s; }
.raid-skip { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 8px 18px; border-radius: 99px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; font-size: .85rem; border: 1px solid rgba(255, 255, 255, .25); }
.raid-skip:hover { background: rgba(255, 255, 255, .22); }
.composer.raid-locked { border-color: var(--tape); background: linear-gradient(90deg, rgba(255, 190, 0, .10), transparent 60%); }
.composer.raid-locked .comp-row { align-items: center; }
.composer.raid-locked .raid-lock { flex: 0 0 10px; align-self: stretch; margin: 6px 0 6px 6px; border-radius: 4px; background: repeating-linear-gradient(-45deg, var(--tape) 0 5px, #111 5px 10px); }
.composer.raid-locked textarea { color: var(--tape); cursor: not-allowed; }
.composer.raid-locked textarea::placeholder { color: var(--tape); opacity: 1; font-weight: 600; }
.pc-msg input[data-raid-ph]::placeholder { color: var(--tape); opacity: 1; }
body.raid .rail-btn[data-act=admin] { color: #000; background: var(--tape); animation: raid-pulse 1.6s ease-in-out infinite; }
@keyframes raid-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 190, 0, .25); } }
.tab.raid-on { color: #000 !important; background: var(--tape) !important; }
.raid-card { border-radius: var(--r-l); padding: 18px 20px; background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 18px; }
.raid-card h3 { margin: 0 0 6px; } .raid-card p { margin: 0 0 14px; color: var(--ink-2); }
.raid-card.on { border: 2px solid var(--tape); background: linear-gradient(135deg, rgba(255, 190, 0, .12), var(--panel-2) 55%); } .raid-card.on h3 { color: var(--tape); }
.raid-card .ev-actions { align-items: flex-end; flex-wrap: wrap; }
.raid-dur { display: grid; gap: 4px; font-size: .75rem; font-weight: 700; color: var(--ink-3); }
.btn.big { padding: 12px 22px; font-size: 1rem; } .raid-card .btn-danger.big { background: var(--red); color: #fff; box-shadow: none; }
.btn-ok { background: #2f9e44; color: #fff; } .btn-ok:hover { background: #37b24d; }
.raid-sec { margin-bottom: 18px; } .raid-sec > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .raid-sec h3 { margin: 0; font-size: 1rem; }
.raid-row .samples { display: block; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.raid-row .cnt { color: var(--tape); }
.mail-out { white-space: pre-wrap; padding: 10px 12px; border-radius: var(--r-s); background: var(--panel-2); font-size: .85rem; margin-top: 10px; } .mail-out.ok { color: #69db7c; } .mail-out.bad { color: var(--red-hi); }
.raid-sec .ev-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .mail-to { flex: 1; min-width: 200px; }
.raid-sec > header select { width: auto; flex: none; }

/* 16:9 warning art fitted to any screen: tapes on the edges, text in the middle */
.raid-anim.sliced { --band: 0.1068; --mid-top: 0.1991; --mid-h: 0.6019; } /* tapes: 205px of 1920 wide; text area y 215..865 of 1080 */
.raid-stage { position: absolute; inset: 0; overflow: hidden; }
.raid-stage .rs { position: absolute; left: 0; width: 100vw; overflow: hidden; }
.raid-stage img { position: absolute; left: 0; width: 100%; height: auto; max-width: none; pointer-events: none; user-select: none; }
.raid-stage .rs.top { top: 0; height: calc(100vw * var(--band)); } .raid-stage .rs.top img { top: 0; }
.raid-stage .rs.bottom { bottom: 0; height: calc(100vw * var(--band)); } .raid-stage .rs.bottom img { bottom: 0; }
.raid-stage .rs.mid { top: calc(100vw * var(--band)); bottom: calc(100vw * var(--band)); display: grid; place-items: center; overflow: visible; }
.raid-stage .rs-in { position: relative; width: min(100vw, calc((100dvh - 2 * 100vw * var(--band)) * 1920 / 650)); aspect-ratio: 1920 / 650; overflow: hidden; }
.raid-stage .rs-in img { top: calc(-100% * var(--mid-top) / var(--mid-h)); }
.raid-anim.sliced .raid-skip { bottom: calc(100vw * var(--band) + 14px + env(safe-area-inset-bottom)); z-index: 1; }

/* DM calls: live video area inside the call bar */
.call-bar .voice-view.compact { width: 100%; max-width: 1100px; padding: 0; background: transparent; flex: none; }
.call-bar .voice-view.compact .tiles { min-height: 0; } .call-bar .voice-view.compact .tile { aspect-ratio: 16 / 9; max-height: 38vh; }
.call-bar .voice-view.compact .focus-layout { height: min(56vh, 620px); }
.call-bar:has(.voice-view.compact:not([hidden])) .call-people { display: none; }

/* custom invite links */
.vanity-field > span { display: flex; align-items: center; gap: 6px; color: var(--tape, #ffbe00); } .vanity-field .ic { width: 16px; height: 16px; }
.vanity-admin { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.vanity-admin .copy-row { align-items: center; background: var(--panel-2); border-radius: var(--r-s); padding: 4px 4px 4px 12px; }
.vanity-prefix { color: var(--ink-3); font-weight: 600; white-space: nowrap; } .vanity-in { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding-left: 2px !important; font-weight: 700; }

/* Shift + hover: quick delete */
.msg-tools .quick-del { display: none; }
body.shift-held .msg-tools .quick-del { display: grid; color: #fff; background: var(--red); border-radius: 6px; }
body.shift-held .msg-tools .quick-del:hover { background: #e0103a; }
body.shift-held .msg:hover { box-shadow: inset 2px 0 0 var(--red); }
.msg.removing { opacity: .35; transition: opacity .15s; pointer-events: none; }

/* update available */
.update-card { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 1200; width: min(380px, calc(100vw - 32px)); display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; padding: 16px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 16px 48px rgba(0,0,0,.45); animation: upd-in .3s cubic-bezier(.2,.9,.3,1.2); }
.update-card.out { opacity: 0; transform: translateY(12px); transition: .25s; }
.upd-mark { width: 40px; height: 40px; border-radius: 10px; background: url(/assets/icon-192.png) center/cover no-repeat; }
.upd-text { display: grid; gap: 2px; } .upd-text b { font-size: .98rem; } .upd-text span { color: var(--ink-2); font-size: .86rem; }
.upd-btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
@keyframes upd-in { from { opacity: 0; transform: translateY(20px) scale(.97); } }
@media (max-width: 760px) { .update-card { right: 16px; left: 16px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* send later + reminders + edit history + quiet hours */
.time-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.time-pre { text-align: left; padding: 10px 12px; border-radius: var(--r-s); background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 2px; }
.time-pre:hover { border-color: var(--red); } .time-pre small { color: var(--ink-3); font-size: .78rem; }
.sched-preview { padding: 10px 12px; border-left: 3px solid var(--red); background: var(--panel-2); border-radius: var(--r-s); margin-bottom: 14px; white-space: pre-wrap; max-height: 120px; overflow: auto; font-size: .92rem; }
.sched-slot:empty { display: none; }
.sched-note { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; margin-top: 6px; border-radius: var(--r-s); color: var(--ink-2); font-size: .82rem; background: var(--panel); border: 1px dashed var(--line); }
.sched-note .ic { width: 16px; height: 16px; color: var(--red-hi); } .sched-note span { flex: 1; text-align: left; } .sched-note b { color: var(--red-hi); }
.sched-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); } .sched-row > div:first-child { flex: 1; min-width: 0; }
.sched-row p { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; } .sched-row .bad { color: var(--red-hi); }
.sched-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#reminders { position: fixed; right: 20px; top: calc(20px + var(--raid-h, 0px) + env(safe-area-inset-top)); z-index: 1150; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.rem-card { background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 12px; padding: 12px 14px; box-shadow: 0 14px 40px rgba(0,0,0,.4); animation: upd-in .3s cubic-bezier(.2,.9,.3,1.2); }
.rem-card.out { opacity: 0; transform: translateX(16px); transition: .25s; }
.rem-h { display: flex; align-items: center; gap: 8px; } .rem-h .ic { width: 18px; height: 18px; color: var(--red-hi); } .rem-h small { color: var(--ink-3); flex: 1; }
.rem-msg { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 10px; font-size: .9rem; } .rem-msg span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.rem-btns { display: flex; gap: 8px; justify-content: flex-end; }
button.edited { font-size: .72rem; color: var(--ink-3); margin-left: 4px; text-decoration: none; } button.edited:hover { color: var(--ink); text-decoration: underline; }
.edit-hist h3 { display: flex; align-items: center; gap: 8px; } .edit-hist h3 .ic { width: 18px; height: 18px; }
.eh-row { padding: 8px 10px; border-radius: var(--r-s); background: var(--panel-2); margin-bottom: 6px; } .eh-row small { color: var(--ink-3); font-size: .75rem; } .eh-row p { margin: 3px 0 0; white-space: pre-wrap; word-break: break-word; }
.eh-row:not(.now) p { color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); } .eh-row.now { border: 1px solid var(--line); }
.set-sub { display: flex; align-items: center; gap: 8px; margin: 26px 0 4px; font-size: 1rem; } .set-sub .ic { width: 18px; height: 18px; }
.qdays input { position: absolute; opacity: 0; } .qdays span { padding: 6px 10px; }
@media (max-width: 760px) { .time-presets { grid-template-columns: 1fr; } #reminders { right: 16px; left: 16px; width: auto; } .sched-row { flex-direction: column; } }

/* Go Live: what are you sharing + stream info */
.seg.kind label { flex: 1; } .seg.kind span { display: grid; gap: 2px; text-align: left; } .seg.kind small { font-weight: 500; color: var(--ink-3); font-size: .78rem; }
.stream-stats { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .72); color: #fff; font: 600 .76rem 'JetBrains Mono', monospace; pointer-events: none; max-width: calc(100% - 120px); }
.limits-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* events */
.events-modal { width: min(640px, calc(100vw - 24px)); } .events-modal header h2 { display: flex; align-items: center; gap: 8px; flex: 1; } .events-modal header h2 .ic { width: 20px; height: 20px; }
.ev-list .event { border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; margin-bottom: 14px; background: var(--panel); }
.ev-list .event.live { border-color: #2f9e44; box-shadow: 0 0 0 1px #2f9e44; }
.ev-cover { height: 140px; background: center/cover; }
.ev-in { padding: 14px 16px; } .ev-in h3 { margin: 4px 0 6px; font-size: 1.15rem; }
.ev-when { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-2); font-size: .85rem; } .ev-when .ic { width: 15px; height: 15px; }
.ev-live-badge { color: #51cf66; } .ev-soon { color: var(--red-hi); }
.ev-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--ink-2); font-size: .85rem; margin: 0 0 8px; } .ev-meta .ic { width: 15px; height: 15px; vertical-align: -3px; }
.ev-host { display: inline-flex; align-items: center; gap: 6px; }
.ev-desc { font-size: .9rem; color: var(--ink-2); margin-bottom: 8px; }
.ev-people { display: flex; align-items: center; margin: 6px 0 10px; } .ev-people .av { margin-right: -6px; box-shadow: 0 0 0 2px var(--panel); border-radius: 50%; } .ev-people .ev-count { margin-left: 14px; color: var(--ink-3); font-size: .82rem; }
.ev-actions { display: flex; flex-wrap: wrap; gap: 8px; } .danger-text { color: var(--red-hi) !important; }
.ev-cover-pick { display: grid; place-items: center; height: 120px; border-radius: var(--r-m); border: 1.5px dashed var(--line); background: var(--panel-2) center/cover; cursor: pointer; margin-bottom: 14px; }
.ev-cover-pick span { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; font-weight: 600; font-size: .85rem; } .ev-cover-pick .ic { width: 16px; height: 16px; }
.nav-item.ev-live-nav { color: #51cf66; } .nav-item.ev-live-nav .ic { color: #51cf66; }
.ev-card .ev-card-name { font-weight: 700; margin: 8px 0 2px; }
.ev-live-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--r-m); background: rgba(47, 158, 68, .15); border: 1px solid rgba(47, 158, 68, .5); color: #fff; }
.ev-live-bar b { color: #51cf66; font-size: .8rem; letter-spacing: .06em; } .ev-live-bar small { color: #bbb; width: 100%; }
/* emoji */
.pk-add { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--ink-2); }
.pk-add:hover { color: var(--ink); background: var(--panel-2); } .pk-add .ic { width: 18px; height: 18px; color: var(--red-hi); }
.emoji-row .em-name { flex: 1; } .em-rename { max-width: 220px; font-weight: 700; } .emoji-row small { white-space: nowrap; }
.auto-tag { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 99px; background: var(--red-soft); color: var(--red-hi); margin-left: 6px; }

/* role order */
.role-hint { margin: 8px 2px 4px; }
.role-item.movable { cursor: grab; } .role-item.dragging { opacity: .4; }
.drag-grip { color: var(--ink-3); font-size: .9rem; margin-right: -2px; opacity: 0; transition: opacity .1s; } .role-item:hover .drag-grip { opacity: 1; }
.role-item.drop-above { box-shadow: inset 0 3px 0 var(--red); } .role-item.drop-below { box-shadow: inset 0 -3px 0 var(--red); }
.role-move { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .role-move span { flex: 1; }
@media (max-width: 760px) { .drag-grip { opacity: 1; } }

.panel.sb.cooling .sb-btn, .popover.cooling .sb-btn { opacity: .45; pointer-events: none; transition: opacity .15s; }

/* chat in voice channels */
.vchat-btn { display: inline-flex; align-items: center; gap: 6px; position: relative; } .vchat-btn .ic { width: 18px; height: 18px; }
.voice-chat { display: flex; flex-direction: column; min-width: 340px; } .voice-chat[hidden] { display: none !important; }
.vchat-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .vchat-h b { display: flex; align-items: center; gap: 6px; } .vchat-h b .ic { width: 18px; height: 18px; } .vchat-h small { flex: 1; color: var(--ink-3); }
.vchat-body { flex: 1; display: flex; flex-direction: column; min-height: 0; } .vchat-body > .chat, .vchat-body { position: relative; }
[data-vv="chat"] { position: relative; } .vc-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.vc-locked { color: var(--tape, #ffbe00); font-weight: 700; margin: 0; }
.vc-controls .btn { display: inline-flex; align-items: center; gap: 6px; } .vc-controls .btn .ic { width: 18px; height: 18px; }
@media (max-width: 760px) { .voice-chat { min-width: 0; } .vchat-btn span { display: none; } }

/* beta-tester panel */
.tester-fab { position: fixed; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 1180; width: 44px; height: 44px; border-radius: 50%; background: #2b8a3e; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.tester-fab .ic { width: 22px; height: 22px; } .tester-fab:hover { transform: scale(1.06); }
.tf-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--red); font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.tester-panel { position: fixed; z-index: 1190; display: flex; flex-direction: column; background: var(--panel); border: 1px solid #2b8a3e; border-radius: 14px; box-shadow: 0 18px 60px rgba(0,0,0,.5); overflow: hidden; }
.tester-panel.size-s { width: 320px; height: 380px; } .tester-panel.size-m { width: 400px; height: 520px; } .tester-panel.size-l { width: 520px; height: 680px; }
.tester-panel { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
.tp-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; background: #2b8a3e; color: #fff; cursor: move; user-select: none; touch-action: none; }
.tp-title { display: flex; align-items: center; gap: 6px; font-weight: 800; flex: 1; } .tp-title .ic { width: 18px; height: 18px; } .tp-meter { font: 600 .72rem 'JetBrains Mono', monospace; opacity: .9; } .tp-head .icon-btn { color: #fff; }
.tp-tabs { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; } .tp-tabs button { padding: 9px 10px; font-weight: 600; font-size: .82rem; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; } .tp-tabs button.on { color: var(--ink); border-bottom-color: #2b8a3e; }
.tp-body { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: .88rem; } .tp-body .field { margin-bottom: 10px; }
.tp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .tp-row select { width: auto; }
.tp-issue, .tp-bug { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--panel-2); }
.tp-bug.fixed { opacity: .7; } .tp-bug.dismissed { opacity: .55; }
.tp-ih { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tp-ih small { color: var(--ink-3); margin-left: auto; font-size: .74rem; }
.tp-tag { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; color: #000; background: var(--c); }
.tp-count { color: var(--red-hi); font-size: .78rem; }
.tp-msg { margin: 6px 0 4px; word-break: break-word; } .tp-where { display: block; font-size: .74rem; color: var(--ink-3); word-break: break-all; margin-bottom: 6px; }
.tp-act { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .tp-act .icon-btn { margin-left: auto; }
.tp-stack { white-space: pre-wrap; font-size: .72rem; max-height: 180px; overflow: auto; background: var(--bg); padding: 8px; border-radius: 6px; margin: 6px 0; }
.tp-img { max-width: 100%; border-radius: 6px; margin: 6px 0; } .tp-bug details summary { cursor: pointer; color: var(--ink-3); font-size: .8rem; margin-bottom: 6px; }
.tp-shot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 12px; } .tp-shot .btn { display: inline-flex; align-items: center; gap: 6px; } .tp-shot .ic { width: 16px; height: 16px; }
.tp-body .check { margin: 6px 0; } .tp-body .set-h { margin: 14px 0 4px; }
@media (max-width: 760px) { .tester-panel { left: 8px !important; right: 8px !important; width: auto !important; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; height: 70dvh !important; } }

/* admin site (/admin) + admin panel extras */
body.admin-site { background: var(--bg); color: var(--ink); min-height: 100vh; }
.adm-loading { display: grid; place-items: center; min-height: 100vh; }
.adm-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at top, rgba(199,0,38,.18), transparent 60%); }
.adm-card { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: grid; gap: 4px; }
.adm-card h1 { margin: 8px 0 0; font-size: 1.5rem; } .adm-logo { width: 56px; height: 56px; border-radius: 14px; }
.adm-card .btn.wide { margin-top: 10px; } .adm-back { margin-top: 10px; text-align: center; }
.adm-shell { min-height: 100vh; display: flex; flex-direction: column; }
.adm-top { display: flex; align-items: center; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 5; }
.adm-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; } .adm-brand img { width: 32px; height: 32px; border-radius: 8px; } .adm-brand span { padding: 2px 8px; border-radius: 99px; background: var(--red); color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.adm-me { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-main { width: min(1100px, 100%); margin: 0 auto; padding: 20px 24px 60px; }
.adm-main .admin-tabs { margin: 0 0 18px; padding: 0; border: 0; flex-wrap: wrap; gap: 6px; } .adm-main .admin-tabs .tab { height: 36px; padding: 0 14px; }
.adm-count { margin-left: 4px; color: var(--red-hi); font-weight: 800; }
.rep-subject { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .rep-subject small { color: var(--ink-3); }
.rep-reason { font-weight: 600; } .rep-mod { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; padding: 8px; border-radius: var(--r-s); background: var(--panel-2); } .rep-mod select { width: auto; max-width: 220px; }
.bug-img { max-width: 320px; border-radius: 8px; margin: 6px 0; display: block; }
.user-row .tag { margin-left: 4px; } .tag.tester { background: #2b8a3e; color: #fff; }
.mini-switch { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 760px) { .adm-top { padding: 10px 14px; } .adm-main { padding: 14px; } .user-row { flex-wrap: wrap; } }

.app-dls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0; }
.app-dl { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--r-l); background: var(--panel); border: 1px solid var(--line); } .app-dl.mine { border-color: var(--red); }
.app-dl small { color: var(--ink-3); } .app-dl .btn { justify-self: start; margin-top: 6px; }

/* the layout always fits the window: columns scroll inside, the page never grows (short screens, e.g. Chromebooks) */
.shell { grid-template-rows: minmax(0, 1fr); }
.shell > * { min-height: 0; }
.main, .side, .members { min-height: 0; overflow: hidden; }
.side { display: flex; flex-direction: column; } .side-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.main { display: flex; flex-direction: column; } .main-body { flex: 1 1 auto; min-height: 0; }
.members { overflow-y: auto; }
/* admin site scrolls like a normal page; long dialogs scroll inside */
html:has(> body.admin-site), body.admin-site { overflow: auto; height: auto; min-height: 100%; }
.modal-body { min-height: 0; flex: 1 1 auto; }

.auth-adding { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; width: min(420px, calc(100vw - 32px)); margin: 0 auto 12px; padding: 10px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: .88rem; }
.menu-h { margin: 6px 8px 2px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }

/* =====================================================================
   Sonion Chat 1.0 — the colours of the logo
   Blurple (#5865f2) is for actions, the onion's orange (#fe643a) only for
   things that want your attention (unread, mentions), peach (#fdce89) for
   warm highlights. Dark: an indigo night. Light: warm paper.
   ===================================================================== */
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend.woff') format('woff'); font-weight: 100 900; font-display: swap; }
:root, :root[data-theme="dark"] {
  --brand-blue: #5865f2; --brand-peach: #fdce89; --brand-orange: #fe643a;
  --brand-grad: linear-gradient(135deg, #5865f2 0%, #5865f2 18%, #fdce89 40%, #fdce89 60%, #fe643a 80%, #fe643a 100%);
  --sea: #12121c; --bg: #12121c; --panel: #1a1a28; --panel-2: #222233; --panel-3: #2d2d42; --line: #2a2a3d;
  --hover: rgba(190, 185, 255, .06); --active: rgba(88, 101, 242, .17);
  --ink: #f1f0f7; --ink-2: #b7b4cb; --ink-3: #8a87a1;
  --accent: #5865f2; --accent-hover: #6a76f5; --accent-text: #a9b0ff; --accent-soft: rgba(88, 101, 242, .18); --on-accent: #ffffff;
  --lantern: #ff7a4f; --lantern-ink: #250b02; --lantern-soft: rgba(254, 100, 58, .15);
  --danger: #e5484d; --danger-text: #ff8d91; --danger-soft: rgba(229, 72, 77, .15);
  --red: var(--accent); --red-hi: var(--accent-text); --red-soft: var(--accent-soft);
  --ok: #4cc38a; --idle: #fdc26b; --dnd: #e5484d; --off: #6f6c86;
  --shadow: 0 18px 40px rgba(5, 5, 14, .5), 0 2px 6px rgba(5, 5, 14, .3);
  --r-s: 9px; --r-m: 13px; --r-l: 18px; --island: 18px; --gap: 8px;
  --rail: 68px;
  --font: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --canvas: radial-gradient(1200px 700px at 8% -10%, rgba(88, 101, 242, .24), transparent 60%), radial-gradient(900px 600px at 105% 110%, rgba(254, 100, 58, .13), transparent 60%), radial-gradient(700px 500px at 60% 55%, rgba(253, 206, 137, .04), transparent 70%), linear-gradient(180deg, #151522, #0f0f18);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --sea: #f2ede7; --bg: #f2ede7; --panel: #fffdfa; --panel-2: #f6f1ec; --panel-3: #ebe4dc; --line: #e4dcd2;
  --hover: rgba(40, 30, 70, .045); --active: rgba(88, 101, 242, .12);
  --ink: #1c1a2b; --ink-2: #4b4660; --ink-3: #767089;
  --accent: #4f5be8; --accent-hover: #414cd6; --accent-text: #3e4ad4; --accent-soft: rgba(79, 91, 232, .12); --on-accent: #ffffff;
  --lantern: #ec5428; --lantern-ink: #ffffff; --lantern-soft: rgba(236, 84, 40, .12);
  --danger: #d23c41; --danger-text: #bd353a; --danger-soft: rgba(210, 60, 65, .1);
  --off: #a39fb3;
  --shadow: 0 18px 40px rgba(50, 35, 60, .14), 0 2px 6px rgba(50, 35, 60, .07);
  --canvas: radial-gradient(1200px 700px at 8% -10%, rgba(88, 101, 242, .17), transparent 60%), radial-gradient(900px 600px at 105% 110%, rgba(254, 100, 58, .14), transparent 60%), radial-gradient(700px 500px at 55% 50%, rgba(253, 206, 137, .18), transparent 70%), linear-gradient(180deg, #f6f1eb, #eee7df);
  color-scheme: light;
}
html, body { background: var(--sea); font-family: var(--font); letter-spacing: -.005em; }
body { background: var(--canvas) fixed, var(--sea); }
a, .linkish, :root[data-theme="light"] a, :root[data-theme="light"] .linkish { color: var(--accent-text); }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline-color: var(--accent-text); }

/* islands */
@media (min-width: 761px) {
  .shell { padding: var(--gap) var(--gap) var(--gap) 0; gap: 0 var(--gap); background: transparent; }
  .shell > .side, .shell > .main, .shell > .members { border-radius: var(--island); overflow: hidden; }
  .shell > .members { overflow-y: auto; }
  .shell.no-members { grid-template-columns: var(--rail) var(--side) 1fr; }
}
.main { background: var(--panel); }
.side, .members { background: var(--panel); }
.side-h, .main-h { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--line); }
.thread-pane { border-left-color: var(--line); }

/* rail: pebbles on the water */
.rail { background: transparent; gap: 10px; padding: 14px 0; }
.rail hr { width: 28px; border-top: 1px solid var(--line); }
.rail-btn { width: 46px; height: 46px; }
.rail-btn .srv-icon, .rail-btn.home, .rail-btn.action { width: 46px; height: 46px; border-radius: 15px !important; }
.srv-icon { border-radius: 30%; background-color: var(--panel-2); }
.rail-btn .pill { display: none; }
.rail-btn.home { background: var(--panel); }
.rail-btn.home.active { background: var(--panel-3); }
:root[data-theme="light"] .rail-btn.home.active img { filter: none; }
.rail-btn.active .srv-icon, .rail-btn.home.active { box-shadow: 0 0 0 2px var(--sea), 0 0 0 4px var(--accent-text); }
.rail-btn:not(.active):hover .srv-icon, .rail-btn.home:not(.active):hover { box-shadow: 0 0 0 2px var(--sea), 0 0 0 4px var(--line); }
.rail-btn.unread:not(.active)::after { content: ''; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--lantern); box-shadow: 0 0 0 3px var(--sea); }
.rail-btn.action { background: var(--panel); color: var(--accent-text); }
.rail-btn.action:hover { background: var(--accent); color: var(--on-accent); }
.rail-btn .badge, .rail-voice { box-shadow: 0 0 0 3px var(--sea); }

/* avatars: soft squircles instead of circles */
.av img, .av-fallback { border-radius: var(--av-r, 32%); }
.vc-user .av, .pf-head .av { border-radius: var(--av-r, 32%); }
.av .st { border-radius: 50%; }
.round { border-radius: 14px; }

/* attention = lantern, action = sea-glass, destructive = coral */
.badge, .tf-badge, .vc-badge { background: var(--lantern); color: var(--lantern-ink); }
.new-line::before { background: var(--lantern); } .new-line span { background: var(--lantern); color: var(--lantern-ink); border-radius: 99px; padding: 1px 8px; }
.msg.mentioned { background: var(--lantern-soft); box-shadow: inset 3px 0 0 var(--lantern); }
.mention { background: var(--accent-soft); color: var(--accent-text); border-radius: 5px; }
.mention:hover { background: var(--accent); color: var(--on-accent); }
@keyframes flash { 0%, 40% { background: var(--lantern-soft); } }
.live, .vp-btn.live, .ctl.live, .tile-act { background: var(--danger); color: #fff; }
.btn-primary, .tab.add, .tag-btn.on, .vm-play, .jump-present, .round.big.ok { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { color: var(--danger-text); box-shadow: inset 0 0 0 1.5px var(--danger-text); }
.btn-danger:hover, .icon-btn.danger:hover, .round.big.danger, .toast-error, .tri button.on.deny, .raid-card .btn-danger.big { background: var(--danger); color: #fff; }
.icon-btn.off, .vc-flags .red, .menu-item.danger, .set-tab.danger, .danger-h, .danger-text, .form-error, .form-msg.err, .msg.failed .md, .fail-note, .comp-row .rec + *, .tp-count { color: var(--danger-text) !important; }
.comp-row .rec { background: var(--danger); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px var(--danger-soft); } }
.menu-item:hover, .menu-item:focus-visible { background: var(--accent); color: var(--on-accent); } .menu-item:hover small { color: rgba(255, 255, 255, .8); }
.menu-item.danger:hover { background: var(--danger); color: #fff !important; }
.tag { background: var(--accent); color: var(--on-accent); border-radius: 99px; padding: 1px 7px; }
.tag.warn { background: var(--idle); color: #2a1f00; } .tag.ok { background: var(--ok); color: #082316; }
.notice { border-left-color: var(--accent-text); }
.btn { border-radius: 11px; font-weight: 600; }
.btn-ghost { background: var(--panel-2); } .btn-ghost:hover { background: var(--panel-3); }
.vp-btn.on { background: var(--accent); color: var(--on-accent); }
.ctl.off { color: var(--danger); }

/* sidebar */
.side-h { height: 56px; }
.server-name { font-weight: 700; }
.nav-item, .ch, .dm-row, .mem, .set-tab, .vc-user { border-radius: 10px; }
.ch.active, .nav-item.active, .dm-row.active, .set-tab.active, .tab.active { background: var(--accent-soft); color: var(--ink); }
.ch.active .ic { color: var(--accent-text); opacity: 1; }
.unread-pip { left: auto; right: 10px; width: 7px; border-radius: 50%; background: var(--lantern); }
.ch.unread .unread-pip { height: 7px; }
.ch.unread:has(.ch-tools:hover) .unread-pip, .ch.active .unread-pip { display: none; }
.cat-btn, .side-label, .mem-h, .set-h { font-weight: 600; letter-spacing: .01em; color: var(--ink-3); }
.me-panel, :root[data-theme="dark"] .me-panel { background: var(--panel-2); margin: 8px; border-radius: 14px; height: 54px; }
.me-btn .av .st, :root[data-theme="dark"] .me-btn .av .st { border-color: var(--panel-2); }
.voice-panel { background: transparent; border-top-color: var(--line); }
.search-fake { background: var(--panel-2); border-radius: 10px; }

/* header */
.main-h { height: 56px; padding: 0 10px 0 18px; }
.h-name { font-weight: 700; }
.h-search input { background: var(--panel-2) !important; border-radius: 99px !important; border-color: transparent !important; padding-left: 12px !important; }

/* messages */
.chan-intro h2 { font-weight: 700; letter-spacing: -.02em; }
.intro-ic { border-radius: 22px; background: var(--accent-soft); color: var(--accent-text); }
.day { font-weight: 500; }
.day span { background: var(--panel-2); border-radius: 99px; padding: 2px 10px; }
.day::before, .day::after { background: transparent; }
.msg { margin-top: 14px; }
.msg:hover { background: var(--hover); }
.author { font-weight: 600; }
.msg-h time { font-weight: 400; }
.md { line-height: 1.45; }
.md strong { font-weight: 700; }
.md code, .md pre { background: var(--panel-2); border-radius: 6px; }
.md blockquote { border-left-color: var(--accent-soft); border-left-width: 3px; }
.react { border-radius: 99px; }
.react.me { background: var(--accent-soft); border-color: var(--accent-text); }
.react.burst { background: linear-gradient(90deg, var(--lantern-soft), transparent); }
.poll-a.mine { border-color: var(--accent-text); }

/* composer: a calm floating pill */
.composer { background: var(--panel-2); border: 1px solid transparent; border-radius: 22px; box-shadow: 0 1px 0 rgba(255, 255, 255, .02); }
.composer:focus-within { border-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.comp-row { padding: 3px 8px; }
.comp-row .send:hover { color: var(--accent-text); }
.reply-bar { border-radius: 18px 18px 0 0; }

/* members */
.mem-name { font-weight: 500; }
.mem.off { opacity: .5; }

/* overlays */
.menu, .popover, .modal { border-radius: 16px; border-color: var(--line); }
.menu-item { border-radius: 9px; }
.modal-back { background: rgba(6, 20, 22, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
:root[data-theme="light"] .modal-back { background: rgba(40, 30, 60, .25); }
.toast { border-radius: 14px; background: var(--panel-3); color: var(--ink); border: 1px solid var(--line); }
.toast-error { border-color: transparent; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea, select { border-radius: 11px; background: var(--panel-2); }
input:focus, textarea:focus, select:focus { border-color: var(--accent-text) !important; }
input[type=range], input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[role=switch]:checked { background: var(--accent); }
.seg input:checked + span, .type:has(input:checked) { border-color: var(--accent-text); background: var(--accent-soft); }
.role-tabs button.on { border-bottom-color: var(--accent-text); }
.settings { background: var(--sea); }
.set-nav { background: transparent; }
.set-main { background: var(--panel); border-radius: var(--island) 0 0 var(--island); }
.set-close .ic { border-width: 1.5px; }
.chat.drop::after { border-color: var(--accent-text); background: rgba(10, 30, 32, .7); }
.react, .role-chip, .mutual { border-radius: 99px; }

/* login wall */
.auth { background: transparent; }
.auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 30px 30px 26px; box-shadow: var(--shadow); }
.auth-card h1 { font-weight: 700; letter-spacing: -.02em; }
.auth-wordmark { opacity: .92; }
.auth-foot { color: var(--ink-3); }

/* phones: the islands meet the screen edges, the sea stays around the rail */
@media (max-width: 760px) {
  .shell { background: transparent; }
  .shell[data-pane="side"] .side { border-radius: var(--island) 0 0 0; margin-top: 6px; }
  .main { border-radius: 0; }
  .set-main { border-radius: 0; }
  .auth-card { padding: 22px 18px; border-radius: 20px; }
}
@media (min-width: 761px) and (max-width: 1100px) { .shell, .shell.no-members { grid-template-columns: var(--rail) var(--side) 1fr; } }
.pc-av .av, .pf-head .av, .aud .av, .call-av, .ev-people .av, .vc-user .av, .tile .av { border-radius: var(--av-r, 32%); }
/* voice stage: a deeper pool inside the island */
.voice-view, :root[data-theme="light"] .voice-view { background: #0a1a1c; }
.voice-chat { background: var(--panel); }
.tile { background: #132a2d; border-radius: 16px; }
.tile.speaking { box-shadow: inset 0 0 0 3px var(--accent-text); }
.vc-user.speaking .av, .aud.speaking .av, .call-av.speaking { box-shadow: 0 0 0 2px var(--accent-text); }
.tile-name { background: rgba(6, 20, 22, .7); border-radius: 99px; padding: 3px 10px; }
.ctl { background: #1d3a3e; } .ctl:hover { background: #26494e; }
.ctl.on { background: #f1f0f7; color: #12121c; } .ctl.off { background: #f1f0f7; color: var(--danger); }
.ctl.danger, .ctl.danger:hover { background: var(--danger); } .ctl.danger:hover { filter: brightness(1.1); }
.ctl.live { background: var(--danger); }
.tile-name .ic { color: var(--danger-text); }

/* desktop app: the window frame is part of the sea — a slim strip on top you can drag the window by */
html.desktop-win32, html.desktop-darwin { --titlebar: 32px; }
html.desktop body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--titlebar, 8px); -webkit-app-region: drag; z-index: 3000; }
html.desktop-win32 body::before { right: 140px; }
html.desktop body::after { content: 'Sonion Chat'; position: fixed; top: 0; left: 0; right: 0; height: var(--titlebar, 0); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 500; color: var(--ink-3); pointer-events: none; z-index: 3000; }
html.desktop-win32 body::after { justify-content: flex-start; padding-left: 16px; }
/* the server list is NOT a window-drag area: Electron swallows scrolling inside drag areas (the list couldn't scroll) */
html.desktop .rail, html.desktop .rail * { -webkit-app-region: no-drag; }
html.desktop .shell { padding-top: var(--titlebar); }
html.desktop .rail { padding-top: 6px; }
html.desktop .settings, html.desktop .auth { top: var(--titlebar); }
html.desktop #toasts { top: calc(var(--titlebar) + 12px); }
html.desktop #raid-banner { top: var(--titlebar); }
html.desktop body.raid .shell { margin-top: calc(var(--raid-h) + var(--titlebar)); height: calc(100dvh - var(--raid-h) - var(--titlebar)); padding-top: var(--gap); }
html.desktop .intro { top: var(--titlebar); }
html.desktop .modal-back, html.desktop .raid-anim { top: var(--titlebar); }
.msg-tools button img.emoji { width: 19px; height: 19px; vertical-align: 0; }
.ac-item .emo img.emoji { width: 20px; height: 20px; vertical-align: -4px; }
.pk-grid img.emoji { width: 28px; height: 28px; }
.md img.emoji:not(.jumbo):not(.custom) { width: 1.3em; height: 1.3em; vertical-align: -.3em; }

/* ---------- Make it yours ---------- */
.shell > .side, .shell > .main, .shell > .members { background: var(--island-bg, var(--panel)); -webkit-backdrop-filter: var(--island-blur, none); backdrop-filter: var(--island-blur, none); }
html.glass .me-panel { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
html.glass .composer { background: color-mix(in srgb, var(--panel-2) 75%, transparent); }
#lx-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--sea); }
.shell, .auth { position: relative; z-index: 1; }
.auth { position: fixed; }
#lx-bg.picture::before { content: ''; position: absolute; inset: calc(var(--blur) * -2); background: var(--pic) center / cover no-repeat; filter: blur(var(--blur)); }
#lx-bg.picture::after { content: ''; position: absolute; inset: 0; background: var(--sea); opacity: var(--dim); }
#lx-bg.aurora::before { content: ''; position: absolute; inset: -30%; background:
  radial-gradient(45% 40% at 25% 30%, var(--g1), transparent 75%),
  radial-gradient(40% 45% at 75% 65%, var(--g2), transparent 75%),
  radial-gradient(35% 35% at 60% 20%, var(--g3), transparent 75%);
  will-change: transform; animation: aurora 38s ease-in-out infinite alternate; }
/* 4.0: no blur filter on the moving layer (the Mac had to blur a screen-and-a-half-sized picture again for every frame; the
   soft gradients already look the same), and it holds still with see-through panels on top (those would have to re-blur
   what's behind them 60 times a second) and while Sonion Chat isn't the window you're using */
html.glass #lx-bg.aurora::before, html.lx-still #lx-bg.aurora::before { animation-play-state: paused; }
@keyframes aurora { 0% { transform: translate(-6%, -4%) rotate(0deg) scale(1); } 50% { transform: translate(5%, 3%) rotate(12deg) scale(1.08); } 100% { transform: translate(-3%, 6%) rotate(-8deg) scale(1.02); } }
html.reduce-motion #lx-bg.aurora::before { animation: none; }
/* chat bubbles */
html.bubbles .msg .md:not(:empty) { display: inline-block; max-width: min(100%, 680px); background: var(--panel-2); padding: 7px 13px 8px; border-radius: 6px 18px 18px 18px; margin-top: 2px; }
html.bubbles .msg.grouped .md:not(:empty) { border-radius: 18px; }
html.bubbles .msg .md:has(> .jumbo-wrap) { background: transparent !important; padding: 0; }
html.bubbles .msg:hover { background: transparent; }
html.bubbles .msg.mentioned .md { box-shadow: inset 0 0 0 1.5px var(--lantern); }
/* your own intro */
.intro.own { background: var(--sea, #000); }
.intro-own { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* settings page */
.cz-preview { margin: 6px 0 8px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.czp-canvas { height: 190px; display: grid; grid-template-columns: 40px 120px 1fr; gap: var(--gap, 8px); padding: var(--gap, 8px) var(--gap, 8px) var(--gap, 8px) 0; background: var(--pv-canvas, var(--canvas)), var(--sea); }
.cz-preview.aurora .czp-canvas { background: radial-gradient(60% 60% at 20% 20%, var(--accent-soft), transparent), radial-gradient(60% 60% at 90% 90%, var(--lantern-soft), transparent), var(--sea); }
.czp-rail { display: grid; align-content: start; justify-items: center; gap: 7px; padding-top: 4px; } .czp-rail i { width: 26px; height: 26px; border-radius: calc(var(--island, 18px) * .5); background: var(--panel); } .czp-rail i.on { box-shadow: 0 0 0 2px var(--sea), 0 0 0 3.5px var(--accent-text); }
.czp-side, .czp-main { background: var(--island-bg, var(--panel)); -webkit-backdrop-filter: var(--island-blur, none); backdrop-filter: var(--island-blur, none); border-radius: var(--island, 18px); padding: 10px; display: grid; align-content: start; gap: 7px; }
.czp-side b { height: 9px; width: 70%; border-radius: 9px; background: var(--ink-3); opacity: .5; } .czp-side i { height: 16px; border-radius: 6px; } .czp-side i.on { background: var(--accent-soft); }
.czp-main { position: relative; font-size: .8rem; } .czp-msg { display: flex; gap: 8px; } .czp-msg b { font-size: .78rem; } .czp-msg p { margin: 1px 0 0; color: var(--ink-2); }
html.bubbles .czp-msg p { background: var(--panel-2); padding: 3px 9px; border-radius: 4px 12px 12px 12px; display: inline-block; } html.bubbles .czp-msg.me p { background: var(--accent-soft); }
.czp-msg .emoji { width: 16px; height: 16px; vertical-align: -3px; }
.czp-av { width: 24px; height: 24px; border-radius: var(--av-r, 32%); background: hsl(196 36% 42%); flex: none; } .czp-msg.me .czp-av { background: var(--accent); }
.czp-comp { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 24px; border-radius: 99px; background: var(--panel-2); }
.cz-pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.cz-pal { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 8px 10px 10px; border-radius: 14px; background: var(--panel-2); border: 1.5px solid transparent; }
.cz-pal:hover { border-color: var(--line); } .cz-pal[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent-soft); }
.cz-pal small { color: var(--ink-3); font-size: .74rem; } .cz-pal b { font-weight: 600; font-size: .88rem; }
.cz-pal-sw { display: flex; margin-bottom: 6px; } .cz-pal-sw i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--panel-2); margin-right: -6px; }
.cz-pal-sw i:nth-child(1) { background: var(--s); } .cz-pal-sw i:nth-child(2) { background: var(--p); } .cz-pal-sw i:nth-child(3) { background: var(--a); }
.cz-row { margin: 10px 0 2px; gap: 8px; } .cz-row .ic { width: 16px; height: 16px; }
.cz-acc { gap: 8px; } .swatch.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent-text); }
.cz-none { background: conic-gradient(from 45deg, #5865f2, #fdce89, #fe643a, #ad4772, #5865f2); }
.cz-sub { padding: 4px 0 6px; } .cz-col { display: grid; gap: 4px; font-size: .8rem; color: var(--ink-2); } .cz-col input { width: 64px; height: 36px; padding: 2px; }
.cz-file { cursor: pointer; } .cz-file .ic { width: 16px; height: 16px; } .cz-file.busy { opacity: .6; pointer-events: none; }
.cz-range { margin-top: 10px; }
.cz-sounds { display: grid; } .cz-sound { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cz-sound > span { flex: 1; display: grid; } .cz-sound small { font-size: .76rem; }
.cz-import { margin-top: 10px; }
.set-content h3 { margin-top: 30px; }
/* iPhone app (WKWebView): follow the keyboard, no rubber-banding */
html.ios-app, html.ios-app body { overscroll-behavior: none; }
html.ios-app .shell { height: var(--vvh, 100dvh); }
html.ios-app body.raid .shell { height: calc(var(--vvh, 100dvh) - var(--raid-h)); }
html.ios-app .settings { height: var(--vvh, 100dvh); bottom: auto; }
html.ios-app * { -webkit-tap-highlight-color: transparent; }
@media (min-width: 761px) {
  html.ios-app .shell { padding: calc(env(safe-area-inset-top) + var(--gap)) calc(env(safe-area-inset-right) + var(--gap)) calc(env(safe-area-inset-bottom) + var(--gap)) env(safe-area-inset-left); }
  html.ios-app .set-nav { padding-top: calc(56px + env(safe-area-inset-top)); } html.ios-app .set-close { top: calc(44px + env(safe-area-inset-top)); }
}

/* ---------- badges ---------- */
.pc-badges { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; width: max-content; max-width: 60%; margin: -40px 12px 6px auto; padding: 4px 6px; border-radius: 12px; background: var(--panel-2); position: relative; }
.pc-badges img, .pf-badges img { width: 22px; height: 22px; display: block; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; padding: 4px 6px; border-radius: 12px; background: var(--panel-2); width: max-content; max-width: 100%; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-bottom: 8px; }
.badge-tile { aspect-ratio: 1; border-radius: 18px; background: var(--panel-2); display: grid; place-items: center; transition: transform .12s, background .12s; }
.badge-tile img { width: 52%; height: 52%; }
.badge-tile:hover { background: var(--panel-3); transform: translateY(-2px); }
.badge-tile.locked img { filter: grayscale(.85); opacity: .45; }
.badge-tile.locked:hover img { filter: none; opacity: .8; }
.badge-custom { margin-top: 26px; }
.badge-pop { padding: 18px; width: 250px; display: grid; justify-items: center; text-align: center; gap: 4px; }
.badge-pop img { width: 56px; height: 56px; margin-bottom: 4px; } .badge-pop h4 { margin: 0; font-size: 1rem; } .badge-pop p { margin: 0; color: var(--ink-2); font-size: .88rem; } .badge-pop small { color: var(--accent-text); font-weight: 600; margin-top: 4px; }
.badge-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.badge-line img { width: 32px; height: 32px; } .badge-line span { flex: 1; display: grid; min-width: 0; } .badge-line small { color: var(--ink-3); font-size: .78rem; }
.badge-line .icon-btn .ic { transform: rotate(180deg); } .badge-line .icon-btn.down .ic { transform: none; }
.badge-save { margin-top: 18px; gap: 10px; align-items: center; }
.badge-earned { position: fixed; z-index: 1200; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 18px; background: var(--panel-3); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer; animation: badge-in .5s cubic-bezier(.2, 1.4, .4, 1); }
.badge-earned img { width: 40px; height: 40px; animation: badge-spin .9s ease-out; } .badge-earned span { display: grid; } .badge-earned small { color: var(--lantern); font-weight: 600; font-size: .74rem; }
.badge-earned.out { opacity: 0; transform: translate(-50%, 10px); transition: .4s; }
@keyframes badge-in { from { transform: translate(-50%, 30px) scale(.8); opacity: 0; } }
@keyframes badge-spin { from { transform: rotateY(180deg) scale(.6); } }
.av video { width: 100%; height: 100%; border-radius: var(--av-r, 32%); object-fit: cover; display: block; pointer-events: none; }
.sens-box { margin: 4px 0 14px; display: grid; gap: 8px; }
.sens-meter { position: relative; height: 22px; display: grid; align-items: center; }
.sens-meter .lvl { position: absolute; left: 0; top: 7px; height: 8px; width: 0; border-radius: 99px; background: var(--lantern); transition: width .05s linear; }
.sens-meter .lvl.open { background: var(--ok); }
.sens-meter::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 8px; border-radius: 99px; background: var(--panel-2); }
.sens-meter input[type=range] { position: relative; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; height: 22px; }
.sens-meter input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 22px; }
.sens-meter input[type=range]::-moz-range-track { background: transparent; }
.sens-meter input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 6px; height: 22px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 2px var(--panel); }
.sens-meter input[type=range]::-moz-range-thumb { width: 6px; height: 22px; border-radius: 3px; background: var(--ink); border: 0; }

.cz-peek { margin: 4px 0 2px; user-select: none; -webkit-user-select: none; touch-action: none; } .cz-peek .ic { width: 16px; height: 16px; }
.settings.peeking { opacity: 0; pointer-events: none; transition: opacity .15s; }
.settings.peeking .cz-peek { pointer-events: auto; }
html.android-app, html.android-app body { overscroll-behavior: none; } html.android-app * { -webkit-tap-highlight-color: transparent; }
.emoji-gone { display: inline-block; font-size: .86rem; font-weight: 500; color: var(--ink-3); background: var(--panel-2); border-radius: 6px; padding: 0 5px; vertical-align: 1px; }
.jumbo-wrap .emoji-gone { font-size: 1rem; }
.rail { position: relative; }
.rail-btn img, .srv-icon { -webkit-user-drag: none; user-select: none; }
.rail-btn.srv { touch-action: pan-y; }
.rail-btn.dragging { opacity: .35; }
.rail-ghost { position: fixed; z-index: 3000; pointer-events: none; transform: scale(1.08); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); transition: transform .12s; }
.rail-drop { position: absolute; left: 14px; right: 14px; height: 3px; border-radius: 3px; background: var(--accent-text); pointer-events: none; }

/* ---------- avatar decorations ---------- */
.av .av-deco, .av img.av-deco { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; display: block; margin: 0; padding: 0; transform: none; max-width: none; pointer-events: none; z-index: 1; border-radius: 0 !important; object-fit: contain; }
.av .st { z-index: 2; }
.av.has-deco { overflow: visible; }

/* ---------- profile card (v1.1.3) ---------- */
.profile-pop { max-height: calc(100vh - 16px); overflow-y: auto; }
.pc2 { width: 340px; }
.pc2 .pc-top { display: flex; align-items: flex-end; gap: 6px; padding: 0 14px; margin-top: -46px; position: relative; }
.pc2 .pc-av { margin: 0; } .pc2 .pc-av .av { box-shadow: 0 0 0 6px var(--panel); }
.pc-bubble { position: relative; margin: 0 0 30px 2px; max-width: 190px; padding: 7px 12px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); font-size: .84rem; text-align: left; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-bubble::before { content: ''; position: absolute; left: -9px; bottom: -6px; width: 9px; height: 9px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); }
.pc-bubble.empty { color: var(--ink-3); } button.pc-bubble:not([disabled]):hover { border-color: var(--accent-text); }
.pc2 .pc-body { padding: 10px 16px 16px; display: grid; gap: 8px; }
.pc2 .pc-body h3 { font-size: 1.35rem; letter-spacing: -.01em; margin: 0; }
.pc-handle { margin: -6px 0 0; color: var(--ink-2); font-size: .9rem; } .pc-handle i { font-style: normal; color: var(--ink-3); padding: 0 3px; }
.pc-badges2 { display: flex; align-items: center; gap: 3px; width: max-content; max-width: 100%; padding: 4px 6px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.pc-badges2 img { width: 22px; height: 22px; }
.pc-more { font-size: .78rem; font-weight: 600; color: var(--ink-2); padding: 0 4px; }
.pc-bio { max-height: 4.6em; overflow: hidden; font-size: .92rem; line-height: 1.5; }
.pc-fullbio, .pc-full { justify-self: start; }
.spot { background: var(--panel-2); border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; }
.spot-h { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--ink-2); } .spot-h .ic { width: 16px; height: 16px; color: #1db954; }
.spot-row { display: flex; gap: 10px; align-items: center; } .spot-art { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: var(--panel-3); }
.spot-text { display: grid; min-width: 0; } .spot-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spot-text small { font-size: .82rem; color: var(--ink-2); }
.spot-bar { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; } .spot-bar small { font-size: .74rem; color: var(--ink-3); }
.spot-bar i { flex: 1; height: 4px; border-radius: 4px; background: var(--panel-3); overflow: hidden; } .spot-bar b { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 4px; }
.pc-actions { background: var(--panel-2); border-radius: 14px; padding: 4px; display: grid; }
.pc-act { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-align: left; color: var(--ink-2); font-weight: 500; }
.pc-act:hover { background: var(--hover); color: var(--ink); } .pc-act span { flex: 1; } .pc-act .ic { width: 18px; height: 18px; }
.pc-act .ic:last-child:not(:first-child) { transform: rotate(-90deg); width: 15px; height: 15px; color: var(--ink-3); }
.pc-act + .pc-act { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; } .pc-act:first-child { border-radius: 10px 10px 0 0; }
.pc-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--off); flex: none; margin: 0 3px; }
.pc-points { display: inline-flex; align-items: center; gap: 4px; font-size: .84rem; color: var(--lantern); } .pc-points img { width: 16px; height: 16px; }
.mem-act { display: flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mem-act .ic { width: 12px; height: 12px; color: #1db954; flex: none; }

/* ---------- 1.1.3: Onions & Shop ---------- */
.link { background: none; border: 0; padding: 0; color: var(--accent-text); cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 6px; }
.link:hover { text-decoration: underline; }
.lxp { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--lantern, #e3a85a); }
.lxp img { width: 18px; height: 18px; }
.lxp.sm img { width: 14px; height: 14px; } .lxp.sm { font-size: .85rem; }
.lxp.lg img { width: 34px; height: 34px; } .lxp.lg { font-size: 1.8rem; }
.shop-free { font-size: .8rem; font-weight: 700; color: var(--accent-text); text-transform: uppercase; letter-spacing: .04em; }
.modal.shop { width: min(860px, 100%); height: min(720px, 90vh); }
.modal.shop > header .shop-bal { padding: 4px 12px; border-radius: 99px; background: var(--panel-2); }
.shop-tabs { display: flex; gap: 4px; padding: 0 18px 8px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.shop-tabs button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: none; border: 0; color: var(--ink-2); padding: 8px 12px; border-radius: var(--r-m); cursor: pointer; font: inherit; }
.shop-tabs button:hover { background: var(--hover); color: var(--ink); }
.shop-tabs button[aria-selected="true"] { background: var(--active); color: var(--ink); font-weight: 600; }
.shop-body { padding-top: 14px; flex: 1; }
.shop-body h4 { margin: 18px 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shop-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-l); text-align: center; transition: transform .12s, border-color .12s; }
.shop-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.shop-card.using { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft) inset; }
.shop-art { height: 90px; display: grid; place-items: center; }
.shop-name { font-size: .95rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-by { color: var(--ink-3); font-size: .78rem; } .shop-by.off { color: var(--accent-text); font-weight: 600; }
.shop-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; }
.shop-status { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--panel-3); color: var(--ink-2); }
.shop-status.s-live { background: var(--accent-soft); color: var(--accent-text); }
.shop-status.s-pending { background: rgba(227, 168, 90, .18); color: #e3a85a; }
.shop-status.s-rejected { background: rgba(217, 83, 79, .18); color: #e0716d; }
.shop-theme { width: 96px; height: 64px; border-radius: 12px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.shop-theme i { position: absolute; background: var(--p); border-radius: 6px; }
.shop-theme i:nth-child(1) { left: 6px; top: 6px; bottom: 6px; width: 12px; }
.shop-theme i:nth-child(2) { left: 22px; top: 6px; bottom: 6px; right: 6px; }
.shop-theme i:nth-child(3) { left: 30px; bottom: 12px; width: 34px; height: 8px; background: var(--a); }
.shop-snd { display: grid; place-items: center; gap: 2px; width: 72px; height: 72px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.shop-snd .ic { width: 28px; height: 28px; }
.shop-me { display: flex; align-items: center; gap: 16px; padding: 12px 16px; margin-bottom: 12px; border-radius: var(--r-l); background: var(--panel-2); }
.shop-me > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.shop-wallet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px; border-radius: var(--r-l); background: var(--panel-2); margin-bottom: 14px; }
.shop-wallet .btn { margin-left: auto; }
.shop-earn { display: flex; flex-direction: column; gap: 10px; }
.shop-rule { display: flex; gap: 12px; align-items: flex-start; }
.shop-rule > span { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.shop-rule > div { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.shop-rule small { color: var(--ink-3); }
.shop-bar { height: 6px; border-radius: 99px; background: var(--panel-3); overflow: hidden; max-width: 260px; }
.shop-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.shop-bonus, .shop-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.shop-bonus li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-m); background: var(--panel-2); }
.shop-bonus li > span:not(.lxp) { flex: 1; } .shop-bonus li.done { opacity: .6; } .shop-bonus li.done span { text-decoration: line-through; }
.shop-log li { display: flex; gap: 10px; align-items: baseline; padding: 4px 2px; border-bottom: 1px solid var(--line); }
.shop-log li span { flex: 1; } .shop-log li small { color: var(--ink-3); } .shop-log b { color: var(--accent-text); } .shop-log b.neg { color: var(--ink-3); }
.shop-kind { margin-bottom: 12px; }
.mk-deco { display: flex; gap: 18px; align-items: center; padding: 14px; border-radius: var(--r-l); background: var(--panel-2); margin-bottom: 10px; }
.mk-deco > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mk-swatch { margin: 8px 0; }
.mk-snds { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-bottom: 6px; }
.mk-snd { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-m); background: var(--panel-2); }
.mk-snd span { flex: 1; }
.mk-go { display: flex; justify-content: flex-end; margin-top: 12px; }
.deco-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.deco-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 6px; width: 84px; border-radius: var(--r-m); background: var(--panel-2); border: 2px solid transparent; cursor: pointer; color: var(--ink-2); }
.deco-opt small { font-size: .72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deco-opt:hover { border-color: var(--line); } .deco-opt.on { border-color: var(--accent); color: var(--ink); }
.deco-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.deco-links .muted { margin-left: auto; }
.adm-shop { display: flex; gap: 12px; align-items: center; padding: 10px; border-bottom: 1px solid var(--line); }
.adm-shop .shop-art { height: 64px; width: 84px; } .adm-shop .shop-theme { width: 76px; height: 50px; }
.adm-shop-i { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-shop-b { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.adm-shop-add { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .adm-shop-add p { flex: 1; margin: 0; }
.rel { padding: 12px; border-radius: var(--r-l); background: var(--panel-2); margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.rel header { display: flex; justify-content: space-between; gap: 10px; }
.rel-text { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; resize: vertical; }
.rel .row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rel-ch { flex: 1; min-width: 160px; }
.conn { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-l); background: var(--panel-2); margin-bottom: 10px; }
.conn > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.conn-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #1db954; color: #fff; }

/* ---------- away mode: a quiet night sky ---------- */
#away-night { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(ellipse at 70% -10%, rgba(80, 110, 190, .35), transparent 60%), linear-gradient(180deg, rgba(6, 10, 28, .9), rgba(12, 20, 48, .86) 60%, rgba(20, 28, 60, .84)); }
html.away #away-night { opacity: 1; }
#away-night .an-stars { position: absolute; inset: 0; background-image:
  radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #dfe8ff, transparent), radial-gradient(1.5px 1.5px at 44% 12%, #fff, transparent),
  radial-gradient(1px 1px at 63% 33%, #fff, transparent), radial-gradient(2px 2px at 81% 22%, #fff8e0, transparent), radial-gradient(1px 1px at 91% 58%, #fff, transparent),
  radial-gradient(1px 1px at 8% 66%, #dfe8ff, transparent), radial-gradient(1.5px 1.5px at 35% 78%, #fff, transparent), radial-gradient(1px 1px at 57% 62%, #fff, transparent),
  radial-gradient(1px 1px at 74% 84%, #dfe8ff, transparent), radial-gradient(1.5px 1.5px at 20% 92%, #fff, transparent), radial-gradient(1px 1px at 50% 48%, #fff, transparent);
  animation: an-twinkle 5s ease-in-out infinite alternate; }
#away-night .an-stars.b { transform: translate(7%, 9%) scale(1.1); animation-delay: -2.5s; opacity: .7; }
#away-night .an-moon { position: absolute; right: 12%; top: 11%; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe8, #f1e2b0 60%, #d9c58c);
  box-shadow: 0 0 60px 18px rgba(255, 240, 190, .25), inset -14px -10px 0 rgba(0, 0, 0, .08); }
#away-night .an-note { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; color: #e8ecff; text-align: center; }
#away-night .an-note b { font-size: 1.4rem; } #away-night .an-note span { opacity: .7; }
@keyframes an-twinkle { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #away-night .an-stars { animation: none; } }
.wn-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.adm-shop-i > .shop-status { align-self: flex-start; }
.conn-err { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin: 10px 0; border-radius: var(--r-m); background: rgba(217, 83, 79, .12); color: var(--ink); font-size: .9rem; }
.conn-err .ic { color: #e0716d; flex: none; } .conn-err span { flex: 1; }
.conn-sub { display: flex; align-items: center; gap: 8px; margin: 22px 0 6px; font-size: 1rem; }
.spot.other .spot-h .ic { color: var(--accent-text); }
.u-bar { display: flex; gap: 10px; align-items: center; } .u-bar .u-q { flex: 1; }
.u-sel { display: flex; gap: 12px; align-items: center; margin: 10px 0 4px; padding: 6px 4px; border-bottom: 1px solid var(--line); } .u-sel .btn { margin-left: auto; }
.user-row .u-box { width: 18px; height: 18px; flex: none; margin-right: 4px; accent-color: var(--accent); }
.tag.twin { background: rgba(217, 83, 79, .18); color: #e0716d; }
.pick.locked { opacity: .55; cursor: not-allowed; } .pick.locked small { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: .75rem; } .pick.locked small .ic { width: 12px; height: 12px; }
.stage-focus { height: min(62vh, 640px); margin-bottom: 14px; } .stage-focus .tile.big { width: 100%; height: 100%; }
/* status dots outside avatars (profile card "Status" button): keep their moon / bar inside the dot.
   Without position: relative the Away moon grew to the size of the whole card ("giant egg") */
.pc-dot { position: relative; overflow: hidden; }
.pc-dot.st-idle::after { display: none; }
.pc-dot.st-idle { -webkit-mask: radial-gradient(circle at 22% 22%, transparent 0 34%, #000 35%); mask: radial-gradient(circle at 22% 22%, transparent 0 34%, #000 35%); }
.pc-dot.st-dnd::after, .pc-dot.st-offline::after { background: var(--panel-2); }
.user-row .u-none { display: inline-block; width: 18px; height: 18px; flex: none; margin-right: 4px; }
.user-row .tag { flex: none !important; display: inline-block; width: auto; vertical-align: middle; }
.user-row .tag { justify-self: start; margin: 2px 0; }
.tag.banned { background: rgba(217, 83, 79, .3); color: #ff9a96; } .tag.off { background: var(--panel-3); color: var(--ink-3); }
.ban-row .ban-ip { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(217, 83, 79, .15); color: #e0716d; flex: none; }
.u-bar { flex-wrap: wrap; }
/* invite card in chat */
.inv-card { display: flex; align-items: center; gap: 14px; max-width: 440px; margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); }
.inv-icon { width: 54px; height: 54px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--accent) center/cover no-repeat; color: #fff; font-weight: 700; font-size: 1rem; }
.inv-icon.sk { background: var(--panel-3); animation: invpulse 1.2s ease-in-out infinite alternate; }
.inv-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.inv-txt small { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.inv-txt b { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-n { font-size: .82rem; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.inv-n .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); display: inline-block; } .inv-n .dot.on { background: var(--ok, #3ba55d); } .inv-n .dot:not(:first-child) { margin-left: 6px; }
.inv-card .sk-line { display: block; height: 12px; width: 60%; border-radius: 6px; background: var(--panel-3); margin: 3px 0; } .inv-card .sk-line.short { width: 40%; }
.inv-card.dead .inv-icon { background: var(--panel-3); color: var(--ink-3); } .inv-card.dead b { font-size: .9rem; color: var(--ink-2); white-space: normal; }
@keyframes invpulse { to { opacity: .5; } }

/* =====================================================================
   Phone app (iOS + Android apps): messenger layout — Chats · Servers · Calls · You,
   full-screen chats with bubbles. Only active with html.ph-on (set by phone.js inside the apps).
   ===================================================================== */
html.ph-on .shell { grid-template-columns: 1fr !important; padding: 0 !important; gap: 0 !important; }
html.ph-on .shell .rail, html.ph-on .shell .side, html.ph-on .shell .members { display: none !important; }
html.ph-on .shell .main { border-radius: 0 !important; margin: 0 !important; border: 0 !important; display: flex !important; }
html.ph-on.ph-list .shell { visibility: hidden; pointer-events: none; }
.ph { display: none; }
html.ph-on.ph-list .ph { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 30; background: var(--sea, var(--bg)); padding-top: env(safe-area-inset-top); }
.ph-screen { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 90px; position: relative; }

/* header */
.ph-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 14px 12px 10px 18px; background: linear-gradient(var(--sea, var(--bg)) 70%, transparent); }
.ph-h h1 { flex: 1; margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-h .ph-ib[data-ph="back"] { margin-left: -10px; }
.ph-h .ph-ib[data-ph="back"] + h1 { font-size: 1.3rem; }
.ph-acts { display: flex; gap: 4px; }
.ph-ib { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: transparent; border: 0; }
.ph-ib:active { background: var(--hover); }
.ph-ib .ic { width: 22px; height: 22px; }

/* rows: avatar · name/time · preview/badge */
.ph-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 9px 16px; background: none; border: 0; color: var(--ink); text-align: left; font: inherit; position: relative; }
.ph-row:active { background: var(--hover); }
.ph-row + .ph-row::before { content: ''; position: absolute; left: 82px; right: 0; top: 0; height: 1px; background: var(--line); opacity: .7; }
.ph-av { flex: none; display: grid; place-items: center; }
.ph-av .av { --s: 52px; }
.ph-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ph-l1, .ph-l2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ph-l1 b { flex: 1; min-width: 0; font-weight: 600; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-l1 time { flex: none; font-size: .78rem; color: var(--ink-3); }
.ph-l2 small { flex: 1; min-width: 0; font-size: .9rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.ph-l2 small .ic { width: 15px; height: 15px; flex: none; }
.ph-row.unread .ph-l1 b { font-weight: 700; } .ph-row.unread .ph-l1 time { color: var(--accent-text, var(--accent)); font-weight: 600; } .ph-row.unread .ph-l2 small { color: var(--ink-2); }
.ph-badge { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent); color: var(--on-accent, #fff); font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.ph-badge.dot { min-width: 12px; width: 12px; height: 12px; padding: 0; }
.ph-tick { color: var(--accent-text, var(--accent)); display: inline-flex; } .ph-tick .ic { width: 16px !important; height: 16px !important; }
.ph-call { color: var(--accent-text, var(--accent)); display: inline-flex; } .ph-call .ic { width: 16px; height: 16px; }
.ph-live { flex: none; font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--red, #e0716d); padding: 2px 6px; border-radius: 5px; }
.ph-on-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #3ba55d); display: inline-block; flex: none; }
.ph-note .ph-av-ic, .ph-set-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft, var(--panel-2)); color: var(--accent-text, var(--accent)); flex: none; }
.ph-av .srv-icon.ph-srv { width: 52px; height: 52px; border-radius: 16px; font-size: 1rem; }
.ph-cat { margin: 18px 18px 4px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ph-banner { height: 110px; margin: 0 16px 6px; border-radius: 18px; background: center/cover no-repeat; }
.ph-ch .ph-ch-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); color: var(--ink-2); flex: none; }
.ph-ch .ph-l1 b { font-size: .98rem; }
.ph-ch + .ph-ch::before { left: 70px; }
.ph-faces { gap: 0 !important; } .ph-faces .av { --s: 22px; margin-right: -5px; box-shadow: 0 0 0 2px var(--sea, var(--bg)); border-radius: 50%; } .ph-faces small { margin-left: 12px; }
.ph-fab { position: fixed; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 3; width: 58px; height: 58px; border-radius: 18px; border: 0; background: var(--accent); color: var(--on-accent, #fff); display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.ph-fab .ic { width: 24px; height: 24px; }
.ph-screen .empty { margin-top: 12vh; }

/* calls */
.ph-incall { margin: 4px 14px 8px; padding: 12px 12px 12px 16px; border-radius: 18px; background: var(--accent-soft, var(--panel-2)); display: flex; align-items: center; gap: 10px; }
.ph-incall > span:first-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: .92rem; } .ph-incall .ic { width: 18px; height: 18px; }
.ph-incall-b { display: flex; gap: 4px; } .ph-incall .ph-ib { width: 40px; height: 40px; background: var(--panel); }
.ph-incall .ph-ib.off { color: var(--red, #e0716d); } .ph-incall .ph-ib.hang { background: var(--red, #e0716d); color: #fff; }
.ph-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px; border: 0; font: 600 .86rem inherit; background: var(--panel-2); color: var(--ink); }
.ph-pill.go { background: var(--accent); color: var(--on-accent, #fff); } .ph-pill .ic { width: 16px; height: 16px; }
.ph-callrow.here { background: var(--accent-soft, transparent); }

/* you */
.ph-me-card { display: grid; justify-items: center; gap: 2px; padding: 8px 16px 18px; text-align: center; }
.ph-me-card h2 { margin: 10px 0 0; font-size: 1.4rem; } .ph-me-card p { margin: 0; }
.ph-status { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font: 500 .9rem inherit; }
.ph-status .ic { width: 16px; height: 16px; }
.ph-group { margin: 10px 14px; border-radius: 18px; background: var(--panel); overflow: hidden; }
.ph-set { padding: 6px 14px; } .ph-set .ph-set-ic { width: 36px; height: 36px; border-radius: 11px; } .ph-set .ph-set-ic .ic { width: 19px; height: 19px; }
.ph-set + .ph-set::before { left: 64px; } .ph-set > .ic { width: 18px; height: 18px; transform: rotate(-90deg); color: var(--ink-3); flex: none; }
.ph-set .ph-t b { font-weight: 500; } .ph-set small { flex: none; }
.ph-set .pc-dot { width: 14px; height: 14px; }
.ph-pts { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--lantern, #f0aa6a); font-size: .9rem; } .ph-pts img { width: 16px; height: 16px; }
.ph-red { color: var(--red-hi, #e0716d); }

/* bottom tabs */
.ph-tabs { flex: none; display: flex; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); }
.ph-tabs button { flex: 1; position: relative; display: grid; justify-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; color: var(--ink-3); font: 600 .72rem inherit; }
.ph-tabs button .ic { width: 24px; height: 24px; padding: 0; box-sizing: content-box; }
.ph-tabs button > .ic, .ph-tabs .ph-me { width: 56px; height: 30px; border-radius: 15px; display: grid; place-items: center; transition: background .15s; }
.ph-tabs button.on { color: var(--ink); } .ph-tabs button.on > .ic, .ph-tabs button.on .ph-me { background: var(--accent-soft, var(--panel-2)); color: var(--accent-text, var(--accent)); }
.ph-tabs .ph-me .av { --s: 24px; }
.ph-dot { position: absolute; top: 0; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent, #fff); font: 700 .66rem/18px inherit; font-style: normal; text-align: center; }
.ph-dot.live { background: var(--red, #e0716d); }

/* ---------- a chat, full screen ---------- */
html.ph-on .main-h { height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 4px; background: var(--panel); box-shadow: 0 1px 0 var(--line); }
html.ph-on .main-h [data-act="show-side"] { display: grid !important; }
html.ph-on .main-h .h-topic, html.ph-on .main-h .h-search { display: none !important; }
html.ph-on .scroller { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.025) 0 2px, transparent 3px) 0 0/34px 34px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.02) 0 1.5px, transparent 2.5px) 0 0/27px 27px; }
html.ph-on .msg { display: flex; flex-direction: column; align-items: flex-start; padding: 1px 14px 1px 52px; margin-top: 10px; background: none !important; box-shadow: none !important; }
html.ph-on .msg.grouped { margin-top: 2px; }
html.ph-on .msg-av { position: absolute; left: 8px; top: 2px; margin: 0; }
html.ph-on .msg .reply-ref + .msg-av { top: 22px; }
html.ph-on .msg-av .av { width: 34px !important; height: 34px !important; }
html.ph-on .msg-h { font-size: .8rem; padding: 0 12px 2px; gap: 6px; }
html.ph-on .msg-h .author { color: var(--rc, var(--accent-text, var(--accent))); }
html.ph-on .msg-h time { font-size: .68rem; }
html.ph-on .gutter-time { display: none; }
html.ph-on .msg-c { max-width: min(82%, 560px); width: fit-content; padding: 7px 12px 8px; border-radius: 4px 18px 18px 18px; background: var(--panel-2); box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
html.ph-on .msg.grouped .msg-c { border-radius: 18px; border-top-left-radius: 6px; }
html.ph-on .msg-c:empty { display: none; }
html.ph-on .msg.mentioned .msg-c { box-shadow: inset 0 0 0 1.5px var(--lantern, #f0aa6a); }
html.ph-on .msg .reply-ref { margin: 0 0 2px 12px; font-size: .78rem; opacity: .85; }
/* your own messages: right side, Sonion Chat green, no name/avatar */
html.ph-on .msg.mine { align-items: flex-end; padding-left: 64px; padding-right: 10px; }
html.ph-on .msg.mine .msg-av, html.ph-on .msg.mine .msg-h { display: none; }
html.ph-on .msg.mine .msg-c { background: var(--accent); color: var(--on-accent, #fff); border-radius: 18px 4px 18px 18px; }
html.ph-on .msg.mine.grouped .msg-c { border-radius: 18px; border-top-right-radius: 6px; }
html.ph-on .msg.mine .md a { color: inherit; text-decoration: underline; }
html.ph-on .msg.mine .md code, html.ph-on .msg.mine .md .icode { background: rgba(0, 0, 0, .18); color: inherit; }
html.ph-on .msg.mine .edited { color: rgba(255, 255, 255, .7); }
html.ph-on .msg.mine .reply-ref { margin-right: 12px; }
/* one-to-one chats: no names or avatars at all, like a messenger */
html.ph-on[data-ck="dm"] .msg:not(.mine) { padding-left: 10px; }
html.ph-on[data-ck="dm"] .msg-av, html.ph-on[data-ck="dm"] .msg:not(.mine) .msg-h .author { display: none; }
html.ph-on[data-ck="dm"] .msg:not(.mine) .msg-h { padding-left: 10px; }
/* day separators and "joined" notes as small centred pills */
html.ph-on .msg.system { justify-content: center; padding: 2px 16px; } html.ph-on .msg.system > .ic, html.ph-on .msg.system > svg { display: none; }
html.ph-on .msg.system p { background: var(--panel); padding: 4px 12px; border-radius: 12px; font-size: .8rem; text-align: center; }
html.ph-on .msg-tools { display: none !important; }
/* composer: a round pill */
html.ph-on .composer-wrap { padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); background: transparent; }
html.ph-on .composer { border-radius: 24px; background: var(--panel); }
html.ph-on .msg.system { flex-direction: row; align-items: center; justify-content: center; margin-top: 6px; padding: 2px 16px; }
html.ph-on .msg.system .sys-ic { display: none; }
html.ph-on .msg.system time { display: none; }
.chat [data-lock-note]::before, .composer-wrap[data-lock-note]::before { content: '🔒 This server is in lockdown. You can still talk because you’re a moderator.'; display: block; font-size: .78rem; color: var(--lantern, #f0aa6a); margin: 0 4px 6px; }

/* ---------- server onboarding ---------- */
.modal.obf-modal { width: min(720px, 100%); height: min(760px, 92vh); }
.obf { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.obf-dots { display: flex; gap: 6px; justify-content: center; padding: 16px 0 6px; } .obf-dots i { width: 28px; height: 5px; border-radius: 3px; background: var(--panel-3); } .obf-dots i.on { background: var(--accent); } .obf-dots i.done { background: var(--accent-soft, var(--panel-3)); }
.obf-body { flex: 1; overflow-y: auto; padding: 10px 30px 20px; }
.obf-banner { height: 140px; border-radius: 18px; background: center/cover no-repeat; margin-bottom: -40px; }
.obf-hero { display: grid; justify-items: center; text-align: center; gap: 10px; padding-top: 20px; }
.obf-hero .srv-icon { box-shadow: 0 0 0 6px var(--panel); }
.obf-hero h1 { margin: 6px 0 0; font-size: 1.7rem; }
.obf-welcome { max-width: 32em; color: var(--ink-2); }
.obf-step { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text, var(--accent)); margin: 10px 0 4px; }
.obf-q h2 { margin: 0 0 4px; font-size: 1.45rem; }
.obf-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 16px; }
.obf-opts.compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 8px; }
.obf-opt { position: relative; display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px 40px 14px 14px; border-radius: 16px; background: var(--panel-2); border: 2px solid transparent; color: var(--ink); font: inherit; cursor: pointer; }
.obf-opt:hover { border-color: var(--line); } .obf-opt.on { border-color: var(--accent); background: var(--accent-soft, var(--panel-2)); }
.obf-opt span:not(.obf-em) { display: grid; gap: 2px; min-width: 0; } .obf-opt small { color: var(--ink-3); font-size: .8rem; }
.obf-em { font-size: 1.6rem; line-height: 1; }
.obf-check { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink-3); display: grid; place-items: center; }
.obf-check .ic { width: 14px; height: 14px; opacity: 0; } .obf-opt.on .obf-check { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); } .obf-opt.on .obf-check .ic { opacity: 1; }
.obf-rules { margin-top: 12px; padding: 16px; border-radius: 14px; background: var(--panel-2); max-height: 42vh; overflow-y: auto; }
.obf-agree { display: flex; gap: 10px; align-items: center; margin-top: 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; } .obf-agree input { width: 20px; height: 20px; accent-color: var(--accent); }
.obf-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); } .obf-foot > span { display: flex; gap: 8px; }
/* Server Guide + Channels & Roles */
.guide { max-width: 820px; margin: 0 auto; padding: 20px 20px 60px; display: grid; gap: 22px; overflow-y: auto; height: 100%; align-content: start; }
.main-body:has(> .guide) { overflow-y: auto; }
.guide h3 { margin: 0 0 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.guide-sign { border-radius: 22px; background: var(--panel-2); overflow: hidden; }
.guide-banner { height: 150px; background: center/cover no-repeat; }
.guide-hi { display: flex; gap: 16px; align-items: flex-start; padding: 20px; } .guide-hi h1 { margin: 0 0 6px; font-size: 1.5rem; }
.guide-todos, .guide-res { display: grid; gap: 8px; } .guide-res { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.guide-todo, .guide-r { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.guide-todo:hover, .guide-r:hover { border-color: var(--accent); }
.guide-todo > span { flex: 1; display: grid; gap: 2px; } .guide-todo small, .guide-r small { color: var(--ink-3); display: inline-flex; align-items: center; gap: 3px; } .guide-todo small .ic, .guide-r .ic { width: 14px; height: 14px; }
.guide-todo > .ic { width: 18px; height: 18px; transform: rotate(-90deg); color: var(--ink-3); }
.gt-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink-3); display: grid; place-items: center; flex: none; } .gt-check .ic { width: 15px; height: 15px; opacity: 0; }
.guide-todo.done .gt-check { background: var(--accent); border-color: var(--accent); color: #fff; } .guide-todo.done .gt-check .ic { opacity: 1; } .guide-todo.done b { text-decoration: line-through; color: var(--ink-3); }
.guide-r { flex-direction: column; align-items: flex-start; gap: 4px; }
.guide-cta { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--accent-soft, var(--panel-2)); } .guide-cta > div { flex: 1; display: grid; gap: 2px; }
/* editor */
.switch-row.big b { font-size: 1.05rem; }
.ob-sec { margin-top: 22px; padding: 16px; border-radius: 16px; background: var(--panel-2); } .ob-sec h3 { margin: 0 0 4px; font-size: 1rem; }
.ob-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.ob-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: .82rem; cursor: pointer; color: var(--ink-2); }
.ob-chip.on { background: var(--accent-soft, var(--panel-3)); border-color: var(--accent); color: var(--ink); } .ob-chip .role-dot { width: 9px; height: 9px; border-radius: 50%; }
.ob-q { margin: 12px 0; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.ob-q-h, .ob-o-h, .ob-row { display: flex; gap: 8px; align-items: center; } .ob-q-h input, .ob-o-h input, .ob-row input, .ob-row select { flex: 1; min-width: 0; }
.ob-title { font-weight: 600; font-size: 1rem; }
.ob-flags { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; font-size: .85rem; color: var(--ink-2); } .ob-flags label { display: inline-flex; align-items: center; gap: 6px; }
.ob-o { margin: 8px 0 8px 14px; padding: 10px 0 2px 12px; border-left: 2px solid var(--line); }
.ob-o-h .ob-em { flex: 0 0 52px; text-align: center; }
.ob-row { margin: 6px 0; }
.ob-rules { width: 100%; margin-top: 8px; }
.ob-save { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 14px 0; background: linear-gradient(transparent, var(--panel) 40%); }
.guide-hi .srv-icon, .obf-hero .srv-icon { width: 64px; height: 64px; flex: none; border-radius: 20px; display: grid; place-items: center; background-color: var(--accent); background-size: cover; background-position: center; color: #fff; font-weight: 700; font-size: 1.2rem; }
.obf-hero .srv-icon { width: 84px; height: 84px; border-radius: 26px; font-size: 1.5rem; }
/* connections */
.conn.twitch .conn-ic { background: #9146ff; } .conn.youtube .conn-ic { background: #ff0033; }
.conn small a { color: var(--accent-text, var(--accent)); }
.conn-ver { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; vertical-align: -3px; } .conn-ver .ic { width: 12px; height: 12px; }
.pc-conns { display: grid; gap: 6px; } .pc-conns h4 { margin: 4px 0 2px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.pc-conn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); color: var(--ink); text-decoration: none; }
.pc-conn:hover { background: var(--panel-3); } .pc-conn > .ic { width: 20px; height: 20px; flex: none; } .pc-conn.twitch > .ic { color: #a970ff; } .pc-conn.youtube > .ic { color: #ff4e45; }
.pc-conn .pc-conn-t { flex: 1; display: grid; min-width: 0; } .pc-conn .pc-conn-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-conn small { color: var(--ink-3); font-size: .76rem; }
.pc-conn-v { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; } .pc-conn-v .ic { width: 12px; height: 12px; }

/* ---------- apps (bots) ---------- */
.tag.bot { background: #5865f2; letter-spacing: .03em; }
.ac-h { margin: 2px 8px 4px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.ac-cmd small { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.ac-app { font-style: normal; font-size: .74rem; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.ac-lx { width: 20px; height: 20px; display: grid; place-items: center; color: var(--red-hi); } .ac-lx .ic { width: 16px; height: 16px; }
.cmd-form { border-bottom: 1px solid var(--line); padding: 10px 12px; display: grid; gap: 10px; }
.cmd-form header { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmd-form header b { font-family: var(--mono); font-size: .9rem; white-space: nowrap; }
.cmd-form header small { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cmd-form header em { font-style: normal; font-size: .74rem; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.cf-subs { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-subs button { padding: 4px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: .82rem; font-family: var(--mono); }
.cf-subs button.on { background: var(--red-soft); border-color: var(--red); color: var(--ink); }
.cf-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cf { display: grid; gap: 4px; font-size: .8rem; }
.cf > span { color: var(--ink-2); font-weight: 700; font-family: var(--mono); }
.cf > span small { display: block; font-family: var(--font); font-weight: 400; color: var(--ink-3); }
.cf .req { color: var(--red-hi); font-style: normal; }
.cf input, .cf select { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); padding: 7px 9px; min-width: 0; }
.cmd-form footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.composer.has-cmd .comp-row textarea { opacity: .5; }
.cmd-wait { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-2); padding: 0 4px 4px; }
.cmd-wait .dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.cmd-wait .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: cw-dot 1.2s infinite ease-in-out; }
.cmd-wait .dots i:nth-child(2) { animation-delay: .15s; } .cmd-wait .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cw-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.reply-ref.ia { cursor: default; } .ia-cmd { font-family: var(--mono); color: #8b95ff !important; }
.msg.ephemeral { background: rgba(88, 101, 242, .08); }
.eph-note { margin: 4px 0 0; font-size: .76rem; color: var(--ink-3); display: flex; align-items: center; gap: 4px; } .eph-note .ic { width: 14px; height: 14px; }
.bot-embed { max-width: 520px; grid-template-columns: 1fr auto; gap: 12px; }
.bot-embed .be-main { display: grid; gap: 6px; min-width: 0; }
.bot-embed .md { font-size: .88rem; color: var(--ink-2); }
.be-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.be-f { grid-column: 1 / -1; min-width: 0; } .be-f.inl { grid-column: auto; }
.be-f b { display: block; font-size: .8rem; color: var(--ink); margin-bottom: 2px; }
.be-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: var(--r-s); }
.be-foot { font-size: .74rem; color: var(--ink-3); }
.bot-embed .embed-img { max-width: 100%; border-radius: var(--r-s); }
.auth-app .aa-top { display: flex; gap: 14px; align-items: center; } .auth-app h3 { margin: 0; }
.aa-perms { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 6px; font-size: .9rem; }
.aa-perms li { display: flex; gap: 8px; align-items: center; } .aa-perms .ic { color: var(--ok); width: 16px; height: 16px; }
.app-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-m); background: var(--panel); margin-bottom: 8px; width: 100%; text-align: left; }
.app-row > div { flex: 1; min-width: 0; display: grid; gap: 2px; } .app-row small { overflow: hidden; text-overflow: ellipsis; }
.app-row.as-btn:hover { background: var(--panel-2); }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.app-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; display: grid; gap: 8px; justify-items: start; align-content: start; }
.app-card p { margin: 0; }
.dev-top { display: flex; gap: 18px; align-items: flex-start; } .dev-top .grow { flex: 1; min-width: 0; }
.tok-box { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; margin: 8px 0; flex-wrap: wrap; }
.tok-box code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .8rem; }
.warn { color: var(--idle); }
.perm-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px; font-size: .86rem; margin: 8px 0; }
.perm-pick label { display: flex; gap: 6px; align-items: center; }
.cmd-list { padding-left: 18px; } .cmd-list li { margin: 4px 0; }
.perm-list { display: grid; gap: 8px; margin: 12px 0; }
.perm-row { display: flex; gap: 12px; align-items: center; background: var(--panel); border-radius: var(--r-m); padding: 12px; }
.perm-row > div:not(.perm-act) { flex: 1; min-width: 0; } .perm-row small { display: block; margin-top: 3px; }
.perm-row .tag { background: var(--panel-3); color: var(--ink-2); } .perm-row .tag.ok { background: var(--ok); color: #fff; } .perm-row .tag.danger { background: var(--red); color: #fff; } .perm-row .tag.warn { background: var(--idle); color: #111; }
.perm-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; flex: none; }
.perm-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .perm-row { flex-wrap: wrap; } .perm-act { width: 100%; justify-content: flex-start; } .dev-top { flex-direction: column; } .bot-embed { grid-template-columns: 1fr; } }
/* drag channels and categories */
.side-body { position: relative; }
.side-ghost { position: fixed; z-index: 3000; pointer-events: none; opacity: .92; background: var(--panel-2); border-radius: var(--r-s); box-shadow: var(--shadow); list-style: none; }
.side-drop { position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: var(--accent-text, var(--red-hi)); pointer-events: none; z-index: 5; }
.side-body .dragging { opacity: .35; }
.side-body [data-drag] { touch-action: pan-y; }
.badge-all { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.badge-all li { display: flex; gap: 12px; align-items: center; } .badge-all img { width: 36px; height: 36px; } .badge-all div { display: grid; }
.srv-icon.md { width: 40px; height: 40px; font-size: .75rem; }
/* bug protection */
#bug-banner { position: fixed; z-index: 89; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: min(92vw, 720px); padding: 6px 14px; border-radius: 999px; background: #2a2200; color: #ffd84d; border: 1px solid #6b5600; box-shadow: var(--shadow); font-size: .82rem; }
#bug-banner small { opacity: .8; } #bug-banner .rb-btn { background: #ffd84d; color: #2a2200; border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: .78rem; }
html.desktop #bug-banner { top: calc(var(--titlebar) + 6px); }
body.raid #bug-banner { top: calc(var(--raid-h) + 8px); }
.bug-note { color: #ffd84d; }
.raid-card.bug { border-color: #6b5600; } .raid-card.bug.on { background: #2a2200; } .raid-dur.grow { flex: 1; min-width: 180px; } .raid-dur.grow input { width: 100%; }
.perm-never { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px; }
.perm-never span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--panel); color: var(--ink-3); font-size: .8rem; } .perm-never .ic { width: 12px; height: 12px; }
/* desktop update pill */
#upd-pill { position: fixed; z-index: 95; right: 14px; top: calc(var(--titlebar, 0px) + 10px); display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); font-size: .8rem; box-shadow: var(--shadow); cursor: default; }
#upd-pill.ready { background: #1f8f4e; border-color: #2fb67a; color: #fff; cursor: pointer; } #upd-pill.ready b { background: rgba(0,0,0,.2); border-radius: 999px; padding: 1px 8px; }
#upd-pill .ic { width: 16px; height: 16px; }
.upd-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink-2); animation: spin .8s linear infinite; }
.intro.wait video, .intro.wait .intro-skip { opacity: 0; }
/* pictures never wider than the message (phones, narrow windows) */
.media-grid { max-width: min(520px, 100%); }
.media-grid.n1 { grid-template-columns: minmax(0, 1fr); }
.media-grid.n2, .media-grid.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.att-img { max-width: 100%; height: auto; }
.msg-c > * { max-width: 100%; }
.msg-c img, .msg-c video, .msg-c iframe { max-width: 100%; }
html.ph-on .msg-c:has(.media-grid, .att-video, .yt, .yt-frame, .embed) { width: min(82%, 560px); }
html.ph-on .att-img img { max-height: 60vh; }
/* touch: a long press opens Sonion Chat's menu, not the phone's text selection / link preview */
html.phone-app .msg, html.phone-app .ch, html.phone-app .cat, html.phone-app .rail-btn, html.phone-app .mem, html.phone-app .ph-row, html.phone-app .friend, html.phone-app .dm-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.phone-app .msg img, html.phone-app .msg a { -webkit-touch-callout: none; }
/* phone apps: menus (long press) slide up from the bottom, with big rows for thumbs */
html.phone-app .menu { left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none; max-height: 70vh; overflow-y: auto; border-radius: 18px; padding: 8px; animation: sheet-up .18s ease-out; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45), var(--shadow); }
html.phone-app .menu .menu-item { padding: 13px 14px; font-size: 1rem; border-radius: 12px; }
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
#bug-banner .bug-x { color: inherit; font-size: 1.1rem; line-height: 1; padding: 0 2px; opacity: .8; }
.lightbox .lb-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.lightbox .lb-bar .btn { background: rgba(0,0,0,.55); color: #fff; } .lightbox .lb-bar .ic { width: 16px; height: 16px; margin-right: 4px; }
.intro-fly { position: fixed; z-index: 1001; pointer-events: none; transform-origin: center; }
/* server tags */
.srv-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 5px 0 3px; height: 18px; border-radius: 5px; background: color-mix(in srgb, var(--tc, #5865f2) 22%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--tc, #5865f2) 55%, transparent); font-size: .68rem; font-weight: 800; letter-spacing: .04em; vertical-align: 2px; line-height: 1; white-space: nowrap; }
.srv-tag .emoji, .srv-tag img { width: 12px; height: 12px; }
.tag.ver { background: #1d9bf0; }
.tag-edit { display: grid; gap: 12px; max-width: 560px; }
.tag-preview { background: var(--panel); border-radius: var(--r-m); padding: 14px; } .tp-row { display: flex; gap: 12px; align-items: center; } .tp-row p { margin: 2px 0 0; }
.tg-badges { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; } .tg-b { aspect-ratio: 1; border-radius: 8px; background: var(--panel); display: grid; place-items: center; border: 2px solid transparent; } .tg-b.on { border-color: var(--accent-text, var(--red)); } .tg-b img { width: 22px; height: 22px; }
.swatch.on { outline: 2px solid var(--ink); outline-offset: 2px; }
/* buttons on bot messages */
.msg-buttons { display: grid; gap: 6px; margin-top: 8px; }
.mb-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 8px; font-size: .86rem; font-weight: 600; color: #fff; background: #4e5058; text-decoration: none; transition: filter .12s, transform .06s; }
.mb-btn:hover { filter: brightness(1.12); } .mb-btn:active { transform: translateY(1px); }
.mb-btn.s1 { background: #5865f2; } .mb-btn.s3 { background: #248046; } .mb-btn.s4 { background: #da373c; } .mb-btn.s5 { background: #4e5058; color: #fff; }
.mb-btn .ic { width: 14px; height: 14px; } .mb-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; } .mb-btn.busy { opacity: .7; pointer-events: none; }
.app-set { display: grid; gap: 12px; max-width: 620px; margin: 10px 0 18px; }
.app-set select, .app-set input:not([type=checkbox]):not([type=color]), .app-set textarea { width: 100%; }
.rw-list { display: grid; gap: 6px; margin-bottom: 6px; } .rw-row { display: flex; align-items: center; gap: 8px; } .rw-row .rw-lv { width: 80px; } .rw-row select { flex: 1; }
/* clips */
.clip-card { margin-top: 6px; max-width: 480px; border-radius: var(--r-m); overflow: hidden; background: #000; }
.clip-card .clip-player { width: 100%; aspect-ratio: 16/9; background: #000; }
.clip-meta { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--panel); font-size: .86rem; } .clip-meta b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clip-meta .ic { width: 16px; height: 16px; color: var(--accent-text, var(--ink-2)); }
.clip-ed video { width: 100%; border-radius: var(--r-s); background: #000; max-height: 46vh; }
.ce-trim { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; } .ce-trim label { display: grid; gap: 4px; font-size: .82rem; } .ce-trim p { grid-column: 1 / -1; margin: 0; }
.clips-modal { width: min(1200px, 96vw); height: min(860px, 92vh); padding: 0; overflow: hidden; position: relative; }
.clips-frame { width: 100%; height: 100%; border: 0; display: block; background: #0b0b0c; }
.clips-close { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.5); color: #fff; }

/* ---------- 1-on-1 DM: profile panel instead of a member list ---------- */
.members.dm-side { padding: 0; }
.dm-pro { position: relative; display: flex; flex-direction: column; min-height: 100%; background: color-mix(in srgb, var(--accent, var(--panel)) 10%, var(--panel)); }
.dp-banner { position: relative; height: 120px; flex: none; background: var(--accent, #5865f2) center/cover; }
.dp-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; }
.dp-tool { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; backdrop-filter: blur(6px); }
.dp-tool:hover:not(:disabled) { background: rgba(0,0,0,.75); } .dp-tool .ic { width: 18px; height: 18px; }
.dp-av { margin: -48px 0 0 16px; width: max-content; border-radius: 50%; padding: 6px; background: color-mix(in srgb, var(--accent, var(--panel)) 10%, var(--panel)); cursor: pointer; position: relative; z-index: 1; }
.dp-bubble { position: absolute; top: 132px; left: 112px; right: 14px; margin: 0; background: var(--panel-2); border-radius: 14px; padding: 6px 10px; font-size: .82rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-body { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.dp-body h3 { margin: 0; font-size: 1.25rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dp-handle { margin: -8px 0 0; color: var(--ink-2); font-size: .88rem; } .dp-handle i { font-style: normal; margin: 0 3px; }
.dp-badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dp-badges img { width: 22px; height: 22px; } .dp-badges .pc-more { font-size: .72rem; }
.dp-bio { font-size: .88rem; max-height: 9.5em; overflow: auto; }
.dp-card { background: rgba(255,255,255,.04); border-radius: 10px; padding: 4px; }
:root[data-theme="light"] .dp-card { background: rgba(0,0,0,.04); }
.dp-mut summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: .9rem; font-weight: 600; }
.dp-mut summary::-webkit-details-marker { display: none; }
.dp-mut summary:hover { background: rgba(255,255,255,.05); } .dp-mut summary span { flex: 1; }
.dp-mut summary .ic:last-child { transition: transform .15s; opacity: .7; } .dp-mut[open] summary .ic:last-child { transform: rotate(180deg); }
.dp-mut .mutual { display: flex; width: 100%; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 10px; border-radius: 8px; text-align: left; color: inherit; cursor: pointer; font: inherit; font-size: .88rem; }
.dp-mut .mutual:hover { background: rgba(255,255,255,.05); }
.dp-none { margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px; color: var(--ink-3); font-size: .88rem; }
.dp-sec h4 { margin: 0 0 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); } .dp-sec p { margin: 0; font-size: .88rem; }
.dm-pro .pc-conns h4 { margin: 0 0 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.dm-pro .dp-full { margin: auto 12px 14px; flex: none; width: auto; }
/* dragging channels/categories/servers never selects text */
.side [data-drag], .side [data-drag] *, .rail [data-drag], .rail-btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.no-select, body.no-select * { -webkit-user-select: none !important; user-select: none !important; cursor: grabbing !important; }
.radio-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m, 10px); margin-top: 8px; cursor: pointer; background: var(--panel-2); }
.radio-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); }
.radio-card input { margin-top: 3px; accent-color: var(--accent); } .radio-card span { display: grid; gap: 2px; } .radio-card small { font-size: .82rem; }
/* Admin → Images */
.img-flags { display: grid; gap: 10px; margin-top: 10px; }
.img-flag { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-m, 10px); background: var(--panel-2); }
.img-thumb { width: 120px; height: 80px; border: 0; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #000; }
.img-thumb img, .img-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s; }
.img-thumb.blur img, .img-thumb.blur video { filter: blur(18px) saturate(.6); }
.img-info { display: grid; gap: 3px; min-width: 0; } .img-info .tag { justify-self: start; }
.pick-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; }
.warn-text { color: #f0b232; }
@media (max-width: 640px) { .img-flag { grid-template-columns: 90px 1fr; } .img-flag .row-actions { grid-column: 1 / -1; } .img-thumb { width: 90px; height: 64px; } }
.img-info .tag { font-size: .7rem; font-weight: 800; padding: 1px 7px; border-radius: 6px; }
.img-info .tag.danger { background: #e4173f; color: #fff; } .img-info .tag.warn { background: #f0b232; color: #1a1300; }
.sp-load { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 16px; border: 0; border-radius: 12px; background: #1db954; color: #04140a; font: inherit; font-weight: 700; cursor: pointer; }
.sp-load:hover { filter: brightness(1.08); } .sp-load .ic { width: 22px; height: 22px; }
.av img[hidden] { display: none; }

/* the DM profile panel: 20% wider, a bit bigger everything (like Discord's) */
.shell.dm-wide { --members: 300px; }
.dm-pro { background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #5865f2) 26%, var(--panel)) 0, var(--panel) 340px); }
.dp-banner { height: 132px; }
.dp-av { margin-top: -56px; background: color-mix(in srgb, var(--accent, #5865f2) 22%, var(--panel)); }
.dp-bubble { top: 144px; left: 124px; }
.dp-body h3 { font-size: 1.4rem; }
.dp-badges { background: rgba(0,0,0,.22); border-radius: 10px; padding: 5px 7px; width: max-content; max-width: 100%; }
.dp-badges img { width: 24px; height: 24px; }
.dp-sec { background: rgba(255,255,255,.04); border-radius: 10px; padding: 10px 12px; }
:root[data-theme="light"] .dp-sec, :root[data-theme="light"] .dp-badges { background: rgba(0,0,0,.05); }
.dm-pro .pc-conns { background: rgba(255,255,255,.04); border-radius: 10px; padding: 10px 12px; }
/* giving badges (Admin → Users → Badges) and making custom ones (Admin → Badges) */
.give-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.gb { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel-2); color: inherit; font: inherit; font-size: .86rem; font-weight: 600; text-align: left; cursor: pointer; }
.gb img { width: 26px; height: 26px; object-fit: contain; flex: none; } .gb span { flex: 1; min-width: 0; }
.gb i { display: none; color: var(--accent); } .gb.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); } .gb.on i { display: block; }
.cb-new { display: flex; gap: 14px; align-items: flex-start; }
.cb-pic { width: 88px; height: 88px; flex: none; border-radius: 14px; border: 2px dashed var(--line); display: grid; place-items: center; cursor: pointer; overflow: hidden; background: var(--panel-2); }
.cb-pic span { display: grid; justify-items: center; gap: 4px; font-size: .78rem; color: var(--ink-2); } .cb-pic img { width: 100%; height: 100%; object-fit: contain; }
.cb-list { display: grid; gap: 8px; } .cb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); }
.cb-row img { width: 32px; height: 32px; object-fit: contain; } .cb-row > div { flex: 1; display: grid; min-width: 0; }
/* profile links (Settings → Connections, and on profiles) */
.lk-ic { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font: 800 .74rem/1 system-ui, sans-serif; color: #fff; background: #868e96; flex: none; text-transform: uppercase; }
.lk-kick { background: #53fc18; color: #0b0e0f; } .lk-soundcloud { background: #ff5500; } .lk-tiktok { background: #111; box-shadow: inset 0 0 0 1.5px #25f4ee; }
.lk-instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); } .lk-x { background: #000; box-shadow: inset 0 0 0 1px #444; } .lk-bluesky { background: #1185fe; }
.lk-github { background: #24292f; } .lk-reddit { background: #ff4500; } .lk-steam { background: #1b2838; } .lk-roblox { background: #393b3d; } .lk-spotify { background: #1db954; color: #04140a; } .lk-website { background: #5c7cfa; } .lk-lastfm { background: #d51007; }
.link-rows { display: grid; gap: 6px; margin-bottom: 10px; }
.link-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--panel-2); }
.link-row > b { width: 100px; flex: none; font-size: .9rem; } .link-row .lk-in { flex: 1; min-width: 0; }
.link-row .lk-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-eye { display: flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--ink-2); }
.conn-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .conn-add .lfm-name { flex: 1; min-width: 160px; }
.pc-conn .lk-ic { width: 20px; height: 20px; }
@media (max-width: 560px) { .link-row { flex-wrap: wrap; } .link-row > b { width: auto; flex: 1; } .link-row .lk-in { flex-basis: 100%; } }

/* the call buttons always fit: smaller, then wrapping, when the call view is narrow (e.g. with its chat open) */
.vc-area, .voice-view { min-width: 0; }
@media (max-width: 1400px) { .vc-controls { gap: 8px; } .vc-controls .ctl { width: 46px; height: 46px; } }

/* moving profile pictures while pointing: on top of the still picture, same size, never changes the layout */
.av { isolation: isolate; }
.av video.av-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; z-index: 1; transition: opacity .12s; }
.av:has(> img) video.av-hover { border-radius: var(--av-r, 50%); }
.av > video:not(.av-hover) { width: 100%; height: 100%; object-fit: cover; border-radius: var(--av-r, 50%); display: block; }
.av .st, .av .av-deco { z-index: 2; }
/* talking: a green ring around the picture in profile popups, the profile page and the DM side panel too */
.pc-av .av, .pf-head .av, .dp-av .av { transition: box-shadow .12s; }
.pc-av .av.speaking { box-shadow: 0 0 0 6px var(--panel), 0 0 0 9px var(--ok); }
.pf-head .av.speaking { box-shadow: 0 0 0 7px var(--panel), 0 0 0 10px var(--ok); }
.dp-av .av.speaking { box-shadow: 0 0 0 3px var(--ok); border-radius: var(--av-r, 50%); }
.vc-user.speaking .av, .aud.speaking .av { border-radius: var(--av-r, 50%); }
/* the badge collection */
.badge-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
.badge-tile { position: relative; overflow: hidden; }
.badge-tile img { width: 64%; height: 64%; }
.badge-tile.tier-5 { background: linear-gradient(135deg, rgba(255,95,109,.25), rgba(63,169,255,.25), rgba(182,92,255,.25)); }
.badge-pr { position: absolute; left: 10px; right: 10px; bottom: 7px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.1); }
.badge-pr::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--accent-text, #4fc2a6); }
h3 .muted { font-weight: 500; font-size: .85em; margin-left: 4px; }
.badge-tier { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.badge-pop.tier-1 .badge-tier { color: #d18a52; } .badge-pop.tier-2 .badge-tier { color: #aab6bf; } .badge-pop.tier-3 .badge-tier { color: #f2b322; } .badge-pop.tier-4 .badge-tier { color: #58c9ff; }
.badge-pop.tier-5 .badge-tier { background: linear-gradient(90deg, #ff5f6d, #ffc371, #47e891, #3fa9ff, #b65cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bh-goal { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; margin: 4px 0 16px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(120deg, rgba(255,95,109,.16), rgba(255,195,113,.12) 30%, rgba(71,232,145,.12) 55%, rgba(63,169,255,.14) 78%, rgba(182,92,255,.18)); border: 1px solid rgba(255,255,255,.08); }
.bh-goal img { width: 72px; height: 72px; filter: grayscale(.6) brightness(.9); transition: filter .2s, transform .2s; }
.bh-goal.done img { filter: drop-shadow(0 0 10px rgba(255,195,113,.6)); }
.bh-goal:hover img { transform: rotate(-6deg) scale(1.05); filter: none; }
.bh-goal small { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 700; color: var(--ink-3); }
.bh-goal b { display: block; font-size: 1.15rem; } .bh-goal span { display: block; color: var(--ink-2); font-size: .86rem; margin: 2px 0 8px; }
.bh-goal strong { font-size: 1.6rem; font-weight: 800; } .bh-goal strong small { display: inline; font-size: .9rem; letter-spacing: 0; color: var(--ink-3); }
.bh-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.bh-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5f6d, #ffc371, #47e891, #3fa9ff, #b65cff); background-size: 300px 100%; }
@media (max-width: 520px) { .bh-goal { grid-template-columns: 52px 1fr; } .bh-goal img { width: 52px; height: 52px; } .bh-goal strong { display: none; } }
.pc-badges .more-b, .pf-badges .more-b { font-size: .72rem; font-weight: 700; color: var(--ink-2); align-self: center; padding: 0 3px; }
.badge-earned .be-stack { display: flex; } .badge-earned .be-stack img + img { margin-left: -18px; }
.badge-earned.legendary { background: linear-gradient(120deg, #3a1b2c, #1c2c4a 50%, #2d1b4a); box-shadow: 0 0 0 2px rgba(255,195,113,.6), 0 12px 40px rgba(182,92,255,.4); }
/* players for links (YouTube, Spotify, TikTok, Twitch...): a light card first, the real player when pressed */
.embed.has-player { max-width: 560px; width: 100%; }
.pl-card { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 8px; border: 0; border-radius: 10px; cursor: pointer; color: #fff; font: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 70%, #000), color-mix(in srgb, var(--pc) 35%, #000)); background-size: cover; background-position: center; aspect-ratio: 16/9; overflow: hidden; }
.pl-card.has-thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); }
.pl-card.audio { aspect-ratio: auto; height: 64px; justify-content: flex-start; padding: 0 16px; }
.pl-card.tall { aspect-ratio: 4/3; max-width: 360px; }
.pl-btn { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); box-shadow: 0 6px 24px rgba(0,0,0,.4); transition: transform .12s; }
.pl-card.audio .pl-btn { width: 40px; height: 40px; }
.pl-btn svg { width: 46%; height: 46%; margin-left: 3px; color: #fff; }
.pl-card:hover .pl-btn { transform: scale(1.08); }
.pl-name { position: absolute; left: 12px; bottom: 10px; font-weight: 700; font-size: .85rem; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.pl-card.audio .pl-name { position: static; font-size: .95rem; }
.pl-frame { display: block; width: 100%; border: 0; border-radius: 10px; margin-top: 8px; background: #000; }
.embed.has-player .pl-frame[style*="9/16"] { max-width: 340px; }
.pl-file { display: block; width: 100%; max-width: 560px; margin-top: 8px; border-radius: 10px; }
html.ph-on .msg-c:has(.pl-card, .pl-frame) { width: min(82%, 560px); }
/* fitted call grid (voice.js fitTiles): the columns come from the script, the tiles stay 16:9 and never scroll away */
.voice-view .tiles.fitted { justify-content: center; align-content: center; min-height: 0; overflow: hidden; max-width: none; }
.voice-view .tiles.fitted .tile { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
.voice-view .tiles.fitted .tile .av { --s: clamp(40px, 34cqh, 120px) !important; }
.voice-view .tiles.fitted .tile { container-type: size; }

/* brand logos (connections, link players): the real logo, white on the brand colour */
.brand-chip { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--bc, #555); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.brand-chip .brand-ic, .brand-chip .ic { width: 17px; height: 17px; }
.brand-chip.brand-kick { color: #000; } .brand-chip.brand-tiktok, .brand-chip.brand-x, .brand-chip.brand-roblox, .brand-chip.brand-tidal, .brand-chip.brand-github, .brand-chip.brand-steam { background: #0b0b0d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.brand-chip.brand-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.link-row .brand-chip { width: 26px; height: 26px; border-radius: 8px; }

/* 1.0: the home button shows the full-colour Sonion Chat logo, filling the button */
.rail-btn.home { overflow: hidden; background: transparent; }
.rail-btn.home img, :root[data-theme="light"] .rail-btn.home.active img { width: 100%; height: 100%; object-fit: cover; filter: none; border-radius: inherit; }
.rail-btn.home.active { background: transparent; }