/* ============================================================
   VoxLounge Application Styles
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  overflow: hidden;              /* the app is viewport-locked — no page scroll */
  scroll-behavior: smooth;
}

body {
  height: 100dvh;                /* exactly the screen; content scrolls INSIDE views, not the page */
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  overflow: hidden;
  position: relative;
}

/* --- Scanline Overlay (cyberpunk only, sub-toggle via [data-scanlines]) --- */
[data-theme="cyberpunk"]:not([data-scanlines="off"]) body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, var(--scanline-opacity)) 2px,
    rgba(0, 0, 0, var(--scanline-opacity)) 4px
  );
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: var(--radius);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-secondary);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

[data-theme="cyberpunk"] h1,
[data-theme="cyberpunk"] h2,
[data-theme="cyberpunk"] h3 {
  text-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--accent-secondary);
}

/* --- Utility --- */
.hidden { display: none !important; }

.view {
  display: none;
  width: 100%;
  height: 100dvh;                /* each view fills the screen exactly */
  overflow: hidden;              /* scroll happens in the inner content region, not the view */
}
.view.active {
  display: flex;
  flex-direction: column;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.btn-primary {
  background: var(--accent-primary);
  color: #000;
  border-color: var(--accent-primary);
  font-weight: 700;
}
.btn-primary:hover {
  box-shadow: var(--glow-md);
  filter: brightness(1.15);
}
.btn-danger {
  background: transparent;
  color: var(--accent-tertiary);
  border-color: var(--accent-tertiary);
}
.btn-danger:hover {
  background: rgba(var(--accent-tertiary-rgb), 0.15);
  box-shadow: var(--glow-pink-sm);
}
.btn-sm {
  padding: 6px 14px;
  font-size: 11px;
}
.btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 18px;
  border-radius: var(--radius);
}

[data-theme="cyberpunk"] .btn {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Inputs --- */
.input-field {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: none;
  border-bottom: 2px solid var(--border-color);
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.input-field::placeholder {
  color: var(--text-dim);
}
.input-field:focus {
  border-bottom-color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.2);
}

[data-theme="default"] .input-field {
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
}

[data-theme="default"] .btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), #9b8cff);
  border-color: transparent;
  color: #fff;
}
[data-theme="default"] .btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(var(--accent-primary-rgb), 0.35);
}
[data-theme="default"] .btn {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
}
[data-theme="default"] .room-card {
  border-color: rgba(var(--accent-primary-rgb), 0.08);
}
[data-theme="default"] .room-card:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(var(--accent-primary-rgb), 0.1);
}
[data-theme="default"] .auth-card {
  border-color: rgba(var(--accent-primary-rgb), 0.15);
}
[data-theme="default"] h1, [data-theme="default"] h2, [data-theme="default"] h3 {
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* --- Form Group --- */
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
/* Account recovery (qid:545) */
.auth-link { color: #8fa4be; font-size: .8rem; letter-spacing: 1px; text-decoration: none; }
.auth-link:hover { color: #00d4ff; }
.auth-copy { color: #8fa4be; font-size: .9rem; line-height: 1.45; margin: 0 0 14px; }
.auth-back { margin-top: 10px; width: 100%; }
.form-ok { color: #42E66C; font-size: .82rem; min-height: 1em; margin: 4px 0; }
.form-error {
  color: var(--accent-danger);
  font-size: 12px;
  margin-top: 4px;
  min-height: 18px;
}

/* --- Modal Overlay --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 90%;
  max-width: 480px;
  box-shadow: var(--shadow-panel);
}
.modal h2 {
  margin-bottom: 24px;
  font-size: 18px;
}
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

[data-theme="cyberpunk"] .modal {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-sm), var(--shadow-panel);
}

/* ============================================================
   AUTH VIEW
   ============================================================ */
#auth-view {
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(var(--accent-primary-rgb), 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(var(--accent-secondary-rgb), 0.04) 0%, transparent 50%),
    var(--bg-primary);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

[data-theme="cyberpunk"] .auth-card {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-sm), var(--shadow-panel);
}

.auth-logo {
  text-align: center;
  padding: 32px 32px 8px;
}
.auth-logo h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 4px;
}
.auth-logo .tagline {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

[data-theme="cyberpunk"] .auth-logo h1 {
  text-shadow: var(--glow-md);
  letter-spacing: 0.2em;
}

/* Auth Tabs */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin: 16px 32px 0;
}
.auth-tab {
  flex: 1;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}
.auth-tab:hover {
  color: var(--text-primary);
}
.auth-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

[data-theme="cyberpunk"] .auth-tab.active {
  text-shadow: var(--glow-sm);
}

/* Auth Forms */
.auth-forms {
  padding: 24px 32px 32px;
}
.auth-form {
  display: none;
}
.auth-form.active {
  display: block;
}
.auth-form .btn-primary {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  font-size: 14px;
}

/* ============================================================
   LOBBY VIEW
   ============================================================ */
#lobby-view {
  background:
    radial-gradient(ellipse at 10% 90%, rgba(var(--accent-primary-rgb), 0.04) 0%, transparent 40%),
    var(--bg-primary);
}

/* Lobby Header */
.lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

[data-theme="cyberpunk"] .lobby-header {
  border-bottom-color: var(--accent-primary);
  box-shadow: 0 1px 12px rgba(var(--accent-primary-rgb), 0.1);
}

.lobby-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lobby-brand h1 {
  font-size: 20px;
  color: var(--accent-primary);
  margin: 0;
}
.lobby-brand .version {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.lobby-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lobby-nav .nav-link {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.lobby-nav .nav-link:hover {
  color: var(--accent-primary);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #000;
}
.user-name {
  font-size: 13px;
  font-weight: 500;
}
.btn-logout {
  font-size: 11px;
  padding: 6px 12px;
}

/* Lobby Toolbar */
.lobby-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  flex-wrap: wrap;
}
.search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.search-box .input-field {
  padding-left: 40px;
}
.search-box .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 14px;
  pointer-events: none;
}
.btn-create-room {
  font-size: 13px;
  padding: 12px 24px;
}

/* Room Grid */
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 0 24px 24px;
  flex: 1;
}

.room-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition-med);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.room-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card), 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="cyberpunk"] .room-card:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-sm), var(--shadow-card);
}

/* Corner accent on cyberpunk cards */
[data-theme="cyberpunk"] .room-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(225deg, rgba(var(--accent-primary-rgb), 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.room-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.room-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.room-participants {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-secondary);
  box-shadow: var(--glow-green-sm);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.room-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.room-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.room-owner {
  display: flex;
  align-items: center;
  gap: 6px;
}
.room-tags {
  display: flex;
  gap: 6px;
}
.room-tag {
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 10px;
  color: var(--text-secondary);
}

/* Empty State */
.room-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}
.room-grid-empty .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}
.room-grid-empty p {
  font-size: 14px;
}

/* Lobby Status Bar */
.lobby-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-secondary);
}
.status-dot.offline {
  background: var(--accent-danger);
}

/* ============================================================
   ROOM VIEW
   ============================================================ */
#room-view {
  height: 100dvh;
  overflow: hidden;
}

/* Room Top Bar */
.room-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  min-height: 52px;
  flex-shrink: 0;
  position: relative; /* anchor for the mobile controls dropdown */
}

[data-theme="cyberpunk"] .room-topbar {
  border-bottom-color: var(--accent-primary);
  box-shadow: 0 1px 8px rgba(var(--accent-primary-rgb), 0.08);
}

.room-topbar-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* media controls group — inline on desktop, collapses to a dropdown on mobile */
.topbar-ctrl-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
#ctrl-menu-toggle { display: none; } /* shown on mobile + desktop fan-out via media queries */
/* .ctrl-dock wraps the SECONDARY controls. Base = transparent so its children flow into the
   mobile dropdown exactly as before; desktop (>=769px) turns it into the fan-out popover. (qid:651) */
.ctrl-dock { display: contents; }
/* dropdown header: transparent on desktop (admin flows inline), status bar on mobile */
.topbar-ctrl-header { display: contents; }
.ctrl-header-status { display: none; } /* desktop: hidden; admin flows inline */
.topbar-ctrl {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 16px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1;
}
.topbar-ctrl:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}
.topbar-ctrl.active {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
[data-theme="cyberpunk"] .topbar-ctrl.active {
  box-shadow: var(--glow-sm);
}
.topbar-ctrl.muted {
  border-color: var(--accent-tertiary);
  color: var(--accent-tertiary);
}

/* ── Desktop fan-out control dock (qid:651) ──────────────────────────────────────
   Primary controls (Mic/Cam/Screen/Mute-all) stay inline; the secondary set collapses
   behind the ⊕ toggle into a glass popover. >=769px = wherever the bar renders
   everything inline (desktop + tablet), so this also declutters the tablet gap. */
@media (min-width: 769px) {
  #ctrl-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  #ctrl-menu-toggle[aria-expanded="true"] {
    border-color: var(--accent-primary); color: var(--accent-primary);
  }
  #topbar-ctrl-group { position: relative; }
  .ctrl-dock {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
    display: none; flex-direction: column; gap: 6px; min-width: 220px;
    padding: 10px; border-radius: 14px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  }
  #topbar-ctrl-group.open .ctrl-dock { display: flex; animation: ctrlDockIn 0.16s ease; }
  .ctrl-dock .topbar-ctrl {
    width: 100%; display: flex; align-items: center; justify-content: flex-start;
    gap: 12px; font-size: 18px; padding: 9px 11px; border-radius: 10px;
  }
  .ctrl-dock .topbar-ctrl::after { content: attr(data-label); font-size: 13px; font-weight: 600; }
}
@keyframes ctrlDockIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── ⌘K command palette (qid:651) ────────────────────────────────────────────── */
.vox-cmd-overlay {
  position: fixed; inset: 0; z-index: 400; display: flex;
  align-items: flex-start; justify-content: center; padding-top: 14vh;
  background: rgba(4, 5, 10, 0.55); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.14s ease;
}
.vox-cmd-overlay.on { opacity: 1; }
.vox-cmd-overlay.hidden { display: none; }
.vox-cmd-panel {
  width: min(560px, 92vw); max-height: 64vh; display: flex; flex-direction: column;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden; transform: translateY(-8px) scale(0.98); transition: transform 0.16s ease;
}
.vox-cmd-overlay.on .vox-cmd-panel { transform: translateY(0) scale(1); }
.vox-cmd-inputbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-color); }
.vox-cmd-ic { font-size: 16px; opacity: 0.7; }
.vox-cmd-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 16px; font-family: inherit; }
.vox-cmd-input::placeholder { color: var(--text-secondary); }
.vox-cmd-kbd, .vox-cmd-launch-kbd {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  border: 1px solid var(--border-color); border-radius: 6px; padding: 2px 6px; background: rgba(255, 255, 255, 0.03);
}
.vox-cmd-list { overflow-y: auto; padding: 8px; scrollbar-width: thin; }
.vox-cmd-group { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); padding: 10px 10px 4px; }
.vox-cmd-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--text-primary); }
.vox-cmd-row.sel { background: rgba(var(--accent-primary-rgb), 0.14); }
.vox-cmd-row-ic { font-size: 17px; width: 22px; text-align: center; flex: 0 0 auto; }
.vox-cmd-row-label { flex: 1; font-size: 14px; font-weight: 600; }
.vox-cmd-row-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); opacity: 0.8; }
.vox-cmd-empty { padding: 28px; text-align: center; color: var(--text-secondary); font-size: 14px; }
[data-theme="cyberpunk"] .vox-cmd-row.sel { box-shadow: inset 0 0 0 1px var(--accent-primary); }

/* launcher pill — display is owned by .nav-desk-only (flex on desktop, none on mobile) */
.bottom-nav .vox-cmd-launch {
  align-items: center; gap: 8px; margin: 2px 8px 6px; padding: 9px 12px;
  border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color); color: var(--text-secondary);
  font-size: 13px; font-family: inherit; transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.bottom-nav .vox-cmd-launch:hover { background: rgba(var(--accent-primary-rgb), 0.08); border-color: rgba(var(--accent-primary-rgb), 0.4); color: var(--text-primary); }
.vox-cmd-launch-ic { font-size: 13px; opacity: 0.8; }
.vox-cmd-launch-txt { flex: 1; text-align: left; }
body.desk-collapsed:not([data-view="room"]) .bottom-nav .vox-cmd-launch-txt,
body.desk-collapsed:not([data-view="room"]) .bottom-nav .vox-cmd-launch-kbd { display: none; }

/* ── Followers / Following list overlay + clickable profile stats (qid:651) ──────── */
.profile-stat.clickable { cursor: pointer; transition: background 0.14s, border-color 0.14s; }
.profile-stat.clickable:hover { background: rgba(var(--accent-primary-rgb), 0.1); border-color: rgba(var(--accent-primary-rgb), 0.4); }
.vox-people-overlay {
  position: fixed; inset: 0; z-index: 420; display: flex;
  align-items: flex-start; justify-content: center; padding-top: 12vh;
  background: rgba(4, 5, 10, 0.6); backdrop-filter: blur(6px);
}
.vox-people-overlay.hidden { display: none; }
.vox-people-panel {
  width: min(460px, 92vw); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); overflow: hidden;
}
.vox-people-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-color); }
.vox-people-title { font-size: 15px; font-weight: 800; letter-spacing: 0.03em; color: var(--text-primary); }
.vox-people-x { background: none; border: none; color: var(--text-secondary); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.vox-people-x:hover { color: var(--text-primary); }
.vox-people-list { overflow-y: auto; padding: 8px; scrollbar-width: thin; }
.vox-people-empty { padding: 28px; text-align: center; color: var(--text-secondary); font-size: 14px; }
.vox-people-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.vox-people-row:hover { background: rgba(var(--accent-primary-rgb), 0.07); }
.vox-people-av {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  background-size: cover; background-position: center;  /* MUST follow the shorthand — it resets background-size */
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #05060a;
}
.vox-people-meta { flex: 1; min-width: 0; }
.vox-people-name { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vox-people-un { font-size: 12px; color: var(--text-secondary); }
.vox-people-follow {
  flex: 0 0 auto; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: inherit;
  background: var(--accent-primary); color: #05060a; border: 1px solid var(--accent-primary);
  transition: background 0.14s, color 0.14s;
}
.vox-people-follow.following { background: transparent; color: var(--text-secondary); border-color: var(--border-color); }

/* ── Single-post view (qid:651 audit) ───────────────────────────────────────────── */
#post-view { height: 100dvh; overflow: hidden; flex-direction: column; }
#post-view.view.active { display: flex; }
.post-detail { flex: 1; overflow-y: auto; padding: 16px; }
.post-loading { padding: 48px; text-align: center; color: var(--text-secondary); }
.post-card { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.post-media {
  border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 38%, #16162a, #06060c);
  display: flex; align-items: center; justify-content: center; min-height: 160px;
}
.post-media-img, .post-media-vid { width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.post-media-text { padding: 40px 24px; font-size: 22px; font-weight: 700; color: var(--text-primary); text-align: center; line-height: 1.4; }
.post-author { display: flex; align-items: center; gap: 12px; }
.post-author-av {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  background-size: cover; background-position: center;  /* MUST follow the shorthand — it resets background-size */
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #05060a;
}
.post-author-name { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.post-author-un { font-size: 13px; color: var(--text-secondary); }
.post-caption { font-size: 15px; color: var(--text-primary); line-height: 1.5; }
.post-actions { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.post-act {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px;
  background: transparent; border: none; color: var(--text-secondary); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
button.post-act:hover { background: rgba(var(--accent-primary-rgb), 0.08); color: var(--text-primary); }
.post-act.liked { color: var(--accent-tertiary, #ff5d8f); }
.post-act-ic { font-size: 17px; }
.post-comments { display: flex; flex-direction: column; gap: 10px; }
.post-comments-list { display: flex; flex-direction: column; gap: 12px; }
.post-comments-empty { padding: 18px 4px; color: var(--text-secondary); font-size: 14px; }
.post-comment-row { display: flex; gap: 10px; }
.post-comment-av {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #05060a;
}
.post-comment-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.post-comment-text { font-size: 14px; color: var(--text-primary); opacity: 0.9; line-height: 1.4; }
.post-comment-form { display: flex; gap: 8px; padding-top: 6px; }
.post-comment-input {
  flex: 1; background: var(--bg-card, rgba(255,255,255,0.03)); border: 1px solid var(--border-color);
  border-radius: 999px; padding: 10px 16px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none;
}
.post-comment-input:focus { border-color: rgba(var(--accent-primary-rgb), 0.5); }
.post-comment-send {
  flex: 0 0 auto; padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--accent-primary); color: #05060a; font-size: 14px; font-weight: 700; font-family: inherit;
}

/* ── DM compose overlay (qid:651 audit) ─────────────────────────────────────────── */
.dm-compose-overlay {
  position: fixed; inset: 0; z-index: 430; display: flex;
  align-items: flex-start; justify-content: center; padding-top: 12vh;
  background: rgba(4, 5, 10, 0.6); backdrop-filter: blur(6px);
}
.dm-compose-overlay.hidden { display: none; }
.dm-compose-panel {
  width: min(460px, 92vw); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); overflow: hidden;
}
.dm-compose-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-color); }
.dm-compose-title { font-size: 15px; font-weight: 800; letter-spacing: 0.03em; color: var(--text-primary); }
.dm-compose-x { background: none; border: none; color: var(--text-secondary); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.dm-compose-x:hover { color: var(--text-primary); }
.dm-compose-input {
  margin: 12px 16px; background: var(--bg-card, rgba(255,255,255,0.03)); border: 1px solid var(--border-color);
  border-radius: 999px; padding: 10px 16px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none;
}
.dm-compose-input:focus { border-color: rgba(var(--accent-primary-rgb), 0.5); }
.dm-compose-results { overflow-y: auto; padding: 4px 8px 10px; scrollbar-width: thin; }
.dm-compose-empty { padding: 20px; text-align: center; color: var(--text-secondary); font-size: 14px; }
.dm-compose-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.dm-compose-row:hover { background: rgba(var(--accent-primary-rgb), 0.07); }
.dm-compose-av {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  background-size: cover; background-position: center;  /* MUST follow the shorthand — it resets background-size */
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #05060a;
}
.dm-compose-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.dm-compose-un { font-size: 12px; color: var(--text-secondary); }

/* ── Discover view (qid:651 audit) ──────────────────────────────────────────────── */
#discover-view { height: 100dvh; overflow: hidden; flex-direction: column; }
#discover-view.view.active { display: flex; }
.discover-body { flex: 1; overflow-y: auto; padding: 18px; max-width: 980px; margin: 0 auto; width: 100%; }
.discover-loading { padding: 48px; text-align: center; color: var(--text-secondary); }
.discover-hd { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin: 18px 2px 10px; }
.discover-hd:first-child { margin-top: 2px; }
.discover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.discover-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 18px 14px; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color);
  transition: transform .16s, border-color .14s, background .14s;
}
.discover-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-primary-rgb), 0.4); background: rgba(var(--accent-primary-rgb), 0.05); }
.discover-av {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  background-size: cover; background-position: center;  /* MUST follow the shorthand — it resets background-size */
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: #05060a;
}
.discover-room-ic {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--accent-primary); background: rgba(var(--accent-primary-rgb), 0.12);
}
.discover-name { font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.discover-sub { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.discover-act {
  margin-top: 6px; padding: 7px 18px; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; background: var(--accent-primary); color: #05060a; border: 1px solid var(--accent-primary);
  transition: background .14s, color .14s;
}
.discover-act.following { background: transparent; color: var(--text-secondary); border-color: var(--border-color); }
.discover-empty { padding: 14px 2px; color: var(--text-secondary); font-size: 14px; }

.room-topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.room-topbar-title {
  font-size: 16px;
  font-weight: 600;
}
.room-topbar-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

/* Room Main Layout */
/* The bottom-nav shows in-room (room:nav-live for nav-out-dock) and room-main is flex:1, so it
   fills to the viewport bottom and the chat input lands UNDER the fixed nav (measured desktop:
   input 848-900, nav 842-900). Reserve the nav's height on the room view so all in-room bottom UI
   sits above it, at EVERY width. pip-mode hides the nav + goes full-bleed, so no reserve there. */
#room-view { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
body.pip-mode #room-view { padding-bottom: 0; }
.room-main {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100dvh - 52px - 64px);
}

/* Video Grid Area */
/* Android PiP (qid:389): the floating window shows JUST the cameras (Discord-style). Collapse the UI
   to the video grid full-bleed; mic + screenshare keep running (this is layout only). */
/* Chris's spec for the Android background overlay (2026-09-13, qid:543): FOLLOW mode, NOTHING
   in the float but the cams, and controls that are touch-to-show/hide. So every piece of chrome
   goes — topbar, chat, nav, tile names, mic badges, hover overlays — and the grid is the whole
   window. The engine already handles the geometry; this is purely "hide everything that isn't
   video". The 2026-08-13 attempt showed an EMPTY grid because the collapse fired before the
   engine re-laid the tiles for the new window size; VoxPip.enter now forces a relayout after the
   CSS has applied, so the tiles get real dimensions. */
body.pip-mode .room-topbar,
body.pip-mode .chat-panel,
body.pip-mode #whiteboard-panel,
body.pip-mode #toast-stack,
body.pip-mode .feed-fab,
body.pip-mode #bottom-nav,
body.pip-mode .video-tile-label,
body.pip-mode .video-tile-name,
body.pip-mode .video-tile-mic,
body.pip-mode .vox-tile-hover { display: none !important; }
body.pip-mode #room-view .room-main { padding: 0 !important; margin: 0 !important; }
body.pip-mode #room-view .video-area { position: fixed; inset: 0; width: 100vw; height: 100dvh; margin: 0; padding: 0; background: #000; }
body.pip-mode #room-view .video-grid { width: 100%; height: 100%; padding: 0 !important; gap: 0 !important; }
/* In the float the ONE visible tile IS the window. The engine's solo layout aspect-fits a 16:9 tile
   into the container (letterbox by design in the room); here that meant a strip of cam inside a black
   box. !important beats the engine's inline geometry. The video then cover-crops, and the native
   shell sizes the window to the video's own aspect (VoxNative.setPipAspect) so the crop is nil. */
body.pip-mode #room-view .video-grid .vox-tile {
  left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
  border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: #000;
}
body.pip-mode #room-view .video-grid .vox-tile video.vox-main { object-fit: cover !important; }

/* ── Persistent live dock (qid:543) ──────────────────────────────────────────────────────────
   Appears over the rest of the app while you are connected to a room but not on the room view.
   Cams only (solofollow: the active speaker), tap to return. Sits above the bottom nav. It is
   what keeps adaptiveStream sending video while the room's own tiles are hidden — so it must be
   a real, visible, non-zero-size element, never display:none while docked. */
#live-dock {
  position: fixed; right: 12px; z-index: 55;
  bottom: calc(var(--bottom-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px);
  width: 176px; height: 99px;                                      /* 16:9 */
  border-radius: 10px; overflow: hidden; background: #000; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 6px 22px rgba(0,0,0,0.55);
  padding: 0 !important; gap: 0 !important;
}
#live-dock .vox-tile {
  left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
  border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important;
}
#live-dock .vox-tile video.vox-main { object-fit: cover !important; }
#live-dock .vox-tile-hover, #live-dock .video-tile-label, #live-dock .video-tile-name, #live-dock .video-tile-mic { display: none !important; }
@media (min-width: 900px) {
  #live-dock { width: 288px; height: 162px; right: 20px; bottom: 20px; }   /* desktop has no bottom nav */
}
/* The dock never shows over the room view itself, and never inside the Android float. */
body.pip-mode #live-dock { display: none !important; }

/* Touch-to-show/hide control strip for the overlay. Hidden until a tap on the grid BACKDROP
   toggles it (a tap on a TILE is left to the engine: in follow mode that pins the person).
   Only three things are ever worth reaching from a float: mic, cam, leave. They forward their
   clicks to the real room buttons so there is exactly one implementation of each. */
#pip-controls { display: none; }
body.pip-mode.pip-controls-visible #pip-controls {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  justify-content: center; gap: 14px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 100%);
}
#pip-controls button {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(14,20,32,.85); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
#pip-controls button.off { background: rgba(255,60,60,.85); border-color: rgba(255,120,120,.6); }
#pip-controls button.leave { background: rgba(200,30,50,.9); }

.video-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}

.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  justify-content: center;
  align-content: center;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;   /* Spotlight/Sidebar presets absolutely-position tiles within this */
}

/* ============================================================
   VoxStage — the ONE shared video composition/layout engine (qid:389).
   Same classes power the in-room grid AND the feed preview (padding/gap set inline
   by the engine so the layout math matches at any scale).
   ============================================================ */
.vox-stage {
  display: flex; flex-wrap: wrap; box-sizing: border-box;
  justify-content: center; align-content: center;
  overflow: hidden; width: 100%; height: 100%;
}
.vox-tile {
  position: relative; background: #000; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; isolation: isolate;
  transition: left 0.28s cubic-bezier(0.22,1,0.36,1), top 0.28s cubic-bezier(0.22,1,0.36,1),
              width 0.22s ease, height 0.22s ease;
}
.vox-main { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* cover-fill preview (feed thumbnails): full-bleed, square corners, no tile chrome */
.vox-cover-mode { padding: 0 !important; gap: 0 !important; }
.vox-cover-mode .vox-tile { border-radius: 0; background: #000; }
.vox-cover { object-fit: cover; }
.vox-contain { object-fit: contain; background: #000; }
.vox-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vox-pip {
  position: absolute; overflow: hidden; border-radius: 5px; z-index: 4;
  border: 1px solid rgba(255,255,255,0.5); background: #000;
  box-shadow: 0 3px 12px rgba(0,0,0,0.55);
  transition: left 0.22s cubic-bezier(0.22,1,0.36,1), top 0.22s cubic-bezier(0.22,1,0.36,1),
              width 0.12s ease, height 0.12s ease;
}
.vox-pip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vox-pip-own { cursor: grab; touch-action: none; }
.vox-pip-own:hover { border-color: rgba(255,255,255,0.75); }
.vox-dragging { transition: width 0.12s ease, height 0.12s ease; cursor: grabbing; border-color: var(--accent-primary); }
.vox-pip-grip {
  position: absolute; width: 20px; height: 20px;
  touch-action: none; opacity: 0; transition: opacity 0.15s ease;
  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.6) 62%, transparent 62%, transparent 74%, rgba(255,255,255,0.6) 74%, rgba(255,255,255,0.6) 86%, transparent 86%);
}
/* Four corner resize handles (built in wirePip): grab any one, the opposite corner is the pivot.
   Each sits in its corner; the diagonal stripes mirror so they always point outward. */
.vox-pip-grip-br { right: 0; bottom: 0; cursor: nwse-resize; }
.vox-pip-grip-bl { left: 0; bottom: 0; cursor: nesw-resize; transform: scaleX(-1); }
.vox-pip-grip-tr { right: 0; top: 0; cursor: nesw-resize; transform: scaleY(-1); }
.vox-pip-grip-tl { left: 0; top: 0; cursor: nwse-resize; transform: scale(-1, -1); }
.vox-pip-own:hover .vox-pip-grip, .vox-dragging .vox-pip-grip { opacity: 1; }
/* Every focus-driven layout is click-to-choose-who — keep in step with FOCUS_LAYOUTS in
   vox-stage.js. solo and follow were added 2026-09-13 (qid:537). */
.vox-stage[data-layout="spotlight"] .vox-tile,
.vox-stage[data-layout="sidebar"] .vox-tile,
.vox-stage[data-layout="solo"] .vox-tile,
.vox-stage[data-layout="follow"] .vox-tile { cursor: pointer; }
.vox-tile.vox-focus { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.vox-tile-hover {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: flex-start; justify-content: flex-end;
  gap: 6px; padding: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 42%);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
/* Reveal on hover, but the OVERLAY ITSELF NEVER TAKES POINTER EVENTS — only its buttons do
   (see .vox-tile-hover button below). It is `inset: 0`, i.e. it covers the ENTIRE tile, at
   z-index 8, while the cam PiP is z-index 4. So making the container `pointer-events: auto`
   here put an invisible full-tile shield over the PiP: every pointerdown aimed at the PiP or
   its resize grip landed on the shield instead, and the owner could no longer drag or resize
   their own cam PiP — it still rendered and still synced FROM remotes, which is why it looked
   alive. Regression landed with the hover overlay in 8b9a7e1 (2026-09-04); the PiP drag/resize
   had worked since the vox-stage unification in August. It also swallowed tile-click-to-focus
   in the spotlight/sidebar layouts. On touch it was permanent, not just while hovering, because
   the (hover: none) block below turns the overlay on and never turns it off. (qid:389)
   The overlay's own click handler already ignores anything that is not a button, so the
   container has never had a reason to be clickable. */
/* Desktop: reveal on hover. Touch has no hover, so gate it to hover-capable pointers — otherwise
   a sticky :hover (or the old (hover:none) always-on) left the strip permanently up on the app. */
@media (hover: hover) {
  .vox-tile:hover .vox-tile-hover { opacity: 1; }
}
/* Popover open (adjusting) stays up everywhere; touch taps reveal via .vox-touch-show (JS auto-hides
   it after a few seconds — the touch equivalent of hover-out). qid:707. */
.vox-tile.vox-hover-lock .vox-tile-hover,
.vox-tile.vox-touch-show .vox-tile-hover { opacity: 1; }
.vox-tile-hover button {
  pointer-events: auto;   /* the ONLY interactive part of the overlay */
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(14,20,32,.78); color: #fff;
  cursor: pointer; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.vox-tile-hover button:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.vox-tile-hover button.on { background: var(--accent-primary); color: #0e1420; border-color: var(--accent-primary); }
/* Per-user volume popover (qid:702): its own pointer-events:auto surface so it never shields the
   PiP drag the way the .vox-tile-hover container would. Anchored just under the top-right strip. */
.vox-vol-pop {
  position: absolute; z-index: 9; top: 46px; right: 8px;
  padding: 8px 10px; display: flex; align-items: center;
  background: rgba(14,20,32,.92); border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); pointer-events: auto;
}
.vox-vol-pop input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 120px; height: 4px; margin: 0; cursor: pointer; outline: none;
  background: rgba(255,255,255,.25); border-radius: 3px;
}
.vox-vol-pop input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  border: none; border-radius: 50%; background: var(--accent-primary); cursor: pointer;
}
.vox-vol-pop input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border: none; border-radius: 50%;
  background: var(--accent-primary); cursor: pointer;
}
.vox-vol-pop input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 3px; background: rgba(255,255,255,.25);
}
/* Global (topbar) volume popover (qid:707): same slider look as .vox-vol-pop, but anchored to the
   topbar button via fixed positioning (top/left set inline from the button rect) so it floats above
   the chrome rather than inside a tile. */
.vox-gvol-pop { position: fixed; z-index: 9999; top: auto; right: auto; }
/* Layout picker popover (qid:707-C) — a real VISUAL picker: each option draws a wireframe of its tile
   arrangement. Token-only + the `context-menu` class (win98 bevels it); mirrors .mod-menu form. */
.vox-layout-pop {
  position: fixed; z-index: 2000; padding: 10px; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px; min-width: 250px; background: var(--bg-panel); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-panel);
}
[data-theme="cyberpunk"] .vox-layout-pop { border-color: var(--accent-primary); box-shadow: var(--glow-sm), var(--shadow-panel); }
.vox-layout-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer;
  padding: 10px 8px 9px; font: inherit; font-family: var(--font-body); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.vox-layout-item:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-hover); }
.vox-layout-item.active { color: var(--accent-primary); background: var(--bg-card-hover); border-color: var(--accent-primary); }
.vox-layout-name { white-space: nowrap; }
/* wireframe thumbnail: little blocks laid out like the real tile arrangement */
.vox-layout-thumb {
  width: 94px; height: 56px; padding: 4px; display: flex; gap: 3px;
  background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius);
}
.vox-layout-thumb i { flex: 1; min-width: 0; min-height: 0; display: block; border-radius: 1px; background: var(--accent-primary); opacity: .5; }
.vox-layout-item:hover .vox-layout-thumb i, .vox-layout-item.active .vox-layout-thumb i { opacity: .85; }
.vox-layout-thumb i.big { flex: 2; }
.vox-layout-thumb .row { display: flex; gap: 3px; flex: 1; min-height: 0; }
.vox-layout-thumb .col { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.lt-even .vox-layout-thumb, .lt-auto .vox-layout-thumb { flex-wrap: wrap; }
.lt-even .vox-layout-thumb i, .lt-auto .vox-layout-thumb i { flex: 1 1 calc(50% - 3px); }
.lt-columns .vox-layout-thumb { flex-direction: row; }
.lt-stack .vox-layout-thumb,
.lt-spotlight .vox-layout-thumb,
.lt-follow .vox-layout-thumb { flex-direction: column; }
.lt-sidebar .vox-layout-thumb { flex-direction: row; }
/* Screenshare-audio popover (qid:707-B): a mute toggle stacked above its own volume slider, so the
   screen feed is controlled independently of the person's mic. */
.vox-scr-vol-pop { flex-direction: column; align-items: stretch; gap: 8px; min-width: 150px; }
.vox-scr-mute-btn {
  font: inherit; font-family: var(--font-body); font-size: 12px; padding: 6px 8px; cursor: pointer; text-align: center;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: var(--radius); white-space: nowrap;
}
.vox-scr-mute-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.vox-scr-mute-btn.on { background: var(--accent-tertiary); color: var(--bg-primary); border-color: var(--accent-tertiary); }
.vox-tile.vox-cam-hidden .vox-main,
.vox-tile.vox-cam-hidden video { visibility: hidden; }
.vox-tile.vox-cam-hidden .vox-ph { z-index: 4; }
.vox-tile.vox-local-muted .video-tile-mic { color: var(--accent-tertiary); }
[data-theme="cyberpunk"] .vox-pip-own { border-color: var(--accent-primary); }
/* Smooth tile motion when switching presets / re-fitting (room.js sets px geometry) */
.video-tile { transition: left 0.28s cubic-bezier(0.22,1,0.36,1), top 0.28s cubic-bezier(0.22,1,0.36,1), width 0.22s ease, height 0.22s ease; }
/* Focus presets: tiles are clickable to spotlight; the focused one gets a subtle ring */
.video-grid[data-layout="spotlight"] .video-tile,
.video-grid[data-layout="sidebar"] .video-tile { cursor: pointer; }
.video-tile.is-focus { outline: 2px solid var(--accent-primary); outline-offset: -2px; }

/* Tile sizing is owned by room.js updateGridLayout() — it aspect-fits each tile to a
   16:9 rectangle in px and the flex grid (justify/align-content:center) centers them,
   letterboxing leftover space. The old per-data-count %-width rules were REMOVED because
   they fought the JS px sizing (two layout systems on the same tiles → stretch/drift). */


/* Video Tile */
.video-tile {
  position: relative;
  background: #000;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.video-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.screen-share-tile video {
  object-fit: contain;
}

/* PiP cam overlay on screen share tile */
.video-tile-pip {
  position: absolute;
  /* left/top/width/height are driven by room.js (drag + corner-snap); these are fallbacks */
  top: 12px;
  right: 12px;
  width: 176px;
  height: 99px;
  border-radius: var(--radius);
  border: 2px solid rgba(255, 255, 255, 0.35);
  overflow: hidden;
  z-index: 6;
  background: #000;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65);
  cursor: grab;
  touch-action: none;
  transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              top 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.12s ease, height 0.12s ease,
              box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Only the owner's PiP is interactive; everyone else sees it fixed */
.video-tile-pip:not(.pip-owned) { cursor: default; }
.video-tile-pip.pip-owned:hover { border-color: rgba(255, 255, 255, 0.6); }
.video-tile-pip.dragging {
  transition: width 0.12s ease, height 0.12s ease;   /* no position transition while held */
  cursor: grabbing;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.75);
  border-color: var(--accent-primary);
}
/* Resize grip, bottom-right — a subtle corner wedge that lights up on hover */
.pip-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 2;
  background:
    linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 62%, transparent 62%, transparent 74%, rgba(255, 255, 255, 0.5) 74%, rgba(255, 255, 255, 0.5) 86%, transparent 86%);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.video-tile-pip:hover .pip-resize-handle,
.video-tile-pip.dragging .pip-resize-handle { opacity: 1; }
[data-theme="cyberpunk"] .pip-resize-handle {
  background:
    linear-gradient(135deg, transparent 50%, var(--accent-primary) 50%, var(--accent-primary) 62%, transparent 62%, transparent 74%, var(--accent-primary) 74%, var(--accent-primary) 86%, transparent 86%);
}
.video-tile-pip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-tile-pip .video-tile-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
}
.video-tile-pip .avatar-lg {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.video-tile-pip .ghost-label {
  font-size: 8px;
}
[data-theme="cyberpunk"] .video-tile-pip {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-sm), 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* Active speaker glow — pseudo-element overlay so video never repaints */
.video-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  box-shadow: none;
  pointer-events: none;
  z-index: 5;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.video-tile.active-speaker::after {
  border-color: var(--accent-secondary);
  box-shadow: inset 0 0 12px rgba(var(--accent-secondary-rgb), 0.15), 0 0 8px rgba(var(--accent-secondary-rgb), 0.2);
}
[data-theme="cyberpunk"] .video-tile.active-speaker::after {
  box-shadow: inset 0 0 15px rgba(var(--accent-secondary-rgb), 0.2), 0 0 12px rgba(var(--accent-secondary-rgb), 0.4);
}
/* Engine tiles get the same active-speaker glow (they're .vox-tile, not .video-tile) */
.vox-tile::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid transparent; pointer-events: none; z-index: 5;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.vox-tile.active-speaker::after {
  border-color: var(--accent-secondary);
  box-shadow: inset 0 0 12px rgba(var(--accent-secondary-rgb), 0.15), 0 0 8px rgba(var(--accent-secondary-rgb), 0.2);
}
[data-theme="cyberpunk"] .vox-tile.active-speaker::after {
  box-shadow: inset 0 0 15px rgba(var(--accent-secondary-rgb), 0.2), 0 0 12px rgba(var(--accent-secondary-rgb), 0.4);
}

.video-tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  pointer-events: none;
  z-index: 3;
}
.video-tile-name {
  font-weight: 500;
  color: #fff;
}
.video-tile-mic {
  font-size: 14px;
}
.video-tile-mic.muted {
  color: var(--accent-tertiary);
}
.video-tile-mic.unmuted {
  color: var(--accent-secondary);
}

/* No camera placeholder */
.video-tile-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-dim);
  z-index: 2;
}
.video-tile-placeholder .avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #000;
}
.video-tile-placeholder .ghost-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
}

/* Custom cam-off background image — the placeholder now fills the tile (inset:0 above),
   so the cover background spans the whole tile with the avatar chip centered on top. */
.video-tile-placeholder.has-cam-bg {
  justify-content: center;
}
.video-tile-placeholder.has-cam-bg .avatar-lg,
.video-tile-placeholder.has-cam-bg .ghost-label {
  position: relative;
  z-index: 1;
}
.video-tile-placeholder.has-cam-bg .avatar-lg {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.video-tile-placeholder.has-cam-bg .ghost-label {
  background: rgba(0,0,0,0.5);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--text-primary);
}

/* Cam background settings area */
.cam-bg-area {
  margin: 16px 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.cam-bg-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 4px;
}
.cam-bg-desc {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0 0 8px 0;
}
.cam-bg-preview-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cam-bg-preview {
  width: 120px;
  height: 68px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.cam-bg-preview-empty {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.cam-bg-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cam-bg-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Chat Panel */
.chat-panel {
  width: 340px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-color);
  flex-shrink: 0;
  position: relative;
}

[data-theme="cyberpunk"] .chat-panel {
  border-left-color: rgba(var(--accent-primary-rgb), 0.2);
}

/* Chat header action buttons (float toggle + close) */
.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Docked-sidebar horizontal resize grip (left edge) */
.chat-resize-handle {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
}
.chat-resize-handle::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: transparent;
  transition: background var(--transition-fast);
}
.chat-resize-handle:hover::after {
  background: var(--accent-primary);
}

/* Bottom-right corner grip — only meaningful in floating mode */
.chat-float-resize {
  display: none;
  position: absolute;
  z-index: 12;
  touch-action: none;
}
.chat-float-resize-e {          /* right edge — width */
  top: 10px;
  bottom: 24px;
  right: 0;
  width: 10px;
  cursor: ew-resize;
}
.chat-float-resize-se {         /* corner — both axes */
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 42%, var(--accent-primary) 42% 52%,
    transparent 52% 66%, var(--accent-primary) 66% 76%, transparent 76%);
  opacity: 0.65;
}
.chat-float-resize-se:hover { opacity: 1; }
/* closed floating box (X or click-outside) */
.chat-panel.floating.chat-collapsed {
  display: none;
}

/* ── Floating chatbox mode ─────────────────────────────────────────── */
.chat-panel.floating {
  position: fixed;
  right: auto;
  bottom: auto;
  width: var(--chat-float-w, 360px);
  height: var(--chat-float-h, 460px);
  min-width: 260px;
  min-height: 220px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  z-index: 120;
  /* JS sets left/top; keep it lifted above the OSK when present */
  transform: translateY(calc(-1 * var(--osk-inset, 0px)));
}
[data-theme="cyberpunk"] .chat-panel.floating {
  border-color: rgba(var(--accent-primary-rgb), 0.35);
  box-shadow: 0 0 24px rgba(var(--accent-primary-rgb), 0.25), 0 12px 40px rgba(0, 0, 0, 0.6);
}
.chat-panel.floating .chat-header {
  cursor: move;
  user-select: none;
  touch-action: none;             /* let pointer-drag work on touch, don't scroll */
  padding-top: 16px;
  padding-bottom: 16px;
}
/* grab-affordance dots on the floating title bar */
.chat-panel.floating .chat-header::before {
  content: "⠿";
  margin-right: 8px;
  opacity: 0.5;
  font-size: 14px;
  letter-spacing: -2px;
}
/* free the bottom-right corner so the resize grip doesn't fight the Send button */
.chat-panel.floating .chat-input-area {
  padding-right: 22px;
}
.chat-panel.floating .chat-resize-handle {
  display: none;
}
.chat-panel.floating .chat-float-resize {
  display: block;
}
#btn-float-chat {
  font-size: 15px;
  line-height: 1;
}
.chat-panel.floating #btn-float-chat {
  color: var(--accent-primary);
}

/* ── Notification toasts ───────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  top: 66px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, 92vw);
  pointer-events: none;          /* stack is click-through; toasts opt back in */
}
.toast {
  pointer-events: auto;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  cursor: pointer;
  animation: toast-in var(--transition-med) ease;
}
.toast.toast-out {
  animation: toast-out var(--transition-med) ease forwards;
}
@keyframes toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}
.toast-icon { font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.toast-body { flex: 1; min-width: 0; }
.toast-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.toast-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  opacity: 0.6;
}
.toast-close:hover { opacity: 1; }
/* type accents */
.toast-mention { border-left-color: var(--accent-secondary); }

/* ── Live WebRTC stats panel (📊) — read-only diagnostic (qid:389) ───────────── */
.vox-stats-panel {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 40;
  width: min(320px, calc(100% - 20px));
  max-height: 55%;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-panel);
  font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-primary);
}
.vs-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent-primary);
  margin-bottom: 6px;
}
.vs-close {
  background: none; border: none; color: var(--text-secondary);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.vs-close:hover { color: var(--text-primary); }
.vs-sec { margin-bottom: 7px; }
.vs-sec-t { color: var(--text-secondary); font-size: 10px; letter-spacing: 0.08em; margin-bottom: 2px; }
.vs-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.vs-row + .vs-row { margin-top: 1px; }
.vs-name { min-width: 70px; color: var(--text-primary); font-weight: 600; }
.vs-dim { color: var(--text-secondary); opacity: 0.8; }
.vs-impl { font-size: 10px; word-break: break-all; }
.vs-good { color: var(--accent-secondary); font-weight: 700; }
.vs-bad { color: var(--danger); font-weight: 700; }
.vs-warn { color: var(--danger); }

/* ── In-app update card (Android shell) — on-brand, animated (qid:389) ───────── */
.vox-update-card {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  z-index: 60;
  width: min(440px, calc(100vw - 24px));
  padding: 16px 18px 14px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03) inset;
  overflow: hidden;
  opacity: 0;
  transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .32s ease;
}
.vox-update-card.vu-in { transform: translate(-50%, 0); opacity: 1; }
.vu-glow {
  position: absolute; inset: -2px -2px auto -2px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), var(--accent-secondary), transparent);
  background-size: 200% 100%;
  animation: vu-sweep 2.6s linear infinite;
}
@keyframes vu-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.vu-row { display: flex; align-items: center; gap: 13px; }
.vu-badge {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-size: 20px; color: #041018; font-weight: 800;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-primary) 55%, transparent);
  animation: vu-bob 2.4s ease-in-out infinite;
}
@keyframes vu-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.vu-text { min-width: 0; }
.vu-title { font-weight: 700; font-size: 15px; color: var(--text-primary); letter-spacing: .01em; }
.vu-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.vu-bar-wrap {
  display: none; height: 6px; margin-top: 13px; border-radius: 99px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.vu-bar-wrap.vu-show { display: block; }
.vu-bar {
  width: 2%; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  transition: width .25s ease;
}
.vu-actions { display: flex; gap: 10px; margin-top: 14px; }
.vu-btn {
  flex: 1; padding: 11px 14px; border-radius: 11px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: filter .15s ease, transform .1s ease;
}
.vu-btn:active { transform: scale(.98); }
.vu-later { background: rgba(255,255,255,0.06); color: var(--text-primary); border-color: var(--border-color); flex: 0 0 34%; }
.vu-go {
  color: #041018; font-weight: 800;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}
.vu-go:hover { filter: brightness(1.06); }

/* ── Camera controls panel (flip / lens / zoom / flash) (qid:389) ───────────── */
.vox-cam-panel {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 45;
  width: min(300px, calc(100% - 20px));
  padding: 12px 14px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-panel);
  color: var(--text-primary);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.vox-cam-panel.vc-in { opacity: 1; transform: translateY(0); }
.vc-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.vc-x { background: none; border: none; color: var(--text-secondary); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px; }
.vc-x:hover { color: var(--text-primary); }
.vc-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.vc-label { flex: 0 0 46px; font-size: 12px; color: var(--text-secondary); }
.vc-btn {
  width: 100%; padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
  color: #041018; border: none; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}
.vc-btn:active { transform: scale(.98); }
.vc-sel {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; font-size: 13px;
  background: rgba(255,255,255,0.06); color: var(--text-primary); border: 1px solid var(--border-color);
}
.vc-range { flex: 1; accent-color: var(--accent-primary); }
.vc-toggle {
  flex: 1; padding: 9px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,0.06); color: var(--text-primary); border: 1px solid var(--border-color);
}
.vc-toggle.vc-on { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #041018; border-color: transparent; font-weight: 800; }
.vc-note { margin-top: 12px; font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; }
.vc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; margin-bottom: 4px; }
.vc-chip { padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,0.06); color: var(--text-primary); border: 1px solid var(--border-color); }
.vc-chip:active { transform: scale(.97); }
.vc-chip-on { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: #041018; border-color: transparent; font-weight: 800; }
.vc-zoomval { min-width: 42px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--accent-primary); font-variant-numeric: tabular-nums; }
.vc-diag { margin-top: 12px; font-size: 11px; }
.vc-diag summary { cursor: pointer; color: var(--text-secondary); user-select: none; }
.vc-diag-pre { margin-top: 8px; padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.28);
  border: 1px solid var(--border-color); color: var(--text-primary); font-family: ui-monospace, monospace;
  font-size: 10.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.toast-mod     { border-left-color: var(--danger, #ff5a5a); }
.toast-info    { border-left-color: var(--text-secondary); }
[data-theme="cyberpunk"] .toast {
  box-shadow: 0 0 18px rgba(var(--accent-primary-rgb), 0.22), var(--shadow-panel);
}
/* Portrait mobile: toasts sit IN-FLOW under the cam feeds (cams shrink up to
   make room) instead of floating over the bottom cam. */
@media (max-width: 768px) and (orientation: portrait) {
  .video-grid {
    flex: 1 1 auto;      /* shrink so the toast dock can claim space below */
    min-height: 0;
    height: auto;
  }
  .toast-stack {
    position: static;
    flex: 0 0 auto;
    inset: auto;
    max-width: none;
    padding: 0 10px;
    margin-bottom: calc(8px + var(--osk-inset, 0px));
  }
  .toast-stack:empty {
    display: none;        /* claim zero space when there's nothing to show */
    margin-bottom: 0;
  }
}

.chat-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.chat-toggle-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
}
.chat-toggle-btn.always { display: block; }
.chat-toggle-btn.always[aria-pressed="true"] { color: var(--accent-primary); }
.chat-userlist {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-userlist.hidden { display: none; }
.chat-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent;
}
.chat-user-row:hover { background: var(--bg-card-hover); border-color: var(--border-color); }
.chat-user-row .avatar-lg {
  width: 28px; height: 28px; font-size: 12px; flex-shrink: 0;
}
.chat-user-row .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.chat-user-row .meta { font-size: 11px; color: var(--text-dim); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Chat messages — Discord style */
.chat-msg {
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background var(--transition-fast);
}
.chat-msg:hover {
  background: rgba(255,255,255,0.03);
}
.chat-msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.chat-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
  margin-top: 2px;
}
.chat-msg-self .chat-msg-avatar {
  background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
}
.chat-msg-body {
  flex: 1;
  min-width: 0;
}
.chat-msg-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.chat-msg-sender {
  font-weight: 700;
  color: var(--accent-primary);
  font-size: 13px;
}
.chat-msg-self .chat-msg-sender {
  color: var(--accent-secondary);
}
.chat-msg-time {
  font-size: 10px;
  color: var(--text-dim);
}
.chat-msg-text {
  color: var(--text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.chat-msg-text .chat-gif {
  display: block;
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  margin-top: 4px;
  cursor: pointer;
}
.chat-msg-system {
  align-self: center;
  color: var(--text-secondary);
  font-size: 11px;
  text-align: center;
  padding: 3px 12px;
  margin: 2px auto;
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color);
  border-radius: 999px;
  max-width: 90%;
  letter-spacing: 0.02em;
}
[data-theme="cyberpunk"] .chat-msg-system {
  color: var(--accent-primary);
  border-color: rgba(var(--accent-primary-rgb), 0.25);
  background: rgba(var(--accent-primary-rgb), 0.06);
  text-transform: uppercase;
  font-size: 10px;
}

/* ── Room banner (owner-set pinned info card) ──────────────────────── */
.chat-banner {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  overflow: hidden;
  max-height: 42vh;
  overflow-y: auto;
}
.chat-banner.hidden { display: none; }
.chat-banner-img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  display: block;
}
.chat-banner-content { padding: 8px 12px 10px; }
.chat-banner-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.chat-banner-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-banner-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.chat-banner-link:hover { text-decoration: underline; }
[data-theme="cyberpunk"] .chat-banner {
  border-bottom-color: rgba(var(--accent-primary-rgb), 0.25);
}
/* banner compose modal image preview */
.banner-image-preview { margin-top: 8px; }
.banner-image-preview img {
  max-width: 100%;
  max-height: 160px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}
.modal-subtitle { font-size: 12px; color: var(--text-secondary); margin: -4px 0 12px; }

/* ── Room screen tile (owner-driven shared stage) ──────────────────── */
.video-tile.room-screen {
  background: var(--bg-panel);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: flex;
}
[data-theme="cyberpunk"] .video-tile.room-screen {
  border-color: rgba(var(--accent-primary-rgb), 0.5);
  box-shadow: inset 0 0 24px rgba(var(--accent-primary-rgb), 0.12);
}
.room-screen-inner {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
  overflow: auto;
}
.room-screen-img {
  max-width: 100%;
  max-height: 72%;
  object-fit: contain;
  border-radius: 4px;
}
.room-screen-title {
  font-weight: 700;
  font-size: clamp(13px, 2.2vw, 20px);
  color: var(--text-primary);
}
.room-screen-body {
  font-size: clamp(11px, 1.6vw, 15px);
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.room-screen-label {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
  z-index: 4;
}
/* video (watch-together) mode fills the tile edge-to-edge */
.room-screen-inner.room-screen-video {
  padding: 0;
  display: block;
  background: #000;
  /* the .vox-tile stage wrapper centers its item; stretch + fill so the player and the
     top-anchored now-playing bar lock to the tile box instead of overflowing above it (qid:654) */
  align-self: stretch;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.yt-player-host { width: 100%; height: 100%; }
.yt-player-host iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-follower-lock {          /* blocks follower clicks so they can't desync playback */
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: not-allowed;
}
.screen-modal-divider {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  margin: 10px 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* slideshow (synced gallery) mode */
.room-screen-inner.room-screen-slideshow {
  padding: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.room-slide-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.room-slide-controls {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  padding: 3px 6px;
}
.room-slide-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 50%;
}
.room-slide-btn:hover { background: rgba(255, 255, 255, 0.15); color: var(--accent-primary); }
.screen-slide-thumb {
  max-height: 56px;
  margin: 0 4px 4px 0;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

/* ── Feed — vertical scrolling front page (rooms now, posts next) ──── */
#feed-view { height: 100dvh; overflow: hidden; }
.feed-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
}
.feed-tabs { display: flex; gap: 18px; }
.feed-tab {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700; font-size: 15px; cursor: pointer;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.feed-tab.active { color: #fff; border-bottom-color: var(--accent-primary); }

.feed-scroll {
  flex: 1; overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.feed-scroll::-webkit-scrollbar { display: none; }

.feed-card {
  position: relative; height: 100dvh; width: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; background: #06060c;
  display: flex; align-items: center; justify-content: center;
}
.feed-card-media { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, #16162a, #06060c); }
.feed-card-media.has-video { background: #000; }
.feed-card-media img { width: 100%; height: 100%; object-fit: cover; }
/* Blur-fill preview: whole frame sharp (contain) over a blurred stretched copy —
   shows everything with no black bars, whatever the source aspect (cam/screenshare). */
.feed-preview-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.15);
  filter: blur(28px) brightness(0.5); z-index: 0;
}
.feed-preview-fg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; z-index: 1;
}
/* Whole-room preview: every published cam/screenshare as a live mini-grid tile (qid:389).
   Columns/rows set inline by feed.js relayoutMini(); tiles cover-fill their cell. */
.feed-mini-grid {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 2px; padding: 2px;
  align-content: center; justify-content: center; align-items: center;
  background: #06060c;
}
.feed-mini-tile {
  flex: 0 0 auto;
  position: relative; overflow: hidden;
  background: #000; border-radius: 4px;
}
.feed-mini-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Cam-as-PiP inside a preview tile — mirrors the owner's synced corner/size (set inline). */
.feed-mini-tile .mini-pip {
  position: absolute; aspect-ratio: 16 / 9;
  border-radius: 3px; overflow: hidden; z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.55); background: #000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.feed-card-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.feed-card-overlay .btn, .feed-card-overlay .feed-rail-btn, .feed-card-info { pointer-events: auto; }

.feed-live-badge {
  position: absolute; top: 56px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #fff;
  background: rgba(0, 0, 0, 0.5); padding: 3px 9px; border-radius: 999px;
}
.feed-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #888; }
.feed-live-badge.is-live .feed-live-dot { background: #ff3b5c; animation: feed-pulse 1.6s infinite; }
@keyframes feed-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }

/* bottom offsets clear the fixed bottom-nav (qid:389/397) so the card's title/actions + side rail
   never hide behind it */
.feed-card-info { position: absolute; left: 14px; right: 72px;
  bottom: calc(24px + var(--bottom-nav-h, 58px) + env(safe-area-inset-bottom, 0px)); color: #fff; }
.feed-card-title { font-size: 20px; font-weight: 800; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.feed-card-owner { font-size: 13px; opacity: 0.85; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.feed-owner-av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
/* Who's-in-the-room avatar stack on a live card (qid:389) */
.feed-viewers { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.feed-viewers-stack { display: flex; }
.feed-viewer-av { width: 26px; height: 26px; border-radius: 50%; margin-left: -8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #041018;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border: 2px solid rgba(6,6,12,0.9); box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.feed-viewer-av:first-child { margin-left: 0; }
.feed-viewer-av img { width: 100%; height: 100%; object-fit: cover; }
.feed-viewers-lbl { font-size: 12.5px; font-weight: 600; opacity: 0.9; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.feed-card-desc {
  font-size: 13px; opacity: 0.92; margin-top: 6px;
  max-height: 3.6em; overflow: hidden; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.feed-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.feed-camup { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); }

.feed-side-rail {
  position: absolute; right: 12px;
  bottom: calc(28px + var(--bottom-nav-h, 58px) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.feed-rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #fff; background: none; border: none;
}
.feed-rail-btn { cursor: pointer; }
.feed-rail-glyph { font-size: 26px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.feed-rail-label { font-size: 11px; opacity: 0.9; }

.feed-empty { flex-direction: column; gap: 12px; color: var(--text-secondary); }
.feed-empty-icon { font-size: 42px; opacity: 0.5; }

/* desktop: center a phone-width column like TikTok web */
@media (min-width: 900px) {
  .feed-card { max-width: 460px; margin: 0 auto; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); }
}

/* ── Compose FAB (create post) — qid:389 Phase B ─────────────────────────── */
/* DESKTOP-ONLY: the feed is a centered column on desktop so the FAB sits clear at the far
   right edge. On mobile the feed card is full-width and the FAB would collide with the card's
   side-rail, so mobile uses the "＋ Post" button in the top bar instead. */
.feed-fab { display: none; }
.feed-compose-top { display: none; }        /* mobile-only top-bar compose (shown < 900px) */
@media (max-width: 899px) {
  .feed-compose-top { display: inline-flex; }
}
@media (min-width: 900px) {
  .feed-fab {
  position: fixed; z-index: 40;
  right: 18px; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%;
  border: none; cursor: pointer;
  font-size: 30px; line-height: 1; font-weight: 400; color: #fff;
  background: linear-gradient(135deg, var(--accent-primary), #9b8cff);
  box-shadow: 0 6px 20px rgba(var(--accent-primary-rgb), 0.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.feed-fab:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(var(--accent-primary-rgb), 0.6); }
.feed-fab:active { transform: scale(0.94); }
[data-theme="cyberpunk"] .feed-fab {
  border-radius: 8px; font-family: var(--font-mono, monospace); font-size: 0; font-weight: 700;
  letter-spacing: 0.04em; background: rgba(0, 212, 255, 0.12); color: var(--accent-primary);
  border: 1px solid var(--accent-primary); box-shadow: 0 0 14px rgba(var(--accent-primary-rgb), 0.4);
  width: auto; height: auto; padding: 12px 16px;
}
[data-theme="cyberpunk"] .feed-fab::before { content: attr(data-cyber); font-size: 13px; }
}  /* end @media min-width:900px — FAB is desktop-only */

/* ── Compose modal ───────────────────────────────────────────────────────── */
.compose-modal { width: min(520px, 94vw); display: flex; flex-direction: column; max-height: 88dvh; }
.compose-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.compose-header h2 { margin: 0; }
.compose-body { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.compose-caption {
  width: 100%; resize: none; font: inherit; color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--border-color);
  border-radius: var(--radius); padding: 10px 12px; outline: none;
}
.compose-caption:focus { border-color: var(--accent-primary); }
.compose-caption-count { align-self: flex-end; font-size: 11px; color: var(--text-secondary); margin-top: -4px; }

.compose-media-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 22px 14px; cursor: pointer;
  border: 1.5px dashed var(--border-color); border-radius: var(--radius);
  color: var(--text-secondary); transition: border-color 0.14s ease, background 0.14s ease;
}
.compose-media-pick:hover { border-color: var(--accent-primary); background: rgba(var(--accent-primary-rgb), 0.05); }
.compose-media-glyph { font-size: 30px; opacity: 0.8; }
.compose-media-hint { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.compose-media-sub { font-size: 11px; opacity: 0.7; }

.compose-preview { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; }
.compose-preview-img, .compose-preview-vid { width: 100%; max-height: 46dvh; object-fit: contain; display: block; }
.compose-preview-clear {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 20px; line-height: 1; color: #fff;
  background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center;
}
.compose-error {
  font-size: 13px; color: #ff6b6b; background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3); border-radius: var(--radius); padding: 8px 10px;
}
.compose-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Comments thread modal (qid:389 Phase B) ─────────────────────────────── */
.comments-modal { width: min(480px, 94vw); display: flex; flex-direction: column; max-height: 82dvh; }
.comments-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 4px 2px 8px; min-height: 120px; }
.comments-empty { color: var(--text-secondary); text-align: center; padding: 28px 12px; font-size: 13.5px; }
.comment-row { display: flex; gap: 10px; align-items: flex-start; }
.comment-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #041018;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); }
.comment-body { flex: 1; min-width: 0; }
.comment-name { font-size: 12.5px; font-weight: 700; color: var(--accent-primary); }
.comment-text { font-size: 14px; color: var(--text-primary); line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.comments-composer { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.comment-input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); color: var(--text-primary);
  font-size: 14px; outline: none; }
.comment-input:focus { border-color: var(--accent-primary); }
#btn-comment-send { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }

/* ── Share sheet (qid:389) ───────────────────────────────────────────────── */
.share-sheet { width: min(440px, 94vw); }
.share-linkrow { display: flex; gap: 8px; margin: 4px 0 16px; }
.share-link { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); color: var(--text-secondary); }
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.share-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px;
  border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-color);
  color: var(--text-primary); cursor: pointer; transition: transform .12s, background .12s; }
.share-tile:active { transform: scale(.95); }
.share-tile:hover { background: rgba(255,255,255,0.09); }
.share-tile-glyph { font-size: 24px; line-height: 1; }
.share-tile-label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }

/* ── Who's-live rail (qid:389) — overlay strip just below the floating topbar ── */
.feed-live-rail { position: absolute; top: 52px; left: 0; right: 0; z-index: 15; padding: 8px 12px 12px;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.28) 60%, transparent); }
.live-rail-hdr { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; color: var(--text-primary); margin-bottom: 9px; text-transform: uppercase; }
.live-rail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger, #ff4d4d);
  box-shadow: 0 0 0 0 rgba(255,77,77,0.6); animation: livePulse 1.8s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,77,0.55); } 70% { box-shadow: 0 0 0 7px rgba(255,77,77,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); } }
.live-rail-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.live-rail-strip::-webkit-scrollbar { display: none; }
.live-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; width: 66px; }
.live-ring { position: relative; width: 58px; height: 58px; border-radius: 50%; padding: 2px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); }
.live-av { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 20px; color: var(--text-primary);
  background: var(--bg-primary, #0c0c14); }
.live-count { position: absolute; bottom: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--danger, #ff4d4d); color: #fff; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-primary, #0c0c14); }
.live-name { font-size: 11px; color: var(--text-secondary); max-width: 66px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* ── Post cards in the feed (qid:389 Phase B) ────────────────────────────── */
.feed-card-post .feed-card-media { background: radial-gradient(circle at 50% 38%, #16162a, #06060c); }
.feed-post-media-img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.feed-post-media-vid { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.feed-post-text {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  padding: 10% 12%; text-align: center;
}
.feed-post-text span {
  font-size: 22px; font-weight: 700; line-height: 1.4; color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.feed-post-author { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.feed-post-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: var(--accent-primary); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
}
.feed-post-name { font-size: 15px; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.feed-follow { margin-left: 8px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  cursor: pointer; white-space: nowrap; border: 1.5px solid var(--accent-primary);
  background: var(--accent-primary); color: #041018; transition: transform .12s, background .12s, color .12s; }
.feed-follow:active { transform: scale(.95); }
.feed-follow.following { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.feed-msg { margin-left: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; border: 1.5px solid rgba(255,255,255,0.5); background: transparent;
  color: #fff; transition: transform .12s, background .12s; }
.feed-msg:active { transform: scale(.95); }
.feed-msg:hover { background: rgba(255,255,255,0.12); }

/* ── Direct messages (qid:389) ───────────────────────────────────────────── */
.dm-inbox-btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--border-color); color: var(--text-primary);
  transition: background .15s, color .15s, border-color .15s, transform .1s; }
.dm-inbox-btn:hover { color: var(--accent-primary); border-color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb, 120,90,255), 0.12); }
.dm-inbox-btn:active { transform: scale(0.93); }
.dm-inbox-btn svg { display: block; }
/* unread → the button itself glows so Messages is impossible to miss */
.dm-inbox-btn.has-unread { color: var(--accent-primary); border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 120,90,255), 0.15); }
.dm-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--danger, #ff4d4d); color: #fff; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
.dm-badge.hidden { display: none; }
.dm-modal { width: min(460px, 96vw); display: flex; flex-direction: column; max-height: 86dvh; }
.dm-live-row { flex: 0 0 auto; padding: 6px 2px 12px; border-bottom: 1px solid var(--border-color); margin-bottom: 6px; }
.dm-live-hdr { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-primary); margin-bottom: 9px; }
.dm-live-strip { display: flex; gap: 13px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.dm-live-strip::-webkit-scrollbar { display: none; }
.dm-live-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 58px; background: none; border: none; cursor: pointer; }
.dm-live-ring { width: 50px; height: 50px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); }
.dm-live-av { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: var(--text-primary); background: var(--bg-primary, #0c0c14); }
.dm-live-av img { width: 100%; height: 100%; object-fit: cover; }
.dm-live-name { font-size: 11px; color: var(--text-secondary); max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-inbox-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 160px; }
.dm-empty { color: var(--text-secondary); text-align: center; padding: 32px 12px; font-size: 13.5px; }
.dm-convo { display: flex; align-items: center; gap: 12px; padding: 11px 6px; background: none; border: none;
  border-bottom: 1px solid var(--border-color); cursor: pointer; text-align: left; width: 100%; }
.dm-convo:active { background: rgba(255,255,255,0.05); }
.dm-avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: #041018;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); }
.dm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-convo-mid { flex: 1; min-width: 0; }
.dm-convo-name { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.dm-convo-preview { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-unread-dot { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--accent-primary); color: #041018; font-size: 11px; font-weight: 800; display: flex;
  align-items: center; justify-content: center; }
/* thread */
.dm-thread { padding-top: 0; }
.dm-thread-header { display: flex; align-items: center; gap: 6px; padding: 14px 4px 12px; border-bottom: 1px solid var(--border-color); }
.dm-thread-back { background: none; border: none; color: var(--text-primary); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 6px; }
.dm-thread-name { flex: 1; font-size: 16px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-thread-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 2px; min-height: 200px; }
.dm-bubble { max-width: 76%; padding: 9px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.35; position: relative;
  word-break: break-word; white-space: pre-wrap; }
.dm-bubble.mine { align-self: flex-end; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: #041018; border-bottom-right-radius: 5px; }
.dm-bubble.theirs { align-self: flex-start; background: rgba(255,255,255,0.08); color: var(--text-primary);
  border: 1px solid var(--border-color); border-bottom-left-radius: 5px; }
.dm-unsend { position: absolute; top: 50%; left: -24px; transform: translateY(-50%); width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent;
  color: var(--text-secondary); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, color .12s; }
.dm-bubble.mine:hover .dm-unsend { opacity: 0.65; }
.dm-bubble.mine .dm-unsend:hover { opacity: 1; color: #ff5c72; }
@media (pointer: coarse) { .dm-bubble.mine .dm-unsend { opacity: 0.5; } }
.dm-thread-clear { margin-left: auto; flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; padding: 0; border: none; background: transparent; color: var(--text-secondary);
  font-size: 16px; line-height: 1; cursor: pointer; border-radius: 8px; transition: color .12s, background .12s; }
.dm-thread-clear:hover { color: #ff5c72; background: rgba(255,255,255,0.06); }
/* ── Pimped DM composer (qid:540): tool row + auto-grow input + round send, both themes ── */
.dm-composer { display: flex; align-items: flex-end; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.dm-tool { flex: 0 0 auto; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-color); color: var(--text-secondary, var(--text-primary));
  font-size: 18px; font-weight: 700; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.dm-tool.dm-tool-gif { font-size: 12px; letter-spacing: .06em; }
.dm-tool:hover, .dm-tool.on { color: var(--accent-primary); border-color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.10); }
.dm-tool:active { transform: scale(0.92); }
.dm-input { flex: 1 1 auto; min-width: 0; min-height: 40px; max-height: 128px; resize: none; overflow-y: auto;
  padding: 9px 14px; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-color);
  color: var(--text-primary); font-size: 14.5px; line-height: 1.35; font-family: inherit; outline: none; }
.dm-input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15); }
.dm-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--accent-primary)));
  box-shadow: 0 3px 12px rgba(var(--accent-primary-rgb), 0.4); transition: transform .12s, box-shadow .15s; }
.dm-send:hover { box-shadow: 0 5px 18px rgba(var(--accent-primary-rgb), 0.6); }
.dm-send:active { transform: scale(0.9); }
/* Emoji / GIF picker panels — sit just above the composer */
.dm-picker { border-top: 1px solid var(--border-color); background: var(--bg-secondary, #14141f);
  max-height: 246px; overflow-y: auto; }
/* CRITICAL: an author `display:` beats the UA `[hidden]{display:none}`, so without this the
   emoji panel (display:flex) could never hide — it stayed open on close. (qid:540) */
.dm-picker[hidden] { display: none !important; }
.dm-emoji-panel:not([hidden]) { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 10px; }
.dm-emoji-cat { flex: 0 0 100%; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-secondary, #8fa4be); margin: 6px 2px 2px; }
.dm-emoji-item { width: 38px; height: 38px; border: none; background: none; cursor: pointer; font-size: 22px;
  border-radius: 9px; line-height: 1; }
.dm-emoji-item:hover { background: rgba(var(--accent-primary-rgb), 0.15); }
.dm-gif-search { padding: 8px 10px; position: sticky; top: 0; background: var(--bg-secondary, #14141f); }
.dm-gif-input { width: 100%; padding: 9px 12px; border-radius: 18px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-color); color: var(--text-primary); font-size: 14px; outline: none; }
.dm-gif-input:focus { border-color: var(--accent-primary); }
.dm-gif-grid { column-count: 3; column-gap: 6px; padding: 0 10px 10px; }
.dm-gif-grid img { width: 100%; margin-bottom: 6px; border-radius: 8px; cursor: pointer; display: block; }
.dm-gif-note { padding: 20px 14px; text-align: center; color: var(--text-secondary, #8fa4be); font-size: 13px; }
.dm-bubble.has-media { padding: 4px; background: transparent; border: none; }
.dm-bubble .dm-media { max-width: 240px; max-height: 320px; border-radius: 12px; display: block; cursor: pointer; }
.dm-bubble.has-media .dm-unsend { top: 12px; }

/* ── Messages — first-class view (qid:389) ───────────────────────────────────
   Two-pane on desktop (conversation sidebar + thread), push-navigation on mobile
   (list slides to thread). Reuses the .dm-* convo/bubble/live styles above. */
/* The messages topbar reuses .feed-topbar, which is position:absolute (floats over the feed).
   In the two-pane/inbox layout that made the "Messages" title overlap the first conversation
   row. Force it in-flow so it takes its own band and the list/panes start below it. (qid:540) */
.dm-topbar { position: relative; flex: 0 0 auto; background: var(--bg-primary, #0c0c14);
  justify-content: flex-start; gap: 8px; align-items: center; }
.dm-topbar-back { background: none; border: none; color: var(--text-primary); font-size: 30px;
  line-height: 1; cursor: pointer; padding: 0 2px; }
.dm-topbar-title { font-size: 18px; font-weight: 800; color: var(--text-primary); letter-spacing: .01em; }
.dm-topbar-bell { margin-left: auto; flex: 0 0 auto; background: none; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--text-secondary, #8fa4be); padding: 4px 8px; border-radius: 8px; opacity: .8; }
.dm-topbar-bell:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.dm-topbar-bell.on { color: var(--accent-primary); opacity: 1;
  filter: drop-shadow(0 0 6px rgba(var(--accent-primary-rgb), 0.5)); }
.dm-layout { flex: 1; display: flex; min-height: 0; overflow: hidden; position: relative; }
.dm-sidebar { flex: 0 0 340px; display: flex; flex-direction: column; overflow: hidden;
  border-right: 1px solid var(--border-color); padding: 8px 12px 0;
  background: color-mix(in srgb, var(--bg-secondary, #14141f) 80%, transparent); }
.dm-thread-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative;
  background: var(--bg-primary, #0c0c14); }
.dm-thread-pane .dm-thread-header { padding: 14px 14px 12px; }
.dm-thread-pane .dm-thread-body { padding: 16px 16px; }
.dm-thread-pane .dm-composer {
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-secondary, #14141f) 88%, transparent);
}
.dm-thread-pane .dm-input { min-height: 44px; }
/* empty state fills the pane until a conversation is chosen (desktop) */
.dm-thread-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--text-secondary); font-size: 14px; }
.dm-thread-empty-icon { font-size: 46px; opacity: .45; }
.dm-layout.thread-open .dm-thread-empty { display: none; }
.dm-layout:not(.thread-open) .dm-thread-header,
.dm-layout:not(.thread-open) .dm-thread-body,
.dm-layout:not(.thread-open) .dm-composer { display: none; }
.dm-thread-back { display: none; }            /* two-pane desktop: no back arrow needed */
.dm-convo.active { background: rgba(255,255,255,0.06); }

@media (max-width: 720px) {
  .dm-sidebar { flex: 1 1 auto; border-right: none; }
  .dm-thread-pane { position: absolute; inset: 0; z-index: 5; transform: translateX(100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1); }
  .dm-layout.thread-open .dm-thread-pane { transform: translateX(0); }
  .dm-thread-back { display: block; }
  .dm-thread-empty { display: none; }         /* pane is hidden until a thread is picked */
  /* An open thread owns the whole screen — hide the Messages topbar so its title
     (TRANSMISSIONS / Messages) doesn't stack on top of the thread's own header. */
  body.dm-thread-active .dm-topbar { display: none; }
}

/* ── Bottom nav (qid:389) — primary app nav, IG/TikTok/Discord-style ───────── */
:root { --bottom-nav-h: 58px; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: stretch; justify-content: space-around;
  background: var(--bg-primary, #0c0c14);                                  /* fallback */
  background: color-mix(in srgb, var(--bg-primary, #0c0c14) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid var(--border-color); }
.bottom-nav.hidden { display: none; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: none; border: none; cursor: pointer; color: var(--text-secondary);
  position: relative; padding: 6px 0; transition: color .15s, transform .1s; }
.nav-item:active { transform: scale(0.94); }
.nav-ic { width: 24px; height: 24px; display: block; }
.nav-label { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
.nav-item.active { color: var(--accent-primary); }
.nav-item.active .nav-ic { filter: drop-shadow(0 0 6px rgba(var(--accent-primary-rgb), 0.5)); }
.nav-badge { position: absolute; top: 3px; right: calc(50% - 22px); min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; background: var(--danger, #ff4d4d); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; }
.nav-badge.hidden { display: none; }
/* raised center create button */
.nav-create { flex: 0 0 auto; align-self: center; width: 52px; height: 52px; margin: 0 4px;
  border-radius: 50%; border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--accent-primary)));
  box-shadow: 0 4px 16px rgba(var(--accent-primary-rgb), 0.45); transform: none;
  transition: transform .12s, box-shadow .15s; }
.nav-create:hover { box-shadow: 0 6px 22px rgba(var(--accent-primary-rgb), 0.6); }
.nav-create:active { transform: scale(0.92); }
.nav-create svg { width: 26px; height: 26px; }
/* keep scrollable content clear of the fixed bar */
.feed-scroll, #room-grid, .dm-inbox-list {
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 12px); }

/* create action sheet (slides up from bottom) */
#nav-create-sheet { align-items: flex-end; }
.nav-sheet { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: 520px; margin: 0 auto;
  background: var(--bg-secondary, #14141f); border: 1px solid var(--border-color);
  border-radius: 18px 18px 0 0; padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 6px; animation: sheet-up .2s cubic-bezier(.4,0,.2,1); }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.nav-sheet-item { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: 14px;
  color: var(--text-primary); cursor: pointer; transition: background .12s; }
.nav-sheet-item:hover { background: rgba(255,255,255,0.07); }
.nav-sheet-ic { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--accent-primary))); }
.nav-sheet-ic-live { background: var(--danger, #ff3b4e); }
.nav-sheet-item > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.nav-sheet-title { font-size: 15.5px; font-weight: 700; }
.nav-sheet-sub { font-size: 12.5px; color: var(--text-secondary); }
.nav-sheet-cancel { margin-top: 4px; padding: 13px; background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 14.5px; font-weight: 600; }

/* mobile: hide the nav inside an open DM thread (immersive convo, like IG) */
/* In an open DM thread the composer owns the bottom bar. Hide the fixed bottom-nav at EVERY
   width — it was mobile-only, so on desktop/wide the nav sat on top of the composer and buried
   it (composer rendered at the very bottom, hidden behind the nav). (qid:540) */
body.dm-thread-active .bottom-nav { display: none; }

/* ── Profile (qid:389) ───────────────────────────────────────────────────── */
.auth-card.linking .auth-tabs,
.auth-card.linking #login-form,
.auth-card.linking #register-form,
.auth-card.linking #btn-techx-signin,
.auth-card.linking #techx-error { display: none !important; }
#techx-link-panel { display: none; }
/* !important is LOAD-BEARING here (qid:538, 2026-09-13). #techx-link-panel carries an inline
   style="display:none" in index.html, and an inline style beats a stylesheet rule regardless of
   specificity unless the rule is !important. The hide rules above all have it, so they won and the
   login form/tabs/TechX button correctly disappeared — but this show rule did not, so it lost to the
   inline style and the panel never appeared. The result was an auth card containing only its header
   and the "— OR —" divider with a void between them, which is what Chris hit the first time anyone
   ever completed the OIDC flow: the backend had done everything right and there was simply no UI. */
.auth-card.linking #techx-link-panel { display: block !important; }

.profile-page {
  flex: 1; overflow-y: auto; min-height: 0; width: 100%; max-width: 720px; margin: 0 auto;
  padding: 16px 20px calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 24px);
}
.profile-modal { width: min(480px, 96vw); display: flex; flex-direction: column; max-height: 88dvh; }
.profile-head { flex: 0 0 auto; }
.profile-top { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.profile-avatar { flex: 0 0 68px; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 28px; color: #041018;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-idn { min-width: 0; }
.profile-name { font-size: 19px; font-weight: 800; color: var(--text-primary); }
.profile-username { font-size: 13.5px; color: var(--text-secondary); }
.profile-bio { font-size: 14px; line-height: 1.5; color: var(--text-primary); margin: 0 2px 10px; white-space: pre-wrap; word-break: break-word; }
.profile-joined { font-size: 12px; color: var(--text-dim, var(--text-secondary)); margin: 0 2px 14px; display: flex; align-items: center; gap: 6px; }
.profile-stats { display: flex; gap: 8px; margin-bottom: 14px; }
.profile-stat { flex: 1; text-align: center; padding: 8px 4px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-color); }
.profile-stat-n { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.profile-stat-l { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.profile-actions { display: flex; gap: 10px; margin-bottom: 14px; }
.profile-actions .btn { flex: 1; }
.profile-follow.following { background: transparent; color: var(--text-primary); border: 1.5px solid rgba(255,255,255,0.5); }
.profile-msg { border: 1.5px solid var(--border-color); background: rgba(255,255,255,0.05); color: var(--text-primary); }
.profile-posts { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.profile-posts .dm-empty { grid-column: 1 / -1; }
.profile-cell { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #0c0c14; }
.profile-cell img, .profile-cell video { width: 100%; height: 100%; object-fit: cover; }
.profile-cell-play { position: absolute; bottom: 5px; right: 6px; font-size: 12px; color: #fff; text-shadow: 0 1px 4px #000; }
.profile-cell-text { display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center;
  background: radial-gradient(circle at 50% 40%, #17172c, #0a0a12); }
.profile-cell-text span { font-size: 12px; color: var(--text-primary); overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.feed-post-caption {
  font-size: 14px; opacity: 0.95; margin-top: 2px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  max-height: 4.6em; overflow: hidden;
}
.feed-rail-btn.liked .feed-rail-glyph { filter: none; }
.feed-rail-btn.liked .feed-rail-label { color: #ff3b5c; }

/* Chat input area */
.chat-input-area {
  padding: 8px 12px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.chat-input-buttons {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.chat-icon-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 16px;
  line-height: 1;
  transition: all var(--transition-fast);
}
.chat-icon-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--accent-primary);
}
.chat-input-area .input-field {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  min-width: 0;
}
.chat-send-btn {
  padding: 8px 12px;
  font-size: 12px;
  flex-shrink: 0;
}

/* Picker containers */
.chat-picker-container {
  position: relative;
}
.chat-picker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: min(65vh, 520px);
  display: flex;
  flex-direction: column;
  z-index: 50;
  box-shadow: var(--shadow-panel);
}
.chat-picker.hidden {
  display: none;
}
.picker-search {
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.picker-search .input-field {
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
}

/* Emoji grid */
.emoji-picker .picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
  max-height: min(57vh, 460px);
}
.emoji-btn {
  background: none;
  border: none;
  font-size: 22px;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--transition-fast);
  line-height: 1;
}
.emoji-btn:hover {
  background: var(--bg-card-hover);
  transform: scale(1.2);
}

/* GIF grid */
.gif-picker .picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
  max-height: min(57vh, 460px);
}
.gif-result {
  width: 100%;
  height: auto;
  border-radius: 4px;
  cursor: pointer;
  transition: transform var(--transition-fast);
  display: block;
}
.gif-result:hover {
  transform: scale(1.03);
  outline: 2px solid var(--accent-primary);
}
.gif-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  padding: 20px;
}
.picker-section-label {
  grid-column: 1 / -1;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding: 6px 2px 2px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 2px;
}
.gif-result-wrapper {
  position: relative;
}
.gif-fav-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.7);
  border: none;
  color: var(--accent-tertiary);
  font-size: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gif-result-wrapper:hover .gif-fav-remove {
  display: flex;
}
.gif-fav-save {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.7);
  border: none;
  color: var(--accent-warning);
  font-size: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all var(--transition-fast);
}
.gif-fav-save:hover {
  transform: scale(1.2);
}
.gif-result-wrapper:hover .gif-fav-save {
  display: flex;
}

/* Room Controls */
.room-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

[data-theme="cyberpunk"] .room-controls {
  border-top-color: rgba(var(--accent-primary-rgb), 0.15);
}

.control-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 18px;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 64px;
}
.control-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.control-btn .control-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.control-btn.active {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

[data-theme="cyberpunk"] .control-btn.active {
  box-shadow: var(--glow-sm);
  text-shadow: var(--glow-sm);
}

.control-btn.muted {
  border-color: var(--accent-tertiary);
  color: var(--accent-tertiary);
}
.control-btn-leave {
  background: transparent;
  border-color: var(--accent-tertiary);
  color: var(--accent-tertiary);
}
.control-btn-leave:hover {
  background: rgba(var(--accent-tertiary-rgb), 0.15);
  box-shadow: var(--glow-pink-sm);
}

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  font-size: 11px;
  color: var(--text-dim);
}
.footer-left {
  letter-spacing: 0.05em;
}
.footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   CREATE ROOM MODAL
   ============================================================ */
#create-room-modal .modal {
  max-width: 520px;
}

/* ============================================================
   SETTINGS MODAL
   ============================================================ */
.settings-modal {
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.settings-header h2 {
  margin: 0;
}
.settings-close-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 20px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.settings-close-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.settings-section {
  margin-bottom: 28px;
}
.settings-section:last-child {
  margin-bottom: 0;
}
.settings-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

/* Theme Picker */
.theme-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.theme-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--bg-card);
}
.theme-option:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.theme-option.active {
  border-color: var(--accent-primary);
}
[data-theme="cyberpunk"] .theme-option.active {
  box-shadow: var(--glow-sm);
}
[data-theme="default"] .theme-option.active {
  box-shadow: 0 0 0 1px var(--accent-primary), 0 4px 12px rgba(var(--accent-primary-rgb), 0.2);
}
.theme-check {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--accent-primary);
  color: #000;
  border-radius: 50%;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.theme-option.active .theme-check {
  display: flex;
}
.theme-preview {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.theme-preview-bar {
  padding: 6px 8px;
  display: flex;
  align-items: center;
}
.theme-preview-body {
  padding: 8px;
  display: flex;
  gap: 6px;
  min-height: 44px;
}
.theme-preview-card {
  flex: 1;
  min-height: 30px;
}
.theme-option-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.theme-option.active .theme-option-name {
  color: var(--accent-primary);
}

/* Settings Account Info */
.settings-account-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}
.settings-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}
.settings-account-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-username {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.settings-account-sub {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Profile Editor */
.profile-editor {
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}
.profile-avatar-area {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.profile-avatar-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.profile-avatar-wrapper .settings-avatar {
  width: 64px;
  height: 64px;
  font-size: 24px;
}
.settings-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.settings-avatar-img.hidden {
  display: none;
}
.profile-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-upload-btn {
  cursor: pointer;
}
.profile-editor .btn-primary {
  width: 100%;
  margin-top: 4px;
}

/* ============================================================
   MODERATION CONTEXT MENU
   ============================================================ */
.mod-menu {
  position: fixed;
  z-index: 2000;
  min-width: 180px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 6px 0;
  overflow: hidden;
}
.mod-menu.hidden { display: none; }
[data-theme="cyberpunk"] .mod-menu {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-sm), var(--shadow-panel);
}
.mod-menu-header {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-color);
}
.mod-menu-target {
  color: var(--accent-primary);
}
.mod-menu-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  font-size: 12px;
  font-family: var(--font-body);
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mod-menu-item:hover {
  background: var(--bg-card-hover);
  color: var(--accent-primary);
}
.mod-menu-danger {
  color: var(--accent-tertiary);
}
.mod-menu-danger:hover {
  background: rgba(var(--accent-tertiary-rgb), 0.1);
  color: var(--accent-tertiary);
}
.mod-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}
.mod-menu-duration {
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mod-menu-duration select {
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Video tile owner badge */
.video-tile-name.is-owner::after {
  content: ' \u2605';
  color: var(--accent-warning);
}
.owner-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: var(--radius);
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.4;
}
[data-theme="cyberpunk"] .owner-badge {
  background: rgba(var(--accent-tertiary-rgb), 0.2);
  color: var(--accent-tertiary);
  border: 1px solid rgba(var(--accent-tertiary-rgb), 0.4);
  text-shadow: 0 0 4px var(--accent-tertiary);
}
[data-theme="default"] .owner-badge {
  background: rgba(var(--accent-primary-rgb), 0.15);
  color: var(--accent-primary);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
}

/* Chat message owner badge */
.chat-msg-sender .owner-badge {
  font-size: 8px;
  padding: 0 4px;
}

/* Admin panel button in topbar */
.topbar-admin-btn {
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(var(--accent-tertiary-rgb), 0.1);
  border: 1px solid rgba(var(--accent-tertiary-rgb), 0.3);
  color: var(--accent-tertiary);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: all var(--transition-fast);
}
.topbar-admin-btn:hover {
  background: rgba(var(--accent-tertiary-rgb), 0.2);
  border-color: var(--accent-tertiary);
}

/* Admin panel overlay */
.admin-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-panel-overlay.hidden { display: none; }
.admin-panel {
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
[data-theme="cyberpunk"] .admin-panel {
  border-color: var(--accent-tertiary);
  box-shadow: var(--glow-pink-sm), var(--shadow-panel);
}
.admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.admin-panel-header h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}
.admin-panel-close {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 18px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.admin-panel-close:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.admin-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}
.admin-panel-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
}
.admin-panel-tab:hover {
  color: var(--text-secondary);
  background: var(--bg-card);
}
.admin-panel-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}
.admin-panel-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.admin-list-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--bg-card);
  transition: background var(--transition-fast);
}
.admin-list-item:hover {
  background: var(--bg-card-hover);
}
.admin-list-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-list-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.admin-list-item-detail {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-list-item-actions {
  display: flex;
  gap: 6px;
}
.admin-action-btn {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--transition-fast);
}
.admin-action-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.admin-action-btn.danger {
  color: var(--accent-tertiary);
  border-color: rgba(var(--accent-tertiary-rgb), 0.3);
}
.admin-action-btn.danger:hover {
  background: rgba(var(--accent-tertiary-rgb), 0.1);
}
.admin-action-btn.success {
  color: var(--accent-success);
  border-color: rgba(var(--accent-secondary-rgb), 0.3);
}
.admin-action-btn.success:hover {
  background: rgba(var(--accent-secondary-rgb), 0.1);
}

/* Notification sound toggle in settings */
.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}
.settings-toggle:last-child {
  border-bottom: none;
}
.settings-toggle-label {
  font-size: 12px;
  color: var(--text-primary);
}
.settings-toggle-desc {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}
/* Device pickers in Settings (qid:707-C) — stacked label + full-width select. */
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}
.settings-field:last-child { border-bottom: none; }
.settings-field-label {
  font-size: 12px;
  color: var(--text-primary);
}
.settings-select { width: 100%; }
.settings-field-note {
  font-size: 10px;
  color: var(--text-dim);
  margin: 4px 0 0;
}
/* ───────────────────────────────────────────────────────────────────────────────────────────
   THEMED-COMPONENT CONVENTION (qid:707-C). New UI must theme across all 3 themes with NO per-theme
   duplication. Two rules:
     1. Colors/shape come ONLY from the tokens in theme.css — var(--bg-panel|card|card-hover|input),
        var(--border-color|hover), var(--text-primary|secondary|dim), var(--accent-primary[-rgb]),
        var(--radius|radius-lg), var(--shadow-card|panel), var(--transition-fast), var(--font-body).
        Never hardcode rgba()/#hex/px-radius — that matches no theme (cyberpunk↔default is pure tokens).
     2. Reuse a CANONICAL class so the win98 bevel layer catches it for free: popovers/menus get
        `context-menu`; buttons `.btn`; fields `.input-field`; headers `.section-title`. (theme.css
        overrides win98 off those generic names — no win98 block needed per component.)
   A component built this way needs ZERO theme-specific CSS. Match .mod-menu for menu form.
   ─────────────────────────────────────────────────────────────────────────────────────────── */
/* Settings: left tab rail + scrolling content pane. Sidebar on desktop, top strip on phone. */
.settings-tabrow { display: flex; gap: 14px; align-items: stretch; min-height: 0; }
.settings-tabs { display: flex; flex-direction: column; gap: 4px; flex: 0 0 158px; }
.settings-tab {
  text-align: left; padding: 10px 12px; font-size: 13px; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--text-dim); border: 1px solid transparent;
  border-radius: var(--radius); font-family: var(--font-body);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.settings-tab:hover { color: var(--text-primary); background: var(--bg-card); }
.settings-tab.active { color: var(--accent-primary); background: var(--bg-card-hover); border-color: var(--border-color); }
.settings-body { flex: 1 1 auto; min-width: 0; overflow-y: auto; max-height: 66vh; padding-right: 4px; }
@media (max-width: 640px) {
  .settings-tabrow { flex-direction: column; gap: 8px; }
  .settings-tabs { flex-direction: row; flex: 0 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .settings-body { max-height: none; }
}
/* Perf: Settings opens over the animated feed and (in-room) over LIVE VIDEO. The overlay's
   backdrop-filter blur re-composites the moving backdrop every frame and makes the whole modal feel
   janky. The overlay background is already near-opaque, so drop the blur here — same look, smooth. */
#settings-modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.settings-body { will-change: scroll-position; }
.toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 11px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: all var(--transition-fast);
}
.toggle-switch input:checked + .toggle-slider {
  background: rgba(var(--accent-primary-rgb), 0.2);
  border-color: var(--accent-primary);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: var(--accent-primary);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .lobby-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .lobby-toolbar {
    flex-direction: column;
  }
  .search-box {
    width: 100%;
  }
  .room-grid {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
  }

  /* Room view: chat as overlay */
  .room-main {
    position: relative;
  }
  .chat-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: var(--osk-inset, 0);
    width: 100%;
    max-width: 340px;
    z-index: 50;
    transform: translateX(100%);
    transition: transform var(--transition-med);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
  }
  .chat-panel.open {
    transform: translateX(0);
  }
  .chat-toggle-btn {
    display: block;
  }

  /* Portrait: collapse the media controls into a dropdown so the top bar fits */
  #ctrl-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .topbar-ctrl-group {
    position: absolute;
    top: 100%;
    right: 8px;
    margin-top: 6px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 168px;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    z-index: 60;
    display: none;
  }
  .topbar-ctrl-group.open {
    display: flex;
  }
  /* status bar at the top of the popout (holds the admin pill) */
  .topbar-ctrl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
  }
  .ctrl-header-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
  }
  .ctrl-header-status #ctrl-header-count { color: var(--accent-primary); }
  .ctrl-header-title {
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .topbar-ctrl-header .topbar-admin-btn { margin: 0; }
  .topbar-ctrl-group .topbar-ctrl {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    font-size: 20px;
    padding: 10px 12px;
  }
  .topbar-ctrl-group .topbar-ctrl::after {
    content: attr(data-label);
    font-size: 14px;
    font-weight: 500;
  }

  /* Mobile grid sizing is also owned by room.js updateGridLayout() (aspect-fit picks
     fewer columns automatically on a narrow container) — no %-width overrides here. */

  .room-controls {
    gap: 8px;
    padding: 10px 12px;
  }
  .control-btn {
    min-width: 48px;
    padding: 8px 10px;
  }
  .control-btn .control-label {
    display: none;
  }
}

@media (max-width: 480px) {
  .auth-card {
    border-radius: 0;
    max-width: 100%;
    min-height: 100dvh;
    justify-content: center;
  }
  .auth-forms {
    padding: 24px 20px 32px;
  }
  .lobby-brand h1 {
    font-size: 16px;
  }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.room-card {
  animation: fadeIn 0.3s ease forwards;
}

/* ============================================================
   USER PROFILE MODAL
   ============================================================ */
.profile-modal {
  max-width: 360px;
  padding: 28px;
  text-align: center;
}
.profile-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.profile-modal-header h2 {
  margin: 0;
  font-size: 16px;
}
.profile-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.profile-modal-avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 8px;
}
.profile-modal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-modal-display-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.profile-modal-username {
  font-size: 13px;
  color: var(--text-dim);
}
.profile-modal-badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.profile-modal-member-since {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
}
[data-theme="cyberpunk"] .profile-modal {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-sm), var(--shadow-panel);
}
[data-theme="cyberpunk"] .profile-modal-avatar {
  border: 1px solid var(--accent-primary);
  box-shadow: var(--glow-sm);
  border-radius: 2px;
}
[data-theme="cyberpunk"] .profile-modal-display-name {
  text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.4);
}
[data-theme="cyberpunk"] .profile-modal-username {
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}
[data-theme="cyberpunk"] .profile-modal-member-since {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Profile modal mod actions */
.profile-modal-actions {
  margin-top: 16px;
}
.profile-modal-actions.hidden {
  display: none;
}
.profile-modal-mod-divider {
  height: 1px;
  background: var(--border-color);
  margin-bottom: 12px;
}
.profile-modal-mod-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.profile-modal-mod-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.profile-mod-danger {
  color: var(--accent-danger) !important;
  border-color: var(--accent-danger) !important;
}
.profile-mod-danger:hover {
  background: rgba(255, 51, 51, 0.15) !important;
}

/* Make chat sender names and admin list names clickable for profiles */
.chat-msg-sender {
  cursor: pointer;
}
.chat-msg-sender:hover {
  text-decoration: underline;
}
.admin-list-item-name.profile-clickable {
  cursor: pointer;
}
.admin-list-item-name.profile-clickable:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

@keyframes glitch-flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.8; }
  97% { opacity: 1; }
  98% { opacity: 0.6; }
  99% { opacity: 1; }
}

[data-theme="cyberpunk"] .lobby-brand h1 {
  animation: glitch-flicker 8s infinite;
}

/* ============================================================
   Whiteboard Panel
   ============================================================ */

.whiteboard-panel {
  width: 480px;
  min-width: 360px;
  display: none;
  flex-direction: column;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-color);
  flex-shrink: 0;
}

.whiteboard-panel.open {
  display: flex;
}

[data-theme="cyberpunk"] .whiteboard-panel {
  border-left-color: rgba(var(--accent-primary-rgb), 0.2);
}

.wb-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.wb-close-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
}

.wb-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.wb-tool-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 16px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1;
}

.wb-tool-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

.wb-tool-btn.active {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

[data-theme="cyberpunk"] .wb-tool-btn.active {
  box-shadow: var(--glow-sm);
}

.wb-tool-danger {
  color: var(--accent-danger, #f33);
}

.wb-tool-danger:hover {
  border-color: var(--accent-danger, #f33);
}

.wb-color-input {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
  padding: 2px;
}

.wb-size-select {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 12px;
  padding: 6px 8px;
  cursor: pointer;
  font-family: var(--font-body);
}

.wb-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #111118;
}

[data-theme="default"] .wb-canvas-wrap {
  background: #1a1726;
}

.wb-canvas-wrap canvas {
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* --- Mobile responsive --- */
@media (max-width: 768px) {
  .whiteboard-panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    z-index: 51;
    transform: translateX(-100%);
    transition: transform var(--transition-med);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
  .whiteboard-panel.open {
    display: flex;
    transform: translateX(0);
  }
  .wb-close-btn {
    display: block;
  }
}

/* ============================================================
   NOTIFICATIONS — the feed-topbar bell + its badge, and the inbox view (qid:602).
   Themed entirely through existing tokens so default + cyberpunk both work.
   ============================================================ */
.feed-notif-btn {
  position: relative; flex: 0 0 auto; margin-left: auto;
  background: none; border: none; cursor: pointer; padding: 4px 6px;
  color: rgba(255, 255, 255, 0.85); line-height: 1; border-radius: 10px;
}
.feed-notif-btn:hover { background: rgba(255, 255, 255, 0.08); }
.feed-notif-btn:active { transform: scale(0.92); }
.feed-notif-ic { font-size: 21px; }
.notif-badge {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; background: var(--accent-primary, #e0245e);
  color: #fff; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg-primary, #0c0c14);
}

/* the inbox list — header is the shared .dm-topbar (position:relative), list scrolls under it */
.notif-list {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  padding: 4px 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.notif-row {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px 12px 18px; background: none; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer; text-align: left; color: inherit;
}
.notif-row:active { background: rgba(255, 255, 255, 0.05); }
.notif-row.unread { background: rgba(var(--accent-primary-rgb), 0.08); }
.notif-row.unread::before {
  content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-primary, #e0245e);
}
.notif-av {
  position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-secondary, #1a1a26); display: flex; align-items: center; justify-content: center;
  color: var(--text-primary, #fff); font-weight: 800; font-size: 18px; overflow: visible;
}
.notif-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.notif-av-kind {
  position: absolute; bottom: -3px; right: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-primary, #e0245e); color: #fff; font-size: 11px; line-height: 20px;
  text-align: center; box-shadow: 0 0 0 2px var(--bg-primary, #0c0c14);
}
.notif-mid { flex: 1; min-width: 0; }
.notif-body { font-size: 14px; color: var(--text-primary, #fff); line-height: 1.35; }
.notif-time { font-size: 12px; color: var(--text-secondary, #8fa4be); margin-top: 2px; }
.notif-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--text-secondary, #8fa4be); font-size: 15px; padding: 40px;
}
.notif-empty-icon { font-size: 40px; opacity: 0.6; }

/* Profile game record (qid:653 Phase 3 surface) */
.profile-games { margin: 14px 0 4px; padding: 14px; border-radius: 14px; background: rgba(var(--accent-primary-rgb), 0.05); border: 1px solid var(--border-color); }
.profile-games-title { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
.profile-games-tot { display: flex; gap: 8px; margin-bottom: 10px; }
.profile-gstat { flex: 1; text-align: center; padding: 8px 4px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-color); }
.profile-games-list { display: flex; flex-direction: column; gap: 6px; }
.profile-games-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,0.03); }
.profile-games-row .pg-icon { font-size: 16px; flex: 0 0 auto; }
.profile-games-row .pg-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.profile-games-row .pg-rec { font-size: 13px; font-weight: 800; color: var(--accent-primary); }
.profile-games-row .pg-played { font-size: 11px; color: var(--text-secondary); min-width: 70px; text-align: right; }

/* ── qid:654 THEATER — media co-watch picker + now-playing (scoped) ──────── */
.theater-modes { display: flex; gap: 6px; margin: 0 0 14px; }
.theater-mode-btn {
  flex: 1; padding: 9px 8px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color);
  color: var(--text-secondary); font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; transition: background .15s, color .15s, border-color .15s;
}
.theater-mode-btn:hover { color: var(--text-primary); border-color: var(--accent-primary); }
.theater-mode-btn.active {
  background: rgba(var(--accent-primary-rgb), 0.16);
  border-color: var(--accent-primary); color: var(--accent-primary);
}
.theater-panel { margin-bottom: 4px; }
.theater-preview {
  margin-top: 10px; border-radius: 12px; overflow: hidden;
  border: 1px dashed var(--border-color); display: none;
}
.theater-preview.has-preview { display: block; border-style: solid; border-color: var(--accent-primary); }
.theater-preview-thumb { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.theater-preview-cap {
  padding: 7px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent-primary); background: rgba(var(--accent-primary-rgb), 0.08);
  text-transform: uppercase;
}
/* now-playing bar on the synced video tile — TOP bar so it never covers YT's bottom controls */
.room-screen-video .room-screen-label { display: none; }   /* the now-playing badge replaces the corner tag */
.theater-nowplaying {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)); font-size: 12px;
}
.nowplaying-art {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 6px; object-fit: cover;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); background: rgba(255, 255, 255, 0.06);
}

/* ── Alternative TV (qid:707) — in-house cable guide on public-domain Internet Archive video ── */
.alttv-video {
  width: 100%; height: 100%; display: block; object-fit: contain; background: #000;
}
.alttv-ch {   /* channel badge in the now-playing bar */
  background: color-mix(in srgb, var(--accent-primary) 30%, #000);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 55%, transparent);
  color: var(--text-primary); border-radius: 5px; padding: 2px 7px; white-space: nowrap;
  font-weight: 700; letter-spacing: .04em;
}
.alttv-chrome {   /* owner CH ▲/▼ · next · guide — the only pointer-events surface in the bar */
  margin-left: auto; display: flex; gap: 6px; pointer-events: auto;
}
.alttv-btn {
  background: rgba(14, 20, 32, .82); border: 1px solid rgba(255, 255, 255, .26); color: var(--text-primary);
  border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap;
}
.alttv-btn:hover { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 22%, rgba(14,20,32,.82)); }

/* The guide inside the theater modal — a channel lineup you flip through, cable-style. */
.alttv-blurb { font-size: 13px; color: var(--text-secondary, #9a9ab0); line-height: 1.45; margin: 0 0 12px; }
.alttv-guide { display: flex; flex-direction: column; gap: 6px; max-height: 48vh; overflow-y: auto; }
.alttv-guide-loading { color: var(--text-secondary, #9a9ab0); font-size: 13px; padding: 14px 4px; text-align: center; }
.alttv-guide-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .10);
  color: var(--text-primary); font: inherit; transition: border-color .12s, background .12s, transform .06s;
}
.alttv-guide-row:hover:not(:disabled) {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, rgba(255,255,255,.04));
}
.alttv-guide-row:active:not(:disabled) { transform: translateY(1px); }
.alttv-guide-row:disabled { opacity: .6; cursor: default; }
.alttv-guide-num {
  flex: 0 0 auto; min-width: 46px; font-weight: 800; letter-spacing: .03em; font-variant-numeric: tabular-nums;
  color: var(--accent-primary); font-size: 13px;
}
.alttv-guide-icon { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.alttv-guide-name { flex: 1 1 auto; font-weight: 600; }
.alttv-guide-go {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--text-secondary, #9a9ab0);
}
.alttv-guide-row:hover:not(:disabled) .alttv-guide-go { color: var(--accent-primary); }

/* qid:654 THEATER JUICE — live-stage glow ring + synced floating reactions (overlay-only) */
.theater-glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ambient, var(--accent-primary)) 55%, transparent),
              inset 0 0 22px color-mix(in srgb, var(--ambient, var(--accent-primary)) 28%, transparent);
  animation: theater-glow-pulse 3.2s ease-in-out infinite;
  transition: box-shadow 0.8s ease;
}
/* qid:654 — ambient-light bleed: the video's dominant colour (sampled from the thumbnail, or a
   per-id hue fallback) blooms inward from the tile edges. Edges only, center stays clean. */
.theater-ambient {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(130% 70% at 50% -8%, var(--ambient, var(--accent-primary)) 0%, transparent 52%),
    radial-gradient(130% 70% at 50% 108%, var(--ambient, var(--accent-primary)) 0%, transparent 52%),
    radial-gradient(70% 130% at -8% 50%, var(--ambient, var(--accent-primary)) 0%, transparent 52%),
    radial-gradient(70% 130% at 108% 50%, var(--ambient, var(--accent-primary)) 0%, transparent 52%);
  opacity: 0.32; animation: theater-ambient-pulse 4.5s ease-in-out infinite;
  transition: background 0.8s ease;
}
@keyframes theater-ambient-pulse {
  0%, 100% { opacity: 0.24; }
  50%      { opacity: 0.42; }
}
@keyframes theater-glow-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9; }
}
.theater-reaction-layer {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden;
}
.floating-reaction {
  position: absolute; bottom: 58px; font-size: 23px; line-height: 1; will-change: transform, opacity;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); animation: reaction-float 2.4s ease-out forwards;
}
@keyframes reaction-float {
  0%   { transform: translateY(0) scale(0.4); opacity: 0; }
  12%  { transform: translateY(-10px) scale(1.15); opacity: 1; }
  28%  { transform: translateY(-40px) scale(1); opacity: 1; }
  100% { transform: translateY(-220px) scale(0.85); opacity: 0; }
}
.theater-reactions {
  position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; gap: 2px; padding: 4px 6px; pointer-events: auto;
  background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px; backdrop-filter: blur(6px);
  opacity: 0.55; transition: opacity 0.18s ease;
}
.room-screen-inner.room-screen-video:hover .theater-reactions,
.room-screen-inner.room-screen-soundcloud:hover .theater-reactions { opacity: 1; }
.theater-react-btn {
  border: 0; background: transparent; cursor: pointer; font-size: 19px; line-height: 1;
  padding: 3px 5px; border-radius: 50%; transition: transform 0.12s ease, background 0.12s ease;
}
.theater-react-btn:hover { transform: scale(1.3); background: rgba(255, 255, 255, 0.12); }
.theater-react-btn:active { transform: scale(0.9); }
@media (max-width: 640px) {
  .theater-reactions { opacity: 0.8; bottom: 46px; }
  .floating-reaction { font-size: 24px; }
}
/* qid:654 — synced playback progress for FOLLOWERS (their YT controls are hidden); reads the
   already-synced local player, so it's a pure local readout — no new sync traffic. */
.theater-progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 4px; pointer-events: none;
  background: rgba(255, 255, 255, 0.14);
}
.theater-progress-fill {
  height: 100%; width: 0; background: var(--accent-primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary) 70%, transparent);
  transition: width 0.5s linear;
}
.theater-progress-time {
  position: absolute; right: 8px; bottom: 10px; z-index: 5; pointer-events: none;
  font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  opacity: 0; transition: opacity 0.18s ease;
}
.room-screen-inner.room-screen-video:hover .theater-progress-time,
.room-screen-inner.room-screen-soundcloud:hover .theater-progress-time { opacity: 0.92; }

/* qid:654 — "cast landed" burst: a one-shot shockwave + NOW PLAYING card when a fresh media drops.
   Fires locally when each client renders the new (already-synced) cast, so everyone sees it at once. */
.theater-burst {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.theater-burst-ring {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; border: 3px solid var(--accent-primary);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-primary) 55%, transparent);
  animation: theater-burst-ring 0.95s ease-out forwards;
}
@keyframes theater-burst-ring {
  0%   { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(13); opacity: 0; }
}
.theater-burst-badge {
  position: relative; padding: 9px 20px; border-radius: 999px; white-space: nowrap;
  background: rgba(0, 0, 0, 0.62); color: #fff; font-weight: 800; letter-spacing: 0.1em;
  font-size: clamp(13px, 2vw, 16px); text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 60%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent-primary) 45%, transparent);
  animation: theater-burst-badge 1.5s ease-out forwards;
}
@keyframes theater-burst-badge {
  0%   { transform: scale(0.6); opacity: 0; }
  14%  { transform: scale(1.1); opacity: 1; }
  30%  { transform: scale(1); opacity: 1; }
  78%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.03); opacity: 0; }
}

/* qid:654 — reaction COMBO meter: rapid reactions (anyone in the room) stack a hype counter with a
   draining window; escalating tiers; decays when the hype stops. Counts in spawnReaction, so local +
   received reactions build the SAME number on every client. */
.theater-combo {
  position: absolute; top: 46px; right: 12px; z-index: 8; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.theater-combo.active { opacity: 1; transform: none; }
.theater-combo-count {
  font-weight: 900; letter-spacing: 0.03em; line-height: 1; color: #fff; font-size: 22px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.theater-combo-bar {
  width: 92px; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
}
.theater-combo-fill {
  height: 100%; width: 100%; transform-origin: left;
  background: var(--combo-color, var(--accent-primary));
}
.theater-combo-fill.draining { animation: combo-drain 2.6s linear forwards; }
@keyframes combo-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.combo-pop { animation: combo-pop 0.22s ease; }
@keyframes combo-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.theater-combo.t1 { --combo-color: var(--accent-primary); }
.theater-combo.t2 { --combo-color: #ff9f43; }
.theater-combo.t2 .theater-combo-count { color: #ffcf99; font-size: 24px; }
.theater-combo.t3 { --combo-color: #ff5e7e; }
.theater-combo.t3 .theater-combo-count { color: #ff9db1; font-size: 27px; }
.theater-combo.t4 { --combo-color: #ffd93b; }
.theater-combo.t4 .theater-combo-count {
  color: #ffe876; font-size: 30px;
  text-shadow: 0 0 14px rgba(255, 217, 59, 0.6), 0 2px 8px rgba(0, 0, 0, 0.7);
}
.nowplaying-badge {
  flex: 0 0 auto; color: var(--accent-primary); font-weight: 800; letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); animation: nowplaying-pulse 1.6s ease-in-out infinite;
}
@keyframes nowplaying-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.nowplaying-title {
  flex: 1; min-width: 0; color: #fff; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.nowplaying-host {
  flex: 0 0 auto; color: rgba(255, 255, 255, 0.72); font-size: 11px; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
@media (max-width: 640px) {
  .nowplaying-host { display: none; }
  .theater-mode-btn { font-size: 11px; padding: 8px 5px; }
}

/* qid:654 v2a — in-app YouTube search menu (scoped; reuses existing theme tokens, no new chrome) */
.yt-results { display: none; max-height: 280px; overflow-y: auto; margin: 2px 0 10px; border-radius: 10px; }
.yt-results.has-results { display: block; border: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.02); }
.yt-results.searching { opacity: 0.55; }
.yt-result {
  display: flex; gap: 10px; width: 100%; text-align: left; align-items: center;
  padding: 7px 8px; background: none; border: none; border-bottom: 1px solid var(--border-color);
  cursor: pointer; color: var(--text-primary); font: inherit;
}
.yt-result:last-child { border-bottom: none; }
.yt-result:hover, .yt-result:focus-visible { background: rgba(var(--accent-primary-rgb), 0.12); outline: none; }
.yt-result-thumbwrap { position: relative; flex: 0 0 auto; width: 96px; height: 54px; border-radius: 6px; overflow: hidden; background: #000; }
.yt-result-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-result-dur {
  position: absolute; right: 3px; bottom: 3px; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 1px 4px; border-radius: 3px; color: #fff; background: rgba(0, 0, 0, 0.8);
}
.yt-result-meta { flex: 1; min-width: 0; }
.yt-result-title {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-result-author { font-size: 11px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* qid:654 v2b — SoundCloud synced player tile (Widget iframe fills the stage tile) */
.room-screen-inner.room-screen-soundcloud { background: #121212; }
.sc-player-host { width: 100%; height: 100%; border: 0; display: block; }