body { overflow: hidden; }

/* ── Guest Voice Mode ──────────────────────────────── */
#guest-voice-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.guest-voice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--ui-font);
}
.guest-voice-server {
  font-weight: 700;
  color: var(--text);
  font-size: var(--fs-md);
}
.guest-voice-sep {
  color: var(--text-muted);
  font-size: var(--fs-md);
}
.guest-voice-channel {
  color: var(--accent);
  font-size: var(--fs-md);
  font-weight: 600;
}
.guest-voice-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px;
}
#guest-voice-rooms {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}
.guest-voice-user {
  padding: 8px 16px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
}
.guest-voice-controls {
  display: flex;
  gap: 12px;
}
.guest-voice-controls .voice-ctrl-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.guest-voice-controls .voice-ctrl-btn:hover {
  background: var(--surface-3);
  border-color: var(--accent);
}
.guest-voice-controls .voice-ctrl-btn.active {
  background: rgba(244,67,54,0.15);
  border-color: var(--status-danger);
  color: var(--status-danger);
}

/* ── Desktop (Electron) — titlebar & drag region ──── */
#desktop-titlebar { display: none; }

body.is-desktop-mac #desktop-titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  height: 38px;
  background: var(--bg);
  -webkit-app-region: drag;
  border-bottom: 1px solid var(--border);
  z-index: 10000;
}

body.is-desktop-mac #app-layout {
  height: calc(100vh - 38px);
  margin-top: 38px;
}
body.is-desktop-mac .settings-page {
  top: 38px;
}

/* ── SVG Icon System ─────────────────────────────── */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: inline-block;
}
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 24px; height: 24px; }

#app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
}

/* ── Top Title Bar ───────────────────────────────── */
#app-title-bar {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
  -webkit-app-region: drag;
  user-select: none;
  z-index: 100;
}
#app-title-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  flex-shrink: 0;
}
#app-title-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#app-title-text {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* ── App Body (server rail + sidebar + content) ─── */
#app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Server Rail ──────────────────────────────────── */
#server-rail {
  width: 72px;
  flex-shrink: 0;
  background: var(--sidebar-server-bg, var(--bg));
  border-right: 1px solid rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 80px; /* extra bottom padding so buttons aren't hidden behind footer */
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
}

.server-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.06);
  background: var(--surface-2);
  color: var(--accent);
  font-size: var(--fs-lg);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 220ms ease-out, box-shadow 220ms ease-out, border-radius 220ms ease-out, transform 160ms var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
  user-select: none;
  letter-spacing: 0;
  overflow: hidden;
  padding: 0;
}

.server-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.server-icon:hover {
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-dim);
  border-radius: 35%;
  transform: translateY(-1px) scale(1.08);
}

/* Mac OS Dock-style proximity magnify — direct neighbors of the
   hovered server icon get a smaller boost so the rail feels like
   a Dock reacting to the cursor. Uses :has() (Safari 15.4+, Chrome
   105+, Firefox 121+ — modern enough for a 2026 chat client). */
.server-icon:hover + .server-icon,
.server-icon:has(+ .server-icon:hover) {
  transform: scale(1.04);
}

.server-icon.active {
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-dim);
  border-radius: 35%;
}

.server-add-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed var(--accent-dim);
  background: transparent;
  color: var(--accent-dim);
  font-size: var(--fs-xl);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
  margin-top: auto;
}

.server-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--accent-glow);
}

/* ── Group Rail Items ─────────────────────────────── */
#group-rail-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  scrollbar-width: none;
}
#group-rail-list::-webkit-scrollbar { display: none; }

.group-rail-item {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, box-shadow 0.2s, border-radius 0.2s, filter 0.2s, opacity 0.2s;
  user-select: none;
  position: relative;
  filter: grayscale(0.5);
  opacity: 0.55;
}

.group-rail-item:hover {
  border-color: var(--accent);
  filter: grayscale(0);
  opacity: 1;
  color: var(--text);
}

.group-rail-item.active {
  /* Outward glow removed — the rail is 72px wide and any
     box-shadow that radiates outside the 48px icon clips
     against the rail's overflow-x: hidden. The breathe
     animation (pa-active-breathe) provides the visible
     active signal via a 4px ring that fits within bounds. */
  border-color: var(--accent);
  filter: grayscale(0);
  opacity: 1;
  color: var(--text);
}

/* Left-side pip indicator */
.group-rail-item::before {
  content: '';
  position: absolute;
  left: -14px;
  width: 4px;
  height: 36px;
  border-radius: 0 4px 4px 0;
  background: var(--group-color, var(--accent));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 180ms var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
}
.group-rail-item:hover::before { transform: scaleY(0.56); }
.group-rail-item.active::before { transform: scaleY(1); }

/* Color accent for groups with custom colors — only when active or hovered */
.group-rail-item[data-group-color]:hover {
  border-color: var(--group-color, var(--accent));
}
.group-rail-item[data-group-color].active {
  border-color: var(--group-color, var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--group-color) 30%, transparent);
}

.group-rail-item.group-home { font-size: var(--fs-lg); }
.group-rail-badge {
  position: absolute;
  bottom: -2px;
  right: -4px;
  background: var(--status-dnd);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 5px;
  min-width: 14px;
  text-align: center;
  border: 2px solid var(--bg);
  line-height: 1.2;
}
.group-rail-unread-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  border: 2px solid var(--bg);
}

.group-rail-add {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed var(--accent-dim);
  background: transparent;
  color: var(--accent-dim);
  font-size: var(--fs-xl);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
  margin-top: auto;
}
.group-rail-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--accent-glow);
}

/* ── Main Menu Popup ───────────────────────────────── */
/* Nav popup: spring-chip fan.
   Both level-1 (Home/Servers/Settings) and level-2 (server list)
   render as individual floating pill chips that spring out from the
   Patched button with a stagger. The container itself is an invisible
   positioning anchor — no background/border/shadow. */
#main-menu-popup {
  position: fixed;
  top: 64px;                    /* below the 48px sidebar-header banner */
  left: 76px;                   /* just past the 72px server rail */
  z-index: 2500;
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-out;
}
#main-menu-popup.visible {
  display: block !important;
  opacity: 1;
  pointer-events: auto;
}

/* Shared chip styling used by every clickable row in both levels.
   All colors pull from --menu-chip-* theme tokens so each theme can
   re-skin the chips from a central place. */
#menu-level-1 .menu-item,
#menu-level-2 .menu-server-item,
#menu-level-2 .menu-item {
  width: fit-content;
  min-width: 180px;
  max-width: 240px;              /* cap width so bounce overshoot stays on screen */
  padding: 9px 18px 9px 12px;
  background: var(--menu-chip-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--menu-chip-border);
  border-radius: 999px;
  /* Inset highlight = rim light on the top edge (glassy lift).
     Outer shadow = subtle depth. Both come from theme tokens. */
  box-shadow:
    inset 0 1px 0 var(--menu-chip-highlight),
    var(--menu-chip-shadow);
  color: var(--menu-chip-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  transform-origin: left center; /* bounce grows rightward from left edge */
  /* Spring-in: small offset + scale + invisible → settled.
     Softer overshoot (1.08 instead of 1.35) so chips don't bounce off
     the right edge of the window. */
  opacity: 0;
  transform: translateX(-10px) scale(0.92);
  transition:
    opacity 240ms ease-out,
    transform 380ms cubic-bezier(0.25, 0.9, 0.3, 1.08),
    background-color 140ms ease;
}
/* Back button in submenu — now hidden entirely; closing the level-2
   fan happens by clicking the Servers chip again or outside the menu. */
#menu-level-2 .menu-back-btn { display: none; }
/* Level-1 chips reveal when the popup is visible */
#main-menu-popup.visible #menu-level-1 .menu-item {
  opacity: 1;
  transform: translateX(0) scale(1);
}
/* Level-2 chips reveal only when level-2 is .open — not just when
   the popup is visible — so they stagger in when the user clicks
   Servers, not when the menu first opens. */
#menu-level-2.open .menu-server-item,
#menu-level-2.open .menu-item {
  opacity: 1;
  transform: translateX(0) scale(1);
}
#menu-level-1 .menu-item:hover,
#menu-level-2 .menu-back-btn:hover,
#menu-level-2 .menu-server-item:hover,
#menu-level-2 .menu-item:hover {
  background: var(--menu-chip-hover-bg);
  color: var(--menu-chip-text);
}

/* ── Level 1 stagger ──
   Open: top → bottom (chip 1 first).
   Close: reverse — bottom → top — via delays on the base (not-visible)
   state, using :nth-last-child so the last chip closes first. */
#main-menu-popup.visible #menu-level-1 .menu-item:nth-child(1) { transition-delay: 0ms;   }
#main-menu-popup.visible #menu-level-1 .menu-item:nth-child(2) { transition-delay: 70ms;  }
#main-menu-popup.visible #menu-level-1 .menu-item:nth-child(3) { transition-delay: 140ms; }
#main-menu-popup.visible #menu-level-1 .menu-item:nth-child(4) { transition-delay: 210ms; }
#main-menu-popup.visible #menu-level-1 .menu-item:nth-child(5) { transition-delay: 280ms; }
#main-menu-popup.visible #menu-level-1 .menu-item:nth-child(6) { transition-delay: 350ms; }
/* Reverse delays on close (no .visible class present) */
#menu-level-1 .menu-item:nth-last-child(1) { transition-delay: 0ms;   }
#menu-level-1 .menu-item:nth-last-child(2) { transition-delay: 50ms;  }
#menu-level-1 .menu-item:nth-last-child(3) { transition-delay: 100ms; }
#menu-level-1 .menu-item:nth-last-child(4) { transition-delay: 150ms; }
#menu-level-1 .menu-item:nth-last-child(5) { transition-delay: 200ms; }
#menu-level-1 .menu-item:nth-last-child(6) { transition-delay: 250ms; }

/* Level-1 layout — only 3 items, no scroll ever needed */
#menu-level-1 {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  overflow: visible;
}
/* Level-2 floats next to level-1, anchored to the Servers chip so the
   submenu appears to bubble out of it. Always rendered; visibility is
   gated on .open so CSS transitions can animate in/out. */
#menu-level-2 {
  position: absolute;
  top: 48px;                 /* overridden at runtime by showMenuLevel2 */
  left: 192px;               /* just past level-1 chip width, tighter gap */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  overflow: visible;         /* no scroll on the outer container */
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
#menu-level-2.open {
  opacity: 1;
  pointer-events: auto;
}
/* Horizontal rule separators don't fit the chip aesthetic */
#menu-level-2 .menu-separator { display: none; }
/* Server list: plain flex column — no max-height/overflow. A scroll
   container was creating a visible dark gutter in some browsers even
   with the scrollbar hidden. If the list gets long enough to exceed
   the viewport we can add scrolling back with a proper custom-
   scrollbar treatment later. */
#menu-server-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  width: auto;
}
/* Level-2 chip stagger — forward delays on .open, reverse delays on close */
#menu-level-2.open #menu-server-list .menu-server-item:nth-child(1) { transition-delay: 0ms;   }
#menu-level-2.open #menu-server-list .menu-server-item:nth-child(2) { transition-delay: 70ms;  }
#menu-level-2.open #menu-server-list .menu-server-item:nth-child(3) { transition-delay: 140ms; }
#menu-level-2.open #menu-server-list .menu-server-item:nth-child(4) { transition-delay: 210ms; }
#menu-level-2.open #menu-server-list .menu-server-item:nth-child(5) { transition-delay: 280ms; }
#menu-level-2.open #menu-server-list .menu-server-item:nth-child(6) { transition-delay: 350ms; }
#menu-level-2.open #menu-server-list .menu-server-item:nth-child(n+7) { transition-delay: 420ms; }
#menu-level-2.open > .menu-add-server { transition-delay: 490ms; }
/* Reverse on close — last item closes first */
#menu-level-2 > .menu-add-server { transition-delay: 0ms; }
#menu-level-2 #menu-server-list .menu-server-item:nth-last-child(1) { transition-delay: 40ms;  }
#menu-level-2 #menu-server-list .menu-server-item:nth-last-child(2) { transition-delay: 80ms;  }
#menu-level-2 #menu-server-list .menu-server-item:nth-last-child(3) { transition-delay: 120ms; }
#menu-level-2 #menu-server-list .menu-server-item:nth-last-child(4) { transition-delay: 160ms; }
#menu-level-2 #menu-server-list .menu-server-item:nth-last-child(5) { transition-delay: 200ms; }
#menu-level-2 #menu-server-list .menu-server-item:nth-last-child(6) { transition-delay: 240ms; }
#menu-level-2 #menu-server-list .menu-server-item:nth-last-child(n+7) { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  #menu-level-1 .menu-item,
  #menu-level-2 .menu-back-btn,
  #menu-level-2 .menu-server-item,
  #menu-level-2 .menu-item {
    transition: opacity 150ms ease;
    transform: none;
  }
}

.menu-level { padding: 8px; }

@keyframes menuSlideLeft {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes menuSlideRight {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.menu-level.slide-forward  { animation: menuSlideLeft 0.2s ease; }
.menu-level.slide-backward { animation: menuSlideRight 0.2s ease; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.menu-item:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
.menu-item > * {
  pointer-events: none;
}
.menu-item-icon {
  font-size: var(--fs-lg);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.menu-item-label {
  flex: 1;
  text-align: left;
}
.menu-item-arrow {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.menu-item:hover .menu-item-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.menu-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.menu-back-btn:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
.menu-back-arrow { font-size: var(--fs-lg); }

.menu-separator {
  border: none;
  height: 1px;
  background: var(--accent-dim);
  margin: 4px 8px;
}

.menu-server-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
  padding: 2px 0;
}
.menu-server-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  width: 100%;
  text-align: left;
}
.menu-server-item:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Server reorder context menu */
.server-order-menu {
  position: fixed; z-index: 99999;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 4px; min-width: 150px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.server-order-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; border: none; background: none; border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--fs-sm); cursor: pointer; transition: background .12s;
}
.server-order-item:hover { background: var(--surface-2); color: var(--accent); }
.server-order-icon { font-size: var(--fs-2xs); color: var(--text-muted);
}
.menu-server-item.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.menu-server-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: bold;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.menu-server-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.menu-server-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-add-server .menu-item-icon {
  font-size: var(--fs-xl);
  color: var(--accent-dim);
}
.menu-add-server:hover .menu-item-icon {
  color: var(--accent);
}

/* ── Sidebar Collapse / Expand ────────────────────── */
#sidebar,
#dm-sidebar {
  transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
  overflow: hidden;
}
.sidebar-collapsed #sidebar,
.sidebar-collapsed #dm-sidebar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-right: none !important;
  opacity: 0;
  pointer-events: none;
}

.sidebar-expand-btn {
  display: none;
  width: 28px;
  flex-shrink: 0;
  background: var(--surface-1);
  border: none;
  border-right: 1px solid rgba(255,255,255,0.04);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}
.sidebar-expand-btn:hover {
  color: var(--accent);
  background: rgba(255,255,255,0.04);
}
.sidebar-collapsed .sidebar-expand-btn {
  display: flex;
}

/* ── Sidebar ──────────────────────────────────────── */
#sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar-channel-bg, var(--surface-1));
  border-right: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 72px; /* space for the floating footer */
}

#sidebar-header {
  padding: 0 12px 0 16px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}

#sidebar-server-name {
  flex: 1;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-gear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-md);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}
.sidebar-gear svg { width: 18px; height: 18px; }

.sidebar-gear:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

#channel-list-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
}

.channel-section-header {
  display: flex;
  align-items: center;
  padding: 12px 8px 4px;
}

.channel-section-label {
  flex: 1;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.add-channel-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: color 0.2s, background 0.2s;
}

.add-channel-btn:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

/* Category sections */
.category-header { cursor: default; }
.category-label {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
}
.category-chevron {
  display: inline-flex;
  transition: transform 0.15s;
}
.category-header:not(.collapsed) .category-chevron {
  transform: rotate(90deg);
}
.add-category-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  padding: 6px 10px;
  margin-top: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.add-category-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.channel-section-header.drop-target {
  background: var(--accent-dim);
  border-radius: var(--radius-sm);
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: background-color 0.3s cubic-bezier(0.32,0.72,0,1), color 0.3s cubic-bezier(0.32,0.72,0,1), border-color 0.3s cubic-bezier(0.32,0.72,0,1), box-shadow 0.3s cubic-bezier(0.32,0.72,0,1), transform 0.3s cubic-bezier(0.32,0.72,0,1), opacity 0.3s cubic-bezier(0.32,0.72,0,1);
  user-select: none;
  position: relative;
}

.ch-icon {
  font-size: var(--fs-lg);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.channel-item.active .ch-icon { opacity: 1; }
.channel-item:hover  .ch-icon { opacity: 0.8; }

.channel-item:hover  { background: rgba(255,255,255,0.03); color: var(--text); }
.channel-item.active { background: var(--accent-dim); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }

/* ── Voice channel hover action buttons ─────────────── */
.vc-hover-actions {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.channel-item:hover .vc-hover-actions { display: flex; }
.vc-hover-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc-hover-btn svg { width: 16px; height: 16px; }
.vc-hover-btn:hover { color: var(--text); background: var(--accent-dim); }

/* ── Voice Channel Text Chat Side Panel ────────────── */
.vc-chat-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 50%;
  border-top: 1px solid var(--card-border);
  background: var(--bg);
  flex-shrink: 0;
}
.vc-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--card-border);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.vc-chat-header .vc-chat-close { margin-left: auto; }
.vc-chat-temp-badge {
  font-size: var(--fs-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--text-muted);
}
.voice-topbar-chat-btn {
  width: auto !important; padding: 0 10px !important; border-radius: 6px !important; font-size: var(--fs-xs);
  gap: 4px;
}
.voice-topbar-chat-btn .icon { width: 14px; height: 14px;
}
.vc-chat-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-md);
}
.vc-chat-close:hover { color: var(--text); }
.vc-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
}
.vc-chat-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--card-border);
}
.vc-chat-input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 8px 14px;
  color: var(--text);
  font-size: var(--fs-sm);
  outline: none;
}
.vc-chat-input:focus { border-color: var(--accent); }

/* ── Manage Channels Button + Page ─────────────────── */
.manage-channels-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 4px 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.manage-channels-btn:hover { background: var(--surface-3); }
.manage-channels-icon { font-size: var(--fs-md); opacity: 0.7; }

.manage-ch-banner {
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}
.manage-ch-banner h3 { margin: 0 0 6px; font-size: var(--fs-lg); color: var(--text); }
.manage-ch-banner p { margin: 4px 0; font-size: var(--fs-sm); color: var(--text-muted); }

.manage-ch-category {
  margin-bottom: 16px;
}
.manage-ch-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--card-border);
}
.manage-ch-cat-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
}
.manage-ch-cat-follow {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.manage-ch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.manage-ch-item:hover { background: rgba(255,255,255,0.02); }
.manage-ch-icon { color: var(--text-muted); font-size: var(--fs-sm); flex-shrink: 0; }
.manage-ch-info { flex: 1; min-width: 0; }
.manage-ch-name { font-size: var(--fs-md); color: var(--text); font-weight: 500; }
.manage-ch-activity { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Channel drag-and-drop reordering ──────────────────── */
.ch-draggable { cursor: grab; }
.ch-draggable:active { cursor: grabbing; }
.ch-draggable.dragging { opacity: 0.4; }
.ch-drop-before { border-top: 2px solid var(--accent); margin-top: -2px; }
.ch-drop-after  { border-bottom: 2px solid var(--accent); margin-bottom: -2px; }

/* ── Channel type picker (create dialog) ───────────────── */
.channel-type-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.ch-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
  font-family: var(--ui-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ch-type-btn .ch-type-icon { font-size: var(--fs-lg); }
.ch-type-btn:hover { border-color: var(--accent); color: var(--text); }
.ch-type-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
  box-shadow: var(--accent-glow);
}

/* ── New channel type view containers ──────────────────── */
.type-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.type-back-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}
.type-back-btn:hover { color: var(--accent); }
.type-nav-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text-muted);
  font-size: var(--fs-md);
  cursor: pointer;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.type-nav-btn:hover { border-color: var(--accent); color: var(--accent); }

.type-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.type-empty {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
  padding: 40px 16px;
}

/* ── Media gallery grid ─────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-content: start;
  gap: 12px;
  padding: 4px;
}
.media-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: border-color 0.15s;
}
.media-item:hover { border-color: var(--accent); }
.media-item img, .media-item video {
  width: 100%; height: 100%; object-fit: cover;
}
.media-item-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: var(--fs-xs);
  opacity: 0;
  transition: opacity 0.15s;
}
.media-item:hover .media-item-overlay { opacity: 1; }
.media-item-overlay { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.media-item-author { font-weight: 600; font-size: var(--fs-xs); }
.media-item-caption { font-size: var(--fs-xs); opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item-thumb { display: block; }
.media-heart-btn {
  position: absolute; top: auto; bottom: auto; right: 0;
  align-self: flex-end;
  background: rgba(0,0,0,0.5); border: none; border-radius: var(--radius-lg);
  color: #fff; cursor: pointer; display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: var(--fs-xs); font-weight: 600;
  transition: background 0.15s, transform 0.15s;
  margin-top: -2px;
}
.media-heart-btn:hover { background: rgba(0,0,0,0.7); transform: scale(1.08); }
.media-heart-btn.hearted { background: rgba(224,85,85,0.25); }
.media-heart-count { min-width: 6px; }

/* ── Task kanban board ──────────────────────────────────── */
.task-kanban {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  overflow-x: auto;
}
.task-column {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}
.task-column-header {
  padding: 10px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  gap: 6px;
}
.task-column-name {
  cursor: pointer;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-column-name:hover { color: var(--text); }
.task-column-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.task-column-header:hover .task-column-actions { opacity: 1; }
.task-col-action-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.task-col-action-btn:hover { color: var(--text); background: var(--surface-3); }
.task-col-action-btn.danger:hover { color: var(--status-danger); }
.task-column-body {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
  min-height: 60px;
  transition: background 0.15s, border-color 0.15s;
}
.task-column-body.drag-over {
  background: rgba(127, 255, 212, 0.06);
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.task-column.col-drag-over {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.task-column.dragging {
  opacity: 0.4;
}
.task-column-empty {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  opacity: 0.5;
  padding: 16px 8px;
  pointer-events: none;
}
.task-card {
  padding: 10px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: grab;
  transition: border-color 0.15s, opacity 0.15s, transform 0.15s;
  user-select: none;
}
.task-card:active { cursor: grabbing; }
.task-card.dragging {
  opacity: 0.4;
  transform: rotate(2deg);
}
.task-card:hover { border-color: var(--accent); }
.task-card-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.task-card-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; line-height: 1.3; }
.task-card-footer { display: flex; gap: 8px; margin-top: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.task-card-assignee { opacity: 0.8; }
.task-card-due { opacity: 0.8; }
.task-card-due.overdue { color: var(--status-danger); }
.task-card-actions {
  display: flex; gap: 4px; margin-top: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.task-card:hover .task-card-actions { opacity: 1; }
.task-move-btn {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.task-move-btn:hover { border-color: var(--accent); color: var(--text); }
.task-move-btn.danger:hover { border-color: var(--status-danger); color: var(--status-danger); }
.task-count {
  font-size: var(--fs-2xs);
  background: var(--accent-dim);
  color: var(--text);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ── Calendar grid ──────────────────────────────────────── */
.cal-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 0 16px;
}
.cal-day-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 0;
  letter-spacing: 0.06em;
}
.cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 0 16px;
  flex: 1;
}
.cal-cell {
  min-height: 90px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.cal-cell:hover { border-color: var(--accent); }
.cal-cell.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-cell.empty:hover { border-color: transparent; }
.cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day-num {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}
.cal-cell.today .cal-day-num { color: var(--accent); font-weight: 700; }
.cal-cell.today { border: 1px solid var(--accent); }
.cal-events-slot { margin-top: 2px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-event-chip {
  font-size: var(--fs-2xs);
  padding: 1px 4px;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.cal-event-chip:hover { opacity: 0.85; }
.cal-event-more { font-size: var(--fs-2xs); color: var(--text-muted); }
.cal-event-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin: 1px;
}

/* ── Event dialogs ─────────────────────────────────────── */
#dialog-new-event { width: 420px; }
#dialog-new-event textarea,
#dialog-new-event input[type="text"] {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
}
#dialog-new-event textarea:focus,
#dialog-new-event input[type="text"]:focus { outline: none; border-color: var(--accent); }
#dialog-new-event input[type="datetime-local"] {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
}
#dialog-new-event input[type="datetime-local"]:focus { outline: none; border-color: var(--accent); }

#dialog-event-detail { width: 460px; }
.event-detail-stripe {
  height: 6px;
  border-radius: 3px;
  margin-bottom: 12px;
}
.event-detail-title { margin: 0 0 8px; font-size: var(--fs-lg); color: var(--text); }
.event-detail-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 4px; }
.event-detail-host { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 12px; }
.event-detail-desc {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.4;
  padding: 10px 12px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.event-rsvp-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.event-rsvp-btn {
  flex: 1;
  padding: 8px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.event-rsvp-btn:hover { border-color: var(--accent); color: var(--text); }
.event-rsvp-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.event-attendees { margin-top: 8px; }
.event-attendee-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); margin-bottom: 4px; margin-top: 8px; }
.event-attendee-list { display: flex; gap: 6px; flex-wrap: wrap; }
.event-attendee-list span {
  font-size: var(--fs-sm);
  padding: 2px 8px;
  background: var(--surface-3);
  border-radius: var(--radius-md);
  color: var(--text);
}

/* ── Forum post cards ───────────────────────────────────── */
.forum-post-card {
  padding: 12px 16px;
  background: var(--thread-card-bg, var(--surface-3));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, transform 220ms var(--motion-spring), box-shadow 220ms ease-out;
}
.forum-post-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 0 0 1px var(--accent-dim);
}
.forum-post-card.pinned { border-color: var(--accent); background: var(--accent-dim); }
.forum-post-title-row { display: flex; align-items: center; gap: 6px; }
.forum-post-badges { display: flex; gap: 4px; flex-shrink: 0; }
.forum-badge { font-size: var(--fs-xs); opacity: 0.8; }
.forum-post-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.forum-post-preview { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 4px; line-height: 1.3; }
.forum-post-meta {
  display: flex; gap: 12px; margin-top: 8px;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.forum-post-author { font-weight: 600; }

/* ── Forum detail view ─────────────────────────────────── */
#forum-post-detail {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.forum-detail-header {}
.forum-detail-header-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.forum-detail-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin: 0; }
.forum-detail-badges { display: flex; gap: 6px; }
.forum-detail-badges .forum-badge {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  background: var(--surface-3);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.05);
}
.forum-detail-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.forum-detail-author .msg-avatar { width: 28px; height: 28px; font-size: var(--fs-xs); flex-shrink: 0; }
.forum-detail-author-name { font-weight: 600; font-size: var(--fs-sm); }
.forum-detail-time { font-size: var(--fs-xs); color: var(--text-muted); }
.forum-detail-actions {
  display: flex; gap: 6px; margin-left: auto;
}
.forum-action-btn {
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text-muted);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.forum-action-btn:hover { border-color: var(--accent); color: var(--text); }
.forum-action-btn.danger:hover { border-color: var(--status-danger); color: var(--status-danger); }

.forum-detail-content {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
  padding: 12px 16px;
  background: var(--surface-3);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.05);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ── Forum replies ───────────────────────────────────────── */
.forum-replies-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.forum-replies-header {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 8px;
}
.forum-replies-list { overflow-y: auto; flex: 1; }

.forum-reply {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  transition: background .2s cubic-bezier(0.32,0.72,0,1);
}
.forum-reply:hover { background: var(--surface-3); }
.forum-reply .msg-avatar { width: 28px; height: 28px; font-size: var(--fs-xs); flex-shrink: 0; }
.forum-reply-body { flex: 1; min-width: 0; }
.forum-reply-header { display: flex; gap: 8px; align-items: baseline; }
.forum-reply-author { font-weight: 600; font-size: var(--fs-sm); }
.forum-reply-time { font-size: var(--fs-xs); color: var(--text-muted); }
.forum-reply-content {
  font-size: var(--fs-sm);
  color: var(--text);
  margin: 2px 0 0;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* ── Forum reply input bar ───────────────────────────────── */
.forum-reply-bar {
  display: flex;
  gap: 8px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  align-items: flex-end;
}
.forum-reply-input {
  flex: 1;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 8px 12px;
  font-size: var(--fs-sm);
  resize: none;
  font-family: inherit;
}
.forum-reply-input:focus {
  outline: none;
  border-color: var(--accent);
}
.forum-reply-send {
  padding: 8px 16px;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.forum-locked-notice {
  text-align: center;
  padding: 12px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 8px;
}

/* ── New Post dialog ────────────────────────────────────── */
#dialog-new-post { width: 480px; }
#dialog-new-post textarea {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  resize: vertical;
  font-family: inherit;
}
#dialog-new-post textarea:focus { outline: none; border-color: var(--accent); }

/* ── Doc list items ─────────────────────────────────────── */
.doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s, transform 220ms var(--motion-spring), box-shadow 220ms ease-out;
}
.doc-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 0 0 1px var(--accent-dim);
}
.doc-item.pinned { border-color: var(--accent); background: var(--accent-dim); }
.doc-item-icon { font-size: var(--fs-lg); flex-shrink: 0; }
.doc-item-info { flex: 1; min-width: 0; }
.doc-item-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-item-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* ── File Viewer Overlay ───────────────────────────── */
#file-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1200;
  align-items: center;
  justify-content: center;
}
#file-viewer-overlay[style*="flex"] { display: flex !important; }
#file-viewer-modal {
  display: flex;
  flex-direction: column;
  width: min(92vw, 1100px);
  height: min(90vh, 860px);
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
}
#file-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: var(--surface-2);
  flex-shrink: 0;
  gap: 12px;
}
#file-viewer-title {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
#file-viewer-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#file-viewer-body iframe,
#file-viewer-body embed {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}
#file-viewer-body pre {
  flex: 1;
  overflow: auto;
  padding: 20px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.file-viewer-unsupported {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
}
.file-viewer-unsupported .fvu-icon { font-size: var(--fs-2xl); line-height: 1; }
.file-viewer-unsupported .fvu-icon svg { width: 64px; height: 78px; }
.file-viewer-unsupported .fvu-name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.file-viewer-unsupported .fvu-hint { font-size: var(--fs-sm); }


/* ── Doc editor ──────────────────────────────────────────── */
#docs-editor {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.doc-editor-title {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent-dim);
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 700;
  padding: 8px 4px;
  font-family: inherit;
}
.doc-editor-title:focus { outline: none; border-bottom-color: var(--accent); }
.doc-editor-content {
  flex: 1;
  width: 100%;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 14px 16px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  font-family: 'IBM Plex Mono', monospace;
  resize: none;
  min-height: 200px;
}
.doc-editor-content:focus { outline: none; border-color: var(--accent); }
.doc-editor-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.doc-editor-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ── Server Overview ─────────────────────────────────────── */

/* Hero banner — layout controlled by inline styles in JS */
.overview-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  overflow: visible;
  padding: 16px 16px 0;
}
/* Inner wrapper — sizes to image, centered */
.overview-hero-bg {
  align-self: center;
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
}
.overview-hero-icon {
  position: relative;
  z-index: 2;
  margin-top: -48px;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 4px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.overview-hero-icon img { width: 100%; height: 100%; object-fit: cover; }
.overview-hero-edit {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Identity block — centered */
.overview-identity {
  padding: 16px 32px 40px;
  text-align: center;
  border-bottom: none;
  align-self: stretch;
}
.overview-server-name {
  margin: 0 0 6px;
  font-size: var(--fs-2xl);
  color: var(--text);
  font-weight: 700;
}
.overview-server-desc {
  margin: 0 auto;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 560px;
}

/* Two-column body */
.overview-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.overview-main {
  padding: 24px 28px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.overview-about {
  padding: 20px 16px;
  border-left: 1px solid rgba(255,255,255,0.04);
  min-width: 0;
  border-radius: 12px 0 0 0;
}

/* Section headings */
.overview-section-title {
  margin: 0 0 14px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.overview-section-title-link {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.overview-section-title-link:hover { text-decoration: underline; }

/* Upcoming events — horizontal scroll row */
.overview-events-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.overview-event-card {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: 280px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.15s;
  cursor: pointer;
}
.overview-event-card:hover { border-color: var(--accent); }
.overview-event-card-body {
  padding: 12px 14px 10px;
  flex: 1;
}
.overview-event-card-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overview-event-card-going {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
}
.overview-event-card-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.overview-event-rsvp {
  display: flex;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.overview-rsvp-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.overview-rsvp-btn:last-child { border-right: none; }
.overview-rsvp-btn:hover { background: var(--surface-2); color: var(--text); }
.overview-rsvp-btn.active { background: var(--accent); color: var(--bg); font-weight: 600; }

/* Announcement cards grid */
.overview-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
}
.overview-announce-card {
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.overview-announce-card:hover { border-color: var(--accent); }
.overview-announce-card-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}
.overview-announce-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.overview-announce-card-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  flex-shrink: 0;
}
.overview-announce-card-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Forum post cards */
.overview-discuss-card {
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.overview-discuss-card:hover { border-color: var(--accent); }
.overview-discuss-card-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}
.overview-discuss-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.overview-discuss-card-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  flex-shrink: 0;
}
.overview-discuss-card-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Card grid (custom cards) */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.overview-section {
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.overview-section-empty { font-size: var(--fs-sm); color: var(--text-muted); }
.overview-activity-list { display: flex; flex-direction: column; gap: 6px; }
.overview-activity-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-sm);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.overview-activity-item:last-child { border-bottom: none; }
.overview-act-author { font-weight: 600; flex-shrink: 0; }
.overview-act-channel { color: var(--accent); opacity: 0.7; flex-shrink: 0; font-size: var(--fs-xs); }
.overview-act-preview { color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-act-time { color: var(--text-muted); font-size: var(--fs-xs); flex-shrink: 0; }
.overview-events-list, .overview-posts-list { display: flex; flex-direction: column; gap: 8px; }
.overview-event-item { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--text); }
.overview-event-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.overview-post-item { font-size: var(--fs-sm); color: var(--text); padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.overview-post-item:last-child { border-bottom: none; }
.overview-channels-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.overview-channel-chip {
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  font-size: var(--fs-xs);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
}
.overview-channel-chip:hover { border-color: var(--accent); }

/* -- Overview size classes ---- */
.overview-size-small { grid-column: span 1; }
.overview-size-wide  { grid-column: span 2; }
.overview-size-full  { grid-column: 1 / -1; }

/* -- Overview custom card body ---- */
.overview-custom-body {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* About sidebar */
.overview-about-heading {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.overview-about-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}
.overview-about-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.overview-about-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.overview-about-invite {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.1s;
  background: none;
  border: none;
  width: 100%;
  margin-bottom: 12px;
}
.overview-about-invite:hover { color: var(--accent); }
.overview-about-invite-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  flex-shrink: 0;
}
.overview-about-role-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 10px 0 4px;
}
.overview-about-members {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.overview-about-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s cubic-bezier(0.32,0.72,0,1);
}
.overview-about-member-row:hover { background: var(--surface-3); }
.overview-about-avatar {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  overflow: visible;
}
.overview-about-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.overview-about-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--surface-2);
}
.overview-about-status.online  { background: var(--status-online); }
.overview-about-status.idle    { background: var(--status-idle); }
.overview-about-status.dnd     { background: var(--status-danger); }
.overview-about-status.offline { background: var(--status-offline); }
.overview-about-member-info { display: flex; flex-direction: column; min-width: 0; }
.overview-about-member-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overview-about-member-status {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- Customize button (overlaid on hero) ---- */
.overview-edit-btn {
  padding: 5px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-sm);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s, border-color 0.15s;
}
.overview-edit-btn:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.4);
}

/* -- Edit mode grid ---- */
.overview-grid--editing .overview-section {
  border: 2px dashed var(--accent-dim);
  position: relative;
  cursor: grab;
  min-height: 100px;
}
.overview-grid--editing .overview-section.dragging { opacity: 0.4; }
.overview-grid--editing .overview-section.drag-over {
  border-color: var(--accent);
  background: rgba(0, 255, 180, 0.04);
}
.overview-edit-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.overview-edit-handle {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
  letter-spacing: 2px;
}
.overview-edit-size-btn,
.overview-edit-delete-btn {
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.overview-edit-size-btn:hover { border-color: var(--accent); color: var(--accent); }
.overview-edit-delete-btn { margin-left: auto; }
.overview-edit-delete-btn:hover { border-color: var(--status-danger); color: var(--status-danger); }
.overview-edit-label { font-size: var(--fs-md); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.overview-edit-sublabel { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; }
.overview-custom-title-input {
  width: 100%;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 8px;
  outline: none;
}
.overview-custom-title-input:focus { border-color: var(--accent); }
.overview-custom-content-input {
  width: 100%;
  min-height: 80px;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.overview-custom-content-input:focus { border-color: var(--accent); }
.overview-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--accent-dim) !important;
  background: transparent !important;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  color: var(--text-muted);
  min-height: 100px;
}
.overview-add-card:hover { border-color: var(--accent) !important; color: var(--accent); }
.overview-add-card-icon { font-size: var(--fs-2xl); line-height: 1; }
.overview-add-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 6px 0;
  min-width: 200px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.overview-add-menu-item {
  padding: 8px 14px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  transition: background .2s cubic-bezier(0.32,0.72,0,1);
}
.overview-add-menu-item:hover { background: var(--surface-3); }
.overview-edit-toolbar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  background: var(--surface-2);
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 8px;
  z-index: 50;
}
.overview-toolbar-right { display: flex; gap: 8px; }
.overview-toolbar-btn {
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s, border-color 0.15s;
}
.overview-toolbar-reset { background: transparent; color: var(--text-muted); }
.overview-toolbar-reset:hover { border-color: var(--status-danger); color: var(--status-danger); }
.overview-toolbar-cancel { background: transparent; color: var(--accent); border-color: var(--accent); }
.overview-toolbar-cancel:hover { background: rgba(127, 255, 212, 0.07); }
.overview-toolbar-save { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; }
.overview-toolbar-save:hover { opacity: 0.9; }
.overview-toolbar-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* Sidebar Sections nav */
.sidebar-sections-block {
  padding: 8px 8px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 4px;
}
.sidebar-sections-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 6px 4px;
}
.sidebar-section-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .2s cubic-bezier(0.32,0.72,0,1), color 0.1s;
}
.sidebar-section-item { position: relative; }
.sidebar-section-item:hover { background: var(--surface-3); color: var(--text); }
.sidebar-section-item.active { background: var(--surface-3); color: var(--text); font-weight: 600; }
.sidebar-section-item svg { opacity: 0.7; flex-shrink: 0; }
.app-pending-badge {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: var(--status-danger); color: #fff; font-size: var(--fs-xs); font-weight: 700;
  min-width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 9px; padding: 0 5px; box-sizing: border-box;
}

/* -- Responsive ---- */
@media (max-width: 900px) {
  .overview-body { grid-template-columns: 1fr; }
  .overview-about { border-left: none; border-top: 1px solid rgba(255,255,255,0.04); }
}
@media (max-width: 700px) {
  .overview-size-wide,
  .overview-size-full { grid-column: span 1; }
  .overview-hero { height: auto; flex: none; }
}

/* ── Tournament cards ──────────────────────────────────── */
.tournament-card, .form-card {
  padding: 12px 14px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: border-color 220ms ease-out, transform 220ms var(--motion-spring), box-shadow 220ms ease-out;
}
.tournament-card:hover, .form-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 0 0 1px var(--accent-dim);
}
.tournament-card-header, .form-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text);
}
.tournament-status, .form-status-badge {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.tournament-card-meta, .form-card-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
}
.form-card-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 2px;
}
.tournament-card-actions, .form-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* ── Form field builder ──────────────────────────────── */
.form-field-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.form-field-label-input {
  flex: 1;
  min-width: 0;
}
.form-field-type-select {
  width: 100px;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: var(--fs-sm);
}
.form-field-options-input {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
}

/* ── Bracket display ─────────────────────────────────── */
.bracket-section-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.bracket-teams { display: flex; flex-direction: column; gap: 4px; }
.bracket-team {
  padding: 6px 10px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text);
}
.bracket-rounds { display: flex; gap: 16px; overflow-x: auto; padding: 8px 0; }
.bracket-round { min-width: 180px; }
.bracket-round-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.bracket-match {
  padding: 8px 10px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: var(--fs-sm);
}
.bracket-match-team { padding: 3px 0; color: var(--text); }
.bracket-match-team.winner { color: var(--accent); font-weight: 600; }
.bracket-match-vs { font-size: var(--fs-2xs); color: var(--text-muted); text-align: center; }

/* ── Form responses ──────────────────────────────────── */
.form-fill-section {
  padding: 12px 14px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.form-your-response {
  padding: 12px 14px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.form-response-card {
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.form-response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text);
  margin-bottom: 4px;
}

#sidebar-footer {
  position: fixed;
  bottom: 8px;
  left: 8px;
  width: calc(72px + 240px - 16px);
  padding: 10px 12px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(30,30,30,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  z-index: 20;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
#dm-sidebar-footer {
  padding: 0 8px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  flex-shrink: 0;
}

.user-avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-3);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.user-avatar-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-avatar-sm.speaking {
  box-shadow: 0 0 0 2px var(--status-online), 0 0 8px var(--status-online);
  animation: voice-pulse 0.8s ease-in-out infinite alternate;
}

#footer-username {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.footer-status-text {
  font-size: var(--fs-xs);
  color: var(--status-success);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.footer-status-text .status-dot-inline {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-success);
  flex-shrink: 0;
}
.footer-status-text.idle .status-dot-inline { background: var(--status-warning); }
.footer-status-text.idle { color: var(--status-warning); }
.footer-status-text.dnd .status-dot-inline { background: var(--status-dnd); }
.footer-status-text.dnd { color: var(--status-dnd); }
.footer-status-text.invisible .status-dot-inline { background: var(--status-offline); }
.footer-status-text.invisible { color: var(--status-offline); }

/* Footer voice buttons (mic + speaker with dropdown arrows) */
.footer-voice-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.footer-voice-btn-wrap {
  display: flex;
  align-items: center;
  position: relative;
}
.footer-voice-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.footer-voice-btn svg { width: 18px; height: 18px; }
.footer-voice-btn:hover { color: var(--text); background: var(--accent-dim); }
.footer-voice-btn.muted {
  color: var(--status-dnd);
}
.footer-voice-btn.muted:hover { color: var(--status-danger); }
.footer-voice-dropdown {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-2xs);
  padding: 0 3px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.footer-voice-btn-wrap:hover .footer-voice-dropdown { opacity: 1; }
.footer-voice-dropdown:hover { color: var(--text); }

/* ── Main Content ─────────────────────────────────── */
#main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--chat-bg, var(--surface-2));
  min-width: 0;
}

#channel-topbar {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--surface-2);
}

#channel-topbar-name   { font-weight: bold; color: var(--accent); }
#channel-topbar-name::before { content: '# '; }

#channel-topbar-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-left: 4px;
  border-left: 1px solid rgba(255,255,255,0.06);
  padding-left: 10px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-md);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
  margin-left: auto;
}

.topbar-btn:hover   { color: var(--accent); background: var(--accent-dim); }
.topbar-btn.active  { color: var(--accent); }

#message-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Jump to Present Bar ──────────────────────────── */
.jump-to-present {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
  /* Translucent accent over surface — lets theme ambient show through
     instead of slab-coloring the accent over chat content. */
  background: color-mix(in oklab, var(--accent) 18%, var(--surface-2));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--accent-dim);
  font-size: var(--fs-sm, 0.825rem);
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
  flex-shrink: 0;
}
.jump-to-present:hover { background: color-mix(in oklab, var(--accent) 28%, var(--surface-2)); }
.jump-to-present span { flex: 1; }
.jump-to-present button {
  background: none;
  color: var(--accent);
  border: none;
  font-size: var(--fs-sm, 0.825rem);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.jump-to-present button:hover { opacity: 0.8; }

/* Safari / older browser fallback if color-mix unsupported */
@supports not (background: color-mix(in oklab, red 50%, blue)) {
  .jump-to-present { background: var(--accent-dim); }
  .jump-to-present:hover { background: var(--accent-dim); }
}

.msg-empty {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

/* ── Message ──────────────────────────────────────── */
.message {
  display: flex;
  gap: 14px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.25s cubic-bezier(0.32,0.72,0,1);
  position: relative;
}

.message:hover { background: rgba(255,255,255,0.02); }

.msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1.5px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color 0.3s ease;
}

.message:hover .msg-avatar { border-color: rgba(255,255,255,0.1); }

.msg-body { flex: 1; min-width: 0; }

.msg-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.msg-username { font-size: var(--fs-md); font-weight: bold; color: var(--accent); }
.msg-time     { font-size: var(--fs-xs); color: var(--text-muted); }
.msg-e2e-lock { color: var(--accent); opacity: 0.5; margin-left: 4px; vertical-align: middle; display: inline-flex; }
.e2e-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.05em;
  color: var(--accent); opacity: 0.6;
  background: rgba(var(--accent-rgb, 0,255,180), 0.08);
  padding: 1px 6px; border-radius: 8px; margin-left: 6px;
  cursor: default;
}

.msg-content {
  font-size: var(--fs-md);
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
}

.msg-edited {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-left: 5px;
  font-style: italic;
}

/* DM read receipt indicators */
.msg-receipt {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-left: 6px;
  letter-spacing: -2px;
}
.msg-receipt.read {
  color: var(--accent);
}

/* Deleted message placeholder */
.message-deleted {
  opacity: 0.6;
}
.msg-deleted {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-sm);
  padding: 6px 0;
  margin: 0;
}

/* Inline edit textarea */
.msg-edit-area {
  width: 100%;
  background: var(--surface-3);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: var(--fs-md);
  font-family: sans-serif;
  resize: none;
  outline: none;
  box-shadow: var(--accent-glow);
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
}

.msg-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.msg-edit-actions button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.msg-edit-save   { color: var(--accent); border: 1px solid rgba(255,255,255,0.05) !important; }
.msg-edit-cancel { color: var(--accent); border: 1px solid rgba(255,255,255,0.05) !important; }
.msg-edit-save:hover   { background: var(--accent-dim) !important; }
.msg-edit-cancel:hover { background: var(--accent-dim) !important; }

/* Message action buttons (hover toolbar) */
.msg-actions {
  display: none;
  position: absolute;
  top: -16px;
  right: 16px;
  gap: 2px;
  background: var(--surface-1);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 10;
}

.message:hover .msg-actions {
  display: flex;
  animation: pa-msg-actions-in 160ms var(--motion-spring);
}
.message-deleted:hover .msg-actions { display: none; }
@keyframes pa-msg-actions-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--text-muted);
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.msg-action-btn:hover         { background: var(--accent-dim); color: var(--accent); }
.msg-action-btn.delete:hover  { background: var(--status-danger-dim); color: var(--status-danger); }

/* ── Typing indicator ──────────────────────────────── */
#typing-indicator {
  height: 20px;
  padding: 0 28px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  flex-shrink: 0;
}
.typing-name { font-weight: 600; font-style: normal; }

/* ── Message input bar ─────────────────────────────── */
#message-input-bar {
  padding: 8px 16px 16px;
  background: var(--surface-2);
  flex-shrink: 0;
}

#message-input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 12px 16px;
  font-size: var(--fs-md);
  font-family: var(--ui-font), sans-serif;
  outline: none;
  resize: none;
  max-height: 160px;
  overflow-y: auto;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}

#message-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim), inset 0 1px 2px rgba(0,0,0,0.15); }
#message-input::placeholder { color: var(--text-muted); opacity: 0.6; }

/* ── Empty state ───────────────────────────────────── */
#empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text-muted);
  font-size: var(--fs-md);
  text-align: center;
  padding: 2rem;
}

#empty-state h2 {
  font-size: var(--fs-lg);
  -webkit-text-stroke: 1px var(--accent);
  color: transparent;
  text-shadow: var(--accent-glow);
}

/* ── Members Panel ─────────────────────────────────── */
#members-panel {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface-1);
  border-left: 1px solid rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  transition: width 260ms var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), opacity 200ms ease-out;
  overflow: hidden;
}

#members-panel.panel-hidden {
  width: 0;
  opacity: 0;
  border-left: none;
}

#members-panel-header {
  padding: 0 14px;
  height: 52px;
  display: flex;
  align-items: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  flex-shrink: 0;
}

#members-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
}

.members-section-label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 8px 6px;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: default;
  transition: background 0.25s cubic-bezier(0.32,0.72,0,1);
}

.member-item:hover { background: rgba(255,255,255,0.03); }

.member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1.5px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--accent);
  flex-shrink: 0;
  position: relative;
}

.member-avatar.online  { border-color: var(--status-success); }
.member-avatar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  background: var(--text-muted);
  opacity: 0;
}

.member-avatar.online::after { background: var(--status-success); opacity: 1; }

.member-name {
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-item.offline .member-name { color: var(--text-muted); }

/* ── Modal ─────────────────────────────────────────── */
dialog {
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  color: var(--text);
  padding: 2rem;
  width: 380px;
  max-width: 95vw;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: auto;
  animation: dialogIn 0.4s cubic-bezier(0.32,0.72,0,1) both;
}

@keyframes dialogIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

#dialog-confirm {
  width: 340px;
  text-align: center;
}
#dialog-confirm .dialog-actions {
  justify-content: center;
}

/* Alert/confirm/prompt text: wrap long URLs and other unbreakable strings
   so they don't overflow the dialog (the Stripe tax-config error message
   contains a long URL that was previously clipping on the right). */
#alert-message,
#confirm-message,
#prompt-message {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
}
#alert-message a,
#confirm-message a {
  color: var(--accent);
  word-break: break-all;
}

#dialog-create-channel {
  width: 440px;
}

#dialog-role-edit {
  width: 520px;
  max-height: calc(100vh - 60px);
}

#dialog-server-settings {
  width: 520px;
  max-height: calc(100vh - 60px);
}

#dialog-server-settings #settings-tabs {
  flex-wrap: wrap;
}

/* Ensure tournament & form tab content is scrollable */
#stab-tournaments,
#stab-forms {
  max-height: 50vh;
  overflow-y: auto;
}

#confirm-message {
  font-size: var(--fs-md);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

dialog h2 {
  color: var(--accent);
  font-size: var(--fs-lg);
  margin-bottom: 1.25rem;
  letter-spacing: 0.05em;
}

.dialog-field { margin-bottom: 1rem; }

.dialog-field label:not(.toggle-row) {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.dialog-field input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-size: var(--fs-md);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dialog-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }

.dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* .btn-confirm = Primary tier (affirmative dialog action) */
.btn-confirm {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm, 0.825rem);
  font-family: var(--ui-font), sans-serif;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: 0 0 20px var(--accent-dim);
  transition: background-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), border-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), box-shadow 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), transform 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), opacity 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
}
.btn-confirm:hover {
  background: var(--accent);
  color: var(--bg);
  transform: translateY(-1px);
  box-shadow: var(--accent-glow);
}
.btn-confirm:active { transform: translateY(0) scale(0.98); }
.btn-confirm:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ══════════════════════════════════════════════════════════════════
   BUTTON HIERARCHY — 4 semantic tiers
   All button classes route through --btn-* tier tokens (theme.css).
   Tiers: primary | secondary | tertiary | danger
   Existing class names preserved for backward compat.
   ══════════════════════════════════════════════════════════════════ */

/* Tier 2: Secondary — cancels, neutral alternate actions */
.btn-secondary,
.btn-cancel {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm, 0.825rem);
  font-family: var(--ui-font), sans-serif;
  cursor: pointer;
  border: 1px solid var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  transition: background-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), border-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), box-shadow 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), transform 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), opacity 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
}
.btn-secondary:hover,
.btn-cancel:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--hairline-focus, rgba(255,255,255,0.2));
  transform: translateY(-1px);
}
.btn-secondary:active,
.btn-cancel:active { transform: translateY(0) scale(0.98); }
.btn-secondary:disabled,
.btn-cancel:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Tier 4: Danger — destructive actions, delete confirms */
.btn-delete,
.btn-danger-outline {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm, 0.825rem);
  font-family: var(--ui-font), sans-serif;
  cursor: pointer;
  border: 1px solid var(--btn-danger-border);
  background: var(--btn-danger-bg);
  color: var(--btn-danger-text);
  transition: background-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), border-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), box-shadow 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), transform 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), opacity 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
}
.btn-delete:hover,
.btn-danger-outline:hover {
  background: var(--btn-danger-bg-hover);
  transform: translateY(-1px);
}
.btn-delete:active,
.btn-danger-outline:active { transform: translateY(0) scale(0.98); }

/* ── Dialog tabs ───────────────────────────────────── */
#server-dialog-tabs, #settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding-bottom: 0.5rem;
}

.srv-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
}

.srv-tab.active { color: var(--accent); background: var(--accent-dim); }
.srv-tab:hover  { color: var(--text); background: rgba(255,255,255,0.04); }

/* ── Icon upload row ───────────────────────────────── */
.upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-preview {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}

.icon-preview img { width: 100%; height: 100%; object-fit: cover; }

.upload-btn {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.05);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.upload-btn:hover { border-color: var(--accent); background: rgba(255,255,255,0.04); }

.upload-file-name {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* ── Invite list in settings ───────────────────────── */
.invite-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invite-empty { font-size: var(--fs-sm); color: var(--text-muted); text-align: center; padding: 1rem 0; }

.invite-row {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.invite-code {
  font-family: monospace;
  font-size: var(--fs-sm);
  color: var(--accent);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invite-meta { font-size: var(--fs-xs); color: var(--text-muted); }

.invite-copy-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 3px 7px;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.invite-copy-btn:hover   { border-color: var(--accent); color: var(--accent); }
.invite-copy-btn.copied  { border-color: var(--status-success); color: var(--status-success); }

.invite-revoke-btn {
  background: transparent;
  border: none;
  color: var(--status-danger);
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 3px;
  border-radius: 4px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.invite-revoke-btn:hover { background: var(--status-danger-dim); }

/* ── Invite preview box (join dialog) ──────────────── */
.invite-preview-box {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

#invite-server-name { font-size: var(--fs-md); color: var(--accent); flex: 1; }
.invite-member-count { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Context menus ─────────────────────────────────── */
#channel-context-menu,
#message-context-menu,
#dm-context-menu,
#dm-sidebar-context-menu {
  position: fixed;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
  z-index: 1000;
  overflow: hidden;
  min-width: 160px;
  padding: 4px;
  /* Origin-aware scale: JS sets --menu-origin-x/y from the click point
     so the menu appears to "grow from" the cursor, not from its own center.
     Falls back to top-left if JS doesn't set origin. */
  transform-origin: var(--menu-origin-x, 0) var(--menu-origin-y, 0);
  animation: ctxIn 160ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes ctxIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

#channel-context-menu button,
#message-context-menu button,
#dm-context-menu button,
#dm-sidebar-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 4px);
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.32,0.72,0,1), color 0.2s cubic-bezier(0.32,0.72,0,1), border-color 0.2s cubic-bezier(0.32,0.72,0,1), box-shadow 0.2s cubic-bezier(0.32,0.72,0,1), transform 0.2s cubic-bezier(0.32,0.72,0,1), opacity 0.2s cubic-bezier(0.32,0.72,0,1);
}

#channel-context-menu button:hover,
#message-context-menu button:hover,
#dm-context-menu button:hover,
#dm-sidebar-context-menu button:hover { background: rgba(255,255,255,0.04); color: var(--accent); }

#channel-context-menu .ctx-danger:hover,
#message-context-menu .ctx-danger:hover,
#dm-context-menu .ctx-danger:hover,
#dm-sidebar-context-menu .ctx-danger:hover { background: var(--status-danger-dim); color: var(--status-danger); }

/* ── Voice area ────────────────────────────────────── */
.voice-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  transition: background .2s cubic-bezier(0.32,0.72,0,1);
  cursor: pointer;
  min-width: 0;
}
.voice-member-card:hover { background: var(--surface-3); }

.voice-member-name {
  font-size: var(--fs-xs);
  color: var(--text);
  text-align: center;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.2;
}

.voice-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--accent);
  box-shadow: var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  color: var(--accent);
  flex-shrink: 0;
}

.voice-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.voice-avatar.speaking {
  border-color: var(--status-online);
  box-shadow: 0 0 12px rgba(67,181,129,0.7), 0 0 24px rgba(67,181,129,0.4);
  animation: voice-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes voice-pulse {
  from { box-shadow: 0 0 8px var(--status-online), 0 0 16px rgba(67,181,129,0.25); }
  to   { box-shadow: 0 0 14px rgba(67,181,129,0.8), 0 0 28px rgba(67,181,129,0.45); }
}
.voice-avatar.muted {
  border-color: var(--status-danger);
  box-shadow: 0 0 10px rgba(237,66,69,0.5), 0 0 20px rgba(237,66,69,0.25);
  animation: none;
}
.voice-avatar.deafened {
  border-color: #555;
  box-shadow: none;
  opacity: 0.4;
  filter: grayscale(0.8);
  animation: none;
}
/* Deafened overrides muted (deafened implies muted) */
.voice-avatar.muted.deafened {
  border-color: #555;
  box-shadow: none;
  opacity: 0.4;
  filter: grayscale(0.8);
}
.voice-member-name { font-size: var(--fs-sm); color: var(--text-muted); }

.voice-leave-btn {
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--status-danger);
  background: transparent;
  color: var(--status-danger);
  cursor: pointer;
  font-size: var(--fs-md);
  transition: background 0.2s, box-shadow 0.2s;
}
.voice-leave-btn:hover { background: var(--status-danger-dim); box-shadow: 0 0 8px rgba(255,77,106,0.3); }

/* ── Voice users sidebar sub-list ──────────────────── */
.voice-users-row {
  padding: 2px 12px 4px 32px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.voice-user-row-item {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s cubic-bezier(0.32,0.72,0,1), color 0.1s;
}
.voice-user-row-item:hover {
  background: var(--surface-3);
  color: var(--text);
}
.voice-user-row-item.dragging { opacity: 0.4; }
.voice-user-row-item[draggable="true"] { cursor: grab; }
.voice-user-row-item[draggable="true"]:active { cursor: grabbing; }
.voice-user-row-item.speaking { color: var(--status-online); font-weight: 600; }
.voice-user-row-item.speaking::before { color: var(--status-online); }
.voice-drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }

/* Voice rooms in sidebar */
.voice-rooms-list {
  padding: 2px 0 2px 24px;
}
.voice-room-sidebar-item {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s;
}
.voice-room-sidebar-item:hover {
  background: var(--surface-3);
  color: var(--text);
}
.voice-room-sidebar-limit {
  margin-left: auto;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  opacity: 0.7;
}

/* Voice room context menu */
#room-context-menu,
.room-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  padding: 4px 0;
  min-width: 160px;
}
#room-context-menu button,
.room-ctx-menu .context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
}
#room-context-menu button:hover,
.room-ctx-menu .context-menu-item:hover { background: var(--surface-3); }
#room-context-menu button.ctx-danger,
.room-ctx-menu .context-menu-item.danger { color: var(--status-danger); }
#room-context-menu button.ctx-danger:hover,
.room-ctx-menu .context-menu-item.danger:hover { background: rgba(244,67,54,0.1); }
#room-context-menu button .icon,
.room-ctx-menu .context-menu-item .icon { width: 14px; height: 14px; flex-shrink: 0; }

.voice-user-row-item::before { content: '◉'; font-size: var(--fs-2xs); color: var(--accent); }

/* ── Voice sidebar room labels ─────────────────────── */
.voice-user-room-label {
  font-size: var(--fs-2xs);
  font-family: var(--label-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 0 1px;
  opacity: 0.7;
}
.voice-user-room-label .icon { width: 10px; height: 10px; vertical-align: middle; }

/* ── Voice Room Sections (main panel) ─────────────── */
#voice-rooms-container {
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

/* Tree node: holds a room card + optional children row below */
.voice-tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

/* Children row: siblings sit side by side */
.voice-tree-children {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  justify-content: center;
  margin-top: 24px;
  position: relative;
  width: 100%;
}

/* Guide line: vertical stem from parent card down to horizontal bar */
.voice-tree-children::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 24px;
  background: var(--border);
}

/* Each child node gets a vertical line dropping into its card */
.voice-tree-child {
  position: relative;
  flex: 1 1 160px;
  max-width: 420px;
  min-width: 140px;
  padding-top: 20px;
}

/* Vertical drop line from horizontal bar into child card */
.voice-tree-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--border);
}

/* Horizontal bar connecting sibling drop lines
   Uses a real element injected by JS (.voice-tree-hbar) for accurate positioning */
.voice-tree-hbar {
  position: absolute;
  top: 0;
  height: 2px;
  background: var(--border);
  pointer-events: none;
}

.voice-room-section {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  overflow: hidden;
  width: 100%;
}

/* ── Responsive: stack children on narrow screens ─── */
@media (max-width: 600px) {
  .voice-tree-children { flex-direction: column; align-items: center; gap: 0; }
  .voice-tree-child { max-width: 100%; min-width: 0; flex: none; width: 90%; }
  .voice-tree-hbar { display: none; }
  .voice-tree-children::before { display: none; }
  .voice-tree-child::before { height: 12px; top: 0; }
  .voice-tree-child { padding-top: 12px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .voice-tree-child { flex: 1 1 140px; min-width: 120px; max-width: 300px; }
}
@media (min-width: 901px) {
  .voice-tree-child { flex: 1 1 180px; min-width: 160px; max-width: 420px; }
}

.voice-room-section.current-room {
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-dim);
}

.voice-room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-3);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.voice-room-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  flex: 1;
}

.voice-room-header-left .icon { width: 16px; height: 16px; opacity: 0.6; flex-shrink: 0; }

.voice-room-name {
  font-weight: 600;
  font-family: var(--ui-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-room-count {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  flex-shrink: 0;
}

.voice-room-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}

.voice-room-join-btn {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: var(--ui-font);
  font-size: var(--fs-xs);
  padding: 3px 10px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.voice-room-join-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

.voice-room-edit-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
}
.voice-room-header:hover .voice-room-edit-btn { opacity: 1; }
.voice-room-edit-btn:hover { color: var(--accent); }
.voice-room-edit-btn.danger:hover { color: var(--status-danger); }
.voice-room-chat-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 2px; opacity: 0.6; transition: opacity .15s, color .15s;
}
.voice-room-chat-btn:hover { opacity: 1; color: var(--accent); }
.voice-room-chat-btn .icon { width: 14px; height: 14px; }
.voice-room-edit-btn .icon { width: 14px; height: 14px; }

.voice-room-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  padding: 10px 12px;
  min-height: 36px;
}

.voice-room-members:empty::after {
  content: 'No users';
  font-size: var(--fs-xs);
  color: var(--text-muted);
  opacity: 0.5;
  font-style: italic;
}

/* ── Nested voice room tree layout (handled by .voice-tree-* classes) ── */

/* ── Speak down/up icons in member cards ────────── */
.icon-speak-down .icon,
.icon-speak-up .icon {
  width: 14px; height: 14px;
}
.icon-speak-down { color: var(--accent); }
.icon-speak-up   { color: var(--status-info); }

/* ── Speak down/up button active states ─────────── */
.voice-ctrl-btn#btn-voice-speak-down.active { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-dim); }
.voice-ctrl-btn#btn-voice-speak-up.active   { color: var(--status-info); background: var(--status-info-dim); border-color: rgba(96,165,250,0.3); }

/* ── Keybind recorder popover ───────────────────── */
.keybind-popover {
  position: fixed;
  z-index: 9999;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  padding: 10px 12px;
  width: 220px;
}
.kbp-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
}
.kbp-header strong { font-size: var(--fs-sm); }
.kbp-target { color: var(--text-muted); font-size: var(--fs-xs); }
.keybind-display-sm {
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  font-size: var(--fs-sm);
  font-family: monospace;
  color: var(--accent);
  margin-bottom: 8px;
}
.kbp-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.kbp-actions .btn-sm { font-size: var(--fs-xs); padding: 3px 10px; }
.keybind-display-sm { cursor: pointer; transition: border-color 0.15s; }
.keybind-display-sm.kbp-active { border-color: var(--accent); }

/* ── Voice topbar actions ─────────────────────────── */
#voice-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

#voice-topbar-actions {
  display: flex;
  gap: 6px;
}

.voice-topbar-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.voice-topbar-btn:hover { color: var(--accent); border-color: var(--accent); }
.voice-topbar-btn .icon { width: 16px; height: 16px; }

/* ── Broadcast control button styling ─────────────── */
#btn-voice-broadcast-ctrl .icon { width: 16px; height: 16px; }
#btn-voice-broadcast-ctrl.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
  animation: broadcast-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes broadcast-pulse {
  from { box-shadow: none; }
  to   { box-shadow: 0 0 8px var(--accent); }
}

/* ── Small icon size utility ─────────────────────── */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }

/* ── Misc ──────────────────────────────────────────── */
.dialog-error {
  font-size: var(--fs-sm);
  color: var(--status-dnd);
  min-height: 1rem;
  margin-top: 0.25rem;
}

/* ── Attach button in input bar ────────────────────── */
#message-input-bar, #dm-input-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 2px;
}

.attach-btn {
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.2s, background 0.2s;
  user-select: none;
}

.attach-btn:hover { color: var(--accent); background: var(--accent-dim); }

/* ── Attachment preview bar ────────────────────────── */
#attachment-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 4px;
  background: var(--surface-2);
}

#attachment-preview-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  min-width: 0;
}

#attachment-preview-inner img {
  max-height: 60px;
  max-width: 80px;
  border-radius: 4px;
  object-fit: cover;
}

.attach-preview-name {
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.attach-preview-size {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

#btn-remove-attachment {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-md);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}

#btn-remove-attachment:hover { color: var(--status-danger); background: var(--status-danger-dim); }

/* ── Message attachments ───────────────────────────── */
.msg-attachment { margin-top: 6px; }

.msg-attachment-img {
  max-width: min(400px, 100%);
  max-height: 300px;
  border-radius: var(--radius-sm);
  display: block;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.05);
  transition: opacity 0.2s;
}
.msg-attachment-img:hover { opacity: 0.9; }

.msg-attachment-video {
  max-width: min(400px, 100%);
  max-height: 300px;
  border-radius: var(--radius-sm);
  display: block;
  border: 1px solid rgba(255,255,255,0.05);
}

.msg-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: border-color 0.2s, background 0.2s;
}
.msg-attachment-file:hover { border-color: var(--accent); background: rgba(255,255,255,0.03); }
.msg-attachment-file-icon { font-size: var(--fs-lg); }
.msg-attachment-file-info { display: flex; flex-direction: column; min-width: 0; }
.msg-attachment-file-name { color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.msg-attachment-file-size { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Announcement channel styles ────────────────────── */
.announcement-channel .message {
  border: 1px solid var(--card-border);
  background: var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.announcement-channel .msg-content {
  font-size: var(--fs-md);
}
.announce-readonly-bar {
  padding: 10px 16px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--surface-2);
  border-top: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}

/* ── Announcement rich compose ─────────────────────── */
#announcement-compose {
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: var(--surface-2);
  flex-shrink: 0;
}
#announcement-compose .ql-toolbar {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
#announcement-compose .ql-container {
  border: none;
  min-height: 80px;
  max-height: 260px;
  overflow-y: auto;
}
#announcement-compose .ql-editor {
  min-height: 80px;
}
.announcement-compose-footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── User settings rename hint ─────────────────────── */
.rename-limit-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
  min-height: 1rem;
}

.rename-limit-hint.warn { color: var(--status-warning); }
.rename-limit-hint.err  { color: var(--status-dnd); }

/* ── Bio textarea ──────────────────────────────────── */
.dialog-field textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-size: var(--fs-md);
  font-family: sans-serif;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dialog-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.dialog-field textarea::placeholder { color: var(--text-muted); }

/* ── Color wheel (user name colour picker) ──────────── */
#color-wheel-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

#user-color-wheel {
  border-radius: 50%;
  cursor: crosshair;
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  display: block;
}

#color-wheel-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding-top: 6px;
}

.color-wheel-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-wheel-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

#user-color-brightness {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #111 0%, var(--accent) 100%);
  outline: none;
  cursor: pointer;
  border: none;
}
#user-color-brightness::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg);
  box-shadow: 0 0 4px var(--accent);
}
#user-color-brightness::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg);
}

.color-wheel-hex-hash {
  font-size: var(--fs-md);
  color: var(--text-muted);
  flex-shrink: 0;
  font-family: monospace;
}

.color-wheel-hex-input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 5px 8px;
  font-size: var(--fs-sm);
  font-family: monospace;
  outline: none;
  letter-spacing: 0.05em;
  transition: border-color 0.2s;
}
.color-wheel-hex-input:focus { border-color: var(--accent); }

.color-wheel-reset {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 5px 10px;
  transition: border-color 0.15s, color 0.15s;
  text-align: left;
}
.color-wheel-reset:hover { border-color: var(--status-danger); color: var(--status-danger); }

/* Section label inside dialog fields */
.color-wheel-section-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Gradient preset styles removed (presets removed from UI) */

/* Role color swatches (still swatch-based, kept for role edit dialog) */
#role-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 30px);
  gap: 6px;
  margin-bottom: 10px;
}

.color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.15s, transform 0.15s;
  position: relative;
}
.color-swatch:hover   { transform: scale(1.15); }
.color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

.swatch-check {
  font-size: var(--fs-xs);
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.8);
  display: none;
}
.color-swatch.selected .swatch-check { display: block; }

/* Colour preview row (below wheel) */
#color-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

#color-preview-label { font-size: var(--fs-xs); color: var(--text-muted); flex-shrink: 0; }

#color-preview-name {
  font-size: var(--fs-md);
  font-weight: bold;
  color: var(--accent);
}

/* ── Role badges ───────────────────────────────────── */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 4px;
  opacity: 0.9;
}

.msg-roles {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

.member-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}

.member-name-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Profile Popup ─────────────────────────────────── */
/* ── Profile Popup (Discord-style) ───────────────── */
#profile-popup {
  position: fixed;
  z-index: 2000;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 300px;
  max-width: 90vw;
  overflow: hidden;
  animation: profileIn 0.35s cubic-bezier(0.32,0.72,0,1) both;
}

@keyframes profileIn {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

#profile-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: var(--fs-lg);
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s;
  line-height: 1;
}
#profile-popup-close:hover { background: rgba(0,0,0,0.75); }

#profile-popup-banner {
  height: 60px;
  background: linear-gradient(135deg, var(--accent-dim), var(--surface-3));
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}

.profile-popup-avatar-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
  margin-top: -36px;
  position: relative;
  z-index: 2;
}

.profile-popup-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 4px solid var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.profile-popup-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-popup-badges {
  display: flex;
  gap: 4px;
  padding: 4px 12px 0;
  align-self: flex-start;
}

.profile-popup-body {
  padding: 4px 12px 12px;
  text-align: left;
}

.profile-popup-username {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
  line-height: 1.3;
}

.profile-popup-pronouns {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 1px;
}

.profile-popup-sep {
  height: 1px;
  background: var(--accent-dim);
  margin: 8px 0;
}

.profile-popup-bio {
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 4px;
}

.profile-popup-section { margin-top: 8px; }
.profile-popup-section-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.profile-popup-joined {
  font-size: var(--fs-xs);
  color: var(--text);
}

.profile-popup-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.profile-popup-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.profile-popup-actions .popup-action-btn {
  flex: 1;
  padding: 6px 8px;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.05);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.profile-popup-actions .popup-action-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.profile-popup-actions .popup-action-btn.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}
.profile-popup-actions .popup-action-btn.primary:hover {
  opacity: 0.9;
}

.profile-popup-snowflake {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  margin-top: 6px;
  cursor: pointer;
}
.profile-popup-snowflake:hover { color: var(--text); }

.profile-popup-last-online {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── User Panel Popup (bottom-left, Discord-style) ── */
#user-panel-popup {
  position: fixed;
  z-index: 2500;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 300px;
  overflow: visible;
  bottom: 60px;
  left: 72px;
}

#user-panel-banner {
  height: 100px;
  background: linear-gradient(135deg, var(--accent-dim), var(--surface-3));
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}

.user-panel-avatar-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
  margin-top: -36px;
  position: relative;
  z-index: 2;
}

.user-panel-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 4px solid var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  color: var(--accent);
  overflow: hidden;
}
.user-panel-avatar img { width: 100%; height: 100%; object-fit: cover; }

.user-panel-body {
  padding: 4px 12px 12px;
  text-align: left;
}

.user-panel-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-panel-sep {
  height: 1px;
  background: var(--accent-dim);
  margin: 8px 0;
}

.user-panel-section-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.user-panel-statuses {
  padding: 0 4px;
}

/* Master status row — single row showing current status */
.status-master {
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
  position: relative;
}
.status-master:hover { background: var(--surface-3); }

/* Status options inside L2 flyout */
.user-panel-statuses .status-picker-option {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
  position: relative;
}
.user-panel-statuses .status-picker-option:hover { background: var(--surface-3); }
.user-panel-statuses .status-picker-option.active { background: var(--accent-dim); color: var(--accent); }

.submenu-arrow { margin-left: auto; color: var(--text-muted); font-size: var(--fs-md); flex-shrink: 0; }

/* Flyout submenu (both L2 and L3) */
.status-submenu {
  display: none;
  position: absolute;
  left: calc(100% + 4px);
  bottom: 0;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 4px;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 10;
}
/* L2/L3 shown via JS hover-intent (.visible class) */
.status-master.has-submenu > .status-submenu.visible { display: block; }
.status-picker-option.has-submenu > .status-submenu.visible { display: block; }

.status-submenu-header {
  padding: 4px 10px 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.status-duration {
  padding: 5px 10px;
  font-size: var(--fs-sm);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.status-duration:hover { background: var(--surface-3); }

.user-panel-custom-status input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 8px;
  font-size: var(--fs-sm);
  outline: none;
}
.user-panel-custom-status input:focus { border-color: var(--accent); }

.user-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-panel-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.user-panel-action-btn:hover { background: var(--surface-3); }
.user-panel-action-btn svg { opacity: 0.7; }

/* ── Clickable usernames ───────────────────────────── */
.msg-username, .member-name {
  cursor: pointer;
}
.msg-username:hover { text-decoration: underline; }

/* ── Roles list in server settings ─────────────────── */
#roles-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 4px;
}

.role-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
}

.role-row-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.role-row-name {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 500;
}

.role-row-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 3px 8px;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.role-row-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Permission checkboxes ─────────────────────────── */
.perm-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.perm-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.perm-row:hover { background: rgba(255,255,255,0.04); }

.perm-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Text column: label on top, description below */
.perm-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.perm-row-label {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}

.perm-row-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Guilded-style Roles Panel (split layout) ──────── */
/* When Roles panel is active, remove content padding so the split layout fills the area */
.settings-content:has(.sp-roles-panel.active) { padding: 0; }
.settings-content > .sp-roles-panel { max-width: none; }
.sp-roles-panel { padding: 0 !important; overflow: hidden; height: 100%; }
.sp-roles-layout {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* Left sidebar — role list */
.sp-roles-sidebar {
  width: 200px;
  min-width: 160px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 20px 0;
  overflow-y: auto;
  background: var(--bg);
}
.sp-roles-sidebar h3 {
  font-family: var(--ui-font);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin: 0 16px 12px;
}
.sp-roles-add-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 12px;
  padding: 8px 12px;
  background: none;
  border: 1px dashed var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-family: var(--ui-font);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
  text-align: left;
}
.sp-roles-add-btn:hover { border-color: var(--accent); color: var(--accent); }

.sp-roles-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}
.sp-role-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--ui-font);
}
.sp-role-list-item:hover { background: var(--surface-1); }
.sp-role-list-item.active { background: var(--surface-2); }
.sp-role-list-item-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  color: var(--bg);
  font-weight: 700;
}
.sp-role-list-item-icon img { width: 100%; height: 100%; object-fit: cover; }
.sp-role-list-item-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-roles-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 12px 16px 0;
  line-height: 1.4;
}

/* Right editor */
.sp-roles-editor {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  min-width: 0;
}
.sp-roles-editor-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0 48px;
}
.sp-roles-editor-top > div {
  flex: 1 1 300px;
  min-width: 280px;
}
.sp-roles-editor-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.sp-role-field {
  margin-bottom: 28px;
}
.sp-role-field > label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.sp-role-field input[type="text"] {
  width: 100%;
}

/* Color tabs */
.sp-role-color-tabs {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.sp-role-color-tab {
  padding: 6px 16px;
  font-size: var(--fs-sm);
  font-family: var(--ui-font);
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.sp-role-color-tab.active {
  background: var(--accent);
  color: var(--bg);
}
.sp-role-color-tab:not(.active):hover { color: var(--text); }

#sp-role-color-wheel-wrap, #sp-role-gradient-wheel-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
#sp-role-color-wheel, #sp-role-gradient-wheel {
  border-radius: 50%;
  cursor: crosshair;
  flex-shrink: 0;
}
.sp-role-color-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding-top: 6px;
}
.sp-gradient-preview {
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.05);
  margin-top: 4px;
}

/* Role icon */
.sp-role-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-role-icon-preview {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--accent-dim);
}
.sp-role-icon-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sp-role-icon-remove {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
}
.sp-role-icon-remove:hover { color: var(--danger); }

/* Role settings toggles */
.sp-role-settings-list {
  display: flex;
  flex-direction: column;
}
.sp-role-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.sp-role-setting-row > div { min-width: 0; flex: 1; }
.sp-role-setting-row:last-child { border-bottom: none; }
.sp-role-setting-label {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 500;
}
.sp-role-setting-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Permissions — tri-state (Guilded-style) */
.sp-role-bulk-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.sp-role-bulk-actions button {
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.sp-role-permissions {
  display: flex;
  flex-direction: column;
}
.sp-perm-category {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 12px;
  letter-spacing: 0.02em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sp-perm-category:first-child { margin-top: 0; }

.sp-perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sp-perm-row:last-child { border-bottom: none; }
.sp-perm-info { flex: 1; min-width: 0; }
.sp-perm-label {
  font-size: var(--fs-md);
  color: var(--text);
  font-weight: 600;
}
.sp-perm-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* Tri-state button group — larger, colored like Guilded */
.sp-perm-tristate {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.sp-perm-tristate button {
  width: 40px;
  height: 36px;
  border: none;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s, opacity 0.12s;
}
.sp-perm-tristate button:not(:last-child) { border-right: 1px solid var(--border); }
.sp-perm-tristate button:hover { background: var(--surface-3); }
.sp-perm-tristate button.deny-active {
  background: var(--status-danger);
  color: #fff;
}
.sp-perm-tristate button.default-active {
  background: var(--surface-3);
  color: var(--text);
}
.sp-perm-tristate button.allow-active {
  background: var(--status-success);
  color: #fff;
}

/* Role actions footer */
.sp-role-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

/* ── Role members assign dialog ────────────────────── */
.role-members-assign-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 4px;
}

.role-member-assign-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
}

.role-member-assign-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.role-member-assign-avatar img { width: 100%; height: 100%; object-fit: cover; }

.role-member-assign-name { flex: 1; font-size: var(--fs-sm); color: var(--text); }

.role-member-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 3px 10px;
  color: var(--text-muted);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.role-member-toggle.has-role { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.role-member-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ══════════════════════════════════════════════════════
   NEW FEATURES — appended
   ══════════════════════════════════════════════════════ */

/* ── DM icon in server rail ────────────────────────── */
.server-icon-dm {
  margin-bottom: 4px;
  border-style: solid;
}
.server-icon-dm.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.rail-logo {
  width: 28px;
  height: 28px;
}

/* ── Voice controls bar (above sidebar footer) ─────── */
/* Floating card that visually "pops out" of the sidebar-footer profile
   card below. Matches the footer's glassy style (blurred background,
   hairline border, rounded corners, drop shadow) and animates up from
   the footer on entry so it looks like it's emerging from the profile
   card. */
#voice-bar-wrap {
  padding: 0 8px 6px; /* breathing room around the floating card */
}
#voice-controls-bar {
  background: rgba(30,30,30,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  padding: 10px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform-origin: bottom center;
  animation: vc-bar-pop-out 380ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes vc-bar-pop-out {
  0%   { opacity: 0; transform: translateY(28px) scale(0.88); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
/* Mirror of the entry animation, run via the .vc-bar-exiting class so
   the element animates down into the profile card before display:none
   actually hides it (JS adds the class, listens for animationend). */
#voice-controls-bar.vc-bar-exiting {
  animation: vc-bar-close 260ms ease-in forwards;
  pointer-events: none;
}
@keyframes vc-bar-close {
  0%   { opacity: 1; transform: translateY(0)    scale(1);   }
  100% { opacity: 0; transform: translateY(24px) scale(0.9); }
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  #voice-controls-bar,
  #voice-controls-bar.vc-bar-exiting { animation: none; }
}

/* Status row: green dot + text + disconnect button */
.vc-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vc-status-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* vc-status-dot removed — replaced by vc-signal-btn */

.vc-status-text {
  min-width: 0;
}

.vc-status-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--status-online);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  cursor: pointer;
}
.vc-status-label:hover { text-decoration: underline; }

#voice-controls-channel-name {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
#voice-controls-channel-name:hover {
  color: var(--text);
  text-decoration: underline;
}

/* vc-signal-btn removed — signal bars are now the clickable element */

/* Signal bars indicator */
.vc-signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.vc-signal-bars span {
  width: 3px;
  border-radius: 1px;
  background: var(--status-online);
  transition: background-color 200ms ease-out;
}
.vc-signal-bars span:nth-child(1) { height: 4px; }
.vc-signal-bars span:nth-child(2) { height: 6px; }
.vc-signal-bars span:nth-child(3) { height: 8px; }
.vc-signal-bars span:nth-child(4) { height: 11px; }
.vc-signal-bars span:nth-child(5) { height: 14px; }
.vc-signal-bars.quality-good span { background: var(--status-online); }
.vc-signal-bars.quality-ok span { background: var(--status-idle); }
.vc-signal-bars.quality-bad span { background: var(--status-danger); }
.vc-signal-bars.quality-ok span:nth-child(4),
.vc-signal-bars.quality-ok span:nth-child(5) { background: var(--surface-1); }
.vc-signal-bars.quality-bad span:nth-child(3),
.vc-signal-bars.quality-bad span:nth-child(4),
.vc-signal-bars.quality-bad span:nth-child(5) { background: var(--surface-1); }

/* Always-visible ping readout */
.vc-ping-readout {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-left: auto;
  padding-right: 10px;
  font-family: var(--label-font, 'IBM Plex Mono'), monospace;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
  color: var(--text-muted);
}
.vc-ping-value {
  font-size: var(--fs-sm, 0.825rem);
  font-weight: 600;
}
.vc-ping-unit {
  font-size: var(--fs-2xs, 0.625rem);
  opacity: 0.7;
  letter-spacing: 0.08em;
}
.vc-ping-readout.quality-good { color: var(--status-online); }
.vc-ping-readout.quality-ok   { color: var(--status-idle); }
.vc-ping-readout.quality-bad  { color: var(--status-danger); }

.vc-disconnect-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--status-danger-dim);
  color: var(--status-danger);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.vc-disconnect-btn svg { width: 16px; height: 16px; }
.vc-disconnect-btn:hover {
  background: var(--status-danger);
  color: #fff;
}

/* ── Voice Details / Noise Suppression Popovers ──── */
.vc-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  padding: 14px;
  z-index: 100;
  font-size: var(--fs-sm);
  color: var(--text);
}
.vc-popover-stats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.vc-popover-stats strong { color: var(--text); }
.vc-popover-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 10px;
}
.vc-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.vc-secure-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--status-online);
}
.vc-secure-badge .icon { width: 12px; height: 12px; }
.vc-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 600;
}
.vc-popover-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 12px;
}
.vc-mic-test {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vc-mic-meter {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.vc-mic-fill {
  height: 100%;
  width: 0%;
  background: var(--status-online);
  border-radius: 3px;
  transition: width 0.1s;
}

/* Voice timer */
.vc-timer {
  font-weight: 400;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  margin-left: 6px;
}

/* ── Floating voice controls bar (bottom of voice area) ── */
#voice-floating-bar {
  position: sticky;
  bottom: 16px;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(30,31,34,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 28px;
  padding: 8px 12px;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.vf-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.vf-btn svg { width: 20px; height: 20px; }
.vf-btn:hover { background: var(--surface-3); color: var(--text); }
.vf-btn.active { background: var(--accent-dim); color: var(--accent); }
.vf-btn.vf-disconnect {
  background: var(--status-danger);
  color: #fff;
}
.vf-btn.vf-disconnect:hover { background: #d83c3c; }

/* Control buttons row */
#voice-controls-btns {
  display: flex;
  gap: 4px;
}

.voice-ctrl-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
  line-height: 1;
}
.voice-ctrl-btn svg { width: 18px; height: 18px; }
.voice-ctrl-btn:hover     { color: var(--text); background: var(--surface-1); }
.voice-ctrl-btn.active    { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-dim); }
.voice-ctrl-btn.active:hover { background: var(--accent-dim); }
.voice-ctrl-btn.disabled  { opacity: 0.25; pointer-events: none; }

/* ── Voice area ────────────────────────────────────── */
#voice-topbar {
  height: 52px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}

#voice-channel-name {
  font-size: var(--fs-md);
  font-weight: bold;
  color: var(--accent);
}

#voice-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  overflow: hidden;
}

#voice-members-list {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

#screen-share-view {
  width: 100%;
  max-width: 900px;
  position: relative;
}

#screen-share-video {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.06);
  background: #000;
  max-height: 60vh;
  object-fit: contain;
}

#screen-share-label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: rgba(0,0,0,0.55);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── Remote screen shares ──────────────────────────── */
.remote-screen-wrap {
  width: 640px;
  height: 360px;
  max-width: 100%;
  min-width: 320px;
  min-height: 180px;
  position: relative;
  margin-top: 12px;
  overflow: visible;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.06);
  background: #000;
}
.screen-resize-handle {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  background: var(--accent);
  border-radius: 4px;
  opacity: 0.4;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  color: var(--bg);
  transition: opacity 0.15s, transform 0.15s;
}
.screen-resize-handle::after { content: '⤡'; }
.remote-screen-wrap:hover .screen-resize-handle { opacity: 0.9; transform: scale(1.1); }
.remote-screen-wrap:fullscreen { border: none; border-radius: 0; max-width: none; width: 100% !important; height: 100% !important; }
.remote-screen-video {
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
  display: block;
}
.remote-screen-label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: var(--fs-xs);
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
}
.remote-screen-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.remote-screen-wrap:hover .remote-screen-controls { opacity: 1; }
.screen-ctrl-btn {
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: var(--fs-md);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.screen-ctrl-btn:hover { background: rgba(0,0,0,0.9); }

/* ── Modal (generic) ──────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.modal-header h3 { margin: 0; font-size: var(--fs-md); color: var(--text); }
.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.modal-close-btn:hover { color: var(--text); background: var(--surface-3); }
.modal-body { padding: 20px; flex: 1; }

/* ── Multi-Stream Grid ─────────────────────────────── */
.stream-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 4px;
  flex: 1;
  min-height: 0;
  padding: 4px;
}
.stream-grid:empty { display: none; }

.stream-tile {
  position: relative;
  background: #111;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stream-tile video { width: 100%; height: 100%; object-fit: contain; }
.stream-tile-label {
  position: absolute;
  bottom: 6px; left: 8px;
  font-size: var(--fs-xs);
  color: #fff;
  background: rgba(0,0,0,0.65);
  padding: 2px 8px;
  border-radius: 3px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stream-tile-label .live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--status-danger);
  animation: live-pulse 1.5s infinite;
}
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.stream-tile-controls {
  position: absolute;
  top: 6px; right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.stream-tile:hover .stream-tile-controls { opacity: 1; }
.stream-tile-btn {
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: var(--fs-xs);
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.stream-tile-btn:hover { background: rgba(0,0,0,0.95); }

.stream-focused {
  flex: 1;
  min-height: 0;
  position: relative;
  background: #000;
}
.stream-focused video { width: 100%; height: 100%; object-fit: contain; }
.stream-focused .stream-tile-label { bottom: 10px; left: 12px; font-size: var(--fs-sm); }
.stream-focused .stream-tile-controls { top: 10px; right: 10px; }
.stream-focused:hover .stream-tile-controls { opacity: 1; }

.stream-grid.has-focus {
  flex: none;
  grid-template-columns: repeat(auto-fill, 160px);
  max-height: 100px;
  overflow-x: auto;
  overflow-y: hidden;
}
.stream-grid.has-focus .stream-tile { min-height: 90px; cursor: pointer; }
.stream-grid.has-focus .stream-tile-controls { display: none; }
.stream-grid.has-focus .stream-tile-label { font-size: var(--fs-2xs); padding: 1px 4px; }

/* ── Stream URL Dialog ──────────────────────────────── */
.stream-section {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 16px;
}
.stream-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.stream-section-header strong { font-size: var(--fs-sm); color: var(--text); }
.stream-section-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 4px 0 0;
  line-height: 1.4;
}
.stream-field { margin-bottom: 10px; }
.stream-field label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}
.stream-field-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.stream-input {
  flex: 1;
  font-size: var(--fs-sm);
  font-family: var(--mono-font, monospace);
  padding: 7px 10px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
}
.stream-input:focus { border-color: var(--accent); }
.stream-obs-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

/* ── DM area ───────────────────────────────────────── */
#dm-topbar {
  height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
  background: var(--surface-2);
}

/* DM topbar call buttons */
.dm-topbar-actions { display: flex; gap: 6px; margin-left: auto; }
.dm-topbar-btn {
  background: none; border: 1px solid var(--border); border-radius: 50%; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-muted); transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.dm-topbar-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-3); }
.dm-topbar-btn .icon { width: 16px; height: 16px; }

/* DM call bar (active call controls) */
#dm-call-bar {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;
  background: var(--surface-3); border-bottom: 1px solid rgba(255,255,255,0.04); flex-shrink: 0;
}
.dm-call-bar-info { display: flex; align-items: center; gap: 10px; }
.dm-call-bar-status { font-size: var(--fs-sm); font-weight: 600; color: var(--status-online); }
.dm-call-bar-timer { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dm-call-bar-controls { display: flex; gap: 8px; }
.dm-call-ctrl {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-muted); transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.dm-call-ctrl:hover { color: var(--text); border-color: var(--text-muted); }
.dm-call-ctrl.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.dm-call-ctrl .icon { width: 16px; height: 16px; }
.dm-call-hangup { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
.dm-call-hangup:hover { background: #c93b3e; }

/* DM video container */
#dm-call-video-container {
  position: relative; flex-shrink: 0; min-height: 280px; max-height: 60vh;
  margin: 12px; border-radius: var(--radius-lg); overflow: hidden;
  background: #0a0a0a; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
}
#dm-call-remote-video { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-lg); }
/* Local video: full-size preview while ringing, shrinks to PiP when call connects */
#dm-call-local-video {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); border: none;
  z-index: 2; transition: background-color .35s cubic-bezier(.4,0,.2,1), color .35s cubic-bezier(.4,0,.2,1), border-color .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1), opacity .35s cubic-bezier(.4,0,.2,1);
}
#dm-call-local-video.pip {
  position: absolute; bottom: 16px; right: 16px; width: 180px; height: 135px;
  border-radius: 12px; border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 16px rgba(0,0,0,.6);
}

/* Incoming call overlay */
.dm-call-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.dm-call-overlay-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 40px; text-align: center; min-width: 280px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6); animation: dm-call-pulse 2s ease-in-out infinite;
}
@keyframes dm-call-pulse {
  0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,.6); }
  50% { box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 8px rgba(67,181,129,.15); }
}
.dm-call-overlay-avatar {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--surface-3); display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xl); color: var(--accent); overflow: hidden;
}
.dm-call-overlay-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-call-overlay-name { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dm-call-overlay-label { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 20px; }
.dm-call-overlay-actions { display: flex; gap: 16px; justify-content: center; }
.dm-call-accept, .dm-call-decline {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform .12s;
}
.dm-call-accept { background: var(--status-online); color: #fff; }
.dm-call-decline { background: var(--status-danger); color: #fff; }
.dm-call-accept:hover, .dm-call-decline:hover { transform: scale(1.1); }
.dm-call-accept .icon, .dm-call-decline .icon { width: 22px; height: 22px; }

#dm-partner-name {
  font-size: var(--fs-md);
  font-weight: bold;
  color: var(--accent);
}

#dm-message-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#dm-typing-indicator {
  height: 20px;
  padding: 0 28px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  flex-shrink: 0;
}

#dm-attachment-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 4px;
  background: var(--surface-2);
}

#dm-attachment-preview-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  min-width: 0;
}

#dm-attachment-preview-inner img {
  max-height: 60px;
  max-width: 80px;
  border-radius: 4px;
  object-fit: cover;
}

#btn-dm-remove-attachment {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-md);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
}
#btn-dm-remove-attachment:hover { color: var(--status-danger); background: var(--status-danger-dim); }

#dm-input-bar {
  padding: 10px 16px 14px;
  background: var(--surface-2);
  flex-shrink: 0;
}

#dm-input {
  flex: 1;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 11px 16px;
  font-size: var(--fs-md);
  font-family: sans-serif;
  outline: none;
  resize: none;
  max-height: 160px;
  overflow-y: auto;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#dm-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
#dm-input::placeholder { color: var(--text-muted); }

/* ── DM sidebar (2nd column, shown in DM/friends mode) */
#dm-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface-1);
  border-right: 1px solid rgba(255,255,255,0.03);
  border-left: 1px solid rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#dm-sidebar-header {
  padding: 0 12px 0 14px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  flex-shrink: 0;
}
#dm-sidebar-header span { flex: 1; }

#dm-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 6px;
}

.dm-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.25s cubic-bezier(0.32,0.72,0,1), color 0.25s cubic-bezier(0.32,0.72,0,1), border-color 0.25s cubic-bezier(0.32,0.72,0,1), box-shadow 0.25s cubic-bezier(0.32,0.72,0,1), transform 0.25s cubic-bezier(0.32,0.72,0,1), opacity 0.25s cubic-bezier(0.32,0.72,0,1);
}
.dm-sidebar-item:hover  { background: rgba(255,255,255,0.04); }
.dm-sidebar-item.active { background: var(--accent-dim); }

.dm-sidebar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.dm-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dm-sidebar-info {
  flex: 1;
  min-width: 0;
}
.dm-sidebar-name {
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-sidebar-preview {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Friends area ──────────────────────────────────── */
/* Friends area layout */
.friends-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

#friends-topbar {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
  background: var(--surface-2);
}

#friends-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
}
.fr-tab-label {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid var(--card-border);
}

.fr-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
}
.fr-tab.active { color: var(--text); background: rgba(255,255,255,0.08); }
.fr-tab:hover  { color: var(--text); background: rgba(255,255,255,0.04); }
.fr-tab-add {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.fr-tab-add:hover { filter: brightness(1.1); }
.fr-badge {
  background: var(--status-dnd);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 5px;
  margin-left: 4px;
}

.friends-search-bar {
  padding: 12px 20px;
  flex-shrink: 0;
}
.friends-search-bar input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  color: var(--text);
  font-size: var(--fs-sm);
  outline: none;
}
.friends-search-bar input:focus { border-color: var(--accent); }

.friends-section-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 20px;
}

#friends-content {
  flex: 1;
  overflow-y: auto;
}

.friends-add-section {
  padding: 20px;
  border-bottom: 1px solid var(--card-border);
}
.friends-add-section h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.friends-add-section p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* Active Now sidebar */
.friends-active-sidebar {
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid var(--card-border);
  background: var(--surface-1);
  padding: 16px;
  overflow-y: auto;
}
.friends-active-sidebar h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
}
.friends-active-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.friends-active-empty strong { color: var(--text); }
.friends-active-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  background: var(--surface-2);
  cursor: pointer;
}
.friends-active-item:hover { background: var(--surface-3); }
.friends-active-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-3);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.friends-active-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.friends-active-info { flex: 1; min-width: 0; }
.friends-active-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.friends-active-status { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.friends-active-status .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.friends-active-status .status-dot.online { background: var(--status-success); }
.friends-active-status .status-dot.idle { background: var(--status-warning); }
.friends-active-status .status-dot.dnd { background: var(--status-dnd); }

.fr-section-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  margin-top: 16px;
}
.fr-section-label:first-child { margin-top: 0; }

.friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 6px;
  transition: background 0.15s;
}
.friend-row:hover { background: rgba(255,255,255,0.03); }

.friend-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.friend-avatar img { width: 100%; height: 100%; object-fit: cover; }

.friend-name-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.friend-name {
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-status {
  font-size: var(--fs-xs);
  line-height: 1;
  white-space: nowrap;
}
.friend-status.online {
  color: var(--status-success);
}
.friend-status.offline {
  color: var(--text-muted);
}

.friend-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.fr-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 4px 10px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.fr-btn:hover      { border-color: var(--accent); color: var(--accent); }
.fr-btn.accept     { border-color: var(--status-success); color: var(--status-success); }
.fr-btn.accept:hover { background: rgba(74,222,128,0.1); }
.fr-btn.danger     { border-color: var(--status-danger); color: var(--status-danger); }
.fr-btn.danger:hover { background: var(--status-danger-dim); }

.add-friend-form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.add-friend-form input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-size: var(--fs-md);
  outline: none;
  transition: border-color 0.2s;
}
.add-friend-form input:focus { border-color: var(--accent); }

#add-friend-result {
  font-size: var(--fs-sm);
  min-height: 1rem;
  padding: 4px 0;
}
#add-friend-result.ok  { color: var(--status-success); }
#add-friend-result.err { color: var(--status-danger); }

/* ── Lightbox ───────────────────────────────────────── */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
}

#lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 50%;
  color: var(--accent);
  font-size: var(--fs-md);
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  z-index: 5001;
}
#lightbox-close:hover { background: var(--accent-dim); border-color: var(--accent); }

#lightbox-content {
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lightbox-content img,
#lightbox-content video {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: var(--radius-md);
  object-fit: contain;
  border: 2px solid var(--accent-dim);
  box-shadow: var(--shadow-lg);
}

#lightbox-content video { outline: none; }

/* ── GIF Picker ─────────────────────────────────────── */
#gif-picker {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 380px;
  max-width: 95vw;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

#gif-picker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}

#gif-search-input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 10px;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color 0.2s;
}
#gif-search-input:focus { border-color: var(--accent); }

#btn-close-gif-picker {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-md);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.15s;
}
#btn-close-gif-picker:hover { color: var(--text); }

#gif-favorites-bar {
  padding: 8px 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}

.gif-section-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

#gif-results-grid,
#gif-favorites-grid {
  columns: 3;
  column-gap: 4px;
  padding: 8px;
  overflow-y: auto;
}

#gif-results-grid { flex: 1; min-height: 0; }

.gif-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  transition: border-color 0.15s, transform 0.1s;
  break-inside: avoid;
  margin-bottom: 4px;
}
.gif-item:hover { border-color: var(--accent); transform: scale(1.03); }

.gif-item img {
  width: 100%;
  display: block;
  background: var(--surface-2);
}

.gif-fav-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.gif-item:hover .gif-fav-btn { opacity: 1; }
.gif-fav-btn.fav { color: var(--status-warning); opacity: 1; }

#gif-picker-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ── GIF button — styled badge ─────────────────────── */
.gif-btn {
  font-size: var(--fs-xs) !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 5px !important;
  padding: 2px 6px !important;
  line-height: 1.4;
  color: var(--accent) !important;
  background: transparent !important;
  opacity: 0.8;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s !important;
}
.gif-btn:hover {
  border-color: var(--accent) !important;
  background: var(--accent-dim) !important;
  opacity: 1;
}

/* ── Profile popup — banner ─────────────────────────── */
#profile-popup-banner {
  width: 100%;
  height: 72px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
  flex-shrink: 0;
}
#profile-popup-banner.has-banner {
  height: 90px;
}
#profile-popup-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Allow avatar to overlap banner */
#profile-popup {
  overflow: visible;
}
#profile-popup > .profile-popup-body {
  overflow: visible;
}

/* With banner the avatar overlap is more dramatic — increase height */
#profile-popup.has-banner #profile-popup-banner {
  height: 90px;
}

/* ── Profile popup — actions (DM / friend) ──────────── */
#profile-popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.popup-action-btn {
  flex: 1;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.05);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
  text-align: center;
}
.popup-action-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.04); }
.popup-action-btn.danger { border-color: var(--status-danger); color: var(--status-danger); }
.popup-action-btn.danger:hover { background: var(--status-danger-dim); }
.popup-action-btn.accept { border-color: var(--status-success); color: var(--status-success); }
.popup-action-btn.accept:hover { background: rgba(74,222,128,0.1); }

/* ── User settings — banner preview ────────────────── */
.banner-preview-box {
  width: 100%;
  height: 72px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  position: relative;
}
.banner-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── User settings — voice settings ────────────────── */
.voice-settings-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.voice-settings-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  width: 100px;
  flex-shrink: 0;
}
.voice-settings-select {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 5px 8px;
  font-size: var(--fs-sm);
  outline: none;
  cursor: pointer;
}
.voice-settings-select:focus { border-color: var(--accent); }

/* ── Hardware info grid (desktop voice settings) ───── */
.hw-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.hw-info-grid .hw-label {
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.hw-info-grid .hw-value {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hw-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hw-chip.hw-active {
  background: rgba(74, 222, 128, 0.15);
  color: var(--status-success);
}
.hw-chip.hw-inactive {
  background: var(--status-danger-dim);
  color: var(--status-danger);
}

/* ── DM notification badge ─────────────────────────── */
.server-icon-dm { position: relative; overflow: visible; }

/* Counter badge (iOS-style app badge) */
.dm-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--status-danger);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  line-height: 1;
  pointer-events: none;
  z-index: 5;
}

/* Subtle glow when there are unread DMs */
.server-icon-dm.has-notification {
  border-color: var(--status-danger);
  box-shadow: 0 0 0 2px rgba(255,77,106,0.3);
}

/* Hover popover showing per-user breakdown */
.dm-badge-popover {
  position: fixed;
  z-index: 9999;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
  min-width: 220px;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  display: none;
}
.dm-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.dm-badge-row:hover { background: var(--surface-2); }
.dm-badge-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
}
.dm-badge-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700;
}
.dm-badge-name { flex: 1; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.dm-badge-count { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

/* ── Voice member mute/deafen icons ─────────────────── */
.voice-member-icons {
  display: flex;
  gap: 4px;
  font-size: var(--fs-sm);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── DM sidebar active item ─────────────────────────── */
.dm-sidebar-item.active {
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* ── Profile popup action button variants ───────────── */
.popup-action-btn.danger { border-color: var(--status-danger); color: var(--status-danger); }
.popup-action-btn.danger:hover { background: var(--status-danger-dim); }
.popup-action-btn.accept { border-color: var(--status-success); color: var(--status-success); }
.popup-action-btn.accept:hover { background: rgba(74,222,128,0.1); }
.popup-action-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Message attachment — cursor for lightbox ────────── */
.msg-attachment-img,
.msg-attachment-video { cursor: zoom-in; }

/* ── GIF fav btn active state ────────────────────────── */
.gif-fav-btn.active { color: var(--status-warning); opacity: 1; }

/* ── Server rail separator (between DM btn and servers) */
.server-rail-separator {
  width: 36px;
  height: 1px;
  border: none;
  background: var(--accent-dim);
  flex-shrink: 0;
  margin: 2px 0;
}

/* ── Theme picker ─────────────────────────────────── */
.theme-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.theme-swatch {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 72px;
}
.theme-swatch-preview {
  display: flex;
  height: 36px;
  width: 100%;
  overflow: hidden;
}
.tsp-bar {
  flex: 1;
}
.tsp-accent {
  flex: 0.6;
}
.theme-swatch-name {
  display: block;
  padding: 4px 0 5px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.theme-swatch:hover {
  border-color: var(--accent);
}
.theme-swatch:hover .theme-swatch-name {
  color: var(--text);
}
.theme-swatch.active {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}
.theme-swatch.active .theme-swatch-name {
  color: var(--accent);
}
.theme-swatch.previewing {
  border-color: var(--accent);
  opacity: 1;
}

/* ── Interface & Themes — 2-column layout ─────────── */
.appearance-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}
.appearance-controls {
  min-width: 0;
}
.appearance-preview-pane {
  position: sticky;
  top: 16px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px;
}
.appearance-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.appearance-preview-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.appearance-preview-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
}
.if-theme-preview {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  border: 1px solid rgba(255,255,255,0.06);
  font-family: inherit;
}
.appearance-preview-hint {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  opacity: 0.6;
}

/* Responsive: stack on narrow widths */
@media (max-width: 720px) {
  .appearance-layout {
    grid-template-columns: 1fr;
  }
  .appearance-preview-pane {
    position: static;
  }
}

/* ── Role color wheel (mirrors user color wheel) ───── */
#role-color-wheel-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

#role-color-wheel {
  border-radius: 50%;
  cursor: crosshair;
  flex-shrink: 0;
  display: block;
}

#role-color-wheel-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding-top: 6px;
}

/* ── Tabbed User Settings Dialog ─────────────────── */
#dialog-user-settings:not([open]) {
  display: none;
}
#dialog-user-settings {
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  overflow: hidden;
  border-radius: 0;
  border: none;
  margin: 0;
}

.settings-nav {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface-2);
  border-right: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  padding: 60px 8px 20px;
  gap: 1px;
  overflow-y: auto;
}

.settings-nav-title {
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 0.6rem 0.6rem;
  margin-bottom: 4px;
}

.settings-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.settings-nav-btn:hover {
  background: var(--accent-dim);
  color: var(--text);
}

.settings-nav-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}

.settings-nav-sep {
  height: 1px;
  background: var(--accent-dim);
  margin: 0.6rem 0.4rem;
  flex-shrink: 0;
}

.settings-nav-logout {
  width: calc(100% - 12px);
  margin-left: 6px;
  text-align: left;
  font-size: var(--fs-sm);
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
}

/* Settings nav profile card + search */
.settings-nav-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 12px;
  margin-bottom: 4px;
}
.settings-nav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-3);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.settings-nav-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.settings-nav-user { min-width: 0; }
.settings-nav-username {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-nav-edit-link {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-decoration: none;
}
.settings-nav-edit-link:hover { color: var(--accent); text-decoration: underline; }
.settings-nav-search-wrap {
  padding: 0 8px 10px;
}
.settings-nav-search-wrap input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text);
  font-size: var(--fs-sm);
  outline: none;
}
.settings-nav-search-wrap input:focus { border-color: var(--accent); }

/* Account subtabs */
.account-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--card-border);
}
.account-subtab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.account-subtab:hover { color: var(--text); }
.account-subtab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Account section divider */
.account-section-divider {
  height: 1px;
  background: var(--card-border);
  margin: 24px 0;
}

/* Auth block */
.account-auth-block {
  margin-top: 20px;
  padding-top: 16px;
}
.account-auth-block h4 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}

/* Standing card */
.account-standing-card {
  padding: 20px;
}
.standing-status-good {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
}
.standing-icon { font-size: var(--fs-xl); }
.standing-status-good strong { color: var(--text); font-size: var(--fs-md); display: block; margin-bottom: 4px; }
.standing-status-good p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

.settings-nav-section-label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 0.75rem 4px;
  font-weight: 600;
}
.settings-nav-version {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  padding: 8px 0.75rem;
  opacity: 0.5;
}

/* ── Account Card ── */
.settings-account-card {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--card-border);
}
.settings-account-banner {
  height: 100px;
  background: linear-gradient(135deg, var(--accent-dim), var(--surface-3));
  position: relative;
}
.settings-account-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 12px;
  margin-top: -28px;
  position: relative;
}
.settings-account-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 5px solid var(--surface-2);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: 700;
}
.settings-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-account-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.settings-account-fields {
  padding: 0 16px 16px;
}
.settings-account-field {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--card-border);
}
.settings-account-field-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  width: 110px;
  flex-shrink: 0;
}
.settings-account-field-value {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text);
}

/* ── Settings Toggle Row ── */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--card-border);
  gap: 16px;
}
.settings-toggle-row div { flex: 1; }
.settings-toggle-row strong { font-size: var(--fs-sm); color: var(--text); font-weight: 500; }
.settings-toggle-row small { font-size: var(--fs-sm); color: var(--text-muted); display: block; margin-top: 2px; }

/* Toggle switch — uses existing .toggle-switch / .toggle-input / .toggle-slider system */

/* ── Radio groups ── */
.settings-radio-group { display: flex; flex-direction: column; gap: 8px; }
.settings-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}
.settings-radio input { accent-color: var(--accent); }

/* ── Keybind list ── */
.keybind-list { display: flex; flex-direction: column; gap: 2px; }
.keybind-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text);
}
.keybind-row span:first-child { flex: 1; }
.keybind-mode-tag {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px; font-weight: 600;
  background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border);
}
/* Keybind mode selector in recorder */
.kbp-mode-row {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
}
.kbp-mode-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.kbp-mode-btn {
  padding: 3px 10px; font-size: var(--fs-xs); border-radius: 4px; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text-muted);
  transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}
.kbp-mode-btn:hover { border-color: var(--accent); color: var(--text); }
.kbp-mode-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.keybind-row kbd {
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-family: monospace;
  color: var(--text-muted);
}

/* ── Device cards ── */
.settings-device-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.settings-device-icon::before { content: '\1F4BB'; font-size: var(--fs-xl); }
.settings-device-details strong { font-size: var(--fs-sm); color: var(--text); }

/* Tier 4: Danger (solid variant) — fully destructive actions */
.btn-danger {
  background: var(--status-danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: var(--fs-sm, 0.825rem);
  font-family: var(--ui-font), sans-serif;
  cursor: pointer;
  transition: background-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), border-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), box-shadow 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), transform 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), opacity 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
}
.btn-danger:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 16px var(--status-danger-dim); }
.btn-danger:active { transform: translateY(0) scale(0.98); }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-danger-outline {
  background: transparent;
  color: var(--danger, var(--status-danger));
  border: 1px solid var(--danger, var(--status-danger));
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger-outline:hover { background: rgba(218,55,60,0.1); }

.settings-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
  min-width: 0;
  background: var(--bg);
}

.settings-panels-wrap {
  flex: 1;
  padding: 60px 40px 40px;
  max-width: 960px;
  width: 100%;
}

.settings-panel { display: none; }
.settings-panel.active { display: block; }

.settings-panel h2 {
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.settings-panel h3 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 20px;
}

/* ── Forward Message Dialog ───────────────────────── */
.fwd-dialog:not([open]) { display: none; }
.fwd-dialog[open] {
  width: min(500px, 92vw);
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(680px, 85vh);
}
.fwd-dialog::backdrop { background: rgba(0,0,0,0.7); }
.fwd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 12px;
}
.fwd-header h3 { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.fwd-header p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.fwd-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.fwd-close:hover { color: var(--text); }
.fwd-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 12px;
  padding: 8px 12px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
}
.fwd-search-wrap:focus-within { border-color: var(--accent); }
.fwd-search-icon { font-size: var(--fs-md); opacity: 0.5; flex-shrink: 0; }
.fwd-search-wrap input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-size: var(--fs-md);
  outline: none;
}
.fwd-targets {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
  max-height: 340px;
  min-height: 120px;
}
.fwd-target-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s cubic-bezier(0.32,0.72,0,1);
}
.fwd-target-item:hover { background: rgba(255,255,255,0.03); }
.fwd-target-item.selected { background: var(--accent-dim); }
.fwd-target-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  overflow: hidden;
  position: relative;
}
.fwd-target-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fwd-target-avatar .fwd-channel-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--surface-1);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.fwd-target-info { flex: 1; min-width: 0; }
.fwd-target-name { font-size: var(--fs-md); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fwd-target-sub { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fwd-target-check {
  width: 22px;
  height: 22px;
  border: 2px solid var(--text-muted);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.fwd-target-item.selected .fwd-target-check {
  background: var(--accent);
  border-color: var(--accent);
}
.fwd-target-item.selected .fwd-target-check::after {
  content: '\2713';
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.fwd-preview {
  margin: 8px 16px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-sm);
  color: var(--text);
  max-height: 80px;
  overflow-y: auto;
  word-break: break-word;
}
.fwd-preview:empty { display: none; }
.fwd-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--card-border);
}
.fwd-footer input {
  flex: 1;
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 8px 16px;
  color: var(--text);
  font-size: var(--fs-sm);
  outline: none;
}
.fwd-footer input:focus { border-color: var(--accent); }
.fwd-send-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.fwd-send-btn:hover { filter: brightness(1.1); }

/* ── Download App Dialog ──────────────────────────── */
.dl-dialog:not([open]) { display: none; }
.dl-dialog[open] {
  width: min(540px, 92vw);
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dl-dialog::backdrop { background: rgba(0,0,0,0.7); }
.dl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 12px;
}
.dl-header h3 { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.dl-header p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.dl-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.dl-close:hover { color: var(--text); }
.dl-body { padding: 8px 24px 24px; }
.dl-body h4 {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 500;
  margin: 0 0 12px;
}
.dl-grid {
  display: grid;
  gap: 12px;
}
.dl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.dl-grid-2 { grid-template-columns: repeat(2, 1fr); }
.dl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s;
}
.dl-card:hover { border-color: var(--accent); }
.dl-card-disabled { opacity: 0.6; }
.dl-card-disabled:hover { border-color: var(--card-border); }
.dl-card-icon {
  width: 48px;
  height: 48px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-card-icon svg { width: 100%; height: 100%; }
.dl-icon-text {
  width: auto;
  height: auto;
}
.dl-macos-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 300;
  color: var(--text);
}
.dl-mac-sm { font-size: var(--fs-md); }
.dl-os-lg { font-size: var(--fs-2xl); font-weight: 400; margin-top: -4px; }
/* Deliberate Apple-rainbow visual quote for the iOS download card.
   Yes, this is gradient-text — banned by impeccable in general.
   Intentional exception here because the rainbow IS the iOS brand
   reference and a solid color flattens the meaning. Do not strip
   in future polish passes. */
.dl-ios-label {
  font-size: var(--fs-2xl);
  font-weight: 600;
  background: linear-gradient(135deg, #f06, #f90, #fc0, #0c0, #09f, #90f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dl-card-name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.dl-card-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s;
}
.dl-card-btn:hover { filter: brightness(1.1); }
.dl-card-soon {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--surface-3);
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 500;
}

/* ── Profile Edit Layout (form + preview side by side) ── */
.profile-edit-layout {
  display: flex;
  gap: 24px;
}
.profile-edit-form {
  flex: 1;
  min-width: 0;
}
.profile-section-divider {
  height: 1px;
  background: var(--card-border);
  margin: 20px 0;
}
.profile-upload-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-profile-action {
  padding: 6px 16px !important;
  font-size: var(--fs-sm) !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
}
.btn-profile-action-outline {
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 6px 16px;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-profile-action-outline:hover { background: var(--surface-3); }
.dialog-field-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 2px 0 8px;
}
.profile-edit-preview {
  width: 280px;
  flex-shrink: 0;
  margin-top: 0;
  position: sticky;
  top: 20px;
}
.profile-preview-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.profile-preview-card {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.profile-preview-banner {
  height: 80px;
  background: linear-gradient(135deg, var(--accent-dim), var(--surface-3));
  background-size: cover;
  background-position: center;
}
.profile-preview-avatar-row {
  display: flex;
  justify-content: center;
  margin-top: -32px;
  position: relative;
  z-index: 2;
}
.profile-preview-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 4px solid var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  color: var(--accent);
  overflow: hidden;
}
.profile-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-preview-body {
  padding: 4px 14px 14px;
  text-align: center;
}
.profile-preview-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
.profile-preview-pronouns {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 1px;
}
.profile-preview-sep {
  height: 1px;
  background: var(--accent-dim);
  margin: 8px 0;
}
.profile-preview-bio {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 700px) {
  .profile-edit-layout { flex-direction: column; }
  .profile-edit-preview { width: 100%; }
}

/* ── Toggle switch ─────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  position: relative;
  padding: 12px 0;
}
.toggle-label {
  font-size: var(--fs-md);
  color: var(--text);
  flex: 1;
  text-transform: none;
  letter-spacing: 0;
  padding-top: 2px;
}
.toggle-hint {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 400;
  line-height: 1.35;
}
/* Toggle switch wrapper */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  width: 52px;
  min-width: 52px;
  height: 28px;
  background: rgba(255,255,255,0.25);
  border: none;
  border-radius: 14px;
  position: relative;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
  order: 2;
  margin-top: 1px;
}
.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #e0e0e0;
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.toggle-row:hover .toggle-slider {
  background: rgba(255,255,255,0.32);
}
.toggle-input:checked + .toggle-slider {
  background: var(--accent);
  box-shadow: var(--accent-glow);
}
.toggle-input:checked + .toggle-slider::after {
  transform: translateX(24px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 0 2px var(--accent);
}
.toggle-row:hover .toggle-input:checked + .toggle-slider {
  filter: brightness(1.1);
}

/* ── Field select dropdown ─────────────────────────── */
.field-label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.field-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 12px;
  font-size: var(--fs-md);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.field-select:focus {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}
.field-select option {
  background: var(--surface-1);
  color: var(--text);
}

.settings-close-btn {
  position: fixed;
  top: 16px;
  right: 20px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
  z-index: 999;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-close-btn:hover {
  color: var(--text);
  background: var(--accent-dim);
}

.settings-footer {
  padding: 0.75rem 40px;
  border-top: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  background: var(--bg);
}

.settings-footer .dialog-error {
  flex: 1;
  margin: 0;
  font-size: var(--fs-sm);
}

.settings-footer-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── @Mention highlights ───────────────────────────────── */
.msg-mention {
  background: rgba(var(--accent-rgb, 0,255,180), 0.15);
  color: var(--accent, #00ffb4);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 600;
  cursor: pointer;
}

.msg-mention:hover {
  background: rgba(var(--accent-rgb, 0,255,180), 0.28);
}

/* ── Reply preview in message bubble ───────────────────── */
.msg-reply-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  border-left: 3px solid var(--accent, #00ffb4);
  background: rgba(255,255,255,0.04);
  border-radius: 0 4px 4px 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary, #8a8a8e);
  cursor: pointer;
  transition: background 0.15s;
}

.msg-reply-preview:hover {
  background: rgba(255,255,255,0.08);
}

.msg-reply-icon {
  font-size: var(--fs-xs);
  opacity: 0.6;
}

.msg-reply-author {
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.msg-reply-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

/* ── Reply button on messages ──────────────────────────── */
.msg-reply-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #8a8a8e);
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.message:hover .msg-reply-btn {
  opacity: 1;
}

.msg-reply-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #fff);
}

/* ── Message highlight flash (on reply click scroll) ──── */
.msg-highlight {
  animation: msgHighlight 1.5s ease-out;
}

@keyframes msgHighlight {
  0%   { background: rgba(var(--accent-rgb, 0,255,180), 0.18); }
  100% { background: transparent; }
}

/* ── Reply preview bar (above input) ───────────────────── */
.reply-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface-1, #1a1a2e);
  border-top: 1px solid var(--border, #2a2a3e);
  font-size: var(--fs-sm);
  color: var(--text-secondary, #8a8a8e);
  flex-shrink: 0;
}

.reply-bar-text {
  font-weight: 600;
  color: var(--accent, #00ffb4);
  white-space: nowrap;
}

.reply-bar-preview {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary, #8a8a8e);
}

.reply-bar-close {
  background: none;
  border: none;
  color: var(--text-secondary, #8a8a8e);
  cursor: pointer;
  font-size: var(--fs-md);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.reply-bar-close:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #fff);
}

/* ── @Mention autocomplete dropdown ────────────────────── */
.mention-dropdown {
  position: fixed;
  z-index: 9999;
  background: var(--surface-2, #22223a);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: var(--fs-sm);
  color: var(--text-primary, #fff);
}

.mention-item:hover,
.mention-item.selected {
  background: rgba(var(--accent-rgb, 0,255,180), 0.12);
}

.mention-item-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3, #2e2e48);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-secondary, #8a8a8e);
  flex-shrink: 0;
  overflow: hidden;
}

.mention-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Message reactions bar ─────────────────────────────── */
.msg-reactions-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
  padding: 2px 0;
}

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--surface-2, #22223a);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: var(--fs-sm);
  user-select: none;
}

.reaction-pill:hover {
  background: rgba(var(--accent-rgb, 0,255,180), 0.08);
  border-color: var(--accent, #00ffb4);
}

.reaction-pill.user-reacted {
  background: rgba(var(--accent-rgb, 0,255,180), 0.14);
  border-color: var(--accent, #00ffb4);
}

.reaction-emoji {
  font-size: var(--fs-md);
  line-height: 1;
}

.reaction-count {
  font-size: var(--fs-xs);
  color: var(--text-secondary, #8a8a8e);
  font-weight: 600;
  min-width: 8px;
  text-align: center;
}

.reaction-pill.user-reacted .reaction-count {
  color: var(--accent, #00ffb4);
}

.reaction-add-btn {
  background: transparent;
  border: 1px dashed var(--border, #2a2a3e);
  border-radius: 14px;
  width: 28px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background 0.15s, border-color 0.15s;
  opacity: 0;
}

.message:hover .reaction-add-btn,
.msg-reactions-bar:hover .reaction-add-btn {
  opacity: 1;
}

.reaction-add-btn:hover {
  background: rgba(var(--accent-rgb, 0,255,180), 0.08);
  border-color: var(--accent, #00ffb4);
}

/* ── Emoji Picker ──────────────────────────────────────── */
#emoji-picker {
  position: fixed;
  z-index: 10000;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
  width: 340px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pickerIn 0.3s cubic-bezier(0.32,0.72,0,1) both;
}

@keyframes pickerIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.react-picker-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  flex-shrink: 0;
}
.react-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 5px 8px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.react-tab:hover { color: var(--text); }
.react-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.react-search {
  margin: 6px 8px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 5px 8px;
  font-size: var(--fs-sm);
  outline: none;
  flex-shrink: 0;
}
.react-search:focus { border-color: var(--accent); }

#react-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
#react-grid.emote-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }

.emoji-picker-item {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-lg);
  padding: 4px;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s;
  line-height: 1.2;
  text-align: center;
}
.emoji-picker-item:hover {
  background: rgba(var(--accent-rgb, 0,255,180), 0.12);
  transform: scale(1.15);
}

.react-emote-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s cubic-bezier(0.32,0.72,0,1);
}
.react-emote-item:hover { background: var(--surface-3); }
.react-emote-item img { width: 28px; height: 28px; object-fit: contain; }
.react-emote-item span { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 1px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Subscription Panel ─────────────────────────────── */
.sub-current-tier {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.sub-current-info { display: flex; align-items: center; gap: 12px; }
.sub-current-info strong { font-size: var(--fs-lg); }
.sub-tier-status { font-size: var(--fs-sm); color: var(--text-muted); margin: 2px 0 0; }

.sub-gift-section, .sub-redeem-section { margin-bottom: 20px; }
.sub-gift-section h3, .sub-redeem-section h3 { font-size: var(--fs-md); margin-bottom: 8px; }
.sub-gift-count { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 10px; }
.sub-gift-actions { display: flex; gap: 8px; }
.sub-code-display {
  margin-top: 10px; padding: 8px 12px; background: var(--surface-2);
  border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px;
  font-family: monospace; font-size: var(--fs-md); letter-spacing: 0.15em;
}
.sub-redeem-row { display: flex; gap: 8px; }
.sub-redeem-row input { flex: 1; font-family: monospace; letter-spacing: 0.12em; }
.sub-redeem-msg { font-size: var(--fs-sm); margin-top: 6px; }
.sub-redeem-msg.success { color: var(--accent); }
.sub-redeem-msg.error { color: #f44; }

/* Subscription panel needs more width for 3-column card layout */
#settings-panel-subscription { max-width: 960px; }

.sub-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.sub-backer-teaser {
  text-align: center;
  padding: 20px 16px;
  margin-bottom: 16px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
}
.sub-backer-teaser p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 10px;
}
.sub-backer-teaser strong { color: var(--accent); }
.backer-teaser-link {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: opacity 0.15s;
}
.backer-teaser-link:hover { opacity: 0.8; text-decoration: underline; }
.sub-tier-card {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex; flex-direction: column;
  transition: border-color 0.2s;
}
.sub-tier-card:hover { border-color: var(--accent-dim); }
.sub-tier-card.current { border-color: var(--accent); }
.sub-tier-card .tier-card-name {
  font-size: var(--fs-md); font-weight: 700; margin-bottom: 2px;
  display: flex; align-items: center; gap: 6px;
}
.sub-tier-card .tier-card-price {
  font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 10px;
}
.sub-tier-card .tier-card-perks {
  flex: 1; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6;
  list-style: none; padding: 0; margin: 0 0 12px;
}
.sub-tier-card .tier-card-perks li::before { content: '✓ '; color: var(--accent); }
.sub-tier-card .tier-card-cta {
  margin-top: auto; text-align: center; font-size: var(--fs-sm); font-weight: 600;
  padding: 8px 0; border-radius: var(--radius-sm); border: none; width: 100%;
  cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.sub-tier-card .tier-card-cta.current {
  background: var(--accent-dim); color: var(--accent); cursor: default;
}
.sub-tier-card .tier-card-cta.subscribe {
  background: var(--accent); color: var(--bg); font-weight: 700;
}
.sub-tier-card .tier-card-cta.subscribe:hover:not(:disabled) {
  transform: scale(1.02); filter: brightness(1.1);
}
.sub-tier-card .tier-card-cta.subscribe:disabled {
  opacity: 0.6; cursor: wait;
}
.sub-tier-card .tier-card-cta.contact {
  background: var(--surface-3); color: var(--text-muted); cursor: not-allowed;
}
.sub-tier-card .seats-remaining {
  font-size: var(--fs-xs); color: var(--text-muted); text-align: center; margin-top: 4px;
}

/* ── Tier Badges ───────────────────────────────────── */
/* ── Inline Tier Badges (next to username in messages) ── */
.tier-badge-wrapper { cursor: pointer; }
.tier-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  font-size: 8px; line-height: 1; vertical-align: middle; margin-left: 4px;
  flex-shrink: 0; transition: transform 0.1s;
}
.tier-badge:hover { transform: scale(1.15); }
.tier-badge svg { width: 12px; height: 12px; }
@keyframes badge-expand {
  from { opacity: 0; transform: translateY(-50%) scale(0.6); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
.tier-badge-expanded { pointer-events: auto; }

/* Subscriber — Patched teal/mint (brand accent) */
.tier-badge-subscriber {
  background: linear-gradient(135deg, #0a5c4a, #00b894);
  color: #a0ffe0;
  box-shadow: 0 1px 3px rgba(0,184,148,0.35);
}
/* Supporter — electric cyan */
.tier-badge-supporter {
  background: linear-gradient(135deg, #0a4a6b, #00b4d8);
  color: #a0ecff;
  box-shadow: 0 1px 3px rgba(0,180,216,0.35);
}
/* Promoter — vivid purple */
.tier-badge-promoter {
  background: linear-gradient(135deg, #5a1a8a, #a855f7);
  color: #dcc0ff;
  box-shadow: 0 1px 3px rgba(168,85,247,0.35);
}
/* Backer — metallic bronze */
.tier-badge-backer {
  background: linear-gradient(135deg, #6b3a1a, #cd7f32, #a0522d);
  color: #f4c58a;
  box-shadow: 0 1px 4px rgba(205,127,50,0.4);
}
/* Backer Plus — metallic silver */
.tier-badge-backer_plus {
  background: linear-gradient(135deg, #6e7578, #c0c0c0, #e8e8e8, #a8a8a8);
  color: #f0f0f0;
  box-shadow: 0 0 0 1.5px rgba(192,192,192,0.5), 0 1px 4px rgba(192,192,192,0.3);
}
/* Backer Premiere — metallic gold */
.tier-badge-backer_premiere {
  background: linear-gradient(135deg, #8a6d1b, #ffd700, #e0b820, #c9a020);
  color: #fff8dc;
  box-shadow: 0 0 0 1.5px rgba(255,215,0,0.6), 0 0 8px rgba(255,215,0,0.4);
  animation: backer-glow 2s ease-in-out infinite alternate;
}
@keyframes backer-glow {
  from { box-shadow: 0 0 0 1.5px rgba(255,215,0,0.7), 0 0 6px rgba(255,215,0,0.3); }
  to   { box-shadow: 0 0 0 1.5px rgba(255,215,0,0.9), 0 0 12px rgba(255,215,0,0.5); }
}

/* Patched Pro — employee badge, warm orange/amber */
.tier-badge-patched_pro {
  background: linear-gradient(135deg, #4a2000, #e67e22, #f39c12);
  background-size: 200% 200%;
  color: #fff2d9;
  box-shadow: 0 0 0 1.5px rgba(230,126,34,0.5), 0 1px 4px rgba(243,156,18,0.3);
  animation: pro-shift 4s ease-in-out infinite;
}
@keyframes pro-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Founder — one-of-a-kind holographic/iridescent badge (platform creators only) */
.tier-badge-founder {
  background: linear-gradient(135deg, #00ffb4, #00b4d8, #a855f7, #ff6b9d, #ffd700);
  background-size: 300% 300%;
  color: #fff;
  box-shadow: 0 0 0 1.5px rgba(0,255,180,0.6), 0 0 10px rgba(0,255,180,0.3), 0 0 20px rgba(168,85,247,0.15);
  animation: founder-shift 3s ease-in-out infinite, founder-glow 2s ease-in-out infinite alternate;
  width: 18px; height: 18px;
  border-radius: 5px;
}
.tier-badge-founder svg { width: 14px; height: 14px; }
@keyframes founder-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes founder-glow {
  from { box-shadow: 0 0 0 1.5px rgba(0,255,180,0.6), 0 0 8px rgba(0,255,180,0.25), 0 0 16px rgba(168,85,247,0.1); }
  to   { box-shadow: 0 0 0 2px rgba(168,85,247,0.7), 0 0 12px rgba(168,85,247,0.3), 0 0 20px rgba(0,255,180,0.15); }
}

/* ── Platform Bridge Badges ── */
.platform-badge {
  font-size: var(--fs-2xs);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-left: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.3;
}
.platform-badge-discord { background: #5865F2; color: #fff; }
.platform-badge-slack   { background: #4A154B; color: #fff; }
.platform-badge-teams   { background: #6264A7; color: #fff; }

/* Bridged channel indicator in sidebar */
.channel-platform-icon {
  width: 12px; height: 12px;
  border-radius: 2px;
  margin-right: 2px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.channel-platform-icon.discord { background: #5865F2; }
.channel-platform-icon.slack   { background: #4A154B; }

/* ── Profile Tier Badges (in profile popup / settings) ── */
.tier-badge-hover-overlay {
  display: none;
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 600;
  align-items: center; justify-content: center;
  border-radius: inherit;
  white-space: nowrap;
}
.profile-tier-badge:hover .tier-badge-hover-overlay { display: flex; }
.profile-tier-badge:hover { opacity: 0.85; }

.profile-tier-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px;
  border-radius: 12px; margin-top: 4px; transition: opacity 0.15s;
}
.profile-badge-icon { display: flex; align-items: center; }
.profile-badge-icon svg { width: 14px; height: 14px; }

.profile-tier-badge.subscriber {
  background: rgba(0,184,148,0.12); color: #00e6b8;
  border: 1px solid rgba(0,184,148,0.3);
}
.profile-tier-badge.supporter {
  background: rgba(0,180,216,0.12); color: #00c8e8;
  border: 1px solid rgba(0,180,216,0.3);
}
.profile-tier-badge.promoter {
  background: rgba(168,85,247,0.12); color: #b880f0;
  border: 1px solid rgba(168,85,247,0.3);
}
.profile-tier-badge.backer {
  background: rgba(205,127,50,0.15); color: #cd7f32;
  border: 1px solid rgba(205,127,50,0.3);
}
.profile-tier-badge.backer_plus {
  background: rgba(192,192,192,0.12); color: #d0d0d0;
  border: 1px solid rgba(192,192,192,0.35);
  box-shadow: 0 0 6px rgba(192,192,192,0.15);
}
.profile-tier-badge.backer_premiere {
  background: rgba(201,160,32,0.2); color: #fff0a0;
  border: 1px solid rgba(255,215,0,0.5);
  box-shadow: 0 0 8px rgba(255,215,0,0.2);
}
.profile-tier-badge.patched_pro {
  background: rgba(230,126,34,0.15); color: #f0a050;
  border: 1px solid rgba(230,126,34,0.4);
  box-shadow: 0 0 6px rgba(230,126,34,0.15);
}
.profile-tier-badge.founder {
  background: linear-gradient(135deg, #00ffb4, #00b4d8, #a855f7, #ff6b9d, #ffd700);
  background-size: 300% 300%;
  color: #fff;
  border: 1px solid rgba(0,255,180,0.5);
  box-shadow: 0 0 8px rgba(0,255,180,0.25), 0 0 16px rgba(168,85,247,0.15);
  animation: founder-shift 3s ease-in-out infinite, founder-profile-glow 3s ease-in-out infinite alternate;
}
@keyframes founder-profile-glow {
  0%   { border-color: rgba(0,255,180,0.5); color: #00ffb4; }
  50%  { border-color: rgba(168,85,247,0.5); color: #c07ff0; }
  100% { border-color: rgba(255,107,157,0.5); color: #ff6b9d; }
}

/* ── Group Tabs Bar (hidden — replaced by group rail) */
#group-tabs-bar { display: none !important; }

/* ── Group Context Menu ───────────────────────────── */
#group-context-menu {
  position: fixed;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  box-shadow: var(--accent-glow);
  z-index: 1000;
  overflow: hidden;
  min-width: 140px;
}
#group-context-menu button {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
#group-context-menu button:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
#group-context-menu .ctx-danger:hover {
  background: var(--status-danger-dim);
  color: var(--status-danger);
}

/* ── Generic Context Menu (categories etc.) ──── */
.ctx-menu {
  position: fixed;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  box-shadow: var(--accent-glow);
  z-index: 9999;
  overflow: hidden;
  min-width: 160px;
}
.ctx-menu .ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.ctx-menu .ctx-item:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
.ctx-menu .ctx-item-danger:hover {
  background: var(--status-danger-dim);
  color: var(--status-danger);
}

/* ── Channel Context Menu — Move to Group Items ──── */
.ctx-group-sep {
  height: 1px;
  background: var(--accent-dim);
  margin: 4px 0;
}
.ctx-group-label {
  padding: 6px 14px !important;
  font-size: var(--fs-xs) !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: default !important;
  pointer-events: none;
}
.ctx-group-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.ctx-group-item.ctx-active {
  color: var(--accent);
}
.ctx-group-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Group Edit Dialog ────────────────────────────── */
#dialog-group-edit {
  width: min(520px, 95vw);
  max-height: 85vh;
  padding: 0;
}
.group-edit-form {
  padding: 20px 24px !important;
  overflow-y: auto;
  max-height: calc(85vh - 56px);
}
#dialog-group-edit .dialog-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
#dialog-group-edit .dialog-field label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--label-font);
}
/* Color swatch row */
.group-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.group-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-color-swatch:hover { transform: scale(1.15); }
.group-color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.group-color-custom {
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.group-color-hex-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-family: var(--label-font);
  margin-left: 4px;
}
/* Game and membership selects */
#group-edit-game,
#group-edit-membership-role {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  width: 100%;
}
#group-edit-game:focus,
#group-edit-membership-role:focus { border-color: var(--accent); outline: none; }
.group-field-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
}
.group-allowed-picker { position: relative; }
.group-allowed-search {
  width: 100%; padding: 8px 10px; font-size: var(--fs-sm); font-family: inherit;
  background: var(--surface-3); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-sm);
  color: var(--text); outline: none;
}
.group-allowed-search:focus { border-color: var(--accent); }
.group-allowed-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  max-height: 200px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  margin-top: 4px;
}
.group-allowed-option {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  font-size: var(--fs-sm); cursor: pointer; transition: background .2s cubic-bezier(0.32,0.72,0,1);
}
.group-allowed-option:hover { background: var(--surface-2); }
.group-allowed-option .ga-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: 700; overflow: hidden;
}
.group-allowed-option .ga-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.group-allowed-option .ga-type { font-size: var(--fs-2xs); color: var(--text-muted); margin-left: auto; }
.group-allowed-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.group-allowed-tag {
  display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 12px;
  font-size: var(--fs-sm); color: var(--text);
}
.group-allowed-tag .ga-tag-icon {
  width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-2xs); font-weight: 700; overflow: hidden;
}
.group-allowed-tag .ga-tag-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.group-allowed-tag .ga-tag-remove {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-xs); padding: 0 2px; margin-left: 2px;
}
.group-allowed-tag .ga-tag-remove:hover { color: var(--danger, var(--status-danger)); }
/* Groups settings tab tabs */
.groups-tab-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 12px;
}
.groups-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 6px 16px;
  font-size: var(--fs-sm);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.groups-tab-btn:hover { color: var(--text); }
.groups-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* Drag handle and drag states */
.group-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: var(--fs-md);
  padding: 0 6px 0 0;
  user-select: none;
  flex-shrink: 0;
}
.group-mgmt-row.dragging { opacity: 0.4; }
.group-mgmt-row.drag-over { outline: 2px solid var(--accent); border-radius: var(--radius-sm); }
/* Discord link section in group dialog */
.group-discord-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.group-discord-section h4 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-family: var(--label-font);
}
.group-discord-status {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 8px;
}
.group-discord-linked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.group-discord-linked .discord-icon {
  width: 20px;
  height: 20px;
  background: #5865F2;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.group-discord-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 6px;
  font-style: italic;
}

/* ── Groups Management Tab (Server Settings) ──────── */
#stab-groups h2 {
  margin-bottom: 12px;
}

.group-mgmt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 12px;
}

.group-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}

.group-mgmt-name {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text);
  flex: 1;
}

.group-mgmt-info {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.group-mgmt-row button {
  padding: 6px 14px;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.05);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.group-mgmt-row button:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.group-mgmt-row .btn-delete {
  border-color: rgba(255,77,106,0.3);
  color: rgba(255,77,106,0.7);
}
.group-mgmt-row .btn-delete:hover {
  background: var(--status-danger-dim);
  border-color: var(--status-danger);
  color: var(--status-danger);
}

/* Channels assigned to a group */
.group-mgmt-channels {
  margin-top: 4px;
  margin-bottom: 4px;
  padding-left: 44px;
}
.group-mgmt-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.group-mgmt-channel-item:hover {
  background: rgba(255,255,255,0.03);
}
.group-mgmt-unassign {
  background: none !important;
  border: none !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  font-size: var(--fs-md);
  padding: 2px 6px !important;
  border-radius: 4px !important;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.group-mgmt-unassign:hover {
  opacity: 1;
  color: var(--status-danger) !important;
}

/* Assign channel dropdown row */
.group-mgmt-assign-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-left: 0;
}
.group-mgmt-assign-row select {
  flex: 1;
  padding: 5px 8px;
  font-size: var(--fs-sm);
  background: var(--surface-1);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.group-mgmt-assign-row select:focus {
  outline: none;
  border-color: var(--accent);
}
.group-mgmt-assign-row button {
  padding: 5px 10px !important;
  font-size: var(--fs-sm) !important;
}

/* ═══════════════════════════════════════════════════════
   Feature Overhaul — Snowflake, Status, Notifications,
   Voice Enhancements, Connections
   ═══════════════════════════════════════════════════════ */

/* ── Snowflake ID ────────────────────────────────── */
.snowflake-display-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.snowflake-code {
  font-family: monospace;
  font-size: var(--fs-md);
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
  user-select: all;
}
.btn-copy-snowflake {
  background: none;
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  transition: background 0.15s;
}
.btn-copy-snowflake:hover { background: var(--accent-dim); }
.btn-copy-snowflake .icon { width: 14px; height: 14px; }

.profile-popup-snowflake {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-family: monospace;
  margin-top: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.profile-popup-snowflake:hover { opacity: 1; }
.profile-popup-snowflake .icon { width: 12px; height: 12px; }

.profile-popup-last-online {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Linked Accounts on Profile ──────────────────── */
.profile-popup-linked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.profile-linked-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.profile-linked-badge .icon { width: 14px; height: 14px; }

/* ── Status System ───────────────────────────────── */

/* Status dots (used on avatars) */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.online     { background: var(--status-success); }
.status-dot.idle       { background: var(--status-warning); }
.status-dot.dnd        { background: var(--status-dnd); }
.status-dot.invisible  { background: var(--status-offline); }
.status-dot.offline    { background: var(--status-offline); }

/* Member avatar status dots */
.member-avatar[data-status="online"]::after   { background: var(--status-success); opacity: 1; }
.member-avatar[data-status="idle"]::after     { background: var(--status-warning); opacity: 1; }
.member-avatar[data-status="dnd"]::after      { background: var(--status-dnd); opacity: 1; }
.member-avatar[data-status="invisible"]::after,
.member-avatar[data-status="offline"]::after  { background: var(--status-offline); opacity: 0.7; }

.member-custom-status {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  line-height: 1;
  margin-top: 2px;
}

/* Footer status area */
.footer-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  padding: 4px 4px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  overflow: hidden;
}
.footer-user-info:hover { background: rgba(255,255,255,0.04); }
#sidebar-footer .user-avatar-sm,
#dm-sidebar-footer .user-avatar-sm { position: relative; }
.footer-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  background: var(--status-success);
}
.footer-status-dot.online    { background: var(--status-success); }
.footer-status-dot.idle      { background: var(--status-warning); }
.footer-status-dot.dnd       { background: var(--status-dnd); }
.footer-status-dot.invisible { background: var(--status-offline); }
.footer-name-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.footer-custom-status {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  line-height: 1.1;
}

/* Status Picker */
.status-picker {
  position: fixed;
  bottom: 60px;
  left: 80px;
  width: 220px;
  background: var(--surface-1);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 900;
  padding: 6px;
}
.status-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
  transition: background 0.12s;
}
.status-picker-option:hover { background: rgba(255,255,255,0.04); }
.status-picker-option.active { background: var(--accent-dim); }
.status-picker-sep {
  height: 1px;
  background: var(--card-border);
  margin: 4px 8px;
}
.status-picker-custom {
  padding: 6px;
}
.status-picker-custom input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  padding: 6px 10px;
}
.status-picker-custom input:focus { outline: none; border-color: var(--accent); }

/* ── Notification System ─────────────────────────── */

/* Unread dot on channel items */
.channel-item.unread .ch-icon { opacity: 1; }
.channel-item.unread { color: var(--text); font-weight: 600; }
.channel-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text);
  margin-left: auto;
  flex-shrink: 0;
}
.channel-mention-badge {
  background: var(--status-dnd);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 5px;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 16px;
  text-align: center;
}

/* Server icon notification dot */
.server-icon-wrap { position: relative; }
.server-notif-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-dnd);
  border: 2px solid var(--bg);
}
.server-mention-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--status-dnd);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: 8px;
  padding: 0 4px;
  min-width: 14px;
  text-align: center;
  border: 2px solid var(--bg);
}

/* Notification bell */
#btn-notifications {
  position: relative;
}
.notif-bell-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-dnd);
}

/* ── Inbox Panel ──────────────────────────────────── */
.inbox-panel {
  position: fixed;
  top: 48px;
  right: 240px;
  width: 480px;
  max-height: 600px;
  background: var(--bg, #1a1a2e);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  z-index: 950;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 0;
}
.inbox-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
}
.inbox-title h3 { margin: 0; font-size: inherit; }
.inbox-icon::before { content: '\2709'; font-size: var(--fs-lg); }

/* Inbox tabs */
.inbox-tabs {
  display: flex;
  gap: 0;
  padding: 10px 18px 0;
  border-bottom: 1px solid var(--card-border);
}
.inbox-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  position: relative;
}
.inbox-tab:hover { color: var(--text); }
.inbox-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.inbox-tab .tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-dnd);
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}

/* Inbox content */
.inbox-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  max-height: 480px;
}

/* Inbox channel section */
.inbox-channel-section {
  margin-bottom: 4px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.inbox-channel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.12s;
  border-radius: var(--radius-sm);
}
.inbox-channel-header:hover { background: rgba(255,255,255,0.03); }
.inbox-channel-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.inbox-channel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.inbox-channel-info { flex: 1; min-width: 0; }
.inbox-channel-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.inbox-channel-name .inbox-badge {
  background: var(--status-dnd);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}
.inbox-channel-breadcrumb {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-channel-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.inbox-channel-actions button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: var(--fs-sm);
}
.inbox-channel-actions button:hover { background: var(--accent-dim); color: var(--text); }
.inbox-expand-arrow {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.inbox-channel-section.expanded .inbox-expand-arrow { transform: rotate(90deg); }

/* Inbox messages */
.inbox-messages {
  display: none;
  padding: 0 8px 8px;
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.inbox-channel-section.expanded .inbox-messages { display: block; }
.inbox-msg {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.inbox-msg:hover { background: rgba(255,255,255,0.02); }
.inbox-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  overflow: hidden;
}
.inbox-msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.inbox-msg-body { flex: 1; min-width: 0; }
.inbox-msg-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-sm);
}
.inbox-msg-username { font-weight: 600; color: var(--text); }
.inbox-msg-time { color: var(--text-muted); font-size: var(--fs-xs); }
.inbox-msg-content {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
  margin-top: 2px;
}
.inbox-msg-attachment {
  margin-top: 4px;
  max-width: 200px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.inbox-msg-attachment img { width: 100%; display: block; border-radius: var(--radius-sm); }

/* Date separator in inbox */
.inbox-date-sep {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 8px 0 4px;
  font-weight: 500;
}

/* Inbox empty state */
.inbox-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.inbox-empty-icon::before {
  content: '\2714';
  font-size: var(--fs-2xl);
  opacity: 0.3;
  display: block;
  margin-bottom: 12px;
}
.inbox-empty p { margin: 4px 0; font-size: var(--fs-md); }
.inbox-empty-sub { font-size: var(--fs-sm) !important; color: var(--text-muted); }

/* ── Voice Event Messages ────────────────────────── */
.system-message {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.system-message .icon { width: 14px; height: 14px; }

/* ── Per-User Volume Popover ─────────────────────── */
.user-volume-popover {
  position: absolute;
  background: var(--surface-1);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  padding: 12px 16px;
  z-index: 900;
  min-width: 180px;
}
.user-volume-popover label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.user-volume-popover input[type="range"] {
  width: 100%;
}
.user-volume-popover .vol-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
}

.voice-mod-btn {
  display: block;
  width: 100%;
  background: var(--surface-3);
  border: none;
  color: var(--text);
  font-size: var(--fs-xs);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  margin-bottom: 2px;
  transition: background .2s cubic-bezier(0.32,0.72,0,1);
}
.voice-mod-btn:hover { background: var(--accent-dim); }
.voice-mod-btn.danger { color: var(--status-dnd); }
.voice-mod-btn.danger:hover { background: rgba(248,113,113,0.15); }

/* ── Connections Grid (Settings) ─────────────────── */
.connections-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.connection-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.connection-card .icon { width: 22px; height: 22px; flex-shrink: 0; }
.connection-card-info { flex: 1; min-width: 60px; }
.connection-card-platform {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.connection-card-username {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connection-card input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  padding: 5px 8px;
  width: 120px;
  flex-shrink: 1;
  min-width: 80px;
}
.connection-card input:focus { outline: none; border-color: var(--accent); }
.connection-card .btn-link {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.connection-card .btn-link:hover { opacity: 0.9; }
.connection-card .btn-unlink {
  background: none;
  border: 1px solid var(--status-dnd);
  color: var(--status-dnd);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.connection-card .btn-unlink:hover { background: rgba(248,113,113,0.1); }

/* ── Toast Notifications ─────────────────────────── */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(16px) scale(0.97);
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 24px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
  opacity: 0;
  pointer-events: none;
  z-index: 10000;
  transition: opacity 220ms ease-out, transform 220ms var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

/* Update-ready toast (persistent, with restart button) */
.toast.toast-update {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toast-restart-btn {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 0.15s;
}
.toast-restart-btn:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════
   NEW FEATURES STYLES
   ═══════════════════════════════════════════════════ */

/* ── Topbar actions ─────────────────────────────────── */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.topbar-actions .topbar-btn {
  font-size: var(--fs-sm);
  padding: 4px 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.topbar-actions .topbar-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* ── Quick Switcher ─────────────────────────────────── */
#dialog-quick-switcher {
  width: min(500px, 90vw);
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
#quick-switcher-input {
  width: 100%;
  padding: 14px 16px;
  font-size: var(--fs-md);
  background: var(--surface-1);
  border: none;
  border-bottom: 1px solid var(--surface-2);
  color: var(--text);
  outline: none;
}
#quick-switcher-results {
  max-height: 300px;
  overflow-y: auto;
}
.qs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .2s cubic-bezier(0.32,0.72,0,1);
}
.qs-item:hover, .qs-item.selected { background: var(--surface-2); }
.qs-item-icon { font-size: var(--fs-lg); width: 24px; text-align: center; }
.qs-item-name { flex: 1; color: var(--text); font-size: var(--fs-sm); }
.qs-item-hint { color: var(--text-muted); font-size: var(--fs-xs); }

/* ── Popover Dropdown (shared base) ────────────────── */
.popover-dropdown {
  position: fixed;
  z-index: 960;
  width: 340px;
  max-height: 520px;
  background: var(--bg, #1a1a2e);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
.popover-header h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.popover-header-icon { width: 20px; height: 20px; opacity: 0.7; }
.popover-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  max-height: 380px;
}
.popover-separator {
  height: 1px;
  background: var(--card-border);
  margin: 4px 8px;
}
.popover-chevron::after {
  content: '\203A';
  font-size: var(--fs-lg);
  color: var(--text-muted);
  font-weight: 300;
}

/* Popover empty state */
.popover-empty {
  text-align: center;
  padding: 32px 24px;
  color: var(--text-muted);
}
.popover-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  background: var(--surface-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
}
.popover-empty-icon::after { content: '\2639'; font-size: var(--fs-2xl); opacity: 0.4; }
.popover-empty p { font-size: var(--fs-sm); line-height: 1.4; margin: 4px 0; }
.popover-protip {
  margin-top: 16px !important;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
  font-size: var(--fs-sm) !important;
  color: var(--text-muted);
}
.popover-protip strong { color: var(--accent); }

/* ── Pinned Messages Popover ──────────────────────── */
.pinned-msg {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.pinned-msg:hover { background: rgba(255,255,255,0.04); }
.pinned-msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.pinned-msg-header strong { color: var(--text); }
.pinned-msg-content { font-size: var(--fs-sm); color: var(--text); word-break: break-word; }
.pinned-msg-unpin {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 2px 6px;
  border-radius: 3px;
}
.pinned-msg-unpin:hover { color: var(--danger); background: rgba(248,113,113,0.1); }

/* ── Notification Prefs Popover ───────────────────── */
#notif-prefs-popover { width: 280px; padding: 6px 0; }
.notif-prefs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.notif-prefs-row:hover { background: rgba(255,255,255,0.03); }
#notif-prefs-popover .notif-prefs-options { padding: 4px 0; }
#notif-prefs-popover .notif-pref-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.12s;
}
#notif-prefs-popover .notif-pref-option:hover { background: rgba(255,255,255,0.03); }
.notif-pref-text { flex: 1; }
.notif-pref-text strong { color: var(--text); font-size: var(--fs-sm); font-weight: 500; }
.notif-pref-text small { color: var(--text-muted); font-size: var(--fs-xs); }
.notif-pref-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.notif-pref-option.active .notif-pref-radio {
  border-color: var(--accent);
  background: var(--accent);
}
.notif-pref-option.active .notif-pref-radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 8px; height: 8px;
  background: var(--bg, #1a1a2e);
  border-radius: 50%;
}

/* ── Voice Quick Settings Popover ─────────────────── */
.voice-popover { width: 280px; padding: 6px 0; }
.voice-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
}
.voice-popover-row:hover { background: rgba(255,255,255,0.03); }
.voice-popover-row-text { flex: 1; }
.voice-popover-row-text strong { display: block; font-weight: 500; font-size: var(--fs-sm); }
.voice-popover-row-text small { color: var(--text-muted); font-size: var(--fs-xs); }
.voice-popover-submenu {
  padding: 2px 8px 6px;
  background: rgba(0,0,0,0.15);
}
.voice-popover-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}
.voice-popover-submenu-item:hover { background: rgba(255,255,255,0.04); }
.voice-popover-submenu-item input[type="radio"] { accent-color: var(--accent); }
.voice-popover-slider-row {
  padding: 10px 16px;
}
.voice-popover-slider-row strong { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); margin-bottom: 8px; }
.voice-popover-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-2);
  border-radius: 3px;
  outline: none;
}
.voice-popover-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.voice-popover-settings {
  color: var(--text);
  font-weight: 500;
}
.voice-popover-gear::after {
  content: '\2699';
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

/* ── Thread Side Panel ──────────────────────────────── */
.thread-panel {
  width: 360px;
  min-width: 280px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--bg);
  height: 100%;
  overflow: hidden;
}
.thread-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.thread-panel-header h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-panel-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.thread-parent {
  padding: 10px 12px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  flex-shrink: 0;
}
.thread-panel-divider {
  height: 1px;
  background: var(--border);
}
.thread-reply-count {
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.thread-messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  min-height: 0;
}
.thread-msg {
  display: flex;
  gap: 8px;
  padding: 6px 0;
}
.thread-msg-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); flex-shrink: 0; }
.thread-msg-body { flex: 1; min-width: 0; }
.thread-msg-name { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.thread-msg-text { font-size: var(--fs-sm); color: var(--text); word-break: break-word; }
.thread-msg-time { font-size: var(--fs-2xs); color: var(--text-muted); margin-left: 6px; }
.thread-input-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.thread-input-bar textarea {
  flex: 1;
  resize: none;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 8px;
  font-size: var(--fs-sm);
  outline: none;
}

/* Thread badge on messages */
.msg-thread-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  background: rgba(var(--accent-rgb, 0,255,180), 0.08);
  border: 1px solid rgba(var(--accent-rgb, 0,255,180), 0.15);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}
.msg-thread-badge:hover {
  background: rgba(var(--accent-rgb, 0,255,180), 0.15);
}
.msg-thread-badge svg { width: 12px; height: 12px; }

/* ── Poll ───────────────────────────────────────────── */
.poll-card {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 4px 0;
  max-width: 400px;
}
.poll-question { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 8px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.poll-icon { color: var(--accent); flex-shrink: 0; }

/* ── Verified Badge (Blue Check) ─────────────────── */
.verified-badge {
  display: inline; vertical-align: middle; margin-left: 0; flex-shrink: 0;
}
.verified-badge svg { display: inline; width: 12px; height: 12px; vertical-align: -1px; }
.poll-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}
.poll-option:hover { background: rgba(255,255,255,0.05); }
.poll-option-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  opacity: 0.15;
  transition: width 0.3s;
  border-radius: var(--radius-sm);
}
.poll-option-label { flex: 1; font-size: var(--fs-sm); color: var(--text); z-index: 1; }
.poll-option-count { font-size: var(--fs-xs); color: var(--text-muted); z-index: 1; min-width: 20px; text-align: right; }
.poll-option.voted { border: 1px solid var(--accent); }
.poll-option.voted .poll-option-bar { opacity: 0.25; }
.poll-footer { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 6px; }
#poll-options-list input {
  width: 100%;
  margin-bottom: 4px;
  padding: 4px 8px;
  font-size: var(--fs-sm);
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
}

/* ── Forum Voting ───────────────────────────────────── */
.forum-vote-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-right: 10px;
}
.vote-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--text-muted);
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}
.vote-btn:hover { color: var(--accent); }
.vote-btn.active-up { color: var(--accent); }
.vote-btn.active-down { color: var(--danger); }
.vote-score { font-size: var(--fs-xs); font-weight: 700; color: var(--text); }

/* ── Member Context Menu ────────────────────────────── */
#member-context-menu {
  position: fixed;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  z-index: 9999;
  min-width: 140px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
#member-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 6px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
}
#member-context-menu button:hover { background: var(--surface-2); }
#member-context-menu button.ctx-danger:hover { background: var(--danger); color: #fff; }
#member-context-menu { min-width: 180px; }

/* Context menu shared elements */
.ctx-separator { height: 1px; background: var(--card-border); margin: 4px 8px; }
.ctx-has-submenu { display: flex !important; align-items: center; justify-content: space-between; }
.ctx-chevron::after { content: '\203A'; font-size: var(--fs-lg); color: var(--text-muted); }
.ctx-submenu {
  padding: 2px 6px;
  background: rgba(0,0,0,0.12);
  max-height: 180px;
  overflow-y: auto;
}
.ctx-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.ctx-submenu-item:hover:not(:disabled) { background: var(--accent-dim); }
.ctx-submenu-item:disabled, .ctx-submenu-disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.ctx-submenu-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.ctx-submenu-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── Server Extended Settings ───────────────────────── */
.dialog-lg {
  width: min(700px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}
.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 0 16px;
  overflow-x: auto;
}
.settings-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 8px 14px;
  cursor: pointer;
  font-size: var(--fs-sm);
  border-bottom: 2px solid transparent;
  transition: background-color 0.3s cubic-bezier(0.32,0.72,0,1), color 0.3s cubic-bezier(0.32,0.72,0,1), border-color 0.3s cubic-bezier(0.32,0.72,0,1), box-shadow 0.3s cubic-bezier(0.32,0.72,0,1), transform 0.3s cubic-bezier(0.32,0.72,0,1), opacity 0.3s cubic-bezier(0.32,0.72,0,1);
  white-space: nowrap;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.settings-panel { padding: 16px; }
.settings-panel:not(.active) { display: none; }

/* emote list */
.emote-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--surface-2);
}
.emote-item img { width: 28px; height: 28px; object-fit: contain; }
.emote-item-name { flex: 1; font-size: var(--fs-sm); color: var(--text); }
.emote-item-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xs);
}
.emote-item-del:hover { color: var(--danger); }

/* ban list */
.ban-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--surface-2);
}
.ban-item-name { flex: 1; font-size: var(--fs-sm); color: var(--text); }
.ban-item-reason { font-size: var(--fs-xs); color: var(--text-muted); flex: 1; }
.ban-item-unban {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: var(--fs-xs);
}

/* webhook list */
.webhook-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-2);
}
.webhook-item-name { flex: 1; font-size: var(--fs-sm); color: var(--text); font-weight: 600; }
.webhook-item-channel { font-size: var(--fs-xs); color: var(--text-muted); }
.webhook-item-url {
  font-size: var(--fs-2xs);
  color: var(--accent-dim);
  cursor: pointer;
  word-break: break-all;
}
.webhook-item-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}
.webhook-item-del:hover { color: var(--danger); }

/* XP */
.xp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.xp-rank { width: 24px; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }
.xp-bar-wrap { flex: 1; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.xp-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
.xp-info { font-size: var(--fs-xs); color: var(--text-muted); min-width: 60px; text-align: right; }

/* audit log */
.audit-entry {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--surface-2);
  font-size: var(--fs-sm);
}
.audit-actor { font-weight: 600; color: var(--accent); min-width: 80px; }
.audit-action { color: var(--text); flex: 1; }
.audit-time { color: var(--text-muted); font-size: var(--fs-xs); min-width: 80px; text-align: right; }

/* ── Markdown styles ────────────────────────────────── */
.msg-content code {
  background: var(--msg-code-bg, var(--surface-2));
  padding: 1px 4px;
  border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85em;
}
.msg-content pre {
  background: var(--msg-code-bg, var(--surface-2));
  padding: 8px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 4px 0;
}
.msg-content pre code {
  background: none;
  padding: 0;
}
.msg-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 8px;
  margin: 4px 0;
  color: var(--text-muted);
}
.msg-content strong { font-weight: 700; }
.msg-content em { font-style: italic; }
.msg-content s { text-decoration: line-through; color: var(--text-muted); }
.msg-content a { color: var(--msg-link-color, var(--accent)); text-decoration: none; }
.msg-content a:hover { text-decoration: underline; }
.msg-content ul, .msg-content ol { margin: 4px 0; padding-left: 20px; }
.msg-content h1, .msg-content h2, .msg-content h3 {
  margin: 4px 0;
  font-weight: 700;
}
.msg-content h1 { font-size: 1.3em; }
.msg-content h2 { font-size: 1.1em; }
.msg-content h3 { font-size: 1em; }

/* ── Favorite star ──────────────────────────────────── */
.server-fav-star {
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: var(--fs-2xs);
  color: gold;
  pointer-events: none;
}

/* ── Archived channels ──────────────────────────────── */
.channel-archived { opacity: 0.5; font-style: italic; }

/* ── btn helpers ────────────────────────────────────── */
.btn-sm { font-size: var(--fs-xs) !important; padding: 3px 10px !important; }
.btn-outline {
  background: none;
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-xs);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.btn-outline:hover { background: var(--accent); color: var(--bg); }

/* ═══════════════════════════════════════════════════════
   Phase 2 Feature Styles — Blog, Streaming, Discovery,
   Members Page, Reports, Notification Prefs, Self-Roles
   ═══════════════════════════════════════════════════════ */

/* ── Blog Channel ─────────────────────────────────── */
.blog-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
  overflow-y: auto;
  max-width: 800px;
}
.blog-post-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: row;
  min-height: 140px;
}
.blog-post-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.blog-card-cover {
  width: 200px;
  min-height: 140px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-3);
}
.blog-card-body { padding: 16px 20px; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.blog-card-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.blog-card-preview {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
  flex: 1;
}
.blog-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: auto;
}
.blog-card-author { font-weight: 600; color: var(--text); }
@media (max-width: 600px) {
  .blog-post-card { flex-direction: column; }
  .blog-card-cover { width: 100%; min-height: 120px; }
}

/* Blog Detail */
.blog-detail-cover {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-3);
}
.blog-detail-header { padding: 16px; }
.blog-detail-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin: 0 0 8px;
}
.blog-detail-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.blog-detail-content {
  padding: 0 16px 16px;
  font-size: var(--fs-md);
  line-height: 1.7;
  overflow-y: auto;
  flex: 1;
  color: var(--text);
}
.blog-detail-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
}
.blog-detail-content p { margin: 8px 0; }
.blog-comments-section {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}
.blog-comments-section h4 { margin: 0 0 8px; font-size: var(--fs-sm); }
.blog-comment {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.blog-comment-time {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-left: 6px;
}
.blog-comment-text { margin-top: 4px; }
.blog-comment-input-bar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 12px;
}
.blog-comment-input-bar textarea {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 10px 14px;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
  min-height: 44px;
}
.blog-comment-input-bar textarea:focus {
  border-color: var(--accent);
}
.blog-comment-input-bar textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}
.blog-comment-input-bar .btn-confirm {
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.blog-delete-btn { font-size: var(--fs-xs) !important; }

/* ── Streaming Channel ────────────────────────────── */
#streaming-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}
#stream-video-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  min-height: 0;
  position: relative;
}
#stream-chat-sidebar {
  width: 300px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--bg);
}
#stream-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-size: var(--fs-sm);
}
#stream-chat-input {
  resize: none;
  font-size: var(--fs-sm);
}

/* ── Server Discovery (Full Page — Guilded style) ─── */
.discovery-page-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.discovery-sidebar {
  width: 180px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 16px 0;
  overflow-y: auto;
}
.discovery-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 18px;
  margin-bottom: 8px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  padding-bottom: 12px;
}
.discovery-back-btn:hover {
  color: var(--accent);
  background: rgba(255,255,255,0.03);
}
.discovery-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-family: var(--ui-font);
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: color 0.15s, background 0.15s;
}
.discovery-sidebar-item:hover { color: var(--text); background: var(--surface-1); }
.discovery-sidebar-item.active { color: var(--text); background: var(--surface-2); font-weight: 600; }
.discovery-sidebar-item .icon { width: 16px; height: 16px; }

.discovery-main {
  flex: 1;
  overflow-y: auto;
  background: var(--bg2);
}

/* Hero / search banner */
.discovery-hero {
  text-align: center;
  padding: 48px 24px 36px;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.discovery-hero h2 {
  font-family: var(--ui-font);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}
.discovery-hero p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 20px;
}
.discovery-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 440px;
  margin: 0 auto;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 0 14px;
  transition: border-color 0.2s;
}
.discovery-search-bar:focus-within { border-color: var(--accent); }
.discovery-search-bar .icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.discovery-search-bar input {
  flex: 1;
  border: none;
  background: none;
  padding: 10px 0;
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
}
.discovery-search-bar input::placeholder { color: var(--text-muted); }

/* Section heading */
.discovery-section {
  padding: 24px 28px 0;
}
.discovery-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.discovery-section-header h3 {
  font-family: var(--ui-font);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Grid */
.discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 0 28px 28px;
}

/* Server cards */
.discovery-server-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
  cursor: pointer;
}
.discovery-server-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.discovery-card-banner {
  height: 100px;
  background-size: cover;
  background-position: center;
}
.discovery-card-body { padding: 14px; position: relative; }
.discovery-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: absolute;
  top: -22px;
  border: 3px solid var(--surface-2);
  object-fit: cover;
}
.discovery-card-icon-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: absolute;
  top: -22px;
  border: 3px solid var(--surface-2);
  background: var(--accent);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-lg);
}
.discovery-card-name {
  margin: 22px 0 4px;
  font-size: var(--fs-md);
  font-weight: 700;
}
.discovery-card-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
}
.discovery-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.discovery-card-footer .icon { width: 14px; height: 14px; vertical-align: -2px; }
.nsfw-badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--status-danger);
  color: #fff;
  vertical-align: middle;
  margin-left: 5px;
}
.discovery-load-more {
  text-align: center;
  padding: 16px 28px 28px;
}

/* ── Self-Assignable Roles ────────────────────────── */
.self-roles-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.self-role-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.self-role-item:hover { background: var(--surface-3); }
.self-role-item.has-role { border-color: var(--accent); background: rgba(127, 255, 212, 0.04); }
.self-role-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; overflow: hidden;
}
.self-role-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.self-role-info { flex: 1; min-width: 0; }
.self-role-name { font-weight: 600; font-size: var(--fs-md); display: block; }
.self-role-members { font-size: var(--fs-xs); color: var(--text-muted); }
.self-role-toggle {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border); display: flex; align-items: center;
  justify-content: center; transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.self-role-item.has-role .self-role-toggle {
  border-color: var(--accent); background: var(--accent);
}
.self-role-item.has-role .self-role-toggle::after {
  content: '✓'; font-size: var(--fs-xs); color: var(--bg); font-weight: 700;
}

/* ── Members Page ─────────────────────────────────── */
.members-page-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .2s cubic-bezier(0.32,0.72,0,1);
}
.members-page-item:hover { background: var(--surface-2); }
.mp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.mp-avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-md);
}
.mp-info { display: flex; flex-direction: column; }
.mp-name { font-weight: 600; font-size: var(--fs-sm); }
.mp-meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Report User ──────────────────────────────────── */
.report-item {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: var(--surface-2);
}
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.report-badge {
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.report-pending { background: var(--status-warning); color: #000; }
.report-resolved { background: var(--status-success); color: #000; }
.report-dismissed { background: var(--surface-3); color: var(--text-muted); }
.report-body {
  font-size: var(--fs-sm);
  margin-bottom: 4px;
}
.report-category {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: var(--fs-xs);
  background: var(--surface-3);
  color: var(--text-muted);
  margin-left: 6px;
}
.report-reason {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 4px 0;
  padding: 6px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.report-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.report-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}

/* ── Notification Preferences ─────────────────────── */
.notif-prefs-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notif-pref-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s;
  font-size: var(--fs-sm);
}
.notif-pref-option:hover { border-color: var(--accent); }
.notif-pref-option input[type="radio"] { accent-color: var(--accent); }

/* ── Gradient Role Preview ────────────────────────── */
#role-gradient-wrap label {
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
#role-gradient-controls {
  padding: 6px 0;
}

/* ── Dialog Sizes ─────────────────────────────────── */
.dialog-sm { width: min(360px, 90vw); }

/* ── Topbar icon buttons ──────────────────────────── */
.topbar-btn .icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.topbar-btn-icon .icon {
  width: 16px;
  height: 16px;
}

/* ── Sidebar Utility Buttons ─────────────────────── */
.sidebar-utility-btns {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.sidebar-util-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 0;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.sidebar-util-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.sidebar-util-icon { width: 14px; height: 14px; display: inline-flex; }
.sidebar-util-icon .icon { width: 14px; height: 14px; }

/* ── Pop-out mode ─────────────────────────────────── */
body.popout-mode #server-rail,
body.popout-mode #sidebar,
body.popout-mode #dm-sidebar,
body.popout-mode #members-panel { display: none !important; }
body.popout-mode #main-content { width: 100% !important; }

/* ── Dialog Header ───────────────────────────────── */
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dialog-header h3 {
  font-family: var(--ui-font);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* ── Dialog Close Button ─────────────────────────── */
.dialog-close {
  background: none;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-md);
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.dialog-close:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ── Dialog Sizes (additions) ────────────────────── */
.dialog-md { width: min(540px, 92vw); }

/* ── Dialog Body & Scroll Body ───────────────────── */
.dialog-body {
  padding: 0;
}
.dialog-scroll-body {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 0;
}

/* ── Dialog Footer ───────────────────────────────── */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── Dialog Form Elements (global) ───────────────── */
dialog select,
dialog textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-family: var(--ui-font);
  font-size: var(--fs-md);
  outline: none;
  transition: border-color 0.2s;
}
dialog select:focus,
dialog textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}
dialog textarea { resize: vertical; min-height: 80px; }
dialog select option { background: var(--surface-1); color: var(--text); }

/* ── Dialog generic input (non-field) ────────────── */
dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]) {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-size: var(--fs-md);
  outline: none;
  transition: border-color 0.2s;
}
dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):focus {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}

/* ── Dialog Checkbox Styling ─────────────────────── */
dialog input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background 0.15s, border-color 0.15s;
}
dialog input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
dialog input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--bg);
  font-weight: bold;
}

/* ── Dialog Button Outlines ──────────────────────── */
dialog .btn-outline {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--ui-font);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
dialog .btn-outline:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ═══════════════════════════════════════════════════
   Full-Page Server Settings (Guilded / Discord style)
   ═══════════════════════════════════════════════════ */
.settings-page {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-page.hidden { display: none; }

/* Header bar */
.settings-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: var(--bg2);
  flex-shrink: 0;
}
.settings-page-header h2 {
  font-family: var(--ui-font);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.04em;
}

/* Back button */
.settings-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--ui-font);
  font-size: var(--fs-sm);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.settings-back-btn:hover { color: var(--text); border-color: var(--accent); }
.settings-back-arrow { font-size: var(--fs-md); }

/* Body — sidebar + content */
.settings-page-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Sidebar Nav ── */
.settings-nav {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid rgba(255,255,255,0.04);
  padding: 16px 0;
  overflow-y: auto;
}
.settings-nav-section { padding: 0 12px; }
.settings-nav-label {
  display: block;
  font-size: var(--fs-2xs);
  font-family: var(--label-font);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 8px 12px 4px;
}
.settings-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--ui-font);
  font-size: var(--fs-sm);
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
  margin-bottom: 2px;
}
.settings-nav-item:hover { background: var(--surface-2); color: var(--text); }
.settings-nav-item.active { background: var(--accent-dim); color: var(--accent); }
.settings-nav-divider {
  height: 1px;
  background: var(--accent-dim);
  margin: 8px 12px;
}
.settings-nav-danger .settings-nav-item { color: var(--status-dnd); }
.settings-nav-danger .settings-nav-item:hover { background: rgba(255,107,138,0.1); }
.settings-nav-danger .settings-nav-item.active { background: rgba(255,107,138,0.15); color: var(--status-dnd); }

/* ── Content Panel ── */
.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px;
}
.settings-content > .settings-panel { max-width: 680px; }
.settings-content > .settings-panel.sp-roles-panel { max-width: none; padding: 0; }
.settings-content:has(.sp-roles-panel.active) { padding: 0; overflow: hidden; }
.settings-content > #sp-appearance { max-width: none; }
.settings-content:has(#sp-appearance.active) { padding: 0; overflow: hidden; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }

.settings-panel h3 {
  font-family: var(--ui-font);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px;
}
.settings-panel h4 {
  font-family: var(--ui-font);
  color: var(--text);
}
.sp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sp-panel-header h3 { margin: 0; }

/* ── Applications panel ── */
.sp-apps-filter-btn {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.05);
  background: transparent;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sp-apps-filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.sp-apps-filter-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

.sp-application-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.05);
  background: var(--surface-3);
  margin-bottom: 8px;
}
.sp-application-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.sp-application-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sp-application-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sp-application-header-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sp-application-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.sp-application-date { font-size: var(--fs-xs); color: var(--text-muted); }
.sp-application-message {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 6px 0 0;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
}
.sp-application-answers { margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.sp-application-qa {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
}
.sp-application-q { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.sp-application-a { font-size: var(--fs-sm); color: var(--text); word-break: break-word; }
.sp-application-review-info {
  font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px; font-style: italic;
}
.sp-application-notes-wrap { margin-top: 8px; }
.sp-application-notes {
  width: 100%; padding: 6px 10px; background: var(--surface-0);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--fs-sm); font-family: inherit;
  resize: vertical; outline: none; min-height: 28px;
  transition: border-color .15s; box-sizing: border-box;
}
.sp-application-notes:focus { border-color: var(--accent); }
.sp-application-notes::placeholder { color: var(--text-muted); font-style: italic; }
.sp-application-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.sp-application-badge {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 600;
  flex-shrink: 0;
}
.sp-application-badge--approved { background: rgba(67,181,129,0.15); color: var(--status-online); }
.sp-application-badge--denied   { background: rgba(240,71,71,0.15);  color: var(--status-danger); }

/* Field styling */
.field-group { margin-bottom: 16px; }
.field-label {
  display: block;
  font-size: var(--fs-xs);
  font-family: var(--label-font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.settings-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
.settings-panel select,
.settings-panel textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 14px;
  font-family: var(--ui-font);
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color 0.2s;
}
.settings-panel input:focus,
.settings-panel select:focus,
.settings-panel textarea:focus {
  border-color: var(--accent);
}
.settings-panel select option { background: var(--surface-1); color: var(--text); }
.settings-panel textarea { resize: vertical; min-height: 80px; }

.settings-panel input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.settings-panel input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.settings-panel input[type="checkbox"]:checked::after {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--bg);
  font-weight: bold;
}

/* Panel action bar */
.settings-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* Upload row (reuse) */
.settings-panel .upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-panel .icon-preview {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  color: var(--text-muted);
  overflow: hidden;
}
.settings-panel .icon-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.settings-panel .banner-preview {
  width: 220px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.settings-panel .banner-preview img { width: 100%; height: 100%; object-fit: cover; }
.settings-panel .upload-btn {
  padding: 6px 14px;
  background: var(--btn-bg);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.settings-panel .upload-btn:hover { color: var(--accent); border-color: var(--accent); }
.settings-panel .upload-file-name { font-size: var(--fs-xs); color: var(--text-muted); }

/* Styled file upload */
.styled-file-upload {
  display: flex;
  align-items: center;
  gap: 10px;
}
.styled-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.styled-file-btn {
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 7px 16px;
  white-space: nowrap;
}
.styled-file-name {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Bot token display */
.bot-token-display {
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  overflow-x: auto;
}
.bot-token-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--fs-sm);
  color: var(--accent);
  word-break: break-all;
  user-select: all;
}

/* btn-sm */
.btn-sm {
  padding: 5px 14px !important;
  font-size: var(--fs-sm) !important;
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.btn-sm:hover { background: var(--surface-2) !important; }

/* ── Creation Dialog (Guilded-style) ────────────────── */
.creation-dialog {
  width: min(640px, 95vw);
  padding: 0;
}

.creation-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.creation-dialog-header h2 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  flex: 1;
  text-align: center;
}

.creation-back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}
.creation-back-btn:hover { color: var(--text); }

.creation-step { padding: 28px 32px; overflow-y: auto; }

.creation-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-bottom: 24px;
}

/* Choice cards grid */
.creation-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 660px;
  margin: 0 auto;
}
.creation-choice-card {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--ui-font);
}
.creation-choice-card:hover {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
  background: var(--surface-3);
}
.creation-choice-icon { font-size: var(--fs-2xl); }
.creation-choice-label {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-md);
}
.creation-choice-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ── Server creation wizard steps ──────────────── */
.creation-step-center {
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}
.creation-step-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.creation-step-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.4;
}
.creation-template-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 12px 0 6px;
}
.creation-template-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.creation-template-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  text-align: left;
}
.creation-template-btn:hover { background: var(--surface-3); border-color: var(--text-muted); }
.creation-template-icon { font-size: var(--fs-xl); flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.creation-template-icon svg { width: 22px; height: 22px; color: var(--accent); }
.creation-template-name { flex: 1; }
.creation-template-arrow { color: var(--text-muted); font-size: var(--fs-lg); }
.creation-join-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
  text-align: center;
}
.creation-join-section p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 8px; }
.creation-join-btn {
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 8px 0;
  width: 100%;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
}
.creation-join-btn:hover { background: var(--surface-3); }
.creation-skip-text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 16px;
}
.creation-skip-text a { color: var(--accent); text-decoration: none; }
.creation-skip-text a:hover { text-decoration: underline; }
.creation-back-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 8px 0;
}
.creation-back-link:hover { color: var(--text); }

/* Split layout: form + preview */
.creation-split {
  display: flex;
  gap: 0;
  padding: 20px 24px;
  overflow-y: auto;
}
.creation-form {
  flex: 1;
  padding: 0 24px;
}
.creation-form .dialog-field { margin-bottom: 12px; }
.creation-preview {
  flex: 0 0 180px;
  border-left: 1px solid rgba(255,255,255,0.04);
  padding-left: 20px;
}
.creation-preview-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-family: var(--label-font);
}

/* Preview card */
.creation-preview-card {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 16px;
  font-size: var(--fs-sm);
}
.creation-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.creation-preview-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.creation-preview-name {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-md);
}
.creation-preview-section-label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
  margin-top: 8px;
  font-family: var(--label-font);
}
.creation-preview-channel {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: 3px 0;
}
.creation-preview-members { margin-top: 12px; }
.creation-preview-member {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
  padding: 3px 0;
}
.creation-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.creation-preview-dot.online { background: var(--status-online); }

/* Icon upload area */
.creation-icon-upload {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 2px dashed var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s;
}
.creation-icon-upload:hover { border-color: var(--accent); }
.creation-icon-letter {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-muted);
}
.creation-icon-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
}

/* Label styling */
.creation-label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-family: var(--label-font);
}

/* Actions */
.creation-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.creation-primary-btn {
  width: 100%;
  padding: 10px 20px !important;
  font-size: var(--fs-md) !important;
  font-weight: 600;
  text-align: center;
}
.creation-text-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 4px 12px;
  font-family: var(--ui-font);
  transition: color 0.2s;
}
.creation-text-btn:hover { color: var(--text); }

/* Invite preview box restyle */
.invite-preview-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Responsive: stack on small screens */
@media (max-width: 580px) {
  .creation-split { flex-direction: column; padding: 20px 24px; }
  .creation-form { padding-right: 0; padding-bottom: 20px; }
  .creation-preview { border-left: none; border-top: 1px solid rgba(255,255,255,0.04); padding-left: 0; padding-top: 20px; flex: 0 0 auto; }
  .creation-choice-grid { grid-template-columns: 1fr; }
}

/* ── Bot Badge ──────────────────────────────────────── */
.bot-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  font-family: var(--label-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Flow List Items ────────────────────────────────── */
.flow-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.flow-item-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.flow-item-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-item-trigger {
  font-size: var(--fs-xs);
  background: var(--accent-dim);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.flow-item-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ── Bot List Items ─────────────────────────────────── */
.bot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.bot-item-info { flex: 1; min-width: 0; }
.bot-item-name { font-weight: 600; color: var(--text); }
.bot-item-username { font-size: var(--fs-xs); color: var(--text-muted); }
.bot-item-token {
  font-family: monospace;
  font-size: var(--fs-xs);
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 3px;
  color: var(--text-muted);
  user-select: all;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-item-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ── Flow Editor Dialog ─────────────────────────────── */
.flow-section { margin-bottom: 16px; }
.flow-section-title {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-family: var(--label-font);
}
.flow-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.flow-row select, .flow-row input, .flow-row textarea { flex: 1; }
.flow-row .btn-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-md);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.flow-row .btn-remove:hover { color: var(--status-dnd); border-color: var(--status-dnd); }

/* ── Toggle Switch ──────────────────────────────────── */
.flow-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--accent-dim);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  flex-shrink: 0;
}
.flow-toggle.active { background: var(--accent); }
.flow-toggle::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}
.flow-toggle.active::after { transform: translateX(16px); }

/* ── Flow template hint ─────────────────────────────── */
.flow-template-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
  font-family: var(--ui-font);
}
.flow-template-hint code {
  background: var(--surface-2);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: var(--fs-xs);
}

/* ── Image Editor Dialog ──────────────────────────────── */
.image-editor-dialog {
  max-width: 620px;
  width: 95vw;
}
.image-editor-dialog::backdrop { background: rgba(0,0,0,0.7); }

.ie-body {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  min-height: 0;
}

.ie-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#ie-canvas {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  touch-action: none;
}

.ie-gif-warning {
  font-size: var(--fs-xs);
  color: var(--status-warning);
  background: var(--status-warning-dim);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.ie-sidebar {
  width: 150px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ie-preview-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

#ie-preview {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.ie-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ie-mode-toggle {
  display: flex;
  gap: 4px;
}
.ie-mode-toggle .btn-sm {
  flex: 1;
  font-size: var(--fs-xs);
  padding: 5px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.ie-mode-toggle .btn-sm.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.ie-bg-swatches {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ie-swatch {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
  padding: 0;
}
.ie-swatch:hover { border-color: var(--text-muted); }
.ie-swatch.active { border-color: var(--accent); }

.ie-swatch-transparent {
  background:
    linear-gradient(45deg, #444 25%, transparent 25%),
    linear-gradient(-45deg, #444 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #444 75%),
    linear-gradient(-45deg, transparent 75%, #444 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  background-color: #666;
}

#ie-bg-custom {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: none;
}
#ie-bg-custom::-webkit-color-swatch-wrapper { padding: 1px; }
#ie-bg-custom::-webkit-color-swatch { border: none; border-radius: 2px; }
#ie-bg-custom.active { border-color: var(--accent); }

@media (max-width: 500px) {
  .ie-body { flex-direction: column; align-items: center; }
  .ie-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
  #ie-preview { width: 80px; height: auto; }
}

/* ── Emoji Picker Panel ───────────────────────────────── */
#emoji-picker-panel {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 380px;
  max-width: 95vw;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#emoji-picker-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 0;
  flex-shrink: 0;
}

#emoji-picker-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
}

.emoji-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.emoji-tab:hover { color: var(--text); }
.emoji-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

#btn-close-emoji-picker {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-md);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.15s;
}
#btn-close-emoji-picker::after { content: '✕'; }
#btn-close-emoji-picker:hover { color: var(--text); }

#emoji-search-bar {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}

#emoji-search-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 10px;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color 0.2s;
}
#emoji-search-input:focus { border-color: var(--accent); }

#emoji-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

#emoji-grid.emote-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  font-size: var(--fs-xl);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s cubic-bezier(0.32,0.72,0,1), transform 0.1s;
}
.emoji-item:hover { background: var(--surface-3); transform: scale(1.15); }

.emote-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s cubic-bezier(0.32,0.72,0,1);
  overflow: hidden;
}
.emote-item:hover { background: var(--surface-3); }
.emote-item img { width: 32px; height: 32px; object-fit: contain; }
.emote-item span {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emoji-category-label {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 6px 2px 2px;
}

#emoji-picker-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.emoji-btn {
  width: 22px !important;
  height: 22px !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  opacity: 0.6;
  transition: opacity 0.15s !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.emoji-btn svg { width: 18px; height: 18px; }
.emoji-btn:hover { opacity: 1; }

/* Emote in messages */
.msg-emote {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  display: inline;
  object-fit: contain;
}

/* ── Server Full-Page Section Views ───────────────── */
.members-fullpage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.members-fullpage-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.members-fullpage-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.members-fullpage-search {
  width: 200px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
}
.members-fullpage-controls select,
#smp-role-filter,
#smp-sort {
  padding: 6px 28px 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
  outline: none;
  min-width: 90px;
}
.members-fullpage-controls select:hover,
#smp-role-filter:hover,
#smp-sort:hover {
  border-color: var(--accent);
}
.members-fullpage-controls select:focus,
#smp-role-filter:focus,
#smp-sort:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(110,110,245,.15);
}
.members-fullpage-controls select option {
  background: var(--surface-1);
  color: var(--text);
}
.members-fullpage-table-header {
  display: grid;
  grid-template-columns: 32px 1fr 100px 100px 90px 180px 70px;
  padding: 8px 24px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
}
.members-fullpage-list {
  flex: 1;
  overflow-y: auto;
}
.mfp-member-row {
  display: grid;
  grid-template-columns: 32px 1fr 100px 100px 90px 180px 70px;
  align-items: center;
  padding: 8px 24px;
  border-bottom: 1px solid var(--border);
  transition: background .2s cubic-bezier(0.32,0.72,0,1);
  gap: 8px;
}
.mfp-member-row:hover { background: var(--surface-2); }
.mfp-member-row { cursor: default; }
.mfp-roles-manage { position: relative; display: flex; align-items: center; gap: 6px; }
.mfp-roles-display { display: flex; flex-wrap: wrap; gap: 3px; }
.mfp-roles-edit-btn {
  background: none; border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px;
  color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity .15s;
  display: flex; align-items: center;
}
.mfp-member-row:hover .mfp-roles-edit-btn { opacity: 1; }
.mfp-roles-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.mfp-roles-dropdown {
  position: absolute; top: 100%; right: 0; z-index: 50;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px; min-width: 220px; max-height: 300px; overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.mfp-roles-dropdown-title {
  padding: 4px 8px 8px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.mfp-role-opt {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  font-size: var(--fs-sm); cursor: pointer; transition: background .12s;
  border-radius: 8px; margin: 2px 0;
}
.mfp-role-opt:hover { background: var(--surface-2); }
.mfp-role-opt input[type="checkbox"] { display: none; }
.mfp-role-opt .mfp-role-check {
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
  border: 2px solid var(--border); display: flex; align-items: center;
  justify-content: center; transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s; margin-left: auto;
}
.mfp-role-opt input[type="checkbox"]:checked ~ .mfp-role-check {
  border-color: var(--accent); background: var(--accent);
}
.mfp-role-opt input[type="checkbox"]:checked ~ .mfp-role-check::after {
  content: '✓'; font-size: var(--fs-2xs); color: var(--bg); font-weight: 700;
}
.mfp-role-icon-sm {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: 700; overflow: hidden;
}
.mfp-role-icon-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mfp-col-user { display: flex; align-items: center; gap: 10px; }
.mfp-avatar-wrap { position: relative; flex-shrink: 0; }
.mfp-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md); font-weight: 700; color: #fff; flex-shrink: 0;
}
.mfp-avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mfp-status-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2.5px solid var(--surface-1); box-sizing: border-box;
}
.mfp-status-online { background: var(--status-online); }
.mfp-status-offline { background: var(--status-offline); }
.mfp-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mfp-name-line { display: flex; align-items: center; gap: 6px; }
.mfp-username { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.mfp-realname { font-size: var(--fs-xs); color: var(--text-muted); }
.mfp-owner-badge {
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(250,166,26,0.15); color: var(--status-idle); padding: 1px 6px; border-radius: 3px;
}
.mfp-col-check { display: flex; align-items: center; justify-content: center; }
.mfp-col-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 4px; cursor: pointer;
  border: 2px solid var(--text-muted); background: transparent;
  position: relative; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s; flex-shrink: 0;
}
.mfp-col-check input[type="checkbox"]:checked {
  border-color: #5865f2; background: #5865f2;
}
.mfp-col-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; top: 2px; left: 5px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mfp-col-check input[type="checkbox"]:hover { border-color: #5865f2; }
.mfp-col-joined, .mfp-col-created, .mfp-col-method, .mfp-col-signals {
  font-size: var(--fs-sm); color: var(--text-muted);
}
.smp-signal { font-size: var(--fs-sm); cursor: default; }
.smp-bulk-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 24px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-muted); flex-shrink: 0;
}
.mfp-role-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-right: 4px;
  border: 1px solid currentColor;
  opacity: 0.8;
}
/* ── Access Panel ─────────────────────────────────── */
.sp-access-section { margin-bottom: 28px; }
.sp-access-heading { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin: 0 0 4px; }
.sp-access-desc { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 14px; }
.sp-access-cards { display: flex; gap: 12px; }
.sp-access-cards-2col .sp-access-card { flex: 1 1 0; max-width: 50%; }
.sp-access-subtoggle {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: opacity .15s;
}
.sp-access-subtoggle.is-locked { opacity: 0.55; }
.sp-access-subtoggle.is-locked .sp-toggle-slider { cursor: not-allowed; }
.sp-access-card {
  flex: 1; padding: 20px 16px; border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s; text-align: center; background: var(--surface-1);
}
.sp-access-card:hover { border-color: var(--text-muted); background: var(--surface-2); }
.sp-access-card.active { border-color: var(--accent); background: var(--accent-dim, rgba(110,110,245,.08)); }
.sp-access-card-icon { margin-bottom: 10px; color: var(--text-muted); }
.sp-access-card.active .sp-access-card-icon { color: var(--accent); }
.sp-access-card-label { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sp-access-card-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.sp-access-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sp-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.sp-toggle input { display: none; }
.sp-toggle-slider {
  position: absolute; inset: 0; background: var(--surface-3); border-radius: 11px;
  cursor: pointer; transition: background .2s;
}
.sp-toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; left: 3px; top: 3px; transition: transform .2s;
}
.sp-toggle input:checked + .sp-toggle-slider { background: var(--accent); }
.sp-toggle input:checked + .sp-toggle-slider::before { transform: translateX(18px); }
.sp-access-rules-label {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px;
}
.sp-access-rule-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--surface-2); border-radius: 8px; margin-bottom: 6px;
}
.sp-access-rule-num { font-size: var(--fs-sm); color: var(--text-muted); min-width: 20px; }
.sp-access-rule-text { flex: 1; font-size: var(--fs-sm); color: var(--text); }
.sp-access-rule-delete {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-lg); padding: 2px 6px; border-radius: 4px; transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}
.sp-access-rule-delete:hover { color: var(--danger, #f44); background: rgba(244,68,68,.1); }
.sp-access-rule-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.sp-access-rule-add input {
  flex: 1; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: var(--fs-sm);
}
.sp-access-example-rules { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-example-rule-chip {
  padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); color: var(--text-muted); font-size: var(--fs-sm); cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}
.sp-example-rule-chip:hover { border-color: var(--accent); color: var(--text); background: var(--surface-3); }

/* Application question builder */
.sp-app-q-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--surface-2); border-radius: 8px; margin-bottom: 6px;
}
.sp-app-q-text { flex: 1; font-size: var(--fs-sm); color: var(--text); }
.sp-app-q-type {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 4px; background: var(--surface-3);
  color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
}
.sp-app-add-wrap { position: relative; margin-top: 8px; }
.sp-app-type-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 50; margin-top: 4px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 4px; min-width: 200px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.sp-app-type-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 12px; background: none; border: none; border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--fs-sm); cursor: pointer; transition: background .12s;
}
.sp-app-type-item:hover { background: var(--surface-2); }
.sp-app-type-icon { color: var(--text-muted); font-size: var(--fs-md); }
.sp-app-mc-opt { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sp-app-mc-input {
  flex: 1; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm);
}

/* ── Tutorial Overlay ─────────────────────────────── */
.tutorial-overlay {
  position: fixed; inset: 0; z-index: 99999;
  cursor: pointer;
}
.tutorial-spotlight {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.72);
  background: transparent;
  transition: background-color .4s cubic-bezier(.4,0,.2,1), color .4s cubic-bezier(.4,0,.2,1), border-color .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), opacity .4s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  border: 2px solid rgba(99,102,241,0.5);
}
.tutorial-tooltip {
  position: absolute; padding: 22px 24px;
  background: var(--surface-1); border: 1px solid rgba(99,102,241,0.3);
  border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,.7), 0 0 20px rgba(99,102,241,0.1);
  cursor: default; transition: background-color .4s cubic-bezier(.4,0,.2,1), color .4s cubic-bezier(.4,0,.2,1), border-color .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), opacity .4s cubic-bezier(.4,0,.2,1);
}
.tutorial-tooltip-step {
  font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 6px;
}
.tutorial-tooltip-title {
  font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.tutorial-tooltip-desc {
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; margin-bottom: 18px;
}
.tutorial-tooltip-footer {
  display: flex; align-items: center; justify-content: space-between;
}
.tutorial-tooltip-dots { display: flex; gap: 5px; }
.tutorial-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3);
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s;
}
.tutorial-dot.active { background: var(--accent); width: 18px; border-radius: 3px; }
.tutorial-tooltip-btns { display: flex; gap: 8px; }
.tutorial-skip-btn {
  background: none; border: none; color: var(--text-muted); font-size: var(--fs-sm);
  cursor: pointer; padding: 6px 12px; border-radius: 8px; transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}
.tutorial-skip-btn:hover { color: var(--text); background: var(--surface-2); }
.tutorial-next-btn {
  background: var(--accent); color: #fff; border: none; font-size: var(--fs-sm);
  font-weight: 600; padding: 7px 20px; border-radius: 8px; cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}
.tutorial-next-btn:hover { filter: brightness(1.1); }

/* ── E2E Decrypt Banner & Password Dialog ────────────── */
.e2e-decrypt-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(99,102,241,0.12), rgba(99,102,241,0.06));
  border-bottom: 1px solid rgba(99,102,241,0.2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  flex-shrink: 0;
  z-index: 5;
}
.e2e-banner-icon { font-size: var(--fs-md); }
.e2e-banner-text { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.e2e-banner-btn {
  background: none; border: none; color: var(--accent); font-size: var(--fs-sm);
  cursor: pointer; text-decoration: underline; padding: 0; font-weight: 600;
  transition: color .12s;
}
.e2e-banner-btn:hover { color: #818cf8; }

/* Password dialog overlay */
.e2e-pw-dialog-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.e2e-pw-dialog {
  background: var(--surface-1); border-radius: 12px;
  padding: 28px 32px; width: 380px; max-width: 90vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  border: 1px solid var(--border);
}
.e2e-pw-dialog-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.e2e-pw-dialog-header h3 { margin: 0; font-size: var(--fs-lg); color: var(--text); }
.e2e-pw-icon { font-size: var(--fs-lg); }
.e2e-pw-dialog-desc {
  font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 16px 0; line-height: 1.4;
}
.e2e-pw-dialog-field { margin-bottom: 16px; }
.e2e-pw-dialog-field input {
  width: 100%; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-0);
  color: var(--text); font-size: var(--fs-md); outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.e2e-pw-dialog-field input:focus { border-color: var(--accent); }
.e2e-pw-error {
  display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--status-danger); min-height: 1.1em;
}
.e2e-pw-dialog-btns { display: flex; justify-content: flex-end; gap: 10px; }
.e2e-pw-cancel {
  background: var(--surface-2); border: none; color: var(--text-muted);
  padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: var(--fs-sm);
  transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}
.e2e-pw-cancel:hover { background: var(--surface-3); color: var(--text); }
.e2e-pw-submit {
  background: var(--accent); border: none; color: #fff; font-weight: 600;
  padding: 8px 22px; border-radius: 8px; cursor: pointer; font-size: var(--fs-sm);
  transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}
.e2e-pw-submit:hover { filter: brightness(1.1); }
.e2e-pw-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── Application Overlay ──────────────────────────── */
.app-apply-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.app-apply-card {
  background: var(--surface-1); border-radius: var(--radius-lg);
  padding: 32px; width: 480px; max-width: 95vw; max-height: 85vh;
  overflow-y: auto; box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  border: 1px solid var(--border);
}
.app-apply-header { display: flex; align-items: center; gap: 16px; }
.app-apply-icon {
  width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex-shrink: 0;
}
.app-apply-icon-letter {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: var(--fs-xl); font-weight: 700;
}
.app-apply-server-info { flex: 1; min-width: 0; }
.app-apply-server-name { margin: 0; font-size: var(--fs-lg); color: var(--text); }
.app-apply-desc {
  margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-apply-members {
  font-size: var(--fs-xs); color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
}
.app-apply-members::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--status-online);
}
.app-apply-divider { height: 1px; background: var(--border); margin: 20px 0; }
.app-apply-title { margin: 0 0 6px; font-size: var(--fs-lg); color: var(--text); }
.app-apply-subtitle { margin: 0 0 20px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
.app-apply-questions { display: flex; flex-direction: column; gap: 16px; }
.app-apply-field { display: flex; flex-direction: column; gap: 6px; }
.app-apply-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.app-apply-input {
  width: 100%; padding: 10px 14px; background: var(--surface-0);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: var(--fs-sm); font-family: inherit;
  outline: none; transition: border-color .15s; box-sizing: border-box;
}
.app-apply-input:focus { border-color: var(--accent); }
.app-apply-textarea { min-height: 80px; resize: vertical; }
.app-apply-mc-group { display: flex; flex-direction: column; gap: 8px; }
.app-apply-mc {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--radius-md); cursor: pointer; font-size: var(--fs-sm); color: var(--text);
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.app-apply-mc:hover { border-color: #5865f2; background: rgba(88,101,242,0.06); }
.app-apply-mc:has(input:checked) { border-color: #5865f2; background: rgba(88,101,242,0.1); }
.app-apply-mc input[type="radio"],
.app-apply-mc input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--text-muted); background: transparent;
  position: relative; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.app-apply-mc input[type="checkbox"] { border-radius: 4px; }
.app-apply-mc input[type="radio"]:checked,
.app-apply-mc input[type="checkbox"]:checked {
  border-color: #5865f2; background: #5865f2;
}
.app-apply-mc input[type="radio"]:checked::after {
  content: ''; position: absolute; top: 4px; left: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.app-apply-mc input[type="checkbox"]:checked::after {
  content: ''; position: absolute; top: 2px; left: 5px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.app-apply-mc span { flex: 1; }
.app-apply-error { color: var(--status-danger); font-size: var(--fs-sm); margin: 8px 0 0; min-height: 1em; }
.app-apply-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.app-apply-btn-cancel {
  background: var(--surface-2); border: none; color: var(--text-muted);
  padding: 10px 22px; border-radius: 8px; cursor: pointer; font-size: var(--fs-sm);
  transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}
.app-apply-btn-cancel:hover { background: var(--surface-3); color: var(--text); }
.app-apply-btn-submit {
  background: #5865f2; border: none; color: #fff; font-weight: 600;
  padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: var(--fs-sm);
  transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}
.app-apply-btn-submit:hover { background: #4752c4; }
.app-apply-btn-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── Bans Panel (Discord-style) ───────────────────── */
.sp-bans-desc { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 16px; }
.sp-bans-search-row { display: flex; gap: 8px; margin-bottom: 16px; }
.sp-bans-search {
  flex: 1; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm);
}
.sp-bans-list { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; min-height: 200px; }
.sp-bans-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; text-align: center;
}
.sp-bans-empty-icon { font-size: var(--fs-2xl); margin-bottom: 12px; opacity: 0.3; }
.sp-bans-empty-title { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sp-bans-empty-desc { font-size: var(--fs-sm); color: var(--text-muted); max-width: 280px; }
.sp-ban-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); transition: background .2s cubic-bezier(0.32,0.72,0,1);
}
.sp-ban-row:last-child { border-bottom: none; }
.sp-ban-row:hover { background: var(--surface-2); }
.sp-ban-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.sp-ban-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700;
}
.sp-ban-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sp-ban-name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.sp-ban-reason { font-size: var(--fs-xs); color: var(--text-muted); }
.sp-ban-revoke {
  background: none; border: 1px solid var(--danger, #f44); color: var(--danger, #f44);
  padding: 4px 12px; border-radius: var(--radius-sm); font-size: var(--fs-xs); cursor: pointer; transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}
.sp-ban-revoke:hover { background: var(--danger, #f44); color: #fff; }

/* ── Audit Log Panel (Discord-style) ──────────────── */
.sp-audit-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.sp-audit-filters { display: flex; gap: 16px; }
.sp-audit-filter-group { display: flex; flex-direction: column; gap: 4px; }
.sp-audit-filter-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.sp-audit-filter-group select {
  padding: 8px 28px 8px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm); cursor: pointer;
  appearance: none; -webkit-appearance: none; min-width: 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px;
}
.sp-audit-entries { display: flex; flex-direction: column; }
.sp-audit-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); transition: background .2s cubic-bezier(0.32,0.72,0,1); position: relative;
}
.sp-audit-row:hover { background: var(--surface-2); }
.sp-audit-icon { font-size: var(--fs-sm); color: var(--text-muted); width: 20px; text-align: center; flex-shrink: 0; }
.sp-audit-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.sp-audit-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700;
}
.sp-audit-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-audit-text { font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-audit-text strong { font-weight: 700; }
.sp-audit-time { font-size: var(--fs-xs); color: var(--text-muted); }
.sp-audit-expand { color: var(--text-muted); font-size: var(--fs-lg); flex-shrink: 0; padding: 0 4px; }
.sp-audit-details {
  width: 100%; padding: 8px 12px; margin-top: 6px;
  background: var(--surface-2); border-radius: 8px; font-size: var(--fs-sm);
}
.sp-audit-detail-row { display: flex; gap: 8px; padding: 2px 0; }
.sp-audit-detail-key { color: var(--text-muted); min-width: 100px; }
.sp-audit-detail-val { color: var(--text); }
.sp-audit-empty { color: var(--text-muted); padding: 40px; text-align: center; font-size: var(--fs-md); }

/* ── Audit Log — Guilded-style ─────────────────────── */
.sal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sal-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.sal-filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.sal-filter-toggle:hover,
.sal-filter-toggle.active {
  color: var(--accent);
  border-color: var(--accent);
}
.sal-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.sal-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.sal-table-header {
  display: grid;
  grid-template-columns: 220px 1fr 120px;
  padding: 8px 24px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.sal-table-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px;
}
.sal-row {
  display: grid;
  grid-template-columns: 220px 1fr 120px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  gap: 12px;
}
.sal-row:last-child { border-bottom: none; }
.sal-col-member {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sal-actor-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sal-actor-initials {
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.sal-actor-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sal-col-action {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  min-width: 0;
}
.sal-action-icon {
  font-size: var(--fs-md);
  color: var(--accent);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.sal-action-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sal-action-text em {
  font-style: normal;
  color: var(--text-muted);
}
.sal-col-when {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: right;
  white-space: nowrap;
}
.sal-empty {
  color: var(--text-muted);
  padding: 40px;
  text-align: center;
  font-size: var(--fs-md);
}

/* Audit filter panel */
.sal-filter-panel {
  width: 220px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--surface-2);
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sal-filter-section { display: flex; flex-direction: column; gap: 6px; }
.sal-filter-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.sal-filter-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  padding: 2px 0;
}
.sal-filter-opt input { accent-color: var(--accent); }
.sal-filter-actions-list,
.sal-filter-members-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}
.sal-member-search {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: var(--fs-sm);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

/* ── Rules Area ──────────────────────────────────── */
.rules-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}
.rules-list {
  list-style: none;
  counter-reset: rule-counter;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
}
.rules-item {
  counter-increment: rule-counter;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--fs-md);
  color: var(--text);
  line-height: 1.5;
}
.rules-item::before {
  content: counter(rule-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: 700;
  flex-shrink: 0;
}
.rules-empty,
.rules-loading {
  color: var(--text-muted);
  padding: 40px;
  text-align: center;
  font-size: var(--fs-md);
}

/* Legacy sal-entry */
.sal-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.sal-action {
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
  min-width: 160px;
}

/* ── Missing modal utility classes ────────────────── */
.modal-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.modal-close:hover { color: var(--text); background: var(--surface-3); }

/* ── Inline Format Toolbar ────────────────────────── */
#text-format-bar {
  position: fixed;
  z-index: 1600;
  background: #1a1c21;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 4px 6px;
  display: flex;
  gap: 2px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  pointer-events: auto;
}
#text-format-bar::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1c21;
  border-bottom: none;
}
#text-format-bar button {
  background: none;
  border: none;
  color: #c8ccd4;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: var(--fs-sm);
  line-height: 1;
  transition: background .2s cubic-bezier(0.32,0.72,0,1), color 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
}
#text-format-bar button:hover { background: rgba(255,255,255,0.1); color: #fff; }
#text-format-bar button + button { border-left: 1px solid rgba(255,255,255,0.08); }

/* ── Context Menu ─────────────────────────────────── */
.ctx-menu {
  position: fixed;
  z-index: 1500;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 170px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  user-select: none;
  overflow: visible;
}
.ctx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  gap: 8px;
}
.ctx-item:hover { background: var(--surface-3); }
.ctx-danger { color: var(--status-danger); }
.ctx-danger:hover { background: rgba(231,76,60,0.12); }
.ctx-arrow { font-size: var(--fs-xs); color: var(--text-muted); }
.ctx-divider { height: 1px; background: var(--accent-dim); margin: 3px 4px; }
.ctx-has-sub { position: relative; }
.ctx-submenu {
  display: none;
  position: absolute;
  top: -4px;
  left: calc(100% + 4px);
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 170px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  z-index: 1502;
}
.ctx-submenu.visible { display: block; }
.ctx-submenu .ctx-item { font-size: var(--fs-sm); }

/* ── Share Picker Modal ────────────────────────────── */
.share-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1400;
  align-items: center;
  justify-content: center;
}
.share-picker-overlay[style*="flex"] { display: flex !important; }
.share-picker-modal {
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  width: 360px;
  max-width: 95vw;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
}
.share-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  font-weight: 600;
  font-size: var(--fs-md);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.share-picker-search {
  margin: 10px 12px 6px;
  flex-shrink: 0;
}
.share-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
}
.share-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
}
.share-picker-item:hover { background: var(--surface-3); }
.share-picker-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.share-picker-item-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--text-muted); flex-shrink: 0; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
/* Tier 1: Primary — main CTAs, confirmations, create actions */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm, 0.825rem);
  font-family: var(--ui-font), sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), border-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), box-shadow 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), transform 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), opacity 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2), var(--btn-primary-shadow); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Tier 3: Tertiary — low-emphasis inline actions, ghost links */
.btn-tertiary,
.btn-ghost {
  background: var(--btn-tertiary-bg);
  color: var(--btn-tertiary-text);
  border: 1px solid var(--btn-tertiary-border);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm, 0.825rem);
  font-family: var(--ui-font), sans-serif;
  cursor: pointer;
  transition: background-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), border-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), box-shadow 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), transform 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), opacity 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
}
.btn-tertiary:hover,
.btn-ghost:hover {
  background: var(--btn-tertiary-bg-hover);
  color: var(--btn-tertiary-text-hover);
}
.btn-tertiary:active,
.btn-ghost:active { transform: scale(0.98); }
.modal-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

/* ── Quill rich-text editor — dark theme ────────── */
.rich-editor-wrap { display: flex; flex-direction: column; }
.ql-toolbar.ql-snow {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  padding: 6px 8px !important;
  flex-shrink: 0;
}
.ql-toolbar.ql-snow .ql-formats { margin-right: 8px; }
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label {
  color: var(--text-muted) !important;
}
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label.ql-active {
  color: var(--accent) !important;
}
.ql-toolbar.ql-snow button svg .ql-stroke { stroke: var(--text-muted) !important; }
.ql-toolbar.ql-snow button:hover svg .ql-stroke,
.ql-toolbar.ql-snow button.ql-active svg .ql-stroke { stroke: var(--accent) !important; }
.ql-toolbar.ql-snow button svg .ql-fill { fill: var(--text-muted) !important; }
.ql-toolbar.ql-snow button:hover svg .ql-fill,
.ql-toolbar.ql-snow button.ql-active svg .ql-fill { fill: var(--accent) !important; }
.ql-container.ql-snow {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  font-family: inherit !important;
  font-size: var(--fs-md) !important;
  color: var(--text) !important;
  flex: 1;
}
.ql-editor {
  min-height: 160px;
  color: var(--text) !important;
  line-height: 1.6;
  padding: 12px 14px !important;
}
.ql-editor.ql-blank::before {
  color: var(--text-muted) !important;
  font-style: normal !important;
}
.ql-editor h1, .ql-editor h2, .ql-editor h3 { color: var(--text) !important; }
.ql-editor a { color: var(--accent) !important; }
.ql-editor blockquote {
  border-left: 3px solid var(--accent-dim) !important;
  color: var(--text-muted) !important;
  padding-left: 12px !important;
  margin: 8px 0 !important;
}
.ql-editor pre.ql-syntax {
  background: var(--surface-3) !important;
  color: var(--accent) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-size: var(--fs-sm) !important;
}
.ql-snow .ql-picker { color: var(--text-muted) !important; }
.ql-snow .ql-picker-options {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.ql-snow .ql-picker-item { color: var(--text) !important; }
.ql-snow .ql-picker-item:hover { color: var(--accent) !important; background: var(--surface-3) !important; }
.ql-snow .ql-tooltip {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.ql-snow .ql-tooltip input[type=text] {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}
.ql-snow .ql-tooltip a.ql-action,
.ql-snow .ql-tooltip a.ql-remove { color: var(--accent) !important; }

/* Forum post dialog with rich editor */
#dialog-new-post,
#dialog-new-doc,
#dialog-new-blog-post {
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  width: 640px;
  max-width: 95vw;
  max-height: 90vh;
  flex-direction: column;
  overflow: hidden;
}
#dialog-new-blog-post {
  width: 860px;
  height: 80vh;
}
#dialog-new-post[open],
#dialog-new-doc[open],
#dialog-new-blog-post[open] {
  display: flex;
}
#dialog-new-post::backdrop,
#dialog-new-doc::backdrop,
#dialog-new-blog-post::backdrop { background: rgba(0,0,0,0.75); }
#dialog-new-post h2,
#dialog-new-doc h2,
#dialog-new-blog-post h2 {
  font-size: var(--fs-md);
  font-weight: 700;
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
#dialog-new-post .dialog-field,
#dialog-new-doc .dialog-field,
#dialog-new-blog-post .dialog-field {
  padding: 12px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#dialog-new-post .dialog-field label,
#dialog-new-doc .dialog-field label,
#dialog-new-blog-post .dialog-field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
#new-post-title,
#new-blog-title,
#new-blog-cover {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
}
#new-post-title:focus,
#new-blog-title:focus,
#new-blog-cover:focus { outline: none; border-color: var(--accent); }
.dialog-rich-field {
  padding: 12px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dialog-rich-field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  flex-shrink: 0;
}
.dialog-rich-field .rich-editor-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dialog-rich-field .ql-container { flex: 1; overflow-y: auto; }
#dialog-new-post .dialog-actions,
#dialog-new-doc .dialog-actions,
#dialog-new-blog-post .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.dialog-error { color: #e05c5c; font-size: var(--fs-sm); padding: 4px 20px 0; min-height: 20px; }

/* ── Forum reply rich editor ──────────────────── */
.forum-reply-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.forum-reply-editor {
  flex: 1;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.forum-reply-editor .ql-toolbar {
  flex-wrap: wrap;
}
.forum-reply-editor .ql-container {
  min-height: 60px;
  max-height: 200px;
  overflow-y: auto;
}
.forum-reply-bar .forum-reply-send {
  align-self: flex-end;
}

/* ── Docs rich editor ─────────────────────────── */
.doc-editor-content-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 0 12px;
}
.doc-editor-content-wrap .ql-container { flex: 1; min-height: 300px; }

/* ── Forum reply/post content render ─────────── */
.forum-reply-content.ql-editor,
.forum-detail-content.ql-editor {
  padding: 0 !important;
  min-height: unset !important;
  font-size: var(--fs-md);
  color: var(--text);
}
.forum-reply-content.ql-editor p,
.forum-detail-content.ql-editor p { margin: 4px 0; }

/* ── Rules viewer ─────────────────────────────── */
.rules-viewer { pointer-events: none; }

/* ══════════════════════════════════════════════════════
   Custom Themes — settings panel list + actions
   ══════════════════════════════════════════════════════ */
.custom-themes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.custom-theme-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s;
}
.custom-theme-item:hover { border-color: var(--accent-dim); }
.custom-theme-item.active { border-color: var(--accent); }
.custom-theme-dots {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.custom-theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
}
.custom-theme-name {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-theme-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.custom-theme-btn {
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: color .25s cubic-bezier(0.32,0.72,0,1), border-color .15s;
}
.custom-theme-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
.custom-theme-btn.danger:hover { color: var(--status-danger); border-color: rgba(224,85,85,.3); }
.custom-themes-actions {
  display: flex;
  gap: 8px;
}
.custom-themes-actions .btn-secondary { flex: 1; font-size: var(--fs-sm); padding: 6px 4px; }
.custom-themes-actions .hub-btn {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(110,110,245,.35);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.custom-themes-actions .hub-btn:hover {
  background: rgba(110,110,245,.18);
  border-color: rgba(110,110,245,.6);
  box-shadow: 0 0 10px rgba(110,110,245,.3);
}

/* ══════════════════════════════════════════════════════
   Theme Editor Dialog
   ══════════════════════════════════════════════════════ */
.theme-editor-dialog {
  width: min(1200px, 96vw);
  max-height: 92vh;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text);
  padding: 0;
  overflow: hidden;
}
.theme-editor-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 92vh;
}
.theme-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
  gap: 12px;
}
.te-header-left { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.theme-editor-header h2 { font-size: var(--fs-md); font-weight: 700; }
.te-meta { display: flex; gap: 8px; }
.te-name-input {
  flex: 1.2;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.te-desc-input {
  flex: 2;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.theme-editor-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Module nav (left column) ── */
.te-module-nav {
  width: 130px;
  flex-shrink: 0;
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  gap: 2px;
  overflow-y: auto;
}
.te-module-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
  text-align: center;
}
.te-module-btn svg { width: 18px; height: 18px; opacity: .6; }
.te-module-btn:hover { color: var(--text); background: var(--accent-dim); }
.te-module-btn.active {
  color: var(--accent);
  background: var(--accent-dim);
  border-left-color: var(--accent);
}
.te-module-btn.active svg { opacity: 1; }

/* ── Properties panel (middle column) ── */
.te-props-panel {
  width: 250px;
  flex-shrink: 0;
  border-right: 1px solid var(--card-border);
  overflow-y: auto;
  padding: 16px 18px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.te-prop-group { display: flex; flex-direction: column; gap: 8px; }
.te-prop-group-label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  font-family: var(--label-font);
  margin-bottom: 2px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-top: 4px;
}
.te-prop-group:first-child .te-prop-group-label { margin-top: 0; }
.te-prop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
.te-prop-row label {
  font-size: var(--fs-sm);
  color: var(--label);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.te-prop-desc {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  opacity: .7;
  font-weight: 400;
}
.te-prop-row.te-prop-highlighted {
  background: rgba(110,110,245,.12);
  border-left: 2px solid var(--accent);
  padding-left: 6px;
  margin-left: -8px;
  transition: background .3s, border-color .3s;
}
/* ── Color swatch wrapper ── */
.te-color-swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.12); transition: border-color .15s, box-shadow .15s;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.te-color-swatch:hover { border-color: rgba(255,255,255,.3); box-shadow: 0 0 8px rgba(255,255,255,.1); }
.te-color-swatch input[type="color"] {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  border: none; padding: 0; cursor: pointer; opacity: 0;
}
/* ── Angle dial ── */
.te-angle-dial {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  user-select: none; flex-shrink: 0;
}
.te-angle-svg { width: 36px; height: 36px; }
.te-angle-hand { transform-origin: 20px 20px; transition: transform .1s; }
.te-angle-label { font-size: var(--fs-2xs); color: var(--text-muted); }
.theme-color-pick {
  width: 30px;
  height: 22px;
  padding: 1px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-color-pick::-webkit-color-swatch-wrapper { padding: 0; }
.theme-color-pick::-webkit-color-swatch { border: none; border-radius: 3px; }
.te-font-select {
  font-size: var(--fs-xs);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  flex-shrink: 0;
  max-width: 120px;
}
.te-bg-upload-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.te-bg-upload-btn {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--card-border);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-align: center;
  transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
}
.te-bg-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.te-bg-thumb {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--card-border);
}
.te-bg-clear-btn {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.te-bg-clear-btn:hover { color: var(--status-danger); }

/* ── Asset grid (server theme editor) ── */
.te-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; padding: 8px 0; }
.te-asset-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(255,255,255,.08); cursor: pointer; transition: border-color .15s; }
.te-asset-item:hover { border-color: var(--accent); }
.te-asset-item img { width: 100%; height: 60px; object-fit: cover; display: block; }
.te-asset-info { padding: 3px 6px; display: flex; gap: 4px; align-items: center; }
.te-asset-id { font-size: var(--fs-2xs); color: var(--accent); font-weight: 700; }
.te-asset-name { font-size: var(--fs-2xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-asset-delete { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.6); border: none; color: #fff; font-size: var(--fs-xs); cursor: pointer; display: none; line-height: 1; }
.te-asset-item:hover .te-asset-delete { display: flex; align-items: center; justify-content: center; }

/* ── Preview panel (right column) ── */
.te-preview-panel {
  flex: 1;
  padding: 14px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.te-bg-image-preview {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .12;
  pointer-events: none;
}

/* ── Color mode toggle (solid / gradient / image) ── */
.te-mode-group {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}
.te-mode-btn {
  width: 20px; height: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  background: var(--surface-2);
  color: rgba(255,255,255,.35);
  font-size: var(--fs-xs);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.te-mode-btn:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.te-mode-btn.active {
  background: var(--accent); color: #000;
  border-color: var(--accent);
}

.te-gradient-row {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.te-grad-c1, .te-grad-c2 {
  width: 26px; height: 22px; padding: 1px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  cursor: pointer;
  flex-shrink: 0;
}
.te-grad-c1::-webkit-color-swatch-wrapper,
.te-grad-c2::-webkit-color-swatch-wrapper { padding: 0; }
.te-grad-c1::-webkit-color-swatch,
.te-grad-c2::-webkit-color-swatch { border: none; border-radius: 3px; }

/* Legacy labels (keep for backward compat) */
.theme-color-section-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-family: var(--label-font);
}

.theme-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--card-border);
  flex-shrink: 0;
  gap: 8px;
}

/* ── Inline Server Theme Editor ── */
#sp-appearance.active {
  display: flex; flex-direction: column; height: 100%;
  padding: 20px 24px; overflow: hidden;
}
.sp-te-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 10px; flex-shrink: 0;
}
.sp-te-body {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 1;
  min-height: 0;
  background: var(--surface-2);
}
.sp-te-body > .te-module-nav {
  flex-shrink: 0; width: 140px;
  border-right: 1px solid var(--card-border);
  overflow-y: auto;
}
.sp-te-body > .te-props-panel {
  flex: 1; min-width: 220px;
  border-right: 1px solid var(--card-border);
  overflow-y: auto;
}
.sp-te-body > .te-preview-panel {
  flex: 1.6; min-width: 320px;
  display: flex; flex-direction: column;
}
.sp-te-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px; flex-shrink: 0; flex-wrap: wrap;
}

/* ── View tab strip ── */
.tp-header-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.tp-header-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}
.tp-view-tabs {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 1px;
}
.tp-view-tabs::-webkit-scrollbar { display: none; }
.tp-view-tab {
  padding: 3px 9px;
  border-radius: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.tp-view-tab:hover { color: var(--text); background: var(--accent-dim); }
.tp-view-tab.active {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* ── Clickable zone overlays ── */
/* Old-style zones via _zone() helper */
.tp-zone {
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  outline: 1.5px solid transparent;
  outline-offset: 1px;
  transition: outline-color .12s;
}
.tp-zone:hover:not(:has(.tp-zone:hover, [data-te-zone]:hover)) { outline-color: rgba(110,110,245,.5); }
.tp-zone.tp-zone-active { outline-color: #6e6ef5; }
.tp-zone-badge {
  position: absolute;
  top: 2px; right: 3px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(110,110,245,.85);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
  z-index: 10;
  white-space: nowrap;
  letter-spacing: .03em;
}
.tp-zone:hover:not(:has(.tp-zone:hover, [data-te-zone]:hover)) > .tp-zone-badge,
.tp-zone.tp-zone-active > .tp-zone-badge { opacity: 1; }

/* New-style zones — raw [data-te-zone] attr without .tp-zone class */
[data-te-zone]:not(.tp-zone) {
  position: relative;
  cursor: pointer;
  outline: 1.5px solid transparent;
  outline-offset: -1px;
  transition: outline-color .12s;
}
[data-te-zone]:not(.tp-zone):hover:not(:has(.tp-zone:hover, [data-te-zone]:hover)) { outline-color: rgba(110,110,245,.5); }
[data-te-zone].tp-zone-active:not(.tp-zone) { outline-color: #6e6ef5; }
/* Badge via CSS attr() — no extra HTML needed */
[data-te-zone][data-te-label]:not(.tp-zone)::after {
  content: attr(data-te-label);
  position: absolute;
  top: 3px; right: 4px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(110,110,245,.85);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
  z-index: 10;
  white-space: nowrap;
  letter-spacing: .03em;
}
[data-te-zone][data-te-label]:not(.tp-zone):hover:not(:has(.tp-zone:hover, [data-te-zone]:hover))::after,
[data-te-zone][data-te-label].tp-zone-active:not(.tp-zone)::after { opacity: 1; }

/* ── Zone hint ── */
.tp-zone-hint {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: 5px;
  opacity: .6;
  flex-shrink: 0;
}

/* ── Theme Preview Mockup ── */
.theme-preview-panel {
  flex: 1;
  display: flex;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: var(--tp-bg, #080808);
  min-height: 0;
  font-size: var(--fs-xs);
}
.tp-sidebar {
  width: 40px;
  background: var(--tp-surface3, #0e0e0e);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 6px;
}
.tp-server-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tp-surface2, #181818);
}
.tp-server-icon.accent { background: var(--tp-accent, #c8c8c8); opacity: .8; }
.tp-channels {
  width: 120px;
  flex-shrink: 0;
  background: var(--tp-surface2, #111);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tp-server-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tp-text, #f0f0f0);
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px;
}
.tp-channel {
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--tp-muted, #555);
  cursor: pointer;
}
.tp-channel.active {
  background: var(--tp-accent-dim, rgba(200,200,200,.08));
  color: var(--tp-text, #f0f0f0);
}
.tp-main {
  flex: 1;
  background: var(--tp-bg, #080808);
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 8px;
}
.tp-msg {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.tp-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tp-surface2, #181818);
  flex-shrink: 0;
}
.tp-avatar.accent { background: var(--tp-accent, #c8c8c8); opacity: .7; }
.tp-msg-body { display: flex; flex-direction: column; gap: 2px; }
.tp-msg-name { font-size: var(--fs-xs); color: var(--tp-muted, #888); }
.tp-msg-name.accent { color: var(--tp-accent, #c8c8c8); }
.tp-msg-text { font-size: var(--fs-xs); color: var(--tp-text, #f0f0f0); line-height: 1.3; }
.tp-input-row { margin-top: auto; }
.tp-input-box {
  background: var(--tp-input, #0a0a0a);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  padding: 5px 8px;
  color: var(--tp-muted, #555);
  font-size: var(--fs-xs);
}

/* ══════════════════════════════════════════════════════
   Community Theme Hub Dialog
   ══════════════════════════════════════════════════════ */
.theme-hub-dialog {
  width: min(900px, 95vw);
  max-height: 90vh;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text);
  padding: 0;
  overflow: hidden;
}
.theme-hub-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 90vh;
}
.theme-hub-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.theme-hub-header h2 { font-size: var(--fs-lg); font-weight: 700; }
.theme-hub-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.theme-hub-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.theme-hub-toolbar .creation-input { flex: 1; min-width: 160px; }
.theme-hub-filters { display: flex; gap: 4px; }
.theme-filter-btn {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.theme-filter-btn:hover { color: var(--text); border-color: var(--accent-dim); }
.theme-filter-btn.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-dim); }
.theme-hub-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  align-content: start;
}
.theme-hub-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  padding: 48px 0;
  font-size: var(--fs-sm);
}

/* ── Theme Hub Card ── */
.theme-hub-card {
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.theme-hub-card:hover {
  border-color: var(--accent-dim);
  box-shadow: var(--card-shadow);
}
.theme-card-preview {
  height: 52px;
  display: flex;
  gap: 2px;
  padding: 8px;
  background: var(--surface-3);
}
.theme-card-swatch {
  flex: 1;
  border-radius: 3px;
}
.theme-card-body {
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.theme-card-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-card-author { font-size: var(--fs-xs); color: var(--text-muted); }
.theme-card-desc {
  font-size: var(--fs-xs);
  color: var(--label);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
}
.theme-card-stats {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.theme-card-stat { font-size: var(--fs-xs); color: var(--text-muted); }
.theme-card-actions {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--card-border);
}
.theme-card-apply {
  flex: 1;
  padding: 5px 0;
  background: var(--accent-dim);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.theme-card-apply:hover { background: var(--accent); color: var(--bg); }
.theme-card-star {
  padding: 5px 10px;
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.theme-card-star:hover { color: var(--status-warning); border-color: rgba(240,192,48,.3); }
.theme-card-star.starred { color: var(--status-warning); border-color: rgba(240,192,48,.4); background: rgba(240,192,48,.08); }
.theme-card-delete {
  padding: 5px 8px;
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.theme-card-delete:hover { color: var(--status-danger); border-color: rgba(224,85,85,.3); }

/* Server Dropdown Menu */
.server-dropdown {
  position: absolute; top: 48px; left: 8px; right: 8px; z-index: 80;
  background: var(--surface-1); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,0.03); padding: 4px;
  animation: ctxIn 0.2s cubic-bezier(0.32,0.72,0,1) both;
}
.sdd-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  background: none; border: none; border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm);
  font-family: inherit; cursor: pointer; transition: background-color .2s cubic-bezier(0.32,0.72,0,1), color .2s cubic-bezier(0.32,0.72,0,1), border-color .2s cubic-bezier(0.32,0.72,0,1), box-shadow .2s cubic-bezier(0.32,0.72,0,1), transform .2s cubic-bezier(0.32,0.72,0,1), opacity .2s cubic-bezier(0.32,0.72,0,1);
}
.sdd-item:hover { background: rgba(255,255,255,0.04); }
.sdd-item.disabled { opacity: 0.35; pointer-events: none; }
.sdd-item svg { flex-shrink: 0; }
.sdd-sep { height: 1px; background: rgba(255,255,255,0.04); margin: 4px 0; }
.sdd-item.sdd-danger { color: var(--status-danger); }
.sdd-item.sdd-danger:hover { background: rgba(240,71,71,0.08); }
.sidebar-header-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px;
  border-radius: 4px; display: flex; align-items: center; transition: color .25s cubic-bezier(0.32,0.72,0,1);
}
.sidebar-header-btn:hover { color: var(--text); }
#sidebar-header { position: relative; }
#server-dropdown-arrow.open { transform: rotate(180deg); }

/* Invite Friends Dialog */
.invite-friend-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border-radius: var(--radius-sm); transition: background .2s cubic-bezier(0.32,0.72,0,1);
}
.invite-friend-row:hover { background: var(--surface-2); }
.invite-friend-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-3); display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-xs); font-weight: 700;
  color: var(--text-muted); overflow: hidden;
}
.invite-friend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.invite-friend-info { flex: 1; min-width: 0; }
.invite-friend-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); display: block; }
.invite-friend-username { font-size: var(--fs-xs); color: var(--text-muted); }
.invite-friend-btn {
  padding: 5px 14px; font-size: var(--fs-sm); font-weight: 600; border-radius: 4px;
  border: 1px solid var(--accent); background: none; color: var(--accent);
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s; flex-shrink: 0;
}
.invite-friend-btn:hover { background: var(--accent); color: var(--bg); }
.invite-friend-btn.sent { border-color: var(--text-muted); color: var(--text-muted); pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════
   FIRST-RUN THEME PICKER
   Shown once on first login before the tutorial fires.
   Z-axis cascade of theme cards with live hover preview.
   ══════════════════════════════════════════════════════════════════ */

#theme-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl, 32px);
  animation: tpFadeIn 0.5s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)) both;
}
@keyframes tpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tp-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg);
  transition: background-color 280ms ease-out;
}
.tp-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--accent-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-dim) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.2;
  pointer-events: none;
}
.tp-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 500px at 50% 40%, var(--accent-dim) 0%, transparent 70%),
    radial-gradient(ellipse at center, transparent 20%, var(--bg) 90%);
  pointer-events: none;
}

.tp-content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  width: 100%;
  text-align: center;
  animation: tpContentIn 460ms var(--motion-spring, cubic-bezier(0.32,0.72,0,1)) both;
}
@keyframes tpContentIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.tp-eyebrow {
  display: inline-block;
  font-family: var(--label-font, 'IBM Plex Mono'), monospace;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-xl, 24px);
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline, rgba(255,255,255,0.04));
}

.tp-headline {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.02;
  color: var(--text);
  text-transform: uppercase;
  margin: 0 0 var(--space-lg, 16px);
  transition: color 260ms ease-out,
              text-shadow 260ms ease-out;
}
.tp-content.is-hovering .tp-headline {
  color: var(--accent);
  text-shadow: var(--accent-glow);
}

.tp-subtitle {
  font-family: var(--ui-font, 'Exo 2'), sans-serif;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  line-height: 1.6;
}

.tp-cards {
  display: flex;
  gap: var(--space-md, 12px);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding: 0 var(--space-md, 12px);
}

.tp-card {
  position: relative;
  flex: 0 1 160px;
  min-width: 140px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline-strong, rgba(255,255,255,0.06));
  border-radius: 18px;
  padding: var(--space-md, 12px);
  cursor: pointer;
  transition:
    transform 220ms var(--motion-spring, cubic-bezier(0.32,0.72,0,1)),
    border-color 200ms ease-out,
    background-color 200ms ease-out,
    box-shadow 220ms ease-out,
    opacity 200ms ease-out;
  font-family: var(--ui-font, 'Exo 2'), sans-serif;
  color: var(--text);
  text-align: center;
  overflow: hidden;
  /* Staggered entrance — each card enters 50ms after the previous. */
  opacity: 0;
  transform: translateY(12px);
  animation: tpCardIn 380ms var(--motion-spring, cubic-bezier(0.32,0.72,0,1)) both;
}
.tp-card:nth-child(1) { animation-delay: 140ms; }
.tp-card:nth-child(2) { animation-delay: 190ms; }
.tp-card:nth-child(3) { animation-delay: 240ms; }
.tp-card:nth-child(4) { animation-delay: 290ms; }
.tp-card:nth-child(5) { animation-delay: 340ms; }
@keyframes tpCardIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-card { animation: none; opacity: 1; transform: none; }
}
.tp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.tp-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.tp-cards:hover .tp-card:not(:hover):not([aria-checked="true"]) {
  opacity: 0.5;
}
.tp-card[aria-checked="true"] {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--accent);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 24px var(--accent-dim);
}
.tp-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Preview swatch — renders a miniature of the theme */
.tp-card-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md, 12px);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.tp-card-preview::before,
.tp-card-preview::after {
  content: '';
  position: absolute;
}
/* Inner sidebar stripe */
.tp-card-preview::before {
  top: 0; bottom: 0; left: 0;
  width: 30%;
}
/* Accent dot */
.tp-card-preview::after {
  top: 50%; left: 50%;
  width: 36%; height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
}

/* Ghost preview */
.tp-card-preview[data-preview-theme="ghost"] {
  background: linear-gradient(135deg, #121212, #080808);
}
.tp-card-preview[data-preview-theme="ghost"]::before {
  background: #181818;
  border-right: 1px solid rgba(200,200,200,0.12);
}
.tp-card-preview[data-preview-theme="ghost"]::after {
  background: #c8c8c8;
  box-shadow: 0 0 8px rgba(200,200,200,0.4);
}

/* Mint preview */
.tp-card-preview[data-preview-theme="mint"] {
  background: linear-gradient(135deg, #111412, #0d0d0d);
}
.tp-card-preview[data-preview-theme="mint"]::before {
  background: #161917;
  border-right: 1px solid rgba(0,255,180,0.2);
}
.tp-card-preview[data-preview-theme="mint"]::after {
  background: #00ffb4;
  box-shadow: 0 0 10px rgba(0,255,180,0.7);
}

/* Synthwave preview */
.tp-card-preview[data-preview-theme="synthwave"] {
  background: linear-gradient(135deg, #180024, #0a0010);
}
.tp-card-preview[data-preview-theme="synthwave"]::before {
  background: #1a0028;
  border-right: 1px solid rgba(255,0,220,0.25);
}
.tp-card-preview[data-preview-theme="synthwave"]::after {
  background: #ff00dc;
  box-shadow: 0 0 10px rgba(255,0,220,0.8);
}

/* Ember preview */
.tp-card-preview[data-preview-theme="ember"] {
  background: linear-gradient(135deg, #1a1000, #0c0800);
}
.tp-card-preview[data-preview-theme="ember"]::before {
  background: #1e0e00;
  border-right: 1px solid rgba(255,106,0,0.25);
}
.tp-card-preview[data-preview-theme="ember"]::after {
  background: #ff6a00;
  box-shadow: 0 0 10px rgba(255,106,0,0.8);
}

/* Cryo preview */
.tp-card-preview[data-preview-theme="cryo"] {
  background: linear-gradient(135deg, #041828, #010810);
}
.tp-card-preview[data-preview-theme="cryo"]::before {
  background: #041828;
  border-right: 1px solid rgba(0,212,255,0.25);
}
.tp-card-preview[data-preview-theme="cryo"]::after {
  background: #00d4ff;
  box-shadow: 0 0 10px rgba(0,212,255,0.8);
}

.tp-card-name {
  font-family: 'Orbitron', monospace;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}
.tp-card-tag {
  font-family: var(--label-font, 'IBM Plex Mono'), monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Actions */
.tp-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md, 12px);
}

.tp-continue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 10px 14px 28px;
  border-radius: 100px;
  border: 1px solid var(--accent);
  background: rgba(255,255,255,0.04);
  color: var(--accent);
  font-family: var(--ui-font, 'Exo 2'), sans-serif;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 220ms ease-out, color 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out, transform 180ms var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), opacity 220ms ease-out;
  box-shadow: 0 0 20px var(--accent-dim);
}
.tp-continue:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
  border-color: var(--hairline-strong, rgba(255,255,255,0.06));
  color: var(--text-muted);
  background: rgba(255,255,255,0.02);
}
.tp-continue:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: var(--accent-glow), 0 8px 32px var(--accent-dim);
}
.tp-continue:not(:disabled):active {
  transform: translateY(0) scale(0.98);
}
.tp-continue-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  font-size: var(--fs-lg);
  transition: transform 200ms var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), background-color 200ms ease-out;
}
.tp-continue:not(:disabled):hover .tp-continue-icon {
  transform: translateX(2px);
  background: rgba(255,255,255,0.15);
}

.tp-skip {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--label-font, 'IBM Plex Mono'), monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  cursor: pointer;
  padding: 8px 16px;
  transition: color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
}
.tp-skip:hover {
  color: var(--text);
}

.tp-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 720px) {
  .tp-cards {
    gap: var(--space-sm, 8px);
  }
  .tp-card {
    flex: 0 1 calc(50% - 4px);
  }
  .tp-headline {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #theme-picker-modal,
  .tp-content,
  .tp-card,
  .tp-continue,
  .tp-continue-icon,
  .tp-headline,
  .tp-backdrop {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   EMPTY STATES
   Inline contextual hints inside empty zones. Lives as first-class
   content, not a floating tooltip.
   ══════════════════════════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md, 12px);
  padding: var(--space-2xl, 32px) var(--space-lg, 16px);
  text-align: center;
  max-width: 340px;
  margin: auto;
  animation: emptyIn 0.5s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)) both;
}
@keyframes emptyIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.empty-state-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.4;
}
.empty-state-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-state-headline {
  font-family: var(--ui-font, 'Exo 2'), sans-serif;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.empty-state-helper {
  font-family: var(--ui-font, 'Exo 2'), sans-serif;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 280px;
}

.empty-state-cta {
  margin-top: var(--space-sm, 8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--hairline-focus, rgba(255,255,255,0.12));
  color: var(--text);
  font-family: var(--ui-font, 'Exo 2'), sans-serif;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), border-color 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), box-shadow 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), transform 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)), opacity 0.3s var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
}
.empty-state-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  background: var(--accent-dim);
}
.empty-state-cta:active {
  transform: translateY(0) scale(0.98);
}

/* Compact variant for narrow zones like channel sidebar */
.empty-state.is-compact {
  padding: var(--space-lg, 16px) var(--space-md, 12px);
  gap: var(--space-sm, 8px);
}
.empty-state.is-compact .empty-state-icon { width: 28px; height: 28px; }
.empty-state.is-compact .empty-state-headline { font-size: var(--fs-sm); }
.empty-state.is-compact .empty-state-helper { font-size: var(--fs-sm); }


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE LAYOUT
   Desktop-first app collapses to drawer-based navigation on mobile.
   Breakpoints: 480px (phone), 768px (tablet), 1024px (small laptop)
   ══════════════════════════════════════════════════════════════════ */

/* ── Sidebar slide-over on tablet/small laptop (< 1024px) ───────
   When open, sidebar overlays the chat area instead of pushing it.
   Prevents chat from being squished on narrow viewports. */
@media (max-width: 1023px) {
  #sidebar,
  #dm-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 72px; /* server rail width */
    z-index: 25;
    box-shadow: 4px 0 32px rgba(0,0,0,0.3);
    transition: transform 0.35s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)),
                opacity 0.25s ease;
    transform: translateX(0);
    will-change: transform;
  }
  .sidebar-collapsed #sidebar,
  .sidebar-collapsed #dm-sidebar {
    /* Override desktop width:0 collapse behavior — use transform instead */
    width: 240px !important;
    padding: 0 !important;
    transform: translateX(-100%);
    box-shadow: none;
    pointer-events: none;
  }

  /* Members panel also slides over from the right on tablet */
  #members-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 25;
    box-shadow: -4px 0 32px rgba(0,0,0,0.3);
    transition: transform 0.35s var(--motion-spring, cubic-bezier(0.32,0.72,0,1)),
                opacity 0.25s ease;
    transform: translateX(0);
    will-change: transform;
  }
  #members-panel.panel-hidden {
    width: 220px !important;
    transform: translateX(100%);
    opacity: 1;
    box-shadow: none;
    pointer-events: none;
  }

  /* Backdrop when sidebar is open over chat */
  #app-body::before {
    content: '';
    position: absolute;
    inset: 0;
    left: 72px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 20;
  }
  body:not(.sidebar-collapsed) #app-body::before {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Phone layout (< 768px) ─────────────────────────────────────
   Server rail gets absolute positioned too, becomes a left drawer.
   Topbar compacts, touch targets enforced at 44px. */
@media (max-width: 767px) {
  #server-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    transition: transform 0.35s var(--motion-spring, cubic-bezier(0.32,0.72,0,1));
    will-change: transform;
    box-shadow: 4px 0 32px rgba(0,0,0,0.4);
  }
  .mobile-nav-hidden #server-rail {
    transform: translateX(-100%);
    box-shadow: none;
  }

  #sidebar,
  #dm-sidebar {
    left: 0 !important; /* overlay from far left on phones */
  }

  /* Chat area takes full width when drawers closed */
  #main-content {
    width: 100vw;
  }

  /* Enforce minimum touch targets */
  .topbar-btn,
  .channel-item,
  .dm-sidebar-item,
  .voice-ctrl-btn,
  .vc-disconnect-btn,
  .footer-user-info,
  .empty-state-cta {
    min-height: var(--touch-target, 44px);
  }

  /* Compact topbar on phones */
  #channel-topbar {
    padding: 0 12px;
    height: 44px;
  }
  #channel-topbar-desc {
    display: none; /* free up space on narrow screens */
  }

  /* Message input: larger touch area, prevent zoom on focus (iOS) */
  #message-input {
    font-size: 1rem; /* 16px min stops iOS Safari from zooming */
    padding: 12px 14px;
  }

  /* Hide voice ping readout on phones (signal bars suffice) */
  .vc-ping-readout {
    display: none;
  }

  /* Stack sidebar footer vertically on very narrow */
  #sidebar-footer {
    padding: 10px;
    gap: 8px;
  }

  /* Modals fill more of the viewport on phones */
  dialog {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    margin: 8px !important;
    padding: 1.25rem !important;
  }
}

/* ── Small phone (< 480px) ──────────────────────────────────────
   Hide desc/info-chrome, maximize content space. */
@media (max-width: 479px) {
  /* Server rail narrower on small phones */
  #server-rail {
    width: 64px;
    padding: 8px 0 80px;
  }
  .server-icon,
  .server-add-btn {
    width: 44px;
    height: 44px;
  }
  .sidebar-collapsed #sidebar,
  .sidebar-collapsed #dm-sidebar {
    width: calc(100vw - 64px) !important;
  }
}

/* ── Reduce motion for entrance animations ─────────────────────
   Already handled in individual components — this is the blanket
   fallback for anything that slipped through. */
@media (prefers-reduced-motion: reduce) {
  #sidebar,
  #dm-sidebar,
  #members-panel,
  #server-rail {
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════
   Buffs — server subscription admin UI
   Scoped to the Buffs settings panel and the tier edit dialog.
   All colors come from theme tokens so custom themes render correctly.
   ══════════════════════════════════════════════════════════ */
.buffs-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.buffs-banner-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
  line-height: 1.5;
}
.buffs-banner-action {
  flex: 0 0 auto;
  align-self: center;
  font-size: var(--fs-xs);
  padding: 6px 12px;
  white-space: nowrap;
}
.buffs-field-label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.buffs-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.buffs-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.buffs-radio:hover { border-color: var(--hairline-strong); }
.buffs-radio input[type="radio"] {
  margin: 3px 0 0;
  accent-color: var(--accent);
}
.buffs-radio:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-dim) 50%, var(--surface-2));
}
.buffs-radio-label { display: flex; flex-direction: column; gap: 2px; }
.buffs-radio-label strong { font-size: var(--fs-sm); color: var(--text); font-weight: 600; }
.buffs-radio-hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.buffs-preview-msg {
  padding: 10px 14px;
  background: var(--surface-1);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.buffs-preview-msg code { background: transparent; }

/* Server Buff Standing card */
.buffs-standing {
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
}
.buffs-standing[data-kind="ok"] {
  border-color: color-mix(in srgb, var(--status-online) 40%, var(--hairline));
  background: color-mix(in srgb, var(--status-online-dim) 35%, var(--surface-2));
}
.buffs-standing[data-kind="pending"] {
  border-color: color-mix(in srgb, var(--status-idle) 40%, var(--hairline));
  background: color-mix(in srgb, var(--status-idle-dim) 35%, var(--surface-2));
}
.buffs-standing[data-kind="danger"] {
  border-color: color-mix(in srgb, var(--status-danger) 40%, var(--hairline));
  background: color-mix(in srgb, var(--status-danger-dim) 35%, var(--surface-2));
}
.buffs-standing-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-md);
}
.buffs-standing-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.buffs-standing-label {
  font-family: 'Orbitron', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.buffs-standing-verdict {
  font-family: 'Orbitron', monospace;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}
.buffs-standing[data-kind="ok"] .buffs-standing-verdict      { color: var(--status-online); }
.buffs-standing[data-kind="pending"] .buffs-standing-verdict { color: var(--status-idle); }
.buffs-standing[data-kind="danger"] .buffs-standing-verdict  { color: var(--status-danger); }
.buffs-standing-copy {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.buffs-standing-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.buffs-standing-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.buffs-standing-check.pass { border-color: color-mix(in srgb, var(--status-online) 30%, var(--hairline)); }
.buffs-standing-check.fail { border-color: color-mix(in srgb, var(--status-danger) 30%, var(--hairline)); }
.buffs-standing-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.buffs-standing-check.pass .buffs-standing-icon {
  background: color-mix(in srgb, var(--status-online) 20%, var(--surface-2));
  color: var(--status-online);
}
.buffs-standing-check.fail .buffs-standing-icon {
  background: color-mix(in srgb, var(--status-danger) 20%, var(--surface-2));
  color: var(--status-danger);
}
.buffs-standing-check-label {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 500;
}
.buffs-standing-check-detail {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.buffs-standing-link {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--accent);
  text-decoration: none;
}
.buffs-standing-link:hover { text-decoration: underline; }
.buffs-banner[data-kind="ok"] {
  border-color: color-mix(in srgb, var(--status-online) 40%, var(--hairline));
  background: color-mix(in srgb, var(--status-online-dim) 60%, var(--surface-2));
}
.buffs-banner[data-kind="pending"] {
  border-color: color-mix(in srgb, var(--status-idle) 40%, var(--hairline));
  background: color-mix(in srgb, var(--status-idle-dim) 60%, var(--surface-2));
}
.buffs-banner[data-kind="danger"] {
  border-color: color-mix(in srgb, var(--status-danger) 40%, var(--hairline));
  background: color-mix(in srgb, var(--status-danger-dim) 60%, var(--surface-2));
}
.buffs-banner[data-kind="neutral"] { background: var(--surface-2); }
.buffs-banner strong { color: var(--text); }

.buffs-tiers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  gap: var(--space-md);
}
.buffs-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}
.buff-tier-card {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: border-color 160ms ease-out, transform 160ms var(--motion-spring);
}
.buff-tier-card:hover {
  border-color: var(--hairline-strong);
}
.buff-tier-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.buff-tier-name {
  font-family: var(--logo-font, 'Orbitron'), monospace;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.buff-tier-price {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.buff-tier-desc {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.buff-tier-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
}
.buff-tier-actions button { flex: 1; }

.buff-flair {
  flex-shrink: 0;
  vertical-align: middle;
}

.buffs-empty {
  padding: var(--space-xl) 0;
  max-width: 600px;
}

/* Tier edit dialog — flair picker grid */
.bte-flair-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.bte-flair-btn {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text);
  /* Only transition border/shadow — no bg transition avoids the flash-on-re-render. */
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out, transform 100ms ease-out;
  overflow: hidden;
}
.bte-flair-btn:hover {
  border-color: var(--hairline-strong);
}
.bte-flair-btn.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.bte-flair-btn:active { transform: scale(0.96); }
.bte-flair-btn img,
.bte-flair-btn svg { pointer-events: none; }

/* Flair tabs (Built-in vs Custom emote) */
.bte-flair-tabs {
  display: flex;
  gap: var(--space-xs);
  padding: 3px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.bte-flair-tab {
  flex: 1;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: calc(var(--radius-md) - 3px);
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.bte-flair-tab:hover { color: var(--text); }
.bte-flair-tab.active {
  background: var(--surface-3);
  color: var(--text);
}
.bte-flair-panel[hidden] { display: none; }
.bte-flair-hint {
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--surface-1);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
  line-height: 1.5;
}
.bte-flair-hint-tight {
  margin: 0 0 var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-style: solid;
}

/* Preview row */
.bte-flair-preview-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.bte-flair-preview-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bte-flair-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.bte-flair-preview svg,
.bte-flair-preview img { width: 28px; height: 28px; }
.bte-flair-reset {
  margin-left: auto;
  font-size: var(--fs-xs);
}

/* Color pickers */
.bte-color-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.bte-color-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.bte-color-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 56px;
}
.bte-color-swatch-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-2);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: border-color 120ms ease-out, transform 100ms ease-out;
}
.bte-color-swatch-btn:hover { border-color: var(--accent); }
.bte-color-swatch-btn:active { transform: scale(0.96); }
.bte-color-swatch-btn.is-empty::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: linear-gradient(135deg,
    transparent calc(50% - 1px),
    var(--status-danger) 50%,
    transparent calc(50% + 1px));
  border-radius: 2px;
  opacity: 0.6;
}
.bte-color-hex {
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  min-width: 70px;
}
.bte-outline-clear {
  margin-left: auto;
  font-size: var(--fs-xs);
}

/* Color popover (custom picker — replaces native color input) */
.bte-color-popover {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.bte-color-popover[hidden] { display: none; }
.bte-color-swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: var(--space-sm);
}
.bte-color-preset {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  padding: 0;
  transition: transform 100ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.bte-color-preset:hover {
  transform: scale(1.06);
  border-color: rgba(255,255,255,0.24);
}
.bte-color-preset.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}
.bte-color-hex-input {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.bte-color-hex-input span {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  font-size: var(--fs-sm);
}
.bte-color-hex-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  padding: 0;
}
.bte-color-hex-input button { font-size: var(--fs-xs); }

/* Emote tab: avatar tiles keep their natural color */
.bte-emote-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Buffs — Support Card (member-facing, on server overview) ── */
.buffs-support-card {
  max-width: 960px;
  margin: var(--space-2xl) auto 0;
  padding: var(--space-xl);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.buffs-support-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.buffs-support-eyebrow {
  font-family: var(--label-font, 'IBM Plex Mono'), monospace;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.buffs-support-title {
  font-family: var(--logo-font, 'Orbitron'), monospace;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--space-xs);
  color: var(--text);
}
.buffs-support-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}
.buffs-support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}
.buff-support-tier .buffs-support-cta-row {
  display: flex;
  gap: var(--space-xs);
  margin-top: auto;
}
.buff-support-tier .buffs-support-cta-row button { flex: 1; }
.buffs-support-mine {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

@media (max-width: 640px) {
  .buffs-support-grid { grid-template-columns: 1fr; }
  .buffs-support-card { padding: var(--space-lg); }
}

/* ── Buffs admin — tab nav + dashboard tabs ── */
.buffs-tab-nav {
  display: flex;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
}
.buffs-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--label-font, 'IBM Plex Mono'), monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.buffs-tab-btn:hover { color: var(--text); }
.buffs-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.buffs-tab-content { min-height: 200px; }

/* Subscribers table */
.buffs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.buffs-table th,
.buffs-table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--hairline);
}
.buffs-table th {
  font-family: var(--label-font, 'IBM Plex Mono'), monospace;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 500;
}
.buffs-table-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-block;
}
.buffs-table-avatar-fallback {
  background: var(--surface-3);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-family: var(--label-font, 'IBM Plex Mono'), monospace;
}

/* Reports */
.buffs-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}
.buffs-stat {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.buffs-stat-label {
  font-family: var(--label-font, 'IBM Plex Mono'), monospace;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}
.buffs-stat-value {
  font-family: var(--logo-font, 'Orbitron'), monospace;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-xs);
  line-height: 1;
}
.buffs-stat-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.buffs-report-warnings {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Settings tab */
.buffs-settings-grid {
  display: grid;
  gap: var(--space-lg);
}
.buffs-setting {
  padding: var(--space-lg);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.buffs-setting h4 {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--logo-font, 'Orbitron'), monospace;
}
.buffs-setting-hint {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 60ch;
}

/* ── Buffs — subscriber disclosure modal ── */
/* Previously the body used inline max-width:520px which constrained the
   content but didn't center it inside the 640px dialog, leaving visible
   empty space on the right of every item. Giving the body real padding
   fills the dialog uniformly and aligns header + body on the same
   left/right inset. */
.buff-disclosure-body {
  padding: 20px 24px 24px;
  max-height: calc(92vh - 80px);
  overflow-y: auto;
}
.buff-disclosure-intro {
  margin: 0 0 var(--space-md);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.buff-disclosure-item {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}
.buff-disclosure-item h4 {
  font-family: var(--logo-font, 'Orbitron'), monospace;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 var(--space-xs);
}
.buff-disclosure-item p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-normal);
}
.buff-disclosure-checkbox {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--hairline));
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.buff-disclosure-checkbox input { margin-top: 3px; flex-shrink: 0; }

/* ── Buffs — help links list in Settings tab ── */
.buffs-help-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-xs);
}
.buffs-help-links li { margin: 0; }
.buffs-help-links a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.buffs-help-links a:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
  color: var(--accent);
  text-decoration: none;
}

/* ── Buffs — change-tier picker modal ── */
.bct-tier-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.bct-tier {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: border-color 160ms ease-out, background-color 160ms ease-out, transform 100ms ease-out;
  width: 100%;
  font: inherit;
}
.bct-tier:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-dim) 60%, var(--surface-2));
}
.bct-tier:active:not(:disabled) { transform: scale(0.995); }
.bct-tier:disabled,
.bct-tier.is-current {
  opacity: 0.6;
  cursor: default;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline));
}
.bct-tier-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.bct-tier-identity { flex: 1; min-width: 0; }
.bct-tier-price-row {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 2px;
}
.bct-tier-monthly { color: var(--text); font-weight: 600; }
.bct-tier-annual { font-size: var(--fs-xs); }
.bct-tier-desc {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
}
.bct-chip {
  font-family: var(--label-font, 'IBM Plex Mono'), monospace;
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 100px;
  flex-shrink: 0;
}
.bct-chip-current {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.bct-chip-upgrade {
  background: var(--status-online-dim);
  color: var(--status-online);
}
.bct-chip-downgrade {
  background: var(--status-idle-dim);
  color: var(--status-idle);
}

/* ── Your Buffs panel (user settings) ── */
.your-buffs-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.your-buff-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.your-buff-server-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
.your-buff-server-icon-fallback {
  background: var(--surface-3);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--logo-font, 'Orbitron'), monospace;
  font-weight: 700;
  font-size: var(--fs-md);
}
.your-buff-identity { flex: 1; min-width: 0; }
.your-buff-server-name {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-md);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.your-buff-tier-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}
.your-buff-chip {
  font-family: var(--label-font, 'IBM Plex Mono'), monospace;
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  flex-shrink: 0;
}
.your-buffs-empty {
  padding: var(--space-xl) 0;
}

@media (max-width: 640px) {
  .your-buff-row { flex-wrap: wrap; }
  .your-buff-row .btn-outline { width: 100%; }
}

/* ── Buffs — tier edit dialog height fix ── */
#dialog-buff-tier-edit {
  max-height: min(92vh, 900px);
  width: min(560px, 92vw);
}
#dialog-buff-tier-edit .creation-dialog-body {
  max-height: calc(92vh - 80px);
  overflow-y: auto;
  padding: var(--space-lg) var(--space-xl) var(--space-lg);
}
#dialog-buff-tier-edit .dialog-field { margin-bottom: var(--space-md); }
#dialog-buff-tier-edit .dialog-actions {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}
.bte-flair-grid { margin-top: var(--space-sm); }
.bte-color-row { gap: var(--space-xs); margin-top: var(--space-md); }

/* ══════════════════════════════════════════════════════
   Group DMs
   ══════════════════════════════════════════════════════ */
.dm-sidebar-item-group .dm-sidebar-avatar { border-radius: var(--radius-md); }

.dm-group-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
}
.dm-group-avatar-custom {
  background-size: cover;
  background-position: center;
}
.dm-group-avatar-bit {
  position: absolute;
  width: 60%;
  height: 60%;
  background-size: cover;
  background-position: center;
  border: 2px solid var(--surface-1);
  border-radius: 50%;
}
.dm-group-avatar-bit[data-slot="0"] { top: 6%; left: 4%; }
.dm-group-avatar-bit[data-slot="1"] { bottom: 6%; right: 4%; }

/* ── Modals ────────────────────────────────────────── */
.dm-group-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2200;
  padding: var(--space-lg);
  backdrop-filter: blur(2px);
}
.dm-group-modal-backdrop[hidden] { display: none; }
.dm-group-modal {
  width: min(440px, 96vw);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.dm-group-modal-narrow { width: min(360px, 96vw); }
.dm-group-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
}
.dm-group-modal > header h3 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
}
.dm-group-modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.dm-group-modal-close:hover {
  color: var(--text);
  background: var(--surface-2);
}
.dm-group-modal-sub {
  margin: 0;
  padding: 12px 20px 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.dm-group-modal .dm-group-input,
.dm-group-modal input[type="search"],
.dm-group-modal input[type="text"] {
  width: calc(100% - 40px);
  margin: 12px 20px 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--fs-sm);
}
.dm-group-modal .dm-group-input:focus,
.dm-group-modal input:focus {
  outline: none;
  border-color: var(--accent);
}
.dm-group-friend-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 0;
  min-height: 180px;
}
.dm-group-friend-row,
.dm-group-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.dm-group-friend-row:hover { background: var(--surface-2); }
.dm-group-friend-row.selected { background: color-mix(in srgb, var(--accent-dim) 50%, var(--surface-2)); }
.dm-group-friend-row input[type="checkbox"] {
  margin-left: auto;
  accent-color: var(--accent);
}
.dm-group-friend-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-3);
  flex-shrink: 0;
}
.dm-group-friend-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
.dm-group-friend-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.dm-group-friend-name {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-group-friend-handle {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.dm-group-owner-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 6px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dm-group-members-list {
  margin-top: 16px;
  padding: 12px 0 8px;
  border-top: 1px solid var(--hairline);
}
.dm-group-members-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px 4px;
}
.dm-group-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.dm-group-modal-footer {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--hairline);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.dm-group-modal-footer .btn-confirm { margin-left: auto; }

/* Edit group body */
.dm-group-edit-body {
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Keep the whole body scrollable as a fallback, but the members list
     below has its own internal max-height so it's the primary scroll
     surface on tall member lists. */
}
/* Members list inside the Edit Group modal — becomes the dedicated scroll
   area when the list gets long, so the icon/name fields + danger zone +
   invite link stay anchored. */
.dm-group-edit-body .dm-group-members-list {
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 10px;
  background: var(--surface-1);
}
.dm-group-icon-picker {
  position: relative;
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  cursor: pointer;
}
.dm-group-icon-preview {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-group-icon-edit-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface-1);
}

/* Invite link row */
.dm-group-invite-hint {
  flex: 1;
  margin-right: auto;
}
.dm-group-invite-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.dm-group-invite-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.dm-group-invite-row input[type="text"] {
  flex: 1;
  margin: 0;
  padding: 8px 10px;
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  font-size: var(--fs-xs);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text);
}
#dm-group-invites-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

/* Force the extra DM header buttons to pick up the same style as the
   existing call/video buttons. */
#btn-dm-add-friends svg,
.dm-group-only-btn svg { display: block; }

/* ══════════════════════════════════════════════════════
   Group Call (LiveKit)
   ══════════════════════════════════════════════════════ */
#gc-call-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2300;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
#gc-call-bar[hidden] { display: none; }
.gc-call-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-right: 6px;
  border-right: 1px solid var(--hairline);
}
.gc-call-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gc-call-count {
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  font-size: var(--fs-sm);
  color: var(--text);
  padding: 2px 8px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 999px;
  font-weight: 600;
}
.gc-call-controls {
  display: flex;
  gap: 6px;
}
.gc-ctrl {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background-color 120ms ease-out, transform 100ms ease-out;
}
.gc-ctrl:hover { background: var(--surface-3); }
.gc-ctrl:active { transform: scale(0.94); }
.gc-ctrl.active { background: var(--accent-dim); color: var(--accent); }
/* Patched SVG icons inside the ctrl buttons — size + inherit color */
.gc-ctrl svg { width: 18px; height: 18px; display: block; pointer-events: none; }
.gc-hangup { background: var(--status-danger-dim); color: var(--status-danger); }
.gc-hangup:hover { background: var(--status-danger); color: #fff; }
.gc-hangup svg { color: currentColor; }

/* ── Group call "Join Call" banner ──────────────────────────
   Shown at the top of a group DM thread when someone else has
   an active call running and the current user isn't in it. */
#gc-join-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, var(--status-online-dim, rgba(62,175,114,0.18)), var(--accent-dim));
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  animation: gc-join-banner-pulse 2.2s ease-in-out infinite;
}
@keyframes gc-join-banner-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62,175,114,0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(62,175,114,0.02); }
}
.gc-join-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.gc-join-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--status-online, #3eaf72);
  color: #fff;
  flex-shrink: 0;
}
.gc-join-banner-icon svg { width: 16px; height: 16px; }
.gc-join-banner-text {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gc-join-banner-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: var(--status-online, #3eaf72);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color 120ms ease-out, transform 100ms ease-out;
  white-space: nowrap;
}
.gc-join-banner-btn:hover { background: var(--accent); }
.gc-join-banner-btn:active { transform: scale(0.96); }

/* Sidebar indicator when a group DM has an active call */
.dm-sidebar-item.has-active-call {
  position: relative;
}
.dm-sidebar-item.has-active-call::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--status-online, #3eaf72);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--status-online, #3eaf72);
}
.dm-sidebar-call-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--status-online-dim, rgba(62,175,114,0.2));
  color: var(--status-online, #3eaf72);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.dm-sidebar-call-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: gc-pulse-dot 1.4s ease-in-out infinite;
}
@keyframes gc-pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Video grid (floating panel above the call bar) */
.gc-video-grid {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 2250;
  display: grid;
  gap: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  max-width: min(520px, 92vw);
  max-height: min(480px, 70vh);
  overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.gc-video-grid[hidden] { display: none; }
.gc-video-grid-expanded {
  top: 72px;
  left: 24px;
  right: 24px;
  bottom: 96px;
  max-width: none;
  max-height: none;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.gc-tile {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 120ms ease-out;
}
.gc-tile.is-speaking { border-color: var(--status-online); }
.gc-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.gc-tile.no-video video { visibility: hidden; }
.gc-tile-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
}
.gc-tile.no-video .gc-tile-overlay { display: flex; }
.gc-tile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
}
.gc-tile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gc-tile-name {
  position: absolute;
  left: 6px;
  bottom: 6px;
  right: 6px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-tile-mic {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-online);
  flex-shrink: 0;
}
.gc-tile.mic-muted .gc-tile-mic { background: var(--status-danger); }
.gc-audio-slot { display: none; } /* remote audio elements live here; no UI */

@media (max-width: 640px) {
  .gc-video-grid {
    right: 8px;
    bottom: 88px;
    max-width: calc(100vw - 16px);
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* ══════════════════════════════════════════════════════
   Themed tooltips (replaces native title="" tooltips)
   Apply with data-tooltip="label". Defaults to below-anchor.
   Add data-tooltip-pos="top" to flip above.
   ══════════════════════════════════════════════════════ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 5px 10px;
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
  z-index: 2400;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
[data-tooltip]::before {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 8px;
  height: 8px;
  background: var(--surface-1);
  border-left: 1px solid var(--hairline-strong);
  border-top: 1px solid var(--hairline-strong);
  rotate: 45deg;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
  z-index: 2401;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 180ms;
}
[data-tooltip][data-tooltip-pos="top"]::after {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
}
[data-tooltip][data-tooltip-pos="top"]::before {
  top: auto;
  bottom: calc(100% + 3px);
  border: none;
  border-right: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  transform: translateX(-50%) translateY(4px);
}
[data-tooltip][data-tooltip-pos="top"]:hover::after,
[data-tooltip][data-tooltip-pos="top"]:focus-visible::after,
[data-tooltip][data-tooltip-pos="top"]:hover::before,
[data-tooltip][data-tooltip-pos="top"]:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}
/* Empty tooltip value? Skip rendering to avoid an empty bubble. */
[data-tooltip=""]::before,
[data-tooltip=""]::after { content: none; }

/* Right-align variant for tooltips on buttons near a container's right
   edge (e.g. × Remove buttons in member rows). Anchors the bubble to the
   button's right edge instead of centering, so it never clips past the
   enclosing modal. */
[data-tooltip][data-tooltip-align="end"]::after {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-4px);
}
[data-tooltip][data-tooltip-align="end"]::before {
  left: auto;
  right: 12px;
  transform: translateX(0) translateY(-4px);
}
[data-tooltip][data-tooltip-align="end"]:hover::after,
[data-tooltip][data-tooltip-align="end"]:focus-visible::after,
[data-tooltip][data-tooltip-align="end"]:hover::before,
[data-tooltip][data-tooltip-align="end"]:focus-visible::before {
  transform: translateX(0) translateY(0);
}

/* ══════════════════════════════════════════════════════
   Group members popover (Show Members button)
   ══════════════════════════════════════════════════════ */
.dm-group-members-popover {
  position: fixed;
  width: min(280px, 92vw);
  max-height: min(420px, 70vh);
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  z-index: 2350;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: dm-group-members-popover-in 160ms ease-out;
}
@keyframes dm-group-members-popover-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dm-group-members-popover[hidden] { display: none; }
.dm-group-members-popover-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.dm-group-members-popover-list {
  list-style: none;
  padding: 6px;
  margin: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-group-members-popover-list .dm-group-member-row {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.dm-group-members-popover-list .dm-group-member-row:hover {
  background: var(--surface-2);
}

/* ══════════════════════════════════════════════════════
   Group DM — owner actions in Edit Group modal
   ══════════════════════════════════════════════════════ */
.dm-group-member-row {
  position: relative;
}
.dm-group-member-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.dm-group-member-remove:hover {
  background: color-mix(in srgb, var(--status-danger) 20%, transparent);
  color: var(--status-danger);
}
.dm-group-you-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 6px;
  background: var(--surface-3);
  color: var(--text-muted);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dm-group-danger-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}
.dm-group-danger-label {
  font-size: var(--fs-xs);
  color: var(--status-danger);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  font-weight: 600;
}
.dm-group-delete-btn {
  color: var(--status-danger);
  border-color: color-mix(in srgb, var(--status-danger) 40%, var(--hairline));
  background: color-mix(in srgb, var(--status-danger) 8%, transparent);
}
.dm-group-delete-btn:hover {
  background: color-mix(in srgb, var(--status-danger) 18%, transparent);
  border-color: var(--status-danger);
}
.dm-group-danger-hint {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════
   Group member status dots + popover footer
   ══════════════════════════════════════════════════════ */
.dm-group-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.dm-group-status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  background: var(--text-muted);
}
.dm-group-status-dot[data-status="online"] { background: var(--status-online, #10b981); }
.dm-group-status-dot[data-status="idle"]   { background: var(--status-idle, #f59e0b); }
.dm-group-status-dot[data-status="dnd"]    { background: var(--status-danger, #ef4444); }
.dm-group-status-dot[data-status="offline"] { background: var(--text-muted); opacity: 0.6; }

.dm-group-members-popover-foot {
  padding: 8px 10px;
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
}
.dm-group-popover-leave {
  width: 100%;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--status-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-danger) 30%, var(--hairline));
  border-radius: var(--radius-md);
  color: var(--status-danger);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.dm-group-popover-leave:hover {
  background: color-mix(in srgb, var(--status-danger) 20%, transparent);
  border-color: var(--status-danger);
}
.dm-group-leave-btn {
  color: var(--status-danger);
  border-color: color-mix(in srgb, var(--status-danger) 40%, var(--hairline));
  background: color-mix(in srgb, var(--status-danger) 8%, transparent);
}
.dm-group-leave-btn:hover {
  background: color-mix(in srgb, var(--status-danger) 18%, transparent);
  border-color: var(--status-danger);
}

/* ══════════════════════════════════════════════════════
   Message date dividers — Discord-style day change markers
   in channel + DM message lists.
   ══════════════════════════════════════════════════════ */
.msg-date-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) var(--space-md) var(--space-xs);
  padding: 0;
  pointer-events: none;
  user-select: none;
}
.msg-date-divider-line {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.msg-date-divider-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding: 2px 10px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  font-size: 0.68rem;
}

/* ══════════════════════════════════════════════════════
   DM sidebar unread badge
   ══════════════════════════════════════════════════════ */
.dm-sidebar-item {
  position: relative;
}
.dm-sidebar-item.has-unread .dm-sidebar-name {
  color: var(--text);
  font-weight: 600;
}
.dm-sidebar-item.has-unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--status-danger, #ef4444);
  border-radius: 0 2px 2px 0;
}
.dm-sidebar-badge {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--status-danger, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--surface-1);
}

/* ══════════════════════════════════════════════════════
   Buffs — Launching Soon gate
   ══════════════════════════════════════════════════════ */
.buffs-launch-banner {
  max-width: 600px;
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--hairline));
  border-radius: var(--radius-md);
}
.buffs-launch-banner-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--accent);
  font-family: 'Orbitron', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-sm);
  margin-bottom: 6px;
}
.buffs-launch-banner-head strong { font-weight: 600; }
.buffs-launch-banner p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.buffs-form-gated {
  opacity: 0.5;
  pointer-events: none;
}
.buffs-form-gated label,
.buffs-form-gated select,
.buffs-form-gated button {
  cursor: not-allowed !important;
}
/* Keep the policy link clickable even while the form is gated — creators
   should still be able to read the AUP before launch. */
.buffs-form-gated a {
  pointer-events: auto;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════
   NAVIGATION MOTION SYSTEM
   ──────────────────────────────────────────────────────────────────
   Per-mode entrance animations + a unified list-cascade + click-burst
   tactile feedback for navigation gestures. Each major mode (chat /
   dm / friends / overview / voice / etc) has its own motion
   personality — same destination feel, different journey. The seam
   is showMain() in app.js: it adds .view-enter-<mode> to the target
   view for one play, then strips it on animationend.

   Performance: transform + opacity only. No layout-affecting props.
   prefers-reduced-motion honored via the global guard at the bottom.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Per-mode entrance personalities ─────────────────── */

/* Chat (server channel) — short rise. Energetic, crisp. */
@keyframes pa-enter-chat {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view-enter-chat {
  animation: pa-enter-chat 280ms var(--motion-spring) backwards;
}

/* DM — slide in from the right (matches sidebar's spatial origin). */
@keyframes pa-enter-dm {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.view-enter-dm {
  animation: pa-enter-dm 300ms var(--motion-spring) backwards;
}

/* Friends — soft centered scale + fade. Welcoming. */
@keyframes pa-enter-friends {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
.view-enter-friends {
  animation: pa-enter-friends 320ms var(--motion-spring) backwards;
}

/* Server overview — gentle drop with a tiny settle. */
@keyframes pa-enter-overview {
  0%   { opacity: 0; transform: translateY(-8px); }
  60%  { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.view-enter-overview {
  animation: pa-enter-overview 360ms var(--motion-spring) backwards;
}

/* Voice — atmospheric rise with a faint blur lift. Premium feel for
   the moment of joining a voice channel. */
@keyframes pa-enter-voice {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.view-enter-voice {
  animation: pa-enter-voice 380ms var(--motion-spring) backwards;
}

/* Server-management views (members, applications, audit, rules) —
   same compact rise as chat so settings switching stays calm. */
.view-enter-server-members,
.view-enter-server-applications,
.view-enter-server-audit,
.view-enter-server-rules,
.view-enter-manage-channels {
  animation: pa-enter-chat 260ms var(--motion-spring) backwards;
}

/* ─── List cascade (channels / DMs / messages / members) ─── */
/* When a container is freshly populated, add .view-cascade — its
   first ~15 children stagger in from a slight offset. Items beyond
   15 land at the same final delay so very long lists don't feel
   indefinitely staggered. */
@keyframes pa-cascade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view-cascade > * {
  animation: pa-cascade-in 240ms var(--motion-spring) backwards;
}
.view-cascade > *:nth-child(1)  { animation-delay: 0ms; }
.view-cascade > *:nth-child(2)  { animation-delay: 24ms; }
.view-cascade > *:nth-child(3)  { animation-delay: 48ms; }
.view-cascade > *:nth-child(4)  { animation-delay: 72ms; }
.view-cascade > *:nth-child(5)  { animation-delay: 96ms; }
.view-cascade > *:nth-child(6)  { animation-delay: 120ms; }
.view-cascade > *:nth-child(7)  { animation-delay: 144ms; }
.view-cascade > *:nth-child(8)  { animation-delay: 168ms; }
.view-cascade > *:nth-child(9)  { animation-delay: 192ms; }
.view-cascade > *:nth-child(10) { animation-delay: 216ms; }
.view-cascade > *:nth-child(11) { animation-delay: 240ms; }
.view-cascade > *:nth-child(12) { animation-delay: 264ms; }
.view-cascade > *:nth-child(13) { animation-delay: 288ms; }
.view-cascade > *:nth-child(14) { animation-delay: 312ms; }
.view-cascade > *:nth-child(15) { animation-delay: 336ms; }
.view-cascade > *:nth-child(n+16) { animation-delay: 360ms; }

/* ─── Active-state quiet pulse (scan-find indicator) ─── */
/* Once-per-3.2s breathing accent ring on the active nav item so
   users can scan-find "where am I" at a glance. Subtle on purpose
   — accent-dim only, not the full accent.
   Note: declared BEFORE the per-surface selection feedback below
   so the source-order cascade lets the selection animation win
   while .just-selected is set. */
@keyframes pa-active-breathe {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-dim); }
  50%      { box-shadow: 0 0 0 4px var(--accent-dim); }
}
.channel-item.active,
.dm-item.active,
.dm-sidebar-item.active,
.server-icon.active,
.group-rail-item.active {
  animation: pa-active-breathe 3.2s ease-in-out infinite;
}

/* ─── Selection feedback — kinematic, per-surface ──────
   Each navigation surface gets its own short physics-based
   feedback on selection. No color flash, no glow, no expanding
   rings — just kinematic personality that fits the geometry of
   the surface. Triggered by JS adding .just-selected (then
   stripping after 700ms). The global :active scale(0.97) press
   already provides the click-down feel; these add the click-up
   "you landed it" feel.

   These rules are declared AFTER pa-active-breathe so source
   order makes them win while .just-selected is set. After the
   class strips at 700ms, breathe takes over again.

   CHANNEL  → horizontal "tug" right (260ms spring). Row pulls
              toward the content area, then returns. 8px throw
              so it's actually visible.
   DM       → "press" scale + slight lift (260ms spring). Row
              scales 1.04 with a 1px upward translate, like
              pressing a real button.
   GROUP    → "target-lock" squish + bounce (340ms bounce). Icon
              squeezes 0.85, overshoots 1.12, settles. Round-icon
              kinematic that fits the radial shape and reads
              clearly at the 48px size. */

@keyframes pa-channel-tug {
  0%   { transform: translateX(0); }
  35%  { transform: translateX(8px); }
  65%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}
.channel-item.just-selected,
.channel-item.active.just-selected {
  animation: pa-channel-tug 260ms var(--motion-spring);
}

@keyframes pa-dm-press {
  0%   { transform: scale(1) translateY(0); }
  40%  { transform: scale(1.04) translateY(-1px); }
  100% { transform: scale(1) translateY(0); }
}
.dm-sidebar-item.just-selected,
.dm-sidebar-item.active.just-selected {
  animation: pa-dm-press 260ms var(--motion-spring);
}

@keyframes pa-group-lock {
  /* scaleY-only so the icon's WIDTH never changes — eliminates
     any horizontal clipping against the rail's overflow-x: hidden.
     The circle briefly squishes into a short oval, stretches into
     a tall oval, then settles. */
  0%   { transform: scaleY(1); }
  30%  { transform: scaleY(0.84); }
  60%  { transform: scaleY(1.10); }
  100% { transform: scaleY(1); }
}
.group-rail-item.just-selected,
.group-rail-item.active.just-selected {
  animation: pa-group-lock 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
  /* transform-origin: top center anchors the top edge so the icon
     only stretches DOWNWARD into the 8px gap to the next rail item.
     With center origin, the stretch went both ways — the top edge
     would push above the rail's top padding and clip on the very
     first group icon. Anchoring to the top guarantees the squish
     and stretch never bleed into the rail's top boundary, no matter
     which group is being clicked. */
  transform-origin: top center;
}

/* Server-icon already has its own hover personality (radius morph
   + Dock magnify on neighbors). The click feels like landing
   into the active state via the existing border + glow
   transitions — no .just-selected animation needed. */

/* ─── Cascade inheritance for nested children ───────── */
/* When a container wraps section-style sub-containers (e.g.,
   .channel-section inside #channel-sections), bubble the cascade
   so the actual leaf items animate in, not just the section block.
   Same nth-child stagger applies, scoped to the deepest direct
   children. */
.view-cascade .channel-section > * {
  animation: pa-cascade-in 240ms var(--motion-spring) backwards;
}
.view-cascade .channel-section > *:nth-child(1)  { animation-delay: 0ms; }
.view-cascade .channel-section > *:nth-child(2)  { animation-delay: 24ms; }
.view-cascade .channel-section > *:nth-child(3)  { animation-delay: 48ms; }
.view-cascade .channel-section > *:nth-child(4)  { animation-delay: 72ms; }
.view-cascade .channel-section > *:nth-child(5)  { animation-delay: 96ms; }
.view-cascade .channel-section > *:nth-child(6)  { animation-delay: 120ms; }
.view-cascade .channel-section > *:nth-child(7)  { animation-delay: 144ms; }
.view-cascade .channel-section > *:nth-child(8)  { animation-delay: 168ms; }
.view-cascade .channel-section > *:nth-child(n+9){ animation-delay: 192ms; }

/* ─── Hover micro-pulls (channels & DMs) ───────────────
   Items "tug" 2px toward the chat area on hover, signaling
   "click me to read." Stacks with the existing background/color
   hover so it feels like a single coherent gesture. */
.channel-item,
.dm-sidebar-item {
  transform: translateX(0);
}
.channel-item:hover:not(.active),
.dm-sidebar-item:hover:not(.active) {
  transform: translateX(2px);
}

/* ─── Notification badge pop-in ─────────────────────────
   When an unread badge mounts (DOM insert), it pops in with a
   slight overshoot so the user notices. Once steady, it just
   sits there — no perpetual pulse (would be noisy). */
@keyframes pa-badge-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
.dm-sidebar-badge,
.channel-unread-badge,
.notif-badge,
.menu-badge {
  animation: pa-badge-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

/* ─── Online status-dot gentle breathe ─────────────────
   Members and friends with "online" status get a 2.4s gentle
   pulse on their status dot. Tells users the presence is live,
   not stale. Uses status-online for color so it works across
   themes. Subtle on purpose. */
@keyframes pa-online-breathe {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 0 0 rgba(67,181,129,0.45); }
  50%      { opacity: 1;    box-shadow: 0 0 0 3px rgba(67,181,129,0.18); }
}
.status-dot.online,
.member-status.online,
.friends-status.online,
.creation-preview-dot.online {
  animation: pa-online-breathe 2.4s ease-in-out infinite;
}

/* ─── Section-header reveal on cascade ─────────────────
   When a sectioned list cascades in, the section labels get
   a subtle slide-from-left so they don't pop in at the same
   instant as their items. Adds layered depth to long renders
   like the members panel (Online / Offline). */
@keyframes pa-section-slide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.view-cascade .members-section-label,
.view-cascade .channel-section-header,
.view-cascade .friends-section-header {
  animation: pa-section-slide 280ms var(--motion-spring) backwards;
  animation-delay: 0ms;
}

/* ─── Friends-tab content fade on switch ───────────────
   The friends panel has tabs (Online / All / Pending / Blocked).
   Each tab's content fades in fresh on switch. Triggered by
   adding/removing the [data-friends-tab] attr — CSS targets the
   active panel and runs a quick fade. */
@keyframes pa-tab-content-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.friends-tab-panel.active,
.friends-list-section[data-active="true"] {
  animation: pa-tab-content-in 220ms var(--motion-spring) backwards;
}

/* ─── Avatar hover lift + ring ──────────────────────────
   Avatars are clickable across the app (open profile / direct
   message / member popover). On hover, they gently lift and
   gain a soft accent ring so the affordance is unambiguous.
   Skipped on .speaking (already has its own pulsing ring). */
.user-avatar-sm:not(.speaking),
.user-avatar:not(.speaking) {
  transition: transform 220ms var(--motion-spring),
              box-shadow 220ms ease-out;
}
.user-avatar-sm:hover:not(.speaking),
.user-avatar:hover:not(.speaking) {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px var(--accent-dim), 0 0 12px var(--accent-dim);
}

/* ─── Drop-zone attention glow ─────────────────────────
   Existing drop-target classes get a steady accent border, but
   no signal that they're "reaching toward" the dragged item.
   Add a soft pulsing glow so the active drop zone breathes,
   while inactive ones stay neutral. */
@keyframes pa-drop-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--accent-dim), 0 0 8px var(--accent-dim); }
  50%      { box-shadow: 0 0 0 1px var(--accent),     0 0 18px var(--accent-dim); }
}
.channel-section-header.drop-target,
.task-column-body.drag-over,
.task-column.col-drag-over,
.overview-section.drag-over,
.voice-drop-target,
.group-mgmt-row.drag-over {
  animation: pa-drop-pulse 1.4s ease-in-out infinite;
}

/* ─── Channel topbar attention tickle ─────────────────
   When the topbar gets the .tickle class (set briefly by JS
   on a missed mention or relevant alert), it gently nudges to
   draw the eye without being disruptive. */
@keyframes pa-topbar-tickle {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-2px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(1px); }
}
.channel-topbar.tickle,
.dm-topbar.tickle {
  animation: pa-topbar-tickle 480ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ─── Selection feedback (quiet, on-brand) ────────────
   Per .impeccable.md "Glow is a verb, not a noun" + "Less
   chrome, more content": the click moment is already physical
   via the global :active scale(0.97). The destination of the
   click then takes over — the .active state's accent-dim
   background and inset stripe smoothly fades in via the
   existing 0.3s transition.
   No additional bloom/ring/flash. The transition into the
   active state IS the selection feedback.

   For round nav surfaces (server-icon, group-rail-item) the
   active state already glows softly via the existing
   border + box-shadow; no extra animation needed.

   For row-shape nav surfaces (channel-item, dm-sidebar-item)
   the active state's inset 2px accent stripe lands smoothly
   thanks to the existing transition on box-shadow.

   Keyframe kept (defined below) so JS adding .just-selected
   doesn't error on missing keyframe — just no animation
   target. If a future redesign wants selection feedback
   back, swap a different rule onto .just-selected here. */
@keyframes pa-select-bloom {
  /* Intentionally noop — placeholder for future selection feedback. */
  from { opacity: 1; }
  to   { opacity: 1; }
}

/* ─── New-message arrival drop ────────────────────────
   Every newly-rendered message in chat or DM that has the
   .msg-new class (set briefly by the append path then
   stripped) drops in from a tiny offset. Kept short so it
   doesn't fight scroll-to-bottom. */
@keyframes pa-msg-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.message.msg-new,
.dm-message.msg-new {
  animation: pa-msg-arrive 220ms var(--motion-spring) backwards;
}

/* ─── Modal / dialog entrances ────────────────────────
   Generic modal-overlay fades in, modal-box scales up. Same
   gesture for creation-dialog. Origin-aware via translate-Y
   bias so it feels like the dialog "lands" on the page rather
   than appearing centered. */
@keyframes pa-modal-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pa-modal-box-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay {
  animation: pa-modal-overlay-in 180ms ease-out;
}
.modal-overlay > .modal-box,
.modal-overlay .creation-dialog,
.creation-dialog-overlay > .creation-dialog {
  animation: pa-modal-box-in 320ms var(--motion-spring) backwards;
  animation-delay: 40ms;
}

/* ─── Settings-panel switch ───────────────────────────
   When a settings panel becomes .active, fade up. The whole
   settings UI uses display:none → display:block to swap, so
   the animation runs on the freshly-shown panel. */
@keyframes pa-settings-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.settings-panel.active {
  animation: pa-settings-panel-in 280ms var(--motion-spring) backwards;
}

/* ─── Profile popup polish ────────────────────────────
   #profile-popup already has profileIn (line 4449). Add a
   subtle lift on the avatar within so the focal element
   "asserts itself" after the popup lands. */
@keyframes pa-profile-avatar-pop {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
#profile-popup .user-avatar,
#profile-popup .profile-popup-avatar {
  animation: pa-profile-avatar-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: 100ms;
}

/* (members-panel already has its own width-based slide at line 3052
   — no override needed here.) */

/* ─── Loading skeleton shimmer ─────────────────────────
   A subtle horizontal shimmer wave passes across loading
   text and skeleton blocks so they don't feel inert. The
   gradient slides at 1.6s loop with low opacity so it's
   present but not distracting. */
@keyframes pa-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.type-empty:where([data-loading], :empty)::after,
.loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    color-mix(in oklab, var(--accent) 8%, var(--surface-2)) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: pa-shimmer 1.6s linear infinite;
  border-radius: var(--radius-sm);
}

/* When .type-empty contains loading text (e.g., "Loading…"),
   give the text itself a shimmer-pulse via pseudo overlay. */
.type-empty[data-loading] {
  position: relative;
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--text-muted) 0%,
    var(--text) 50%,
    var(--text-muted) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: pa-shimmer 1.6s linear infinite;
}

/* ─── Tab active underline slide ──────────────────────
   Tab bars across the app use .tab.active. Add a sliding
   underline marker that animates between tabs. CSS-only via
   pseudo-element + transform. Each tab knows its own width;
   we just animate scale + position. */
.tabs,
.tab-bar,
.tournament-tabs,
.friends-tab-bar,
.settings-tabs {
  position: relative;
}
.tabs > .tab,
.tab-bar > .tab,
.tournament-tabs > .tab,
.friends-tab-bar > .tab,
.settings-tabs > .tab {
  position: relative;
}
.tabs > .tab::after,
.tab-bar > .tab::after,
.tournament-tabs > .tab::after,
.friends-tab-bar > .tab::after,
.settings-tabs > .tab::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 280ms var(--motion-spring);
  pointer-events: none;
}
.tabs > .tab.active::after,
.tab-bar > .tab.active::after,
.tournament-tabs > .tab.active::after,
.friends-tab-bar > .tab.active::after,
.settings-tabs > .tab.active::after {
  transform: scaleX(1);
}

/* ─── Group rail item hover scale ─────────────────────
   Group icons in the in-server rail get a Mac OS Dock-style
   magnify on hover (1.06 scale). Subtle on purpose — the
   server rail beside it already has its own hover treatment
   (radius morph + accent ring) and we don't want them to fight. */
.group-rail-item {
  transition: transform 220ms var(--motion-spring),
              border-color 200ms ease-out,
              box-shadow 200ms ease-out;
}
.group-rail-item:hover:not(.active) {
  transform: scale(1.06);
}

/* (Channel category fold uses existing display swap — adding a
   grid-template-rows transition here would require markup changes
   to introduce a wrapper element, deferred for a follow-up.) */

/* ─── Server-icon unread pulse ────────────────────────
   When a server in the rail has unread messages, the existing
   .has-notification class shows a static red glow. Add a slow
   pulse so the indicator draws attention without being noisy. */
@keyframes pa-unread-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--status-danger-dim, rgba(255,77,106,0.2)); }
  50%      { box-shadow: 0 0 0 3px var(--status-danger, #ff4d6a),
                         0 0 12px var(--status-danger-dim, rgba(255,77,106,0.3)); }
}
.server-icon-dm.has-notification,
.server-icon.has-unread {
  animation: pa-unread-pulse 2.4s ease-in-out infinite;
}

/* ─── Reaction-pill click pop ─────────────────────────
   When a user clicks a reaction (toggling their own reaction),
   the pill bounces — gives a "yes, I clicked that" feel.
   The toggle is class-based: when .user-reacted is added,
   the pill animates the class-toggle pop. */
@keyframes pa-reaction-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.reaction-pill.user-reacted {
  animation: pa-reaction-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Quick-switcher entrance ─────────────────────────
   The Cmd+K quick switcher dialog enters with a scale+drop. Same
   feel as the modal entrance but a touch faster since users are
   in "search now" mode. */
@keyframes pa-quick-switcher-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#dialog-quick-switcher {
  animation: pa-quick-switcher-in 220ms var(--motion-spring) backwards;
}
/* Stagger the result rows as they appear */
#quick-switcher-results > .qs-item {
  animation: pa-cascade-in 220ms var(--motion-spring) backwards;
}
#quick-switcher-results > .qs-item:nth-child(1) { animation-delay: 60ms; }
#quick-switcher-results > .qs-item:nth-child(2) { animation-delay: 80ms; }
#quick-switcher-results > .qs-item:nth-child(3) { animation-delay: 100ms; }
#quick-switcher-results > .qs-item:nth-child(4) { animation-delay: 120ms; }
#quick-switcher-results > .qs-item:nth-child(5) { animation-delay: 140ms; }
#quick-switcher-results > .qs-item:nth-child(n+6) { animation-delay: 160ms; }

/* ─── Mention popup / autocomplete slide ──────────────
   The @mention popover and slash-command popover (if implemented
   as .mention-popup or .autocomplete-popup) slide up from the
   input. Keeps the focus near the typing cursor. */
@keyframes pa-autocomplete-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mention-popup,
.autocomplete-popup,
.slash-suggestions,
.command-suggestions {
  animation: pa-autocomplete-in 200ms var(--motion-spring) backwards;
}

/* ─── Speaking-indicator waveform overlay ─────────────
   Overlay 3 vertical "wave" bars on speaking avatars to suggest
   live audio. Pure CSS via 3 pseudo-elements — but ::before/::after
   are limited to 2, so we use a single ::before stacking 3
   gradient-rendered bars via background. Subtle: 14% opacity. */
@keyframes pa-wave-1 {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1); }
}
@keyframes pa-wave-2 {
  0%, 100% { transform: scaleY(0.7); }
  50%      { transform: scaleY(0.4); }
}
@keyframes pa-wave-3 {
  0%, 100% { transform: scaleY(0.55); }
  50%      { transform: scaleY(0.85); }
}
/* Bars are siblings injected only via .speaking-bars wrapper if
   the markup supports it; absent that, the avatar's existing
   pulse animation already conveys speaking. We define the
   animations so they're available for opt-in component use. */

/* ─── Typing indicator dots ───────────────────────────
   Three little bouncing dots show "someone is typing." Falls
   in line with chat-app conventions but with our spring physics
   instead of linear bounce. CSS-only via inline-block dots
   that the typing-indicator JS prepends/appends. Markup:
     <span class="typing-dots"><span></span><span></span><span></span></span>
   Falls back to plain text if the JS doesn't add the wrapper. */
@keyframes pa-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
.typing-dots {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
  margin-right: 6px;
}
.typing-dots > span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: pa-typing-bounce 1.2s ease-in-out infinite;
}
.typing-dots > span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots > span:nth-child(3) { animation-delay: 0.4s; }

/* ─── Connection-state indicator ──────────────────────
   When the socket is disconnected, body gets .socket-reconnecting
   (set in socket-client.js). The footer status dot then pulses
   amber so users see "we're trying to reconnect" without a
   modal. Strips automatically when the socket reconnects. */
@keyframes pa-reconnect-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
body.socket-reconnecting .footer-status-text .status-dot-inline,
body.socket-reconnecting .footer-status-text {
  background: var(--status-warning);
  color: var(--status-warning) !important;
  animation: pa-reconnect-pulse 0.9s ease-in-out infinite;
}
.connection-reconnecting,
.status-dot.reconnecting {
  animation: pa-reconnect-pulse 0.9s ease-in-out infinite;
  background: var(--status-warning) !important;
}

/* ─── Inbox-expand-arrow polish ───────────────────────
   Existing rotate-90deg works. Add spring-physics + slight
   accent color shift on expanded so it feels more responsive. */
.inbox-expand-arrow {
  transition: transform 220ms var(--motion-spring),
              color 200ms ease-out;
}
.inbox-channel-section.expanded .inbox-expand-arrow {
  color: var(--accent);
}

/* ─── Send-button pulse-on-send ───────────────────────
   When a message is sent, the send button briefly pulses with
   accent color. Set .just-sent on the button after submit, strip
   after 360ms. Wire-ready; JS callsites optional. */
@keyframes pa-send-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 var(--accent); }
  40%  { transform: scale(1.1); box-shadow: 0 0 0 8px var(--accent-dim); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
.fwd-send-btn.just-sent,
.btn-send.just-sent,
.send-btn.just-sent {
  animation: pa-send-pulse 360ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─── Pin / unpin emerge ──────────────────────────────
   When a message gets pinned (.message.just-pinned briefly),
   the pin icon appears with a small bounce + ring fade. Ready
   for opt-in markup via .pin-marker pseudo. */
@keyframes pa-pin-emerge {
  0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.1) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.message.just-pinned .pin-marker,
.dm-message.just-pinned .pin-marker {
  animation: pa-pin-emerge 420ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* ─── Voice user join slide ──────────────────────────
   When a user joins a voice channel/room, their row slides
   in from the left with a quick fade. CSS animates on initial
   paint (display:none → display:flex equivalent). The
   .voice-user-row-item already has hover/drag handling; this
   just adds an entrance. */
@keyframes pa-voice-user-join {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.voice-user-row-item {
  animation: pa-voice-user-join 280ms var(--motion-spring) backwards;
}
.gc-tile {
  animation: pa-voice-user-join 320ms var(--motion-spring) backwards;
}

/* ─── Lightbox entrance ──────────────────────────────
   Image/video lightbox fades in the backdrop and zooms in
   the content. Scale 0.92 → 1 keeps the focal point near
   its original click position rather than snapping in from
   the corner. */
@keyframes pa-lightbox-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pa-lightbox-content-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
#lightbox {
  animation: pa-lightbox-bg-in 200ms ease-out;
}
#lightbox-content {
  animation: pa-lightbox-content-in 320ms var(--motion-spring) backwards;
  animation-delay: 60ms;
}

/* ─── Mention message highlight ──────────────────────
   Messages tagged .mentions-me get a one-shot accent ring
   that fades over 1.4s when first rendered. Distinct from
   msg-new (universal arrival) — only fires for messages
   that mention the current user. JS adds the class on
   render if msg.mentions includes currentUser.username. */
@keyframes pa-mention-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 16px var(--accent-dim); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
}
.message.mentions-me,
.dm-message.mentions-me {
  animation: pa-mention-flash 1.4s ease-out backwards;
}

/* ─── Empty-state crafted entrance ─────────────────
   Empty states (.msg-empty, .type-empty without [data-loading])
   fade in from a small upward offset over 360ms — gives the
   "nothing here yet" message a thoughtful arrival rather than
   appearing instantly. Skipped when the loading shimmer is
   active so we don't double-animate. */
@keyframes pa-empty-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.8; transform: translateY(0); }
}
.msg-empty,
.type-empty:not([data-loading]) {
  animation: pa-empty-arrive 360ms var(--motion-spring) backwards;
  animation-delay: 100ms;
}

/* ─── Form error shake ───────────────────────────────
   When a form input fails validation, .auth-error / .dialog-error
   that has just been populated gets a brief horizontal shake
   so the user notices the feedback without it being jarring.
   Opt-in via .just-errored class on the error element. */
@keyframes pa-error-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}
.auth-error.just-errored,
.dialog-error.just-errored,
.form-error.just-errored,
.field-error.just-errored {
  animation: pa-error-shake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ─── Success bloom ──────────────────────────────────
   When something saves successfully, .just-saved is briefly
   added to the form / button / item. CSS pulses an accent
   ring outward and dissolves over 600ms. */
@keyframes pa-success-bloom {
  0%   { box-shadow: 0 0 0 0 var(--status-success); }
  60%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.just-saved,
.dialog-success.just-saved,
button.just-saved {
  animation: pa-success-bloom 600ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─── Server banner / cover image entrance ──────────
   When a server overview loads, the cover banner image fades
   in from a slight scale and zoom-blur. Gives a cinematic
   reveal for the visual identity of each server. Falls back
   gracefully if the banner is text/gradient with no image. */
@keyframes pa-banner-reveal {
  from { opacity: 0; transform: scale(1.04); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
.banner-preview-box img,
.overview-banner img,
.server-cover-image {
  animation: pa-banner-reveal 600ms var(--motion-spring) backwards;
  animation-delay: 80ms;
}

/* ─── Role / badge pill emerge ───────────────────────
   Role pills, level badges, founder/booster crests pop
   into view when first rendered. Matches the same overshoot
   physics as the notification badge — keeps "earned/special"
   indicators feeling celebratory. */
.role-pill,
.member-role-pill,
.user-badge,
.tier-badge,
.founder-crest {
  animation: pa-badge-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* ─── Jump-to-present bar entrance ───────────────────
   When the user scrolls up in chat far enough, the
   "jump to present" bar slides up from the bottom. CSS
   animates whenever the element is rendered (display
   toggle in JS triggers the keyframe). */
@keyframes pa-jump-present-in {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.jump-to-present {
  animation: pa-jump-present-in 280ms var(--motion-spring) backwards;
}

/* ─── Chat image lazy-load fade ──────────────────────
   When images in chat finish loading, they fade in from
   a slight blur. CSS targets `.message img:not(.loaded)`
   for the initial blurred state, but since we can't easily
   add a class on load completion without JS, we use the
   intrinsic `loading="lazy"` browser behavior + a simple
   fade. Falls back gracefully if the browser doesn't honor
   the loaded transition. */
@keyframes pa-img-fade-in {
  from { opacity: 0; transform: scale(0.99); }
  to   { opacity: 1; transform: scale(1); }
}
.msg-attachment img,
.msg-content img {
  animation: pa-img-fade-in 320ms ease-out backwards;
}

/* ─── Channel-section header slide on cascade ────────
   Bonus stagger for section labels INSIDE the cascading
   container — they get a slight scale entrance distinct
   from the items, so the section label "lands" first
   before the items fan in. */
.view-cascade > .channel-section > .channel-section-header {
  animation: pa-section-slide 240ms var(--motion-spring) backwards;
  animation-delay: 0ms;
  display: block;
}

/* ─── Animated progress bar primitive ────────────────
   Generic .progress-bar with an inner .progress-fill that
   expands smoothly. The fill width is set via inline style
   or CSS variable. Useful for upload progress, XP bars, etc. */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.progress-bar > .progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in oklab, var(--accent) 60%, white)
  );
  border-radius: 3px;
  transition: width 360ms var(--motion-spring);
  box-shadow: 0 0 8px var(--accent-dim);
}
/* Indeterminate variant — a scanning bar when the actual
   percent isn't known. */
.progress-bar.indeterminate > .progress-fill {
  width: 30% !important;
  animation: pa-progress-scan 1.4s ease-in-out infinite;
}
@keyframes pa-progress-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(380%); }
}

/* ─── In-voice indicator ring ────────────────────────
   When the user is currently connected to a voice channel,
   the corresponding channel-item gets the .in-voice class
   from JS. It then displays a green pulsing dot via ::before. */
.channel-item.in-voice {
  position: relative;
}
.channel-item.in-voice::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-online);
  transform: translateY(-50%);
  box-shadow: 0 0 6px var(--status-online);
  animation: pa-online-breathe 2.4s ease-in-out infinite;
}

/* ─── Chat input focus pulse ──────────────────────────
   When the user focuses the chat input or DM input, the box
   does a single accent-glow pulse over 600ms — signals "ready
   for you to type" without a distracting permanent glow. The
   existing focus border/shadow stays as the steady-state. */
@keyframes pa-input-focus-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-dim); }
  60%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
#message-input:focus,
#dm-message-input:focus {
  animation: pa-input-focus-pulse 600ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─── Skeleton card primitive ────────────────────────
   For showing placeholder content while data loads.
   Use as: <div class="skeleton-card"></div> with optional
   modifier classes for size. */
.skeleton-card {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    color-mix(in oklab, var(--accent) 8%, var(--surface-2)) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: pa-shimmer 1.6s linear infinite;
  border-radius: var(--radius-sm);
  height: 16px;
  margin: 6px 0;
}
.skeleton-card.skeleton-card--lg { height: 32px; border-radius: var(--radius-md); }
.skeleton-card.skeleton-card--circle { border-radius: 50%; height: 36px; width: 36px; }
.skeleton-card.skeleton-card--avatar-row { height: 48px; border-radius: var(--radius-md); }

/* ─── Member status flip ─────────────────────────────
   When a member goes from online → offline (or vice-versa),
   their row gets briefly highlighted via .status-changed
   class. Theme-aware accent ring fades in/out over 600ms. */
@keyframes pa-status-changed {
  0%   { box-shadow: inset 0 0 0 0 var(--accent-dim); }
  30%  { box-shadow: inset 0 0 0 24px var(--accent-dim); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
.member-item.status-changed,
.friend-row.status-changed {
  animation: pa-status-changed 700ms var(--motion-spring);
}

/* Reduced-motion guard — kill all the navigation motion if the OS
   prefers-reduced-motion. The instant version is still functional. */
@media (prefers-reduced-motion: reduce) {
  .view-enter-chat,
  .view-enter-dm,
  .view-enter-friends,
  .view-enter-overview,
  .view-enter-voice,
  .view-enter-server-members,
  .view-enter-server-applications,
  .view-enter-server-audit,
  .view-enter-server-rules,
  .view-enter-manage-channels,
  .view-cascade > *,
  .view-cascade .channel-section > *,
  .view-cascade .members-section-label,
  .view-cascade .channel-section-header,
  .view-cascade .friends-section-header,
  .friends-tab-panel.active,
  .friends-list-section[data-active="true"],
  .channel-item.active,
  .dm-item.active,
  .dm-sidebar-item.active,
  .server-icon.active,
  .group-rail-item.active,
  .status-dot.online,
  .member-status.online,
  .friends-status.online,
  .creation-preview-dot.online,
  .dm-sidebar-badge,
  .channel-unread-badge,
  .notif-badge,
  .menu-badge,
  .user-avatar-sm.speaking,
  .channel-section-header.drop-target,
  .task-column-body.drag-over,
  .task-column.col-drag-over,
  .overview-section.drag-over,
  .voice-drop-target,
  .group-mgmt-row.drag-over,
  .channel-topbar.tickle,
  .dm-topbar.tickle,
  .server-icon.just-selected,
  .dm-sidebar-item.just-selected,
  .channel-item.just-selected,
  .message.msg-new,
  .dm-message.msg-new,
  .modal-overlay,
  .modal-overlay > .modal-box,
  .modal-overlay .creation-dialog,
  .creation-dialog-overlay > .creation-dialog,
  .settings-panel.active,
  #profile-popup .user-avatar,
  #profile-popup .profile-popup-avatar,
  .server-icon-dm.has-notification,
  .server-icon.has-unread,
  .reaction-pill.user-reacted,
  #dialog-quick-switcher,
  #quick-switcher-results > .qs-item,
  .mention-popup,
  .autocomplete-popup,
  .slash-suggestions,
  .command-suggestions,
  .typing-dots > span,
  .connection-reconnecting,
  .status-dot.reconnecting,
  body.socket-reconnecting .footer-status-text .status-dot-inline,
  body.socket-reconnecting .footer-status-text,
  .fwd-send-btn.just-sent,
  .btn-send.just-sent,
  .send-btn.just-sent,
  .message.just-pinned .pin-marker,
  .dm-message.just-pinned .pin-marker,
  .voice-user-row-item,
  .gc-tile,
  .member-item.status-changed,
  .friend-row.status-changed,
  #lightbox,
  #lightbox-content,
  .message.mentions-me,
  .dm-message.mentions-me,
  .msg-empty,
  .type-empty:not([data-loading]),
  .auth-error.just-errored,
  .dialog-error.just-errored,
  .form-error.just-errored,
  .field-error.just-errored,
  .just-saved,
  .dialog-success.just-saved,
  button.just-saved,
  .banner-preview-box img,
  .overview-banner img,
  .server-cover-image,
  .role-pill,
  .member-role-pill,
  .user-badge,
  .tier-badge,
  .founder-crest,
  .jump-to-present,
  .msg-attachment img,
  .msg-content img,
  .view-cascade > .channel-section > .channel-section-header,
  .progress-bar.indeterminate > .progress-fill,
  .channel-item.in-voice::before,
  .skeleton-card,
  #message-input:focus,
  #dm-message-input:focus {
    animation: none !important;
  }
  .progress-bar > .progress-fill {
    transition: none !important;
  }
  .user-avatar-sm:hover:not(.speaking),
  .user-avatar:hover:not(.speaking),
  .channel-item:hover:not(.active),
  .dm-sidebar-item:hover:not(.active) {
    transform: none !important;
    box-shadow: none !important;
  }
  /* (center-burst ripple removed; no :active::after rules to gate.) */
}