/* ============================================================
   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; } /* toggle only shows on mobile */
/* 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);
}

.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 */
.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; right: 0; bottom: 0; width: 20px; height: 20px;
  cursor: nwse-resize; 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%);
}
/* data-at = the PiP's free corner (set by placePip): the grip moves there and the stripes mirror. */
.vox-pip-grip[data-at="bl"] { right: auto; left: 0; bottom: 0; top: auto; cursor: nesw-resize; transform: scaleX(-1); }
.vox-pip-grip[data-at="tr"] { right: 0; left: auto; top: 0; bottom: auto; cursor: nesw-resize; transform: scaleY(-1); }
.vox-pip-grip[data-at="tl"] { right: auto; left: 0; top: 0; bottom: auto; 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. */
.vox-tile:hover .vox-tile-hover,
.vox-tile.vox-hover-lock .vox-tile-hover { opacity: 1; }
@media (hover: none) {
  .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); }
.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 {
  display: flex;
  flex-direction: column;
  align-items: 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 */
.video-tile-placeholder.has-cam-bg {
  position: relative;
  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;
}
.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;
  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-composer { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.dm-input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 22px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-color); color: var(--text-primary); font-size: 14.5px; outline: none; }
.dm-input:focus { border-color: var(--accent-primary); }
#dm-send { flex: 0 0 auto; border-radius: 22px; padding-left: 18px; padding-right: 18px; }

/* ── 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. */
.dm-topbar { 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-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 */
}

/* ── 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: translateY(-8px);
  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: translateY(-8px) 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) */
@media (max-width: 720px) { 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-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;
}
.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;
  }
}