/* ========= WatchMates — A Wonderverse Original ========= */

@font-face {
  font-family: 'Arad';
  src: url('/fonts/Arad-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Arad';
  src: url('/fonts/Arad-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Arad';
  src: url('/fonts/Arad-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Arad';
  src: url('/fonts/Arad-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Arad';
  src: url('/fonts/Arad-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Arad';
  src: url('/fonts/Arad-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

:root {
  --bg: #08080d;
  --bg-elevated: #0f0f17;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f2f2f7;
  --text-dim: #9a9aab;
  --text-faint: #62626f;
  --accent: #8b5cf6;
  --accent-2: #d946ef;
  --accent-glow: rgba(139, 92, 246, 0.35);
  --danger: #f43f5e;
  --ok: #34d399;
  --radius: 14px;
  --radius-sm: 10px;
  --header-h: 68px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  min-height: 100%;
  min-height: 100dvh;
  font-family: 'Arad', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 400px at 85% -10%, rgba(139, 92, 246, 0.16), transparent 70%),
    radial-gradient(500px 350px at 10% 110%, rgba(217, 70, 239, 0.10), transparent 70%);
  background-size: 200% 200%;
  animation: auroraShift 18s ease-in-out infinite;
  z-index: 0;
}
@keyframes auroraShift {
  0%, 100% { background-position: 0% 0%, 100% 100%; }
  50% { background-position: 100% 30%, 0% 70%; }
}

main, header, footer { position: relative; z-index: 1; }

::selection { background: var(--accent); color: #fff; }

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body::before { animation: none; }
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  padding-top: calc(14px + var(--sat));
  padding-left: calc(24px + var(--sal));
  padding-right: calc(24px + var(--sar));
  border-bottom: 1px solid var(--border);
  background: rgba(8, 8, 13, 0.75);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Brand goes to the visual left, action buttons (dashboard/logout) go to
   the visual right — flipped from the RTL default via flex `order`.
   The header row itself never wraps (flex-wrap: nowrap above), so the
   logo/title can never get pushed down to a second line — only
   .header-actions (the narrower, less important side) is allowed to
   wrap its own buttons onto a second line when it runs out of room. */
.brand { order: 2; flex-shrink: 0; }
.header-actions { order: 1; }

.brand-text { order: 1; }
.brand img.logo,
.brand .logo-fallback { order: 2; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}

.brand img.logo, .brand .logo-fallback {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand .logo-fallback {
  display: none;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  font-family: Georgia, serif;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-name { font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-tag {
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.brand-tag:hover { color: var(--text); text-decoration: underline; }

.header-actions {
  display: flex;
  align-items: center;
  /* This box already spans from the true right screen edge (order:1 in
     the RTL main axis, see .brand/.header-actions order comment above)
     over to the logo. "flex-end" is the main-axis END, which under RTL
     is the LEFT side (toward the logo) — not the screen's right edge —
     so the buttons were hugging the logo instead of sitting flush right.
     "flex-start" is the RTL main-axis START (the true right edge). */
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.header-user {
  color: var(--text-dim);
  font-size: 13.5px;
  margin-inline-end: 4px;
  max-width: 34vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  /* The header row no longer wraps as a whole (see .site-header), so on
     narrow phones give the actions side less non-essential width to ask
     for: hide the username text (still visible inside the dashboard
     greeting) and tighten the gap, instead of letting the logo/title
     get squeezed or pushed onto a second line. */
  .header-user { display: none; }
  .header-actions { gap: 6px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s;
  user-select: none;
  white-space: nowrap;
  min-height: 40px;
  touch-action: manipulation;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 22px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 6px 30px var(--accent-glow); filter: brightness(1.08); }
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

.btn-ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.btn-danger {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.35);
  color: #fb7185;
}
.btn-danger:hover { background: rgba(244, 63, 94, 0.2); }

.btn-sm { padding: 7px 14px; font-size: 13px; min-height: 34px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Hero (landing) ---------- */
.hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 96px 24px 64px;
  text-align: center;
}

.hero-badge {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.hero-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: badgeShimmer 3.5s ease-in-out infinite;
}
@keyframes badgeShimmer {
  0% { left: -60%; }
  60%, 100% { left: 140%; }
}

.hero h1 {
  font-size: clamp(28px, 8vw, 58px);
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 20px;
  word-break: break-word;
}

.hero h1 .gradient {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  font-size: clamp(14px, 3.6vw, 18px);
  color: var(--text-dim);
  line-height: 2;
  max-width: 620px;
  margin: 0 auto 40px;
}

.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { flex: 1 1 180px; max-width: 260px; }

/* ---------- Stats bar (landing) ---------- */
.stats-bar {
  max-width: 720px;
  margin: 0 auto 12px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  text-align: center;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}
.stat-num {
  display: block;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 800;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-label { font-size: clamp(10.5px, 2.6vw, 12px); color: var(--text-dim); }

.features {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 24px 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: right;
  transition: border-color 0.2s, transform 0.2s;
}
.feature-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.feature-card .icon { font-size: 26px; margin-bottom: 14px; }
.feature-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.feature-card p { font-size: 13.5px; color: var(--text-dim); line-height: 1.9; }

/* ---------- How it works ---------- */
.how-it-works {
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 24px 96px;
}
.section-title.center { text-align: center; margin-bottom: 30px; font-size: clamp(18px, 4.5vw, 22px); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
}

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 14px;
}
.step h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 13px; color: var(--text-dim); line-height: 1.8; }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 26px 20px 34px;
  padding-bottom: calc(34px + var(--sab));
  color: var(--text-faint);
  font-size: 12.5px;
  border-top: 1px solid var(--border);
}

/* ---------- Auth ---------- */
.auth-wrap {
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  display: grid;
  place-items: center;
  padding: 40px 20px;
  padding-bottom: calc(40px + var(--sab));
}

.card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.card h2 { font-size: clamp(19px, 5vw, 22px); font-weight: 800; margin-bottom: 6px; text-align: center; }
.card .sub { color: var(--text-dim); font-size: 13.5px; text-align: center; margin-bottom: 28px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.field .hint { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 6px; line-height: 1.7; }

input[type='text'], input[type='password'], input[type='url'] {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 44px;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); }
input::placeholder { color: var(--text-faint); }

.form-error {
  display: none;
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: #fda4af;
  font-size: 13px;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 18px;
  line-height: 1.8;
}
.form-error.show { display: block; }

.auth-switch { text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--text-dim); }
.auth-switch a { color: #c4b5fd; text-decoration: none; font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

.w-full { width: 100%; }

/* ---------- Dashboard ---------- */
.dash {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  padding-bottom: calc(80px + var(--sab));
}

.dash h1 { font-size: clamp(21px, 5.5vw, 26px); font-weight: 800; margin-bottom: 6px; }
.dash .sub { color: var(--text-dim); font-size: 14px; margin-bottom: 36px; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 40px; }
@media (max-width: 640px) { .dash-grid { grid-template-columns: 1fr; } }

.action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  min-width: 0;
}
.action-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.action-card p { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; line-height: 1.8; }
.join-row { display: flex; gap: 10px; }
.join-row input { flex: 1; direction: ltr; text-align: center; letter-spacing: 0.06em; min-width: 0; }
@media (max-width: 380px) {
  .join-row { flex-direction: column; }
  .join-row .btn { width: 100%; }
}

.section-title { font-size: 17px; font-weight: 700; margin-bottom: 16px; }

.room-list { display: flex; flex-direction: column; gap: 12px; }

.room-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: border-color 0.15s, background 0.15s;
  flex-wrap: wrap;
}
.room-item:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.room-item .info { min-width: 0; flex: 1 1 140px; }
.room-item .name { font-weight: 700; font-size: 15px; margin-bottom: 4px; overflow-wrap: anywhere; }
.room-item .rid {
  font-size: 12.5px;
  color: var(--text-dim);
  direction: ltr;
  display: inline-block;
  letter-spacing: 0.05em;
}
.room-item .actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 420px) {
  .room-item { padding: 14px; }
  .room-item .actions { width: 100%; }
  .room-item .actions .btn { flex: 1 1 auto; }
}

.empty {
  text-align: center;
  color: var(--text-faint);
  padding: 44px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 2;
}

/* ---------- Dashboard stats ---------- */
.dash-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.dash-stats .stat { flex: 1; min-width: 160px; }

/* ---------- Room ---------- */
.room-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  height: calc(100vh - 67px);
  height: calc(100dvh - 67px);
  overflow: hidden;
}
@media (max-width: 900px) {
  .room-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 67px);
    min-height: calc(100dvh - 67px);
  }
  .room-layout .stage { flex: 0 0 auto; }
  .room-layout .chat {
    flex: 1 1 420px;
    min-height: 380px;
  }
}

.stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  gap: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 560px) {
  .stage { padding: 12px; gap: 12px; }
}

.room-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.room-title { min-width: 0; }
.room-title h1 { font-size: clamp(16px, 4.5vw, 18px); font-weight: 800; overflow-wrap: anywhere; }
.room-title .rid {
  font-size: 12px;
  color: var(--text-dim);
  direction: ltr;
  display: inline-block;
  letter-spacing: 0.06em;
}
.room-topbar .controls { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .room-topbar .controls {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .room-topbar .controls .btn,
  .room-topbar .controls .privacy-toggle {
    width: 100%;
  }
}
@media (max-width: 340px) {
  .room-topbar .controls { grid-template-columns: 1fr; }
}

/* ---------- Remove-video row (above the video, not overlapping it) ---------- */
.player-actions-row {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.player-actions-hint {
  font-size: 12.5px;
  color: var(--text-dim);
}
.player-actions-row .player-remove-btn { margin-inline-start: 0; }

.player-box {
  position: relative;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .player-box { max-height: 42vh; max-height: 42dvh; }
}

.player-box video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; object-position: center; }

/* ---------- Fullscreen fix (class-based; see room.js syncFullscreenClass +
   moveToBodyForFullscreen). If this still looks broken after a hard
   refresh, it's almost certainly the browser serving a CACHED copy of
   this file — bump the ?v= query string on the <link> tag. ---------- */
.player-box.is-fullscreen,
.player-box:fullscreen,
.player-box:-webkit-full-screen,
.player-box:-moz-full-screen,
.player-box:-ms-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  aspect-ratio: unset !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  transform: none !important;
  z-index: 999;
}
/* Fullscreen: always CROP to fill the screen edge-to-edge (object-fit: cover)
   instead of letterboxing (object-fit: contain). Regular 16:9 players get
   letterboxed with "contain" by default, which looks fine on a 16:9 monitor
   but leaves huge black bars — or in some browser/driver combos, visibly
   mis-sized video — on ultrawide (21:9, 32:9, etc.) displays. Cropping to
   fill is the standard behavior of native desktop media players, so this
   makes fullscreen look identical regardless of the video's or the
   monitor's aspect ratio. */
.player-box.is-fullscreen video,
.player-box:fullscreen video,
.player-box:-webkit-full-screen video,
.player-box:-moz-full-screen video,
.player-box:-ms-fullscreen video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.player-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-dim);
  font-size: clamp(12.5px, 3vw, 14px);
  line-height: 2.2;
  padding: 20px;
  background:
    radial-gradient(400px 260px at 50% 30%, rgba(139, 92, 246, 0.12), transparent 70%),
    var(--bg-elevated);
}
.player-empty .big { font-size: clamp(30px, 8vw, 40px); display: block; margin-bottom: 6px; }

.video-source-row { display: flex; flex-direction: column; gap: 10px; }

.url-row { display: flex; gap: 10px; flex-wrap: wrap; }
.url-row input { flex: 1; min-width: 180px; direction: ltr; text-align: left; }

@media (max-width: 460px) {
  .url-row { flex-direction: column; }
  .url-row .btn { width: 100%; }
}

.source-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-faint);
  font-size: 12px;
}
.source-divider::before,
.source-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload-row .upload-hint { color: var(--text-faint); font-size: 12px; }

@media (max-width: 460px) {
  .upload-row { flex-direction: column; align-items: stretch; }
  .upload-row .btn { width: 100%; }
  .upload-row .upload-hint { text-align: center; }
}

.upload-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.upload-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.15s ease;
}
.upload-progress-text {
  min-width: 42px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  direction: ltr;
}

.members-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 8px 6px 14px;
  font-size: 13px;
  max-width: 100%;
}
.member-chip .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.member-chip .crown { font-size: 12px; flex-shrink: 0; }
.member-chip .kick {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 6px;
  min-width: 28px;
  min-height: 28px;
}
.member-chip .kick:hover { color: var(--danger); background: rgba(244, 63, 94, 0.12); }

/* ---------- Chat sidebar ---------- */
.chat {
  display: flex;
  flex-direction: column;
  border-inline-start: 1px solid var(--border);
  background: var(--bg-elevated);
  min-height: 0;
  position: relative;
}
@media (max-width: 900px) { .chat { border-inline-start: none; border-top: 1px solid var(--border); } }

.chat-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 14.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.chat-head .count { color: var(--text-dim); font-size: 12.5px; font-weight: 500; }

/* ---------- Voice chat ---------- */
.voice-bar {
  border-bottom: 1px solid var(--border);
  padding: 12px 18px;
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
@media (max-width: 480px) {
  .voice-bar { padding: 10px 14px; }
}

/* Was easy to miss — same flat background as the rest of the sidebar
   whether or not you were actually in a call. A soft accent wash + glow
   while in-call makes "you are live in voice right now" register at a
   glance instead of only being readable from the small green dot. */
.voice-bar.in-call {
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.08), rgba(52, 211, 153, 0.02) 60%, transparent);
  box-shadow: inset 0 -1px 0 rgba(52, 211, 153, 0.16);
}

.voice-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.voice-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.voice-bar.in-call .voice-label { color: var(--text); }

.voice-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}
.voice-bar.in-call .voice-live-dot {
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: livePulse 1.8s ease-out infinite;
}

.voice-count { color: var(--text-faint); font-weight: 500; }

.voice-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.voice-members:empty { margin-top: 0; }

.voice-member {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 5px 12px 5px 5px;
  font-size: 12.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
  max-width: 100%;
}
.voice-member .voice-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.voice-member .voice-mic-state {
  display: inline-flex;
  color: var(--text-faint);
}
.voice-member.muted .voice-mic-state { color: var(--danger); }

.voice-member.speaking {
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18);
}
.voice-member.speaking .voice-avatar {
  box-shadow: 0 0 0 2px var(--ok);
}

/* ---------- Voice member owner actions ---------- */
.voice-owner-actions {
  display: inline-flex;
  gap: 2px;
  margin-inline-start: 2px;
}
.voice-mini-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.voice-mini-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.voice-mini-btn.danger:hover { color: var(--danger); background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.4); }

.voice-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.voice-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  touch-action: manipulation;
  flex-shrink: 0;
}
.voice-icon-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.voice-icon-btn:active { transform: translateY(1px); }
.voice-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}
.voice-icon-btn:disabled:hover { background: var(--surface); border-color: var(--border); }

/* Mute (mic off, but you can still hear others) and deafen (everything
   cut off, including your own mic) used to render as the exact same red
   pill, so at a glance you couldn't tell which one was actually on —
   especially since turning deafen on also lights up the mute button.
   Mute now reads as amber/"paused", deafen as red/"cut off", so the two
   states are visually distinct even when both are active together. */
#voice-mute-btn.active {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
#voice-deafen-btn.active {
  background: rgba(244, 63, 94, 0.18);
  border-color: rgba(244, 63, 94, 0.45);
  color: #fb7185;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.12);
}
.voice-icon-btn.voice-leave-btn {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.35);
  color: #fb7185;
  margin-inline-start: auto;
}
.voice-icon-btn.voice-leave-btn:hover { background: rgba(244, 63, 94, 0.22); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
}
@media (max-width: 480px) {
  .chat-messages { padding: 12px 14px; }
}

.msg { max-width: 88%; }
.msg .meta { font-size: 11.5px; color: var(--text-faint); margin-bottom: 4px; }
.msg .bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  line-height: 1.9;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.msg.mine { align-self: flex-start; }
.msg.mine .bubble {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(217, 70, 239, 0.18));
  border-color: rgba(139, 92, 246, 0.35);
  border-radius: 14px 14px 4px 14px;
}
.msg.theirs { align-self: flex-end; }
.msg.system {
  align-self: center;
  max-width: 100%;
  font-size: 12px;
  color: var(--text-faint);
  background: var(--surface);
  border-radius: 100px;
  padding: 4px 14px;
  text-align: center;
}

.chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  padding-bottom: calc(14px + var(--sab));
  border-top: 1px solid var(--border);
}
@media (max-width: 480px) {
  .chat-input { padding: 10px 12px; padding-bottom: calc(10px + var(--sab)); gap: 6px; }
}
.chat-input input {
  flex: 1;
  font-size: 16px;
  min-width: 0;
}

.emoji-toggle {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 17px;
  min-width: 40px;
}

.emoji-panel {
  width: 100%;
  max-height: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-top: 0 solid transparent;
  background: var(--bg-elevated);
  transition: max-height 0.22s ease, border-color 0.22s ease;
}
.emoji-panel.open {
  max-height: 216px;
  border-top: 1px solid var(--border);
}

.emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.emoji-tab {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.55;
  transition: background 0.15s, opacity 0.15s;
}
.emoji-tab:hover { background: var(--surface-hover); opacity: 0.85; }
.emoji-tab.active { background: var(--surface); opacity: 1; }

.emoji-grid {
  max-height: 168px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.emoji-item {
  background: none;
  border: none;
  font-size: 18px;
  aspect-ratio: 1;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  display: grid;
  place-items: center;
  min-height: 34px;
}
.emoji-item:hover { background: var(--surface-hover); }
@media (max-width: 420px) {
  .emoji-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 340px) {
  .emoji-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 26px;
  bottom: calc(26px + var(--sab));
  right: 50%;
  transform: translateX(50%) translateY(20px);
  background: #1c1c28;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 13.5px;
  padding: 12px 22px;
  border-radius: 100px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 200;
  max-width: 90vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(50%) translateY(0); }

/* ---------- 404 / misc ---------- */
.center-page {
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  padding-bottom: calc(24px + var(--sab));
}
.center-page h1 { font-size: clamp(38px, 12vw, 64px); font-weight: 900; margin-bottom: 8px; }
.center-page p { color: var(--text-dim); margin-bottom: 26px; }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }

/* ---------- Custom video player ---------- */
.player-top-bar {
  position: absolute;
  top: 0;
  inset-inline: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 5;
}
.player-box.has-video .player-top-bar { display: flex; }
.player-top-bar.visible { opacity: 1; pointer-events: auto; }

.player-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fda4af;
  background: rgba(0, 0, 0, 0.4);
  padding: 5px 12px 5px 10px;
  border-radius: 100px;
}
.player-live-dot .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.6);
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(244, 63, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

.player-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #fda4af;
  background: rgba(244, 63, 94, 0.16);
  border: 1px solid rgba(244, 63, 94, 0.4);
  border-radius: 100px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  margin-inline-start: auto;
  min-height: 32px;
}
.player-remove-btn:hover { background: rgba(244, 63, 94, 0.28); transform: translateY(-1px); }
.player-remove-btn:active { transform: translateY(0); }

.player-center-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: rgba(139, 92, 246, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.15s;
  z-index: 4;
}
@media (max-width: 480px) {
  .player-center-play { width: 54px; height: 54px; }
}
.player-center-play svg { margin-inline-start: 3px; }
.player-center-play:hover { background: rgba(139, 92, 246, 0.68); transform: translate(-50%, -50%) scale(1.06); }
.player-center-play:active { transform: translate(-50%, -50%) scale(0.98); }

.player-controls {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 22px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.35) 60%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 5;
}
.player-box.has-video .player-controls { display: flex; }
.player-controls.visible { opacity: 1; pointer-events: auto; }
@media (max-width: 480px) {
  .player-controls { padding: 16px 10px 10px; gap: 6px; }
}

/* Restricted playback controls (no playbackControl permission) */
.player-box.no-control .control-restricted {
  pointer-events: none;
  opacity: 0.4;
}

.progress-row {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  direction: ltr;
}
.progress-row::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.22);
}
.progress-buffered, .progress-filled {
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 100px;
  width: 0%;
  pointer-events: none;
}
.progress-buffered { background: rgba(255, 255, 255, 0.32); }
.progress-filled { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.progress-handle {
  position: absolute;
  left: 0%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35);
  transition: transform 0.15s ease;
  pointer-events: none;
}
.progress-row:hover .progress-handle,
.progress-row:active .progress-handle { transform: translate(-50%, -50%) scale(1); }
/* Always show the handle on touch devices — there's no hover to reveal it */
@media (hover: none) {
  .progress-handle { transform: translate(-50%, -50%) scale(1); }
}

.controls-row {
  display: flex;
  align-items: center;
  gap: 4px;
  direction: ltr;
  flex-wrap: nowrap;
}
.controls-row .spacer { flex: 1; }

.ctrl-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
  touch-action: manipulation;
}
.ctrl-btn:hover { background: rgba(255, 255, 255, 0.14); }
.ctrl-btn:active { transform: scale(0.92); }
.ctrl-btn.active { color: #c4b5fd; }
@media (max-width: 380px) {
  .ctrl-btn { width: 34px; height: 34px; }
}

.volume-group { display: flex; align-items: center; gap: 4px; direction: ltr; }
.volume-group input[type='range'] {
  width: 70px;
  accent-color: var(--accent);
  cursor: pointer;
  height: 30px;
}
@media (max-width: 560px) {
  .volume-group input[type='range'] { width: 46px; }
}
@media (max-width: 400px) {
  .volume-group input[type='range'] { display: none; }
}

.time-display {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
  direction: ltr;
  white-space: nowrap;
  margin-inline-start: 2px;
}
@media (max-width: 460px) {
  .time-display { display: none; }
}

/* ---------- Subtitle button/panel ---------- */
.subtitle-wrap { position: relative; }

.subtitle-panel {
  position: absolute;
  bottom: 44px;
  inset-inline-end: 0;
  width: 230px;
  max-width: calc(100vw - 24px);
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px;
  display: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  z-index: 6;
}
.subtitle-panel.open { display: block; }

.subtitle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  min-height: 40px;
}
.subtitle-item:hover { background: var(--surface-hover); }
.subtitle-item.active { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; }
.subtitle-item .sub-remove {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
}
.subtitle-item .sub-remove:hover { color: var(--danger); background: rgba(244, 63, 94, 0.12); }

.subtitle-upload-btn { width: 100%; margin-top: 6px; }

.subtitle-url-row { display: flex; gap: 6px; margin-top: 6px; padding: 0 2px; }
.subtitle-url-row input {
  flex: 1;
  min-width: 0;
  direction: ltr;
  text-align: left;
  font-size: 12px;
  padding: 7px 8px;
}
.subtitle-url-row .btn { flex-shrink: 0; }

/* ---------- Subtitle overlay (Netflix-style captions) ----------
   Deliberately NOT the browser's native <track> cue rendering — that
   can't be styled/positioned consistently across browsers and tends to
   collide with this player's own custom (auto-hiding) control bar.
   Instead room.js listens to each active track's 'cuechange' itself and
   paints the current line(s) in here, using the browser's native cue
   *timing* (sample-accurate) but our own layout. Appended as the LAST
   child of #player-box (after #player-controls) so the ~ selector below
   can shift it up out of the way while the control bar is visible. */
.subtitle-overlay {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 64px;
  z-index: 4; /* under the controls/top-bar (5), above the video */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  transition: bottom 0.18s ease;
  direction: ltr; /* English captions stay LTR even on this RTL page */
  /* Forces this element onto its own GPU compositing layer. On many
     Android/Chrome devices the hardware-decoded <video> frame paints on
     a surface that ignores normal DOM z-index stacking against sibling
     elements — anything drawn "on top" via plain z-index can still get
     silently painted UNDER it. transform + will-change forces the
     browser to promote this element to its own compositor layer so it
     actually draws above the video surface instead of being swallowed
     by it. This is invisible on desktop (software compositing already
     respects z-index there), which is why it only showed up on phones. */
  transform: translateZ(0);
  will-change: transform;
}
.player-controls.visible ~ .subtitle-overlay { bottom: 116px; }
@media (max-width: 480px) {
  .subtitle-overlay { bottom: 44px; }
  .player-controls.visible ~ .subtitle-overlay { bottom: 100px; }
}
.player-box.is-fullscreen .subtitle-overlay,
.player-box:fullscreen .subtitle-overlay {
  bottom: 84px;
}
.player-box.is-fullscreen .player-controls.visible ~ .subtitle-overlay,
.player-box:fullscreen .player-controls.visible ~ .subtitle-overlay {
  bottom: 150px;
}

.subtitle-line {
  display: inline-block;
  max-width: 92%;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(13px, 2.1vw, 21px);
  line-height: 1.4;
  padding: 3px 12px;
  border-radius: 4px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: normal;
  word-break: break-word;
}

/* ---------- Confirm modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 8, 0.6);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 500;
  padding: 20px;
  padding-bottom: calc(20px + var(--sab));
  opacity: 0;
  transition: opacity 0.2s ease;
  overflow-y: auto;
}
.modal-overlay.show { opacity: 1; }

.modal-box {
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.22s ease;
}
.modal-overlay.show .modal-box { transform: translateY(0) scale(1); opacity: 1; }
@media (max-width: 420px) {
  .modal-box { padding: 20px 16px; border-radius: 16px; }
}

.modal-title { font-size: 16.5px; font-weight: 800; margin-bottom: 10px; }
.modal-message { font-size: 13.5px; color: var(--text-dim); line-height: 1.9; margin-bottom: 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.modal-actions .btn { flex: 1 1 auto; }

/* ---------- Permissions modal ---------- */
.perms-box { max-width: 420px; }
.perms-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 22px;
  max-height: 50vh;
  max-height: 50dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.perm-row:last-child { border-bottom: none; }

.switch {
  position: relative;
  width: 40px;
  height: 24px;
  flex-shrink: 0;
  direction: ltr;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.switch .track {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: background 0.15s, border-color 0.15s;
}
.switch .thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.15s, background 0.15s;
}
.switch input:checked + .track { background: rgba(139, 92, 246, 0.35); border-color: var(--accent); }
.switch input:checked + .track .thumb { transform: translateX(16px); background: #fff; }

/* ---------- Open / Private rooms ---------- */
.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  margin-inline-start: 8px;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.privacy-badge.open {
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.privacy-badge.private {
  color: #fda4af;
  background: rgba(244, 63, 94, 0.14);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

/* Styled to match the other .btn.btn-ghost.btn-sm pills in the room
   topbar (same radius, padding, font-size, colors, hover state) — just
   with the small switch appended at the end instead of being its own
   distinct-looking control. */
.privacy-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  user-select: none;
  min-height: 34px;
  transition: background 0.15s, border-color 0.15s;
}
.privacy-toggle:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.req-badge {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 100px;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  margin-inline-start: 6px;
  vertical-align: middle;
}

/* ---------- Join-requests modal ---------- */
.requests-box { max-width: 440px; }
.req-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 16px 0 8px;
}
.req-section-title:first-child { margin-top: 0; }
.req-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 26vh;
  max-height: 26dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.req-empty {
  font-size: 12.5px;
  color: var(--text-faint);
  padding: 8px 2px;
}
.req-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.req-row .req-actions { display: flex; gap: 6px; flex-shrink: 0; }
.req-row .req-actions .btn { padding: 6px 12px !important; min-height: 30px !important; font-size: 12px !important; }

/* ---------- Private room gate (no access yet) ---------- */
.gate-page .gate-icon { font-size: clamp(34px, 9vw, 44px); display: block; margin-bottom: 12px; }
.gate-page h1 { font-size: clamp(20px, 6vw, 26px); margin-bottom: 4px; }
.gate-page .gate-owner { display: block; color: var(--text-faint); font-size: 12.5px; margin-bottom: 18px; }
.gate-page .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 18px;
  color: #fcd34d;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.gate-page .status-pill.declined {
  color: #fda4af;
  background: rgba(244, 63, 94, 0.14);
  border-color: rgba(244, 63, 94, 0.3);
}
.gate-page .gate-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.gate-page .gate-actions .btn { flex: 1 1 160px; max-width: 220px; }

/* ---------- Chat header actions / clear chat ---------- */
.chat-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-head-btn { font-size: 11.5px !important; padding: 5px 11px !important; min-height: 30px !important; }

/* ---------- Entrance / scroll-reveal animations ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal="1"].revealed { transition-delay: 0.05s; }
[data-reveal="2"].revealed { transition-delay: 0.15s; }
[data-reveal="3"].revealed { transition-delay: 0.25s; }
[data-reveal="4"].revealed { transition-delay: 0.35s; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(139, 92, 246, 0)); }
  50% { filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.55)); }
}

.hero-badge, .hero h1, .hero p, .hero-cta {
  animation: fadeSlideUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.hero h1 { animation-delay: 0.06s; }
.hero p { animation-delay: 0.12s; }
.hero-cta { animation-delay: 0.18s; }

.site-header { animation: fadeIn 0.5s ease both; }

.card { animation: scaleIn 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.form-error.show { animation: shake 0.4s ease; }

.msg {
  animation: fadeSlideUp 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.brand img.logo, .brand .logo-fallback {
  transition: transform 0.2s ease;
  animation: logoGlow 3.2s ease-in-out infinite;
}
.brand:hover img.logo, .brand:hover .logo-fallback { transform: scale(1.06) rotate(-3deg); }

.action-card, .room-item {
  animation: fadeSlideUp 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  .site-header { padding: 12px 16px; padding-top: calc(12px + var(--sat)); padding-left: calc(16px + var(--sal)); padding-right: calc(16px + var(--sar)); }
  .brand-tag { display: none; }
  .hero { padding: 48px 18px 36px; }
  .hero-badge { margin-bottom: 18px; font-size: 11.5px; padding: 5px 13px; }
  .hero-cta .btn { flex: 1 1 auto; width: 100%; max-width: none; }
  .stats-bar { padding: 0 16px; gap: 8px; }
  .stat { padding: 12px 6px; }
  .features { padding: 16px 16px 48px; gap: 14px; }
  .how-it-works { padding: 4px 16px 48px; }
  .card { padding: 26px 18px; border-radius: 16px; }
  .dash { padding: 28px 16px 48px; }
}

/* ---------- Extra-small phones ---------- */
@media (max-width: 360px) {
  .hero { padding: 40px 14px 30px; }
  .hero p { line-height: 1.85; }
  .card { padding: 22px 14px; }
  .btn { padding: 10px 16px; font-size: 13.5px; }
  .stage { padding: 10px; }
  .action-card { padding: 20px 16px; }
}

@media (max-width: 480px) {
  .room-topbar .controls .btn { flex: 1 1 auto; }
}

/* Ensure comfortable tap targets across the app on touch devices,
   without changing the visual size on desktop pointer input. */
@media (hover: none) and (pointer: coarse) {
  .btn-sm { min-height: 38px; }
  .voice-mini-btn { width: 26px; height: 26px; }
  .member-chip .kick { min-width: 30px; min-height: 30px; }
}

/* ================= Advanced hover effects ================= */

/* --- Feature cards: 3D tilt + mouse-following spotlight --- */
.feature-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.2s;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(139, 92, 246, 0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
.feature-card:hover::before { opacity: 1; }
.feature-card .icon,
.feature-card h3,
.feature-card p {
  position: relative;
  z-index: 1;
  transform: translateZ(20px);
}
.feature-card .icon {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.4);
  display: inline-block;
}
.feature-card:hover .icon {
  transform: translateZ(30px) scale(1.15) rotate(-6deg);
}
/* Touch devices have no hover/mouse-follow — skip the tilt transform
   entirely so cards don't get stuck mid-tilt after a tap. */
@media (hover: none) {
  .feature-card { transform: none !important; }
  .feature-card:hover { transform: none; }
}

/* --- Step cards: ripple burst behind number on hover --- */
.step { position: relative; overflow: hidden; }
.step-num {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.4);
}
.step-num::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transform: scale(1);
  opacity: 0.55;
  z-index: -1;
}
.step:hover .step-num {
  transform: scale(1.12) rotate(8deg);
}
.step:hover .step-num::before {
  animation: ripplePulse 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes ripplePulse {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
.step:hover {
  border-color: var(--border-strong);
  box-shadow: 0 14px 40px rgba(139, 92, 246, 0.18);
}

/* --- Room items: sliding glow sweep on hover --- */
.room-item { position: relative; overflow: hidden; }
.room-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(139, 92, 246, 0.10), transparent);
  left: -70%;
  transition: left 0.6s ease;
  pointer-events: none;
}
.room-item:hover::before { left: 110%; }

/* --- Brand logo: magnetic-ish pop on hover (keeps existing glow) --- */
.brand:hover img.logo,
.brand:hover .logo-fallback {
  transform: scale(1.12) rotate(-8deg);
  filter: drop-shadow(0 4px 14px var(--accent-glow));
}