/* ==========================================================================
   SABHA — stylesheet
   ==========================================================================
   One structured sheet, in this order:
     1. Tokens        colour roles, type roles, spacing, radii, elevation,
                      layers, motion
     2. Base          box model, page, text defaults (app only)
     3. Layout        shell (app, dock / rail), Page, Section, Card, ListRow,
                      bubble grid, split view, sheets and dialogs
     4. Components    Button, IconButton, fields, Switch, Tabs / Segmented, Badge,
                      Chip, Count, Avatar, EmptyState, StatTile, Toast,
                      Banner, notification panel, chat, poll, media, room, dock,
                      call screens, Watermark
     5. Screens       only what is truly specific to one screen
     6. Login         the approved login screen, isolated (see note there)
     6b. Splash       the first-paint brand screen before sign-in / the app
     7. Utilities     .hidden, .sr-only

   DESIGN SYSTEM
   -------------
   Colour roles  yellow  = page headers, highlights, the active dock pill
                 blue    = navigation (dock / rail), selection, icons, headings, secondary
                           actions, links
                 green   = primary actions (Join, Send, Approve, Go live),
                           good / on states
                 red     = LIVE, danger, counts only
   Type scale    page-title 26/800 display · stat 24/700 display ·
                 dialog-title 20/800 display · conversation-title 18/800
                 display · section-title 17/700 display · emphasis 16/700 ·
                 row-title 15/600 (1.3) · body 15/400 (1.45) · secondary
                 14/400–600 · meta 13/400 (1.35) · label 13/600 ·
                 caption 12/600 · micro 11/700 (badges, counts, LIVE) ·
                 button 15/600 (small 14/600). No half sizes.
   Spacing       4 8 12 16 20 24 32 — every gap, margin and padding is one
                 of these. 1–2px only for hairline dividers, the 2px gap
                 inside a title + meta text stack and inside a tab strip.
   Rhythm        page header → 16 → sub-tabs → 16 → first section ·
                 section title → 12 → content · between sections 24 ·
                 card padding 16 · list row min 64 with 12 above and below ·
                 page gutter 16 (phone side margin, chat, dock), content
                 column 1040 on desktop, sheet gutter 20 (inside dialogs and
                 sheets)
   Icons         12 badge / meta · 14 in a button · 16 icon button, tile ·
                 18 control (composer, room controls) · 20 feature tile ·
                 24 empty state
   Avatars       32 chip · 40 row, header · 56 info · 72 profile, bubble,
                 stage tile
   Numbers       counts, stats, times and phone numbers use tabular digits
   Radii         6 badge · 10 small button · 12 button, field, tile ·
                 16 card · 20 sheet · 24 page header · full (pill, circle)
   Elevation     e1 card · e2 popover, dock · e3 sheet, dialog
   Layers        page 1 · chat overlay 5 · dock 900 · sheet 3000 ·
                 dialog 4000 · preview 4500 · call 5000 · gallery 99990 ·
                 viewer 99999 · toast, banner 100000 · splash 100001
                 (start-up only) · inside a stage or
                 call: video 3 · watermark 3 (after it) · labels, controls 4+
   Motion        press 120ms · fade 160ms · sheet 220ms (one-shot only)

   Layout primitives
     Page      .hero (header: title + icon buttons only) + .st-strip (optional
               sub-tabs) + .st-panels > .st-panel > .st-body (one gutter, max
               1040px). Primary actions sit in the body, in .page-actions.
     Section   .ui-section-head > .ui-section-title (+ optional action)
     Card      .ui-card, list cards (.adm-list, .reg-list …), content cards
     ListRow   40px leading avatar / blue icon tile (top-aligned with the
               title) · title + meta · trailing slot; in a list card
     EmptyState .ui-empty: round icon + title + optional hint (.ui-empty-sm is
               the compact one, same anatomy)
     Grid      .bb-grid of .bb bubbles
     Dialog    .ui-modal-card: .ui-modal-head (title + close) · body ·
               .ui-modal-actions (one primary + optional secondary)

   !important is used only in the Utilities (a hidden element must stay
   hidden whatever component it is) and inside the isolated Login section
   (verbatim legacy declarations, kept so the approved screen is unchanged).
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* brand */
  --yellow: #F4C016;        --yellow-deep: #E4AE0C;   --yellow-tint: #FFF6D9;   --yellow-ink: #5A4200;
  --blue: #203080;          --blue-hover: #2A3C99;    --blue-press: #18246A;    --blue-tint: #DDE3F6;
  --blue-line: #C9D1EE;     --blue-wash: #F2F4FB;
  --green: #1A7A3A;         --green-hover: #146A32;   --green-press: #0F5429;   --green-tint: #E6F2E9;
  /* White text never sits on --red (4.2:1, under AA's 4.5:1 for 12-14 px):
     the LIVE badges, counts and danger buttons use --red-deep (5.6:1). */
  --red: #E53935;           --red-deep: #C62828;      --red-tint: #FDECEC;      --red-line: #EFC3C1;
  /* neutrals */
  --bg: #FBFAF4;            --surface: #FFFFFF;       --fill: #F2F1E9;          --fill-2: #ECEBE2;
  --line: #EEEADD;          --border: #E8E3D3;        --border-strong: #D2CEBC;
  --ink: #1D1D18;           --ink-2: #45453B;         --muted: #6B6B5E;
  --disabled-bg: #ECEAE1;   --disabled-fg: #A09E90;
  /* video stage (dark) */
  --st-bg: #0E1511;         --st-surface: #151F18;    --st-raised: #213026;     --st-hover: #2B3D31;
  --st-border: #27362C;     --st-text: #F3F3EE;       --st-muted: #A9B3AB;     --st-speaking: #37B866;
  --wm-ink: rgba(255, 255, 255, .10);   /* watermark text, light tone (shows on dark frames) */
  --wm-ink-shade: rgba(0, 0, 0, .10);   /* watermark text, dark tone (shows on bright frames) */
  /* type */
  --font-body: 'Outfit', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Outfit', sans-serif;
  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --gutter: 16px; --sheet-gutter: 20px; --page-max: 1040px; --rail-w: 88px;
  /* radii */
  --r-badge: 6px; --r-sm: 10px; --r-md: 12px; --r-card: 16px; --r-sheet: 20px; --r-header: 24px; --r-full: 999px;
  /* elevation */
  --e1: 0 1px 2px rgba(60, 45, 0, .05), 0 4px 12px rgba(60, 45, 0, .04);
  --e2: 0 8px 24px rgba(0, 0, 0, .16);
  --e3: 0 16px 40px rgba(0, 0, 0, .22);
  /* sizes */
  --control: 44px; --control-sm: 36px; --icon-btn: 40px; --avatar: 40px;
  --dock-h: 64px; --dock-gap: 10px;
  /* dock / rail: blue bar, yellow pill behind the active icon. Ink = inactive
     icon + label (7.1:1 on the bar); cut = holes inside the solid active
     icons (always the pill colour). */
  --dock-bg: var(--blue);        --dock-shadow: var(--e2);
  --dock-ink: #C5C9DE;           --dock-ink-active: #FFFFFF;
  --dock-pill: var(--yellow);    --dock-pill-ink: var(--blue);
  --dock-hover: rgba(255, 255, 255, .10); --dock-focus: var(--yellow);
  /* motion */
  --t-press: 120ms; --t-fade: 160ms; --t-sheet: 220ms;
  --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom);
  --ring: 0 0 0 3px rgba(26, 122, 58, .2);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
/* No double-tap zoom (testers: two quick taps on a reaction zoomed the page,
   and in the iPhone app it then stayed zoomed, since Capacitor turns pinch
   off). touch-action is not inherited, and WebKit starts again from "auto"
   at every scroll box (the chat, the panels, the profile page), so the html
   rule alone does not reach inside them: every element gets it, at zero
   specificity (:where), so any rule that sets touch-action still wins (the
   filmstrips' pan-x pan-y). Pan and pinch-zoom stay: the website can still
   be pinch-zoomed. Controls also say it themselves (old engines without
   :where), and buttons are never selected or given the iOS callout by a
   quick double tap or a long press. Only real buttons and the tap targets
   named here: a [role="button"] row (a dashboard announcement, a group
   bubble) holds text that can still be selected and copied. The tap flash
   is off on the body already (inherited); the controls repeat it for
   anything that sets its own. */
html { touch-action: manipulation; }
:where(*) { touch-action: manipulation; }
button, [role="button"], a, input, select, textarea, label, .control-btn, .emoji-btn, .rx-tray-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, .control-btn, .emoji-btn, .rx-tray-btn, .nav-item { -webkit-user-select: none; user-select: none; }
.rx-btn, .rx-tray-btn, .emoji-btn, .rx-btn .rx-ic, .rx-tray-btn .rx-ic { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body {
  overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
/* Text defaults for everything outside the login screen */
/* Tabular digits where a number sits next to a space (phone numbers, counts):
   the Outfit build Google serves to Android draws a proportional "1" so tight
   that the space after it disappears ("+9190000", "1waiting"). Times and body
   text keep proportional digits. */
:where(.row-meta, .adm-line, .reg-line, .member-subtitle, .profile-id-phone, .hero-pill, .sl-count,
  .ui-count, .st-count, .rc-count, .hero-btn-badge, .bb-unread, .room-panel-count, .att-n, .asc-num,
  .message-meta, .notif-item-time, .reg-time, .chat-date-sep, .chat-event time, .lb-counter, .topbar-listeners,
  .fpm-count, .fpm-file-size, .mb-file-meta, .sheet-line, .att-times, .adm-live-dur, .bb-meta) { font-variant-numeric: tabular-nums; }
:where(#app-container, .call-overlay, .sheet-screen, .fpm-overlay, #media-lightbox, .mg-screen, .ui-banner) :where(h1, h2, h3, h4, p) { margin: 0; }
:where(#app-container, .call-overlay, .sheet-screen, .fpm-overlay, #media-lightbox, .mg-screen, .ui-banner) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(#app-container, .call-overlay, .sheet-screen, .fpm-overlay, #media-lightbox, .mg-screen, .ui-banner) :where(button) { cursor: pointer; }
:where(#app-container, .call-overlay, .sheet-screen, .fpm-overlay, #media-lightbox, .mg-screen, .ui-banner) :where(button:disabled) { cursor: not-allowed; }
:where(#app-container, .call-overlay, .sheet-screen, .fpm-overlay, #media-lightbox, .mg-screen, .ui-banner) :where(button, a, input, select, [role="button"]):focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}
/* Print / Save as PDF: no app content, only a short notice (privacy.js).
   Opacity on the body's children also hides the desktop nav rail, whose
   inline visibility (app.js _enforceNavLayout) would beat body visibility;
   the notice is a white cover above every layer. */
@media print {
  body { visibility: hidden; background: var(--surface); }
  body > * { opacity: 0; }
  body::after {
    content: 'Sabha content cannot be printed.'; visibility: visible; position: fixed; inset: 0; z-index: 2147483647;
    display: flex; align-items: center; justify-content: center; background: var(--surface);
    font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--ink);
  }
}
@keyframes rd-sheet-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-pop { from { transform: translateY(-6px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rd-spin { to { transform: rotate(360deg); } }
/* live reactions (one shot): the outer layer rises and fades; the inner one pops in,
   then sways and tilts a little. Transform and opacity only, so it stays on the GPU. */
@keyframes rx-rise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  6%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, calc(var(--rx-h, 300px) * -.92), 0); }
}
@keyframes rx-sway {
  0%   { transform: translate3d(0, 0, 0) scale(.3) rotate(0deg); }
  7%   { transform: translate3d(0, 0, 0) scale(1.2) rotate(calc(var(--rx-tilt, 6deg) * -.5)); }
  13%  { transform: translate3d(calc(var(--rx-sway, 10px) * .3), 0, 0) scale(1) rotate(0deg); }
  40%  { transform: translate3d(var(--rx-sway, 10px), 0, 0) scale(1) rotate(var(--rx-tilt, 6deg)); }
  70%  { transform: translate3d(calc(var(--rx-sway, 10px) * -.7), 0, 0) scale(.96) rotate(calc(var(--rx-tilt, 6deg) * -1)); }
  100% { transform: translate3d(calc(var(--rx-sway, 10px) * .4), 0, 0) scale(.86) rotate(calc(var(--rx-tilt, 6deg) * .5)); }
}
@keyframes rx-fade { 0% { opacity: 0; } 20% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rx-tray-in { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* ---- App shell ---------------------------------------------------------- */
#app-container { display: flex; flex-direction: column; height: 100dvh; background: var(--bg); overflow: hidden; }
.app-header { height: 0; position: relative; z-index: 3000; }      /* no app bar: it only anchors the notification panel */
.app-header > :not(.notif-panel) { display: none; }
.app-content { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--bg); }
.tab-view { position: absolute; inset: 0; display: none; }
.tab-view.active { display: flex; flex-direction: column; }
.tab-view.active > * { flex: 1 1 auto; min-height: 0; min-width: 0; }

/* Layout breakpoint. Desktop (side rail, split views, centred dialogs) =
   a window >= 860px wide WITH a mouse (hover + fine pointer), or a big screen
   >= 1024 x 600 (tablet in landscape). Everything else is the phone layout,
   whatever its width: phones in landscape (640-932px), large phones, folded
   foldables and Chrome's "Desktop site" mode on a phone (980px) never get the
   rail. app.js isDesktopLayout() uses the same query.
   Phones: floating dock, screens end above it */
@media (max-width: 859px), (hover: none) and (max-width: 1023px), (pointer: coarse) and (max-width: 1023px), (hover: none) and (max-height: 599px), (pointer: coarse) and (max-height: 599px) {
  #app-container { padding-bottom: calc(var(--dock-h) + var(--dock-gap) + 8px + var(--safe-bottom)); }
  /* Full-screen moments: live Sabha, an open chat, the keyboard */
  #app-container:has(#tab-conference.active #conference-detail-panel:not(.empty)),
  #app-container:has(#tab-groups.active #group-detail-panel:not(.empty)),
  body.kb-open #app-container { padding-bottom: 0; }
  #app-container:has(#tab-conference.active #conference-detail-panel:not(.empty)) .app-navigation,
  #app-container:has(#tab-groups.active #group-detail-panel:not(.empty)) .app-navigation,
  body.kb-open .app-navigation { display: none; }
}
/* Desktop: side rail + content (app.js also pins this inline) */
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) {
  #app-container { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "nav header" "nav main"; }
  .app-header { grid-area: header; }
  .app-content { grid-area: main; }
}

/* ---- Page: header + optional sub-tabs + scrollable body ------------------ */
.st-page { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; background: var(--bg); }
.hero {
  flex: none; position: relative; z-index: 2;
  padding: calc(var(--safe-top) + 12px) var(--gutter) var(--s4);
  background: var(--yellow); border-radius: 0 0 var(--r-header) var(--r-header);
}
.st-page > .hero { padding-left: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); }
.hero-row { display: flex; align-items: center; gap: var(--s3); min-height: var(--icon-btn); }
.hero-title {
  flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; color: var(--blue);
}
.hero-sub { margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--yellow-ink); }
.sl-head-text { min-width: 0; }
.hero-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); flex: none; }

.st-panels { flex: 1 1 auto; min-height: 0; position: relative; }
.st-panel { display: none; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.st-panel.active { display: block; animation: rd-fade var(--t-fade) ease-out; }
.st-body { max-width: var(--page-max); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s8); }
/* Primary actions of a page: first thing in the body. Full width on phones,
   left-aligned at the content edge on desktop. */
.page-actions { display: flex; gap: var(--s2); margin: 0 0 var(--s4); }
.page-actions .ui-btn { flex: 1 1 0; }
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) { .page-actions .ui-btn { flex: 0 0 auto; } }

/* ---- Section: title row + content ---------------------------------------- */
.ui-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--control-sm); margin: 0 0 var(--s3); }
.ui-section-head:not(:first-child), .bb-grid + .ui-section-head, .ui-card + .ui-section-head, .adm-list + .ui-section-head { margin-top: var(--s6); }
.ui-section-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--blue);
}
.ui-section-title::before { content: ''; flex: none; width: 5px; height: 18px; border-radius: 3px; background: var(--yellow); }

/* ---- Card ---------------------------------------------------------------- */
.ui-card, .list-card, .adm-list, .reg-list, #sabha-history-list, .settings-group, .gl-card, .ui-stats {
  color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--e1); overflow: hidden;
}
.sl-card, .poll-card { color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--e1); padding: var(--s4); }

/* ---- ListRow: 40px leading · title + meta · trailing ------------------ */
.list-row, .adm-row, .reg-row, .pp-row, .sabha-history-item, .notif-item, .settings-row, .gm-row {
  display: grid; grid-template-columns: var(--avatar) minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); row-gap: var(--s2);
  min-height: 64px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: transparent; color: var(--ink);
}
:is(.list-row, .adm-row, .reg-row, .pp-row, .sabha-history-item, .notif-item, .settings-row, .gm-row):last-child { border-bottom: 0; }
/* the leading tile lines up with the title, whatever the row holds below it */
:is(.list-row, .adm-row, .pp-row, .sabha-history-item, .notif-item, .settings-row, .gm-row) > :first-child { align-self: start; }
.list-row--link { cursor: pointer; }
@media (hover: hover) { .list-row--link:hover { background: #FBFBF6; } }
.row-title, .adm-name, .reg-name, .pp-name, .sabha-history-title, .notif-item-title, .settings-value, .gm-row .member-name {
  font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere;
}
.row-meta, .adm-line, .reg-line, .sabha-history-meta, .notif-item-sub, .settings-label, .gm-row .member-subtitle, .sh-topic {
  font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--muted);
}
.row-info, .adm-info, .reg-info, .pp-info, .sabha-history-info, .notif-item-body, .settings-text, .gm-row .member-info {
  min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
/* leading icon tile: always blue (state is told by the badge next to the title) */
.icon-tile, .adm-icon, .sabha-history-icon, .settings-icon, .notif-item-icon {
  width: var(--avatar); height: var(--avatar); border-radius: var(--r-md); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: var(--blue-tint); color: var(--blue);
}
.row-actions, .adm-actions, .adm-controls, .pp-actions, .gm-actions { display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }

/* ---- Bubble grid ---------------------------------------------------------- */
.bb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s4) 6px; }

/* ---- Split view (list + detail) ------------------------------------------- */
.split-view { display: flex; width: 100%; height: 100%; min-height: 0; }
.sidebar-list { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.detail-chat-window { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.detail-chat-window > .empty-state { margin: auto; padding: var(--s6); text-align: center; max-width: 320px; }
.detail-chat-window:not(.empty) > .empty-state { display: none; }
@media (max-width: 859px), (hover: none) and (max-width: 1023px), (pointer: coarse) and (max-width: 1023px), (hover: none) and (max-height: 599px), (pointer: coarse) and (max-height: 599px) {
  .sidebar-list { width: 100%; height: 100%; }
  .detail-chat-window.empty { display: none; }
  .detail-chat-window:not(.empty) { position: absolute; inset: 0; z-index: 5; }
}
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) {
  .split-view > .sidebar-list { flex: none; width: clamp(340px, 30vw, 420px); border-right: 1px solid var(--border); }
  .split-view > .detail-chat-window { flex: 1 1 auto; }
  /* the stage takes the whole width while a Sabha is open (the list comes back with the list button) */
  #tab-conference .conference-split:has(#conference-detail-panel:not(.empty)):not(.sl-open) .sabha-list-pane { display: none; }
  /* list header + open chat header: one yellow band of one height (68) */
  .split-view:has(> .detail-chat-window:not(.empty) > .chat-container:not(.hidden)) > .sidebar-list .hero { border-bottom-right-radius: 0; }
  .split-view > .detail-chat-window .chat-header { margin-left: -1px; border-bottom-left-radius: 0; }
}
/* pressed: a whole-row target darkens for the tap */
:is(.list-row--link, .settings-link, .admin-stat-card--link, .notif-item--link):active { background: var(--fill); }

/* ---- Sheets and dialogs ------------------------------------------------- */
/* Dialog: centred on desktop, bottom sheet on phones */
.call-overlay.ui-modal {
  position: fixed; inset: 0; z-index: 4000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s4); background: rgba(14, 18, 15, .55); animation: rd-fade var(--t-fade) ease-out;
}
.ui-modal-card {
  width: 100%; max-width: 460px; max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--surface); color: var(--ink); border-radius: var(--r-sheet); box-shadow: var(--e3);
  padding: 0 var(--sheet-gutter) var(--sheet-gutter); animation: rd-sheet-up var(--t-sheet) ease-out;
}
/* one dialog header everywhere: title left, close right */
.ui-modal-head, .fpm-header, .room-panel-head {
  flex: none; display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s3) var(--s3) var(--sheet-gutter);
}
.ui-modal-card > .ui-modal-head { margin: 0 calc(-1 * var(--sheet-gutter)); }
.ui-modal-head h2, .fpm-title, .room-panel-head h3 {
  flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--blue);
}
.ui-modal-actions { display: flex; gap: var(--s3); margin-top: var(--s5); }
.ui-modal-actions .ui-btn { flex: 1 1 0; }
@media (max-width: 599px) {
  .call-overlay.ui-modal { justify-content: flex-end; align-items: stretch; padding: 0; }
  .ui-modal-card { max-width: none; max-height: 92dvh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding-bottom: calc(var(--s5) + var(--safe-bottom)); }
  .ui-modal-card::before { content: ''; display: block; width: 36px; height: 4px; margin: var(--s2) auto 0; border-radius: 2px; background: var(--border-strong); }
}
/* A phone in landscape (touch, short screen): the same bottom sheet, docked to
   the bottom edge at a readable width, never a small dialog in the middle. */
@media (min-width: 600px) and (hover: none) and (max-height: 599px), (min-width: 600px) and (pointer: coarse) and (max-height: 599px) {
  .call-overlay.ui-modal { justify-content: flex-end; padding: 0 var(--s4); }
  .ui-modal-card { max-width: 600px; max-height: 94dvh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding-bottom: calc(var(--s4) + var(--safe-bottom)); }
  .ui-modal-card::before { content: ''; display: block; width: 36px; height: 4px; margin: var(--s2) auto 0; border-radius: 2px; background: var(--border-strong); }
}

/* Full-screen sheet (group info, member directory) */
.sheet-screen { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; background: var(--bg); overflow-y: auto; animation: rd-fade var(--t-fade) ease-out; }
.sheet-screen > * { flex-shrink: 0; }
/* desktop: a side sheet from the right */
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) { .sheet-screen { left: auto; width: min(480px, 100vw); box-shadow: var(--e3); } }
/* Privacy / terms / delete account inside the app: the page in a frame under the sheet header. */
.sheet-screen.doc-screen { overflow: hidden; }
/* Opened from the sign-in screens too (the Terms / Privacy links, deleting a
   registration that waits for approval): above #login-screen (9999), under
   the toasts. In the app (login screen hidden) the usual order applies. */
#login-screen:not(.hidden) ~ :is(#doc-screen, #delete-account-modal) { z-index: 10000; }
.doc-screen > .doc-frame-wrap { flex: 1 1 auto; min-height: 0; display: flex; }
.doc-frame { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: var(--bg); }
.sheet-header {
  position: sticky; top: 0; z-index: 2; flex: none; display: flex; align-items: center; gap: var(--s2);
  min-height: 64px; padding: calc(var(--safe-top) + 12px) var(--gutter) var(--s4);
  background: var(--yellow); border-radius: 0 0 var(--r-header) var(--r-header);
}
.sheet-header > div { min-width: 0; }
.sheet-header h3 { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-sub { display: block; font-size: 14px; font-weight: 500; color: var(--yellow-ink); }
.sheet-list { padding: 0 var(--gutter) var(--s8); }

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* ---- Button: primary / secondary / tertiary / danger · md 44 · sm 36 ------ */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--control); padding: 0 var(--s5); margin: 0; border: 1px solid transparent; border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color var(--t-press) ease, border-color var(--t-press) ease, color var(--t-press) ease, transform var(--t-press) ease;
}
.ui-btn i { font-size: 14px; flex: none; }
.ui-btn:active:not(:disabled) { transform: scale(.98); }
.ui-btn-primary { background: var(--green); color: #fff; }
.ui-btn-primary:active:not(:disabled) { background: var(--green-press); }
.ui-btn-secondary { background: var(--surface); color: var(--blue); border-color: var(--blue-line); }
.ui-btn-ghost { background: transparent; color: var(--blue); }
.ui-btn-danger-ghost { background: var(--surface); color: var(--red-deep); border-color: var(--red-line); }
.ui-btn-danger { background: var(--red-deep); color: #fff; }
.ui-btn-sm { height: var(--control-sm); padding: 0 14px; border-radius: var(--r-sm); font-size: 14px; }
.ui-btn-icon { width: var(--control-sm); padding: 0; }
.ui-btn:disabled { background: var(--disabled-bg); color: var(--disabled-fg); border-color: transparent; }
.ui-btn.is-loading { position: relative; color: transparent; }
.ui-btn.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--disabled-fg); border-right-color: transparent; border-top-color: transparent; animation: rd-spin .7s linear infinite; }
@media (hover: hover) {
  .ui-btn-primary:hover:not(:disabled) { background: var(--green-hover); }
  .ui-btn-secondary:hover:not(:disabled) { background: var(--blue-wash); }
  .ui-btn-ghost:hover:not(:disabled) { background: var(--blue-wash); }
  .ui-btn-danger-ghost:hover:not(:disabled) { background: var(--red-tint); }
}

/* ---- IconButton 40 -------------------------------------------------------- */
.icon-btn, .hero-btn, .room-panel-close, .ui-icon-btn, .sheet-back, .mg-back, #group-active-container .mobile-back-btn {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--icon-btn); height: var(--icon-btn); padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--blue); font-size: 16px; transition: background-color var(--t-press) ease;
}
.icon-btn:active, .hero-btn:active, .room-panel-close:active, .ui-icon-btn:active, .sheet-back:active, .mg-back:active, #group-active-container .mobile-back-btn:active { transform: scale(.94); }
.icon-btn, .hero-btn, .room-panel-close, .ui-icon-btn, .sheet-back, .mg-back, #group-active-container .mobile-back-btn { transition: background-color var(--t-press) ease, transform var(--t-press) ease; }
/* on a surface: soft fill */
.room-panel-close { background: var(--fill); color: var(--ink); }
/* on the yellow header: white disc, blue icon (back arrows stay plain) */
.hero-btn { background: var(--surface); color: var(--blue); }
.sheet-back, .mg-back, #group-active-container .mobile-back-btn { color: var(--blue); }
.ui-icon-btn:disabled { background: transparent; color: var(--disabled-fg); }
@media (hover: hover) {
  .room-panel-close:hover, .ui-icon-btn:hover { background: var(--fill-2); }
  .sheet-back:hover, .mg-back:hover, #group-active-container .mobile-back-btn:hover { background: rgba(255, 255, 255, .45); }
}
/* on the dark stage / viewer */
.icon-btn-dark, .room-top-icon, .room-back-btn, .lb-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--icon-btn); height: var(--icon-btn);
  padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 16px; text-decoration: none;
}
.hero-btn-badge {
  position: absolute; top: -4px; right: -4px; border: 2px solid var(--surface);
}

/* ---- Fields: input, select, search (44) ---------------------------------- */
.ui-form .form-group { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 var(--s4); }
.ui-form label, .ui-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.ui-optional { font-weight: 400; color: var(--muted); margin-left: 4px; }
.ui-hint { font-size: 13px; font-weight: 500; color: var(--green-press); }
.ui-hint:empty { display: none; }
.ui-error { font-size: 13px; font-weight: 600; color: var(--red-deep); }
.ui-error:empty { display: none; }
.ui-field, .ui-form input[type="text"], .ui-form input[type="datetime-local"], select.ui-select {
  width: 100%; height: var(--control); margin: 0; padding: 0 var(--s4);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; outline: none;
}
select.ui-select {
  padding-right: 40px; appearance: none; -webkit-appearance: none; cursor: pointer; font-weight: 500;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23203080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
}
select.ui-select:disabled { background-color: var(--fill); color: var(--muted); }
select.ui-select.is-warn { color: var(--red-deep); border-color: var(--red-line); }
.ui-field:focus, .ui-form input:focus, select.ui-select:focus, .ui-search > input:focus { border-color: var(--green); box-shadow: var(--ring); }
.ui-check-row, .ui-form .form-group.ui-check-row { flex-direction: row; align-items: center; gap: var(--s3); }
.ui-check-row input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--green); flex: none; }
.ui-check-row label { font-weight: 500; line-height: 1.4; }
/* Switch: a whole-row label (title + hint) with an on/off toggle */
.ui-switch-row { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s4); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.ui-switch-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-switch-title { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ui-switch-hint { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--muted); }
.ui-switch {
  position: relative; flex: none; width: 48px; height: 28px; margin: 0; border: 0; border-radius: var(--r-full);
  appearance: none; -webkit-appearance: none; background: var(--border-strong); cursor: pointer; transition: background-color var(--t-press) ease;
}
.ui-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform var(--t-press) ease; }
.ui-switch:checked { background: var(--green); }
.ui-switch:checked::after { transform: translateX(20px); }
.ui-switch:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ui-search { position: relative; display: block; flex: 1 1 auto; min-width: 0; margin: 0; }
.ui-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--muted); pointer-events: none; }
.ui-search > input {
  display: block; width: 100%; height: var(--control); margin: 0; padding: 0 16px 0 42px;
  border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; outline: none; -webkit-appearance: none;
}
.ui-search > input::placeholder, .ui-field::placeholder, .ui-form input::placeholder { color: #8C8C7E; }
.toolbar, .admin-filter-bar { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); }
.admin-filter-bar select.ui-select { flex: 0 0 auto; width: auto; min-width: 124px; }
@media (max-width: 599px) { .admin-filter-bar select.ui-select { min-width: 0; max-width: 40%; } }

/* ---- Tabs (page sub-tabs) and Segmented control: one look ----------------- */
/* the outline is an inset ring, so the tabs sit 4px from the edge (48 tall) */
.st-strip, .ui-segmented {
  flex: none; display: flex; flex-wrap: nowrap; gap: 2px; padding: var(--s1); margin: 0;
  background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px var(--blue-line); border-radius: var(--r-full);
  overflow-x: auto; scrollbar-width: none;
}
.st-strip::-webkit-scrollbar, .ui-segmented::-webkit-scrollbar { display: none; }
.st-strip { margin: var(--s4) var(--gutter) 0; }
.st-page > .st-strip { margin-left: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); margin-right: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); }
.st-tab, .ui-segmented > button {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 14px; margin: 0; border: 0; border-radius: var(--r-full); background: transparent;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1; color: var(--ink-2); white-space: nowrap;
  transition: background-color var(--t-press) ease, color var(--t-press) ease;
}
.st-tab.active, .ui-segmented > button.active { background: var(--blue); color: #fff; }
.st-tab.active .st-count { background: #fff; color: var(--red-deep); border-color: #fff; }
.st-tab:not(.active):active, .ui-segmented > button:not(.active):active { background: var(--blue-tint); }
@media (hover: hover) { .st-tab:not(.active):hover, .ui-segmented > button:not(.active):hover { background: var(--blue-wash); } }
/* phones: five tabs and a count still fit in one row (no sideways scroll) */
@media (max-width: 420px) {
  .st-strip > .st-tab { padding: 0 5px; gap: 4px; font-size: 13px; }
  .st-tab .st-count { min-width: 18px; height: 18px; padding: 0 5px; }
}

/* ---- Badge (6px, 22) · Chip (pill, 28) · Count (red, 20) ------------------- */
.ui-badge, .room-live-badge, .live-tag, .scheduled-badge, .pp-chip, .role-chip, .pp-stat {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; flex: none;
  border-radius: var(--r-badge); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: var(--fill); color: var(--ink-2);
}
.ui-badge-green, .pp-stat.is-on { background: var(--green-tint); color: var(--green-press); }
.ui-badge-blue, .scheduled-badge, .role-chip { background: var(--blue-tint); color: var(--blue); }
.ui-badge-yellow, .pp-chip.host { background: var(--yellow-tint); color: #7A5100; }
.ui-badge-red, .pp-stat.is-off { background: var(--red-tint); color: var(--red-deep); }
.room-live-badge, .live-tag { background: var(--red-deep); color: #fff; font-weight: 700; letter-spacing: .04em; font-size: 12px; height: 20px; padding: 0 7px; }
.room-live-badge::before, .live-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.scheduled-badge { font-weight: 700; letter-spacing: .04em; font-size: 12px; height: 20px; padding: 0 7px; }
.scheduled-badge.is-ended { background: var(--fill); color: var(--muted); }
.pp-stat i { font-size: 12px; }
.hero-pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: var(--r-full); border: 1px solid var(--yellow-deep); background: #FFF2BF; color: var(--red-deep);
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
}
.hero-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.ui-count, .st-count, .rc-count, .hero-btn-badge, .adm-tab-count, .bb-unread, .group-unread-badge, .notif-bell-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--red-deep); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1;
}
.ui-count:empty, .st-count:empty, .rc-count:empty, .hero-btn-badge:empty, .adm-tab-count:empty { display: none; }

/* ---- Avatar 32 / 40 / 56 / 72 ---------------------------------------------- */
.avatar, .adm-avatar, .reg-avatar, .pp-avatar, .chat-header-avatar, .user-status-avatar, .profile-id-avatar, .video-avatar-fallback, .call-avatar {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center; overflow: visible;
  width: var(--avatar); height: var(--avatar); border-radius: 50%; background: var(--green); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1; text-transform: uppercase;
}
.avatar-photo { object-fit: cover; }
.user-status-avatar { width: 32px; height: 32px; font-size: 12px; }
.video-avatar-fallback { width: 56px; height: 56px; font-size: 20px; }
.profile-id-avatar, .call-avatar { width: 72px; height: 72px; font-size: 24px; border: 3px solid #fff; }
.adm-online { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #22A45D; border: 2px solid #fff; }

/* ---- EmptyState ----------------------------------------------------------- */
.ui-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s8) var(--s5); color: var(--muted); }
.ui-empty > i {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 0 var(--s4); border-radius: 50%;
  background: var(--yellow-tint); color: var(--blue); font-size: 24px; box-shadow: 0 0 0 8px rgba(244, 192, 22, .12);
}
.ui-empty > p { max-width: 320px; margin: 0 0 var(--s1); font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.ui-empty > span { max-width: 300px; font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.ui-empty > .ui-btn { margin-top: var(--s4); }
.ui-empty-sm { padding: var(--s5) var(--s4); }
.ui-empty-sm > i { width: 48px; height: 48px; margin-bottom: var(--s3); font-size: 18px; box-shadow: 0 0 0 6px rgba(244, 192, 22, .12); }
.ui-empty-sm > p { font-size: 15px; }
.ui-empty-sm > span { font-size: 13px; }
.empty-state i { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto var(--s4); border-radius: 50%; background: var(--yellow-tint); color: var(--blue); font-size: 24px; box-shadow: 0 0 0 8px rgba(244, 192, 22, .12); }
.empty-state h3 { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink); margin-bottom: var(--s1); }
.empty-state p { font-size: 14px; color: var(--muted); }

/* ---- StatTile strip -------------------------------------------------------- */
.ui-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; margin: 0 0 var(--s6); padding: 0; background: var(--line); }
.admin-stat-card {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; min-height: 64px;
  padding: var(--s3) var(--s4); margin: 0; border: 0; background: var(--surface); text-align: left; font-family: var(--font-body); color: var(--ink);
  transition: background-color var(--t-press) ease;
}
.admin-stat-card--link { cursor: pointer; }
@media (hover: hover) { .admin-stat-card--link:hover { background: #FBFBF6; } }
.asc-num { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--blue); font-variant-numeric: tabular-nums; }
.asc-label { font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* phones: 6 tiles in 3 columns, 4 tiles in 2 — labels never cut */
@media (max-width: 599px) {
  .ui-stats { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Toast and Banner ------------------------------------------------------ */
#sabha-global-toast {
  position: fixed; left: 0; right: 0; margin: 0 auto; z-index: 100000; width: max-content; max-width: min(90vw, 520px);
  padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--blue); color: #fff; box-shadow: var(--e2);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; overflow-wrap: anywhere;
  pointer-events: none; transition: opacity .25s ease;
}
#sabha-global-toast.ui-toast-success { background: var(--green-press); }
#sabha-global-toast.ui-toast-warn { background: var(--yellow); color: #2A1D00; }
#sabha-global-toast.ui-toast-error { background: var(--red-deep); }
/* New message banner: a blue card dropping from the top (yellow edge as the
   accent), tap opens the chat. White on blue 11:1, body text 8:1. */
.msg-banner {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 100001;
  display: flex; align-items: center; gap: var(--s3); width: min(calc(100vw - 32px), 440px);
  padding: 10px var(--s4) 10px 10px; border: 0; border-left: 5px solid var(--yellow); border-radius: var(--r-md);
  background: var(--blue); color: #fff; box-shadow: var(--e2); text-align: left; cursor: pointer;
  font-family: var(--font-body); opacity: 0; transform: translate(-50%, -16px); transition: opacity .22s ease, transform .22s ease;
}
.msg-banner.show { opacity: 1; transform: translate(-50%, 0); }
.msg-banner:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.mb-avatar {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}
.mb-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-body { font-size: 13px; line-height: 1.35; color: var(--blue-tint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .msg-banner { transition: none; } }
.ui-banner {
  position: fixed; top: calc(var(--safe-top) + 76px); left: 0; right: 0; margin: 0 auto; z-index: 100000;
  width: min(420px, calc(100vw - 24px)); display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s2) var(--s3) var(--s3);
  background: var(--blue); color: #fff; border: 0; border-left: 5px solid var(--yellow); border-radius: var(--r-card); box-shadow: var(--e2);
  font-family: var(--font-body); animation: rd-pop var(--t-sheet) ease-out;
}
.ui-banner-ic { width: var(--avatar); height: var(--avatar); flex: none; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); color: var(--yellow); font-size: 16px; }
.ui-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-banner-text b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ui-banner-text span { font-size: 13px; color: var(--blue-tint); }
.ui-banner-action { height: var(--control-sm); padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--green); color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; flex: none; }
.ui-banner-close { width: var(--control-sm); height: var(--control-sm); border: 0; border-radius: 50%; background: transparent; color: var(--blue-tint); cursor: pointer; flex: none; }
/* Narrow phones (360px): the text gets the row beside the icon and the
   close button, and the action goes under it, lined up with the text.
   Squeezed between them in one row, "X started a video call" wrapped to
   seven lines. */
@media (max-width: 399px) {
  .ui-banner { flex-wrap: wrap; row-gap: var(--s2); }
  .ui-banner-text { flex: 1 1 calc(100% - var(--avatar) - var(--control-sm) - 2 * var(--s3)); }
  .ui-banner-action { order: 3; margin-left: calc(var(--avatar) + var(--s3)); }
}
/* touch: 44px hit areas for the banner's Start / Dismiss (no visual change) */
@media (hover: none), (pointer: coarse) {
  .ui-banner-action, .ui-banner-close { position: relative; }
  .ui-banner-action::after, .ui-banner-close::after { content: ''; position: absolute; inset: -4px; }
}

/* ---- Notification panel ---------------------------------------------------- */
/* A popover under the header bell, on a scrim (a tap outside only closes it).
   Phones: the page gutter on both sides. Desktop: right edge on the content
   column, under the bell. */
.notif-panel {
  position: fixed; top: calc(var(--safe-top) + 76px); left: var(--gutter); right: var(--gutter); z-index: 3000; max-height: 70dvh; overflow: hidden auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--e2), 0 0 0 100vmax rgba(14, 18, 15, .4); animation: rd-pop var(--t-fade) ease-out;
}
@media (min-width: 600px) { .notif-panel { left: auto; width: 380px; } }
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) { .notif-panel { right: max(var(--gutter), calc((100vw - var(--rail-w) - var(--page-max)) / 2 + var(--gutter))); } }
.notif-panel-header { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 3px solid var(--yellow); background: var(--blue); font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #fff; }
.notif-clear-btn { height: var(--control-sm); padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--yellow); font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.notif-item { grid-template-columns: var(--avatar) minmax(0, 1fr) auto; align-items: start; }
.notif-item--link { cursor: pointer; }
.notif-item-time { font-size: 12px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.notif-empty { padding: var(--s6) var(--s4); text-align: center; font-size: 14px; color: var(--muted); }

/* ---- Bubble (group / Sabha) ------------------------------------------------ */
.bb {
  position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; padding: var(--s2) var(--s1);
  border: 0; border-radius: 14px; background: transparent; font-family: var(--font-body); text-align: center; color: var(--ink); cursor: pointer;
  transition: transform var(--t-press) ease;
}
.bb:active { transform: scale(.97); }
@media (hover: hover) { .bb:hover { background: rgba(0, 0, 0, .035); } }
.bb-circle {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 0 var(--s2);
  border-radius: 50%; background: var(--bb-color, var(--green)); color: #fff; font-family: var(--font-display); font-size: 22px; font-weight: 700;
}
.bb-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Three lines: the name is already shortened in its middle when it is longer
   than that (_bubbleNameHtml); the clamp only ends a name with no spaces. */
.bb-name {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; width: 100%;
  font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere;
}
/* The "(District)" of a name, on its own line so it always shows. */
.bb-tag { display: block; max-width: 100%; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-meta, .bb-sub { display: block; max-width: 100%; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-sub { margin-top: 0; }
.bb-badge { position: absolute; display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; border: 2px solid var(--bg); font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bb-unread { top: -3px; right: -5px; min-width: 24px; height: 24px; }
.bb-call, .bb-plus, .bb-here { bottom: -3px; right: -5px; width: 26px; height: 26px; padding: 0; font-size: 12px; }
.bb-call, .bb-here { background: var(--green); color: #fff; }
.bb-plus { background: #fff; color: var(--blue); border: 2px solid var(--blue); }
.gb-bubble.has-unread .bb-name { font-weight: 800; color: var(--blue); }
.gb-bubble.is-other .bb-circle { background: #fff; color: var(--bb-color); border: 2px solid var(--bb-color); }
.gb-bubble.is-other .bb-name { color: var(--ink-2); font-weight: 500; }
.gb-bubble.has-call .bb-circle { outline: 3px solid var(--green); outline-offset: 3px; }
.gb-bubble.active .bb-circle { outline: 3px solid var(--blue); outline-offset: 3px; }
.gb-bubble.active .bb-name { color: var(--blue); }
.sb-bubble .bb-circle { background: var(--green); margin-bottom: var(--s4); }
.sb-bubble.is-live .bb-circle { outline: 3px solid var(--red); outline-offset: 3px; }
.sb-bubble.is-scheduled .bb-circle { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sb-bubble.is-ended .bb-circle { background: var(--fill); color: var(--muted); }
.sb-bubble.is-here .bb-meta { color: var(--green-press); font-weight: 600; }
.bb-live {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border-radius: var(--r-badge); border: 2px solid var(--bg); background: var(--red-deep); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1;
}
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) {
  #dashboard-wrap .bb-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  #dashboard-wrap .bb-circle { width: 84px; height: 84px; font-size: 25px; }
}

/* ---- Dashboard home (Overview) --------------------------------------------- */
/* Blocks of the home page: one section gap between them, none inside. */
.dash-block { margin-top: var(--s6); }
.dash-block > .reg-section, .dash-block > .ui-stats { margin-bottom: 0; }
/* Leader banner: blue card, photo in a yellow frame, yellow + green brand
   stripe along the bottom. Without the photo file the frame shows her
   initial on the party green (see LEADER_BANNER in app.js). */
.dash-leader {
  position: relative; display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s4) calc(var(--s4) + 6px); border-radius: var(--r-card); overflow: hidden;
  background: var(--blue); color: #fff; box-shadow: var(--e1);
}
.dash-leader::before, .dash-leader::after { content: ''; position: absolute; bottom: 0; height: 6px; }
.dash-leader::before { left: 0; right: 50%; background: var(--yellow); }
.dash-leader::after { left: 50%; right: 0; background: var(--green); }
.dl-photo {
  flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 112px; overflow: hidden;
  border: 3px solid var(--yellow); border-radius: var(--r-md); background: var(--green);
}
.dl-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.dl-initials { font-family: var(--font-display); font-size: 44px; font-weight: 800; line-height: 1; color: #fff; }
.dl-text { min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.dl-kicker { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--yellow); }
.dl-name { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.015em; color: #fff; overflow-wrap: anywhere; }
.dl-role { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--blue-tint); }
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) {
  .dash-leader { gap: var(--s5); padding: var(--s5) var(--s6) calc(var(--s5) + 6px); }
  .dl-photo { width: 128px; height: 150px; }
  .dl-initials { font-size: 56px; }
  .dl-name { font-size: 34px; }
  .dl-role { font-size: 15px; }
}
/* Announcement rows: group · the post (up to 3 lines) · sender and time. */
.dash-ann-text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-line;
}
.dash-ann-row .adm-actions:empty { display: none; }
/* Announcements read as notices: blue edge, blue icon tile with a white
   bullhorn, a light blue wash behind each post. */
.dash-ann-list { border-left: 5px solid var(--blue); }
.dash-ann-row { background: var(--blue-wash); }
.dash-ann-row .adm-icon, .dash-ann-join .adm-icon { background: var(--blue); color: #fff; }
.dash-ann-row .adm-name { color: var(--blue); }
.dash-ann-row { grid-template-columns: var(--avatar) minmax(0, 1fr) auto; }

/* ---- Dock (phones) / side rail (desktop) ----------------------------------- */
/* Same anatomy everywhere: blue bar, 56 x 32 pill behind a 24px icon, label
   below. Inactive: outline icon + label in --dock-ink. Active: solid icon in
   --dock-pill-ink on the yellow --dock-pill, label in --dock-ink-active. */
.app-navigation { display: flex; z-index: 900; background: var(--dock-bg); }
.nav-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  margin: 0; padding: 0 2px; border: 0; background: transparent; color: var(--dock-ink); font-family: var(--font-body); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-icon {
  position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 32px;
  border-radius: var(--r-full);
  transition: background-color var(--t-press) ease, color var(--t-press) ease, transform var(--t-press) ease;
}
.nav-svg {
  display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.nav-svg .ic-f { display: none; }
.nav-svg .f { fill: currentColor; }                        /* solid shape */
.nav-svg .c { fill: var(--dock-pill); stroke: none; }      /* cut-out (fill) */
.nav-svg .cs { stroke: var(--dock-pill); }                 /* cut-out (stroke) */
.nav-item.active .nav-svg .ic-o { display: none; }
.nav-item.active .nav-svg .ic-f { display: inline; }
.nav-label { font-size: 12px; font-weight: 500; line-height: 1.1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nav-item.active { color: var(--dock-ink-active); }
.nav-item.active .nav-label { font-weight: 600; }   /* not 700: Outfit 700 spaces unevenly at 12px ("Dashbo ard") */
.nav-item.active .nav-icon { background: var(--dock-pill); color: var(--dock-pill-ink); }
.nav-item:active .nav-icon { transform: scale(.94); }
.nav-item:focus-visible { outline: 2px solid var(--dock-focus); outline-offset: -2px; border-radius: var(--r-md); }
/* Unread / live dot: pinned to the icon's top-right (not the pill's edge).
   Red on blue is only 2.8:1, so a white ring carries the contrast (11.7:1,
   WCAG 1.4.11) and a bar-coloured gap cuts it free of the icon. */
.nav-dot, .live-dot-nav {
  position: absolute; top: 2px; left: calc(50% + 5px); width: 9px; height: 9px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 1.5px #FFFFFF, 0 0 0 3.5px var(--dock-bg); pointer-events: none;
}
/* on the yellow pill a white ring would vanish (1.7:1): ring in the pill ink instead (6.9:1) */
.nav-item.active :is(.nav-dot, .live-dot-nav) { box-shadow: 0 0 0 1.5px var(--dock-pill-ink), 0 0 0 3.5px var(--dock-pill); }
/* Groups: the dot carries the unread count (same red, same ring). */
.nav-dot.has-count {
  top: -3px; left: calc(50% + 3px); width: auto; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.live-dot-nav { display: none; }
.nav-item.has-live .live-dot-nav { display: block; }
.nav-item.has-live .nav-dot { display: none; }
@media (max-width: 859px), (hover: none) and (max-width: 1023px), (pointer: coarse) and (max-width: 1023px), (hover: none) and (max-height: 599px), (pointer: coarse) and (max-height: 599px) {
  .app-navigation {
    position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--dock-gap) + var(--safe-bottom)); height: var(--dock-h);
    flex-direction: row; align-items: stretch; padding: 0 6px; border-radius: 22px; box-shadow: var(--dock-shadow);
  }
  .nav-item { flex: 1 1 0; min-width: 0; height: var(--dock-h); padding: 0; }
}
/* Narrow phones. "Dashboard" is 61px wide at 12px with desktop Outfit and up
   to 65px with the Android build, so a leader's 5 items step down:
   375 -> 68.6px items at 12px · 360 -> 65.6px at 11.5px (needs 62.3) ·
   320 -> 60px at 10.5px (needs 56.9). */
@media (max-width: 399px) {
  .app-navigation { left: 12px; right: 12px; padding: 0 4px; }
}
@media (max-width: 374px) {
  /* 12px (the smallest text anywhere), a touch tighter so "Dashboard" fits 65px */
  .nav-label { font-size: 12px; letter-spacing: -.02em; }
}
@media (max-width: 339px) {
  .app-navigation { left: 8px; right: 8px; padding: 0 2px; }
  .nav-label { font-size: 10.5px; }
}
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) {
  /* First pill centred on the page-header title (31px down), its label inside the header band */
  .app-navigation {
    grid-area: nav; flex-direction: column; gap: 4px; width: var(--rail-w); height: 100%; padding: 8px 8px 18px; overflow-y: auto;
  }
  .nav-item { width: 100%; height: 64px; flex: none; border-radius: var(--r-md); }
}
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) and (hover: hover) { .nav-item:not(.active):hover .nav-icon { background: var(--dock-hover); } }

/* ---- Large text (Android "Font size" / WebView text zoom) -------------------
   app.js measures the zoom with .tz-probe and sets html.text-zoom above 110%:
   the dock's five labels then step down so "Dashboard" still fits its item,
   and the leader banner gives the name more room. */
.tz-probe { position: absolute; left: -9999px; top: 0; visibility: hidden; font-size: 100px; line-height: 1; pointer-events: none; }
html.text-zoom .nav-label { font-size: 9.5px; letter-spacing: -.01em; }
@media (max-width: 400px) {
  html.text-zoom .dl-photo { width: 76px; height: 90px; }
  html.text-zoom .dl-name { font-size: 24px; }
}

/* ---- Touch screens: fingers, not a mouse ------------------------------------
   Every control is at least 44 x 44 (icon buttons, small buttons, tabs), tiny
   controls get a bigger invisible hit area, and text fields are 16px so iOS
   does not zoom the page when one is tapped. Desktop (mouse) keeps its sizes. */
@media (hover: none), (pointer: coarse) {
  :root { --control-sm: 44px; --icon-btn: 44px; }
  .st-tab, .ui-segmented > button { height: 44px; }
  .hero-pill, .cp-dot { position: relative; }
  .hero-pill::after { content: ''; position: absolute; inset: -8px -2px; }
  .cp-dot::after { content: ''; position: absolute; inset: -12px -8px; }
  /* the people count in the Sabha top bar (small text): a finger-sized hit area */
  .room-top-bar .cp-count-btn { position: relative; }
  .room-top-bar .cp-count-btn::after { content: ''; position: absolute; inset: -16px -12px; }
  /* group chat header: the name (opens group info) is a full 44px row; a
     group admin's five round buttons stay 36px to leave the name room, each
     with a 44px hit area */
  .chat-header-info { min-height: 44px; justify-content: center; }
  .chat-header .call-btn-action.gc-icon { position: relative; }
  .chat-header .call-btn-action.gc-icon::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
  /* small pin buttons on stage tiles (crowded grid, filmstrip): 44px hit area */
  .tile-pin-btn::after { content: ''; position: absolute; inset: -6px; }
  .notif-clear-btn { min-height: 44px; flex: none; position: relative; }
  .notif-clear-btn::after { content: ''; position: absolute; inset: -2px 0; }
  /* checkbox rows: the label beside the box is a full 44px target */
  .ui-check-row label { display: flex; align-items: center; min-height: 44px; flex: 1 1 auto; }
  .ui-check-row input[type="checkbox"] { width: 24px; height: 24px; }
  /* Sabha stage and calls: the stage is laid out to the pixel around its bars,
     so their controls keep the original 40 / 36px circles and get the 44px
     as an invisible hit area instead */
  :is(#sabha-active-room, #group-video-call-screen, #active-call-screen) { --icon-btn: 40px; --control-sm: 36px; }
  :is(#sabha-active-room, #group-video-call-screen, #active-call-screen) :is(.room-top-icon, .room-back-btn, .icon-btn-dark, .room-panel-close, .emoji-btn, .ui-btn-sm, .ui-icon-btn) { position: relative; }
  :is(#sabha-active-room, #group-video-call-screen, #active-call-screen) :is(.room-top-icon, .room-back-btn, .icon-btn-dark, .room-panel-close, .ui-icon-btn)::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; }
  :is(#sabha-active-room, #group-video-call-screen, #active-call-screen) :is(.emoji-btn, .ui-btn-sm:not(.is-loading))::after { content: ''; position: absolute; inset: -4px 0; }
  :is(#sabha-active-room, #group-video-call-screen, #active-call-screen) :is(.leave-room-btn, .room-end-btn, .vc-minimise-btn, .video-call-header .cp-count-btn, .pp-actions button):not(.is-loading) { position: relative; }
  :is(#sabha-active-room, #group-video-call-screen, #active-call-screen) :is(.leave-room-btn, .room-end-btn, .vc-minimise-btn, .video-call-header .cp-count-btn, .pp-actions button):not(.is-loading)::after { content: ''; position: absolute; inset: -4px -2px; }
  /* "Can't hear? Tap here": a quiet text link above the call controls; 32px tall with a 44px hit area */
  button.hear-fix-btn { position: relative; min-height: 32px; }
  button.hear-fix-btn::after { content: ''; position: absolute; inset: -6px 0; }
  /* (The register step's fields: their own 16px rule in the login section.) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select { font-size: 16px !important; }
}
/* 320-359px chat header: the back arrow keeps its 40px circle (44px hit
   area) so the group name keeps room beside five buttons */
@media (max-width: 359px) and (hover: none), (max-width: 359px) and (pointer: coarse) {
  #group-active-container .mobile-back-btn { width: 40px; height: 40px; }
  #group-active-container .mobile-back-btn::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; }
}

/* ---- Phone in landscape (touch, short screen: 640-932 x 320-430) -----------
   Still the phone layout (never the desktop rail), compacted so the content
   keeps the height: a lower header, the dock with each icon beside its label,
   a smaller leader banner. Notched phones: nothing under the notch. */
@media (orientation: landscape) and (max-height: 500px) and (hover: none), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  :root { --dock-h: 48px; --dock-gap: 6px; }
  #app-container { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .app-navigation { left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right)); max-width: 720px; margin: 0 auto; border-radius: 18px; }
  .nav-item { flex-direction: row; gap: 4px; }
  .nav-icon { width: 44px; height: 32px; }
  .nav-dot, .live-dot-nav { top: 6px; left: 30px; }
  .nav-dot.has-count { top: 2px; left: 26px; }
  .hero, .sheet-header, .chat-header { padding-top: calc(var(--safe-top) + 8px); padding-bottom: var(--s2); }
  .hero-title, .sheet-header h3 { font-size: 22px; }
  .st-strip { margin-top: var(--s2); }
  .st-body { padding-top: var(--s3); }
  .dash-leader { padding: var(--s3) var(--s4) calc(var(--s3) + 6px); }
  .dl-photo { width: 64px; height: 76px; }
  .dl-initials { font-size: 30px; }
  .dl-name { font-size: 22px; }
}

/* ---- Chat: header, messages, composer --------------------------------------- */
.chat-container { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--bg); }
.chat-header {
  position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: var(--s2);
  min-height: 64px; padding: calc(var(--safe-top) + 12px) var(--gutter) var(--s4);
  background: var(--yellow); border-radius: 0 0 var(--r-header) var(--r-header);
}
.chat-header-avatar { border: 2px solid #fff; cursor: pointer; }
.chat-header-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.chat-header-info h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.15; color: var(--blue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-header-info span { display: block; font-size: 13px; line-height: 1.3; color: var(--yellow-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-info span.is-typing { color: var(--green-press); font-weight: 600; }
.chat-header-actions { flex: none; display: flex; align-items: center; gap: var(--s2); }
.call-btn-action {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--icon-btn); min-width: var(--icon-btn);
  padding: 0 14px; margin: 0; border: 0; border-radius: var(--r-full); background: var(--surface); color: var(--blue);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-press) ease, transform var(--t-press) ease;
}
.call-btn-action:active { transform: scale(.94); }
.call-btn-action i { font-size: 16px; }
.call-btn-action.gc-icon { width: var(--icon-btn); padding: 0; }
.call-btn-action.gc-icon .gc-lb { display: none; }
.call-btn-action.video-call-btn.gc-icon { color: var(--green-press); }
.call-btn-action.gc-primary { background: var(--green); color: #fff; }
.call-btn-action.gc-danger { color: var(--red-deep); margin-left: var(--s1); }
.call-btn-action.gc-danger-fill { background: var(--red-deep); color: #fff; }
@media (max-width: 480px) { .call-btn-action.video-call-btn.gc-text { width: var(--icon-btn); padding: 0; } .call-btn-action.video-call-btn.gc-text .gc-lb { display: none; } }
@media (min-width: 1100px) { .call-btn-action.gc-icon { width: auto; padding: 0 14px; } .call-btn-action.gc-icon .gc-lb { display: inline; } }
/* Phones: with three or more header buttons the group name had no room left
   (none at all at 320). The name and member count (which open the same group
   info) win over the avatar circle; the smallest phones also get tighter buttons. */
@media (max-width: 479px) {
  .chat-header:has(.chat-header-actions > :nth-child(3)) .chat-header-avatar { display: none; }
}
@media (max-width: 359px) {
  .chat-header-actions { gap: 4px; }
  .call-btn-action.gc-icon { width: 40px; min-width: 40px; height: 40px; }
  .call-btn-action.gc-danger { margin-left: 0; }
}
/* A group admin with no call running has five header buttons (Video call,
   Audio call, mute, members, leave): on phones they get a little smaller so
   the group name still shows. */
@media (max-width: 479px) {
  .chat-header:has(.audio-call-btn:not(.hidden)) .chat-header-actions { gap: 4px; }
  .chat-header:has(.audio-call-btn:not(.hidden)) .call-btn-action.gc-icon { width: 36px; min-width: 36px; height: 36px; }
  .chat-header:has(.audio-call-btn:not(.hidden)) .call-btn-action.gc-danger { margin-left: 0; }
}
@media (max-width: 359px) {
  .chat-header:has(.audio-call-btn:not(.hidden)) { padding-left: 12px; padding-right: 12px; }
  .chat-header:has(.audio-call-btn:not(.hidden)) .chat-header-actions { gap: 2px; }
  .chat-header:has(.audio-call-btn:not(.hidden)) .call-btn-action.gc-icon { width: 34px; min-width: 34px; height: 34px; }
}

.chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--gutter); }
/* Centred notices in a chat: the date chip, and events such as "… started a
   group call" (never a bubble). */
.chat-date-sep, .chat-event { display: flex; justify-content: center; margin: var(--s2) 0; }
.chat-date-sep span, .chat-event span { display: inline-flex; align-items: center; gap: 6px; max-width: 90%; padding: 4px 12px; border-radius: var(--r-full); background: #EFEBDC; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; }
.chat-event i { color: var(--blue); font-size: 12px; }
.chat-event time { font-weight: 500; }
.chat-event time::before { content: '·'; margin-right: 6px; }
.system-message { align-self: center; max-width: 90%; margin: var(--s2) 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; }
.system-message.is-empty { margin: auto; }
.chat-notice { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) var(--gutter) 0; padding: var(--s3) var(--s4); border-radius: var(--r-md); font-size: 13px; font-weight: 500; transition: opacity .3s ease; }
.chat-notice.is-warn { background: var(--yellow-tint); color: #7A5100; }
.chat-notice.is-error { background: var(--red-tint); color: var(--red-deep); }
.chat-notice.is-info { background: var(--blue-tint); color: var(--blue); }

.message-bubble {
  position: relative; display: flex; flex-direction: column; max-width: min(78%, 520px); margin: 0; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); overflow-wrap: anywhere;
}
.message-bubble.incoming { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 4px; }
.message-bubble.outgoing { align-self: flex-end; background: var(--yellow-tint); border-color: #F1DE9C; border-bottom-right-radius: 4px; }
.message-bubble.is-pending { opacity: .75; }
.message-sender { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--blue); }
.message-text { font-size: 15px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; }
.message-meta { display: block; align-self: flex-end; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--muted); }
/* Long press on a message opens its actions (app.js, Message actions). On
   touch screens the bubble gives the long press to the app: no iOS text
   selection, loupe or "Copy / Look Up" callout, no Save Image menu on its
   photos (Copy is in the actions sheet). Computers keep normal selection. */
.chat-messages .message-bubble, .sabha-chat-messages .message-bubble, .chat-messages .chat-event { -webkit-touch-callout: none; }
.chat-messages .message-bubble :is(img, video, a), .sabha-chat-messages .message-bubble :is(img, a) { -webkit-touch-callout: none; -webkit-user-drag: none; }
@media (hover: none), (pointer: coarse) {
  .chat-messages .message-bubble, .sabha-chat-messages .message-bubble, .chat-messages .chat-event { -webkit-user-select: none; user-select: none; }
}
/* Swipe to reply (app.js, Swipe to reply). A group chat bubble takes a
   sideways finger itself (pan-y: the browser keeps only the vertical scroll
   and pinch, and still no double-tap zoom). The chat clips sideways: a
   bubble drawn to the right must not give the chat a sideways scroll. While
   held, only its transform changes (its own layer, no selection); letting
   go springs it back, unless the system asks for less motion. The arrow
   sits just left of the bubble and moves with it, growing with the drag;
   green once letting go replies. */
#group-messages-box { overflow-x: hidden; }
#group-messages-box .message-bubble { touch-action: pan-y pinch-zoom; }
.message-bubble.is-swiping { will-change: transform; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: no-preference) {
  .message-bubble.is-springing { transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
  .sr-ic { transition: background-color var(--t-press) ease, color var(--t-press) ease; }
}
.sr-ic {
  position: absolute; top: 50%; right: calc(100% + 12px); display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--fill-2); color: var(--ink-2); font-size: 14px;
  opacity: 0; transform: translateY(-50%) scale(.6); pointer-events: none;
}
.sr-ic.is-armed { background: var(--green); color: #fff; }
.message-bubble:focus { outline: none; }
.message-bubble:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Deleted for everyone / removed by an admin: the tombstone */
.message-bubble.is-deleted { background: var(--fill); border-style: dashed; border-color: var(--border-strong); }
.message-bubble.is-deleted .message-text { font-style: italic; color: var(--muted); }
.message-bubble.is-deleted .message-text i { margin-right: 4px; font-size: 13px; }
/* @mentions */
.mention { font-weight: 700; color: var(--blue); }
.mention.is-me { padding: 0 3px; border-radius: 4px; background: var(--blue-tint); }
/* Web addresses in a message (_msgTextHtml): a link, told apart by the line
   under it too (not by colour alone); a long address wraps anywhere instead
   of widening the bubble. */
.msg-link { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.message-bubble.mentions-me { box-shadow: inset 3px 0 0 var(--blue); }
/* The quote inside a reply: who, and one or two lines of what they said */
.mb-quote {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-width: 0; min-height: 44px; margin: 2px 0 6px;
  padding: 6px 10px; border: 0; border-left: 3px solid var(--green); border-radius: 6px; background: rgba(0, 0, 0, .05); text-align: left; cursor: pointer;
}
.message-bubble.media-bubble > .mb-quote { width: auto; margin: 4px 4px 6px; }
.mb-quote.is-mine { border-left-color: var(--blue); }
.mb-quote.is-gone .mbq-text { font-style: italic; color: var(--muted); }
.mbq-name { font-size: 12px; font-weight: 700; color: var(--green-press); }
.mb-quote.is-mine .mbq-name { color: var(--blue); }
.mbq-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
/* The quoted message, found: a short flash */
@keyframes mb-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(26, 122, 58, 0); } 30% { box-shadow: 0 0 0 4px rgba(26, 122, 58, .45); } }
.message-bubble.is-flash, .chat-event.is-flash { animation: mb-flash 1.2s ease-out 1; }
/* Computers: a "⌄" on hover / focus opens the actions (phones long-press) */
.mb-more { display: none; }
@media (hover: hover) and (pointer: fine) {
  .mb-more {
    position: absolute; top: 4px; right: 4px; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--muted);
    font-size: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); opacity: 0; transition: opacity var(--t-press) ease;
  }
  .message-bubble:hover > .mb-more, .message-bubble:focus-within > .mb-more, .mb-more:focus-visible { opacity: 1; }
}
.mb-wait { font-size: 11px; }
/* Loading earlier messages / the very start */
.chat-older { align-self: center; padding: 4px 12px; font-size: 12px; color: var(--muted); }
.chat-older i { margin-right: 4px; }
/* "↓ 3 new messages" while reading older ones */
.chat-new-pill {
  position: absolute; left: 50%; bottom: calc(var(--control) + var(--s6) + var(--safe-bottom)); z-index: 6; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-full);
  background: var(--blue); color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 600; box-shadow: var(--e2); cursor: pointer;
}
.sabha-chat-messages + .chat-new-pill { bottom: calc(var(--control) + var(--s5)); }
#group-active-container { position: relative; }
/* Composer: the quote being replied to, the @ picker above it */
.composer-dock { position: relative; flex: none; }
.reply-bar {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--gutter); background: var(--surface);
  border-top: 1px solid var(--line);
}
.reply-bar .rb-icon { flex: none; color: var(--green); font-size: 14px; }
.rb-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: var(--s2); border-left: 3px solid var(--green); }
.rb-name { font-size: 12px; font-weight: 700; color: var(--green-press); }
.rb-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--ink-2); }
.rb-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.reply-bar:not(.hidden) + .chat-footer { border-top: 0; }
.mention-pop {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 100%; z-index: 7; max-height: min(40vh, 320px); overflow-y: auto;
  margin-bottom: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e2);
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.mp-item { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; cursor: pointer; }
.mp-item.is-active, .mp-item:active { background: var(--fill); }
@media (hover: hover) { .mp-item:hover { background: var(--fill); } }
.mp-item .avatar { --avatar: 32px; width: 32px; height: 32px; font-size: 13px; flex: none; }
.mp-text { display: flex; flex-direction: column; min-width: 0; }
.mp-name { font-size: 15px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The message actions sheet */
.ma-card { padding-top: var(--s2); }
.ma-preview { display: flex; flex-direction: column; gap: 2px; margin: var(--s3) 0 var(--s2); padding: var(--s3); border-radius: var(--r-sm); background: var(--fill); }
.ma-preview-name { font-size: 13px; font-weight: 700; color: var(--blue); }
.ma-preview-name:empty { display: none; }
.ma-preview-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.ma-list { display: flex; flex-direction: column; }
.ma-btn {
  display: flex; align-items: center; gap: var(--s4); width: 100%; min-height: 52px; padding: 0 var(--s2); border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 16px; font-weight: 500; text-align: left; cursor: pointer;
}
.ma-btn i { width: 22px; text-align: center; color: var(--blue); font-size: 17px; }
.ma-btn.is-danger, .ma-btn.is-danger i { color: var(--red-deep); }
.ma-btn:active { background: var(--fill); }
@media (hover: hover) { .ma-btn:hover { background: var(--fill); } }
.ma-cancel { width: 100%; margin-top: var(--s4); }
/* The '@' on a group in the list: an unread message mentions me */
.bb-mention { top: -3px; left: -5px; min-width: 24px; height: 24px; background: var(--blue); color: #fff; font-size: 13px; }

.chat-footer {
  flex: none; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--gutter) calc(var(--s2) + var(--safe-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
}
.composer-input, #group-message-input, #sabha-chat-input, #fpm-caption {
  flex: 1 1 auto; min-width: 0; height: var(--control); margin: 0; padding: 0 var(--s4);
  border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; outline: none;
}
.composer-input:focus, #group-message-input:focus, #sabha-chat-input:focus, #fpm-caption:focus { border-color: var(--green); box-shadow: var(--ring); }
.send-message-btn, .sabha-chat-send, .fpm-btn-send {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--control); height: var(--control);
  padding: 0; border: 0; border-radius: 50%; background: var(--green); color: #fff; font-size: 16px;
  transition: background-color var(--t-press) ease, transform var(--t-press) ease;
}
.send-message-btn:active, .sabha-chat-send:active, .fpm-btn-send:active:not(:disabled) { background: var(--green-press); transform: scale(.94); }
.fpm-btn-send:disabled { background: #C9C5B6; }
.broadcast-banner { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4) calc(var(--s3) + var(--safe-bottom)); background: var(--fill); color: var(--ink-2); font-size: 14px; border-top: 1px solid var(--border); }

/* Attach button + sheet */
.attach-wrap { position: relative; flex: none; }
.attach-btn {
  display: inline-flex; align-items: center; justify-content: center; width: var(--control); height: var(--control); padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--blue); font-size: 18px; transition: background-color var(--t-press) ease;
}
.attach-btn.attach-active { background: var(--blue-tint); }
.attach-tray {
  position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 40; width: min(340px, calc(100vw - 32px));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: var(--s3) var(--s2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--e2); animation: rd-pop var(--t-fade) ease-out;
}
/* with Poll (admins) the five items stay on one row */
.attach-tray:has(> .att-item:nth-child(5):not(.hidden)) { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(392px, calc(100vw - 32px)); }
.att-item { display: flex; flex-direction: column; align-items: center; gap: var(--s2); min-width: 0; padding: var(--s2) 0; margin: 0; border: 0; border-radius: var(--r-md); background: transparent; font-family: var(--font-body); }
@media (hover: hover) { .att-item:hover { background: var(--fill); } }
.att-item:active { background: var(--fill-2); }
.att-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-size: 20px; }
.att-label { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-2); text-align: center; }

/* ---- Poll: card (vote · results · closed) and composer ---------------------- */
/* Card: head (kind tile · title + meta · state badge) · main · foot */
.poll-card { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.poll-card-head { display: flex; align-items: flex-start; gap: var(--s3); }
.poll-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.poll-q { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.poll-meta { font-size: 13px; line-height: 1.35; color: var(--muted); }
.poll-card.is-closed .poll-q { color: var(--ink-2); }
.poll-card.is-closed .poll-kind-ic { background: var(--fill); color: var(--muted); }
.poll-main { display: flex; flex-direction: column; gap: var(--s4); }
.poll-qblock { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.poll-qtext { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.poll-hint { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.poll-options { display: flex; flex-direction: column; gap: var(--s2); }
.poll-err { font-size: 13px; font-weight: 600; color: var(--red-deep); }
.poll-err:empty { display: none; }
.poll-submit-row { display: flex; gap: var(--s2); }
.poll-submit-row .ui-btn { flex: 1 1 0; }
.poll-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.poll-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.poll-foot-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-left: auto; }

/* Vote: choice rows (radio / checkbox look), selection is blue */
.poll-choice {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 48px; margin: 0; padding: var(--s3);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.35; text-align: left; overflow-wrap: anywhere;
  transition: border-color var(--t-press) ease, background-color var(--t-press) ease;
}
.poll-choice > i { flex: none; font-size: 18px; color: var(--muted); }
.poll-choice.is-on { border-color: var(--blue); background: var(--blue-wash); }
.poll-choice:active:not(:disabled), .poll-rate-btn:active:not(:disabled) { background: var(--blue-tint); }
.poll-choice.is-on > i { color: var(--blue); }
@media (hover: hover) { .poll-choice:not(:disabled):hover { border-color: var(--blue); } }

/* Vote: ranking rows with move buttons */
.poll-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.poll-rank-row { display: flex; align-items: center; gap: var(--s2); min-height: 48px; padding: var(--s1) var(--s1) var(--s1) var(--s3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); }
.poll-rank-n { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.poll-rank-text { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.poll-rank-row .ui-icon-btn, .pc-opt .ui-icon-btn, .pc-q-head .ui-icon-btn { width: var(--control-sm); height: var(--control-sm); font-size: 14px; }

/* Vote: rating 1–5 */
.poll-rate { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.poll-rate-btn { height: var(--control); margin: 0; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 16px; font-weight: 700; transition: background-color var(--t-press) ease, border-color var(--t-press) ease; }
.poll-rate-btn.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (hover: hover) { .poll-rate-btn:not(.is-on):not(:disabled):hover { border-color: var(--blue); } }
.poll-rate-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

/* Vote: short text */
textarea.ui-field.poll-text { height: auto; min-height: 80px; padding: var(--s3) var(--s4); line-height: 1.45; resize: vertical; }

/* Results: bars (single / multiple / ranking) */
.poll-option { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: var(--s2) var(--s3); overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 15px; }
.poll-option--voted { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; background: var(--fill-2); transition: width .3s ease; }
.poll-option--voted .poll-bar { background: var(--green-tint); }
.poll-opt-text { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.poll-opt-text > i { color: var(--green); margin-right: var(--s2); font-size: 14px; }
.poll-opt-text > small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.poll-pct { position: relative; z-index: 1; flex: none; font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.poll-rank-res .poll-rank-n { background: var(--blue-tint); color: var(--blue); }
.poll-rank-res > .poll-option:first-child .poll-rank-n { background: var(--blue); color: #fff; }

/* Results: rating average + distribution */
.poll-avg { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.poll-avg > b { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.poll-avg > span { font-size: 13px; color: var(--muted); }
.poll-dist { display: grid; grid-template-columns: 16px minmax(0, 1fr) 32px; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.poll-dist-bar { display: block; height: 8px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.poll-dist-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--blue); }
.poll-dist-n { text-align: right; color: var(--muted); }

/* Results: free-text answers (creator and admins) or the locked note */
.poll-answers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); max-height: 280px; overflow-y: auto; }
.poll-answers > li { padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--fill); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.poll-answers > li > small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: normal; }
.poll-locked { display: flex; align-items: center; gap: var(--s2); padding: var(--s3); border-radius: var(--r-sm); background: var(--fill); font-size: 13px; line-height: 1.4; color: var(--muted); }
.poll-locked > i { flex: none; font-size: 14px; color: var(--blue); }

/* In a group chat: a card in the timeline, on the sender's side */
.chat-poll { flex: none; align-self: flex-start; width: min(100%, 460px); margin: 0; }
.chat-poll.outgoing { align-self: flex-end; }

/* Composer (dialog): type · question · options / questions · settings */
.poll-composer { max-width: 560px; }
.poll-composer .ui-modal-actions { margin-top: var(--s3); }
.pc-kind > button { flex: 1 1 0; padding: 0 var(--s2); }
.pc-kind > button > i { font-size: 14px; }
.pc-hint { font-size: 13px; line-height: 1.4; color: var(--muted); }
.pc-err { font-size: 13px; font-weight: 600; color: var(--red-deep); }
.pc-err:empty { display: none; }
.pc-err-main { margin-top: var(--s2); }
.ui-field.is-error { border-color: var(--red-deep); }
.pc-opts { display: flex; flex-direction: column; gap: var(--s2); }
.pc-opt { display: flex; align-items: center; gap: var(--s1); }
.pc-opt > .ui-field { flex: 1 1 auto; min-width: 0; }
.pc-del { color: var(--muted); }
.pc-add { align-self: flex-start; }
.pc-q { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 var(--s2); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.pc-q-head { display: flex; align-items: center; gap: var(--s1); }
.pc-q-title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--blue); }
.pc-q-optional { display: flex; align-items: center; gap: var(--s2); }
.pc-q-optional > input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.pc-preview-note { margin: 0 0 var(--s3); font-size: 13px; color: var(--muted); }
.poll-card.is-preview { box-shadow: none; }
@media (max-width: 420px) { .pc-kind > button > i { display: none; } }

/* ---- Media in bubbles -------------------------------------------------------- */
.message-bubble.media-bubble { padding: 4px; max-width: none; }
.message-bubble.media-bubble > .message-sender { padding: 4px 8px 2px; }
.message-bubble.media-bubble > .message-text { padding: 6px 8px 2px; }
.message-bubble.media-bubble > .message-meta { position: absolute; right: 10px; bottom: 10px; margin: 0; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, .52); color: #fff; font-size: 11px; line-height: 1.5; }
.message-bubble.media-bubble:has(> .message-text) > .message-meta,
.message-bubble.is-pending > .message-meta { position: static; background: none; color: var(--muted); padding: 2px 6px 0; }
.message-bubble.file-bubble { padding: var(--s2); max-width: none; }
.message-bubble.file-bubble > .message-sender { padding: 0 var(--s1) var(--s1); }
.message-bubble.file-bubble > .message-meta { padding: 2px var(--s1) 0; }
.mb-img, .mb-video {
  position: relative; display: block; width: min(260px, 64vw); padding: 0; margin: 0; border: 0; border-radius: var(--r-md); overflow: hidden;
  background: #E9E5D6; cursor: zoom-in;
}
.mb-img img, .mb-video video { display: block; width: 100%; height: auto; min-height: 120px; max-height: 340px; object-fit: cover; }
.mb-img.is-broken { cursor: default; }
/* Admin > Reports: the reported photo or file, small (it may have been
   deleted by its sender: the report keeps it). */
.rep-media { margin-top: 6px; max-width: 180px; }
.rep-media .mb-img img, .rep-media .mb-video video { min-height: 0; max-height: 140px; }
.mb-img.is-broken img { opacity: 0; }
.mb-video.is-broken { cursor: default; }
.mb-video.is-broken :is(video, .mb-play) { opacity: 0; }
.mb-video.is-broken::after { content: 'Video unavailable'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); }
.mb-file.is-removed { color: var(--muted); }
.mb-img.is-broken::after { content: 'Photo unavailable'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); }
.is-pending :is(.mb-img, .mb-video) :is(img, video) { opacity: .7; }
.mb-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: 18px; pointer-events: none; }
.mb-play i { margin-left: 3px; }
.mb-play.sm { width: 32px; height: 32px; font-size: 12px; }
.mb-album { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: min(260px, 64vw); border-radius: var(--r-md); overflow: hidden; }
.mb-album-tile { position: relative; display: block; padding: 0; margin: 0; border: 0; aspect-ratio: 1; background: #E9E5D6; overflow: hidden; cursor: zoom-in; }
.mb-album-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-album.n3 .mb-album-tile:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.mb-album-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); color: #fff; font-size: 22px; font-weight: 700; }
.mb-audio { display: flex; align-items: center; gap: var(--s3); width: min(260px, 64vw); padding: var(--s1) 0 0; }
.mb-audio-btn { flex: none; width: var(--control); height: var(--control); border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-size: 16px; }
.mb-audio-btn .fa-play { margin-left: 2px; }
.mb-audio-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mb-audio-seek { width: 100%; height: 20px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.mb-audio-meta { display: flex; justify-content: space-between; gap: var(--s2); font-size: 12px; color: var(--muted); }
.mb-audio-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.mb-audio-time { flex: none; font-variant-numeric: tabular-nums; }
.mb-file { display: flex; align-items: center; gap: var(--s3); width: min(272px, 66vw); padding: var(--s3); border-radius: var(--r-md); background: rgba(0, 0, 0, .04); color: var(--ink); text-decoration: none; }
.outgoing .mb-file { background: rgba(122, 81, 0, .07); }
.mb-file-ic, .fpm-doc { display: flex; align-items: center; justify-content: center; }
.mb-file-ic { flex: none; width: var(--control); height: var(--control); border-radius: var(--r-sm); font-size: 20px; }
/* file tiles: a blue icon tile (grey for a file type we do not know) */
.tone-blue:is(.mb-file-ic, .fpm-doc) { background: var(--blue-tint); color: var(--blue); }
.tone-grey:is(.mb-file-ic, .fpm-doc) { background: var(--fill-2); color: #55554A; }
.mb-file-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-file-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; line-height: 1.3; }
.mb-file-meta { font-size: 12px; color: var(--muted); }
.mb-file-dl { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--blue-line); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--blue); }
/* uploading / failed */
.mb-pending-wrap { position: relative; }
.mb-status { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); color: #fff; }
.mb-pending-wrap:has(.mb-file, .mb-audio) .mb-status { inset: auto; right: 6px; top: 50%; transform: translateY(-50%); margin: 0; }
.mb-pending-wrap:has(.mb-audio) .mb-status { right: auto; left: 0; }
.mb-status svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mb-ring-bg { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 3; }
.mb-ring { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .2s ease; }
.mb-cancel { position: relative; width: var(--icon-btn); height: var(--icon-btn); border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 16px; }
.mb-status.is-failed { background: var(--red); cursor: pointer; font-size: 16px; }
.message-bubble.is-failed { border-color: var(--red-line); opacity: 1; }
.mb-fail-note { display: block; padding: var(--s2) var(--s1) 0; font-size: 12px; color: var(--red-deep); text-align: right; }
.mb-fail-note button { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--red-deep); text-decoration: underline; }

/* ---- File preview (before sending) -------------------------------------------- */
.fpm-overlay { position: fixed; inset: 0; z-index: 4500; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s4); background: rgba(14, 18, 15, .55); }
.fpm-panel { width: min(560px, 100%); max-height: min(88dvh, 720px); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: var(--r-sheet); box-shadow: var(--e3); animation: rd-sheet-up var(--t-sheet) ease-out; }
.fpm-header { border-bottom: 1px solid var(--line); }
.fpm-close { order: 2; }
.fpm-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fpm-count { font-size: 13px; color: var(--muted); }
.fpm-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s3); padding: var(--s4) var(--s5); }
.fpm-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fpm-thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--fill); }
.fpm-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fpm-play { position: absolute; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
.fpm-doc { width: 100%; height: 100%; flex-direction: column; gap: var(--s2); font-size: 24px; }
.fpm-doc b { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.fpm-remove { position: absolute; top: var(--s2); right: var(--s2); width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; }
.fpm-remove::after { content: ''; position: absolute; inset: -8px; }
.fpm-file-name { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpm-file-size { font-size: 12px; line-height: 1.3; color: var(--muted); }
.fpm-card.has-problem .fpm-thumb { outline: 2px solid var(--red); outline-offset: -2px; opacity: .6; }
.fpm-problem { color: var(--red-deep); font-weight: 600; }
.fpm-add { cursor: pointer; }
.fpm-add .fpm-thumb { background: var(--surface); border: 1.5px dashed var(--border-strong); color: var(--muted); font-size: 20px; }
.fpm-add .fpm-file-name { color: var(--muted); }
.fpm-footer { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s5) calc(var(--s3) + var(--safe-bottom)); border-top: 1px solid var(--line); }
.fpm-send-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; border: 2px solid #fff; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 599px) {
  .fpm-overlay { justify-content: flex-end; align-items: stretch; padding: 0; }
  .fpm-panel { width: 100%; max-height: 88dvh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
}
/* phone in landscape: docked to the bottom as well */
@media (min-width: 600px) and (hover: none) and (max-height: 599px), (min-width: 600px) and (pointer: coarse) and (max-height: 599px) {
  .fpm-overlay { justify-content: flex-end; padding: 0 var(--s4); }
  .fpm-panel { max-height: 94dvh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
}

/* ---- Viewer (lightbox) ---------------------------------------------------------- */
#media-lightbox { position: fixed; inset: 0; z-index: 99999; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #0B0F0C; outline: none; font-family: var(--font-body); animation: rd-fade var(--t-fade) ease-out; }
.lb-bar { display: flex; align-items: center; gap: var(--s3); padding: calc(var(--safe-top) + 8px) var(--s3) var(--s2); color: #fff; }
.lb-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lb-title b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-title span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.lb-counter { flex: none; font-size: 13px; color: rgba(255, 255, 255, .8); }
.lb-stage { display: flex; align-items: center; justify-content: center; min-height: 0; padding: var(--s2) var(--s2) calc(var(--s4) + var(--safe-bottom)); }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.lb-video { background: #000; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; display: none; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; cursor: pointer; }
.lb-prev { left: var(--s4); } .lb-next { right: var(--s4); }
@media (hover: hover) { .lb-nav { display: inline-flex; } }

/* ---- Media gallery ------------------------------------------------------------- */
.mg-screen { position: fixed; inset: 0; z-index: 99990; display: flex; flex-direction: column; background: var(--bg); font-family: var(--font-body); animation: rd-fade var(--t-fade) ease-out; }
.mg-head { flex: none; display: flex; align-items: center; gap: var(--s2); min-height: 64px; padding: calc(var(--safe-top) + 12px) var(--gutter) var(--s4); background: var(--yellow); border-radius: 0 0 var(--r-header) var(--r-header); }
.mg-screen h3 { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--blue); }
.mg-tabs { margin: var(--s4) var(--gutter) 0; }
.mg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s4) var(--gutter) calc(var(--s8) + var(--safe-bottom)); }
.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; }
.mg-tile { position: relative; display: block; padding: 0; border: 0; aspect-ratio: 1; border-radius: var(--r-badge); overflow: hidden; background: var(--fill-2); cursor: zoom-in; }
.mg-tile :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-files { display: flex; flex-direction: column; gap: var(--s2); }
.mg-file { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--e1); padding: var(--s1); }
/* in a gallery card the file sits flat on the card (no tile in a tile); 16 from every edge */
.mg-file .mb-file { background: transparent; }
.mg-file .mb-audio { padding: var(--s3); }
.mg-file .mb-file, .mg-file .mb-audio { width: auto; }
/* desktop: a page like the others — the rail stays, content in the page column */
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) {
  .mg-screen { left: var(--rail-w); }
  .mg-head, .mg-body { padding-left: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); }
  .mg-screen > .mg-tabs { margin-left: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); margin-right: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); }
}

/* ---- Live Sabha room: dark flat stage, light panels ------------------------- */
.sabha-immersive-room {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow: hidden;
  background: var(--st-bg); color: var(--st-text); font-family: var(--font-body);
}
.sabha-immersive-room.room-pseudo-fs, .sabha-immersive-room:fullscreen { position: fixed; inset: 0; z-index: 3000; width: 100vw; height: 100dvh; }
/* Full screen (client/app.js RoomFs): over the tab bar and the call bar; the
   room's own sheets (people, chat, polls) still open above it. */
.sabha-immersive-room.room-pseudo-fs { z-index: 3400; }
html.room-fs-on .call-return-bar { visibility: hidden; }
.room-top-bar {
  position: relative; z-index: 6; flex: none; display: flex; align-items: center; gap: var(--s2); min-height: 64px;
  padding: calc(var(--safe-top) + 8px) var(--s3) var(--s2) var(--s2); background: var(--st-surface); border-bottom: 1px solid var(--st-border);
}
.room-back-btn .rb-desk { display: none; }
.room-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.room-meta h2 { font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.15; color: var(--st-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-meta-line { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-size: 13px; line-height: 1; color: var(--st-muted); }
.topbar-listeners { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 13px; font-weight: 500; }
.topbar-listeners i { font-size: 12px; }
#room-active-topic { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#room-active-topic::before { content: '·'; margin-right: var(--s2); }
#room-active-topic:empty { display: none; }
/* Leave = the standard danger button (red outline), sized to the top bar's 40 */
.room-end-btn.ui-btn, .leave-room-btn.ui-btn { flex: none; height: var(--icon-btn); padding: 0 14px; font-size: 14px; }
@media (hover: hover) { .room-top-icon:hover, .room-back-btn:hover { background: var(--st-hover); } }

/* stage */
.room-center { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); overflow: hidden; }
.audience-section { display: none; }
/* the tile gap here is GAP in layoutStage() (app.js) */
.speakers-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: var(--s2); overflow: hidden; }
.speakers-grid.stage-scroll { align-content: flex-start; overflow-y: auto; }
.speaker-card {
  position: relative; flex: 0 0 auto; width: var(--tile-w, 480px); height: var(--tile-h, 270px); max-width: 100%; overflow: hidden;
  background: var(--st-raised); border: 1px solid var(--st-border); border-radius: var(--r-card); transition: width .18s ease, height .18s ease;
}
/* active speaker: a ring drawn over the tile, so the tile does not resize */
.speaker-card.speaking { border-color: var(--st-speaking); outline: 2px solid var(--st-speaking); outline-offset: -2px; }
.speaker-video-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--st-raised); overflow: hidden; }
.speaker-avatar-wrap { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: var(--st-raised); }
.speaker-video-feed { position: relative; z-index: 3; width: 100%; height: 100%; object-fit: cover; }
.speaker-video-feed.hidden + .speaker-avatar-wrap, .speaker-avatar-wrap { z-index: 2; }
#sabha-local-video { transform: scaleX(-1); }
.stage-main .speaker-video-feed { object-fit: contain; background: #000; }
.speaker-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green); color: #fff; font-size: 24px; font-weight: 700; }
.speaker-name {
  position: absolute; left: var(--s2); bottom: var(--s2); z-index: 4; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 16px);
  padding: var(--s1) var(--s2); border-radius: var(--r-sm); background: rgba(0, 0, 0, .62); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35;
}
.speaker-name i { font-size: 12px; flex: none; }
.speaker-name i.tile-mic-off { color: #FF7B76; }
.speaker-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speaker-role { position: absolute; left: var(--s2); top: var(--s2); z-index: 4; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-badge); background: var(--yellow); color: #2A1D00; font-size: 12px; font-weight: 700; }
.tile-pin-btn { position: absolute; top: var(--s2); right: var(--s2); z-index: 5; width: var(--icon-btn); height: var(--icon-btn); border: 0; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: 14px; opacity: 0; transition: opacity var(--t-fade) ease; }
.speaker-card:hover .tile-pin-btn, .tile-pin-btn.active { opacity: 1; }
.tile-pin-btn.active { background: var(--yellow); color: #2A1D00; }
.tile-admin { position: absolute; right: var(--s2); bottom: var(--s2); z-index: 5; display: flex; gap: var(--s2); opacity: 0; transition: opacity var(--t-fade) ease; }
.speaker-card:hover .tile-admin { opacity: 1; }
.tile-admin button { display: inline-flex; align-items: center; gap: 6px; height: var(--control-sm); padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: rgba(0, 0, 0, .65); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 600; }
.tile-admin button.danger { background: var(--red); }
@media (hover: none) { .tile-pin-btn { opacity: 1; } .tile-admin { display: none; } }
/* Four host buttons may not fit a small tile on one line. */
.tile-admin { flex-wrap: wrap; justify-content: flex-end; left: var(--s2); pointer-events: none; }
.tile-admin button { pointer-events: auto; }
/* Group call tiles: the host's buttons stay visible (there is no people panel)
   at the top, clear of the name label, on phones too. */
.video-card .gc-tile-admin { top: var(--s2); bottom: auto; opacity: 1; }
@media (hover: none) { .video-card .gc-tile-admin { display: flex; } }
/* The host's buttons sit above everything else on the tile (name, badges,
   watermark): a host control must always be tappable. */
.tile-admin { z-index: 7; }
/* pinned (spotlight) */
.speakers-grid.pinned { flex-direction: column; flex-wrap: nowrap; }
.stage-main { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.stage-main > .speaker-card { width: var(--pin-w, 100%); height: var(--pin-h, 100%); }
.stage-strip { flex: 0 0 var(--strip-h, 110px); height: var(--strip-h, 110px); max-width: 100%; display: flex; gap: var(--s2); justify-content: safe center; overflow-x: auto; overflow-y: hidden; }
.stage-strip > .speaker-card { width: calc(var(--strip-h, 110px) * 1.7778); height: 100%; }
.stage-strip .speaker-name { left: var(--s1); bottom: var(--s1); padding: 2px 6px; font-size: 12px; }
.stage-strip .speaker-role, .stage-strip .tile-admin { display: none; }
.stage-strip .speaker-avatar { width: var(--avatar); height: var(--avatar); font-size: 14px; }
.stage-strip .tile-pin-btn { width: 32px; height: 32px; }
/* audience broadcast */
#sabha-hls-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--st-border); border-radius: var(--r-card); background: #000; overflow: hidden; }
#sabha-hls-video { width: 100%; height: 100%; object-fit: contain; }
#sabha-hls-unmute { position: absolute; left: 50%; bottom: var(--s4); transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: var(--s2); height: var(--icon-btn); padding: 0 var(--s4); border: 0; border-radius: var(--r-full); background: #fff; color: var(--ink); font-family: var(--font-body); font-size: 14px; font-weight: 600; }
#sabha-hls-note { color: var(--st-muted); font-size: 14px; }
.hls-live-voice { position: absolute; left: var(--s2); top: var(--s2); z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }
.sabha-broadcast-note { align-self: center; margin: var(--s2) 0; padding: 6px 14px; border-radius: 999px; background: var(--st-raised); color: var(--st-text); font-size: 13px; font-weight: 600; }
/* group call: the same broadcast player in place of the video grid (big calls) */
#gvc-hls-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--st-border); border-radius: var(--r-card); background: #000; overflow: hidden; }
#gvc-hls-video { width: 100%; height: 100%; object-fit: contain; }
#gvc-hls-unmute { position: absolute; left: 50%; bottom: var(--s4); transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: var(--s2); height: var(--icon-btn); padding: 0 var(--s4); border: 0; border-radius: var(--r-full); background: #fff; color: var(--ink); font-family: var(--font-body); font-size: 14px; font-weight: 600; }
/* audio call: the broadcast carries no picture; say what it is instead */
.gvc-hls-audio { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); background: var(--st-raised); color: var(--st-text); font-size: 15px; font-weight: 600; }
.gvc-hls-audio i { font-size: 32px; color: var(--yellow); }
.video-call-header .leave-room-btn { align-self: center; }
.cp-people-head { flex-wrap: wrap; }
.cp-head-actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); min-width: 0; }
/* live reactions: one narrow lane at the bottom right of the stage (placed by
   _rxPlaceLane), brand colours only; never takes a tap */
.rx-lane { position: fixed; right: 12px; bottom: 120px; width: 96px; height: 300px; overflow: hidden; pointer-events: none; z-index: 55; }
.rx-float { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; opacity: 0; animation: rx-rise 3s cubic-bezier(.3, .55, .5, 1) forwards; will-change: transform, opacity; }
.rx-sway { display: block; width: 100%; height: 100%; transform-origin: 50% 75%; animation: rx-sway 3s ease-in-out forwards; }
.rx-float .rx-ic { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }   /* static: painted once, then only moved */
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) { .rx-lane { width: 124px; } }
@media (prefers-reduced-motion: reduce) { .rx-float { animation-name: rx-fade; animation-timing-function: ease-in-out; } .rx-sway { animation: none; } }
/* the sprite with the reaction pictures: kept out of layout (display:none would drop its gradients) */
.rx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.rx-ic { display: block; flex: none; overflow: visible; }
/* Sabha: four picture buttons above the controls (44 tall, fit a 320 phone) */
.emoji-btn.rx-btn { width: 56px; height: var(--control); margin: -2px 0; }   /* 44 to tap, the row keeps its 40 so the stage does not shrink */
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) { .emoji-btn.rx-btn { margin: 0; } }
.emoji-btn.rx-btn .rx-ic { width: 30px; height: 30px; transition: transform var(--t-press) ease; }
.emoji-btn.rx-btn:active { transform: none; }
.emoji-btn.rx-btn:active .rx-ic { transform: scale(.84); }
/* group call: one React button opens a small tray with the four */
.rc-btn.rx-call-btn .rc-ic .rx-ic { width: 28px; height: 28px; }
.rc-btn.rx-call-btn.rx-open .rc-ic { background: var(--st-hover); box-shadow: inset 0 0 0 2px var(--yellow); }
.rc-btn.rx-call-btn.rx-open .rc-lb { color: var(--st-text); }
.rx-tray { position: fixed; left: 8px; bottom: 96px; z-index: 60; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--st-border); border-radius: var(--r-full); background: var(--st-raised); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); transform-origin: var(--rx-tip, 50%) 100%; animation: rx-tray-in .16s ease-out; }
.rx-tray::after { content: ''; position: absolute; left: var(--rx-tip, 50%); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--st-raised); border-right: 1px solid var(--st-border); border-bottom: 1px solid var(--st-border); transform: rotate(45deg); }
.rx-tray-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.rx-tray-btn .rx-ic { width: 36px; height: 36px; transition: transform var(--t-press) ease; }
.rx-tray-btn:active .rx-ic { transform: scale(.82); }
.rx-tray-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
@media (hover: hover) { .rx-tray-btn:hover { background: var(--st-hover); } .rx-tray-btn:hover .rx-ic { transform: translateY(-2px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .rx-tray { animation: none; } }
/* poll popup: above the Sabha and the group call screen */
.call-overlay.ui-modal.poll-popup { z-index: 5200; }
/* The poll popup announces something: its head is the blue notice band. */
.poll-popup-card > .ui-modal-head { background: var(--blue); border-bottom: 3px solid var(--yellow); }
.poll-popup-card > .ui-modal-head h2 { color: #fff; }
/* The close X on the blue header: a see-through white disc, not the light
   fill of a close button on a white surface (a white X on it was all but
   invisible, and members did not see how to dismiss the popup). */
.poll-popup-card > .ui-modal-head .room-panel-close { background: rgba(255, 255, 255, .18); color: #fff; }
@media (hover: hover) { .poll-popup-card > .ui-modal-head .room-panel-close:hover { background: rgba(255, 255, 255, .3); } }
.poll-popup-sub { margin: 0 0 var(--s3); font-size: 14px; color: var(--muted); }
.poll-popup-card .poll-card { box-shadow: none; }
.poll-voted-line { display: flex; align-items: flex-start; gap: var(--s2); margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--green-tint); color: var(--green-press); font-size: 14px; line-height: 1.4; }
.poll-voted-line i { margin-top: 3px; }
.poll-voted-line b { font-weight: 700; }

/* stage requests: a card above the controls */
.host-drawer { position: relative; z-index: 7; flex: none; max-height: 34vh; overflow-y: auto; margin: 0 var(--s3) var(--s3); padding: var(--s3) var(--s4) var(--s1); background: var(--surface); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--e2); }
.host-drawer h3 { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.host-drawer h3 i { font-size: 16px; color: var(--yellow-deep); }
.hd-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); padding: var(--s2) 0; }
.hd-foot:not(:has(> :not(.hidden))) { display: none; }
.asks-toggle-btn { flex: none; }
.asks-toggle-btn.is-closed { color: var(--red-deep); }
.hand-raise-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.hr-text { flex: 1 1 150px; min-width: 0; font-size: 14px; color: var(--ink-2); }
.hr-text b { color: var(--ink); font-weight: 600; }
/* the decision buttons are standard 44 buttons (Allow = primary) */
.hr-actions { display: flex; gap: var(--s2); flex: none; }

/* controls: labelled round buttons, reactions above */
.room-bottom-controls { position: relative; z-index: 6; flex: none; padding: var(--s2) var(--s2) calc(var(--s2) + var(--safe-bottom)); background: var(--st-surface); border-top: 1px solid var(--st-border); }
.audio-controls-panel { display: flex; flex-direction: column; gap: var(--s2); }
.rc-reactions { display: flex; justify-content: center; gap: var(--s2); }
.emoji-btn { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: var(--icon-btn); padding: 0; border: 1px solid var(--st-border); border-radius: var(--r-full); background: var(--st-raised); font-size: 17px; line-height: 1; }
.rc-main { display: flex; justify-content: center; gap: 2px; }
.rc-btn { flex: 1 1 0; min-width: 0; max-width: 92px; display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s1) 2px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--st-text); font-family: var(--font-body); }
.rc-ic { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: var(--control); border-radius: 22px; background: var(--st-raised); color: var(--st-text); font-size: 18px; transition: background-color var(--t-press) ease, transform var(--t-press) ease; }
.rc-btn:active .rc-ic, .emoji-btn:active { transform: scale(.94); }
.emoji-btn { transition: transform var(--t-press) ease; }
.rc-lb { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.3; color: var(--st-muted); }
/* narrow phones (360): five labelled controls share the row */
@media (max-width: 380px) {
  .rc-btn { padding: var(--s1) 0; }
  .rc-lb { font-size: 12px; }
  .room-top-bar .leave-room-btn.ui-btn { padding: 0 10px; }
}
.rc-btn.rc-live .rc-ic { color: #6FDB97; }
/* narrow phones (320-380): a label that does not fit goes on two lines, never cut */
@media (max-width: 380px) { .rc-lb { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; text-align: center; overflow-wrap: normal; } }
.rc-btn.rc-off .rc-ic { background: var(--red); color: #fff; }
.rc-btn.rc-off .rc-lb { color: #FF9D99; }
.rc-btn.rc-accent .rc-ic { background: var(--yellow); color: #2A1D00; }
.rc-btn.rc-on .rc-ic { background: var(--blue); color: #fff; }
.rc-btn.rc-on .rc-lb { color: var(--st-text); }
.rc-count { position: absolute; top: -6px; right: -4px; }
/* host with a waiting room: six controls in the row; tighter so no label clips at 412px */
.rc-main--six { gap: 0; }
.rc-main--six .rc-btn { padding-left: 0; padding-right: 0; }
@media (hover: hover) { .rc-btn:hover .rc-ic, .emoji-btn:hover { background: var(--st-hover); } }

/* people / chat / polls: bottom sheets on phones, a column on desktop */
.room-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3500; width: 100%; height: min(74dvh, 620px);
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface); color: var(--ink);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--e3), 0 0 0 100vmax rgba(8, 12, 9, .5); animation: rd-sheet-up var(--t-sheet) ease-out;
}
.room-panel::before { content: ''; display: block; flex: none; width: 36px; height: 4px; margin: var(--s2) auto 0; border-radius: 2px; background: var(--border-strong); }
.room-panel-head { border-bottom: 1px solid var(--line); }
.room-panel-count { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s2); margin-left: var(--s2); border-radius: 11px; background: var(--fill); color: var(--muted); font-family: var(--font-body); font-size: 12px; font-weight: 600; vertical-align: middle; }
/* every sheet body: cream, the sheet gutter (20) like the title above it */
.room-panel-body, .pp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s4) var(--sheet-gutter); background: var(--bg); }
.pp-row { grid-template-columns: var(--avatar) minmax(0, 1fr); }
.pp-row .pp-actions { grid-column: 2; justify-content: flex-start; }
.pp-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-top: var(--s1); }
.pp-actions button { display: inline-flex; align-items: center; gap: 6px; height: var(--control-sm); padding: 0 12px; border: 1px solid var(--blue-line); border-radius: var(--r-sm); background: var(--surface); color: var(--blue); font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.pp-actions button.danger { color: var(--red-deep); border-color: var(--red-line); }
.pp-actions button.pp-pinned { background: var(--blue); border-color: var(--blue); color: #fff; }
.pp-more { padding: var(--s3) var(--s4); font-size: 13px; color: var(--muted); }
.pp-actions button.is-primary { background: var(--green); border-color: var(--green); color: #fff; }
.rw-row .pp-actions { gap: var(--s2); }
.rw-row .pp-actions button { flex: 1 1 0; justify-content: center; max-width: 160px; }
.pp-empty { padding: var(--s2) var(--s4); font-size: 14px; color: var(--muted); }
.sabha-chat-messages { display: flex; flex-direction: column; gap: var(--s2); background: var(--bg); }
.sabha-chat-messages .message-bubble { max-width: 82%; }
.sabha-chat-mode { flex: 0 1 auto; width: auto; min-width: 0; max-width: 46%; height: 40px; font-size: 14px; }
.sabha-chat-note { flex: none; margin: 0; padding: var(--s2) var(--sheet-gutter) 0; font-size: 13px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); }
.sabha-chat-note + .sabha-chat-compose { border-top: 0; }
#sabha-chat-input:disabled { background: var(--fill); color: var(--muted); }
.sabha-chat-compose { flex: none; display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--sheet-gutter) calc(var(--s3) + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.sabha-polls-list { display: flex; flex-direction: column; gap: var(--s3); background: var(--bg); }

@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) {
  .sabha-immersive-room:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .room-top-bar { grid-column: 1 / -1; grid-row: 1; padding: var(--s3) var(--s4) var(--s3) var(--s3); }
  .room-back-btn .rb-phone { display: none; }
  .room-back-btn .rb-desk { display: inline-block; }
  #sabha-pager { grid-column: 1; grid-row: 2; }
  .room-center { padding: var(--s4); min-width: 0; }
  .host-drawer { grid-column: 1; grid-row: 3; justify-self: end; width: min(440px, calc(100% - 32px)); margin: 0 var(--s4) var(--s3); border: 1px solid var(--border); }
  .room-bottom-controls { grid-column: 1; grid-row: 4; padding: var(--s3) var(--s4); min-width: 0; }
  .audio-controls-panel { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2) var(--s8); }
  .rc-main { order: 1; gap: var(--s2); flex-wrap: nowrap; }
  .rc-reactions { order: 2; }
  .rc-btn { flex: 0 0 auto; min-width: 76px; max-width: none; }
  .room-panel { position: relative; inset: auto; grid-column: 2; grid-row: 2 / 5; width: 360px; height: auto; border-radius: 0; border-left: 1px solid var(--border); box-shadow: none; z-index: 5; }
  .room-panel::before { display: none; }
}

/* Mobile app (embed-stage WebView): only the room shows; the app bar has its own back button */
.embed-stage .app-header, .embed-stage .app-navigation, .embed-stage .sidebar-list, .embed-stage .room-back-btn { display: none; }
.embed-stage #app-container { padding: 0; }
.embed-stage .conference-split { display: block; height: 100dvh; }
.embed-stage #conference-detail-panel { width: 100vw; height: 100dvh; }
.embed-stage .room-top-bar { padding-left: var(--s4); }

/* ---- Call screens (1:1 and group video) ---------------------------------------- */
.call-overlay:not(.ui-modal) {
  position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s6); background: var(--st-bg); color: var(--st-text); font-family: var(--font-body);
}
.call-card { display: flex; flex-direction: column; align-items: center; gap: var(--s3); width: 100%; max-width: 320px; text-align: center; }
.call-card h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #fff; }
.call-status { font-size: 14px; color: var(--st-muted); }
.call-actions, .call-mid-controls, .video-controls { display: flex; justify-content: center; gap: var(--s5); margin-top: var(--s5); }
.mid-control-btn, .call-action-btn { width: 52px; height: 52px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--st-raised); color: #fff; font-size: 18px; }
.mid-control-btn.active { background: #fff; color: var(--st-bg); }
.hangup-btn { background: var(--red); color: #fff; }
.audio-wave-visualization { display: none; }
.call-overlay.bottom-sheet { justify-content: flex-end; padding: 0; background: rgba(14, 18, 15, .55); }
.incoming-sheet-card { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: var(--s5); padding: var(--s6) var(--s6) calc(var(--s6) + var(--safe-bottom)); background: var(--surface); color: var(--ink); border-radius: var(--r-sheet) var(--r-sheet) 0 0; animation: rd-sheet-up var(--t-sheet) ease-out; }
.incoming-info { display: flex; align-items: center; gap: var(--s4); }
.incoming-text { display: flex; flex-direction: column; gap: 2px; }
.incoming-label, .incoming-sub { font-size: 13px; color: var(--muted); }
.incoming-note { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--yellow-tint); color: #7A5100; font-size: 14px; line-height: 1.4; }
/* a call ringing while this member listens in a group call (a full-screen
   overlay of the same layer, later in the page) shows above it */
#incoming-call-screen { z-index: 5400; }
.incoming-text h3 { font-size: 20px; font-weight: 700; }
.incoming-actions { display: flex; gap: var(--s3); }
.incoming-action-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--control); border: 0; border-radius: var(--r-md); font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.reject-btn { background: var(--red); color: #fff; }
.accept-btn { background: var(--green); color: #fff; }
/* Incoming group call, full screen (app.js GroupRing): the call screens'
   dark look in either theme, above every banner and sheet, inside the safe
   areas; Join and Decline 72px round with their words under them. */
.gc-ring {
  position: fixed; inset: 0; z-index: 100002; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-top) + 48px) max(var(--s6), env(safe-area-inset-right)) calc(var(--safe-bottom) + 40px) max(var(--s6), env(safe-area-inset-left));
  background: radial-gradient(120% 70% at 50% 0%, var(--st-raised), var(--st-bg) 70%); color: var(--st-text); font-family: var(--font-body); text-align: center;
  animation: rd-fade var(--t-fade) ease-out;
}
.gc-ring.hidden { display: none; }
.gc-ring :where(h2, p) { margin: 0; }
.gc-ring-top { display: flex; flex-direction: column; align-items: center; gap: var(--s3); width: 100%; max-width: 420px; min-width: 0; }
.gc-ring-kind { display: inline-flex; align-items: center; gap: var(--s2); font-size: 14px; font-weight: 600; color: var(--st-muted); }
.gc-ring-avatar {
  position: relative; width: 112px; height: 112px; margin: var(--s5) 0 var(--s2); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff; font-family: var(--font-display); font-size: 40px; font-weight: 800; overflow: visible;
}
.gc-ring-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.gc-ring-avatar::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); }
.gc-ring-group { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.2; color: #fff; max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gc-ring-who { font-size: 16px; line-height: 1.4; color: var(--st-text); overflow-wrap: anywhere; }
.gc-ring-actions { display: flex; justify-content: space-around; width: 100%; max-width: 360px; }
.gc-ring-act { display: flex; flex-direction: column; align-items: center; gap: var(--s2); font-size: 15px; font-weight: 600; color: var(--st-text); }
.gc-ring-btn { width: 72px; height: 72px; min-width: 64px; min-height: 64px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.gc-ring-decline { background: var(--red); }
.gc-ring-join { background: var(--green); }
.gc-ring-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .gc-ring-avatar::after { animation: gc-ring-pulse 1.6s ease-out infinite; }
  .gc-ring-join { animation: gc-ring-nudge 1.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .gc-ring { animation: none; } }
@keyframes gc-ring-pulse { from { transform: scale(.92); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
@keyframes gc-ring-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-6px); } 90% { transform: translateY(0); } }
@media (max-height: 560px) { .gc-ring { padding-top: calc(var(--safe-top) + 16px); padding-bottom: calc(var(--safe-bottom) + 16px); } .gc-ring-avatar { width: 80px; height: 80px; margin-top: var(--s2); font-size: 30px; } }
#group-video-call-screen { padding: 0; }
.video-call-container { display: flex; flex-direction: column; width: 100%; height: 100%; max-width: 1100px; padding: calc(var(--safe-top) + var(--s3)) var(--s4) calc(var(--s4) + var(--safe-bottom)); }
.video-call-header { flex: none; padding-bottom: var(--s3); }
.video-call-meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
/* The meta column may shrink (a flex item keeps its content's width by
   default) and the "Live Video Conference" pill is cut with an ellipsis
   inside it: at 360px it ran under the people-count button. Under 400px the
   pill just says "Live" (a long label hidden, the short one shown). */
.video-call-meta { min-width: 0; flex: 0 1 auto; }
.video-call-meta .live-tag { max-width: 100%; overflow: hidden; }
.video-call-meta .live-tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.video-call-meta .lt-short { display: none; }
@media (max-width: 399px) {
  .video-call-meta .lt-long { display: none; }
  .video-call-meta .lt-short { display: inline; }
}
.video-call-meta h2 { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: #fff; }
/* the tile sizes come from layoutCallGrid() (app.js), the Sabha stage's engine */
.video-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: var(--s2); overflow: hidden; }
.video-grid.stage-scroll { align-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
.video-grid:not(.spotlit) > .video-card { flex: 0 0 auto; width: var(--tile-w, 100%); height: var(--tile-h, 100%); min-height: 0; max-width: 100%; }
.video-card { position: relative; display: flex; align-items: center; justify-content: center; min-height: 160px; overflow: hidden; background: var(--st-raised); border: 1px solid var(--st-border); border-radius: var(--r-card); }
.video-card.local-video-card { border-color: var(--yellow); }
.video-feed { width: 100%; height: 100%; object-fit: cover; }
.local-video-card .video-feed { transform: scaleX(-1); }
.participant-label { position: absolute; left: var(--s2); bottom: var(--s2); padding: var(--s1) var(--s2); border-radius: var(--r-sm); background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 600; }
/* mic state chip, bottom right of a remote tile (over the video, like the name label) */
.participant-status-badge { position: absolute; right: var(--s2); bottom: var(--s2); z-index: 4; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; pointer-events: none; }
.participant-status-badge.is-muted { color: #FF7B76; }
.video-card .participant-label { max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-controls { flex: none; flex-direction: column; align-items: stretch; gap: 0; padding-top: var(--s2); margin-top: var(--s2); border-top: 1px solid var(--st-border); }
/* ---- Call layout (call-ui.js): active-speaker spotlight + people page ---------- */
/* Group call: the active speaker's ring, same as the Sabha stage tile. */
.video-card.speaking { border-color: var(--st-speaking); outline: 2px solid var(--st-speaking); outline-offset: -2px; }
/* Group call spotlight: one big tile and a filmstrip, like .stage-main / .stage-strip. */
.video-grid.spotlit { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: var(--s2); overflow: hidden; }
.gvc-main { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
/* the biggest 16:9 box that fits (full box where container units are missing) */
.gvc-main > .video-card { flex: none; min-height: 0; width: 100%; height: 100%; width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, 100cqw * 9 / 16); }
.gvc-main .video-feed { object-fit: contain; background: #000; }
.gvc-strip { flex: 0 0 auto; height: clamp(84px, 17vh, 130px); max-width: 100%; display: flex; gap: var(--s2); justify-content: safe center; overflow-x: auto; overflow-y: hidden; }
/* the strip scrolls on its own: its swipe never carries over to the page or the pager */
.gvc-strip, .stage-strip { min-width: 0; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.gvc-strip > .video-card { flex: 0 0 auto; height: 100%; aspect-ratio: 16 / 9; min-height: 0; }
.gvc-strip .video-avatar-fallback { width: var(--avatar); height: var(--avatar); font-size: 14px; }
.gvc-strip .participant-label { left: var(--s1); bottom: var(--s1); padding: 2px 6px; }
.gvc-strip .participant-status-badge { display: none; }
/* Two-page pager (call-ui.js): page 1 the stage, page 2 everyone in the room.
   Paging slides .cp-track; the video tiles never move, so media keeps playing. */
.call-pager { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; overflow: clip; }
.cp-track { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; }
.cp-track.cp-anim { transition: transform var(--t-sheet) ease; }
.cp-track > .cp-page { flex: 0 0 100%; width: 100%; min-width: 0; min-height: 0; }
#call-pager .cp-stage { display: flex; flex-direction: column; }
.cp-people { display: flex; flex-direction: column; color: var(--st-text); }
.cp-people-head { flex: none; display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s3) var(--s2) var(--s2); }
.cp-people-title { display: flex; align-items: center; font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.15; color: var(--st-text); }
.cp-people .room-panel-count { background: var(--st-raised); color: var(--st-text); }
.cp-people-list {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); align-content: start; gap: var(--s2);
  padding: var(--s1) var(--s3) var(--s4); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.pp-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: var(--s3) var(--s1) var(--s2);
  background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--r-card); text-align: center;
}
.pr-av { position: relative; display: flex; border-radius: 50%; }
.pp-tile .pp-avatar { width: 56px; height: 56px; font-size: 20px; }
.pp-tile.is-speaking { border-color: var(--st-speaking); }
.pp-tile.is-speaking .pr-av { box-shadow: 0 0 0 2px var(--st-surface), 0 0 0 4px var(--st-speaking); }
.pr-muted { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--st-surface); background: var(--st-raised); color: #FF7B76; font-size: 10px; }
.pp-tile .pp-name { max-width: 100%; margin-top: 2px; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--st-text); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pp-tile.is-speaking .pp-name { color: var(--st-speaking); }
.pp-tags { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.2; color: var(--st-muted); }
.pr-more-av { background: var(--st-raised); color: var(--st-text); font-size: 14px; text-transform: none; }
.pp-more .pp-name { color: var(--st-muted); }
/* page dots: the active page is a yellow pill */
.cp-dots { flex: none; display: flex; justify-content: center; gap: 2px; }
.cp-dot { width: 28px; height: 20px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cp-dot::before { content: ''; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--st-border); transition: width var(--t-sheet) ease, background var(--t-sheet) ease; }
.cp-dot.active::before { width: 20px; background: var(--yellow); }
@media (hover: hover) { .cp-dot:not(.active):hover::before { background: var(--st-muted); } }
/* the people count opens page 2 (and back) */
.cp-count-btn { padding: 0; border: 0; background: transparent; color: inherit; font-family: inherit; line-height: 1; cursor: pointer; }
.cp-count-btn[aria-expanded="true"] { color: var(--yellow); }
.video-call-header .cp-count-btn { flex: none; margin-left: auto; align-self: center; height: var(--icon-btn); padding: 0 14px; border-radius: var(--r-full); background: var(--st-raised); color: #fff; font-size: 14px; font-weight: 600; }
.video-call-header .cp-count-btn[aria-expanded="true"] { color: var(--yellow); }
#group-video-call-screen .cp-dots { padding-top: var(--s1); }
/* ---- Calls: one request flow, status line, host requests, leave / end ------- */
/* My own mic / camera access, above the controls (Sabha and group call) */
.my-media-status {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px var(--s2);
  width: fit-content; max-width: 100%; margin: 0 auto var(--s2); padding: 6px var(--s3); border-radius: var(--r-card);
  background: var(--st-raised); color: var(--st-text); font-size: 13px; font-weight: 500; line-height: 1.35; text-align: center;
}
.my-media-status > i { flex: none; font-size: 13px; }
.my-media-status > span { min-width: 0; overflow-wrap: anywhere; }
.my-media-status.is-wait > i { color: var(--yellow); }
.my-media-status.is-warn > i { color: #FF9D99; }
.my-media-status.is-ok > i { color: #6FDB97; }
.mms-cancel { flex: none; min-height: 32px; padding: 0 var(--s2); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--yellow); font-family: var(--font-body); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* "Requested": the ask waits for the host (tap = cancel) */
.rc-btn.rc-wait .rc-ic { background: transparent; color: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow); }
.rc-btn.rc-wait .rc-lb { color: var(--yellow); }
/* group call: the Sabha's control row */
.gvc-rc { justify-content: center; }
.gvc-rc .rc-btn { max-width: 96px; }
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) { .gvc-rc { gap: var(--s2); } .gvc-rc .rc-btn { flex: 0 0 auto; min-width: 76px; max-width: none; } }

/* host: requests to speak (count, hide / show, what each person asked for) */
.host-drawer h3 .hd-title { flex: 1 1 auto; min-width: 0; }
.hd-count { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 var(--s2); border-radius: var(--r-full); background: var(--yellow); color: #2A1D00; font-size: 13px; font-weight: 700; }
.hd-toggle { flex: none; width: 36px; height: 36px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.hd-toggle i { display: inline-block; transition: transform var(--t-press) ease; }
.host-drawer.is-collapsed { padding-bottom: var(--s3); }
.host-drawer.is-collapsed h3 { margin-bottom: 0; }
.host-drawer.is-collapsed .raised-hands-list { display: none; }
.host-drawer.is-collapsed .hd-toggle i { transform: rotate(180deg); }
.hr-text { display: flex; flex-direction: column; gap: 4px; }
.hr-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-asks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.hr-want { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-badge); background: var(--blue-tint, #E8ECF8); color: var(--blue); font-size: 12px; font-weight: 600; }
.hr-want i { font-size: 11px; }
@media (max-width: 480px) {
  .hr-actions { flex: 1 1 100%; }
  .hr-actions .ui-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--s2); }
}

/* tiles: the host's options button (touch screens, small tiles), state chips */
.tile-more-btn { display: none; position: absolute; top: var(--s2); right: var(--s2); z-index: 7; width: 36px; height: 36px; border: 0; border-radius: 50%; align-items: center; justify-content: center; background: rgba(0, 0, 0, .62); color: #fff; font-size: 15px; }
@media (hover: none) {
  .speaker-card .tile-more-btn { display: flex; }
  .speaker-card .tile-more-btn + .tile-pin-btn { right: calc(var(--s2) + 44px); }
}
.speakers-grid.tiles-small .tile-admin { display: none; }
.speakers-grid.tiles-small .tile-more-btn { display: flex; }
.speakers-grid.tiles-small .tile-more-btn + .tile-pin-btn { right: calc(var(--s2) + 44px); }
.video-grid.tiles-small:not(.spotlit) .gc-tile-admin, .gvc-strip .gc-tile-admin { display: none !important; }
.video-grid.tiles-small:not(.spotlit) .tile-more-btn, .gvc-strip .tile-more-btn { display: flex; }
.gvc-strip .tile-more-btn { width: 30px; height: 30px; top: var(--s1); right: var(--s1); font-size: 13px; }
.participant-cam-badge { position: absolute; right: calc(var(--s2) + 34px); bottom: var(--s2); z-index: 4; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #FF7B76; font-size: 12px; pointer-events: none; }
.gvc-strip .participant-cam-badge { display: none; }
.video-card .participant-label { max-width: calc(100% - 92px); }
/* small tiles: smaller labels and avatars so the name stays readable */
:is(.speakers-grid:not(.pinned), .video-grid:not(.spotlit)).tiles-small :is(.speaker-name, .participant-label) { left: var(--s1); bottom: var(--s1); padding: 2px 6px; font-size: 12px; }
:is(.speakers-grid:not(.pinned), .video-grid:not(.spotlit)).tiles-small :is(.speaker-avatar, .video-avatar-fallback) { width: 48px; height: 48px; font-size: 17px; }
/* Sabha: the host's buttons (on hover) sit just above the name, never on it */
.speaker-card .tile-admin { bottom: calc(var(--s2) + 34px); }
/* group call header: the title takes what is left, on one line */
.video-call-meta { flex: 1 1 auto; min-width: 0; }
.video-call-meta h2 { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* small call tiles: mic / camera chips top left, so the name gets the width */
.video-grid.tiles-small:not(.spotlit) :is(.participant-status-badge, .participant-cam-badge) { width: 24px; height: 24px; top: var(--s1); bottom: auto; font-size: 11px; }
.video-grid.tiles-small:not(.spotlit) .participant-status-badge { left: var(--s1); right: auto; }
.video-grid.tiles-small:not(.spotlit) .participant-cam-badge { left: calc(var(--s1) + 28px); right: auto; }
.video-grid.tiles-small:not(.spotlit) .participant-label { max-width: calc(100% - 8px); }
.video-grid.tiles-small:not(.spotlit) .tile-more-btn { width: 30px; height: 30px; top: var(--s1); right: var(--s1); font-size: 13px; }
.speakers-grid.tiles-small .speaker-role { top: var(--s1); left: var(--s1); height: 20px; padding: 0 6px; font-size: 12px; }
.speakers-grid.tiles-small .tile-pin-btn { width: 32px; height: 32px; top: var(--s1); right: var(--s1); }
.speakers-grid.tiles-small .tile-more-btn { width: 32px; height: 32px; top: var(--s1); right: var(--s1); }
.speakers-grid.tiles-small .tile-more-btn + .tile-pin-btn { right: calc(var(--s1) + 38px); }
/* a camera of another shape than its tile (a phone held upright) is shown whole */
:is(.speaker-video-feed, .video-feed).fit-whole { object-fit: contain; background: #000; }
.pr-camoff { position: absolute; left: -4px; bottom: -4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--st-surface); background: var(--st-raised); color: #FF7B76; font-size: 10px; }
.revoke-all-btn { flex: none; }

/* sheets over a call (leave / end, ended, one person): above the call screen */
.call-overlay.ui-modal.call-sheet { z-index: 5300; }
.call-sheet-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.call-sheet-actions { flex-direction: column; }
.call-sheet-actions .ui-btn { flex: none; width: 100%; }
.person-sheet-state { padding-bottom: var(--s4); }
.person-sheet-actions { display: flex; flex-direction: column; gap: var(--s2); }
.person-sheet-actions .ui-btn { width: 100%; }

/* phones held sideways: the stage keeps most of the height */
@media (max-height: 500px) and (orientation: landscape) {
  .room-top-bar { min-height: 48px; padding-top: calc(var(--safe-top) + 4px); padding-bottom: 4px; }
  .room-meta-line { display: none; }
  .room-center { padding: var(--s2); gap: var(--s2); }
  .room-bottom-controls { padding-top: 4px; padding-bottom: calc(4px + var(--safe-bottom)); }
  .audio-controls-panel { flex-direction: row; align-items: center; justify-content: center; gap: var(--s4); }
  .rc-reactions { order: 2; }
  .rc-main { order: 1; }
  .rc-lb { display: none; }
  .rc-ic { height: 40px; width: 48px; }
  .rc-btn { flex: 0 0 auto; padding: 2px; }
  .my-media-status { margin-bottom: 4px; padding: 4px var(--s2); font-size: 12px; }
  .host-drawer { max-height: 46vh; margin-bottom: var(--s2); padding-top: var(--s2); }
  .video-call-container { padding-top: calc(var(--safe-top) + var(--s2)); padding-bottom: calc(var(--s2) + var(--safe-bottom)); }
  /* Full screen and the call screen cover the whole display (not inside
     #app-container's side padding): Leave, collapse and the controls stay
     out of the notch and the rounded corners (iPhone: 62 pt each side). */
  :is(.sabha-immersive-room.room-pseudo-fs, .sabha-immersive-room:fullscreen) :is(.room-top-bar, .room-center, .room-bottom-controls) {
    padding-left: max(var(--s2), env(safe-area-inset-left)); padding-right: max(var(--s3), env(safe-area-inset-right));
  }
  .video-call-container { padding-left: max(var(--s4), env(safe-area-inset-left)); padding-right: max(var(--s4), env(safe-area-inset-right)); }
  .video-call-header { padding-bottom: var(--s2); }
  .video-call-meta { gap: 2px; }
  .video-call-meta .live-tag { display: none; }
  .video-controls { padding-top: 4px; margin-top: 4px; }
  #group-video-call-screen .cp-dots { display: none; }
}

/* ---- Watermark (privacy.js) ----------------------------------------------------- */
/* Faint tiled "name · last 4 phone digits · date, time" over party content:
   the Sabha stage, group and 1:1 calls and the viewer. Flat, static, never
   takes clicks; it sits over the video (z 3) and under labels and controls. */
.wm-layer { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; }
.wm-grid {
  position: absolute; top: 50%; left: 50%; width: 150vmax; height: 150vmax;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: translate(-50%, -50%) rotate(-24deg);
}
.wm-row { flex: none; display: flex; align-items: center; height: 96px; white-space: nowrap; }
.wm-row:nth-child(even) { transform: translateX(120px); }
.wm-tile { flex: none; min-width: 240px; padding: 0 var(--s8); text-align: center; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--wm-ink); }
/* Light and dark tiles in a checkerboard, so the text shows on dark and bright frames alike. */
.wm-row:nth-child(odd) .wm-tile:nth-child(even),
.wm-row:nth-child(even) .wm-tile:nth-child(odd) { color: var(--wm-ink-shade); }
/* Labels and controls stay above the watermark. */
.call-overlay :is(.video-call-header, .video-controls, .call-card) { position: relative; z-index: 4; }
.participant-label { z-index: 4; }
#media-lightbox .lb-bar { position: relative; z-index: 4; }
#media-lightbox .lb-nav { z-index: 4; }
/* Page not visible (tab switch, app in background): hide party content. */
.content-guard-away :is(#sabha-active-room .room-center, .call-pager .cp-people, #group-video-call-screen .video-grid, #media-lightbox .lb-stage) { visibility: hidden; }
/* No long-press save or drag on media in rooms, calls and the viewer. */
:is(#sabha-active-room, .call-overlay, #media-lightbox, [data-watermark]) :is(img, video) { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* ==========================================================================
   5. SCREENS — only what is specific to one screen
   ========================================================================== */

/* ---- Dashboard ------------------------------------------------------------- */
.reg-section { margin: 0 0 var(--s6); }
.reg-head { display: flex; align-items: center; gap: var(--s2); min-height: var(--control-sm); margin: 0 0 var(--s3); }
.reg-head h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--blue); }
.reg-head h3::before { content: ''; flex: none; width: 5px; height: 18px; border-radius: 3px; background: var(--yellow); }
.reg-head-link { margin-left: auto; }

/* Registration request row: identity on top, decisions below (side by side on
   wide screens). The decisions are compact row buttons, like every list row. */
.reg-row { display: block; }
.reg-row-top { display: flex; align-items: flex-start; gap: var(--s3); }
.reg-row-top .reg-avatar { margin-top: 2px; }
.reg-info { flex: 1 1 auto; }
.reg-time { flex: none; padding-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.reg-actions { display: flex; gap: var(--s2); margin-top: var(--s3); padding-left: calc(var(--avatar) + var(--s3)); }
.reg-actions .ui-btn { flex: 1 1 0; }
@media (min-width: 700px) {
  .reg-row { display: flex; align-items: center; gap: var(--s4); }
  .reg-row-top { flex: 1 1 auto; min-width: 0; }
  .reg-actions { margin: 0; padding: 0; flex: none; }
  .reg-actions .ui-btn { flex: 0 0 auto; }
}

/* ---- Groups list --------------------------------------------------------------- */
#groups-list { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; }
.gl-body { padding: var(--s4) var(--gutter) var(--s8); }

/* ---- Sabha list ---------------------------------------------------------------- */
.sabha-history-filterbar { display: flex; flex-direction: column; gap: var(--s3); margin: 0 0 var(--s3); }
.sh-search-row { display: flex; align-items: center; gap: var(--s2); }
.sabha-history-item { grid-template-columns: var(--avatar) minmax(0, 1fr); align-items: start; }
/* Dot separators that never dangle: every part carries a leading dot, and the
   dot of whichever part starts a line sits in a clipped strip left of the box. */
.sabha-history-meta, .att-times { --sep: 16px; display: flex; flex-wrap: wrap; column-gap: 0; margin-left: calc(-1 * var(--sep)); clip-path: inset(0 0 0 var(--sep)); }
.sabha-history-meta > span, .att-times > span { margin-left: var(--sep); }
.sabha-history-meta > span::before, .att-times > span::before { content: '·'; display: inline-block; width: var(--sep); margin-left: calc(-1 * var(--sep)); text-align: center; }
.sabha-history-loading, .sabha-history-error { padding: var(--s5) var(--s4); text-align: center; font-size: 14px; color: var(--muted); }
.sl-card-status { display: flex; align-items: center; gap: var(--s2); margin-bottom: 6px; }
.sl-count { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sabha details sheet */
.sabha-sheet-body { display: flex; flex-direction: column; gap: var(--s2); }
.sheet-status { display: flex; align-items: center; gap: var(--s2); }
.sheet-topic { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.sheet-line { font-size: 14px; color: var(--muted); }
.sheet-line b { color: var(--ink-2); }
/* Scheduled Sabha: what happens next, and the host's Change time / Cancel */
.sheet-note { font-size: 14px; line-height: 1.45; color: var(--ink-2); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--yellow-tint); }
.sheet-tools { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.sheet-tools .ui-btn { flex: 1 1 140px; }
.scheduled-badge.is-due { background: var(--green-tint); color: var(--green); }
.sched-countdown { font-variant-numeric: tabular-nums; }

/* Past Sabha row with the Attendance action */
.sabha-history-item.has-action { grid-template-columns: var(--avatar) minmax(0, 1fr) auto; }
.sabha-history-item.has-action .sh-att-btn { align-self: center; }
@media (max-width: 420px) {
  .sabha-history-item.has-action { grid-template-columns: var(--avatar) minmax(0, 1fr); }
  .sabha-history-item.has-action .sh-att-btn { grid-column: 2; justify-self: start; }
}

/* Waiting room (member): a page of its own until the host lets them in */
.sabha-waiting .st-body { width: 100%; }
.sabha-waiting .ui-empty { padding-top: 40px; padding-bottom: 40px; }

/* Attendance report: full screen on phones, a wide side sheet on desktop */
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) { .sheet-screen.att-screen { width: min(860px, 100vw); } }
.att-body { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s8); }
.att-stats { margin-bottom: var(--s4); }
.att-toolbar { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); }
.att-toolbar .ui-segmented { flex: 1 1 auto; min-width: 0; }
.att-toolbar .ui-btn { flex: none; }
.att-n { font-size: 12px; font-weight: 600; opacity: .8; }
.att-n:empty { display: none; }
.att-search { margin: 0 0 var(--s3); }
.adm-line.att-times { column-gap: 0; row-gap: 2px; }
.att-times > span { white-space: nowrap; }
.att-row.is-absent .avatar { background: var(--fill-2); color: var(--muted); }
.att-more, .ap-more { display: flex; justify-content: center; margin-top: var(--s4); }
@media (max-width: 599px) {
  .att-toolbar { flex-wrap: wrap; }
  .att-toolbar .ui-segmented { flex-basis: 100%; }
  .att-toolbar .ui-btn { margin-left: auto; }
}

/* ---- Admin ---------------------------------------------------------------------- */
.adm-attn { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s6); padding: var(--s3) var(--s4); background: var(--yellow-tint); border: 1px solid #F1DE9C; border-radius: var(--r-card); }
.adm-attn-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--yellow); color: #2A1D00; }
.adm-attn-text { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--ink); }
.adm-panel { display: none; }
.adm-panel.active { display: block; }
.adm-name { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.adm-line { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.adm-controls { gap: var(--s3); }
.adm-field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.adm-field > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.adm-field select.ui-select { width: 100%; min-width: 118px; }
.adm-actions-split .adm-delete { margin-left: var(--s4); }
/* Live monitor (Overview) */
.adm-live-sum { margin: calc(-1 * var(--s1)) 0 var(--s3); font-size: 13px; color: var(--muted); }
.adm-live-and { font-weight: 400; color: var(--muted); }
.adm-live-row .adm-line > span:not(:first-child):not(.room-live-badge + span):not(.adm-live-dur)::before { content: '·'; margin-right: var(--s2); }
.adm-live-dur { display: inline-flex; align-items: center; gap: 4px; }
.adm-live-dur i { font-size: 12px; color: var(--blue); }
@media (max-width: 599px) {
  .adm-row.adm-live-row { grid-template-columns: var(--avatar) minmax(0, 1fr); }
  .adm-row.adm-live-row .adm-actions { grid-column: 2; justify-content: flex-start; }
  .adm-row.adm-live-row .adm-actions:empty { display: none; }
}
@media (max-width: 599px) {
  .adm-row.adm-member:not(.is-fixed) { grid-template-columns: var(--avatar) minmax(0, 1fr); }
  .adm-row.adm-member:not(.is-fixed) .adm-controls { grid-column: 2; justify-content: stretch; }
  .adm-row.adm-member .adm-field { flex: 1 1 0; min-width: 0; }
  .adm-row.adm-member .adm-field select.ui-select { min-width: 0; }
  /* rows with two actions put them under the text, so the status line (LIVE +
     people) keeps one line; one action stays on the right */
  .adm-row:is(.adm-group, .adm-room:has(.adm-actions > :nth-child(2))) { grid-template-columns: var(--avatar) minmax(0, 1fr); }
  .adm-row:is(.adm-group, .adm-room:has(.adm-actions > :nth-child(2))) .adm-actions { grid-column: 2; justify-content: flex-start; }
  .adm-row.adm-group .adm-actions .adm-delete { margin-left: auto; }
  /* an ended Sabha's Attendance button (icon and word) left its title about
     100px at 360px: under the text too */
  .adm-row.adm-room.adm-ended { grid-template-columns: var(--avatar) minmax(0, 1fr); }
  .adm-row.adm-room.adm-ended .adm-actions { grid-column: 2; justify-content: flex-start; }
  .adm-row.adm-room.adm-ended .adm-actions:empty { display: none; }
}

/* Reports: a report carries long text and up to four actions. In the base
   3-column row the actions' column took its full width and squeezed the text
   column to nothing, so the name broke one letter per line on phones. The
   text gets the whole width (every screen size) and the actions wrap below it. */
.adm-row.rep-row { grid-template-columns: var(--avatar) minmax(0, 1fr); }
.adm-row.rep-row > .adm-actions { grid-column: 2; justify-content: flex-start; }
.adm-row.rep-row > .adm-actions:empty { display: none; }
.rep-row .adm-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rep-since i { font-size: 12px; color: var(--green); margin-right: 2px; }
/* Members: which accounts (Active | Needs review | Blocked | Inactive). Its
   counts are information, not alarms: no red. Phones: two rows of two. */
.adm-status-bar { margin: 0 0 var(--s3); }
.ui-segmented.adm-status-bar > button .st-count { background: var(--fill); color: var(--ink-2); }
.ui-segmented.adm-status-bar > button.active .st-count { background: #fff; color: var(--blue); border-color: #fff; }
@media (max-width: 519px) {
  .adm-status-bar { flex-wrap: wrap; border-radius: var(--r-card); }
  .adm-status-bar > button { flex: 1 1 calc(50% - 2px); }
}
.adm-row.adm-member .adm-controls > .ui-btn { flex: 0 0 auto; }
.adm-attn-blocked { background: var(--surface); border-color: var(--border); }
.adm-attn-blocked .adm-attn-ic { background: var(--red-tint); color: var(--red-deep); }

/* Approvals: Requests > Pending | History, the reject reason box, the
   decided-request line, "Approved by" lines and Needs review rows. */
.adm-req-views { margin: 0 0 var(--s3); }
.ui-segmented > button.active .st-count { background: #fff; color: var(--red-deep); border-color: #fff; }
.adm-req-more { margin: var(--s3) 0 0; font-size: 13px; color: var(--muted); }
#admin-users-note { margin: 0 0 var(--s3); }
.adm-attn + .adm-attn { margin-top: calc(-1 * var(--s3)); }
.adm-attn-review .adm-attn-ic { background: var(--blue-tint); color: var(--blue); }
.adm-store-review { background: var(--blue-tint); border-color: transparent; }
.adm-store-review-sub { font-size: 13px; color: var(--muted); }
/* Admin > Overview: the server's size (autoscale) */
.adm-server { margin: 0 0 var(--s6); padding: 0; }
.adm-server .adm-row { border: 0; }
.adm-server .adm-attn { margin: 0 var(--s3) var(--s3); }
.bb-expected { color: var(--muted); font-size: 12px; }
/* The super admin's "Keep the event size" row on the Server card. */
.adm-hold { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s2); }
.adm-hold select.ui-select { width: auto; min-width: 0; }
.reg-reject-box { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); padding-left: calc(var(--avatar) + var(--s3)); }
.reg-reject-box .reg-actions { margin: 0; padding: 0; }
.reg-reject-box .ui-field { height: var(--control-sm); font-size: 14px; }
.reg-done { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); margin-left: calc(var(--avatar) + var(--s3)); padding: var(--s2) var(--s3);
  border-radius: var(--r-md); font-size: 14px; font-weight: 600; line-height: 1.35; }
.reg-done.is-approved { background: var(--green-tint); color: var(--green-press); }
.reg-done.is-rejected { background: var(--red-tint); color: var(--red-deep); }
.reg-done i { flex: none; }
.reg-row.is-done { background: #FBFBF6; }
@media (min-width: 700px) {
  .reg-row.is-rejecting { display: block; }
  .reg-reject-box { flex-direction: row; align-items: center; }
  .reg-reject-box .ui-field { flex: 1 1 auto; min-width: 0; }
  .reg-done { margin: 0; flex: 0 1 auto; max-width: 50%; }
}
.adm-hist-text { font-size: 15px; font-weight: 400; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.adm-hist-text b { font-weight: 600; }
.adm-hist-text .ui-badge { margin-left: 4px; vertical-align: 1px; }
.adm-hist-row { grid-template-columns: var(--avatar) minmax(0, 1fr); }
.adm-hist-row > :last-child:empty { display: none; }
.adm-hist-more { display: flex; justify-content: center; margin: var(--s3) 0 0; }
.adm-appr i { font-size: 12px; color: var(--green); }
.adm-appr.is-none .ui-badge { height: 20px; }
@media (max-width: 599px) {
  .adm-row.adm-member.adm-review { grid-template-columns: var(--avatar) minmax(0, 1fr); }
  .adm-row.adm-member.adm-review .adm-controls { grid-column: 2; justify-content: flex-start; }
}

/* ---- Profile -------------------------------------------------------------------- */
/* same page column as every other screen (header and body on --page-max) */
.profile-v2 { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; background: var(--bg); }
.profile-hero { padding-bottom: var(--s6); }
.profile-v2 > .profile-hero { padding-left: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); }
.profile-id { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s3); }
.profile-id-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.profile-id-name h2 { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.profile-id-phone { font-size: 14px; font-weight: 500; color: var(--yellow-ink); }
.profile-hero .role-chip { background: var(--surface); }
.profile-body { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s8); }
.profile-id-about { margin: 0 0 var(--s6); padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); font-size: 15px; color: var(--ink-2); }
.profile-id-about::before { content: 'About'; display: block; margin-bottom: 2px; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--muted); }
.profile-id-about:empty { display: none; }
.profile-id-about:empty + .ui-section-head { margin-top: 0; }
.settings-group { margin: 0 0 var(--s6); }
/* A paragraph of help inside a settings card (Profile > Help). Not a
   settings-row: as the only item of that 3-column grid, its text sat in the
   40px icon column, one word per line. The row above draws the divider. */
.settings-note { margin: 0; padding: var(--s3) var(--s4); font-size: 13px; line-height: 1.45; color: var(--muted); }
.settings-row { grid-template-columns: var(--avatar) minmax(0, 1fr) auto; }
.settings-ok { color: var(--green); font-size: 18px; }
.logout-btn { width: 100%; }
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) { .logout-btn { width: auto; } }

/* link rows (privacy, terms, delete account): a whole row is the target */
.settings-link { width: 100%; margin: 0; border-top: 0; border-left: 0; border-right: 0; text-align: left; text-decoration: none; cursor: pointer; }
.settings-chev { color: var(--muted); font-size: 12px; }
.settings-link.is-danger .settings-icon { background: var(--red-tint); color: var(--red-deep); }
.settings-link.is-danger .settings-value { color: var(--red-deep); }
@media (hover: hover) { .settings-link:hover { background: var(--blue-wash); } }

/* ---- Delete account dialog ------------------------------------------------------- */
.del-lead { margin: 0 0 var(--s4); font-size: 15px; color: var(--ink-2); }
.del-list { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.del-list li { display: flex; align-items: center; gap: var(--s3); font-size: 15px; line-height: 1.4; color: var(--ink); }
.del-ic { width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--blue-tint); color: var(--blue); font-size: 14px; }
.del-warn { margin: 0 0 var(--s2); font-size: 14px; font-weight: 600; color: var(--red-deep); }
.del-resend { padding: 0 var(--s2); margin-left: calc(-1 * var(--s2)); }

/* ---- Group info sheet ------------------------------------------------------------- */
/* info card (list rows) · Media and files · In this group (search under the title) */
.group-info-section { padding: var(--s4) var(--gutter) 0; }
.group-info-section:empty { display: none; }
.group-info-section + .sheet-list { padding-top: var(--s6); }
.group-info-section:empty + .sheet-list { padding-top: var(--s4); }
.sheet-list > .ui-search { margin: 0 0 var(--s3); }
/* DM contact sheet (legacy) */
.ginfo-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; font-size: 14px; color: var(--ink-2); }
.ginfo-icon { width: 20px; text-align: center; color: var(--blue); }
.ginfo-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ginfo-media-thumb-btn { position: relative; display: block; padding: 0; margin: 0; border: 0; aspect-ratio: 1; border-radius: var(--r-badge); overflow: hidden; background: var(--fill); cursor: zoom-in; }
.ginfo-media-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-row .avatar-wrapper { display: flex; }
.gm-row .member-header { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.gm-row .gm-actions, .gm-row > .member-action { grid-column: 2; justify-content: flex-start; }
@media (min-width: 600px) { .gm-row .gm-actions, .gm-row > .member-action { grid-column: 3; grid-row: 1; } }
.members-list { min-height: 0; }
/* managers: "Add people" sits under the header, full width like on a phone */
.gm-add-row { margin: 0; padding: var(--s4) var(--gutter) 0; }
.gm-add-row .ui-btn { flex: 1 1 0; }

/* ---- Add people sheet ------------------------------------------------------------- */
/* search · filters (district → constituency → mandal, party role) · count · the
   directory (tick to select; people in the group are marked) · Show more ·
   a footer that stays on screen with Select all + Add */
.ap-body { padding: var(--s4) var(--gutter) var(--s5); }
.ap-search { margin: 0 0 var(--s3); }
.ap-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin: 0 0 var(--s3); }
.ap-filters select.ui-select { min-width: 0; padding: 0 32px 0 var(--s3); background-position: right 12px center; font-size: 14px; text-overflow: ellipsis; }
.ap-filters select.ui-select.is-set { border-color: var(--blue); color: var(--blue); font-weight: 600; background-color: var(--blue-wash); }
.ap-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--control-sm); margin: 0 0 var(--s2); }
.ap-count { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ap-row { cursor: pointer; transition: background-color var(--t-press) ease; }
.ap-row.is-on { background: var(--green-tint); }
.ap-row.is-in { cursor: default; }
.ap-row.is-in .avatar { opacity: .6; }
.ap-check { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--green); cursor: pointer; }
.ap-state i { font-size: 10px; }
@media (hover: hover) { label.ap-row:not(.is-on):hover { background: var(--blue-wash); } }
.ap-footer {
  position: sticky; bottom: 0; z-index: 2; margin-top: auto; display: flex; gap: var(--s3);
  padding: var(--s3) var(--gutter) calc(var(--s3) + var(--safe-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.ap-footer .ui-btn { flex: 1 1 0; min-width: 0; }
#ap-add-all { flex: none; }
.ap-summary .ap-count { flex: 1 1 auto; min-width: 0; }

/* New / Edit group: the photo beside its label; the group photo in the chat header */
.cg-photo-row { display: flex; align-items: center; gap: var(--s3); }
.cg-photo { flex: none; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 1px dashed var(--border-strong); background: var(--blue-wash); color: var(--blue); cursor: pointer; overflow: hidden; }
.cg-photo-preview { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; }
.cg-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.cg-photo-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.group-avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Admin > Members: "In all groups" */
.adm-allgroups { min-height: 0; padding: var(--s2) var(--s3); }
.adm-allgroups .ui-switch-title { font-size: 14px; }

/* ---- Member directory sheet (legacy "new chat") ----------------------------------- */
#new-chat-list .member-item { padding: var(--s3) 0; }
#new-chat-screen > .ui-search { margin: var(--s4) var(--gutter) 0; flex: none; }

/* ==========================================================================
   6. LOGIN — isolated
   The approved login screen, unchanged. These are the legacy declarations
   that reached it (extracted from the old stylesheet in the browser), each
   selector scoped with :where(#login-screen, #login-screen *) so it can only
   ever match inside the login screen and adds no specificity. Kept verbatim,
   including their !important flags, so the screen stays pixel-identical.
   ========================================================================== */
/* Custom properties the legacy login rules use (final values) */
:where(#login-screen) { --color-yellow: #F4C016; --color-green: #1A7A3A; --color-blue: #203080; --color-text-dark: #14201A; --color-bg-neutral: #F4F1E8; --color-white: #FFFFFF; --color-border: #E3DECF; --color-input-bg: #ECE8DB; --color-card-bg: #FFFDF7; --color-text-light: #5C6B62; --color-red-live: #EA4335; --color-green-light: #E8F5E9; --font-family: 'Outfit', sans-serif; --shadow-sm: 0 1px 0 rgba(20, 32, 26, 0.05); --shadow-md: 0 2px 0 rgba(20, 32, 26, 0.07); --shadow-lg: 0 18px 44px rgba(20, 32, 26, 0.20); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --color-green-dark: #0F5429; --color-teal: #1A7A3A; --color-online: #25D366; --color-out-bubble: #FEF9E7; --font-display: 'Bricolage Grotesque', 'Outfit', sans-serif; --trs-yellow: #F4C016; --trs-yellow-dark: #D9A514; --trs-yellow-text: #7A5100; --trs-green: #1A7A3A; --trs-green-dark: #0F5429; --trs-blue: #203080; --trs-blue-dark: #162060; --P: #F4C016; --PD: #D9A514; --PT: #7A5100; --G: #1A7A3A; --GD: #0F5429; --B: #203080; --WH: #ffffff; --BG: #FAFAF4; --rd-yellow: #F4C016; --rd-yellow-d: #D9A514; --rd-yellow-t: #7A5100; --rd-yellow-tint: #FFF6D9; --rd-green: #1A7A3A; --rd-green-d: #0F5429; --rd-green-tint: #E6F2E9; --rd-blue: #203080; --rd-blue-tint: #E9ECF7; --rd-red: #E53935; --rd-red-d: #C62828; --rd-red-tint: #FDECEC; --rd-bg: #FBFAF4; --rd-card: #FFFFFF; --rd-line: #EEEADD; --rd-border: #E8E3D3; --rd-border-strong: #D2CEBC; --rd-fill: #F2F1E9; --rd-text: #1D1D18; --rd-text-2: #45453B; --rd-muted: #6B6B5E; --rd-st-bg: #0E1511; --rd-st-surface: #151F18; --rd-st-raised: #213026; --rd-st-hover: #2B3D31; --rd-st-border: #27362C; --rd-st-text: #F3F3EE; --rd-st-muted: #A9B3AB; --rd-nav-h: 64px; --rd-ring: 0 0 0 3px rgba(26, 122, 58, .22); --rd-tap: 44px; --rd-hero-ink: #5A4200; --rd-hero-btn: #E4AE0C; --rd-nav-bg: #FFFCF3; --rd-nav-active: #DDE3F6; --rd-card-shadow: 0 1px 2px rgba(60, 45, 0, .05), 0 6px 18px rgba(60, 45, 0, .05); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-full: 999px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 26px; --lh-tight: 1.2; --lh-body: 1.45; --el-1: 0 1px 2px rgba(60, 45, 0, .05), 0 4px 12px rgba(60, 45, 0, .04); --el-2: 0 8px 24px rgba(40, 30, 0, .14); --el-3: 0 16px 40px rgba(20, 15, 0, .22); --c-green-hover: #146A32; --c-green-press: #0F5429; --c-disabled-bg: #ECEAE1; --c-disabled-fg: #A09E90; --rd-blue-2: #2A3C99; --rd-blue-press: #18246A; --rd-blue-tint-2: #DDE3F6; --rd-blue-line: #C9D1EE; --dock-h: 64px; --dock-gap: 10px; }
/* Text settings the login screen inherited from <body> */
:where(#login-screen) { font-family: Outfit, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; color: rgb(20, 32, 26); letter-spacing: normal; -webkit-font-smoothing: antialiased; text-rendering: auto; font-feature-settings: normal; }

*:where(#login-screen, #login-screen *) { box-sizing: border-box; margin: 0px; padding: 0px; font-family: var(--font-family); -webkit-tap-highlight-color: transparent; }
button:where(#login-screen, #login-screen *),
input:where(#login-screen, #login-screen *),
select:where(#login-screen, #login-screen *) { font-family: var(--font-family); outline: none; }
button:where(#login-screen, #login-screen *) { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; }
#login-screen:where(#login-screen, #login-screen *) { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; background: linear-gradient(135deg, var(--color-green) 0%, #003816 100%); display: flex; justify-content: center; align-items: center; z-index: 9999; overflow-y: auto; padding: 20px; }
@media (max-width: 480px) {
#login-screen:where(#login-screen, #login-screen *) { padding: 12px; }
}
.auth-screen:where(#login-screen, #login-screen *) { position: fixed; inset: 0px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, rgba(0, 168, 132, 0.16), transparent 60%), linear-gradient(rgb(11, 93, 59) 0%, rgb(10, 47, 34) 100%); }
.auth-screen.active:where(#login-screen, #login-screen *) { display: flex; }
.auth-panel:where(#login-screen, #login-screen *) { width: 100%; max-width: 400px; background: rgb(255, 255, 255); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 32px 28px; position: relative; overflow: hidden; }
.auth-brand:where(#login-screen, #login-screen *) { text-align: center; margin-bottom: 26px; }
.auth-logo:where(#login-screen, #login-screen *) { width: 62px; height: 62px; margin: 0px auto 14px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: rgb(255, 255, 255); background: linear-gradient(135deg, var(--color-teal), var(--color-green)); box-shadow: rgba(11, 93, 59, 0.35) 0px 8px 20px; }
.auth-brand h1:where(#login-screen, #login-screen *) { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; color: var(--color-text-dark); }
.auth-brand p:where(#login-screen, #login-screen *) { color: var(--color-text-light); font-size: 14px; margin-top: 2px; }
.auth-step:where(#login-screen, #login-screen *) { display: none; animation: 0.3s ease 0s 1 normal none running authFade; position: relative; }
.auth-step.active:where(#login-screen, #login-screen *) { display: block; }
.auth-step h2:where(#login-screen, #login-screen *) { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.auth-sub:where(#login-screen, #login-screen *) { color: var(--color-text-light); font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.auth-back:where(#login-screen, #login-screen *) { position: absolute; top: -6px; right: 0px; width: 34px; height: 34px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; border-radius: 10px; background: var(--color-input-bg); color: var(--color-text-dark); }
.phone-field:where(#login-screen, #login-screen *) { display: flex; gap: 10px; margin-bottom: 8px; }
.country-select:where(#login-screen, #login-screen *) { border: 1.5px solid var(--color-border); border-radius: 12px; padding: 0px 10px; font-size: 15px; font-family: inherit; background: rgb(255, 255, 255); cursor: pointer; min-width: 96px; }
.phone-field input:where(#login-screen, #login-screen *) { flex: 1 1 0%; border: 1.5px solid var(--color-border); border-radius: 12px; padding: 14px 16px; font-size: 16px; font-family: inherit; letter-spacing: 0.5px; outline: none; transition: border-color 0.15s; }
.phone-field input:focus:where(#login-screen, #login-screen *),
.auth-input-group input:focus:where(#login-screen, #login-screen *),
.auth-select:focus:where(#login-screen, #login-screen *) { border-color: var(--color-teal); }
.auth-input-group:where(#login-screen, #login-screen *) { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.auth-input-group input:where(#login-screen, #login-screen *),
.auth-select:where(#login-screen, #login-screen *) { border: 1.5px solid var(--color-border); border-radius: 12px; padding: 14px 16px; font-size: 15px; font-family: inherit; outline: none; background: rgb(255, 255, 255); transition: border-color 0.15s; }
.auth-btn:where(#login-screen, #login-screen *) { width: 100%; margin-top: 18px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; border-radius: 14px; padding: 15px; font-size: 16px; font-weight: 700; font-family: inherit; color: rgb(255, 255, 255); background: linear-gradient(135deg, var(--color-teal), var(--color-green)); display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.1s, opacity 0.2s; }
.auth-btn:hover:where(#login-screen, #login-screen *) { opacity: 0.94; }
.auth-btn:active:where(#login-screen, #login-screen *) { transform: scale(0.98); }
.auth-btn:disabled:where(#login-screen, #login-screen *) { opacity: 0.6; cursor: default; }
.auth-btn.loading span:where(#login-screen, #login-screen *) { opacity: 0.5; }
.auth-btn.loading:where(#login-screen, #login-screen *)::after { content: ""; width: 16px; height: 16px; border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.4); border-image: none; border-radius: 50%; animation: 0.7s linear 0s infinite normal none running spin; }
.otp-boxes:where(#login-screen, #login-screen *) { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 10px; }
.otp-box:where(#login-screen, #login-screen *) { width: 46px; height: 54px; text-align: center; font-size: 24px; font-weight: 700; border: 1.5px solid var(--color-border); border-radius: 12px; outline: none; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
.otp-box:focus:where(#login-screen, #login-screen *) { border-color: var(--color-teal); box-shadow: rgba(0, 168, 132, 0.15) 0px 0px 0px 3px; }
.auth-resend:where(#login-screen, #login-screen *) { margin-top: 16px; text-align: center; font-size: 13px; color: var(--color-text-light); }
.auth-link:where(#login-screen, #login-screen *) { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; color: var(--color-teal); font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13px; }
.auth-link:disabled:where(#login-screen, #login-screen *) { color: var(--color-text-light); cursor: default; }
/* A link-style button is still a 44px target ("Resend code" is what a member
   whose SMS did not come taps; it measured 75x16). The row keeps its height
   while the countdown and the button take turns (startResendCountdown). */
#login-screen .auth-link { min-height: 44px; padding: 12px 16px; font-size: 14px; }
#login-screen .auth-resend { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; }
#login-screen #auth-otp-target { white-space: nowrap; }
.auth-dev-hint:where(#login-screen, #login-screen *) { background: rgb(255, 247, 230); border: 1px dashed var(--color-yellow); color: rgb(122, 92, 0); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; text-align: center; }
.auth-error:where(#login-screen, #login-screen *) { color: var(--color-red-live); font-size: 13px; margin-top: 8px; font-weight: 600; }
/* Registration consent (Play UGC policy, DPDP Act): why the party details are
   asked for, and the required Terms / Privacy box. */
.auth-consent-why:where(#login-screen, #login-screen *) { color: var(--color-text-light); font-size: 12.5px; line-height: 1.5; margin: 14px 0 10px; }
.auth-consent:where(#login-screen, #login-screen *) { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--color-text-dark); cursor: pointer; }
.auth-consent:where(#login-screen, #login-screen *) input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--color-green, #1A7A3A); }
.auth-consent:where(#login-screen, #login-screen *) a,
.auth-terms-line:where(#login-screen, #login-screen *) a { color: var(--color-blue, #203080); font-weight: 600; text-decoration: underline; }
/* 12px links: a taller tap area (inline padding does not move the lines). */
.auth-terms-line:where(#login-screen, #login-screen *) a { padding-block: 14px; }
.auth-terms-line:where(#login-screen, #login-screen *) { color: var(--color-text-light); font-size: 12px; line-height: 1.5; margin-top: 12px; text-align: center; }
.auth-leader-note:where(#login-screen, #login-screen *) { background: var(--color-green-light); color: var(--color-green-dark); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-top: 4px; font-weight: 600; }
.profile-avatar-preview:where(#login-screen, #login-screen *) { width: 84px; height: 84px; margin: 0px auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; color: rgb(255, 255, 255); background: linear-gradient(135deg, var(--color-teal), var(--color-green)); }
.auth-footer:where(#login-screen, #login-screen *) { color: rgba(255, 255, 255, 0.75); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
h1:where(#login-screen, #login-screen *),
h2:where(#login-screen, #login-screen *),
.auth-brand h1:where(#login-screen, #login-screen *) { font-family: var(--font-display); letter-spacing: -0.01em; }
.auth-btn:where(#login-screen, #login-screen *) { border-radius: var(--radius-md); box-shadow: 0 2px 0 var(--color-green-dark); transition: transform 0.06s, box-shadow 0.06s; background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color:  !important; background-image: none !important; }
.auth-btn:active:where(#login-screen, #login-screen *) { transform: translateY(2px); box-shadow: 0 0 0 var(--color-green-dark); }
.auth-btn:hover:where(#login-screen, #login-screen *) { transform: none; background: var(--color-green-dark) !important; }
.auth-screen:where(#login-screen, #login-screen *),
#login-screen:where(#login-screen, #login-screen *) { background: radial-gradient(900px 480px at 50% -8%, rgba(217, 165, 20, 0.14), transparent 55%),
    var(--color-green-dark) !important; }
.auth-panel:where(#login-screen, #login-screen *) { border-radius: 18px; border: 1px solid rgba(217, 165, 20, 0.25); background: var(--color-card-bg); }
.auth-logo:where(#login-screen, #login-screen *) { background: var(--color-green); color: var(--color-yellow); }
.auth-screen:where(#login-screen, #login-screen *),
#login-screen:where(#login-screen, #login-screen *) { height: 100dvh; }
#login-screen:where(#login-screen, #login-screen *) { padding: 28px 18px; background: repeating-radial-gradient(circle at 50% 30%, transparent 0px, transparent 90px, rgba(217, 165, 20, 0.027) 90px, rgba(217, 165, 20, 0.027) 92px), radial-gradient(1000px 560px at 50% -10%, rgba(217, 165, 20, 0.16), transparent 58%), radial-gradient(760px 520px at 110% 108%, rgba(30, 111, 80, 0.22), transparent 62%), linear-gradient(rgb(12, 42, 29) 0%, rgb(7, 26, 17) 100%) !important; }
.auth-stage:where(#login-screen, #login-screen *) { display: grid; grid-template-columns: 1fr; gap: 26px; width: 100%; max-width: 420px; align-items: center; }
.auth-hero:where(#login-screen, #login-screen *) { text-align: center; color: rgb(243, 239, 223); }
.auth-hero-seal:where(#login-screen, #login-screen *) { width: 74px; height: 74px; margin: 0px auto 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--color-yellow); background: rgba(217, 165, 20, 0.08); border: 1px solid rgba(217, 165, 20, 0.4); border-radius: 50%; box-shadow: rgba(217, 165, 20, 0.05) 0px 0px 0px 8px, rgba(217, 165, 20, 0.18) 0px 0px 44px; }
.auth-wordmark:where(#login-screen, #login-screen *) { font-family: var(--font-display); font-size: 52px; font-weight: 800; letter-spacing: -0.02em; color: rgb(246, 241, 222); line-height: 1; text-shadow: rgba(217, 165, 20, 0.25) 0px 2px 24px; }
.auth-rule:where(#login-screen, #login-screen *) { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto 10px; max-width: 240px; }
.auth-rule span:where(#login-screen, #login-screen *) { flex: 1 1 0%; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 165, 20, 0.55)); }
.auth-rule span:last-child:where(#login-screen, #login-screen *) { background: linear-gradient(90deg, rgba(217, 165, 20, 0.55), transparent); }
.auth-rule i:where(#login-screen, #login-screen *) { font-size: 5px; color: var(--color-yellow); }
.auth-tagline:where(#login-screen, #login-screen *) { font-size: 14.5px; color: rgba(243, 239, 223, 0.72); letter-spacing: 0.04em; margin-bottom: 22px; }
.auth-points:where(#login-screen, #login-screen *) { list-style: none; display: none; flex-direction: column; gap: 12px; text-align: left; }
.auth-points li:where(#login-screen, #login-screen *) { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, 0.043); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; padding: 12px 16px; backdrop-filter: blur(8px); }
.auth-point-ic:where(#login-screen, #login-screen *) { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 15px; color: rgb(20, 20, 10); background: linear-gradient(rgb(233, 188, 51), rgb(201, 151, 14)); box-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px inset; }
.auth-points b:where(#login-screen, #login-screen *) { display: block; font-size: 13.5px; font-weight: 700; color: rgb(243, 239, 223); }
.auth-points em:where(#login-screen, #login-screen *) { display: block; font-style: normal; font-size: 11.5px; color: rgba(243, 239, 223, 0.55); }
.auth-panel:where(#login-screen, #login-screen *) { position: relative; border: 1px solid rgba(217, 165, 20, 0.35); border-radius: 22px; box-shadow: rgba(0, 0, 0, 0.5) 0px 30px 80px, rgba(217, 165, 20, 0.04) 0px 0px 0px 8px; overflow: visible; }
.auth-panel:where(#login-screen, #login-screen *)::before { content: ""; position: absolute; top: 0px; left: 24px; right: 24px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-yellow), transparent); border-radius: 0px 0px 4px 4px; }
.auth-brand-compact:where(#login-screen, #login-screen *) { margin-bottom: 20px; }
.auth-brand-compact .auth-logo:where(#login-screen, #login-screen *) { width: 46px; height: 46px; font-size: 20px; margin: 0px auto 8px; border-radius: 14px; }
.auth-brand-compact h1:where(#login-screen, #login-screen *) { font-size: 20px; }
.auth-brand-compact p:where(#login-screen, #login-screen *) { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; }
.otp-box:focus:where(#login-screen, #login-screen *) { border-color: var(--color-yellow); box-shadow: rgba(217, 165, 20, 0.22) 0px 0px 0px 3px; }
.auth-footer:where(#login-screen, #login-screen *) { margin-top: 20px; color: rgba(243, 239, 223, 0.5); }
@media (min-width: 900px) {
.auth-stage:where(#login-screen, #login-screen *) { max-width: 950px; grid-template-columns: 1.05fr 0.95fr; gap: 64px; }
.auth-hero:where(#login-screen, #login-screen *) { text-align: left; }
.auth-hero-seal:where(#login-screen, #login-screen *) { margin: 0px 0px 18px; }
.auth-wordmark:where(#login-screen, #login-screen *) { font-size: 72px; }
.auth-rule:where(#login-screen, #login-screen *) { margin: 18px 0px 12px; justify-content: flex-start; max-width: 260px; }
.auth-tagline:where(#login-screen, #login-screen *) { margin-bottom: 28px; font-size: 16px; }
.auth-points:where(#login-screen, #login-screen *) { display: flex; }
.auth-brand-compact:where(#login-screen, #login-screen *) { display: none; }
.auth-panel:where(#login-screen, #login-screen *) { padding: 38px 34px; }
}
@media (max-width: 899px) {
.auth-wordmark:where(#login-screen, #login-screen *) { font-size: 40px; }
.auth-hero-seal:where(#login-screen, #login-screen *) { width: 62px; height: 62px; font-size: 25px; }
.auth-tagline:where(#login-screen, #login-screen *) { margin-bottom: 4px; }
.auth-brand-compact:where(#login-screen, #login-screen *) { display: none; }
}
#login-screen:where(#login-screen, #login-screen *) { border-top: 3px solid var(--color-yellow); padding: 0px 20px; align-items: center; background: rgb(14, 36, 26) !important; }
.auth-stage:where(#login-screen, #login-screen *) { max-width: 1020px; gap: 44px; align-items: center; }
.auth-hero-seal:where(#login-screen, #login-screen *),
.auth-rule:where(#login-screen, #login-screen *) { display: none !important; }
.auth-points:where(#login-screen, #login-screen *) { display: none !important; }
.auth-panel:where(#login-screen, #login-screen *)::before { display: none; }
.auth-hero:where(#login-screen, #login-screen *) { display: flex; flex-direction: column; text-align: left; }
.auth-tagline:where(#login-screen, #login-screen *) { order: -1; text-transform: uppercase; letter-spacing: 0.26em; font-size: 11px; font-weight: 700; color: var(--color-yellow); margin: 0px 0px 16px; }
.auth-wordmark:where(#login-screen, #login-screen *) { font-size: 64px; font-weight: 800; letter-spacing: -0.03em; color: rgb(245, 242, 232); text-shadow: none; line-height: 0.95; }
.auth-wordmark:where(#login-screen, #login-screen *)::after { content: "."; color: var(--color-yellow); }
.auth-panel:where(#login-screen, #login-screen *) { background: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px; padding: 30px 28px; }
.auth-step h2:where(#login-screen, #login-screen *) { font-size: 17px; letter-spacing: -0.01em; }
.auth-sub:where(#login-screen, #login-screen *) { font-size: 13px; }
.auth-btn:where(#login-screen, #login-screen *) { border-radius: 8px; box-shadow: none; }
.auth-btn:active:where(#login-screen, #login-screen *) { transform: none; opacity: 0.85; }
.otp-box:where(#login-screen, #login-screen *) { border-radius: 8px; }
.phone-field input:where(#login-screen, #login-screen *),
.auth-input-group input:where(#login-screen, #login-screen *),
.auth-select:where(#login-screen, #login-screen *),
.country-select:where(#login-screen, #login-screen *) { border-radius: 8px; }
.auth-footer:where(#login-screen, #login-screen *) { margin-top: 22px; color: rgba(245, 242, 232, 0.38); font-size: 12px; letter-spacing: 0.02em; }
.auth-footer i:where(#login-screen, #login-screen *) { display: none; }
@media (min-width: 900px) {
.auth-stage:where(#login-screen, #login-screen *) { grid-template-columns: 1.15fr 0.85fr; gap: 88px; }
.auth-wordmark:where(#login-screen, #login-screen *) { font-size: 96px; }
.auth-tagline:where(#login-screen, #login-screen *) { font-size: 12px; }
.auth-panel:where(#login-screen, #login-screen *) { padding: 36px 32px; }
}
@media (max-width: 899px) {
#login-screen:where(#login-screen, #login-screen *) { padding: 0px 22px; }
.auth-stage:where(#login-screen, #login-screen *) { gap: 30px; padding-top: 8vh; align-content: start; min-height: 100dvh; }
.auth-wordmark:where(#login-screen, #login-screen *) { font-size: 56px; }
}
#login-screen:where(#login-screen, #login-screen *) { overflow-y: auto; }
.auth-stage:where(#login-screen, #login-screen *) { width: 100%; max-width: 430px; margin: auto; padding: 36px 0px; grid-template-columns: 1fr; gap: 30px; align-content: center; min-height: 0px; }
.auth-wordmark:where(#login-screen, #login-screen *) { font-size: clamp(44px, 12vw, 64px); }
.auth-tagline:where(#login-screen, #login-screen *) { font-size: 12px; }
@media (min-width: 600px) and (max-width: 899px) {
.auth-stage:where(#login-screen, #login-screen *) { max-width: 500px; gap: 36px; }
.auth-wordmark:where(#login-screen, #login-screen *) { font-size: clamp(56px, 9vw, 72px); }
.auth-panel:where(#login-screen, #login-screen *) { padding: 34px 32px; }
}
@media (min-width: 900px) {
.auth-stage:where(#login-screen, #login-screen *) { max-width: min(1020px, 92vw); grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 7vw, 88px); }
.auth-wordmark:where(#login-screen, #login-screen *) { font-size: clamp(64px, 8.5vw, 96px); }
}
@media (max-height: 640px) {
.auth-stage:where(#login-screen, #login-screen *) { align-content: start; padding-top: 28px; }
}
.auth-stage > *:where(#login-screen, #login-screen *) { min-width: 0px; }
/* Phones and tablets (one column): the heading sits centred above the form.
   Desktop keeps it left-aligned in its own column beside the form. */
@media (max-width: 899px) {
.auth-hero:where(#login-screen, #login-screen *) { align-items: center; text-align: center; }
}
.auth-panel:where(#login-screen, #login-screen *) { width: 100%; }
.phone-field:where(#login-screen, #login-screen *) { width: 100%; }
.phone-field input:where(#login-screen, #login-screen *) { min-width: 0px; width: 100%; }
.auth-input-group input:where(#login-screen, #login-screen *),
.auth-select:where(#login-screen, #login-screen *) { min-width: 0px; width: 100%; }
.otp-boxes:where(#login-screen, #login-screen *) { flex-wrap: nowrap; }
.otp-box:where(#login-screen, #login-screen *) { min-width: 0px; }
#login-screen:where(#login-screen, #login-screen *) { background: radial-gradient(1000px 520px at 88% -12%, rgba(217, 165, 20, 0.2), transparent 60%), radial-gradient(760px 540px at -12% 112%, rgba(0, 168, 132, 0.16), transparent 62%), linear-gradient(135deg, rgb(11, 93, 59) 0%, rgb(7, 64, 42) 55%, rgb(6, 46, 31) 100%); }
.auth-hero-seal:where(#login-screen, #login-screen *) { width: 74px; height: 74px; border-radius: 22px; background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(217, 165, 20, 0.55); display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.35) 0px 14px 40px; }
.auth-hero-seal i:where(#login-screen, #login-screen *) { color: var(--color-yellow, #D9A514); font-size: 32px; }
.auth-wordmark:where(#login-screen, #login-screen *) { color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.35) 0px 4px 30px; }
.auth-rule span:where(#login-screen, #login-screen *) { background: rgba(217, 165, 20, 0.45); }
.auth-rule i:where(#login-screen, #login-screen *) { color: var(--color-yellow, #D9A514); }
.auth-tagline:where(#login-screen, #login-screen *) { color: rgba(240, 235, 219, 0.85); letter-spacing: 0.22em; }
.auth-points li:where(#login-screen, #login-screen *) { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 11px 14px; backdrop-filter: blur(8px); }
.auth-points b:where(#login-screen, #login-screen *) { color: rgb(255, 255, 255); }
.auth-points em:where(#login-screen, #login-screen *) { color: rgba(240, 235, 219, 0.72); }
.auth-point-ic:where(#login-screen, #login-screen *) { color: var(--color-yellow, #D9A514); }
.auth-panel:where(#login-screen, #login-screen *) { background: rgba(255, 255, 255, 0.98); border-radius: 24px; border: 1px solid rgba(217, 165, 20, 0.3); box-shadow: rgba(0, 0, 0, 0.5) 0px 34px 90px, rgb(255, 255, 255) 0px 1px 0px inset; }
.auth-step h2:where(#login-screen, #login-screen *) { font-family: var(--font-display); }
.otp-box:where(#login-screen, #login-screen *) { height: 56px; font-size: 22px; font-weight: 800; border: 1.5px solid var(--color-border, #E9EDEF); border-radius: 14px; background: var(--color-input-bg, #F0F2F5); transition: border-color 0.15s, box-shadow 0.15s; }
.otp-box:focus:where(#login-screen, #login-screen *) { outline: none; border-color: var(--color-yellow, #D9A514); box-shadow: rgba(217, 165, 20, 0.22) 0px 0px 0px 3px; background: rgb(255, 255, 255); }
.auth-btn:where(#login-screen, #login-screen *) { background: linear-gradient(rgb(14, 107, 69), rgb(11, 93, 59)); box-shadow: rgb(7, 64, 42) 0px 3px 0px, rgba(7, 64, 42, 0.35) 0px 12px 26px; border-radius: 14px; font-weight: 800; letter-spacing: 0.02em; transition: transform 0.1s, box-shadow 0.1s; }
.auth-btn:active:where(#login-screen, #login-screen *) { transform: translateY(2px); box-shadow: rgb(7, 64, 42) 0px 1px 0px; }
.auth-dev-hint:where(#login-screen, #login-screen *) { background: rgba(217, 165, 20, 0.14); border: 1px solid rgba(217, 165, 20, 0.4); color: rgb(138, 109, 26); border-radius: 10px; padding: 8px 12px; font-weight: 700; }
.auth-footer:where(#login-screen, #login-screen *) { color: rgba(240, 235, 219, 0.66); }
.pill-toggle-group:where(#login-screen, #login-screen *) { display: inline-flex; border: 1px solid var(--color-border, #E9EDEF); border-radius: 20px; overflow: hidden; background: var(--color-input-bg, #F0F2F5); flex-shrink: 0; }
.pill-toggle:where(#login-screen, #login-screen *) { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; color: var(--color-text-light, #667781); font-size: 13px; font-weight: 500; font-family: inherit; padding: 5px 14px; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.pill-toggle:hover:where(#login-screen, #login-screen *) { background: rgba(0, 0, 0, 0.05); color: var(--color-text,#111); }
.pill-toggle.active:where(#login-screen, #login-screen *) { background: var(--color-green, #1A7A3A); color: rgb(255, 255, 255); font-weight: 700; border-radius: 20px; }
.cc-picker:where(#login-screen, #login-screen *) { position: relative; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0px 10px; border: 1px solid var(--color-border, #E9EDEF); border-radius: 8px; background: var(--color-input-bg, #F0F2F5); cursor: pointer; font-size: 14px; font-family: inherit; white-space: nowrap; flex-shrink: 0; min-width: 90px; user-select: none; }
.cc-picker:hover:where(#login-screen, #login-screen *) { border-color: var(--color-green, #1A7A3A); }
.cc-chevron:where(#login-screen, #login-screen *) { font-size: 10px; color: var(--color-text-light, #667781); pointer-events: none; }
.cc-dropdown:where(#login-screen, #login-screen *) { position: absolute; top: calc(100% + 4px); left: 0px; min-width: 200px; background: var(--color-card-bg, #fff); border: 1px solid var(--color-border, #E9EDEF); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.13) 0px 6px 24px; z-index: 9999; overflow: hidden; }
.cc-option:where(#login-screen, #login-screen *) { padding: 10px 14px; font-size: 13.5px; cursor: pointer; transition: background 0.12s; color: var(--color-text, #111); }
.cc-option:hover:where(#login-screen, #login-screen *) { background: var(--color-input-bg, #F0F2F5); }
@media (prefers-color-scheme: dark) {
.cc-picker:where(#login-screen, #login-screen *),
.cc-dropdown:where(#login-screen, #login-screen *) { background: var(--color-card-bg, #1f2c33); border-color: var(--color-border, #2a3942); }
.cc-option:hover:where(#login-screen, #login-screen *) { background: rgba(255, 255, 255, 0.05); }
.pill-toggle-group:where(#login-screen, #login-screen *) { background: rgba(255, 255, 255, 0.06); border-color: var(--color-border, #2a3942); }
.pill-toggle:hover:where(#login-screen, #login-screen *) { background: rgba(255, 255, 255, 0.08); }
}
.auth-screen:where(#login-screen, #login-screen *),
#login-screen:where(#login-screen, #login-screen *) { background: radial-gradient(900px 500px at 50% -5%, rgba(244,192,22,0.28), transparent 55%),
    linear-gradient(170deg, var(--trs-green) 0%, #0A3320 100%) !important; }
.auth-logo:where(#login-screen, #login-screen *) { background: var(--trs-yellow) !important; color: var(--trs-green-dark) !important; box-shadow: rgba(244, 192, 22, 0.35) 0px 6px 18px !important; }
.auth-brand h1:where(#login-screen, #login-screen *),
.auth-wordmark:where(#login-screen, #login-screen *) { color: var(--trs-blue) !important; }
.profile-avatar-preview:where(#login-screen, #login-screen *) { background: linear-gradient(135deg, var(--trs-yellow), var(--trs-yellow-dark)) !important; color: var(--trs-yellow-text) !important; }
.otp-box:focus:where(#login-screen, #login-screen *) { border-color: var(--trs-yellow) !important; box-shadow: rgba(244, 192, 22, 0.22) 0px 0px 0px 3px !important; }
.phone-field input:focus:where(#login-screen, #login-screen *),
.auth-input-group input:focus:where(#login-screen, #login-screen *),
.country-select:focus:where(#login-screen, #login-screen *),
.auth-select:focus:where(#login-screen, #login-screen *) { border-color: var(--trs-yellow) !important; box-shadow: rgba(244, 192, 22, 0.15) 0px 0px 0px 3px !important; }
.auth-btn:where(#login-screen, #login-screen *) { background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color:  !important; background-image: linear-gradient(180deg, var(--trs-yellow), var(--trs-yellow-dark)) !important; color: var(--trs-yellow-text) !important; box-shadow: rgb(160, 112, 0) 0px 3px 0px, rgba(217, 165, 20, 0.35) 0px 10px 22px !important; border-radius: 14px !important; font-weight: 800 !important; letter-spacing: 0.02em !important; }
.auth-btn:hover:where(#login-screen, #login-screen *) { background: var(--trs-yellow-dark) !important; opacity: 1 !important; }
.auth-btn:active:where(#login-screen, #login-screen *) { transform: translateY(2px); box-shadow: rgb(160, 112, 0) 0px 1px 0px !important; }
.pill-toggle.active:where(#login-screen, #login-screen *) { background: var(--trs-green) !important; color: rgb(255, 255, 255) !important; }
.auth-link:where(#login-screen, #login-screen *),
.auth-link:hover:where(#login-screen, #login-screen *) { color: var(--trs-blue) !important; }
.auth-screen:where(#login-screen, #login-screen *),
#login-screen:where(#login-screen, #login-screen *) { background: linear-gradient(150deg, var(--P) 0%, var(--PD) 42%, var(--G) 100%) !important; }
.auth-hero:where(#login-screen, #login-screen *) { color: var(--GD) !important; }
.auth-hero-seal:where(#login-screen, #login-screen *) { background: var(--G) !important; color: var(--P) !important; box-shadow: rgba(26, 122, 58, 0.4) 0px 6px 20px !important; }
.auth-hero-seal i:where(#login-screen, #login-screen *) { color: var(--P) !important; }
.auth-wordmark:where(#login-screen, #login-screen *),
.auth-hero h1:where(#login-screen, #login-screen *) { color: var(--GD) !important; }
.auth-points li .auth-point-ic:where(#login-screen, #login-screen *) { background: rgba(26, 122, 58, 0.18) !important; color: var(--GD) !important; }
.auth-rule span:where(#login-screen, #login-screen *) { background: var(--PD) !important; }
.auth-panel:where(#login-screen, #login-screen *) { background: var(--WH) !important; border-top: 5px solid var(--G) !important; border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; border-bottom-width: medium !important; border-bottom-style: none !important; border-bottom-color: currentcolor !important; border-radius: 16px !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 20px 60px !important; }
.auth-panel:where(#login-screen, #login-screen *)::before { display: none !important; }
.auth-logo:where(#login-screen, #login-screen *) { background: var(--G) !important; color: var(--P) !important; box-shadow: rgba(26, 122, 58, 0.35) 0px 6px 18px !important; border-radius: 50% !important; }
.auth-brand h1:where(#login-screen, #login-screen *),
.auth-brand-compact h1:where(#login-screen, #login-screen *) { color: var(--G) !important; font-weight: 900 !important; }
.auth-brand p:where(#login-screen, #login-screen *),
.auth-brand-compact p:where(#login-screen, #login-screen *) { color: rgb(102, 102, 119) !important; }
.auth-step h2:where(#login-screen, #login-screen *) { color: var(--B) !important; }
.phone-field input:focus:where(#login-screen, #login-screen *),
.auth-input-group input:focus:where(#login-screen, #login-screen *),
.auth-select:focus:where(#login-screen, #login-screen *),
.cc-picker:focus:where(#login-screen, #login-screen *),
.country-select:focus:where(#login-screen, #login-screen *) { border-color: var(--P) !important; box-shadow: rgba(244, 192, 22, 0.22) 0px 0px 0px 3px !important; }
.otp-box:where(#login-screen, #login-screen *) { border: 1.5px solid rgb(224, 224, 208) !important; background: rgb(250, 250, 244) !important; }
.otp-box:focus:where(#login-screen, #login-screen *) { border-color: var(--G) !important; box-shadow: rgba(26, 122, 58, 0.18) 0px 0px 0px 3px !important; background: rgb(255, 255, 255) !important; }
.auth-btn:where(#login-screen, #login-screen *) { background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color:  !important; background-image: none !important; color: rgb(255, 255, 255) !important; font-weight: 800 !important; font-size: 16px !important; border-radius: 12px !important; box-shadow: 0 3px 0 var(--GD), 0 8px 20px rgba(26,122,58,.30) !important; transition: transform 0.08s, box-shadow 0.08s !important; }
.auth-btn:hover:where(#login-screen, #login-screen *) { background: var(--GD) !important; transform: translateY(-1px) !important; }
.auth-btn:active:where(#login-screen, #login-screen *) { transform: translateY(2px) !important; box-shadow: 0 1px 0 var(--GD) !important; }
.auth-btn:disabled:where(#login-screen, #login-screen *) { opacity: 0.6 !important; transform: none !important; }
.auth-link:where(#login-screen, #login-screen *) { color: var(--G) !important; font-weight: 700 !important; }
.auth-link:hover:where(#login-screen, #login-screen *) { color: var(--GD) !important; }
.auth-back:where(#login-screen, #login-screen *) { background: rgba(244, 192, 22, 0.12) !important; color: var(--G) !important; }
.auth-dev-hint:where(#login-screen, #login-screen *) { background: rgba(244, 192, 22, 0.14) !important; border-color: rgba(244, 192, 22, 0.4) !important; color: var(--PT) !important; }
.auth-footer:where(#login-screen, #login-screen *) { color: rgba(26, 42, 16, 0.55) !important; font-weight: 600 !important; }
.profile-avatar-preview:where(#login-screen, #login-screen *) { background: linear-gradient(135deg, var(--G), var(--GD)) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(26, 122, 58, 0.3) 0px 4px 14px !important; }
#role-pill-group .pill-toggle.active:where(#login-screen, #login-screen *) { background: var(--G) !important; color: rgb(255, 255, 255) !important; }
.pill-toggle.active:where(#login-screen, #login-screen *) { background: var(--G) !important; color: rgb(255, 255, 255) !important; }
.pill-toggle:not(.active):hover:where(#login-screen, #login-screen *) { background: rgba(244, 192, 22, 0.12) !important; color: var(--PT) !important; }
*:where(#login-screen, #login-screen *)::-webkit-scrollbar { width: 5px; height: 5px; }
*:where(#login-screen, #login-screen *)::-webkit-scrollbar-track { background: transparent; }
*:where(#login-screen, #login-screen *)::-webkit-scrollbar-thumb { background: rgba(244, 192, 22, 0.45); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover:where(#login-screen, #login-screen *) { background: var(--P); }
input:focus:where(#login-screen, #login-screen *),
select:focus:where(#login-screen, #login-screen *) { outline: none; border-color: var(--B, #203080) !important; box-shadow: rgba(32, 48, 128, 0.12) 0px 0px 0px 3px !important; }
.auth-step input:focus:where(#login-screen, #login-screen *) { border-color: var(--G, #1A7A3A) !important; box-shadow: rgba(26, 122, 58, 0.18) 0px 0px 0px 3px !important; }
.auth-screen:where(#login-screen, #login-screen *),
#login-screen:where(#login-screen, #login-screen *) { background: linear-gradient(150deg, rgb(244, 192, 22) 0%, rgb(217, 165, 20) 42%, rgb(26, 122, 58) 100%) !important; }
.auth-btn:where(#login-screen, #login-screen *) { background: rgb(11, 93, 59) !important; box-shadow: rgb(7, 75, 48) 0px 2px 0px !important; }
.auth-btn:hover:where(#login-screen, #login-screen *) { background: rgb(7, 75, 48) !important; }
.auth-logo:where(#login-screen, #login-screen *) { background: rgb(244, 192, 22) !important; color: rgb(26, 122, 58) !important; box-shadow: rgba(244, 192, 22, 0.35) 0px 6px 18px !important; }
.profile-avatar-preview:where(#login-screen, #login-screen *) { background: rgb(0, 168, 132) !important; }
.auth-rule span:where(#login-screen, #login-screen *) { background: rgba(217, 165, 20, 0.55) !important; }
.auth-hero:where(#login-screen, #login-screen *) { color: rgb(15, 84, 41) !important; }
.auth-hero-seal:where(#login-screen, #login-screen *) { background: rgb(26, 122, 58) !important; color: rgb(244, 192, 22) !important; box-shadow: rgba(26, 122, 58, 0.4) 0px 6px 20px !important; border-color: transparent !important; }
.auth-hero-seal i:where(#login-screen, #login-screen *) { color: rgb(244, 192, 22) !important; }
/* The official logo in the brand marks (seal and compact logo), filling their box. */
.auth-hero-seal img:where(#login-screen, #login-screen *),
.auth-logo img:where(#login-screen, #login-screen *) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.auth-wordmark:where(#login-screen, #login-screen *),
.auth-hero h1:where(#login-screen, #login-screen *) { color: rgb(15, 84, 41) !important; text-shadow: none !important; }
.auth-points li .auth-point-ic:where(#login-screen, #login-screen *) { background: rgba(26, 122, 58, 0.18) !important; color: rgb(15, 84, 41) !important; }
.auth-tagline:where(#login-screen, #login-screen *) { color: rgb(15, 84, 41) !important; }
.auth-rule span:where(#login-screen, #login-screen *) { background: rgb(217, 165, 20) !important; }
.auth-rule i:where(#login-screen, #login-screen *) { color: rgb(217, 165, 20) !important; }
.auth-footer:where(#login-screen, #login-screen *) { color: rgba(15, 84, 41, 0.65) !important; }
.auth-panel:where(#login-screen, #login-screen *) { background: rgb(255, 255, 255) !important; border-width: 5px medium medium !important; border-style: solid none none !important; border-color: rgb(26, 122, 58) currentcolor currentcolor !important; border-radius: 16px !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 20px 60px !important; }
.auth-panel:where(#login-screen, #login-screen *)::before { display: none !important; }
.auth-logo:where(#login-screen, #login-screen *) { background: rgb(26, 122, 58) !important; color: rgb(244, 192, 22) !important; box-shadow: rgba(26, 122, 58, 0.35) 0px 6px 18px !important; border-radius: 50% !important; }
.auth-brand h1:where(#login-screen, #login-screen *),
.auth-brand-compact h1:where(#login-screen, #login-screen *) { color: rgb(26, 122, 58) !important; font-weight: 900 !important; }
.auth-brand p:where(#login-screen, #login-screen *),
.auth-brand-compact p:where(#login-screen, #login-screen *) { color: rgb(102, 102, 119) !important; }
.auth-step h2:where(#login-screen, #login-screen *) { color: rgb(32, 48, 128) !important; }
.auth-btn:where(#login-screen, #login-screen *) { background: rgb(26, 122, 58) !important; box-shadow: rgb(15, 84, 41) 0px 2px 0px !important; }
.auth-btn:hover:where(#login-screen, #login-screen *) { background: rgb(15, 84, 41) !important; }
.phone-field input:focus:where(#login-screen, #login-screen *),
.auth-input-group input:focus:where(#login-screen, #login-screen *),
.auth-select:focus:where(#login-screen, #login-screen *),
.cc-picker:focus:where(#login-screen, #login-screen *),
.country-select:focus:where(#login-screen, #login-screen *) { border-color: rgb(244, 192, 22) !important; box-shadow: rgba(244, 192, 22, 0.22) 0px 0px 0px 3px !important; }
#login-screen #auth-register-step .auth-fields:where(#login-screen, #login-screen *) { gap: 16px !important; }
#login-screen #auth-register-step .auth-field:where(#login-screen, #login-screen *) { display: flex; flex-direction: column; gap: 8px; }
#login-screen #auth-register-step .auth-field > label:where(#login-screen, #login-screen *) { font-size: 13px; font-weight: 600; color: rgb(58, 58, 48); display: flex; align-items: center; gap: 8px; }
#login-screen #auth-register-step .auth-verified:where(#login-screen, #login-screen *) { font-size: 12px; font-weight: 600; color: rgb(26, 122, 58); }
#login-screen #auth-register-step :is(input, select):where(#login-screen, #login-screen *) { height: 44px !important; border-radius: 12px !important; border: 1px solid rgb(214, 209, 191) !important; background-color: rgb(255, 255, 255) !important; box-shadow: none !important; font-size: 15px !important; }
/* Touch screens: 16px. The 15px above (two ids, !important) beat the general
   16px touch rule, so iOS zoomed in on Name, District and the rest and stayed
   zoomed. Same selector and later in the file, so this one wins. */
@media (hover: none), (pointer: coarse) {
  #login-screen #auth-register-step :is(input, select):where(#login-screen, #login-screen *) { font-size: 16px !important; }
}
/* Registration form fields match the app field (44 high, text inset 16px in
   inputs and selects alike, blue chevron) and the app rhythm (label 8 field,
   fields 16 apart, 24 before the button). Only the register and pending
   steps; the phone and code steps above stay as approved. */
#login-screen #auth-register-step :is(input, select) { padding: 0 16px; }
#login-screen #auth-register-step .profile-avatar-preview { margin-bottom: 16px; }
#login-screen #auth-register-step .auth-btn { margin-top: 24px; }
#login-screen #auth-register-step select {
  padding-right: 40px; appearance: none; -webkit-appearance: none; color: rgb(29, 29, 24);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23203080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
#login-screen #auth-register-step select:disabled { color: rgb(107, 107, 94); opacity: .7; cursor: not-allowed; }
/* A field the form sends the member back to (markRegField): red, also while it
   has the focus. Beats the field rule above (two ids, !important). */
#login-screen #auth-register-step .is-invalid { border-color: #E53935 !important; box-shadow: 0 0 0 3px rgba(229, 57, 53, .18) !important; }
#login-screen #auth-register-step input[type="checkbox"].is-invalid { outline: 2px solid #E53935; outline-offset: 2px; }
#login-screen #auth-pending-step .auth-delete-reg,
#login-screen #auth-register-step .auth-delete-reg { display: block; margin: 20px auto 0; padding: 10px 12px; min-height: 44px; color: #C62828 !important; }
#login-screen #auth-register-step #reg-phone:where(#login-screen, #login-screen *) { background: rgb(246, 244, 236) !important; color: rgb(69, 69, 59) !important; }
#login-screen #auth-register-step .profile-avatar-preview:where(#login-screen, #login-screen *) { background: rgb(26, 122, 58) !important; box-shadow: none !important; }
#login-screen :is(#auth-register-step, #auth-pending-step) .auth-btn:where(#login-screen, #login-screen *) { height: 50px !important; border-radius: 999px !important; box-shadow: none !important; background: rgb(26, 122, 58) !important; color: rgb(255, 255, 255) !important; }
#login-screen #auth-pending-step .auth-btn.auth-btn-secondary:where(#login-screen, #login-screen *) { background: rgb(255, 255, 255) !important; color: rgb(29, 29, 24) !important; border: 1px solid rgb(214, 209, 191) !important; }
#login-screen #auth-pending-step > div > div:first-child:where(#login-screen, #login-screen *) { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(230, 242, 233); margin: 0px auto 18px !important; font-size: 34px !important; }
#login-screen #auth-pending-step > div > div:first-child:has(.fa-ban):where(#login-screen, #login-screen *) { background: rgb(253, 236, 236); }
#login-screen #auth-pending-step > div > div:first-child { margin-bottom: 16px !important; font-size: 32px !important; }

@keyframes authFade { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* ---- Still in a call: the green return bar (app.js CallBar) -------------------- */
/* Shown on every other screen while a live Sabha or group call goes on behind
   it. Phones: in the page flow above the screen. Desktop: the header row of the
   content column. It takes the status-bar inset, so the screen below does not. */
.call-return-bar { flex: none; display: flex; flex-direction: column; padding-top: var(--safe-top); background: var(--green); color: #fff; }
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) { .call-return-bar { grid-area: header; } }
#app-container.has-call-bar > .app-content { --safe-top: 0px; }
.crb-item {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 44px; padding: 0 var(--gutter);
  border: 0; background: transparent; color: #fff; font-family: var(--font-body); font-size: 14px; line-height: 1.3; text-align: left; cursor: pointer;
}
.crb-item + .crb-item { border-top: 1px solid rgba(255, 255, 255, .2); }
.crb-item:active { background: var(--green-press); }
@media (hover: hover) { .crb-item:hover { background: var(--green-hover); } }
.call-return-bar .crb-item:focus-visible { outline: 2px solid var(--yellow); outline-offset: -3px; }
.crb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.crb-ic { flex: none; font-size: 14px; }
.crb-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crb-text b { font-weight: 600; }
.crb-time { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Sabha chat messages that came while minimised (the room's Chat badge, on the bar) */
.crb-count { flex: none; gap: 2px; }
.crb-count i { font-size: 10px; }
.crb-time:empty { display: none; }
.crb-cta { flex: none; padding: 3px 10px; border-radius: var(--r-full); background: rgba(255, 255, 255, .2); font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (max-width: 359px) { .crb-cta { display: none; } }
/* Group call: minimise arrow beside the title */
.video-call-header { display: flex; align-items: flex-start; gap: var(--s3); }
.vc-minimise-btn {
  flex: none; width: var(--icon-btn); height: var(--icon-btn); border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--st-raised); color: #fff; font-size: 16px;
}
.vc-minimise-btn:active { transform: scale(.94); }

/* Sign-in: the whole page is the solid logo yellow (#FED202), the same fill
   as the splash, so splash and sign-in read as one surface. Every sign-in
   screen (phone, code, registration, pending) shares it. On yellow the
   wordmark's dot and the hero rule turn blue / green to stay visible. */
#login-screen, #login-screen .auth-screen { background: #FED202 !important; }
#login-screen .auth-wordmark::after { color: #203080 !important; }
#login-screen .auth-rule span { background: rgba(15, 84, 41, .45) !important; }
#login-screen .auth-rule i { color: #203080 !important; }
#login-screen .auth-footer { color: rgba(15, 84, 41, .8) !important; }

/* ==========================================================================
   6b. SPLASH: first paint, before sign-in or the app
   The official TRS Sabha logo (client/assets/logo.webp, PNG fallback) on a
   solid fill of the logo's own yellow (#FED202), so the square edges of the
   logo vanish and it matches the native splash of the Android/iOS app
   exactly. app.js (SabhaSplash) fades it out and removes it, so it never
   stays in the page.
   ========================================================================== */
.splash {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s6) var(--gutter);
  background: #FED202;
}
.splash.splash-out { opacity: 0; pointer-events: none; }
.splash-brand { display: block; line-height: 0; }
.splash-logo { display: block; width: min(240px, 62vw); height: auto; }
@media (min-width: 860px) and (hover: hover) and (pointer: fine), (min-width: 1024px) and (min-height: 600px) {
  .splash-logo { width: 320px; }
}
/* One-shot entrance and the fade-out, unless the system asks for less
   motion. No entrance in the app (.splash-still): its native splash came first. */
@keyframes splash-emblem { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .splash { transition: opacity 280ms ease; }
  .splash:not(.splash-still) .splash-logo { animation: splash-emblem 520ms cubic-bezier(.2, .8, .2, 1) both; }
}

/* ==========================================================================
   7. UTILITIES
   ========================================================================== */
/* A hidden element stays hidden whatever component it is: this is the one
   deliberate !important in the app styles. */
.hidden { display: none !important; }
/* The test server's label (APP_ENV=staging): a small pill under the status
   bar, above everything, never in the way of a tap. */
.server-env-label { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 2px); left: 50%; transform: translateX(-50%); z-index: 100001; pointer-events: none; padding: 2px 10px; border-radius: 999px; background: #C62828; color: #fff; font: 700 10.5px/1.6 var(--font-family, system-ui, sans-serif); letter-spacing: .08em; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); opacity: .92; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Narrow phones (320): the whole 10-digit number fits in the phone field. */
@media (max-width: 359px) {
  #login-screen .auth-panel { padding-left: 20px; padding-right: 20px; }
  #login-screen .phone-field { gap: 8px; }
  #login-screen .cc-picker { min-width: 0; padding: 0 8px; }
  #login-screen .phone-field input { padding-left: 12px; padding-right: 12px; letter-spacing: 0; }
}

/* ---- call sound and mic level (app.js: AudioOut, MicMeter) ------------------ */
/* My own mic level, on my own tile: bars move when I talk; red when it is off. */
.mic-meter { position: absolute; top: var(--s2); left: var(--s2); z-index: 4; display: flex; align-items: center; gap: var(--s1); padding: 3px 7px; border-radius: var(--r-full); background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; line-height: 1; pointer-events: none; }
.mic-meter .mm-bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.mic-meter .mm-bars b { width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); transition: background-color 80ms linear; }
.mic-meter .mm-bars b:nth-child(1) { height: 4px; }
.mic-meter .mm-bars b:nth-child(2) { height: 7px; }
.mic-meter .mm-bars b:nth-child(3) { height: 10px; }
.mic-meter .mm-bars b:nth-child(4) { height: 12px; }
.mic-meter .mm-bars b.on { background: var(--st-speaking); }
.mic-meter.is-off { color: #FF9D99; }
.mic-meter.is-off .mm-bars { display: none; }
.video-grid.tiles-small .mic-meter, .gvc-strip .mic-meter { top: var(--s1); left: var(--s1); padding: 2px 5px; }
.call-audio-sink { display: none; }
/* "Can't hear? Tap here": a quiet text button above the call controls. */
.hear-fix-btn { display: block; align-self: center; margin: 0 auto 2px; min-height: 24px; padding: 2px var(--s3); border: 0; border-radius: var(--r-full); background: none; color: var(--st-muted); font: 500 12px/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hear-fix-btn:hover, .hear-fix-btn:focus-visible { color: var(--st-text); }
.hear-fix-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
/* The browser refused sound until a tap: one big button starts it. */
.audio-unlock-btn { position: fixed; left: 50%; bottom: calc(112px + var(--safe-bottom)); transform: translateX(-50%); z-index: 10050; display: flex; align-items: center; gap: var(--s2); min-height: var(--control); max-width: calc(100vw - 2 * var(--gutter)); padding: var(--s3) var(--s5); border: 0; border-radius: var(--r-full); background: var(--yellow); color: var(--blue); font: 600 15px/1.2 var(--font-body); box-shadow: var(--e2); cursor: pointer; }
.audio-unlock-btn.hidden { display: none; }
/* Short landscape screens keep every pixel for the stage (the unlock button
   still appears when the browser refuses sound). */
@media (max-height: 700px) { .hear-fix-btn { display: none; } }

/* ---- Admin > Health (client/admin-health.js) --------------------------------- */
.hl-filters { flex-wrap: wrap; }
.hl-stats .asc-num { font-size: 20px; }
.hl-row, .hl-event, .hl-call { align-items: start; }
.hl-msg { font-size: 14px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; margin-top: 2px; }
.hl-loc, .hl-data { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hl-chips:empty { display: none; }
.hl-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-badge); background: var(--blue-wash); color: var(--blue); font-size: 12px; font-weight: 500; white-space: nowrap; }
.hl-chip b { font-weight: 700; }
.hl-counts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hl-users, .hl-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hl-table-wrap { overflow-x: auto; }
.hl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hl-table th, .hl-table td { padding: 10px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.hl-table th:first-child, .hl-table td:first-child { text-align: left; white-space: normal; min-width: 120px; }
.hl-table th { font-weight: 600; color: var(--muted); background: var(--fill); }
.hl-table tr:last-child td { border-bottom: 0; }
.hl-table tr.is-bad td { background: var(--red-tint); }
/* Server now: a number over its alert limit. */
.hl-stats .admin-stat-card.is-bad { background: var(--red-tint); }
.hl-stats .admin-stat-card.is-bad .asc-num { color: var(--red-deep); }
.hl-member { width: 100%; border-top: 0; border-left: 0; border-right: 0; text-align: left; font: inherit; cursor: pointer; }
.hl-note { margin: var(--s4) 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 599px) {
  .hl-row, .hl-event, .hl-call { grid-template-columns: var(--avatar) minmax(0, 1fr); }
  .hl-row > .adm-actions, .hl-event > .adm-actions, .hl-call > .adm-actions { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
}
/* Call diagnostics (Profile, admins): the live snapshot, scrollable, small mono text */
.diag-body { max-height: 60dvh; overflow: auto; margin: 0; padding: var(--s3); border-radius: var(--r-md); background: var(--fill); color: var(--ink); font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }

/* App (edge to edge, Android 15+): content that scrolls up must not show
   through under the clock and icons (found on a real phone: the profile header
   and the sign-up form ran under them). A strip of the header yellow behind
   the status bar; off on the dark call screens (html.bar-dark, app.js
   CallBar.syncStatusBar); sheets and dialogs stack above it. */
html.native-app body::before, html.native-app #login-screen::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: var(--safe-top); background: var(--yellow); pointer-events: none;
}
html.native-app body::before { z-index: 2900; }
html.native-app #login-screen::before { z-index: 10; }
html.native-app.bar-dark body::before { display: none; }
html.native-app body:has(#app-container.has-call-bar)::before { background: var(--green); }

/* Sabha host moderation: the options button on a People row, a chat box the
   host muted for this member, the host's "Join stage". */
.pp-actions .pp-more-btn { padding: 0 10px; }
#sabha-chat-input.chat-muted { background: var(--fill); }
/* ---- Picture in picture (app.js Pip) ------------------------------------------ */
/* The small-window button on the stage and the call screen (hidden where this
   phone or browser cannot float the Sabha). */
.pip-ic { display: block; width: 20px; height: 20px; }
.pip-btn[aria-pressed="true"] { color: var(--yellow); }
/* Browsers and the iPhone: the live stage's own floating <video>, fed with the
   speaker in focus. Laid out (a video that is not cannot float), never seen. */
.pip-source { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; z-index: -1; }
/* Android app, window small (html.pip-on): only the speaker or the broadcast
   in focus shows, over the whole window (its selector is set by app.js Pip,
   #pip-focus-css). The rest is hidden, not removed: nothing below reloads or
   moves, and the full screen is back as it was when the window grows. */
html.pip-on, html.pip-on body { background: #000 !important; overflow: hidden !important; }
html.pip-on body { visibility: hidden; }
/* A size container (the call's spotlight) would hold the pinned tile inside it. */
html.pip-on .gvc-main { container-type: normal !important; }
html.pip-on :is(.speaker-card, .video-card) { transition: none !important; }
/* No buttons: a tap on the small window opens Android's own controls. */
html.pip-on :is(.tile-pin-btn, .tile-more-btn, .tile-admin, .gc-tile-more, .speaker-role, .participant-status-badge, .participant-cam-badge,
  #sabha-hls-unmute, #gvc-hls-unmute, #sabha-hls-note) { display: none !important; }
html.pip-on .speaker-card .speaker-video-wrap { position: absolute; inset: 0; background: #000; }
html.pip-on :is(.speaker-video-feed, .video-feed, #sabha-hls-video, #gvc-hls-video) { width: 100% !important; height: 100% !important; object-fit: contain !important; background: #000; }
html.pip-on .speaker-avatar-wrap, html.pip-on .video-card { background: #15181C; }
html.pip-on :is(.speaker-avatar, .video-avatar-fallback) { width: 56px; height: 56px; font-size: 20px; }
html.pip-on :is(.speaker-name, .video-card .participant-label) { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 6px; font-size: 11px; }
/* The watermark (privacy.js) stays over the small window too: FLAG_SECURE
   keeps it out of screenshots, the name keeps a photo of the screen traceable. */
html.pip-on :is(#sabha-active-room, #group-video-call-screen) > .wm-layer { visibility: visible; position: fixed; inset: 0; z-index: 2147483001; }
/* Nobody on the stage yet: the Sabha's name. */
.pip-idle { display: none; }
html.pip-on .pip-idle:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; color: #fff; text-align: center; font-family: var(--font-body); }
.pip-idle-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.3; }
/* Left (the window's Leave, or the Sabha ended) while the window closes: no LIVE tag. */
.pip-idle-left .live-tag { display: none; }
/* The minimum app build (app.js AppVersionGate): a full screen over the app
   until it is updated. */
.app-update-gate { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: calc(var(--s4) + env(safe-area-inset-top)) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); background: var(--bg, #fff); }
.app-update-card { max-width: 420px; width: 100%; text-align: center; padding: var(--s5, 24px); display: flex; flex-direction: column; align-items: center; gap: var(--s3, 12px); }
.app-update-card h2 { margin: 0; font-size: 20px; }
.app-update-card p { margin: 0; color: var(--muted); }