/* ── Reset & Variables ───────────────────────────────────────────────────── */
:root {
  --bg: #08201f;
  --s1: #0d2b2a;
  --s2: #123a37;
  --s3: #1b4340;
  --border: #28504c;
  --border2: #386460;
  /* Brand (Lagoon). --accent is both a text/icon colour and a fill, so text drawn ON an
     accent fill must use --on-accent: the dark theme's bright teal needs dark ink (white on
     it is 2.5:1), the light theme's deep teal takes white. */
  --accent: #06b6a4;
  --accent-h: #2dd4bf;
  --accent-rgb: 6, 182, 164; /* for rgba() glows and tints */
  --accent-soft: rgba(45, 212, 191, 0.14); /* tinted badge / selected / own-bubble background */
  --on-accent: #042f2e;
  /* True green, deliberately far from the teal accent in hue so success/credit states stay
     distinguishable from brand states. */
  --green: #4ade80;
  --green-rgb: 74, 222, 128;
  --red: #f05e5e;
  --yellow: #f0b35e;
  --text: #e7f1ef;
  --muted: #88aaa6;
  --muted2: #4e6e6b;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  --nav-bg: rgba(8, 32, 31, 0.96);
  --overlay-bg: rgba(8, 32, 31, 0.92);
  --nav-h: 60px;
  /* Native controls (select dropdowns, scrollbars, number spinners) follow the theme */
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f0fdfa;
  --s1: #ffffff;
  --s2: #edf6f4;
  --s3: #e2edeb;
  --border: #d0dfdd;
  --border2: #b8c9c7;
  --accent: #0f766e;
  --accent-h: #06b6a4;
  --accent-rgb: 15, 118, 110;
  --accent-soft: #ccfbf1;
  --on-accent: #ffffff;
  --green: #16a34a;
  --green-rgb: 22, 163, 74;
  --red: #d44040;
  --yellow: #c9832a;
  --text: #132d2d;
  --muted: #51706e;
  --muted2: #95acaa;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  --nav-bg: rgba(255, 255, 255, 0.96);
  --overlay-bg: rgba(240, 253, 250, 0.94);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}
button {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
}
input {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
/* Unlike <input>, browsers give <select>/<textarea> their own system font and
   black text — without this they ignore Vazirmatn and are unreadable in dark mode. */
select,
textarea {
  font: inherit;
  color: inherit;
}
select option {
  background-color: var(--s2);
  color: var(--text);
}

/* ── Switch (a checkbox styled as an on/off toggle) ─────────────────────── */
/* The input[type] prefix outranks generic rules like `.modal input`. */
input[type="checkbox"].zr-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--border2);
  cursor: pointer;
  transition: background 0.18s;
}
input[type="checkbox"].zr-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s;
}
input[type="checkbox"].zr-switch:checked {
  background: var(--accent);
}
input[type="checkbox"].zr-switch:checked::before {
  transform: translateX(16px);
}
html[dir="rtl"] input[type="checkbox"].zr-switch::before {
  left: auto;
  right: 3px;
}
html[dir="rtl"] input[type="checkbox"].zr-switch:checked::before {
  transform: translateX(-16px);
}
input[type="checkbox"].zr-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="checkbox"].zr-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
input[type="checkbox"].zr-switch-sm {
  width: 30px;
  height: 17px;
}
input[type="checkbox"].zr-switch-sm::before {
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
}
input[type="checkbox"].zr-switch-sm:checked::before {
  transform: translateX(13px);
}
html[dir="rtl"] input[type="checkbox"].zr-switch-sm::before {
  right: 2px;
}
html[dir="rtl"] input[type="checkbox"].zr-switch-sm:checked::before {
  transform: translateX(-13px);
}
a {
  color: var(--accent);
  text-decoration: none;
}
svg {
  display: block;
  flex-shrink: 0;
}

/* ── Common Utilities ────────────────────────────────────────────────────── */
.hidden {
  display: none !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.18s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.35);
}
.btn-primary:hover {
  background: var(--accent-h);
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--s3);
  color: var(--text);
  border: 1px solid var(--border2);
}
.btn-secondary:hover {
  background: var(--border);
  border-color: var(--accent);
}
.btn-danger {
  background: var(--red);
  color: #fff;
}
.btn-danger:hover {
  background: #d94f4f;
}

/* Theme toggle */
.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.theme-btn:hover {
  background: var(--border);
  color: var(--text);
  border-color: var(--accent);
}
.theme-btn svg {
  width: 16px;
  height: 16px;
}
.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lang-btn:hover {
  background: var(--border);
  color: var(--text);
  border-color: var(--accent);
}

/* Toast — success/danger get a strong tinted background + icon so they actually stand out;
   info (no type passed) keeps a neutral look close to the original style. */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  z-index: 9999;
  box-shadow: var(--shadow);
  animation: fadeUp 0.25s ease;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 32px));
}
.toast::before {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.toast-success {
  border-color: var(--green);
  /* Layer the tint over an opaque var(--s3) base (two background layers, first on top)
     instead of a bare rgba() straight over the page — a lone semi-transparent background
     lets whatever text sits behind the fixed toast show through and fight with its own
     label for readability. This keeps the exact same 15% tint look, just made opaque. */
  background: linear-gradient(rgba(var(--green-rgb), 0.15), rgba(var(--green-rgb), 0.15)), var(--s3);
}
.toast-success::before {
  content: "✓";
  color: var(--green);
}
.toast-danger {
  border-color: var(--red);
  background: linear-gradient(rgba(240, 94, 94, 0.15), rgba(240, 94, 94, 0.15)), var(--s3);
}
.toast-danger::before {
  content: "✕";
  color: var(--red);
}
.toast-info::before {
  content: "ℹ";
  color: var(--accent);
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Mini-app (Eitaa) share-phone banner — persistent, dismissible-for-the-session reminder
   shown to mini-app-verified users with no phone number on file. Fixed bottom bar, same
   z-index tier as the back-to-top button (below the toast, above page content). */
.miniapp-phone-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--s2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.miniapp-phone-banner.hidden {
  display: none;
}
.miniapp-phone-banner span {
  flex: 1 1 200px;
  font-size: 13px;
  color: var(--text);
}
.miniapp-phone-banner .btn {
  width: auto;
  padding: 8px 16px;
  font-size: 13px;
  flex-shrink: 0;
}
.miniapp-phone-banner-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  flex-shrink: 0;
}
.miniapp-phone-banner-close:hover {
  color: var(--text);
}
/* Room page: the owner-login banner reuses the bar above but sits over the 62px media toolbar,
   not on top of the mic/camera buttons. */
#ownerLoginBanner { bottom: 78px; }

.miniapp-phone-modal p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 4px;
}

/* Floating back-to-top button (home page). Physical `right` on purpose —
   a fixed screen-corner control shouldn't flip sides with RTL/LTR. */
.back-to-top-btn {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0.2s,
    background 0.15s;
}
.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top-btn:hover {
  background: var(--accent-h);
}
.back-to-top-btn svg {
  width: 20px;
  height: 20px;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 32px;
  width: 100%;
  max-width: 360px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.modal h3 {
  font-size: 18px;
  margin-bottom: 16px;
}
.modal input,
.profile-section input {
  width: 100%;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 15px;
}
.modal input:focus,
.profile-section input:focus {
  border-color: var(--accent);
}
.modal .btn {
  width: 100%;
}

/* ── Attendance modal ─────────────────────────────────────────────────────── */
/* Map Azar Datepicker's theme to ZiRoom's existing CSS variables so both
   dark/light palettes apply automatically without a separate override per theme.
   The second selector is what actually applies: datepicker.min.css loads after this file
   and defines the same variables on :root (equal specificity, so it wins) and again under
   :root[data-theme=dark]. html:root[data-theme] (0,2,1) outranks both; the theme scripts
   always set data-theme, so the library's own indigo never shows through. */
:root,
html:root[data-theme] {
  --azar-primary: var(--accent);
  --azar-primary-hover: var(--accent-h);
  --azar-primary-light: var(--accent-soft);
  --azar-bg: var(--s2);
  --azar-surface: var(--s3);
  --azar-border: var(--border2);
  --azar-text: var(--text);
  --azar-text-secondary: var(--muted);
  --azar-text-muted: var(--muted);
  --azar-selected-bg: var(--accent);
  --azar-selected-text: var(--on-accent);
  --azar-today-bg: var(--s3);
  --azar-hover-bg: var(--s3);
  --azar-weekday-text: var(--muted);
  --azar-outside-text: var(--muted2);
}
/* The library hardcodes an indigo glow on these two; the extra ancestor/type selector
   outranks its rules, which load later. */
.azar-datepicker-container .azar-day-cell.azar-selected {
  box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.35);
}
input.azar-datepicker-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.attendance-filter-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.attendance-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 160px;
}
.attendance-field label {
  font-size: 12px;
  color: var(--muted);
}
.attendance-field input[type="text"] {
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  width: 100%;
  cursor: pointer;
}
.attendance-filter-row .btn {
  flex-shrink: 0;
  padding: 8px 18px;
}

/* Confirm button injected into the Azar Datepicker's own footer, next to its
   "Today" button — see _injectAttendanceConfirmButton() in room.js. Defined as a
   standalone rule (not extending .azar-btn-today) so cascade order against
   datepicker.min.css (loaded after app.css) can't override these colors. */
.attendance-azar-confirm-btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 7px 14px;
  border-radius: var(--azar-radius-xs, 7px);
  background: var(--accent);
  color: var(--on-accent);
}
.attendance-azar-confirm-btn:hover {
  background: var(--accent-h);
}

/* The library reverses the hour/minute order under dir="rtl" (Persian) because its
   time row is a flex container affected by the inherited text direction. Time should
   always read hour-then-minute left-to-right, same as in the Gregorian/English UI. */
.azar-time-picker {
  direction: ltr;
}
.attendance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.attendance-table th,
.attendance-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.attendance-table th {
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.attendance-table tbody tr:hover {
  background: var(--s3);
}
.attendance-table tbody tr:last-child td {
  border-bottom: none;
}
.modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.modal-footer .btn {
  width: auto;
}

html[dir="rtl"] .attendance-table th,
html[dir="rtl"] .attendance-table td {
  text-align: right;
  letter-spacing: 0;
  text-transform: none;
}
html[dir="rtl"] .modal-footer {
  flex-direction: row-reverse;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
/* padding-top reserves the space the fixed navbar floats over, so page
   content (starting with the hero) still begins right below it, exactly
   like the old in-flow/sticky layout did. */
.home-page {
  overflow-y: auto;
  padding-top: var(--nav-h);
}
/* The actual scrolling box is the viewport/<html>, not <body> — per the CSS
   overflow-propagation rule, when html has no explicit overflow and body
   does, body's overflow-y is promoted to the viewport and body itself
   scrolls nowhere. scroll-behavior isn't in that propagation list, so it
   has to be set on html directly or anchor-link/JS smooth scrolling here
   would silently no-op. Harmless on room.html/admin.html — this only
   affects fragment-navigation/scrollIntoView/scrollTo, never direct
   scrollTop assignment (e.g. the chat auto-scroll in room.js). */
html {
  scroll-behavior: smooth;
}

/* ── Auth / top navbar ───────────────────────────────────────────────────── */
/* position: fixed (not sticky) so the navbar stays pinned for the entire
   page, not just until the browser decides its sticky containing block
   ends — see CLAUDE.md-reported bug: it used to detach once scrolled past
   the features section. */
.home-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  /* No backdrop-filter: a fixed, full-width blur is re-rendered on every scroll
     frame and was a large share of the home page's rendering time. A near-opaque
     background looks the same. */
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
}
.home-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.home-nav-links::-webkit-scrollbar {
  display: none;
}
.home-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition:
    color 0.15s,
    background 0.15s;
}
.home-nav-link:hover {
  color: var(--text);
  background: var(--s2);
}
.nav-link-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.85;
}
/* Hamburger menu — below 860px the links collapse into a dropdown panel under
   the navbar, opened by #navMenuBtn (home.js initNavMenu). */
.nav-menu-btn {
  display: none;
}
.nav-menu-btn .nav-menu-close,
.home-nav.nav-open .nav-menu-btn .nav-menu-open {
  display: none;
}
.home-nav.nav-open .nav-menu-btn .nav-menu-close {
  display: block;
}
@media (max-width: 860px) {
  .nav-menu-btn {
    display: flex;
  }
  .home-nav-links {
    display: none;
  }
  .home-nav.nav-open .home-nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    padding: 8px 16px 12px;
    background: var(--s1);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  }
  .home-nav.nav-open .home-nav-link {
    font-size: 15px;
    padding: 12px;
  }
  .home-nav.nav-open .nav-link-icon {
    width: 18px;
    height: 18px;
  }
}
.home-nav-logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr; /* flex row in RTL would otherwise lay out img/Zi/Room right-to-left */
}
.home-nav-logo span:first-of-type {
  color: var(--accent);
}
.nav-logo-img {
  width: 34px;
  height: 34px;
  display: block;
  flex-shrink: 0;
}
.home-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-login-btn {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
}
.auth-login-btn:hover {
  background: var(--accent-h);
}
@media (max-width: 480px) {
  .home-nav {
    padding: 0 12px;
  }
  .home-nav-right {
    gap: 6px;
  }
  .home-nav-logo {
    font-size: 18px;
    gap: 6px;
  }
  .nav-logo-img {
    width: 28px;
    height: 28px;
  }
  .home-nav .auth-login-btn {
    padding: 7px 12px;
  }
}
.auth-user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
}
.auth-user-badge .auth-phone {
  color: var(--muted);
  font-size: 12px;
  font-family: monospace;
}
.auth-logout-btn {
  background: none;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.auth-logout-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ── Auth modal ──────────────────────────────────────────────────────────── */
.auth-modal-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-modal-step.hidden {
  display: none !important;
}
.auth-phone-input {
  width: 100%;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 16px;
  color: var(--text);
  direction: ltr;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 0.18s;
}
.auth-phone-input:focus {
  border-color: var(--accent);
}
/* Numbers always read left-to-right in both fa and en — don't let RTL reverse the box order */
.otp-input-wrap {
  display: flex;
  gap: 8px;
  justify-content: center;
  direction: ltr;
}
.otp-digit {
  width: 46px;
  height: 56px;
  text-align: center;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.otp-digit:focus {
  border-color: var(--accent);
}
.otp-countdown {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.otp-resend-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.otp-resend-btn:disabled {
  color: var(--muted);
  text-decoration: none;
  cursor: default;
}
.auth-phone-display {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  direction: ltr;
  letter-spacing: 0.5px;
}
.auth-change-phone {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0 4px;
}
.auth-mode-switch {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  text-align: center;
  width: 100%;
}

/* ── Account modal ────────────────────────────────────────────────────────── */
.account-modal {
  max-width: 440px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.account-section {
  display: flex;
  flex-direction: column;
}
.account-modal label,
.profile-section label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.account-modal h4,
.profile-section h4 {
  font-size: 14px;
  margin-bottom: 8px;
}
.account-field-row {
  display: flex;
  gap: 10px;
}
.account-field-row > div {
  flex: 1;
}
.account-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0 12px;
}
/* Account level (set by an admin) — shown in the header dropdown and on the profile page,
   only when it is not the default "Normal user". */
.user-level-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .35);
}
.account-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 16px;
  font-size: 13px;
  color: var(--muted);
}
.account-level-row .user-level-badge { margin-top: 0; }
.account-hint {
  font-size: 12px;
  color: var(--muted2);
  margin: -8px 0 10px;
}

/* ── Shared avatar helper (chat, member list, video tiles — see room.js avatarHtml()) ── */
.avatar-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.avatar-fallback {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ── Account/profile page: avatar upload ── */
.account-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.account-avatar-preview {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.account-avatar-img,
.account-avatar-fallback {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.account-avatar-img {
  object-fit: cover;
  display: block;
}
.account-avatar-fallback {
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.account-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account-avatar-upload-btn {
  width: auto;
  padding: 7px 14px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}
.account-avatar-actions .btn {
  width: auto;
  padding: 7px 14px;
  font-size: 13px;
}

/* ── Avatar crop modal ── */
.avatar-crop-modal {
  width: 340px;
  max-width: 92vw;
}
.avatar-crop-viewport {
  position: relative;
  width: 280px;
  height: 280px;
  max-width: 100%;
  margin: 4px auto 14px;
  overflow: hidden;
  background: var(--s2);
  border-radius: 8px;
  touch-action: none;
  cursor: grab;
}
.avatar-crop-viewport:active {
  cursor: grabbing;
}
.avatar-crop-img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.avatar-crop-zoom-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.avatar-crop-zoom-range {
  width: 100%;
  margin-bottom: 4px;
}
.account-modal input:disabled,
.profile-section input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
#accPhone {
  direction: ltr;
  letter-spacing: 0.5px;
}
.account-modal .btn {
  width: 100%;
  margin-top: 4px;
}

/* Hero logo row */
.hero-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}
.hero-logo-img {
  width: 72px;
  height: 72px;
  display: block;
  flex-shrink: 0;
}
.hero-logo-wrap .logo {
  margin-bottom: 0;
}

/* Anchor targets for the top-nav links — offsets the scroll landing spot so
   the fixed navbar never covers the top of the section being jumped to. */
.hero,
.features,
.pricing-section,
.enterprise-section,
.about-us,
.contact-us {
  scroll-margin-top: var(--nav-h);
}

/* Hero */
.hero {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 40px 20px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 60% at 30% 40%,
      rgba(var(--accent-rgb), 0.18) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 50% at 70% 70%,
      rgba(var(--green-rgb), 0.12) 0%,
      transparent 60%
    );
  pointer-events: none;
}
.hero-content {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 560px;
}
.logo {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 16px;
  display: inline-block;
}
.logo-zi {
  color: var(--accent);
}
.logo-room {
  color: var(--text);
}

.hero-title {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
.hero-sub {
  color: var(--muted);
  font-size: 17px;
  margin-bottom: 36px;
}

/* Name input */
.name-row {
  margin-bottom: 32px;
}
.name-input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 340px;
  margin: 0 auto;
  transition: border-color 0.18s;
}
.name-input-wrap:focus-within {
  border-color: var(--accent);
}
.name-input-icon {
  padding: 0 12px;
  color: var(--muted);
  font-size: 18px;
}
.name-input-wrap input {
  flex: 1;
  padding: 12px 14px 12px 0;
  font-size: 15px;
}

/* Action cards */
.action-cards {
  display: flex;
  gap: 0;
  align-items: stretch;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  overflow: hidden;
}
.action-card {
  flex: 1;
  padding: 28px 24px;
}
.action-card:first-child {
  border-right: 1px solid var(--border);
}
.action-card h2,
.action-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.action-card p {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 18px;
  line-height: 1.4;
}
.action-icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.action-card .btn {
  width: 100%;
}

.join-row {
  display: flex;
  gap: 8px;
}
.join-row input {
  flex: 1;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 15px;
  letter-spacing: 1px;
  transition: border-color 0.18s;
}
.join-row input:focus {
  border-color: var(--accent);
}

@media (max-width: 540px) {
  .action-cards {
    flex-direction: column;
  }
  .action-card:first-child {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* My rooms section */
.my-rooms-section {
  margin-top: 28px;
  text-align: left;
}
.my-rooms-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.my-rooms-view-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.my-rooms-view-all:hover {
  text-decoration: underline;
}
.my-rooms-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}
/* Grid (not flex-wrap) so every card gets the same column width and rows
   line up neatly — flex-wrap let each card size to its own content, which
   looked ragged once there were enough rooms to wrap onto multiple rows. */
.my-rooms-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.my-room-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 14px;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    border-color 0.18s,
    transform 0.15s;
  text-align: left;
  color: var(--text);
}
a.my-room-card {
  text-decoration: none;
}
.my-room-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.my-room-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-room-sub {
  font-size: 10px;
  color: var(--muted2);
  letter-spacing: 0.5px;
  font-family: "SF Mono", "Fira Mono", "Roboto Mono", monospace;
}
.my-room-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.my-room-role {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--s3);
  white-space: nowrap;
}
.my-room-role.my-room-role-owner {
  color: var(--accent);
}
.my-room-role.my-room-role-manager {
  color: var(--green);
}
.my-room-role.my-room-role-contributor {
  color: var(--yellow);
}
.my-room-role.my-room-role-member {
  color: var(--muted);
}
.my-room-lock {
  color: var(--muted);
  flex-shrink: 0;
}
.my-room-time {
  font-size: 10px;
  color: var(--muted2);
  margin-left: auto;
}

/* Features section */
.features {
  padding: 80px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.features > h2 {
  text-align: center;
  margin-bottom: 48px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.feature-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  transition:
    border-color 0.18s,
    transform 0.18s;
}
.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.feature-icon {
  font-size: 26px;
  margin-bottom: 12px;
}
.feature-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.feature-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Pricing (room upgrade plans) ────────────────────────────────────────── */
.pricing-section {
  padding: 60px 20px 80px;
  max-width: 1040px;
  margin: 0 auto;
}
.pricing-section > h2 {
  text-align: center;
  margin-bottom: 10px;
}
.pricing-sub {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  max-width: 560px;
  margin: 0 auto 40px;
}
/* Flexbox, not grid: flex-grow lets cards fill a full row exactly like the old
   grid's minmax(220px, 1fr) did, but a short last row (e.g. 5 or 6 plans, so
   1-2 cards wrap to row 2) can't grow past max-width and centers itself via
   justify-content instead of hugging the start edge like grid would. */
.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.pricing-card,
.pricing-skeleton {
  flex: 1 1 220px;
  max-width: 260px;
}
.pricing-skeleton {
  position: relative;
  overflow: hidden;
  height: 210px;
  border-radius: var(--radius);
  background: var(--s1);
}
/* The shimmer moves a highlight with transform (compositor-only) — animating
   background-position repainted the skeleton on every frame. */
.pricing-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--s2) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: pricingShimmer 1.4s ease-in-out infinite;
}
@keyframes pricingShimmer {
  to {
    transform: translateX(100%);
  }
}
.pricing-card {
  position: relative;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 24px 26px;
  text-align: center;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
  opacity: 0;
  animation: pricingCardIn 0.55s ease both;
}
.pricing-grid .pricing-card:nth-child(1) {
  animation-delay: 0.05s;
}
.pricing-grid .pricing-card:nth-child(2) {
  animation-delay: 0.15s;
}
.pricing-grid .pricing-card:nth-child(3) {
  animation-delay: 0.25s;
}
.pricing-grid .pricing-card:nth-child(n + 4) {
  animation-delay: 0.35s;
}
@keyframes pricingCardIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.pricing-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.pricing-card.popular {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.pricing-card-free {
  border-color: var(--green);
}
.pricing-card-free:hover {
  border-color: var(--green);
}
.pricing-plan-price-free {
  color: var(--green);
}
.pricing-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.4);
}
.pricing-plan-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.pricing-plan-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 20px;
}
.pricing-plan-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pricing-plan-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  background: var(--s2);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}
.pricing-plan-stat span:nth-child(2) {
  color: var(--text);
  font-weight: 700;
}
.pricing-plan-stat-icon {
  font-size: 14px;
}
.pricing-footnote {
  text-align: center;
  color: var(--muted2);
  font-size: 12px;
  margin-top: 24px;
}

/* ── Enterprise / On-Premise licensing ───────────────────────────────────── */
.enterprise-section {
  padding: 0 20px 80px;
  max-width: 1040px;
  margin: 0 auto;
}
.enterprise-card {
  position: relative;
  z-index: 0;
  background: var(--s1);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 48px);
  opacity: 0;
  animation: pricingCardIn 0.6s ease both;
}
.enterprise-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    var(--accent),
    var(--green),
    var(--accent)
  );
  filter: blur(24px);
  opacity: 0.4;
  /* Only opacity is animated: the blurred layer is rasterized once and the
     compositor fades it. Animating background-position re-blurred it every frame. */
  animation: enterpriseGlow 9s ease-in-out infinite;
}
/* The light theme's deep teal washes the card far darker than the dark theme's bright one
   at the same opacity — this keeps the light card as airy as the rest of the page. */
html[data-theme="light"] .enterprise-card::before {
  opacity: 0.3;
  animation-name: enterpriseGlowLight;
}
@keyframes enterpriseGlow {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.22;
  }
}
@keyframes enterpriseGlowLight {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.16;
  }
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-card::before,
  .enterprise-badge,
  .pricing-skeleton::after {
    animation: none;
  }
}
.enterprise-badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.enterprise-body {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}
.enterprise-copy {
  flex: 2 1 340px;
}
.enterprise-copy h2 {
  margin-bottom: 14px;
}
.enterprise-sub {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.enterprise-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.enterprise-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.ent-feat-icon {
  font-size: 17px;
  flex-shrink: 0;
  line-height: 1.5;
}
.enterprise-price-panel {
  flex: 1 1 260px;
  text-align: center;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 28px 22px;
}
.enterprise-discount-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  animation: enterpriseBadgePulse 1.8s ease-in-out infinite;
}
@keyframes enterpriseBadgePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
.enterprise-price-original {
  font-size: 15px;
  color: var(--muted);
  text-decoration: line-through;
  margin-bottom: 2px;
}
.enterprise-price-original:empty {
  display: none;
}
.enterprise-price-main-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.enterprise-price-main {
  font-size: 34px;
  font-weight: 800;
  color: var(--text);
}
.enterprise-price-main.is-text {
  font-size: 26px;
}
.enterprise-price-unit:empty {
  display: none;
}
.enterprise-price-unit {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.enterprise-price-note {
  font-size: 12px;
  color: var(--muted2);
  margin: 8px 0 20px;
}
.enterprise-cta {
  width: 100%;
}

/* ── About Us ─────────────────────────────────────────────────────────────── */
.about-us {
  padding: 60px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.about-us > h2 {
  text-align: center;
  margin-bottom: 32px;
}
.about-us-intro {
  position: relative;
  overflow: hidden;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 30px 26px 34px;
  margin-bottom: 32px;
}
.about-us-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), var(--green));
}
html[dir="rtl"] .about-us-intro {
  padding: 26px 34px 26px 30px;
}
html[dir="rtl"] .about-us-intro::before {
  left: auto;
  right: 0;
}
.about-us-intro p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.9;
}
.about-us-intro p + p {
  margin-top: 14px;
}
.about-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.about-us-item {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  text-align: center;
}
.about-us-icon {
  font-size: 26px;
  margin-bottom: 10px;
}
.about-us-item h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--muted);
}
.about-us-item p {
  font-size: 14px;
  word-break: break-word;
}

/* ── Contact Us ───────────────────────────────────────────────────────────── */
.contact-us {
  padding: 20px 20px 60px;
  max-width: 640px;
  margin: 0 auto;
}
.contact-us > h2 {
  text-align: center;
  margin-bottom: 8px;
}
/* Shared section-title typography — a two-tone brand gradient fill instead of
   a flat color, tighter tracking and a heavier weight for real presence. No
   pseudo-element ornaments (lines/underlines read as filler, not polish).
   color: var(--text) is the fallback for the rare browser without
   background-clip: text support; @supports removes the (invisible without
   it) gradient layer there so text never disappears. */
.features > h2,
.pricing-section > h2,
.about-us > h2,
.contact-us > h2,
.enterprise-copy h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.3;
  color: var(--text);
  background: linear-gradient(100deg, var(--text) 30%, var(--accent) 70%, var(--green) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .features > h2,
  .pricing-section > h2,
  .about-us > h2,
  .contact-us > h2,
  .enterprise-copy h2 {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}
.contact-sub {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 28px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form input {
  width: 100%;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s;
}
.contact-form input:focus {
  border-color: var(--accent);
}
.contact-textarea-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-textarea-wrap textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: border-color 0.18s;
}
.contact-textarea-wrap textarea:focus {
  border-color: var(--accent);
}
.contact-textarea-wrap textarea.over-limit {
  border-color: var(--red);
}
.contact-char-counter {
  align-self: flex-end;
  font-size: 12px;
  color: var(--muted);
}
.contact-char-counter.over-limit {
  color: var(--red);
  font-weight: 600;
}

/* Home footer */
.home-footer {
  text-align: center;
  padding: 32px 20px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
}
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
/* Trust seals are issued on a white background — keep that fixed regardless of theme. */
.trust-badge-box {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  line-height: 0;
}
.trust-badge-box img {
  display: block;
  max-height: 90px;
  width: auto;
}
/* justify-content: space-between mirrors correctly under RTL via the inherited
   direction — no row-reverse needed (same principle as the admin panel sidebar). */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.footer-copyright,
.footer-credit {
  margin: 0;
}

/* ── User menu (verified user icon + dropdown in home nav) ───────────────── */
.user-menu-wrap {
  position: relative;
}
.user-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}
.user-icon-btn:hover {
  background: var(--border);
  border-color: var(--accent);
}
.user-icon-btn svg {
  width: 18px;
  height: 18px;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  z-index: 1000;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 0;
  animation: fadeUp 0.18s ease;
}
.user-dd-name-block {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 16px 8px;
  transition: background 0.12s;
}
.user-dd-name-block:hover {
  background: var(--s3);
}
.user-dd-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dd-phone {
  font-size: 12px;
  font-family: monospace;
  letter-spacing: 0.5px;
  color: var(--muted);
  direction: ltr;
  margin-top: 2px;
}
.user-dd-balance {
  padding: 4px 16px 10px;
  font-size: 13px;
  color: var(--muted2);
}
.user-dd-balance strong {
  color: var(--green);
  font-size: 15px;
}
.user-dd-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.user-dd-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  font-size: 13px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  background: none;
  border: none;
  transition: background 0.12s;
}
.user-dd-btn:hover {
  background: var(--s3);
}
.user-dd-logout {
  color: var(--red);
}
.user-dd-logout:hover {
  background: rgba(240, 94, 94, 0.08);
}
html[dir="rtl"] .user-dropdown {
  right: auto;
  left: 0;
}
html[dir="rtl"] .user-dd-btn,
html[dir="rtl"] .user-dd-name-block {
  text-align: right;
}
html[dir="rtl"] .profile-nav-btn {
  text-align: right;
}

/* ── Wallet modal ─────────────────────────────────────────────────────────── */
.wallet-modal {
  max-width: 440px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wallet-modal .btn {
  width: auto;
}
.wallet-topup-form .btn {
  width: 100%;
}
.wallet-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wallet-modal-header h3 {
  margin-bottom: 0;
}
.wallet-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.12s;
  line-height: 1;
}
.wallet-modal-close:hover {
  color: var(--text);
}
.wallet-balance-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
}
.wallet-balance-label {
  font-size: 13px;
  color: var(--muted);
}
.wallet-balance-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
}
.wallet-add-credit-btn {
  font-size: 13px;
  padding: 7px 16px;
}
.wallet-topup-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
}
.wallet-amount-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--text);
  outline: none;
  direction: ltr;
  transition: border-color 0.15s;
}
.wallet-amount-input:focus {
  border-color: var(--accent);
}
.wallet-amount-input[type="number"]::-webkit-inner-spin-button,
.wallet-amount-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.wallet-amount-input[type="number"] {
  -moz-appearance: textfield;
}
.wallet-gateway-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.wallet-gateway-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wallet-gateway-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--s2);
  border: 1px solid var(--border2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text);
}
.wallet-gateway-btn:hover {
  border-color: var(--accent);
}
.wallet-gateway-btn.selected {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.wallet-gateway-logo {
  max-width: 80px;
  height: auto;
  border-radius: 4px;
}
.wallet-tx-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wallet-tx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--s3);
  border-radius: var(--radius-sm);
}
.wallet-tx-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.wallet-tx-badge.credit {
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
}
.wallet-tx-badge.debit {
  background: rgba(240, 94, 94, 0.15);
  color: var(--red);
}
.wallet-tx-badge.refund {
  background: rgba(240, 179, 94, 0.15);
  color: var(--yellow);
}
.wallet-tx-badge.giftcredit {
  background: var(--accent-soft);
  color: var(--accent);
}
.wallet-buckets { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--s2); font-size: 13px; }
.wallet-bucket-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: var(--muted); }
.wallet-bucket-row strong { color: var(--text); unicode-bidi: plaintext; }
.wallet-buckets .account-hint { margin: 6px 0 0; }
/* Gateway unit notice — shown when a gateway's ConversionFactor ≠ 1 (site unit ≠ bank unit). */
.wallet-unit-notice {
  margin: 8px 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
  background: rgba(240, 179, 94, 0.12);
  border: 1px solid rgba(240, 179, 94, 0.45);
}
.wallet-unit-notice::before { content: '⚠️ '; }
.wallet-tx-badge.roomfeeincome, .wallet-tx-badge.roomfeerefund, .wallet-tx-badge.roomfeesitesharereversal {
  background: rgba(var(--green-rgb), 0.15); color: var(--green);
}
.wallet-tx-badge.withdrawal, .wallet-tx-badge.withdrawalreversal {
  background: var(--accent-soft); color: var(--accent);
}
.wallet-tx-info {
  flex: 1;
  min-width: 0;
}
.wallet-tx-reason {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wallet-tx-date {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 2px;
}
.wallet-tx-amount-val {
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  direction: ltr;
}
.wallet-tx-amount-val.credit {
  color: var(--green);
}
.wallet-tx-amount-val.debit {
  color: var(--red);
}
.wallet-tx-amount-val.refund {
  color: var(--yellow);
}
.wallet-tx-amount-val.giftcredit {
  color: var(--accent);
}
.wallet-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}
.wallet-page-btn {
  background: none;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.wallet-page-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
}
.wallet-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.wallet-page-info {
  font-size: 12px;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROOM PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.room-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* 100dvh fixes mobile browser toolbar cutoff */
  overflow: hidden;
}

/* ── Room Header ─────────────────────────────────────────────────────────── */
.room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 52px;
  flex-shrink: 0;
  background: var(--s1);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}
.room-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.room-header-center {
  display: flex;
  align-items: center;
  gap: 16px;
}
.room-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Room options menu — icon button + dropdown panel, same at every screen size */
.header-menu-wrap {
  position: relative;
}
.header-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--s3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
}
.header-menu-btn:hover,
.header-menu-btn.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.header-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 250;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  min-width: 190px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.header-dropdown-panel.open {
  display: flex;
}

.room-logo {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 7px;
  direction: ltr; /* always LTR — "Zi" must precede "Room" */
}
.room-logo span:first-of-type {
  color: var(--accent);
}
.room-logo-img {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
}

.room-code-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
  font-family: monospace;
  letter-spacing: 1px;
  cursor: pointer;
  transition: border-color 0.18s;
}
.room-code-pill:hover {
  border-color: var(--accent);
}
.room-code-pill svg {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}

.share-room-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border2);
  cursor: pointer;
  color: var(--muted);
  transition:
    color 0.18s,
    border-color 0.18s;
}
.share-room-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
.share-room-btn svg {
  width: 14px;
  height: 14px;
}

/* Share modal */
.share-modal {
  max-width: 340px;
}
.share-qr-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  width: 180px;
  height: 180px;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
}
.share-qr-wrap canvas,
.share-qr-wrap img {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.share-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.share-code-label {
  font-size: 12px;
  color: var(--muted);
}
.share-code-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 1.5px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s;
}
.share-code-pill:hover {
  border-color: var(--accent);
}
.share-code-pill svg {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}
.share-link-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.share-link-input {
  flex: 1;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  font-family: monospace;
  color: var(--text);
  white-space: normal;
  word-break: break-all;
  overflow-y: auto;
  resize: none;
  line-height: 1.5;
  margin-bottom: 0;
}
.share-copy-btn {
  flex-shrink: 0;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s;
}
.share-copy-btn:hover {
  opacity: 0.82;
}
/* Shown only when the owner sees both the slug link and the code link */
.share-link-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin: 12px 0 6px;
}

/* Owner first-entry welcome modal */
.welcome-modal {
  max-width: 420px;
}
.welcome-modal .share-link-row {
  margin-bottom: 14px;
}
.welcome-step {
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.5;
}
.welcome-modal .btn-secondary {
  margin-bottom: 18px;
}
.welcome-guide-link {
  display: block;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 14px;
}
.welcome-guide-link:hover {
  color: var(--accent);
}

.room-name-display {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.participants-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}
.participants-badge svg {
  width: 15px;
  height: 15px;
}

.room-timer {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* .leave-btn is now a header-dropdown row — styled near .set-pwd-btn below, which it must override. */

/* ── Room Body ───────────────────────────────────────────────────────────── */
.room-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* Video area */
.video-area {
  flex: 1;
  position: relative;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Video grid */
.video-grid {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 6px;
  padding: 6px;
  align-items: center;
  justify-items: center;
}
.video-tile {
  position: relative;
  background: var(--s2);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.video-tile.speaking {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(var(--green-rgb), 0.35), 0 0 14px rgba(var(--green-rgb), 0.45);
}
.tile-inner {
  position: absolute;
  inset: 0;
  transform-origin: center;
  will-change: transform;
}
.tile-inner video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  transform: scaleX(-1); /* mirror local video */
}
.video-tile.remote .tile-inner video {
  transform: none;
}
.video-tile.screen-share .tile-inner video {
  transform: none;
}
/* The self view is mirrored for the front camera only — a page held up to the back camera
   must not read backwards for the person holding it. Toggled by _updateLocalMirror(). */
.video-tile.no-mirror .tile-inner video {
  transform: none;
}

.tile-label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.tile-label .mic-off {
  color: var(--red);
  font-size: 11px;
}
.speaking-indicator {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}
.video-tile.speaking .speaking-indicator {
  display: inline-flex;
}
.speaking-indicator span {
  display: block;
  width: 3px;
  height: 100%;
  background: var(--green);
  border-radius: 1px;
  transform-origin: bottom;
  animation: speakingBar 0.9s ease-in-out infinite;
}
.speaking-indicator span:nth-child(1) { animation-delay: 0s; }
.speaking-indicator span:nth-child(2) { animation-delay: 0.15s; }
.speaking-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes speakingBar {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

.tile-hand {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 20px;
  animation: bounce 0.6s infinite alternate;
}
/* Connection dropped — waiting for them to come back (room.js _applyConnState). */
.video-tile.conn-lost .tile-inner {
  filter: grayscale(0.85) brightness(0.55);
  transition: filter 0.3s;
}
.tile-conn-lost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  animation: connPulse 1.4s ease-in-out infinite;
}
@keyframes connPulse {
  50% { opacity: 0.55; }
}
.member-row.conn-lost {
  opacity: 0.6;
}
.member-conn-lost {
  color: var(--yellow);
}
@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}

.tile-no-video {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  word-break: break-word;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: var(--s2);
}
/* The round avatar of a tile with no camera (sized by the tile: .video-tile is a size container). */
.tile-no-video-img,
.tile-avatar {
  width: clamp(40px, 24cqw, 168px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  transition: box-shadow .2s;
}
.tile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 11cqw, 76px);
  font-weight: 700;
  color: #fff;
}
/* Who is talking shows on the avatar too, not only on the tile border. */
.video-tile.speaking .tile-avatar,
.video-tile.speaking .tile-no-video-img {
  box-shadow: 0 0 0 4px var(--s2), 0 0 0 7px var(--green);
}

/* Tile action buttons (PiP + Expand) */
.tile-actions {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}
.video-tile:hover .tile-actions {
  opacity: 1;
}
/* Always visible on touch devices (no hover available). Filmstrip tiles keep theirs hidden:
   tapping the tile itself does what its button would. */
@media (pointer: coarse) {
  .tile-actions {
    opacity: 1;
  }
}
.tile-action-btn {
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s;
}
.tile-action-btn:hover {
  background: rgba(var(--accent-rgb), 0.75);
}
.tile-action-btn svg {
  width: 14px;
  height: 14px;
}
.tile-action-btn.hidden { display: none; }
/* The teacher's "show to everyone" carries its words: their click moves the whole class's
   view, and an icon alone doesn't say so. Dropped on tiles too small to fit it. */
.tile-expand-btn.with-label {
  width: auto;
  gap: 6px;
  padding: 0 10px 0 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.video-tile { container-type: inline-size; }
@container (max-width: 220px) {
  .tile-btn-label { display: none; }
  .tile-expand-btn.with-label { width: 28px; padding: 0; }
}
.tile-unfocus-btn:hover { background: rgba(240, 94, 94, 0.85); }

/* ── Class layout: gallery, stage + filmstrip, full view ─────────────────────
   Driven by applyLayout() in room.js (see CLAUDE.md "Class layout"). With nothing on the
   stage the grid is a gallery whose columns/rows JS computes to fit every tile on screen
   (--cols/--rows); a gallery too large for that scrolls (data-scroll, fixed --row-h). With
   a stage, the same grid becomes the filmstrip beside it (wide view) or below it (narrow
   or portrait view — data-strip on the video area). */
.video-grid {
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr)) auto;
}
.video-grid[data-scroll="1"] {
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: start;
  overflow-y: auto;
}
.video-grid[data-scroll="1"] > .video-tile { height: var(--row-h, 110px); }

/* A participant with nothing to show (no camera, not talking) has no tile on screen. */
.video-tile.tile-off { display: none !important; }

/* ── Spotlight Stage ─────────────────────────────────────────────────────── */
#spotlightStage {
  display: none;
  position: relative;
  flex-shrink: 0;
}
#spotlightStage .video-tile {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.video-area.has-spotlight {
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}
.video-area.has-spotlight #spotlightStage {
  display: block;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
/* Filmstrip beside the stage. A flex column of 16:9 tiles; scrolls when long. */
.video-area.has-spotlight .video-grid {
  display: flex !important;
  flex-direction: column;
  width: clamp(150px, 16%, 240px);
  height: 100%;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  gap: 6px;
}
.video-area.has-spotlight .video-grid > .video-tile {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}
.video-area.has-spotlight .video-grid .tile-label { font-size: 10px; }
.video-area.has-spotlight .video-grid .tile-actions { display: none; }
.video-area.has-spotlight .video-grid .video-tile:hover .tile-actions { display: flex; opacity: 1; }
/* Drawing toolbars and the video player's controls are unusable at thumbnail size; clicking
   the thumbnail brings the tile (and them) to the stage. */
.video-area.has-spotlight .video-grid .vs-controls { display: none !important; }
/* Nor can anyone draw on a thumbnail (room.js _isOnStage): a click brings it to the stage, so
   it gets the pointer — !important to beat the inline crosshair set for presenters. */
.video-area.has-spotlight .video-grid .wb-canvas { cursor: pointer !important; }

/* Filmstrip below the stage (phones, portrait tablets, a narrow window). */
.video-area.has-spotlight[data-strip="bottom"] { flex-direction: column; }
.video-area.has-spotlight[data-strip="bottom"] .video-grid {
  flex-direction: row;
  width: 100%;
  height: clamp(76px, 17%, 124px);
  overflow-x: auto;
  overflow-y: hidden;
}
.video-area.has-spotlight[data-strip="bottom"] .video-grid > .video-tile {
  width: auto;
  height: 100%;
}

/* Full view: the stage takes the whole area. */
.video-area.fill-mode .video-grid { display: none !important; }

/* ── Audience button ("+32 more · ✋ 2") ────────────────────────────────────
   Everyone without a tile, as one button that opens the member list. In the gallery it is
   a slim bar across the bottom; beside the stage it is the last item of the filmstrip. */
.audience-tile {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  max-width: 100%;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--s1);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
/* Always the gallery's last (auto-height) row, however few tiles there are. */
.video-grid:not([data-scroll="1"]) > .audience-tile { grid-row: -2 / -1; }
.audience-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.audience-tile.hidden { display: none; }
.audience-tile.has-hands { border-color: var(--yellow); }
.aud-faces { display: inline-flex; flex-shrink: 0; }
.aud-faces > * {
  position: relative;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--s1);
  overflow: hidden;
}
.aud-faces > * + * { margin-inline-start: -8px; }
.aud-faces .avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 700;
}
.aud-count { white-space: nowrap; }
.aud-hands {
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(240, 179, 94, .18);
  color: var(--text);
}
.video-area.has-spotlight .video-grid > .audience-tile {
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  border-radius: 10px;
  min-height: 0;
  padding: 10px 6px;
  font-size: 12px;
  text-align: center;
}
.video-area.has-spotlight[data-strip="bottom"] .video-grid > .audience-tile {
  height: 100%;
  min-width: 96px;
  padding: 6px 10px;
}
.video-area.has-spotlight[data-strip="bottom"] .aud-faces { display: none; }

/* ── Empty gallery: nothing to show yet ────────────────────────────────── */
.stage-empty {
  position: absolute;
  inset: 0 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
}
.stage-empty.hidden { display: none; }
.stage-empty p { max-width: 420px; font-size: 14px; line-height: 1.9; }

/* ── "Back to the teacher's view" (a student's own view) ───────────────── */
.view-back-btn {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
  white-space: nowrap;
}
.view-back-btn:hover { background: var(--accent-h); }
.view-back-btn.hidden { display: none; }
html[dir="rtl"] .view-back-btn svg { transform: scaleX(-1); }

/* Whiteboard tile: wwwroot/whiteboard/whiteboard.css */

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.room-sidebar {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--s1);
  border-left: 1px solid var(--border);
  transition: width 0.2s ease;
}
.room-sidebar.collapsed {
  width: 0;
  overflow: hidden;
}

.sidebar-tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-close-btn {
  display: flex;
  flex-shrink: 0;
  padding: 8px 10px;
  margin-left: auto;
  color: var(--muted);
  transition: color 0.15s;
  align-items: center;
  justify-content: center;
}
.sidebar-close-btn:hover {
  color: var(--text);
}
.sidebar-tab {
  flex: 1;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  position: relative;
}
.sidebar-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.sidebar-tab:hover:not(.active) {
  color: var(--text);
}

.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 5px;
}

/* Corner badge on the footer chat toggle — visible when the sidebar is collapsed
   and unread messages have arrived. .tool-btn is position:relative already. */
.tool-btn-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  margin-left: 0;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  animation: lkPulse 1.2s ease-in-out infinite;
}

.tab-content {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.tab-content.active {
  display: flex;
}

/* Chat tab */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-msg {
  padding: 7px 10px;
  border-radius: 8px;
  max-width: 95%;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
  }
}
.chat-msg.own {
  background: var(--accent-soft);
  align-self: flex-end;
}
.chat-msg.other {
  background: var(--s3);
  align-self: flex-start;
}
.chat-msg.system {
  align-self: center;
  font-size: 12px;
  color: var(--muted);
  background: none;
}
.msg-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.msg-header .avatar-wrap,
.msg-header .avatar-fallback {
  align-self: center;
}
.msg-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.msg-time {
  font-size: 11px;
  color: var(--muted);
}
.msg-text {
  font-size: 14px;
  word-break: break-word;
}
.typing-indicator {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.chat-input-wrap {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-input-wrap input {
  flex: 1;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 14px;
  transition: border-color 0.15s;
}
.chat-input-wrap input:focus {
  border-color: var(--accent);
}
.send-btn {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.send-btn:hover {
  background: var(--accent-h);
}
.send-btn svg {
  width: 16px;
  height: 16px;
}

/* Members tab */
.members-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--s2);
  border: 1px solid var(--border);
  transition: border-color 0.15s;
}
.member-row:hover {
  border-color: var(--border2);
}
.member-info {
  flex: 1;
  min-width: 0;
}
.member-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-role {
  font-size: 11px;
  color: var(--muted);
}
/* Long names: tap to show the whole name (room.js _expandedNames). */
.member-row.name-truncated .member-info,
.member-row.name-expanded .member-info {
  cursor: pointer;
}
.member-row.name-expanded .member-name {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.member-row.name-expanded {
  align-items: flex-start;
}
.member-icons {
  display: flex;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}
.member-icons .on {
  color: var(--green);
}
.member-icons .off {
  color: var(--red);
}

/* Member action dropdown */
.member-actions {
  position: relative;
  flex-shrink: 0;
}
.member-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition:
    background 0.15s,
    color 0.15s;
}
.member-menu-btn:hover {
  background: var(--border);
  color: var(--text);
}
.member-menu {
  position: fixed;
  z-index: 5000;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 6px;
  min-width: 175px;
  max-width: 220px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
/* The member's whole name on top of their menu — the row shows it cut off with "…". */
.menu-fullname {
  padding: 4px 8px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.member-menu.hidden {
  display: none;
}
.menu-section {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.menu-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.menu-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 2px 8px 5px;
  letter-spacing: 0.6px;
}
.menu-role-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  transition: background 0.12s;
}
.menu-role-btn:hover {
  background: var(--border);
}
.menu-role-btn.active {
  color: var(--accent);
  font-weight: 600;
}
.menu-perm-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  transition: background 0.12s;
  user-select: none;
}
.menu-perm-label:hover {
  background: var(--border);
}
.menu-kick-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--red);
  transition: background 0.12s;
}
.menu-kick-btn:hover {
  background: rgba(240, 94, 94, 0.12);
}

/* Files tab */
.files-tab-content {
  flex-direction: column;
  overflow: hidden;
}
.file-drop-zone {
  margin: 10px;
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
}
.file-drop-zone:hover,
.file-drop-zone.drag-over {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.06);
}
.file-drop-zone span {
  display: block;
  font-size: 22px;
  margin-bottom: 6px;
}
.file-drop-zone b {
  color: var(--accent);
  cursor: pointer;
}

.upload-progress-wrap {
  margin: 0 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Rich upload card */
.upload-card {
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.upload-card.remote-upload {
  border-left: 3px solid var(--green);
}
.upload-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.upload-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}
.upload-card-info {
  flex: 1;
  min-width: 0;
}
.upload-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.upload-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  min-width: 28px;
}
.remote-upload .upload-pct {
  color: var(--green);
}
.upload-status-txt {
  font-size: 11px;
  color: var(--muted);
}
.upload-prog-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.upload-prog-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.25s ease;
}
.remote-upload .upload-prog-fill {
  background: var(--green);
}
.upload-card-actions {
  display: flex;
  gap: 6px;
}
.upload-btn {
  flex: 1;
  padding: 4px 6px;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 4px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.upload-btn:hover {
  background: var(--border);
  color: var(--text);
}
.upload-btn.stop-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.files-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
}
.file-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.file-info {
  flex: 1;
  min-width: 0;
}
.file-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.file-actions {
  display: flex;
  gap: 6px;
}
.file-action-btn {
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 12px;
  transition: all 0.15s;
}
.file-action-btn:hover {
  border-color: var(--accent);
}
.file-action-btn.del:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ── Bottom Toolbar ──────────────────────────────────────────────────────── */
.room-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 16px;
  height: 62px;
  flex-shrink: 0;
  background: var(--s1);
  border-top: 1px solid var(--border);
  z-index: 100;
}
.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 56px;
  height: 48px;
  border-radius: 10px;
  padding: 0 8px;
  background: var(--s3);
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  transition: all 0.18s;
  position: relative;
  flex-shrink: 0;
}
.tool-btn svg {
  width: 20px;
  height: 20px;
}
.tool-btn:hover {
  background: var(--s2);
  border-color: var(--border2);
  color: var(--text);
}
.tool-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.tool-btn.danger {
  background: rgba(240, 94, 94, 0.15);
  border-color: rgba(240, 94, 94, 0.3);
  color: var(--red);
}
.tool-btn.danger:hover {
  background: var(--red);
  color: #fff;
}
.tool-btn.off {
  background: rgba(240, 94, 94, 0.12);
  border-color: rgba(240, 94, 94, 0.25);
  color: var(--red);
}
.tool-sep {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 3px;
}

/* Mic / camera + the caret that opens their device menu, drawn as one split control.
   Logical radii, so the joined edges follow the caret to the left in RTL. */
.tool-split {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex-shrink: 0;
}
.tool-split.has-caret > .tool-btn {
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
}
.tool-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 48px;
  padding: 0;
  flex-shrink: 0;
  background: var(--s3);
  border: 1px solid var(--border);
  border-radius: 10px;
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  color: var(--muted);
  transition: all 0.18s;
}
.tool-caret svg {
  width: 12px;
  height: 12px;
}
.tool-caret:hover:not(:disabled),
.tool-caret.open {
  background: var(--s2);
  border-color: var(--border2);
  color: var(--text);
}
.tool-caret:disabled {
  opacity: 0.45;
  cursor: default;
}
/* The caret wears its button's state — teal while the mic/camera is on, the red tint while
   it's off — so the pair reads as one control rather than a grey stub beside it. */
.tool-btn.active + .tool-caret {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.tool-btn.active + .tool-caret:hover:not(:disabled),
.tool-btn.active + .tool-caret.open {
  background: var(--accent-h);
  border-color: var(--accent-h);
  color: var(--on-accent);
}
.tool-btn.off + .tool-caret {
  background: rgba(240, 94, 94, 0.12);
  border-color: rgba(240, 94, 94, 0.25);
  color: var(--red);
}
.tool-btn.off + .tool-caret:hover:not(:disabled),
.tool-btn.off + .tool-caret.open {
  background: rgba(240, 94, 94, 0.22);
  border-color: rgba(240, 94, 94, 0.4);
  color: var(--red);
}

/* Device menu — position: fixed and appended to <body>, because the toolbar scrolls
   horizontally on phones and would clip anything positioned inside it. */
.dev-menu {
  position: fixed;
  z-index: 5000;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 16px));
  overflow-y: auto;
  padding: 6px;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
.dev-menu-title {
  padding: 4px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.dev-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  text-align: start;
  transition: background 0.12s;
}
.dev-menu-item:hover {
  background: var(--border);
}
.dev-menu-item.active {
  color: var(--accent);
  font-weight: 600;
}
.dev-menu-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.dev-menu-item .dev-check {
  visibility: hidden;
}
.dev-menu-item.active .dev-check {
  visibility: visible;
}
/* Device names are the browser's own (usually English) labels; plaintext keeps their
   word order intact inside the Persian menu. */
.dev-menu-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}
.dev-menu-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}

/* ── Sidebar backdrop (mobile overlay) ──────────────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 299;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-backdrop.active {
  display: block;
}

/* ── Mobile layout (≤ 700px) ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Header: compact single row */
  .room-header {
    padding: 0 10px;
    height: 52px;
    gap: 0;
  }
  .room-header-left {
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }
  .room-logo {
    font-size: 16px;
    flex-shrink: 0;
  }
  /* Wordmark dropped, icon kept — frees the space the name/share row actually needs. */
  .room-logo span {
    display: none;
  }
  /* The code pill duplicates what's now in the share modal — drop it, share-btn is the one mobile entry point. */
  .room-code-pill {
    display: none;
  }
  .room-name-display {
    flex: 1;
    min-width: 0;
    max-width: 220px;
    font-size: 13px;
  }
  .share-room-btn {
    flex-shrink: 0;
  }
  .room-header-center {
    gap: 8px;
    flex-shrink: 0;
    margin: 0 6px;
  }
  .participants-badge {
    font-size: 11px;
  }
  .participants-badge svg {
    width: 13px;
    height: 13px;
  }
  .room-timer {
    font-size: 11px;
  }
  .room-header-right {
    gap: 6px;
    flex-shrink: 0;
  }

  /* Sidebar: full-height slide-in overlay from right */
  .room-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 88vw);
    z-index: 300;
    transform: translateX(110%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.6);
  }
  /* collapsed has no effect on mobile — transform handles visibility */
  .room-sidebar.collapsed {
    transform: translateX(110%);
    width: min(300px, 88vw);
    overflow: visible;
  }
  .room-sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Toolbar: horizontal scroll strip */
  .room-toolbar {
    height: 54px;
    padding: 4px 8px;
    gap: 4px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      black 10px,
      black calc(100% - 10px),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      black 10px,
      black calc(100% - 10px),
      transparent
    );
  }
  .room-toolbar::-webkit-scrollbar {
    display: none;
  }
  .tool-btn {
    min-width: 44px;
    height: 40px;
    padding: 0 6px;
    border-radius: 10px;
    flex-shrink: 0;
  }
  .tool-btn svg {
    width: 18px;
    height: 18px;
  }
  .tool-btn span {
    display: none;
  }
  .tool-sep {
    margin: 0 1px;
    height: 26px;
  }
  .tool-split {
    gap: 1px;
  }
  .tool-caret {
    width: 16px;
    height: 40px;
  }

  /* Toast above toolbar */
  .toast {
    bottom: calc(54px + 10px);
  }
}

/* A finger needs a wider target than a mouse pointer (WCAG 2.2: at least 24px). After the
   phone-width block above on purpose, so it wins over its 16px on a touch phone. */
@media (pointer: coarse) {
  .tool-caret {
    width: 24px;
  }
}

/* ── Room-menu action rows (Upgrade / Settings / Attendance / Set Password) ── */
.set-pwd-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.set-pwd-btn:hover {
  background: var(--border);
  color: var(--text);
  border-color: var(--accent);
}
.room-lock-icon {
  font-size: 12px;
  margin-right: 2px;
}

/* Leave button, relocated from the header bar into this dropdown — same red identity as before. */
.leave-btn {
  font-weight: 600;
  background: rgba(240, 94, 94, 0.15);
  color: var(--red);
  border-color: rgba(240, 94, 94, 0.3);
  margin-top: 4px;
  border-top: 1px solid var(--border2);
}
.leave-btn:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* ── LiveKit status dot ──────────────────────────────────────────────────── */
.lk-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.3s;
}
.lk-status-dot.lk-connecting {
  background: #f59e0b;
  animation: lkPulse 1.2s ease-in-out infinite;
}
.lk-status-dot.lk-connected {
  background: #22c55e;
}
.lk-status-dot.lk-disconnected {
  background: #ef4444;
}
@keyframes lkPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ── LiveKit connecting banner ───────────────────────────────────────────── */
.lk-connecting-banner {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: rgba(15, 118, 110, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.lk-connecting-banner svg {
  flex-shrink: 0;
  opacity: 0.85;
  animation: lkPulse 1.2s ease-in-out infinite;
}
.lk-connecting-banner span {
  flex: 1;
  min-width: 0;
}

/* ── LiveKit reconnect banner ────────────────────────────────────────────── */
.lk-reconnect-banner {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 50; /* below sidebar (300) — never blocks the UI */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: rgba(160, 40, 40, 0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.lk-reconnect-banner svg {
  flex-shrink: 0;
  opacity: 0.85;
}
.lk-reconnect-banner span {
  flex: 1;
  min-width: 0;
}
.lk-reconnect-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.lk-reconnect-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}
.lk-dismiss-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}
.lk-dismiss-btn:hover {
  color: #fff;
}

/* ── Profile page ─────────────────────────────────────────────────────────── */
.profile-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 16px 60px;
}
.profile-sidebar {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 10px;
  position: sticky;
  top: 28px;
}
.profile-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.profile-nav-btn:hover {
  background: var(--s3);
  color: var(--text);
}
.profile-nav-btn.active {
  background: var(--accent);
  color: var(--on-accent);
}
.profile-content {
  flex: 1;
  min-width: 0;
}
.profile-section {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 28px;
}
.profile-section h2 {
  font-size: 18px;
  margin-bottom: 18px;
}
.profile-rooms-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.profile-rooms-total {
  font-size: 13px;
  color: var(--muted);
}
.profile-section input.profile-rooms-search {
  margin-bottom: 16px;
}
.profile-subheading {
  font-size: 14px;
  color: var(--muted);
  margin: 22px 0 10px;
}
@media (max-width: 720px) {
  .profile-layout {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 12px 40px;
  }
  /* flex: none — the desktop 200px flex-basis would otherwise become a 200px height
     once the layout is a column. */
  .profile-sidebar {
    flex: none;
    flex-direction: row;
    position: static;
    width: 100%;
    overflow-x: auto;
  }
  .profile-nav-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .profile-section {
    padding: 18px;
  }
}

/* ── Room settings & upgrade modals ─────────────────────────────────────── */
.modal-wide {
  max-width: 520px;
}
.upgrade-wallet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
.upgrade-wallet-bar-label {
  color: var(--muted);
}
.upgrade-wallet-bar-val {
  color: var(--green);
  font-weight: 600;
  margin-inline-start: 4px;
}
.upgrade-wallet-bar .btn {
  width: auto;
  padding: 6px 14px;
  font-size: 12px;
  flex-shrink: 0;
}
.upgrade-auth-required {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  background: rgba(240, 179, 94, 0.1);
  border: 1px solid var(--yellow);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text);
}
.upgrade-auth-required span {
  flex: 1;
  min-width: 180px;
}
.upgrade-auth-required .btn {
  width: auto;
  padding: 6px 14px;
  font-size: 12px;
  flex-shrink: 0;
}
.settings-name-group {
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.settings-name-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 7px;
  letter-spacing: 0.3px;
}
.settings-name-input {
  width: 100%;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  transition: border-color 0.18s;
}
.settings-name-input:focus {
  border-color: var(--accent);
}
.settings-name-group + .settings-name-group {
  margin-top: 12px;
}
/* A URL fragment: always LTR, even on the Persian page */
.settings-slug-input {
  direction: ltr;
  text-align: left;
  font-family: monospace;
}
.settings-slug-preview {
  margin-top: 7px;
  font-size: 12px;
  font-family: monospace;
  color: var(--muted);
  direction: ltr;
  text-align: left;
  word-break: break-all;
  line-height: 1.5;
}
/* The "no slug" note is prose, not a URL — follow the page direction and font */
.settings-slug-preview.settings-slug-empty {
  font-family: inherit;
  direction: inherit;
  text-align: start;
}
.settings-slug-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.settings-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}
.settings-label:last-of-type {
  border-bottom: none;
}
.settings-label span {
  flex: 1;
}
.upgrade-status {
  background: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── Upgrade modal shell: fixed header + scrolling body + fixed footer ────────
   The plan list can grow past the viewport, so the ✕ and the Close button both stay
   put instead of requiring a scroll to the very bottom to dismiss the modal. */
.modal.upgrade-modal {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow: hidden;
}
.upgrade-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--s2);
}
.upgrade-modal-header h3 {
  margin-bottom: 0;
  font-size: 17px;
}
.upgrade-modal-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.upgrade-modal-close svg {
  width: 15px;
  height: 15px;
}
.upgrade-modal-close:hover {
  color: var(--text);
  background: var(--s1);
  border-color: var(--accent);
}
.upgrade-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px;
}
.upgrade-modal-footer {
  flex-shrink: 0;
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  background: var(--s2);
}

/* ── Current-capacity panel ─────────────────────────────────────────────── */
.upgrade-capacity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.upgrade-capacity-caption {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.upgrade-capacity-sub {
  font-size: 11.5px;
  color: var(--muted);
  opacity: 0.85;
}
.upgrade-capacity-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
}
.upgrade-capacity-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.upgrade-capacity-unit {
  font-size: 12px;
  color: var(--muted);
}

/* Exact expiry — the point of this block is that "0 days left" is never the whole story. */
.upgrade-expiry {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed var(--border2);
}
.upgrade-expiry-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--yellow);
}
.upgrade-expiry-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.upgrade-expiry-left {
  font-size: 11.5px;
  color: var(--yellow);
}

.upgrade-empty {
  padding: 22px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* ── Plan cards ─────────────────────────────────────────────────────────── */
.upgrade-plan-card {
  position: relative;
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.upgrade-plan-card:not(.is-locked):hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
/* The cheapest tier the room can actually move up to — the one card meant to pull the eye. */
.upgrade-plan-card.is-recommended {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 20px rgba(var(--accent-rgb), 0.18);
}
.upgrade-plan-card.is-active-plan {
  border-color: var(--green);
}
.upgrade-plan-card.is-locked {
  opacity: 0.62;
}
.upgrade-plan-badge {
  position: absolute;
  top: -9px;
  inset-inline-start: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.upgrade-plan-badge.is-active {
  background: var(--green);
}
.upgrade-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.upgrade-plan-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 5px;
}
.upgrade-plan-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.upgrade-plan-spec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.upgrade-plan-spec svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.upgrade-plan-rate {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  text-align: end;
}
.upgrade-plan-rate-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.upgrade-plan-rate-unit {
  font-size: 10.5px;
  color: var(--muted);
}

/* ── Per-card notes: why this costs less, or why it can't be bought yet ─── */
.upgrade-plan-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
}
.upgrade-plan-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.upgrade-plan-note.is-credit {
  background: rgba(var(--green-rgb), 0.13);
  border: 1px solid var(--green);
  color: var(--text);
}
.upgrade-plan-note.is-extend {
  background: rgba(240, 179, 94, 0.1);
  border: 1px solid var(--yellow);
  color: var(--text);
}
.upgrade-plan-note.is-locked {
  background: var(--s2);
  border: 1px solid var(--border2);
  color: var(--muted);
}

.upgrade-plan-select {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.upgrade-days-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.upgrade-days-input {
  width: 62px;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text);
  text-align: center;
  outline: none;
}
.upgrade-days-input:focus {
  border-color: var(--accent);
}
.upgrade-plan-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin-inline-start: auto;
  line-height: 1.25;
}
.upgrade-plan-total-orig {
  font-size: 11px;
  color: var(--muted);
  text-decoration: line-through;
}
.upgrade-plan-total {
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
}
.upgrade-plan-save {
  margin-top: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--green);
  text-align: end;
}
.upgrade-plan-minhint {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--red);
}
.btn-upgrade-buy {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 7px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  border: none;
  flex-shrink: 0;
}
.upgrade-plan-card.is-active-plan .btn-upgrade-buy {
  background: var(--green);
}
.btn-upgrade-buy:hover:not(:disabled) {
  background: var(--accent-h);
}
.btn-upgrade-buy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Tab overlays ────────────────────────────────────────────────────────── */
.tab-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8000;
  backdrop-filter: blur(8px);
}
.tab-overlay-content {
  text-align: center;
  max-width: 360px;
  width: 90%;
  padding: 40px 32px;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.tab-overlay-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.tab-overlay-content h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.tab-overlay-content p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RTL OVERRIDES — active when html[dir="rtl"] (Persian / fa)
   ═══════════════════════════════════════════════════════════════════════════ */

html[dir="rtl"] body {
  font-family:
    "Vazirmatn",
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
}

/* ── Home page ───────────────────────────────────────────────────────────── */
html[dir="rtl"] .action-card:first-child {
  border-right: none;
  border-left: 1px solid var(--border);
}
html[dir="rtl"] .name-input-wrap input {
  padding: 12px 0 12px 14px;
}
html[dir="rtl"] .my-rooms-section {
  text-align: right;
}
html[dir="rtl"] .my-room-card {
  text-align: right;
}
html[dir="rtl"] .my-room-code {
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] .my-room-time {
  margin-left: 0;
  margin-right: auto;
}

/* ── Keep codes, phone numbers, and OTP inputs LTR always ────────────────── */
html[dir="rtl"] .join-row input {
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] .room-code-pill {
  direction: ltr;
}
html[dir="rtl"] .share-code-pill {
  direction: ltr;
}
html[dir="rtl"] .share-link-input {
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] .auth-phone-display {
  direction: rtl;
  letter-spacing: 0;
}
html[dir="rtl"] #authPhoneDisplay {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ── Video tiles (absolute-positioned elements flip sides) ───────────────── */
html[dir="rtl"] .tile-label {
  left: auto;
  right: 10px;
}
html[dir="rtl"] .tile-hand {
  right: auto;
  left: 8px;
}
html[dir="rtl"] .tile-actions {
  right: auto;
  left: 8px;
}

/* ── Room header ─────────────────────────────────────────────────────────── */
html[dir="rtl"] .room-lock-icon {
  margin-right: 0;
  margin-left: 2px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
html[dir="rtl"] .room-sidebar {
  border-left: none;
  border-right: 1px solid var(--border);
}
html[dir="rtl"] .sidebar-close-btn {
  margin-left: 0;
  margin-right: auto;
}
html[dir="rtl"] .unread-badge {
  margin-left: 0;
  margin-right: 5px;
}

/* ── Member dropdown ─────────────────────────────────────────────────────── */
/* .member-menu position is JS-controlled (position:fixed) — no RTL override needed */
html[dir="rtl"] .menu-role-btn {
  text-align: right;
}
html[dir="rtl"] .menu-kick-btn {
  text-align: right;
}

/* ── Files tab ───────────────────────────────────────────────────────────── */
html[dir="rtl"] .upload-card.remote-upload {
  border-left: none;
  border-right: 3px solid var(--green);
}

/* ── AI Assistant section (inside chat tab) ──────────────────────────────── */

/* When AI section is active, the chat tab becomes a vertical split */
#tab-chat {
  flex-direction: column;
}
.chat-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* ── AI Analyze button: idle ↔ loading states ── */
.analyze-icon-spin {
  display: none;
  transform-origin: center;
}
@keyframes ai-spin {
  to {
    transform: rotate(360deg);
  }
}
#aiAnalyzeBtn.loading .analyze-icon-idle {
  display: none;
}
#aiAnalyzeBtn.loading .analyze-icon-spin {
  display: inline-block;
  animation: ai-spin 0.7s linear infinite;
}
#aiAnalyzeBtn.loading {
  cursor: wait;
}
#aiAnalyzeBtn:not(.loading):hover {
  color: var(--accent);
}

/* ── Auto-analysis pulse dot (Tier 2 background run) ── */
.ai-monitor-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 4px;
  flex-shrink: 0;
  animation: ai-monitor-pulse 1.2s ease-in-out infinite;
}
.ai-monitor-pulse.hidden {
  display: none !important;
}
@keyframes ai-monitor-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.75);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* ── AI Monitor alert badge on section header ── */
.ai-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  padding: 0 4px;
  margin-left: 4px;
  line-height: 1;
  vertical-align: middle;
}
.ai-alert-badge.hidden {
  display: none;
}

/* ── AI Monitor alert list ── */
.ai-alerts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.ai-alerts.hidden {
  display: none;
}
.ai-alert {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  border-left: 3px solid transparent;
}
.ai-alert-high {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
}
.ai-alert-medium {
  background: rgba(234, 179, 8, 0.1);
  border-color: #eab308;
}
.ai-alert-low {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
}
.ai-alert-icon {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.4;
}
.ai-alert-text {
  flex: 1;
  color: var(--text);
}
.ai-alert-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 15px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.ai-alert-dismiss:hover {
  color: var(--red, #ef4444);
}
html[data-theme="light"] .ai-alert-high {
  background: rgba(239, 68, 68, 0.08);
}
html[data-theme="light"] .ai-alert-medium {
  background: rgba(234, 179, 8, 0.08);
}
html[data-theme="light"] .ai-alert-low {
  background: rgba(34, 197, 94, 0.08);
}

.ai-section {
  flex: 0 0 42%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 2px solid var(--border);
}
.ai-section.hidden {
  display: none !important;
}
/* When AI section is hidden, chat section fills the whole tab */
.ai-section.hidden ~ .chat-section,
#tab-chat:not(:has(.ai-section:not(.hidden))) .chat-section {
  flex: 1;
}

.ai-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--s2);
}
.ai-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-msg {
  max-width: 88%;
  font-size: 13px;
  line-height: 1.5;
  border-radius: var(--radius);
  padding: 8px 12px;
  word-break: break-word;
}
.ai-msg.user {
  background: var(--accent-soft);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
}
.ai-msg.assistant {
  background: var(--s3);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-msg.streaming .ai-msg-body::after {
  content: "▌";
  animation: ai-blink 0.7s step-end infinite;
  opacity: 0.7;
}
@keyframes ai-blink {
  50% {
    opacity: 0;
  }
}

/* Markdown rendered content in AI assistant messages */
.ai-msg-body {
  min-width: 0;
}
.ai-msg-body p {
  margin: 0;
}
.ai-msg-body p + p {
  margin-top: 5px;
}
.ai-msg-body h1,
.ai-msg-body h2,
.ai-msg-body h3,
.ai-msg-body h4,
.ai-msg-body h5,
.ai-msg-body h6 {
  font-weight: 600;
  line-height: 1.3;
  margin: 8px 0 3px;
}
.ai-msg-body h1 {
  font-size: 1.15em;
}
.ai-msg-body h2 {
  font-size: 1.07em;
}
.ai-msg-body h3,
.ai-msg-body h4,
.ai-msg-body h5,
.ai-msg-body h6 {
  font-size: 1em;
}
.ai-msg-body strong {
  font-weight: 600;
}
.ai-msg-body em {
  font-style: italic;
}
.ai-msg-body ul,
.ai-msg-body ol {
  padding-left: 1.4em;
  margin: 3px 0;
}
.ai-msg-body li {
  margin: 2px 0;
}
.ai-msg-body code {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: monospace;
  font-size: 0.88em;
}
.ai-msg-body pre {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 5px 0;
}
.ai-msg-body pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
  border-radius: 0;
}
.ai-msg-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  color: var(--muted);
  margin: 5px 0;
}
.ai-msg-body table {
  border-collapse: collapse;
  font-size: 0.9em;
  margin: 5px 0;
  width: 100%;
}
.ai-msg-body th,
.ai-msg-body td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: left;
}
.ai-msg-body th {
  background: rgba(0, 0, 0, 0.2);
  font-weight: 600;
}
.ai-msg-body a {
  color: var(--accent);
  text-decoration: underline;
}
.ai-msg-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}
html[data-theme="light"] .ai-msg-body code {
  background: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .ai-msg-body pre {
  background: rgba(0, 0, 0, 0.06);
}

.ai-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 16px;
  height: 22px;
}
.ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: ai-dot-bounce 0.9s infinite;
}
.ai-dot:nth-child(2) {
  animation-delay: 0.15s;
}
.ai-dot:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes ai-dot-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
}

/* ── Waiting queue: header indicator (Owner/Manager) ─────────────────────── */
.queue-menu-wrap {
  position: relative;
}
.queue-menu-wrap.hidden {
  display: none;
}
.queue-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--s3);
  border: 1px solid #eab308;
  border-radius: var(--radius-sm);
  color: #eab308;
  cursor: pointer;
  transition: all 0.15s;
}
.queue-btn:hover {
  background: #eab308;
  color: #fff;
}
.queue-btn .unread-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  margin-left: 0;
  background: #ef4444;
  animation: queue-badge-pulse 1.6s ease-in-out infinite;
  color: #fff;
}
@keyframes queue-badge-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}
.queue-panel {
  min-width: 240px;
}
.queue-panel .ai-alerts {
  max-height: 220px;
  overflow-y: auto;
}

/* ── Waiting room (full-page state shown to a joiner while the room is full) ─ */
.waiting-room-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 24px;
  background: var(--bg);
  text-align: center;
}
.waiting-room-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 380px;
}
.waiting-room-icon-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.waiting-room-icon {
  width: 56px;
  height: 56px;
  color: var(--accent);
  animation: waiting-room-tick 2.4s ease-in-out infinite;
}
@keyframes waiting-room-tick {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(8deg);
  }
}
.waiting-room-pulse-dot {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  animation: ai-monitor-pulse 1.2s ease-in-out infinite;
}
.waiting-room-card h2 {
  color: var(--text);
  margin: 0;
}
.waiting-room-msg {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
}
.waiting-room-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.waiting-room-count span:first-child {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
}
.waiting-room-count span:last-child {
  font-size: 13px;
  color: var(--muted);
}
.waiting-room-hint {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0;
  max-width: 320px;
}
.waiting-room-card .btn {
  width: auto;
  padding: 9px 28px;
  margin-top: 8px;
}

.ai-input-wrap {
  padding: 6px 8px 8px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background: var(--s1);
  flex-shrink: 0;
}
.ai-input {
  flex: 1;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: var(--text);
  font-size: 13px;
  resize: none;
  font-family: inherit;
  line-height: 1.4;
  transition: border 0.15s;
  min-height: 34px;
  max-height: 100px;
}
.ai-input:focus {
  border-color: var(--accent);
  outline: none;
}
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  border-radius: 4px;
  transition: all 0.15s;
}
.btn-icon:hover {
  color: var(--text);
  background: var(--s3);
}
.ai-clear-btn:hover {
  color: var(--red) !important;
}

/* AI forward button on chat messages */
.msg-ai-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.55;
  transition:
    opacity 0.15s,
    background 0.15s;
}
.has-ai .chat-msg:hover .msg-ai-btn {
  display: inline-flex;
  align-items: center;
}
.msg-ai-btn:hover {
  opacity: 1;
  background: var(--accent-soft);
}
/* always visible on touch screens */
@media (pointer: coarse) {
  .has-ai .msg-ai-btn {
    display: inline-flex !important;
    opacity: 0.7;
  }
}

/* Copy button on AI assistant messages */
.ai-copy-btn {
  display: inline-block;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  opacity: 0;
  padding: 0 2px;
  margin-left: 4px;
  vertical-align: middle;
  transition: opacity 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.ai-msg.assistant:hover .ai-copy-btn {
  opacity: 0.6;
}
.ai-copy-btn:hover {
  opacity: 1 !important;
}
@media (pointer: coarse) {
  .ai-copy-btn {
    opacity: 0.6;
  }
}

html[dir="rtl"] .ai-alert {
  border-left: none;
  border-right: 3px solid transparent;
}
html[dir="rtl"] .ai-alert-high {
  border-right-color: #ef4444;
}
html[dir="rtl"] .ai-alert-medium {
  border-right-color: #eab308;
}
html[dir="rtl"] .ai-alert-low {
  border-right-color: #22c55e;
}
html[dir="rtl"] .ai-alert-badge {
  margin-left: 0;
  margin-right: 4px;
}
html[dir="rtl"] .ai-msg.user {
  align-self: flex-start;
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: 4px;
}
html[dir="rtl"] .ai-msg.assistant {
  align-self: flex-end;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: 4px;
}
html[dir="rtl"] .ai-input {
  text-align: right;
}
html[dir="rtl"] .ai-copy-btn {
  margin-left: 0;
  margin-right: 4px;
}
html[dir="rtl"] .ai-msg-body ul,
html[dir="rtl"] .ai-msg-body ol {
  padding-left: 0;
  padding-right: 1.4em;
}
html[dir="rtl"] .ai-msg-body blockquote {
  border-left: none;
  border-right: 3px solid var(--accent);
  padding-left: 0;
  padding-right: 10px;
}
html[dir="rtl"] .ai-msg-body th,
html[dir="rtl"] .ai-msg-body td {
  text-align: right;
}

/* ── Mobile (≤ 700px) ────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  html[dir="rtl"] .room-sidebar {
    right: auto;
    left: 0;
    transform: translateX(-110%);
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.6);
  }
  html[dir="rtl"] .room-sidebar.collapsed {
    transform: translateX(-110%);
    width: min(300px, 88vw);
  }
  html[dir="rtl"] .room-sidebar.mobile-open {
    transform: translateX(0);
  }

  html[dir="rtl"] .room-toolbar {
    -webkit-mask-image: linear-gradient(
      to left,
      transparent,
      black 10px,
      black calc(100% - 10px),
      transparent
    );
    mask-image: linear-gradient(
      to left,
      transparent,
      black 10px,
      black calc(100% - 10px),
      transparent
    );
  }
}


/* ── Recording indicator (room header) ───────────────────────────────────────
   Shown to every participant while a class recording is running — this is a
   consent requirement, not decoration, so it is deliberately high-contrast and
   never collapses into an icon-only state. */
.rec-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(240, 94, 94, .15);
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;   /* timer must not jitter as digits change */
  direction: ltr;
}
.rec-indicator-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  animation: recIndicatorPulse 2s ease-in-out infinite;
}
@keyframes recIndicatorPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ── Recording modals (#recordConfirmModal, #recListModal) ──────────────────
   Note both modals' buttons carry the base `.btn` class as well as
   `.btn-primary`/`.btn-secondary`: `.btn` is what holds every shape rule
   (padding, radius, font weight); the colour classes alone render an unstyled
   native button. */

.rec-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Round accent chip, so both dialogs are recognisable at a glance rather than
   opening on a bare line of text. */
.rec-modal-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Cost disclosure */
.rec-cost-box {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 4px 14px;
  margin: 16px 0 12px;
}
.rec-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  font-size: .88rem;
  border-bottom: 1px solid var(--border);
}
.rec-cost-row:last-child { border-bottom: none; }
.rec-cost-row span   { color: var(--muted); }
.rec-cost-row strong { font-size: .95rem; }
/* The rate is the number the decision actually turns on. */
.rec-cost-row:first-child strong { color: var(--accent); }

.rec-cost-note {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 18px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--border2);
}

/* Past-recordings list */
.rec-list-body {
  max-height: 55vh;
  overflow-y: auto;
  margin: 16px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rec-list-item {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  transition: border-color .18s, background .18s;
}
.rec-list-item:hover {
  border-color: var(--accent);
  background: var(--s3);
}
.rec-list-meta { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 5px; }
.rec-list-when { font-weight: 600; font-size: .92rem; }
.rec-list-sub  { font-size: .76rem; color: var(--muted); line-height: 1.6; }
/* Keeps the row's buttons together when the card wraps on a narrow screen. */
.rec-list-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rec-list-empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 0;
  font-size: .9rem;
}

/* Compact button for the dense rows above — three actions per card would
   otherwise overwhelm the metadata they belong to. */
.btn-sm {
  padding: 6px 13px;
  font-size: 12.5px;
  border-radius: 7px;
}

/* Active state for the header record button, matching the REC indicator's colour. */
#recordBtn.is-recording { border-color: var(--red); color: var(--red); }

/* Past-recordings list (room.html #recListModal) */
.rec-list-body { max-height: 55vh; overflow-y: auto; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.rec-list-item { background: var(--s2); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rec-list-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rec-list-when { font-weight: 600; font-size: .9rem; }
.rec-list-sub  { font-size: .78rem; color: var(--muted); }
.rec-list-empty { text-align: center; color: var(--muted); padding: 24px 0; font-size: .9rem; }

/* ── Video playback tile (room.js "VIDEO PLAYBACK") ─────────────────────────
   Controls take the bottom edge like any video player, so the label and tile
   actions move to the top on this tile only. */
.video-share-tile .tile-inner {
  background: #000;
}
.video-share-tile .vs-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* .tile-inner video mirrors every non-remote tile (the selfie view). A film must never be
   mirrored — not for its presenter (a local tile) and not for anyone else. */
.video-share-tile .tile-inner video {
  transform: none;
}
.video-share-tile .tile-label {
  top: 8px;
  bottom: auto;
  max-width: calc(100% - 100px);
}
.video-share-tile .tile-actions {
  top: 8px;
  bottom: auto;
}
.vs-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 3;
}
.vs-overlay.hidden { display: none; }
.vs-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vsSpin 0.9s linear infinite;
}
@keyframes vsSpin { to { transform: rotate(360deg); } }

.vs-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 12px;
  direction: ltr; /* a timeline runs left→right in every language */
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.video-share-tile:hover .vs-controls,
.video-share-tile.is-presenter .vs-controls:focus-within {
  opacity: 1;
  pointer-events: auto;
}
@media (pointer: coarse) {
  .vs-controls { opacity: 1; pointer-events: auto; }
}
.vs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
/* Wrapper only (see room.html) — contributes no box, so the modal lays out as before. */
.pwd-form { display: contents; }

/* The click must always land on the button itself, never on an SVG node that a re-render
   could swap out between mousedown and mouseup. */
.vs-btn svg { pointer-events: none; }
.vs-btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.35); }
.vs-btn.active { border-color: var(--red); }
.vs-btn.vs-stop { color: #f87171; }
.vs-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.vs-seek {
  flex: 1;
  min-width: 60px;
  accent-color: var(--accent);
  cursor: pointer;
}
.vs-progress {
  flex: 1;
  min-width: 60px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.vs-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.5s linear;
}
.vs-state, .vs-vol-icon { display: inline-flex; flex-shrink: 0; }
.vs-volume {
  width: 70px;
  accent-color: var(--accent);
  cursor: pointer;
}
/* Viewers always see that the presenter paused — otherwise a frozen frame looks like lag. */
.video-share-tile.is-paused:not(.is-presenter) .vs-controls { opacity: 1; pointer-events: auto; }
.file-action-btn.video-play-btn { white-space: nowrap; }
.file-action-btn.video-play-btn.is-busy { opacity: 0.45; }

/* ── Profile: withdrawals & bank accounts (see CLAUDE.md "Withdrawals") ───────── */
.withdraw-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 10px; }
.withdraw-stat { background: var(--s2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.withdraw-stat span { font-size: 12px; color: var(--muted); }
.withdraw-stat strong { font-size: 15px; color: var(--text); unicode-bidi: plaintext; text-align: start; }
.withdraw-stat.main { border-color: var(--green); }
.withdraw-stat.main strong { color: var(--green); font-size: 17px; }
.withdraw-stat.muted strong { color: var(--muted); }
.withdraw-form select, .bank-add-form input, .withdraw-form input { width: 100%; }
.bank-account-list, .withdraw-list, .phone-list-list { display: flex; flex-direction: column; gap: 8px; }
.bank-account-card, .phone-list-card, .withdraw-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--s2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.withdraw-item { flex-direction: column; align-items: stretch; gap: 4px; }
.withdraw-item .btn { align-self: flex-start; margin-top: 4px; }
.withdraw-item-main { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.withdraw-item-main strong { unicode-bidi: plaintext; }
.withdraw-item-sub { font-size: 12px; color: var(--muted); }
.bank-account-info, .phone-list-info { min-width: 0; }
.bank-account-name, .phone-list-name { font-weight: 600; color: var(--text); }
.bank-account-num { font-size: 12px; color: var(--muted); font-family: monospace; word-break: break-all; }
.phone-list-actions { display: flex; gap: 6px; flex-shrink: 0; }
.withdraw-status { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 12px; white-space: nowrap; }
.withdraw-status.pending   { background: rgba(240, 179, 94, 0.15); color: var(--yellow); }
.withdraw-status.paid      { background: rgba(var(--green-rgb), 0.15); color: var(--green); }
.withdraw-status.rejected  { background: rgba(240, 94, 94, 0.15);  color: var(--red); }
.withdraw-status.cancelled { background: var(--s3); color: var(--muted); }

/* ── Phone list editor (profile + room settings) ─────────────────────────────── */
.phone-list-editor textarea, .room-access-section textarea { width: 100%; font-family: monospace; resize: vertical; }
.phone-list-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.phone-list-file-row .btn { width: auto; }
.phone-list-invalid { font-size: 12px; color: var(--red); background: rgba(240, 94, 94, 0.08); border-radius: 8px; padding: 8px 10px; word-break: break-word; }

/* ── Private & premium classes: entry pages, badge, owner modals ─────────────── */
.access-entry-card { max-width: 440px; width: 100%; padding: 0 16px; }
.access-entry-icon { font-size: 52px; line-height: 1; margin-bottom: 4px; }
.access-entry-room { font-weight: 700; color: var(--text); margin: 0; }
.access-entry-card .waiting-room-msg { line-height: 1.8; }
.access-entry-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; width: 100%; }
.access-entry-actions .btn { width: auto; min-width: 140px; text-decoration: none; }
.access-entry-terms { width: 100%; background: var(--s2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.access-entry-terms div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.access-entry-terms strong { color: var(--text); unicode-bidi: plaintext; }
.access-entry-alert { width: 100%; margin: 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--red); background: rgba(240, 94, 94, 0.1); }
.access-topup { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.access-topup .wallet-amount-input { width: 100%; }
.access-queue-premium { width: 100%; background: var(--s2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 13px; color: var(--muted); line-height: 1.8; }
.access-queue-premium p { margin: 0 0 4px; }
.access-queue-premium .btn { width: auto; text-decoration: none; display: inline-flex; }

.room-access-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.room-access-badge.private { background: var(--accent-soft); color: var(--accent); }
.room-access-badge.premium { background: rgba(240, 179, 94, 0.15); color: var(--yellow); }

.class-type-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.class-type-row .btn { width: auto; }
.class-type-current { font-weight: 600; color: var(--text); }
.class-type-modal { max-width: 520px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.class-type-body { overflow-y: auto; flex: 1; padding-inline-end: 2px; }
.class-type-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.class-type-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--s2); }
.class-type-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.class-type-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.class-type-option input { margin-top: 4px; flex-shrink: 0; }
.class-type-option span { display: flex; flex-direction: column; gap: 2px; }
.class-type-option strong { color: var(--text); }
.class-type-option small { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.class-type-exempt { margin: 0 0 8px; }
.room-access-section { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.private-new-list { display: flex; flex-direction: column; gap: 6px; }
.premium-share-notice { padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.8; color: var(--text); background: rgba(240, 179, 94, 0.12); border: 1px solid rgba(240, 179, 94, 0.45); font-weight: 600; }
.premium-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.premium-presets .btn { width: auto; }
.premium-ends-display { margin: 0; font-size: 13px; font-weight: 600; color: var(--accent); }
.premium-period-box { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--s2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.premium-period-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13px; }
.premium-period-stats div { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.premium-period-stats strong { color: var(--text); unicode-bidi: plaintext; }
.premium-period-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.premium-period-actions .btn { width: auto; }
.premium-payers-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; margin-top: 8px; }
.premium-payer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--s2); border: 1px solid var(--border); }
.premium-payer-row.refunded { opacity: .6; }
.premium-payer-row .btn { width: auto; flex-shrink: 0; }
.premium-payer-info { min-width: 0; }

/* The generic `.modal input` rule (full width, padding) must not apply to the radio buttons. */
.modal .class-type-option input[type="radio"] { width: auto; margin: 4px 0 0; padding: 0; flex: 0 0 auto; accent-color: var(--accent); }
.profile-section select, .class-type-modal select {
  width: 100%; background: var(--s3); border: 1px solid var(--border2); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 14px; font-size: 15px; color: var(--text); font-family: inherit;
}
.class-type-modal textarea, .profile-section textarea {
  background: var(--s3); border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 10px 14px; color: var(--text); font-size: 14px;
}
.class-type-modal .settings-name-input { margin-bottom: 0; }

/* ── Room-page login modal (auth-modal.js) ───────────────────────────────────── */
.zr-auth-modal { max-width: 400px; width: 100%; }
.zr-auth-modal .zr-auth-step1, .zr-auth-modal .zr-auth-step2 { display: flex; flex-direction: column; gap: 10px; }
.zr-auth-modal .zr-auth-step1.hidden, .zr-auth-modal .zr-auth-step2.hidden { display: none; }
.zr-auth-hint { color: var(--muted); font-size: 13px; margin: 0; }
.zr-auth-reason { margin: -6px 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.7; color: var(--text); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.35); }
.zr-auth-modal .zr-auth-otp { direction: ltr; }
.zr-auth-resend-row { text-align: center; font-size: 13px; color: var(--muted); }
.zr-auth-modal .zr-auth-resend { width: auto; }
.class-type-login { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.35); }
.class-type-login.hidden { display: none; }
.class-type-login .btn { width: auto; flex-shrink: 0; }