/* Login / register — Discord-style card on a dark stage. Tokens from global.css. */
.auth {
  flex: 1; min-height: 0; display: grid; place-items: center; padding: 24px; overflow-y: auto;
  background:
    radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    var(--bg-rail);
}
.app > .auth { height: 100%; }
.auth-card {
  width: min(480px, 100%); display: flex; flex-direction: column; gap: 20px; padding: 32px;
  border-radius: 5px; background: var(--bg-chat); box-shadow: var(--shadow-float);
}
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.auth-mark { font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 4px; background: var(--accent); color: #fff; }
.auth-card h1 { font-size: 24px; font-weight: 600; line-height: 30px; color: var(--text-strong); text-align: center; }
.auth-sub { color: var(--text-2); font-size: 16px; line-height: 20px; text-align: center; margin-top: -12px; }
.auth-card label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-2); }
.auth-card label > span:first-child { display: flex; align-items: center; gap: 4px; }
.req { color: var(--danger); font-weight: 700; }
.auth-card input {
  height: 40px; padding: 0 10px; border-radius: 3px; background: var(--bg-rail); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text);
  border: 0; outline: none;
}
.auth-card input::placeholder { color: var(--text-3); }
.auth-card input[aria-invalid='true'] { box-shadow: inset 0 0 0 1px var(--danger); }
.auth-hint, .auth-optional { font-weight: 400; color: var(--text-3); font-size: 12px; text-transform: none; letter-spacing: 0; }
.auth-pass { position: relative; display: flex; }
.auth-pass input { flex: 1; padding-right: 40px; }
.auth-pass button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 3px; display: grid; place-items: center; color: var(--text-3); }
.auth-pass button:hover { color: var(--text); }
.auth-error { padding: 10px 12px; border-radius: 4px; background: rgba(242, 63, 67, 0.12); color: #fa777c; font-size: 14px; }
.btn.auth-submit { width: 100%; height: 44px; min-height: 44px; font-size: 16px; font-weight: 500; gap: 8px; }
.auth-switch { font-size: 14px; color: var(--text-3); margin-top: -12px; }
.auth-switch button { color: var(--link); font-weight: 500; }
.auth-switch button:hover { text-decoration: underline; }
.spin { animation: auth-spin 0.8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* sign-out in the profile card */
.btn.wide.logout { margin-top: 6px; color: #fa777c; }
.btn.wide.logout:hover { background: rgba(242, 63, 67, 0.12); text-decoration: none; }
/* YH Talk — Discord-style dark theme. Tokens, reset, avatar, buttons. Layout CSS lives in nav.css / chat.css / voice.css. */
:root {
  --bg-rail: #1e1f22;
  --bg-sidebar: #2b2d31;
  --bg-chat: #313338;
  --bg-elev: #383a40;
  --bg-floating: #111214;
  --bg-panel: #232428;
  --bg-hover: rgba(78, 80, 88, 0.3);
  --bg-active: rgba(78, 80, 88, 0.6);
  --bg-message-hover: rgba(2, 2, 2, 0.06);
  --line: rgba(255, 255, 255, 0.06);
  --text: #dbdee1;
  --text-2: #b5bac1;
  --text-3: #949ba4;
  --text-strong: #f2f3f5;
  --link: #00a8fc;
  --accent: #ff7a45;
  --accent-ink: #1a1007;
  --danger: #f23f43;
  --online: #23a55a;
  --idle: #f0b232;
  --dnd: #f23f43;
  --radius: 8px;
  --titlebar: 22px;
  --shadow-float: 0 8px 16px rgba(0, 0, 0, 0.24);
  --shadow-header: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
  --font: 'Noto Sans Thai', 'Leelawadee UI', 'IBM Plex Sans Thai', 'gg sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.375;
  color: var(--text);
  background: var(--bg-rail);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; background: none; border: 0; outline: none; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible { outline: none; }

/* Discord scrollbar: 16px, thumb inset by a transparent border */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-thumb { background: var(--bg-rail); border: 4px solid transparent; background-clip: padding-box; border-radius: 8px; min-height: 40px; }
::-webkit-scrollbar-track { background: var(--bg-panel); border: 4px solid transparent; background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-corner { background: transparent; }
.thin::-webkit-scrollbar, .sidebar-scroll::-webkit-scrollbar, .members::-webkit-scrollbar, .rail::-webkit-scrollbar { width: 8px; }
.thin::-webkit-scrollbar-track, .sidebar-scroll::-webkit-scrollbar-track, .members::-webkit-scrollbar-track, .rail::-webkit-scrollbar-track { background: transparent; }
.thin::-webkit-scrollbar-thumb, .sidebar-scroll::-webkit-scrollbar-thumb, .members::-webkit-scrollbar-thumb, .rail::-webkit-scrollbar-thumb { background: var(--bg-rail); border-width: 2px; }
.sidebar-scroll:not(:hover)::-webkit-scrollbar-thumb, .members:not(:hover)::-webkit-scrollbar-thumb { background: transparent; }
.rail::-webkit-scrollbar { width: 0; }
.muted { color: var(--text-3); }

.app { height: 100%; display: flex; flex-direction: column; }
.workspace { flex: 1; display: flex; min-height: 0; }

/* Avatar */
.avatar { position: relative; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: rgba(0, 0, 0, 0.72); }
.presence { position: absolute; right: -2px; bottom: -2px; width: 34%; height: 34%; border-radius: 50%; border: 3px solid var(--bg-sidebar); }
.presence.online { background: var(--online); }
.presence.idle { background: var(--idle); }
.presence.dnd { background: var(--dnd); }
.presence.offline { background: var(--text-3); }
.message .presence { display: none; }

/* ── shared bits ─────────────────────────────────────────── */
.red { color: var(--danger); }
.ok { color: var(--online); }
.warn { color: var(--idle); }
.bad { color: var(--danger); }
.mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 38px; min-height: 38px; padding: 2px 16px;
  border-radius: 3px; font-weight: 500; font-size: 14px; line-height: 16px; white-space: nowrap; transition: background 0.17s ease, color 0.17s ease, filter 0.17s ease;
}
.btn.sm { height: 32px; min-height: 32px; padding: 0 16px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { filter: brightness(0.9); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover:not(:disabled) { filter: brightness(0.9); }
.btn.ghost { color: var(--text); }
.btn.ghost:hover:not(:disabled) { text-decoration: underline; }
.btn.ghost-solid { background: #4e5058; color: #fff; }
.btn.ghost-solid:hover:not(:disabled) { background: #6d6f78; }
.btn.wide { width: 100%; margin-top: 12px; }
.live { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; line-height: 14px; padding: 0 5px; border-radius: 4px; background: var(--danger); color: #fff; text-transform: uppercase; }
button.avatar.clickable { border: 0; cursor: pointer; }
.avatar.speaking { box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 0 4px var(--online); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.author { font-weight: 700; font-size: 15px; }
.author:hover { text-decoration: underline; }
/* Navigation: title bar, server rail, channel sidebar, voice roster/panel, user panel. */

/* ── Title bar — draggable region, buttons opt out ────────── */
.titlebar {
  height: var(--titlebar); flex: none; display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-rail); -webkit-app-region: drag; user-select: none;
}
.titlebar-brand { display: flex; align-items: center; padding-left: 8px; font-size: 12px; font-weight: 500; line-height: 1; color: var(--text-3); }
.titlebar-brand.mac { padding-left: 78px; }
.titlebar-controls { display: flex; height: 100%; -webkit-app-region: no-drag; }
.titlebar-controls button { width: 28px; height: 100%; display: grid; place-items: center; color: var(--text-3); }
.titlebar-controls button:hover { background: var(--bg-hover); color: var(--text); }
.titlebar-controls .close:hover { background: var(--danger); color: #fff; }

/* ── Server rail ─────────────────────────────────────────── */
.rail {
  width: 72px; flex: none; background: var(--bg-rail); display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 12px 0; overflow-y: auto;
}
.rail-item { position: relative; width: 48px; height: 48px; flex: none; }
.rail-pill {
  position: absolute; left: -12px; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0;
  background: var(--text-strong); transform: translateY(-50%); transition: height 0.15s ease;
}
.rail-item.has-unread .rail-pill { height: 8px; }
.rail-item:hover .rail-pill { height: 20px; }
.rail-item.active .rail-pill { height: 40px; }
.rail-icon {
  width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: 16px; background: var(--bg-sidebar); color: var(--text);
  transition: border-radius 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rail-item:hover .rail-icon, .rail-item.active .rail-icon { border-radius: 16px; background: var(--server); color: #fff; }
.rail-add { color: var(--online); }
.rail-add:hover { border-radius: 16px; background: var(--online); color: #fff; }
.rail-sep { width: 32px; height: 2px; flex: none; border-radius: 1px; background: var(--bg-sidebar); }
.badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 700; line-height: 1; background: var(--danger); color: #fff;
}
.rail-badge {
  position: absolute; right: -4px; bottom: -4px; min-width: 24px; height: 24px; border-radius: 12px;
  border: 4px solid var(--bg-rail); pointer-events: none;
}
/* CSS-only tooltip. position: fixed with auto insets = static position (top-left of .rail-item), so it escapes the
   rail's overflow clip; translate moves it 12px to the right of the icon, vertically centred. */
.rail-tip {
  position: fixed; display: none; z-index: 40; pointer-events: none; width: max-content; max-width: 220px;
  padding: 8px 12px; border-radius: 4px; background: var(--bg-floating); color: var(--text-strong);
  font-size: 14px; font-weight: 600; line-height: 1.25; box-shadow: var(--shadow-float);
  transform: translate(60px, calc(24px - 50%));
}
.rail-tip::before {
  content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: var(--bg-floating);
}
.rail-item:hover .rail-tip { display: block; }

/* ── Channel sidebar ─────────────────────────────────────── */
.sidebar { width: 240px; flex: none; background: var(--bg-sidebar); display: flex; flex-direction: column; border-top-left-radius: var(--radius); }
.server-menu { position: relative; z-index: 2; flex: none; }
.sidebar-header {
  width: 100%; height: 48px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 16px; border-top-left-radius: var(--radius); font-size: 16px; font-weight: 600; color: var(--text-strong);
  text-align: left; box-shadow: var(--shadow-header); transition: background 0.1s ease;
}
.sidebar-header > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-header svg { flex: none; color: var(--text-2); }
.sidebar-header:hover { background: var(--bg-hover); }
.menu {
  position: absolute; z-index: 30; top: 56px; left: 10px; width: 220px; padding: 6px 8px; border-radius: 4px;
  background: var(--bg-floating); box-shadow: var(--shadow-float); display: flex; flex-direction: column;
}
.menu button {
  height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px;
  border-radius: 2px; font-size: 14px; font-weight: 500; color: var(--text-2); text-align: left;
}
.menu button:hover { background: var(--accent); color: #fff; }
.menu button.accent { color: var(--accent); }
.menu button.accent:hover { color: #fff; }
.menu button.danger { color: var(--danger); }
.menu button.danger:hover { background: var(--danger); color: #fff; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

.sidebar-scroll { flex: 1; overflow-y: auto; padding: 0 8px 16px 0; }

/* categories */
.category h3 { height: 40px; display: flex; align-items: center; padding: 16px 8px 0 6px; }
.cat-toggle {
  flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); text-align: left;
}
.cat-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-toggle svg { flex: none; transition: transform 0.15s ease; }
.category.collapsed .cat-toggle svg { transform: rotate(-90deg); }
.cat-add { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: var(--text-3); opacity: 0; }
.category h3:hover .cat-toggle, .category h3:hover .cat-add, .cat-add:focus-visible { color: var(--text); opacity: 1; }

/* channel rows */
.channel {
  position: relative; width: calc(100% - 8px); height: 32px; display: flex; align-items: center; gap: 6px;
  margin: 1px 0 0 8px; padding: 0 8px; border-radius: 4px; color: var(--text-3); text-align: left;
}
.channel:hover { background: var(--bg-hover); color: var(--text-2); }
.channel.active { background: var(--bg-active); color: var(--text-strong); }
.channel.unread { color: var(--text-strong); }
.channel.unread::before {
  content: ''; position: absolute; left: -8px; top: 50%; width: 4px; height: 8px; border-radius: 0 4px 4px 0;
  background: var(--text-strong); transform: translateY(-50%);
}
.channel-icon { flex: none; color: var(--text-3); }
.channel-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-gear { display: none; flex: none; color: var(--text-3); }
.channel:hover .channel-gear, .channel.active .channel-gear { display: grid; place-items: center; }
.channel-gear:hover { color: var(--text); }

/* voice roster under a voice channel */
.voice-roster { list-style: none; }
.roster-row {
  width: calc(100% - 8px); height: 32px; margin-left: 8px; display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 28px; border-radius: 4px; color: var(--text-2); font-size: 14px; text-align: left;
}
.roster-row:hover { background: var(--bg-hover); color: var(--text); }
.roster-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-row svg { flex: none; }

/* ── Voice connected panel ───────────────────────────────── */
.voice-panel { flex: none; padding: 8px; background: var(--bg-panel); border-top: 1px solid var(--line); }
.voice-panel-row { display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.voice-panel-row > svg { flex: none; }
.voice-panel-info { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.voice-panel-info strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-panel-info span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-panel-info:hover span { text-decoration: underline; }
.voice-panel .hang { width: 32px; height: 32px; flex: none; border-radius: 4px; display: grid; place-items: center; color: var(--text-2); }
.voice-panel .hang:hover { background: var(--bg-hover); color: var(--text); }
.share-btn {
  margin-top: 8px; width: 100%; height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 500; background: var(--bg-elev); color: var(--text);
}
.share-btn:hover { filter: brightness(1.15); }
.share-btn.on { background: rgba(242, 63, 67, 0.2); color: #ff9a9a; }
.share-btn.on:hover { background: rgba(242, 63, 67, 0.3); filter: none; }

/* ── User panel ──────────────────────────────────────────── */
.user-panel { height: 52px; flex: none; display: flex; align-items: center; padding: 0 8px; background: var(--bg-panel); --presence-ring: var(--bg-panel); }
.user-panel .user-chip { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 4px; margin-left: -4px; border-radius: 4px; text-align: left; }
.user-panel .user-chip:hover { background: var(--bg-hover); }
.user-panel .avatar.speaking { box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--online); }
.user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.user-meta strong { font-size: 14px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-panel > button:not(.user-chip) { width: 32px; height: 32px; flex: none; border-radius: 4px; display: grid; place-items: center; color: var(--text-2); }
.user-panel > button:not(.user-chip):hover { background: var(--bg-hover); color: var(--text); }
.user-panel button.off { color: var(--danger); }
.user-panel button.off:hover { background: rgba(242, 63, 67, 0.1); color: var(--danger); }

/* ── Avatar overrides (shared .avatar/.presence live in global.css) ─ */
/* ring colour follows the surface; dot border scales with the avatar (24→2px … 80→4px) via --size set by Avatar.tsx */
.presence { border-color: var(--presence-ring, var(--bg-sidebar)); border-width: clamp(2px, calc(var(--size, 40px) * 0.075), 4px); }
/* Chat (Discord layout): header, messages, markdown, attachments, composer, members, profile popout. */

/* ── header ──────────────────────────────────────────────── */
.chat { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-chat); }
.chat-header { position: relative; z-index: 2; height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--bg-chat); box-shadow: var(--shadow-header); }
.chat-header-icon { flex: none; color: var(--text-3); }
.chat-header h2 { font-size: 16px; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.chat-topic { font-size: 14px; color: var(--text-2); padding-left: 16px; margin-left: 8px; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-tools { margin-left: auto; display: flex; align-items: center; gap: 16px; color: var(--text-2); }
.chat-tools > button { width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.chat-tools > button:hover, .chat-tools > button.on { color: var(--text); }
.search { display: flex; align-items: center; gap: 4px; height: 24px; width: 144px; padding: 0 2px 0 6px; border-radius: 4px; background: var(--bg-rail); color: var(--text-3); transition: width 0.2s ease; }
.search:focus-within { width: 240px; }
.search input { flex: 1; min-width: 0; font-size: 14px; color: var(--text); }
.search input::placeholder { color: var(--text-3); }

/* ── message list ────────────────────────────────────────── */
.messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 0 8px; }
.messages-loading, .messages-error { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 14px; color: var(--text-3); }
.messages-error { color: var(--idle); }
@keyframes yh-spin { to { transform: rotate(360deg); } }
.messages-loading .spin { animation: yh-spin 0.9s linear infinite; }

.channel-intro { padding: 16px 16px 8px; }
.intro-icon { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elev); color: var(--text-strong); margin-bottom: 12px; }
.channel-intro h1 { font-size: 32px; font-weight: 700; line-height: 1.25; color: var(--text-strong); margin-bottom: 4px; }
.channel-intro p { font-size: 16px; color: var(--text-2); }

.day-divider { display: flex; align-items: center; margin: 24px 16px 8px; font-size: 12px; font-weight: 600; line-height: 13px; color: var(--text-3); }
.day-divider::before, .day-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.day-divider span { padding: 2px 4px; }

/* Discord layout: avatar is absolutely positioned in a 72px gutter, text runs in the rest. */
.message { position: relative; padding: 2px 48px 2px 72px; margin-top: 17px; min-height: 44px; font-size: 16px; line-height: 1.375; }
.message.cont { margin-top: 0; min-height: 0; }
.message:hover, .message:focus-within { background: var(--bg-message-hover); }
.message > .avatar { position: absolute; left: 16px; top: 2px; width: 40px; height: 40px; }
.message-hover-time { position: absolute; left: 0; top: 4px; width: 56px; text-align: right; font-size: 11px; line-height: 1.375; color: transparent; user-select: none; }
.message:hover .message-hover-time, .message:focus-within .message-hover-time { color: var(--text-3); }
.message-body { min-width: 0; }
.message-head { display: flex; align-items: baseline; gap: 4px; min-height: 22px; }
.message .author { font-size: 16px; font-weight: 500; line-height: 22px; color: var(--text-strong); }
.message-head time { margin-left: 4px; font-size: 12px; line-height: 22px; color: var(--text-3); }
.message p { white-space: pre-wrap; word-break: break-word; color: var(--text); }
.message.pending .message-content, .message.pending .attachments { opacity: 0.55; }
.message.failed .message-content { color: var(--danger); }
.message-content { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.message-content .md { flex: 1 1 100%; }
.edited { font-size: 10px; color: var(--text-3); margin-top: -2px; }
.tag { display: inline-flex; align-items: center; height: 15px; padding: 0 4px; border-radius: 3px; font-size: 10px; font-weight: 500; line-height: 15px; vertical-align: top; background: var(--accent); color: var(--accent-ink); flex: none; }
.message-head .tag { align-self: center; }

/* hover action bar */
.message-actions { position: absolute; right: 16px; top: -16px; z-index: 1; display: none; padding: 0; border-radius: 4px; background: var(--bg-chat); border: 1px solid var(--line); box-shadow: var(--shadow-float); }
.message:hover .message-actions, .message:focus-within .message-actions { display: flex; }
.message-actions button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-2); }
.message-actions button:hover { background: var(--bg-hover); color: var(--text); }
.message-actions button.danger:hover { color: var(--danger); }

/* inline edit */
.message.editing { background: var(--bg-message-hover); }
.edit-box textarea { width: 100%; resize: none; padding: 11px 16px; border-radius: 8px; background: var(--bg-elev); line-height: 1.375; max-height: 50vh; }
.edit-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--text-3); }
.edit-hint button { color: var(--link); font-size: 11px; }
.edit-hint button:hover { text-decoration: underline; }
.send-progress { height: 4px; max-width: 320px; margin-top: 6px; border-radius: 2px; background: var(--bg-elev); overflow: hidden; }
.send-progress div { height: 100%; background: var(--accent); transition: width 0.15s; }
.send-failed { margin-top: 4px; font-size: 12px; color: var(--danger); }
.send-failed button { display: inline-flex; align-items: center; gap: 3px; color: var(--link); font-size: 12px; }
.send-failed button:hover { text-decoration: underline; }

/* ── markdown ────────────────────────────────────────────── */
.md { line-height: 1.375; color: var(--text); word-break: break-word; overflow-wrap: anywhere; }
.md-p { white-space: pre-wrap; }
.md a { color: var(--link); }
.md a:hover { text-decoration: underline; }
.md u { text-underline-offset: 2px; }
.md-code { font-family: var(--font-mono); font-size: 85%; padding: 2px 4px; border-radius: 3px; background: var(--bg-rail); }
.md-block { margin: 6px 0 2px; max-width: 90%; border-radius: 4px; border: 1px solid var(--line); background: var(--bg-rail); overflow: hidden; }
.md-block-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 10px; font-size: 12px; color: var(--text-3); border-bottom: 1px solid var(--line); text-transform: lowercase; }
.md-block-head button { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 3px; font-size: 12px; color: var(--text-3); text-transform: none; }
.md-block-head button:hover { background: var(--bg-hover); color: var(--text); }
.md-block pre { margin: 0; padding: 7px 8px; overflow-x: auto; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.125rem; tab-size: 4; white-space: pre; }
.md-quote { position: relative; margin: 2px 0; padding-left: 16px; }
.md-quote::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--bg-elev); }
.md-list { margin: 4px 0; padding-left: 24px; line-height: 1.5; }
.md-list li { margin: 0; }
.md-h { margin: 16px 0 8px; font-weight: 700; line-height: 1.375; color: var(--text-strong); }
.md-h:first-child { margin-top: 8px; }
h1.md-h { font-size: 1.5em; }
h2.md-h { font-size: 1.25em; }
h3.md-h { font-size: 1em; }
.md-sub { font-size: 13px; color: var(--text-3); }
.md-spoiler { background: #1e1f22; color: transparent; border-radius: 4px; cursor: pointer; padding: 0 2px; transition: background 0.1s; }
.md-spoiler * { color: transparent !important; }
.md-spoiler.shown { background: rgba(255, 255, 255, 0.1); color: inherit; cursor: auto; }
.md-spoiler.shown * { color: inherit !important; }

/* ── attachments ─────────────────────────────────────────── */
/* Discord-style embeds (Embeds.tsx) */
.embeds { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; }
.embed {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; row-gap: 8px; max-width: 520px; padding: 8px 16px 16px 12px;
  border-radius: 4px; border-left: 4px solid #202225; background: var(--bg-sidebar); font-size: 14px; line-height: 1.375; color: var(--text);
}
.embed.has-thumb { grid-template-columns: minmax(0, 1fr) 80px; column-gap: 16px; }
.embed > * { grid-column: 1; min-width: 0; }
.embed-thumb { grid-column: 2; grid-row: 1 / span 8; width: 80px; height: 80px; border-radius: 4px; object-fit: cover; justify-self: end; }
.embed-author { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.embed-author img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.embed-author-name { color: var(--text-strong); }
a.embed-author-name:hover { text-decoration: underline; }
.embed-title { font-size: 16px; font-weight: 600; color: var(--text-strong); }
a.embed-title { color: var(--link); }
a.embed-title:hover { text-decoration: underline; }
.embed-desc .md, .embed-field-value .md { white-space: pre-wrap; }
.embed-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.embed-field { grid-column: 1 / -1; min-width: 0; }
.embed-field.inline { grid-column: span 1; }
.embed-field-name { font-weight: 600; color: var(--text-strong); margin-bottom: 2px; }
.embed-image { display: block; max-width: 400px; max-height: 300px; border-radius: 4px; overflow: hidden; }
.embed-image img { display: block; max-width: 400px; max-height: 300px; object-fit: contain; }
.embed-footer { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.embed-footer img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

.attachments { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; }
.att-image { display: block; max-width: min(400px, 100%); border-radius: 8px; overflow: hidden; cursor: pointer; }
.att-image img { display: block; max-width: 100%; max-height: 300px; object-fit: contain; }
.att-video { max-width: min(400px, 100%); max-height: 300px; border-radius: 8px; background: #000; cursor: pointer; }
.att-file { width: min(432px, 100%); padding: 16px; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.att-file.open { width: min(720px, 100%); }
.att-file audio { width: 100%; height: 36px; }
.att-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.att-icon { flex: none; color: var(--text-2); }
.att-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.att-name { color: var(--link); font-size: 16px; line-height: 1.375; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.att-name:hover { text-decoration: underline; }
.att-size { font-size: 12px; color: var(--text-3); }
.att-dl { flex: none; width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-2); border-radius: 4px; }
.att-dl:hover { color: var(--text); }
.att-preview { max-height: 360px; overflow: auto; margin: 0; padding: 8px; border-radius: 4px; background: var(--bg-rail); font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.125rem; white-space: pre-wrap; word-break: break-word; }
.att-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); }
.att-toggle:hover { color: var(--text); }

/* ── composer ────────────────────────────────────────────── */
.composer { position: relative; margin: 0 16px 24px; flex: none; display: flex; flex-direction: column; border-radius: 8px; background: var(--bg-elev); }
.composer button { color: var(--text-2); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; flex: none; }
.composer button:hover:not(:disabled) { color: var(--text); background: var(--bg-hover); }
.composer button:disabled { opacity: 0.35; cursor: default; }
.composer button.on { color: var(--accent); }
.composer-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tb-sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; flex: none; }
.tb-fill { flex: 1; }
.composer-hint { font-size: 11px; color: var(--text-3); padding: 0 6px; }
.composer-row { display: flex; align-items: flex-start; min-height: 44px; }
.composer-gutter { width: 44px; min-height: 44px; flex: none; display: grid; place-items: center; align-self: flex-end; }
.composer button.composer-attach { width: 24px; height: 24px; border-radius: 50%; background: var(--text-2); color: var(--bg-elev); }
.composer button.composer-attach:hover:not(:disabled) { background: var(--text); color: var(--bg-elev); }
.composer textarea { flex: 1; min-width: 0; resize: none; padding: 11px 10px 11px 0; line-height: 1.375; min-height: 44px; max-height: 50vh; overflow-y: auto; color: var(--text); }
.composer textarea::placeholder { color: var(--text-3); }
.composer-actions { display: flex; align-items: center; gap: 4px; padding: 0 12px 0 4px; height: 44px; align-self: flex-end; }
.composer-actions button { width: 32px; height: 32px; }
.composer-actions button:hover:not(:disabled) { background: none; }
.composer button.send:not(:disabled) { color: var(--accent); }
.composer-note { padding: 0 16px 8px; font-size: 12px; color: var(--idle); }
.composer-note.err { color: var(--danger); }

.composer-files { list-style: none; display: flex; gap: 8px; padding: 16px 16px 8px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.composer-files li { position: relative; flex: none; width: 200px; padding: 8px; border-radius: 8px; background: var(--bg-rail); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.composer-files img { width: 100%; height: 140px; object-fit: contain; border-radius: 4px; }
.composer-files li > svg { height: 140px; }
.cf-name { width: 100%; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; color: var(--text); }
.cf-size { width: 100%; font-size: 12px; color: var(--text-3); text-align: left; }
.composer .cf-remove { position: absolute; top: -8px; right: -8px; width: 32px; height: 32px; border-radius: 4px; background: var(--bg-elev); color: var(--danger); box-shadow: var(--shadow-float); }
.composer .cf-remove:hover:not(:disabled) { background: var(--danger); color: #fff; }

.drop-overlay { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); pointer-events: none; }
.drop-overlay > div { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 48px; border: 2px dashed var(--accent); border-radius: 8px; background: var(--bg-chat); color: var(--text-strong); box-shadow: var(--shadow-float); }
.drop-overlay strong { font-size: 20px; font-weight: 600; }

/* ── members ─────────────────────────────────────────────── */
.members { width: 240px; flex: none; background: var(--bg-sidebar); overflow-y: auto; padding: 0 8px; }
.members h3 { font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); padding: 24px 8px 4px 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member { width: 100%; height: 42px; display: flex; align-items: center; gap: 12px; padding: 1px 8px; border-radius: 4px; font-size: 16px; font-weight: 500; color: var(--text-2); text-align: left; }
.member:hover { background: var(--bg-hover); color: var(--text); }
.member-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member.off { opacity: 0.3; }
.member.off:hover { opacity: 1; }
@media (max-width: 1100px) { .members { display: none; } }

/* ── profile popout ──────────────────────────────────────── */
.profile-card { position: fixed; z-index: 60; width: 300px; border-radius: 8px; background: var(--bg-floating); box-shadow: var(--shadow-float); overflow: hidden; }
.profile-banner { height: 60px; }
.profile-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); color: #fff; }
.profile-avatar { position: absolute; top: 16px; left: 16px; padding: 6px; border-radius: 50%; background: var(--bg-floating); }
.profile-avatar .presence { width: 28px; height: 28px; right: -4px; bottom: -4px; border: 6px solid var(--bg-floating); }
.profile-body { margin: 64px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.profile-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.profile-name h2 { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-sub { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.online { background: var(--online); }
.dot.idle { background: var(--idle); }
.dot.dnd { background: var(--dnd); }
.dot.offline { background: var(--text-3); }
.profile-panel { padding: 12px; border-radius: 8px; background: var(--bg-panel); display: flex; flex-direction: column; }
.profile-voice { display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 4px; background: rgba(35, 165, 90, 0.1); color: var(--online); font-size: 13px; font-weight: 600; }
.profile-panel > section { padding: 12px 0; border-top: 1px solid var(--line); }
.profile-panel > section:first-child, .profile-voice + section { border-top: 0; padding-top: 0; }
.profile-panel > section:last-child { padding-bottom: 0; }
.profile-panel h3 { font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.profile-panel p { font-size: 14px; line-height: 1.375; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.profile-panel .btn.wide { margin-top: 0; }
.profile-panel .btn.wide + .btn.wide { margin-top: 4px; }
.profile-edit { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 8px; background: var(--bg-panel); }
.profile-edit label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-3); }
.profile-edit input, .profile-edit textarea { padding: 10px; border-radius: 4px; background: var(--bg-rail); font-size: 16px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); resize: none; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 24px; height: 24px; border-radius: 50%; outline: 2px solid transparent; outline-offset: 2px; }
.swatches button.on { outline-color: var(--text); }
.profile-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── mentions ───────────────────────────────────────────── */
.md-mention { display: inline; padding: 0 2px; border-radius: 3px; font-weight: 500; color: var(--link); background: color-mix(in srgb, var(--link) 15%, transparent); cursor: pointer; }
.md-mention:hover { background: color-mix(in srgb, var(--link) 35%, transparent); }
.md-mention.me { color: #fff; background: color-mix(in srgb, var(--link) 45%, transparent); }
.message.mentioned { background: rgba(250, 166, 26, 0.08); box-shadow: inset 2px 0 0 var(--idle); }
.message.mentioned:hover, .message.mentioned:focus-within { background: rgba(250, 166, 26, 0.12); }
.message.flash { animation: yh-flash 1.5s ease-out; }
@keyframes yh-flash { from { background: color-mix(in srgb, var(--accent) 25%, transparent); } }

/* ── replies ────────────────────────────────────────────── */
.message.has-reply { margin-top: 22px; padding-top: 22px; }
.message.has-reply > .avatar { top: 22px; }
.reply-ref { position: absolute; left: 72px; right: 48px; top: 2px; display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--text-2); text-align: left; min-width: 0; }
.reply-ref::before { content: ''; position: absolute; left: -36px; top: 9px; width: 28px; height: 14px; border: 2px solid var(--line); border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.reply-ref-name { flex: none; font-weight: 500; }
.reply-ref-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reply-ref:hover .reply-ref-text { color: var(--text); }
.composer-reply { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 14px; color: var(--text-2); background: var(--bg-rail); border-radius: 8px 8px 0 0; }
.composer-reply span { flex: 1; }
.composer-reply strong { color: var(--text-strong); }
.composer .composer-reply button { width: 24px; height: 24px; }

/* ── reactions ──────────────────────────────────────────── */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: var(--bg-rail); font-size: 14px; color: var(--text-2); }
.reaction:hover { border-color: var(--line); color: var(--text); }
.reaction.me { border-color: var(--link); background: color-mix(in srgb, var(--link) 15%, transparent); color: var(--text-strong); }
.reaction.add { padding: 0 6px; opacity: 0; }
.message:hover .reaction.add, .message:focus-within .reaction.add { opacity: 1; }
.reaction span { font-size: 16px; line-height: 1; }
.reaction b { font-weight: 500; }
.message-actions button.quick { font-size: 17px; }

/* ── emoji picker ───────────────────────────────────────── */
.emoji-picker { position: fixed; z-index: 50; display: flex; flex-direction: column; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow-float); overflow: hidden; }
.emoji-tabs { display: flex; gap: 2px; padding: 8px; border-bottom: 1px solid var(--line); }
.emoji-tabs button { width: 36px; height: 36px; border-radius: 4px; font-size: 20px; opacity: 0.6; }
.emoji-tabs button:hover { background: var(--bg-hover); opacity: 1; }
.emoji-tabs button.on { background: var(--bg-hover); opacity: 1; box-shadow: inset 0 -2px 0 var(--accent); }
.emoji-body { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.emoji-body h4 { position: sticky; top: 0; padding: 8px 4px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-3); background: var(--bg-elev); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); }
.emoji-grid button { height: 40px; border-radius: 4px; font-size: 24px; line-height: 1; }
.emoji-grid button:hover { background: var(--bg-hover); transform: scale(1.15); }

/* ── @ autocomplete ─────────────────────────────────────── */
.mention-menu { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 8px; list-style: none; padding: 8px; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow-float); z-index: 20; }
.mention-menu li { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-radius: 4px; font-size: 15px; cursor: pointer; color: var(--text); }
.mention-menu li.on { background: var(--bg-hover); color: var(--text-strong); }
.mention-menu li small { margin-left: auto; font-size: 12px; color: var(--text-3); }

/* ── typing ─────────────────────────────────────────────── */
.typing-bar { display: flex; align-items: center; gap: 8px; height: 24px; margin: -16px 16px -8px; padding: 0 8px; font-size: 13px; color: var(--text-2); }
.typing-bar strong { font-weight: 600; color: var(--text); }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); animation: yh-typing 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: 0.2s; }
.typing-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes yh-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
/* Voice: call view, tiles, modal shell / share picker, settings page (audio), volume controls. Tokens from global.css. */
/* ── call view ───────────────────────────────────────────── */
.call { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-chat); }
.call-header { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--bg-chat); box-shadow: var(--shadow-header); border-bottom: 0; position: relative; z-index: 1; }
.call-header > svg { color: var(--text-3); flex: none; }
.call-header h2 { font-size: 16px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-error { margin: 12px 16px 0; padding: 8px 12px; border-radius: 4px; background: rgba(240, 178, 50, 0.12); color: var(--idle); font-size: 14px; }
.call-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; }
.call-empty-icon { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elev); color: var(--text-strong); margin-bottom: 8px; }
.call-empty h1 { font-size: 24px; font-weight: 700; color: var(--text-strong); }
.call-empty p { color: var(--text-2); margin-bottom: 8px; }

.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; background: var(--bg-chat); }
.stage:fullscreen { background: #000; }
.stage-grid {
  flex: 1; min-height: 0; display: grid; gap: 8px; padding: 16px; overflow-y: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); grid-auto-rows: min-content; align-content: center; justify-content: center;
}
.stage-grid.n1 { grid-template-columns: minmax(0, 800px); }
.stage-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile {
  position: relative; aspect-ratio: 16 / 9; min-width: 0; min-height: 0; width: 100%; border-radius: 8px; overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tile, #4e5058) 20%, var(--bg-rail)); outline: 3px solid transparent; outline-offset: -3px; transition: outline-color 0.1s;
}
.tile.speaking { outline-color: var(--online); }
.tile.screen { background: #000; cursor: zoom-in; }
.tile.screen:hover { outline-color: rgba(255, 255, 255, 0.2); }
.tile.small { width: 100px; height: 56px; aspect-ratio: auto; flex: none; border-radius: 4px; outline-width: 2px; outline-offset: -2px; }
.tile .avatar.speaking { box-shadow: 0 0 0 3px var(--online); }
.tile-name {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); height: 24px;
  padding: 0 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile.small .tile-name { display: none; }
.video-wrap { position: absolute; inset: 0; }
.video-wrap video { width: 100%; height: 100%; display: block; background: #000; }
.video-wrap.cover video { object-fit: cover; }
.video-wrap.contain video { object-fit: contain; }
.video-stats { position: absolute; right: 8px; top: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* focus mode: one big video + thumbnail strip */
.stage-focus { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 0; }
.focus-grid { flex: 1; min-height: 0; display: grid; gap: 8px; grid-auto-rows: minmax(0, 1fr); }
.focus-grid.n2, .focus-grid.n3, .focus-grid.n4 { grid-template-columns: 1fr 1fr; }
.focus-video { position: relative; min-height: 0; border-radius: 8px; overflow: hidden; background: #000; }
.focus-video:fullscreen { border-radius: 0; }
.focus-tools { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.focus-video:hover .focus-tools, .focus-video:focus-within .focus-tools { opacity: 1; }
.focus-tools button { height: 32px; min-width: 32px; padding: 0 10px; border-radius: 4px; background: rgba(0, 0, 0, 0.65); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.focus-tools button:hover { background: rgba(0, 0, 0, 0.85); }
.stage-strip { flex: none; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; justify-content: center; }
.stage:fullscreen .stage-strip, .stage:fullscreen .call-controls { display: none; }
.stage:fullscreen .stage-focus { padding: 0; }

/* bottom control bar */
.call-controls { flex: none; display: flex; justify-content: center; align-items: center; gap: 16px; padding: 16px; }
.round { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elev); color: #fff; transition: background 0.17s, filter 0.17s; }
.round:hover { background: #4e5058; }
.round.off { background: var(--danger); color: #fff; }
.round.off:hover { filter: brightness(0.9); background: var(--danger); }
.round.live-on { background: #fff; color: var(--bg-chat); }
.round.live-on:hover { background: #dbdee1; }
.round.hang { background: var(--danger); color: #fff; }
.round.hang:hover { filter: brightness(0.9); background: var(--danger); }

/* ── modal shell (Modal.tsx + share picker) ─────────────── */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.85); display: grid; place-items: center; padding: 24px; }
.modal { position: relative; width: min(440px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; border-radius: 4px; background: var(--bg-chat); box-shadow: var(--shadow-float); }
.modal.wide { width: min(800px, 100%); }
.modal > header { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; }
.modal > header h2 { font-size: 20px; font-weight: 600; line-height: 24px; color: var(--text-strong); }
.modal > header .srv-sub { margin-top: 8px; font-size: 16px; line-height: 20px; color: var(--text-2); }
.modal > header:has(.srv-sub) { padding: 24px 16px 16px; justify-content: center; text-align: center; }
.modal > header:has(.srv-sub) > div { padding: 0 24px; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; color: var(--text-3); transition: color 0.17s; }
.modal-close:hover { color: var(--text-strong); }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.modal > footer { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px; background: var(--bg-sidebar); border-radius: 0 0 4px 4px; }
.pad { padding: 8px 0; }

/* share picker */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.tabs button { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 2px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 500; font-size: 16px; transition: color 0.17s; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text-strong); border-bottom-color: var(--accent); }
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; min-height: 140px; max-height: 300px; overflow-y: auto; padding: 2px; }
.source { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 8px; background: var(--bg-elev); outline: 2px solid transparent; text-align: left; transition: background 0.17s, outline-color 0.1s; }
.source:hover { background: #404249; }
.source.on { outline-color: var(--accent); }
.source > img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 4px; }
.source > span { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-icon { width: 16px; height: 16px; flex: none; }
.quality h3, .settings-section h3, .srv-heading { font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; }
.preset-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.preset-row button { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 4px; background: var(--bg-rail); text-align: left; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color 0.1s; }
.preset-row button:hover { background: var(--bg-panel); }
.preset-row button.on { outline-color: var(--accent); }
.preset-row strong { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.preset-row span { font-size: 12px; color: var(--text-3); }
.hint { margin-top: 8px; font-size: 14px; color: var(--text-3); line-height: 1.4; }
.hint b { color: var(--text-2); font-weight: 600; }

/* toggle rows (.check = checkbox styled as a Discord switch, CSS-only) */
.check { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 16px; color: var(--text); cursor: pointer; }
.check .muted { font-size: 14px; }
.check input { order: 2; margin-left: auto; }
.check input, .toggle-row input[type='checkbox'], .switch {
  appearance: none; flex: none; width: 40px; height: 24px; border-radius: 12px; background: #80848e; position: relative; cursor: pointer; transition: background 0.2s;
}
.check input::before, .toggle-row input[type='checkbox']::before, .switch span {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.check input:checked, .toggle-row input[type='checkbox']:checked, .switch.on { background: var(--online); }
.check input:checked::before, .toggle-row input[type='checkbox']:checked::before, .switch.on span { transform: translateX(16px); }
.check input:disabled, .toggle-row input[type='checkbox']:disabled, .switch:disabled { cursor: not-allowed; opacity: 0.5; }

/* ── settings page (Discord user-settings layout) ────────── */
.settings-page { position: fixed; inset: 0; z-index: 60; display: flex; background: var(--bg-chat); color: var(--text); }
.settings-side { flex: 1 0 218px; display: flex; justify-content: flex-end; background: var(--bg-sidebar); overflow-y: auto; }
.settings-side::-webkit-scrollbar { width: 8px; }
.settings-side::-webkit-scrollbar-track { background: transparent; }
.settings-side::-webkit-scrollbar-thumb { background: var(--bg-rail); border-width: 2px; }
.settings-nav { width: 218px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 60px 6px 60px 20px; }
.settings-nav h4 { padding: 6px 10px; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-nav button { height: 32px; padding: 0 10px; border-radius: 4px; text-align: left; font-size: 16px; font-weight: 500; line-height: 20px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.17s, color 0.17s; }
.settings-nav button:hover { background: var(--bg-hover); color: var(--text); }
.settings-nav button.on { background: var(--bg-active); color: var(--text-strong); }
.settings-main { flex: 1 1 800px; min-width: 0; display: flex; align-items: flex-start; overflow-y: auto; }
.settings-content { flex: 1; min-width: 0; max-width: 740px; padding: 60px 40px 80px 40px; display: flex; flex-direction: column; gap: 16px; }
.settings-content > h2 { font-size: 20px; font-weight: 600; line-height: 24px; color: var(--text-strong); margin-bottom: 4px; }
.settings-esc { position: sticky; top: 60px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 60px 20px 0 0; color: var(--text-3); font-size: 13px; font-weight: 600; transition: color 0.17s; }
.settings-esc > span { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--text-3); display: grid; place-items: center; transition: border-color 0.17s, background 0.17s; }
.settings-esc:hover { color: var(--text-strong); }
.settings-esc:hover > span { border-color: var(--text-strong); background: var(--bg-hover); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* audio settings */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > span { font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-2); display: flex; justify-content: space-between; gap: 8px; }
.field-val { color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.field select, .srv-field select { height: 40px; padding: 0 10px; border-radius: 3px; background: var(--bg-rail); color: var(--text); font-size: 16px; min-width: 0; text-overflow: ellipsis; cursor: pointer; }
.field select:disabled { opacity: 0.6; cursor: not-allowed; }
.settings-section { padding-top: 20px; border-top: 1px solid var(--line); }
.settings-section .check:first-of-type { margin-top: 0; }

/* Discord range slider: 8px track, 10×24 white thumb */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--bg-rail); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 24px; margin-top: -8px; border-radius: 3px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.range:disabled { cursor: not-allowed; opacity: 0.5; }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--link); }

.mic-test { display: flex; align-items: center; gap: 16px; }
.mic-test .btn { min-width: 130px; }
.meter { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--bg-rail); }
.meter-fill { height: 100%; width: 0%; border-radius: 4px; background: var(--idle); transition: width 60ms linear; }
.meter-fill.open { background: var(--online); }
.meter-threshold { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--text-strong); transform: translateX(-1px); }
.radio-row { display: flex; flex-direction: column; gap: 8px; }
.radio { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 4px; background: var(--bg-rail); outline: 2px solid transparent; outline-offset: -2px; font-size: 16px; color: var(--text); cursor: pointer; transition: background 0.17s; }
.radio:hover { background: var(--bg-panel); }
.radio.on { outline-color: var(--accent); }
.radio input { appearance: none; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text-3); display: grid; place-items: center; }
.radio input::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform 0.12s; }
.radio input:checked { border-color: var(--accent); }
.radio input:checked::before { transform: scale(1); }
.ptt { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ptt-row { display: flex; align-items: center; gap: 10px; }
.ptt-key { flex: 1; height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: 3px; background: var(--bg-rail); font-weight: 600; font-size: 14px; font-family: var(--font-mono); color: var(--text-strong); }
.ptt .hint { margin-top: 0; }

/* ── per-user / stream volume ────────────────────────────── */
.vol-controls { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.vol-controls h3 { font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); }
.vol-row { display: grid; grid-template-columns: 24px 1fr auto; grid-template-areas: 'mute label val' 'mute range range'; align-items: center; column-gap: 8px; row-gap: 4px; }
.vol-mute { grid-area: mute; width: 24px; height: 24px; border-radius: 4px; display: grid; place-items: center; color: var(--text-2); }
.vol-mute:hover { background: var(--bg-active); color: var(--text); }
.vol-row.muted-row .vol-mute { color: var(--danger); }
.vol-row.muted-row .range { opacity: 0.4; }
.vol-label { grid-area: label; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); }
.vol-val { grid-area: val; font-size: 12px; font-weight: 600; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.vol-row .range { grid-area: range; height: 16px; }
.vol-row .range::-webkit-slider-thumb { height: 16px; margin-top: -4px; }
.stream-vol { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px 0 2px; border-radius: 4px; background: rgba(0, 0, 0, 0.65); }
.stream-vol button { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: none !important; }
.stream-vol .range { width: 90px; height: 16px; }
.stream-vol .range::-webkit-slider-thumb { height: 16px; margin-top: -4px; }
.stream-vol-label { color: #fff; font-size: 13px; font-weight: 600; padding-right: 4px; }
.tile.screen.small { width: 160px; height: 90px; flex: none; }
.watch-btn { position: absolute; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 13px; font-weight: 600; }
.tile.screen.small:hover .watch-btn { background: var(--accent); }
.tile-tools { position: absolute; right: 8px; bottom: 8px; opacity: 0; transition: opacity 0.15s; }
.tile.screen:hover .tile-tools, .tile.screen:focus-within .tile-tools { opacity: 1; }