/* ==========================================================================
   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;
  --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; }
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; }
.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); 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); 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); 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; }

/* ---- 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; }
.bb-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%;
  font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere;
}
.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); 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; }
  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); 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); }

.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; }
.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; }
.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; }
/* 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; }
.poll-popup-card > .ui-modal-head .room-panel-close { color: #fff; }
.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); }
.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-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-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; }
#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); }
.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)); }
  .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; }
}

/* 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); }
.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); }
.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; }

/* ---- 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; }
.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; }
.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; }
.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; }
/* 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; }
#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; }
.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; }
.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; } }