/* ============================================================================
   VOLURR — LIVE ROOMS OMEGA · institutional design system
   Bloomberg/TradingView-grade collaboration workspace. Black / white / deep-crimson.
   COLOR LAW: --gold = crimson brand (auto-flips light/dark); --up/--down = price ONLY.
   All theme via real base.css/tokens.css vars; RTL-safe logical properties; tabular-nums.
   Two surfaces: the full-screen HUB overlay (#lrhub) + the in-room chart DOCKS (.lrd-*).
   ============================================================================ */

/* ---- shared primitives ---------------------------------------------------- */
:root{
  --lr-rail: 232px;
  --lr-dock: 348px;
  --lr-crimson: var(--gold);
  --lr-ink: var(--txt);
  --lr-ink2: var(--txt2);
  --lr-faint: var(--muted);
  --lr-line: var(--line);
  --lr-bg: var(--bg2);   /* was referenced 5× (pin bubbles/input · DM card · invite inputs) but NEVER defined → surfaces stuck at their dark literal fallbacks (or transparent where no fallback) while --lr-ink flipped near-black in light theme = dark-on-dark. Theme-following like every other lr token. */
  --lr-glass: color-mix(in srgb, var(--bg2) 88%, transparent);
  /* CAUTION amber — the ONE non-brand hue the rooms surface uses (moderator role · kick). It used to be
     written by REDEFINING the app token --pcac inside the dock (--pcac:#b3791a light / #e8a33d dark), which is
     exactly the brand drift the design lens measured: the app's --pcac IS the crimson accent (base.css:18/31),
     so the dock was shipping a second meaning for an app-wide token. Its own token now; the app's stays intact.
     COLOR LAW (BR-AGI-001 / PROJECT_LAWS art.3): crimson = brand + UI; --up/--down = price direction ONLY;
     amber = caution, never an accent. */
  --lr-warn:#b3791a;
}
html:not([data-theme="light"]){ --lr-warn:#e8a33d; }
.lr-tn{ font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; }

/* ============================================================================
   1 · HUB OVERLAY  (clone of the #acenter institutional shell)
   ============================================================================ */
#lrhub{
  position:fixed; inset:0; z-index:1200; display:none;
  align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--bg) 60%, transparent);
  -webkit-backdrop-filter:blur(8px) saturate(118%); backdrop-filter:blur(8px) saturate(118%);
  padding:22px;
}
#lrhub.on{ display:flex; animation:lrhubFade .17s ease; }
@keyframes lrhubFade{ from{opacity:0; transform:scale(.992)} to{opacity:1; transform:none} }

/* Z-INDEX CONTRACT (rooms): chart · dock 180 · hub 1200 · dock-pop 1300 · shared #modal 1400 · image-zoom 2000.
   The shared #modal is z-index:300 by default (dashboard.css .modal) — when the hub (z-1200) is open, a SECOND box
   spawned from it (channel-settings · create-group · invite via #modal) painted BEHIND the hub → looked like "the
   box won't open / its controls don't work". Raise #modal above the hub (ID specificity beats .modal). */
#modal{ z-index:1400; }

.lrh-panel{
  width:min(1560px, 97vw); height:min(92vh, 1000px);
  background:linear-gradient(180deg, color-mix(in srgb,var(--bg2) 96%, #000 4%), var(--bg2));
  border:1px solid var(--lr-line); border-radius:18px;
  display:flex; flex-direction:column; overflow:hidden; outline:none;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.78), 0 0 0 1px color-mix(in srgb,var(--lr-crimson) 7%, transparent);
}

/* header */
.lrh-head{
  flex:0 0 auto; display:flex; align-items:center; gap:16px;
  padding:0 18px; height:62px; border-bottom:1px solid var(--lr-line);
  background:linear-gradient(180deg, color-mix(in srgb,var(--lr-crimson) 5%, transparent), transparent);
}
.lrh-brand{ display:flex; align-items:center; gap:11px; font-weight:900; letter-spacing:.4px; font-size:15px; white-space:nowrap; }
.lrh-brand .lrh-mark{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:15px;
  background:linear-gradient(150deg, var(--lr-crimson), color-mix(in srgb,var(--lr-crimson) 55%, #000));
  box-shadow:0 4px 16px -4px color-mix(in srgb,var(--lr-crimson) 70%, transparent); color:#fff;
}
.lrh-brand b{ color:var(--lr-ink); } .lrh-brand i{ color:var(--lr-crimson); font-style:normal; }
.lrh-live{ font-size:10px; font-weight:800; letter-spacing:.6px; color:var(--lr-faint);
  border:1px solid var(--lr-line); border-radius:999px; padding:2px 8px; display:inline-flex; gap:5px; align-items:center; }
.lrh-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--up); box-shadow:0 0 8px var(--up); }
.lrh-search{ flex:1 1 auto; display:flex; align-items:center; gap:8px; max-width:520px;
  background:var(--bg); border:1px solid var(--lr-line); border-radius:11px; padding:0 12px; height:38px; }
.lrh-search:focus-within{ border-color:color-mix(in srgb,var(--lr-crimson) 55%, var(--lr-line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lr-crimson) 12%, transparent); }
.lrh-search input{ flex:1; background:none; border:0; outline:0; color:var(--lr-ink); font-size:13.5px; font-family:inherit; }
.lrh-search svg,.lrh-search .ic{ color:var(--lr-faint); flex:0 0 auto; }
.lrh-actions{ display:flex; align-items:center; gap:8px; margin-inline-start:auto; }
.lrh-x{ width:34px; height:34px; border-radius:9px; border:1px solid var(--lr-line); background:var(--card);
  color:var(--lr-ink2); cursor:pointer; font-size:16px; display:grid; place-items:center; transition:.14s; }
.lrh-x:hover{ border-color:color-mix(in srgb,var(--lr-crimson) 45%, var(--lr-line)); color:var(--lr-ink); }

/* body: rail · main */
.lrh-body{ flex:1 1 auto; display:flex; min-height:0; }
.lrh-rail{
  flex:0 0 var(--lr-rail); border-inline-end:1px solid var(--lr-line);
  background:color-mix(in srgb,var(--bg) 70%, var(--bg2)); display:flex; flex-direction:column; min-height:0;
}
.lrh-railscroll{ flex:1 1 auto; overflow-y:auto; padding:12px 10px; }
.lrh-navsec{ font-size:10px; font-weight:800; letter-spacing:.7px; color:var(--lr-faint);
  text-transform:uppercase; padding:12px 10px 6px; }
.lrh-nav{ display:flex; align-items:center; gap:11px; width:100%; text-align:start;
  padding:9px 11px; border-radius:10px; border:1px solid transparent; background:none;
  color:var(--lr-ink2); font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; transition:.13s; margin-bottom:2px; }
.lrh-nav .lrh-ico{ width:18px; text-align:center; flex:0 0 auto; opacity:.9; font-size:15px; }
.lrh-nav .lrh-ct{ margin-inline-start:auto; font-size:11px; font-weight:700; color:var(--lr-faint);
  background:var(--card); border:1px solid var(--lr-line); border-radius:999px; padding:1px 7px; min-width:20px; text-align:center; }
.lrh-nav:hover{ background:var(--card); color:var(--lr-ink); }
.lrh-nav.on{ background:color-mix(in srgb,var(--lr-crimson) 13%, transparent);
  border-color:color-mix(in srgb,var(--lr-crimson) 40%, transparent); color:var(--lr-ink); }
.lrh-nav.on .lrh-ico{ color:var(--lr-crimson); opacity:1; }
.lrh-nav.lrh-cta{ background:var(--lr-crimson); color:#fff; justify-content:center; margin-top:8px; font-weight:800; }
.lrh-nav.lrh-cta .lrh-ico{ color:#fff; }
.lrh-nav.lrh-cta:hover{ filter:brightness(1.08); }
/* Go Live — moved here from the chart toolbar; a distinct LIVE-red CTA with a soft live pulse (vs the crimson Create Room) */
.lrh-nav.lrh-golive{ background:linear-gradient(135deg,#ff3b3b,#c81e3a); box-shadow:0 6px 18px -8px rgba(226,59,59,.6); margin-top:6px; }
.lrh-nav.lrh-golive .lrh-ico{ color:#fff; animation:lrGoLivePulse 1.8s ease-in-out infinite; }
@keyframes lrGoLivePulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.lrh-railfoot{ flex:0 0 auto; padding:10px 14px; border-top:1px solid var(--lr-line); font-size:10.5px; color:var(--lr-faint); line-height:1.5; }

/* main */
.lrh-main{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0; }
.lrh-sechead{ flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:16px 22px 4px; }
.lrh-sechead h2{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.3px; color:var(--lr-ink); }
.lrh-sechead .lrh-sub{ font-size:12.5px; color:var(--lr-faint); }
.lrh-toolbar{ flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 22px 12px; }
.lrh-chip{ font-size:12px; font-weight:700; color:var(--lr-ink2); background:var(--card); border:1px solid var(--lr-line);
  border-radius:999px; padding:5px 12px; cursor:pointer; transition:.13s; white-space:nowrap; }
.lrh-chip:hover{ border-color:color-mix(in srgb,var(--lr-crimson) 40%, var(--lr-line)); color:var(--lr-ink); }
.lrh-chip.on{ background:color-mix(in srgb,var(--lr-crimson) 16%, transparent); color:var(--lr-ink);
  border-color:color-mix(in srgb,var(--lr-crimson) 50%, transparent); }
.lrh-sel{ font-size:12px; font-weight:700; color:var(--lr-ink2); background:var(--card);
  border:1px solid var(--lr-line); border-radius:9px; padding:5px 10px; cursor:pointer; font-family:inherit; margin-inline-start:auto; }

.lrh-scroll{ flex:1 1 auto; overflow-y:auto; padding:6px 22px 26px; }
.lrh-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:15px; align-items:stretch; }
.lrh-grid.wide{ grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); }

/* ---- KPI strip ------------------------------------------------------------ */
.lrh-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(132px,1fr)); gap:12px; margin:2px 0 16px; }
.lrh-kpi{ background:var(--cardgrad); border:1px solid var(--lr-line); border-radius:13px; padding:13px 15px; position:relative; overflow:hidden; }
.lrh-kpi::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--lr-crimson); opacity:.5; }
.lrh-kpi .v{ font-size:23px; font-weight:800; color:var(--lr-ink); letter-spacing:-.5px; }
.lrh-kpi .l{ font-size:11px; color:var(--lr-faint); margin-top:2px; font-weight:600; }

/* ---- generic institutional card ------------------------------------------ */
.lrc{ background:var(--cardgrad); border:1px solid var(--lr-line); border-radius:14px; padding:15px;
  display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:.15s; position:relative; min-height:0; }
.lrc:hover{ border-color:color-mix(in srgb,var(--lr-crimson) 38%, var(--lr-line));
  box-shadow:0 14px 34px -22px rgba(0,0,0,.7); transform:translateY(-1px); }
.lrc-top{ display:flex; align-items:flex-start; gap:11px; }
.lrc-av{ width:42px; height:42px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
  font-weight:800; font-size:16px; color:#fff; background:linear-gradient(150deg,#444,#222); }
.lrc-nm{ font-size:14.5px; font-weight:800; color:var(--lr-ink); line-height:1.25; }
.lrc-meta{ font-size:11.5px; color:var(--lr-faint); margin-top:2px; display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.lrc-bio{ font-size:12.5px; color:var(--lr-ink2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lrc-foot{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:9px; border-top:1px solid var(--lr-line); }
.lrc-stat{ display:flex; flex-direction:column; line-height:1.15; }
.lrc-stat b{ font-size:14px; color:var(--lr-ink); font-weight:800; }
.lrc-stat span{ font-size:10px; color:var(--lr-faint); font-weight:600; }
.lrc-tags{ display:flex; gap:5px; flex-wrap:wrap; }
.lrc-tag{ font-size:10.5px; font-weight:700; color:var(--lr-ink2); background:var(--card);
  border:1px solid var(--lr-line); border-radius:6px; padding:1px 7px; }
.lrc-cat{ font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-crimson) 12%, transparent);
  border:1px solid color-mix(in srgb,var(--lr-crimson) 30%, transparent); border-radius:6px; padding:1px 7px; }
.lrc-live{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; color:var(--up); }
.lrc-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--up); box-shadow:0 0 7px var(--up); }
.lrc-btn{ margin-inline-start:auto; font-size:12px; font-weight:800; cursor:pointer; font-family:inherit;
  border-radius:9px; padding:6px 14px; border:1px solid var(--lr-crimson);
  background:var(--lr-crimson); color:#fff; transition:.13s; }
.lrc-btn.ghost{ background:transparent; color:var(--lr-crimson); }
.lrc-btn:hover{ filter:brightness(1.08); }
.lrc-btn:disabled{ opacity:.5; cursor:default; }

/* verified-accuracy trust chip (System-11) */
.lr-acc{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  border-radius:999px; padding:2px 9px; border:1px solid var(--lr-line); color:var(--lr-ink2); background:var(--card); }
.lr-acc.good{ color:var(--up); border-color:color-mix(in srgb,var(--up) 35%, var(--lr-line)); }
.lr-acc.mid{ color:var(--gold2); }
.lr-acc.verif::after{ content:"✓"; color:var(--up); font-weight:900; }
.lr-acc.pending{ color:var(--lr-faint); font-weight:700; }
/* ── per-symbol track record (owner idea): specialist pill + accuracy-by-symbol bars ── */
.lr-spec{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; border-radius:999px;
  padding:2px 9px; color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent); }
.lr-spec svg{ width:14px; height:14px; flex:0 0 auto; }
.lr-symacc-wrap{ margin:10px 0 2px; display:flex; flex-direction:column; gap:6px; }
.lr-symacc-h{ font-size:11px; font-weight:800; color:var(--lr-faint); letter-spacing:.2px; }
.lr-symacc{ display:flex; align-items:center; gap:9px; }
.lr-symn{ display:inline-flex; align-items:center; gap:5px; flex:0 0 88px; font-size:11.5px; font-weight:700; color:var(--lr-ink); }
.lr-symn svg{ width:16px; height:16px; flex:0 0 auto; }
.lr-symn .lr-decl{ color:var(--gold); font-style:normal; font-size:10px; }
.lr-symbar{ flex:1 1 auto; height:7px; border-radius:999px; background:color-mix(in srgb,var(--lr-line) 60%,transparent); overflow:hidden; }
.lr-symbar>i{ display:block; height:100%; border-radius:999px; background:var(--lr-faint); }
.lr-symacc.good .lr-symbar>i{ background:var(--up); }
.lr-symacc.mid .lr-symbar>i{ background:var(--gold2); }
.lr-symacc.low .lr-symbar>i{ background:var(--down); }
.lr-symv{ flex:0 0 auto; font-size:11px; font-weight:800; color:var(--lr-ink2); font-variant-numeric:tabular-nums; min-width:56px; text-align:end; }
.lr-symacc.verif .lr-symv::after{ content:" ✓"; color:var(--up); }

/* verdict badge (per-post, 24h) */
.lr-vb{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; border-radius:7px; padding:2px 8px; }
.lr-vb.hit{ color:var(--up); background:color-mix(in srgb,var(--up) 14%, transparent); }
.lr-vb.miss{ color:var(--down); background:color-mix(in srgb,var(--down) 14%, transparent); }
.lr-vb.flat,.lr-vb.pend{ color:var(--lr-faint); background:var(--card); }

/* ---- room list rows (Groups / My Rooms) ---------------------------------- */
.lrh-rows{ display:flex; flex-direction:column; gap:9px; }
.lr-row2{ display:flex; align-items:center; gap:14px; background:var(--cardgrad); border:1px solid var(--lr-line);
  border-radius:12px; padding:12px 15px; cursor:pointer; transition:.14s; }
.lr-row2:hover{ border-color:color-mix(in srgb,var(--lr-crimson) 38%, var(--lr-line)); transform:translateX(0); }
.lr-row2 .lr-sym{ width:62px; font-weight:800; color:var(--lr-ink); font-size:13px; }
.lr-row2 .lr-nm{ flex:1 1 auto; min-width:0; }
.lr-row2 .lr-nm b{ display:block; font-size:13.5px; color:var(--lr-ink); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lr-row2 .lr-nm span{ font-size:11px; color:var(--lr-faint); }
.lr-row2 .lr-on{ font-size:12px; font-weight:800; color:var(--up); white-space:nowrap; }
.lr-row2 .lr-on.zero{ color:var(--lr-faint); }

/* desks (trading floors) */
.lr-desk2{ background:var(--cardgrad); border:1px solid var(--lr-line); border-radius:14px; padding:16px;
  cursor:pointer; transition:.15s; display:flex; flex-direction:column; gap:7px; position:relative; overflow:hidden; }
.lr-desk2::after{ content:""; position:absolute; inset-inline-end:-30px; top:-30px; width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--lr-crimson) 18%, transparent), transparent 70%); }
.lr-desk2:hover{ border-color:color-mix(in srgb,var(--lr-crimson) 45%, var(--lr-line)); transform:translateY(-2px); box-shadow:0 16px 38px -24px rgba(0,0,0,.7); }
.lr-desk2 .dk-ico{ font-size:22px; } .lr-desk2 .dk-nm{ font-size:15px; font-weight:800; color:var(--lr-ink); }
.lr-desk2 .dk-meta{ font-size:11.5px; color:var(--lr-faint); display:flex; gap:8px; align-items:center; }
.lr-desk2 .dk-on{ margin-top:4px; font-size:12px; font-weight:800; color:var(--up); }
.lr-desk2 .dk-on.zero{ color:var(--lr-faint); font-weight:600; }

/* ---- create form ---------------------------------------------------------- */
.lr-form{ max-width:640px; display:flex; flex-direction:column; gap:16px; }
.lr-fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.lr-fld{ display:flex; flex-direction:column; gap:6px; }
.lr-fld label{ font-size:11.5px; font-weight:700; color:var(--lr-ink2); }
.lr-fld input,.lr-fld select,.lr-fld textarea{ background:var(--bg); border:1px solid var(--lr-line); border-radius:10px;
  padding:10px 12px; color:var(--lr-ink); font-size:13.5px; font-family:inherit; outline:0; transition:.13s; }
.lr-fld input:focus,.lr-fld select:focus,.lr-fld textarea:focus{ border-color:color-mix(in srgb,var(--lr-crimson) 55%, var(--lr-line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lr-crimson) 12%, transparent); }
.lr-toggles{ display:flex; gap:10px; flex-wrap:wrap; }
.lr-tog{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--lr-ink2);
  background:var(--card); border:1px solid var(--lr-line); border-radius:10px; padding:9px 13px; cursor:pointer; }
.lr-tog input{ accent-color:var(--lr-crimson); }
.lr-type-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:9px; }
.lr-type{ background:var(--card); border:1px solid var(--lr-line); border-radius:11px; padding:11px; cursor:pointer;
  text-align:start; transition:.13s; } .lr-type:hover{ border-color:color-mix(in srgb,var(--lr-crimson) 40%, var(--lr-line)); }
.lr-type.on{ border-color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-crimson) 10%, transparent); }
.lr-type b{ display:block; font-size:13px; color:var(--lr-ink); font-weight:800; }
.lr-type span{ font-size:10.5px; color:var(--lr-faint); }
/* mode picker — the two flagship modes (Channel broadcast / Group collaborate) */
.lr-mode-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.lr-mode{ background:var(--card); border:1px solid var(--lr-line); border-radius:13px; padding:15px 14px; cursor:pointer;
  text-align:start; transition:.13s; display:flex; flex-direction:column; gap:7px; font-family:inherit; }
.lr-mode:hover{ border-color:color-mix(in srgb,var(--lr-crimson) 40%, var(--lr-line)); }
.lr-mode.on{ border-color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-crimson) 10%, transparent); }
.lr-mico{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px;
  background:color-mix(in srgb,var(--lr-crimson) 12%, transparent); color:var(--lr-crimson); }
.lr-mico svg{ width:18px; height:18px; }
.lr-mode b{ display:block; font-size:14px; color:var(--lr-ink); font-weight:800; }
.lr-mode i{ font-style:normal; font-size:11px; line-height:1.45; color:var(--lr-faint); }
@media(max-width:560px){ .lr-mode-grid{ grid-template-columns:1fr; } }
/* room image (avatar) picker + bio editor — create form + owner edit panel */
.lr-imgrow{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.lr-imgprev{ width:64px; height:64px; flex:0 0 auto; border-radius:14px; border:1px solid var(--lr-line);
  background:var(--card) center/cover no-repeat; }
.lr-imgbtn{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
  background:var(--card); border:1px solid var(--lr-line); border-radius:10px; padding:9px 14px; color:var(--lr-ink2); }
.lr-imgbtn:hover{ color:var(--lr-ink); border-color:color-mix(in srgb,var(--lr-crimson) 40%,var(--lr-line)); }
.lr-imgclear{ font:inherit; font-size:12px; font-weight:700; cursor:pointer; background:none; border:1px solid var(--lr-line); border-radius:10px; padding:9px 12px; color:var(--lr-faint); }
.lr-imgclear:hover{ color:var(--lr-ink,#e6e9f0); border-color:color-mix(in srgb,var(--lr-ink,#e6e9f0) 40%,var(--lr-line)); }   /* color-law: red reserved for market direction — neutral hover for this non-destructive clear */
.lr-editpanel{ display:flex; flex-direction:column; gap:13px; margin-top:14px; padding:14px; border:1px solid var(--lr-line); border-radius:14px; background:var(--lr-glass); }
.lr-rowav{ width:38px; height:38px; flex:0 0 auto; border-radius:10px; background:#0b0e16 center/cover no-repeat; border:1px solid var(--lr-line); }
.lr-submit{ background:var(--lr-crimson); color:#fff; border:0; border-radius:11px; padding:13px; font-size:14.5px;
  font-weight:800; cursor:pointer; font-family:inherit; transition:.13s; }
.lr-submit:hover{ filter:brightness(1.08); } .lr-submit:disabled{ opacity:.55; cursor:default; }
/* comprehensive room settings sections (type · posture · invite · roles · delete) — crimson room accent */
.lr-set{ display:flex; flex-direction:column; gap:2px; margin-top:2px; border-top:1px solid var(--lr-line); padding-top:8px; }
.lr-set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 2px; border-bottom:1px solid color-mix(in srgb,var(--lr-line) 60%,transparent); }
.lr-set-row:last-child{ border-bottom:0; }
.lr-set-row.col{ flex-direction:column; align-items:stretch; gap:9px; }
.lr-set-l{ font-size:13px; font-weight:700; color:var(--lr-ink); }
.lr-set-l b{ color:var(--lr-crimson); font-size:12px; }
.lr-seg{ display:inline-flex; border:1px solid var(--lr-line); border-radius:9px; overflow:hidden; background:var(--card); }
.lr-seg button{ font:inherit; font-size:12.5px; font-weight:700; padding:7px 15px; cursor:pointer; background:none; border:0; color:var(--lr-ink2); transition:.13s; }
.lr-seg button.on{ background:color-mix(in srgb,var(--lr-crimson) 16%,transparent); color:var(--lr-crimson); }
.lr-seg button:not(.on):hover{ color:var(--lr-ink); }
.lr-set-inv{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lr-set-inv input{ flex:1; min-width:160px; font:inherit; font-size:12px; padding:9px 11px; border-radius:9px; border:1px solid var(--lr-line); background:var(--bg); color:var(--lr-ink2); }
.lr-set-inv button{ font:inherit; font-size:12px; font-weight:700; padding:9px 13px; border-radius:9px; cursor:pointer; background:var(--card); border:1px solid var(--lr-line); color:var(--lr-ink); transition:.13s; }
.lr-set-inv button:hover{ border-color:var(--lr-crimson); color:var(--lr-crimson); }
.lr-set-inv button.dng:hover{ border-color:var(--down); color:var(--down); }
.lr-set-mem{ display:flex; flex-direction:column; gap:5px; max-height:280px; overflow:auto; }
.lr-set-m{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:9px; background:var(--card); border:1px solid var(--lr-line); }
.lr-set-av{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; }
.lr-set-nm{ flex:1; min-width:0; font-size:12.5px; font-weight:700; color:var(--lr-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lr-set-rl{ font-size:11px; font-weight:700; color:var(--lr-faint); text-transform:capitalize; }
.lr-role-sel{ font:inherit; font-size:12px; font-weight:700; padding:5px 8px; border-radius:8px; border:1px solid var(--lr-line); background:var(--bg); color:var(--lr-ink); cursor:pointer; }
.lr-set-hint{ font-size:11px; color:var(--lr-faint); padding:6px 2px 0; }
.lr-set-del{ width:100%; font:inherit; font-size:12.5px; font-weight:700; padding:11px; border-radius:9px; cursor:pointer; background:color-mix(in srgb,var(--down) 10%,transparent); border:1px solid color-mix(in srgb,var(--down) 38%,var(--lr-line)); color:var(--down); transition:.13s; }
.lr-set-del:hover{ background:color-mix(in srgb,var(--down) 18%,transparent); }
.lr-sched{ display:flex; gap:8px; flex-wrap:wrap; width:100%; }
.lr-sched input{ flex:1; min-width:150px; font:inherit; font-size:12.5px; padding:9px 11px; border-radius:9px; border:1px solid var(--lr-line); background:var(--bg); color:var(--lr-ink); }
.lr-bdg.sched{ background:color-mix(in srgb,var(--lr-crimson) 14%,transparent); color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 36%,var(--lr-line)); }
/* welcome/rules card shown to a new joiner in the dock */
.lr-rules-card{ margin:8px 12px; padding:11px 13px; border-radius:11px; background:color-mix(in srgb,var(--lr-crimson) 7%,var(--card)); border:1px solid color-mix(in srgb,var(--lr-crimson) 22%,var(--lr-line)); }
.lr-rules-card .h{ font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--lr-crimson); margin-bottom:5px; display:flex; align-items:center; justify-content:space-between; }
.lr-rules-card .x{ cursor:pointer; color:var(--lr-faint); font-weight:700; border:0; background:none; font-size:13px; }
.lr-rules-card .t{ font-size:12.5px; line-height:1.55; color:var(--lr-ink2); white-space:pre-wrap; }
/* live poll card + composer */
.lr-poll,.lr-pollnew{ margin:8px 12px; padding:11px 12px; border-radius:12px; background:color-mix(in srgb,var(--lr-crimson) 6%,var(--card)); border:1px solid color-mix(in srgb,var(--lr-crimson) 22%,var(--lr-line)); }
.lr-poll-h{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; font-weight:800; color:var(--lr-crimson); margin-bottom:8px; }
.lr-poll-x{ font:inherit; font-size:11px; font-weight:700; cursor:pointer; background:none; border:1px solid var(--lr-line); border-radius:7px; padding:3px 9px; color:var(--lr-faint); }
.lr-poll-x:hover{ color:var(--down); border-color:color-mix(in srgb,var(--down) 40%,var(--lr-line)); }
.lr-poll-q{ font-size:13.5px; font-weight:700; color:var(--lr-ink); margin-bottom:9px; white-space:pre-wrap; }
.lr-poll-opts{ display:flex; flex-direction:column; gap:6px; }
.lr-poll-opt{ position:relative; overflow:hidden; display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:9px; border:1px solid var(--lr-line); background:var(--bg); color:var(--lr-ink); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; text-align:start; transition:.13s; }
.lr-poll-opt:hover{ border-color:color-mix(in srgb,var(--lr-crimson) 40%,var(--lr-line)); }
.lr-poll-opt.mine{ border-color:var(--lr-crimson); }
.lr-poll-bar{ position:absolute; inset-inline-start:0; top:0; bottom:0; background:color-mix(in srgb,var(--lr-crimson) 14%,transparent); z-index:0; transition:width .3s ease; }
.lr-poll-otext{ position:relative; z-index:1; flex:1; min-width:0; }
.lr-poll-pct{ position:relative; z-index:1; font-weight:800; color:var(--lr-crimson); font-size:12px; }
.lr-poll-tot{ font-size:11px; color:var(--lr-faint); margin-top:7px; }
.lr-pn-q,.lr-pn-opts input{ width:100%; font:inherit; font-size:13px; padding:9px 11px; border-radius:9px; border:1px solid var(--lr-line); background:var(--bg); color:var(--lr-ink); margin-bottom:7px; }
.lr-pn-opts{ display:flex; flex-direction:column; }
.lr-pn-act{ display:flex; gap:8px; justify-content:space-between; }
.lr-pn-add{ font:inherit; font-size:12px; font-weight:700; cursor:pointer; background:none; border:1px dashed var(--lr-line); border-radius:8px; padding:7px 12px; color:var(--lr-ink2); }
.lr-pn-create{ font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; background:var(--lr-crimson); color:#fff; border:0; border-radius:8px; padding:8px 16px; }
.lr-pn-create:hover{ filter:brightness(1.08); }

/* ---- CHANNEL presenter-lock — LIVE banner + follower control-lock --------- */
.lr-pbar{ display:flex; align-items:center; gap:10px; padding:7px 14px; font-size:12.5px; font-weight:600;
  background:color-mix(in srgb,var(--lr-crimson) 11%, var(--card)); color:var(--lr-ink);
  border-bottom:1px solid color-mix(in srgb,var(--lr-crimson) 30%, var(--lr-line)); }
.lr-pbar b{ font-weight:800; letter-spacing:.05em; color:var(--lr-crimson); font-size:11px; }
/* PRESENTER: compact «● LIVE» pill only (owner: «فقط ● LIVE — احذف الشريط الأحمر والنص») — NOT a full-width bar */
.lr-pbar.lr-pbar-live{ display:inline-flex; width:auto; align-self:flex-start; gap:7px; margin:6px 0 2px 8px;
  padding:4px 12px 4px 9px; border:1px solid color-mix(in srgb,var(--lr-crimson) 34%, transparent); border-bottom-width:1px;
  border-radius:999px; background:color-mix(in srgb,var(--lr-crimson) 12%, var(--card)); }
html[dir=rtl] .lr-pbar.lr-pbar-live{ margin:6px 8px 2px 0; }
/* LASER POINTER — bright ephemeral teaching dots (position/size/glow set inline by room-laser.js) */
.lr-lasers .lr-laser-pt{ position:absolute; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
body.lr-laser-on #pcBody{ cursor:crosshair; }               /* while YOUR laser is on, the chart shows a crosshair */
.lrd-vbtn.lrd-laserb.on{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 45%,transparent); background:color-mix(in srgb,var(--lr-crimson) 14%,transparent); }
.lrd-vbtn.lrd-laserb.on svg{ filter:drop-shadow(0 0 4px var(--lr-crimson)); }

/* ── ROOM TOOLS tab — consolidated collaboration toggles ── */
#lrdDock .lrd-tools{ padding:12px 13px; display:flex; flex-direction:column; gap:8px; }
#lrdDock .lrd-tools-h{ font-size:12.5px; font-weight:900; color:var(--lr-ink2); letter-spacing:.3px; margin-bottom:2px; }
#lrdDock .lrd-toolrow{ display:flex; align-items:center; gap:11px; padding:10px 11px; border:1px solid var(--lr-line); border-radius:12px; background:var(--card); }
#lrdDock .lrd-toolrow.dis{ opacity:.5; }
#lrdDock .lrd-toolico{ flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--lr-ink2); background:color-mix(in srgb,var(--lr-ink2) 8%,transparent); }
#lrdDock .lrd-toolm{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
#lrdDock .lrd-toolm b{ font-size:13px; font-weight:800; color:var(--lr-ink); }
#lrdDock .lrd-toolm span{ font-size:11px; color:var(--lr-faint); }
/* the OFF track was --lr-line against a white knob (~1.25:1) — the control's state was unreadable in the
   light dock. Fixing the BOUNDARIES rather than the fill: a fill dark enough for 3:1 would be a grey slab.
   --lr-faint is 5.3:1 on white and light enough on the dark surface, so one token serves both themes. */
/* the pin-send and DM-send arrows mirror in RTL; the dock composer's did not, so it pointed back at the
   text box in Arabic and Kurdish. Scoped to the ICON, never the button: .lrd-send is reused for the
   text-only Notes save button, and .send-btn owns an :active transform a button-level one would clobber.
   Both selectors because the dock stamps its own dir attribute independently of the document. */
html[dir=rtl] .lrd-send svg, [dir=rtl] .lrd-send svg{ transform:scaleX(-1); }
/* scrollback: the client already holds 400 events and rendered 80 — this reveals the rest, no fetch */
.lrd-more{ display:block; width:100%; margin:2px 0 8px; padding:7px; border:1px dashed var(--lr-line);
  border-radius:9px; background:transparent; color:var(--lr-faint); font:inherit; font-size:11.5px;
  font-weight:700; cursor:pointer; }
.lrd-more:hover{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 45%,var(--lr-line)); }
#lrdDock .lrd-tgl{ flex:0 0 auto; width:40px; height:23px; border-radius:999px; border:1px solid var(--lr-faint); background:color-mix(in srgb,var(--lr-ink2) 12%,transparent); cursor:pointer; position:relative; transition:.16s; padding:0; }
#lrdDock .lrd-tgl i{ position:absolute; top:2px; inset-inline-start:2px; width:17px; height:17px; border-radius:50%; background:#fff; border:1px solid var(--lr-faint); box-sizing:border-box; transition:.16s; box-shadow:0 1px 3px rgba(0,0,0,.35); }
#lrdDock .lrd-tgl.on{ background:var(--lr-crimson); border-color:var(--lr-crimson); }
#lrdDock .lrd-tgl.on i{ inset-inline-start:20px; }
#lrdDock .lrd-tgl:disabled{ opacity:.45; cursor:default; }
#lrdDock .lrd-tools-sub{ font-size:11px; color:var(--lr-faint); margin-top:4px; padding:0 3px; line-height:1.5; }

/* ── ON-CHART PINS — anchored question/note bubbles ── */
body.lr-pin-mode #pcBody{ cursor:crosshair; }
.lr-pins .lr-pin{ position:absolute; }
.lr-pins .lr-pin-b{ display:inline-flex; align-items:center; gap:6px; max-width:230px; padding:5px 9px; border-radius:11px; border-bottom-left-radius:3px;
  background:var(--lr-bg,#12151d); border:1px solid color-mix(in srgb,var(--lr-crimson) 32%,var(--lr-line)); box-shadow:0 6px 18px rgba(0,0,0,.4); }
.lr-pins .lr-pin-au{ font-size:10px; font-weight:800; color:var(--lr-crimson); white-space:nowrap; flex:0 0 auto; }
.lr-pins .lr-pin-tx{ font-size:12px; color:var(--lr-ink); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lr-pins .lr-pin-x{ flex:0 0 auto; width:16px; height:16px; border:0; border-radius:50%; background:color-mix(in srgb,var(--lr-crimson) 18%,transparent); color:var(--lr-crimson); font-size:13px; line-height:1; cursor:pointer; padding:0; }
.lr-pins .lr-pin-stem{ position:absolute; left:6px; top:100%; width:2px; height:12px; background:linear-gradient(var(--lr-crimson),transparent); }
.lr-pins .lr-pin-stem::after{ content:""; position:absolute; left:-2px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--lr-crimson); box-shadow:0 0 6px var(--lr-crimson); }
.lr-pins .lr-pin-new{ display:flex; align-items:center; gap:5px; }
.lr-pins .lr-pin-in{ width:180px; padding:6px 10px; border-radius:10px; border:1px solid color-mix(in srgb,var(--lr-crimson) 40%,var(--lr-line)); background:var(--lr-bg,#12151d); color:var(--lr-ink); font-size:12.5px; outline:0; }
.lr-pins .lr-pin-send{ width:30px; height:30px; border:0; border-radius:50%; background:var(--lr-crimson); color:#fff; cursor:pointer; font-size:13px; }
html[dir=rtl] .lr-pins .lr-pin-send{ transform:scaleX(-1); }
.lrd-vbtn.lrd-pinb.on{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 45%,transparent); background:color-mix(in srgb,var(--lr-crimson) 14%,transparent); }
.lr-pbar span{ display:inline-flex; align-items:center; gap:6px; color:var(--lr-ink2); }
.lr-pbar strong{ color:var(--lr-ink); font-weight:800; }
.lr-pbar .lr-pb-lock{ margin-inline-start:auto; font-style:normal; font-size:11px; color:var(--lr-faint); }
/* LIVE beacon — glossy gradient core + soft glow + gentle breathe, and a clean expanding ring (::after) */
.lr-pb-dot{ position:relative; width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 34% 30%, #ff8a8a, var(--lr-crimson) 72%);
  box-shadow:0 0 6px color-mix(in srgb,var(--lr-crimson) 72%, transparent), 0 0 1px var(--lr-crimson);
  animation:lrDotBreath 1.8s ease-in-out infinite; }
.lr-pb-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; animation:lrDotRing 1.8s ease-out infinite; }
@keyframes lrDotBreath{ 0%,100%{ transform:scale(.9);} 50%{ transform:scale(1.06);} }
@keyframes lrDotRing{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--lr-crimson) 50%, transparent);} 70%{ box-shadow:0 0 0 8px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
@media(prefers-reduced-motion:reduce){ .lr-pb-dot,.lr-pb-dot::after{ animation:none; } }
/* follower: lock the broadcast-state edit controls so the chart faithfully mirrors the presenter
   (pan/zoom/log/replay/AGI/settings stay free — those are local view, not shared state) */
body.lr-following #pcTools,
body.lr-following .pcsymwrap,
body.lr-following .pctfwrap,
body.lr-following #acBtn,
body.lr-following .pctypedrop,
body.lr-following .pctpldrop{ pointer-events:none !important; opacity:.4; filter:saturate(.4); }

/* ---- empty / honesty states ---------------------------------------------- */
.lr-empty2{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:60px 24px; text-align:center; color:var(--lr-faint); }
.lr-empty2 .ic{ font-size:38px; opacity:.5; }
.lr-empty2 b{ font-size:15px; color:var(--lr-ink2); font-weight:700; }
.lr-empty2 p{ font-size:12.5px; max-width:360px; line-height:1.6; margin:0; }
.lr-note{ font-size:11px; color:var(--lr-faint); line-height:1.6; padding:10px 13px; border-radius:10px;
  background:color-mix(in srgb,var(--gold2) 6%, var(--card)); border:1px solid var(--lr-line); margin-top:6px; }
.lr-skel{ height:120px; border-radius:14px; background:linear-gradient(90deg,var(--card),var(--card2),var(--card));
  background-size:200% 100%; animation:lrShimmer 1.3s linear infinite; }
@keyframes lrShimmer{ from{background-position:200% 0} to{background-position:-200% 0} }

/* detail (channel) */
.lr-detail-head{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.lr-back{ background:var(--card); border:1px solid var(--lr-line); border-radius:9px; color:var(--lr-ink2);
  cursor:pointer; padding:6px 12px; font-size:12.5px; font-weight:700; font-family:inherit; }
.lr-back:hover{ color:var(--lr-ink); }
.lr-feeditem{ background:var(--cardgrad); border:1px solid var(--lr-line); border-radius:12px; padding:14px; margin-bottom:10px; }
.lr-feeditem .fi-top{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.lr-feeditem .fi-sym{ font-weight:800; color:var(--lr-ink); font-size:13px; }
.lr-feeditem .fi-time{ font-size:11px; color:var(--lr-faint); margin-inline-start:auto; }
.lr-feeditem .fi-title{ font-size:13.5px; font-weight:700; color:var(--lr-ink); margin-bottom:4px; }
.lr-feeditem .fi-body{ font-size:12.5px; color:var(--lr-ink2); line-height:1.55; }
.lr-feeditem .fi-react{ display:flex; gap:14px; margin-top:9px; font-size:11.5px; color:var(--lr-faint); }

/* ---- professional INFO panel (channel detail + room/group info, Telegram-grade) -- */
.lr-info{ max-width:760px; }
.lr-info-hero{ display:flex; align-items:flex-start; gap:18px; padding:18px 0 16px; }
.lr-info-av{ width:72px; height:72px; border-radius:18px; flex:0 0 auto; display:grid; place-items:center;
  font-weight:800; font-size:26px; color:#fff; position:relative;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7), inset 0 0 0 1px color-mix(in srgb,#fff 8%, transparent); }
.lr-info-av .vmark{ position:absolute; inset-block-end:-4px; inset-inline-end:-4px; width:24px; height:24px; border-radius:50%;
  background:var(--up); color:#04110a; display:grid; place-items:center; font-size:13px; font-weight:900; border:2px solid var(--bg2); }
.lr-info-h{ min-width:0; flex:1 1 auto; }
.lr-info-h h1{ margin:0; font-size:23px; font-weight:800; letter-spacing:-.4px; color:var(--lr-ink); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.lr-info-badges{ display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.lr-bdg{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.2px;
  border-radius:7px; padding:3px 9px; border:1px solid var(--lr-line); color:var(--lr-ink2); background:var(--card); }
.lr-bdg.priv{ color:var(--gold2); } .lr-bdg.pub{ color:var(--lr-ink2); }
.lr-bdg.type{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 30%, transparent); background:color-mix(in srgb,var(--lr-crimson) 10%, transparent); }
.lr-bdg.voice{ color:var(--up); }
/* CHANNEL vs GROUP type chips (owner: «يوبين كروب و قنات — اعرف هذا قنات او كروب»): channel = crimson
   round dot (broadcast/brand); group = neutral square dot (collaborative). No green/red (COLOR LAW). */
.lr-bdg.ch::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--lr-crimson); display:inline-block; flex:0 0 auto; }
.lr-bdg.grp{ color:var(--lr-ink2); border-color:var(--lr-line); background:color-mix(in srgb,var(--lr-ink2) 9%, transparent); }
.lr-bdg.grp::before{ content:""; width:5px; height:5px; border-radius:2px; background:var(--lr-ink2); display:inline-block; flex:0 0 auto; }
/* ── Friends / people rows (Telegram-style contacts + search results) ── */
.lrfr-msgs{ display:flex; align-items:center; gap:7px; width:100%; justify-content:center; padding:10px 14px; margin:2px 0 8px; border:1px solid color-mix(in srgb,var(--lr-crimson) 30%,var(--lr-line)); border-radius:11px; background:color-mix(in srgb,var(--lr-crimson) 8%,transparent); color:var(--lr-crimson); font-size:13px; font-weight:800; cursor:pointer; transition:.13s; }
.lrfr-msgs:hover{ background:color-mix(in srgb,var(--lr-crimson) 15%,transparent); }
.lrfr-badge{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--lr-crimson); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; }
.lrfr-search{ display:flex; align-items:center; gap:8px; padding:2px 12px; margin:2px 0 10px; border:1px solid var(--lr-line); border-radius:11px; background:var(--card); }
.lrfr-search .lrfr-ic{ opacity:.6; font-size:13px; flex:0 0 auto; }
.lrfr-search input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--lr-ink); font-size:13.5px; font-weight:600; padding:9px 0; }
.lrpr-list{ display:flex; flex-direction:column; gap:6px; }
.lrpr{ display:flex; align-items:center; gap:11px; padding:9px 12px; border:1px solid var(--lr-line); border-radius:12px; background:var(--card); }
.lrpr-av{ width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:14px; font-weight:800; color:#fff; overflow:hidden; background-size:cover; background-position:center; }
.lrpr-nm{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.lrpr-nm b{ font-size:13.5px; font-weight:800; color:var(--lr-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrpr-nm span{ font-size:11.5px; color:var(--lr-faint); font-weight:600; }
.lrpr-act{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.lrpr-btn{ font-size:12px; font-weight:800; padding:7px 13px; border-radius:9px; cursor:pointer; border:1px solid var(--lr-line); background:transparent; color:var(--lr-ink2); transition:.13s; }
.lrpr-btn.add{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 34%,transparent); background:color-mix(in srgb,var(--lr-crimson) 9%,transparent); }
.lrpr-btn.add:hover{ background:color-mix(in srgb,var(--lr-crimson) 16%,transparent); }
.lrpr-btn.rm:hover{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 34%,transparent); }
.lrpr-btn:disabled{ opacity:.5; cursor:default; }
.lrpr-tag{ font-size:11.5px; font-weight:800; color:var(--lr-ink2); }   /* neutral status (COLOR LAW: green/red = market direction only) */
.lrpr-btn.msg{ color:var(--lr-ink); }
.lrpr-btn.msg:hover{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 34%,transparent); }

/* ══ 1-on-1 DIRECT MESSAGES overlay (#lrdm) — Telegram-style private chat ══ */
#lrdm{ position:fixed; inset:0; z-index:2147483000; display:none; background:rgba(4,6,10,.42); backdrop-filter:blur(2px); }
#lrdm.on{ display:block; }
#lrdm .lrdm-card{ position:absolute; top:0; bottom:0; inset-inline-end:0; width:min(420px,100vw); display:flex; flex-direction:column;
  background:var(--lr-bg,#0d1017); border-inline-start:1px solid var(--lr-line); box-shadow:-24px 0 60px rgba(0,0,0,.5); }
#lrdm .lrdm-head{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid var(--lr-line); flex:0 0 auto; }
#lrdm .lrdm-htitle{ font-size:15px; font-weight:900; color:var(--lr-ink); flex:1; }
#lrdm .lrdm-head-m{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
#lrdm .lrdm-head-m b{ font-size:14px; font-weight:800; color:var(--lr-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#lrdm .lrdm-head-m span{ font-size:11.5px; color:var(--lr-faint); font-weight:600; }
#lrdm .lrdm-back,#lrdm .lrdm-x{ background:transparent; border:0; color:var(--lr-ink2); font-size:18px; cursor:pointer; width:30px; height:30px; border-radius:8px; flex:0 0 auto; }
#lrdm .lrdm-back:hover,#lrdm .lrdm-x:hover{ background:var(--card); color:var(--lr-ink); }
#lrdm .lrdm-av{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:800; overflow:hidden; background-size:cover; background-position:center; }
#lrdm .lrdm-av.sm{ width:34px; height:34px; font-size:12px; }
#lrdm .lrdm-body{ flex:1 1 auto; overflow-y:auto; padding:12px 13px; display:flex; flex-direction:column; }
#lrdm .lrdm-empty{ margin:auto; display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--lr-faint); font-size:13px; font-weight:600; text-align:center; }
#lrdm .lrdm-empty{ font-size:30px; }
#lrdm .lrdm-empty span{ font-size:13px; max-width:230px; }
#lrdm .lrdm-skel{ height:52px; border-radius:12px; background:var(--card); margin-bottom:8px; animation:lrdmpulse 1.2s ease-in-out infinite; }
@keyframes lrdmpulse{ 0%,100%{opacity:.5} 50%{opacity:.9} }
/* inbox */
#lrdm .lrdm-threads{ display:flex; flex-direction:column; gap:4px; }
#lrdm .lrdm-thr{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:12px; cursor:pointer; transition:.12s; }
#lrdm .lrdm-thr:hover{ background:var(--card); }
#lrdm .lrdm-thr-m{ flex:1; min-width:0; }
#lrdm .lrdm-thr-top{ display:flex; align-items:baseline; gap:8px; }
#lrdm .lrdm-thr-top b{ font-size:13.5px; font-weight:800; color:var(--lr-ink); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#lrdm .lrdm-thr-t{ font-size:10.5px; color:var(--lr-faint); flex:0 0 auto; }
#lrdm .lrdm-thr-last{ font-size:12px; color:var(--lr-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
#lrdm .lrdm-unread{ flex:0 0 auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--lr-crimson); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; }
/* thread bubbles */
#lrdm .lrdm-msgs{ display:flex; flex-direction:column; gap:6px; margin-top:auto; }
#lrdm .lrdm-b{ display:flex; max-width:82%; }
#lrdm .lrdm-b.me{ align-self:flex-end; }
#lrdm .lrdm-b.them{ align-self:flex-start; }
#lrdm .lrdm-bx{ padding:8px 11px 6px; border-radius:14px; font-size:13.5px; line-height:1.4; color:var(--lr-ink); word-break:break-word; position:relative; }
#lrdm .lrdm-b.them .lrdm-bx{ background:var(--card); border:1px solid var(--lr-line); border-end-start-radius:5px;   /* was border-bottom-inline-start-radius — not a real property, so the DM bubble tail was silently dropped at parse and every bubble rendered fully rounded */ }
#lrdm .lrdm-b.me .lrdm-bx{ background:color-mix(in srgb,var(--lr-crimson) 22%, var(--card)); border:1px solid color-mix(in srgb,var(--lr-crimson) 30%,transparent); border-end-end-radius:5px;     /* same: the logical corner longhands are border-{block}-{inline}-radius */ }
#lrdm .lrdm-bt{ display:block; text-align:end; font-size:9.5px; color:var(--lr-faint); margin-top:3px; opacity:.85; }
#lrdm .lrdm-tick{ margin-inline-start:4px; font-style:normal; opacity:.6; }
#lrdm .lrdm-tick.rd{ color:var(--lr-crimson); opacity:1; }
/* composer */
#lrdm .lrdm-composer{ display:flex; align-items:center; gap:9px; padding:10px 12px; border-top:1px solid var(--lr-line); flex:0 0 auto; }
#lrdm .lrdm-composer input{ flex:1; min-width:0; background:var(--card); border:1px solid var(--lr-line); border-radius:22px; padding:11px 15px; color:var(--lr-ink); font-size:13.5px; outline:0; }
#lrdm .lrdm-composer input:focus{ border-color:color-mix(in srgb,var(--lr-crimson) 45%,var(--lr-line)); }
#lrdm .lrdm-send{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; background:var(--lr-crimson); color:#fff; font-size:15px; display:grid; place-items:center; }
#lrdm .lrdm-send:hover{ filter:brightness(1.08); }
html[dir=rtl] #lrdm .lrdm-send{ transform:scaleX(-1); }
@media(max-width:520px){ #lrdm .lrdm-card{ width:100vw; } }

/* ══ ROOM RECAP tab — session card · activity heat-map · timeline · analysis-only AGI summary ══ */
.lrd-recap{ display:flex; flex-direction:column; gap:12px; padding:12px 13px; overflow-y:auto; }
.lrd-rcard{ border:1px solid var(--lr-line); border-radius:14px; padding:12px 13px; background:linear-gradient(160deg,color-mix(in srgb,var(--lr-crimson) 7%,var(--card)),var(--card)); }
.lrd-rcard-h{ display:flex; align-items:baseline; gap:9px; }
.lrd-rcard-h b{ font-size:18px; font-weight:900; color:var(--lr-ink); letter-spacing:.3px; }
.lrd-rcard-h span{ font-size:12px; color:var(--lr-faint); font-weight:700; }
.lrd-rcard-st{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:11px; }
.lrd-rcard-st>div{ text-align:center; border:1px solid var(--lr-line); border-radius:10px; padding:7px 4px; }
.lrd-rcard-st b{ display:block; font-size:15px; font-weight:900; color:var(--lr-ink); }
.lrd-rcard-st span{ font-size:10px; color:var(--lr-faint); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.lrd-rsec-h{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--lr-ink2); margin-bottom:7px; }
.lrd-rgen{ margin-inline-start:auto; font-size:11px; font-weight:800; padding:5px 12px; border-radius:8px; cursor:pointer; color:var(--lr-crimson); border:1px solid color-mix(in srgb,var(--lr-crimson) 34%,transparent); background:color-mix(in srgb,var(--lr-crimson) 9%,transparent); }
.lrd-rgen:hover{ background:color-mix(in srgb,var(--lr-crimson) 16%,transparent); }
.lrd-rgen:disabled{ opacity:.5; cursor:default; }
/* activity heat-map */
.lrd-ract{ display:flex; flex-direction:column; gap:6px; }
.lrd-ractrow{ display:flex; align-items:center; gap:9px; }
.lrd-ravn{ display:flex; align-items:center; gap:6px; width:34%; min-width:0; }
.lrd-rav{ width:20px; height:20px; border-radius:50%; flex:0 0 auto; background-size:cover; background-position:center; }
.lrd-ravnm{ font-size:12px; font-weight:700; color:var(--lr-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrd-rbar{ flex:1; height:8px; border-radius:5px; background:color-mix(in srgb,var(--lr-ink2) 14%,transparent); overflow:hidden; }
.lrd-rbar i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,color-mix(in srgb,var(--lr-crimson) 60%,transparent),var(--lr-crimson)); }
.lrd-rn{ font-size:11px; font-weight:800; color:var(--lr-faint); min-width:20px; text-align:end; }
/* timeline */
.lrd-rtl{ display:flex; flex-direction:column; gap:2px; }
.lrd-rtlrow{ display:flex; align-items:flex-start; gap:8px; padding:5px 0; border-bottom:1px solid color-mix(in srgb,var(--lr-line) 55%,transparent); }
.lrd-rtlrow:last-child{ border-bottom:0; }
.lrd-rtlt{ font-size:10.5px; color:var(--lr-faint); flex:0 0 auto; width:38px; padding-top:1px; }
.lrd-rtli{ flex:0 0 auto; font-size:12px; }
.lrd-rtlx{ font-size:12px; color:var(--lr-ink2); min-width:0; line-height:1.4; }
.lrd-rtlx b{ color:var(--lr-ink); font-weight:800; }
/* AGI summary */
.lrd-rbul{ margin:0; padding-inline-start:18px; display:flex; flex-direction:column; gap:6px; }
.lrd-rbul li{ font-size:12.5px; color:var(--lr-ink); line-height:1.5; }
.lrd-rdisc{ margin-top:9px; font-size:10.5px; color:var(--lr-faint); font-style:italic; }
.lrd-rnote{ font-size:12px; color:var(--lr-faint); padding:6px 0; }
.lrd-rskel{ height:44px; border-radius:10px; background:var(--card); animation:lrdmpulse 1.2s ease-in-out infinite; }
.lr-info-owner{ font-size:12.5px; color:var(--lr-faint); margin-top:9px; }
/* channel-detail LIVE-now row (click to join the broadcast) + viewer count */
.lr-info-live{ display:flex; align-items:center; gap:8px; margin:8px 16px 2px; padding:9px 13px; border-radius:11px; cursor:pointer; font-size:13px; font-weight:700; color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-crimson) 8%,transparent); border:1px solid color-mix(in srgb,var(--lr-crimson) 30%,transparent); transition:.13s; }
.lr-info-live:hover{ background:color-mix(in srgb,var(--lr-crimson) 14%,transparent); }
.lr-info-live b{ margin-inline-start:auto; }
/* owner privacy + tokenized invite-link controls (channel detail) */
.lr-privbox{ margin:10px 16px 2px; padding:11px 13px; border:1px solid var(--lr-line); border-radius:12px; background:color-mix(in srgb,var(--lr-ink) 3%,transparent); }
.lr-privrow{ display:flex; align-items:center; gap:10px; }
.lr-privlbl{ font-size:13px; font-weight:700; color:var(--lr-ink); }
.lr-pvtoggle{ margin-inline-start:auto; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; border:1px solid var(--lr-line); background:transparent; color:var(--lr-ink); border-radius:999px; padding:5px 13px; }
.lr-pvtoggle.on{ border-color:color-mix(in srgb,var(--lr-crimson) 45%,var(--lr-line)); color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-crimson) 8%,transparent); }
.lr-privhint{ font-size:11.5px; color:var(--lr-faint); margin-top:7px; }
.lr-invrow{ display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.lr-invinp{ flex:1 1 160px; min-width:0; font:inherit; font-size:12px; border:1px solid var(--lr-line); border-radius:8px; padding:6px 9px; background:var(--lr-bg); color:var(--lr-ink); }
.lr-invbtn{ flex:0 0 auto; font:inherit; font-size:12px; font-weight:700; cursor:pointer; border:1px solid var(--lr-line); background:transparent; color:var(--lr-ink); border-radius:8px; padding:6px 11px; }
.lr-invbtn:hover{ border-color:var(--lr-crimson); color:var(--lr-crimson); }
.lr-invbtn.danger:hover{ border-color:var(--down); color:var(--down); }
.lr-info-owner b{ color:var(--lr-ink2); }
.lr-info-desc{ font-size:13.5px; line-height:1.65; color:var(--lr-ink2); white-space:pre-wrap;
  padding:13px 15px; border-radius:12px; background:var(--card); border:1px solid var(--lr-line); margin:4px 0 14px; }
.lr-info-sec{ margin:16px 0 8px; }
.lr-info-sec .hd{ font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--lr-faint); margin-bottom:8px; display:flex; gap:8px; align-items:center; }
.lr-info-sec .hd .ct{ background:var(--card); border:1px solid var(--lr-line); border-radius:999px; padding:0 7px; font-size:10px; }
.lr-roster{ display:flex; flex-direction:column; gap:2px; }
.lr-mrow{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; }
.lr-mrow:hover{ background:var(--card); }
.lr-mrow .av{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; flex:0 0 auto; }
.lr-mrow .nm{ font-size:13px; color:var(--lr-ink); font-weight:600; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lr-mrow .rl{ font-size:10px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--lr-faint);
  border:1px solid var(--lr-line); border-radius:6px; padding:1px 7px; }
.lr-mrow .rl.owner,.lr-mrow .rl.admin{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 30%, transparent); }
.lr-mrow .on{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.lr-info-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 8px; position:sticky; bottom:0;
  padding-top:12px; background:linear-gradient(0deg, var(--bg2) 70%, transparent); }
.lr-bigbtn{ flex:1 1 auto; min-width:140px; font-size:14.5px; font-weight:800; cursor:pointer; font-family:inherit;
  border-radius:12px; padding:13px; border:1px solid var(--lr-crimson); background:var(--lr-crimson); color:#fff; transition:.13s; }
.lr-bigbtn:hover{ filter:brightness(1.08); } .lr-bigbtn:disabled{ opacity:.55; cursor:default; }
.lr-bigbtn.ghost{ background:transparent; color:var(--lr-ink); border-color:var(--lr-line); flex:0 0 auto; min-width:0; }
.lr-bigbtn.ghost:hover{ border-color:color-mix(in srgb,var(--lr-crimson) 40%, var(--lr-line)); filter:none; }
.lr-bigbtn.danger{ background:transparent; color:var(--down); border-color:color-mix(in srgb,var(--down) 35%, var(--lr-line)); flex:0 0 auto; min-width:0; }
.lr-follow{ font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; border-radius:10px; padding:9px 20px;
  border:1px solid var(--lr-crimson); background:var(--lr-crimson); color:#fff; transition:.13s; }
.lr-follow.on{ background:transparent; color:var(--lr-ink2); border-color:var(--lr-line); }
.lr-follow:hover{ filter:brightness(1.08); }

/* ============================================================================
   2 · IN-ROOM DOCKS  (chart-first: right collab dock + bottom voice bar)
   ============================================================================ */
/* Shrink the chart toward the dock side so it never overlaps.
   NOTE: .pcstage is force-set direction:ltr (financial chart is always LTR), so its inline-end is
   ALWAYS the right edge — but the dock sits on the page's end side (LEFT in RTL). Key the margin to
   the PAGE dir (physical side) so the chart shrinks on the SAME side the dock covers, not the opposite. */
html[dir="rtl"] body.lr-docked .pcstage{ margin-left:var(--lr-dock); margin-right:0; }
html[dir="ltr"] body.lr-docked .pcstage{ margin-right:var(--lr-dock); margin-left:0; }

.lrd-dock{
  position:fixed; inset-block:64px 0; inset-inline-end:0; width:var(--lr-dock); z-index:180;
  display:none; flex-direction:column; background:var(--lr-glass);
  -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%);
  border-inline-start:1px solid var(--lr-line); box-shadow:-18px 0 50px -34px rgba(0,0,0,.7);
}
.lrd-dock.on{ display:flex; }
/* ══ THE DOCK FOLLOWS THE APP'S OWN THEME — it no longer ships a private palette ══
   WAS (measured by the design lens on the real page, not read off this sheet): this block redeclared 13 of the
   app's 14 theme tokens with LITERALS, unconditionally, in every theme — a second crimson (#e23b3b vs the app's
   light #d62f2f), a second green (#0f8a4d vs --up #13A496), a second red (#d23f39 vs --down #D60400), an AMBER
   --pcac where the app's is crimson, and a white --bg2 where the app's light surface is #f6f7fa. Light was the
   AUTHORED BASE and dark was a five-line exception, which is why the owner's screenshot 3 is a white panel that
   does not look like the rest of the product. This sheet had ZERO [data-theme="light"] rules.
   NOW: the dock declares NO colour of its own. Every --lr-* alias already resolves to an app token at :root
   (top of this file), so the dock inherits base.css light AND dark verbatim — one palette, one crimson, one
   direction pair, both themes designed rather than one designed and one patched.
   The video box (.lrd-vidgrid) is a body-level sibling and was never in this list; it is unaffected. */
.lrd-dock{ background:var(--bg2); -webkit-backdrop-filter:none; backdrop-filter:none; }
/* OFFLINE. The dock used to render a live roster and an enabled composer through a dropped socket, so the
   user could not tell a disconnect from a quiet room. The bar is deliberately plain and non-alarming — this
   is a normal, self-healing condition, not an error — and the composer is visibly inert while it lasts. */
.lrd-dock.lrd-offline::before{ content:attr(data-offline); display:block; flex:0 0 auto; text-align:center;
  padding:5px 10px; font-size:11.5px; font-weight:700; letter-spacing:.2px;
  color:var(--lr-ink2); background:var(--card2); border-bottom:1px solid var(--lr-line); }
.lrd-dock.lrd-offline .lrd-comp{ opacity:.55; }
.lrd-dock.lrd-offline .lrd-comp input,.lrd-dock.lrd-offline .lrd-comp button{ cursor:not-allowed; }
/* the header avatar's initial fallback is white-on-crimson in both themes — unchanged on purpose */
/* maximized dock (z-1100) must not occlude the live video tiles — lift the grid above it while both are up */
body:has(.lrd-dock.lrd-dock-max) .lrd-vidgrid{ z-index:1101; }
/* the floating/maximized panel's elevation: one rule, theme-following (was a light literal #e9ebef border in
   EVERY theme plus a dark-only override two rules above it) */
.lrd-dock.lrd-dock-free, .lrd-dock.lrd-dock-max{ box-shadow:var(--shadow), 0 0 0 1px color-mix(in srgb,var(--lr-line) 70%, transparent); border-color:var(--lr-line); }
.lrd-head{ flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:11px 13px; border-bottom:1px solid var(--lr-line); }
/* channel/group avatar in the dock header (room_info.image, with an initial fallback) */
.lrd-hav{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; overflow:hidden; border:1px solid var(--lr-line);
  background:linear-gradient(150deg,var(--lr-crimson,#c81e3a),#191e2c); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; line-height:1; color:#fff; }
/* dock as a free, mouse-controlled window — drag header to move, drag the inner edge to resize width */
.lrd-head-drag{ cursor:move; touch-action:none; user-select:none; -webkit-user-select:none; }
.lrd-dock.lrd-dock-free{ border:1px solid var(--lr-line); border-radius:16px; overflow:hidden; box-shadow:0 28px 70px -28px rgba(0,0,0,.8); }
/* MAXIMIZE — near-fullscreen floating dock (clears the top toolbar); the #lrdMax button toggles it, restore returns
   to docked/free. !important beats BOTH the docked inset and the free-window inline left/top/width/height geometry. */
.lrd-dock.lrd-dock-max{ inset:64px 14px 14px 14px !important; width:auto !important; max-width:none !important; height:auto !important;
  border:1px solid var(--lr-line); border-radius:16px; overflow:hidden; box-shadow:0 30px 90px -30px rgba(0,0,0,.85); z-index:1100; }
@media(max-width:760px){ .lrd-dock.lrd-dock-max{ inset:0 !important; border-radius:0; } }
/* when the Live-Rooms hub (z-1200) is open, hide the MAXIMIZED dock (z-1100) beneath it — the hub is click-through
   except its panel, so a stray click outside the panel must not land on the max-dock underneath (mirrors the FAB hide) */
body:has(#lrhub.on) .lrd-dock.lrd-dock-max{ display:none !important; }
/* dock = full mouse+touch window: 8-direction resize handles (a resize frees the dock); header controls stay above them */
.lrd-dock .lrd-head button{ position:relative; z-index:50; }
.lrd-dock .lrd-rz{ position:absolute; z-index:40; touch-action:none; }
.lrd-dock .lrd-rz-n{ top:0; left:18px; right:18px; height:7px; cursor:ns-resize; }
.lrd-dock .lrd-rz-s{ bottom:0; left:18px; right:18px; height:8px; cursor:ns-resize; }
.lrd-dock .lrd-rz-e{ right:0; top:18px; bottom:18px; width:6px; cursor:ew-resize; }
.lrd-dock .lrd-rz-w{ left:0; top:18px; bottom:18px; width:6px; cursor:ew-resize; }
.lrd-dock .lrd-rz-se{ right:0; bottom:0; width:20px; height:20px; cursor:nwse-resize; }
.lrd-dock .lrd-rz-sw{ left:0; bottom:0; width:20px; height:20px; cursor:nesw-resize; }
.lrd-dock .lrd-rz-ne{ right:0; top:0; width:20px; height:20px; cursor:nesw-resize; }
.lrd-dock .lrd-rz-nw{ left:0; top:0; width:20px; height:20px; cursor:nwse-resize; }
.lrd-dock.lrd-dock-max .lrd-rz{ display:none; }
.lrd-head{ flex-wrap:wrap; row-gap:6px; }
.lrd-head>div[style*="flex"],.lrd-head .lrd-hnm{ flex:1 1 140px!important; min-width:0; }
@media (max-width:560px){ .lrd-head>div[style*="flex"],.lrd-head .lrd-hnm{ flex:1 1 calc(100% - 47px)!important; } }   /* MEASURED: at a 360px dock the avatar + six 30px buttons + gaps left the name 53px. Below 560 the buttons wrap to their own row and the name keeps the rest of line 1 (47px = avatar 38 + gap 9). */   /* the room-name column shares one flex row with 6-7 sibling buttons; with flex-basis 0 it computed to 41px on desktop, 20px on a phone and 0px on a tablet — the room's own name had nowhere to render */
/* HEAD-GROUP-01 — the header buttons are ONE group in ONE flex child, so they cannot SPLIT across rows.
   The rule above is keyed to the VIEWPORT, but the header lives in the dock, whose width is independent of it:
   MEASURED on the real page at a 768px viewport the dock is 348px wide, the 560px rule did not apply, and the six
   buttons broke 2 / 4 across two rows with the room name wedged between them. Grouping removes the breakpoint
   from the problem — the group either fits beside the name or takes its own row, whole, at every width.
   flex-wrap inside the group is the honest overflow: with the 7th (Ask-to-present) button a 375px dock genuinely
   cannot hold avatar + name + 7x44px targets in two rows, and Art.9 forbids shrinking a target below the coarse
   floor or hiding controls behind a silent scroller to make it look tidier. */
/* HEAD-GROUP-02 — `flex:0 0 auto` sized this group to MAX-CONTENT, so its own `flex-wrap:wrap` could never
   fire: the group was 362px wide inside a 321px header box and #lrdLeave was MEASURED at x=-28 (16px of 44px
   visible, centre outside the viewport, document.elementFromPoint(centre) === null) at a 768px viewport under a
   verified coarse pointer, in all six theme×language cells. Art.9: a control that stops responding without
   saying so is itself the defect. `flex:0 1 auto; min-width:0` lets the group shrink to the line it is on,
   which is the precondition its own flex-wrap needs — so it wraps honestly instead of clipping, at ANY dock
   width, and it stays correct even if a future role adds an eighth button. */
.lrd-head .lrd-hbtns{ display:flex; align-items:center; gap:9px; flex:0 1 auto; min-width:0; margin-inline-start:auto;
  flex-wrap:wrap; justify-content:flex-end; row-gap:6px; }
.lrd-head .lrd-hb{ flex:0 0 auto; }                                   /* the buttons are fixed 30x30 (38 on touch) but declared no flex, so they were free to steal the name's space */
.lrd-head .lrd-sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrd-head .lrd-rn{ font-size:13.5px; font-weight:800; color:var(--lr-ink); line-height:1.2; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrd-head .lrd-sub{ font-size:10.5px; color:var(--lr-faint); }
.lrd-head .lrd-hb{ width:30px; height:30px; border-radius:8px; border:1px solid var(--lr-line); background:var(--card);
  color:var(--lr-ink2); cursor:pointer; display:grid; place-items:center; font-size:13px; }
.lrd-head .lrd-hb:hover{ color:var(--lr-ink); border-color:color-mix(in srgb,var(--lr-crimson) 40%, var(--lr-line)); }
.lrd-head .lrd-hb.danger:hover{ border-color:var(--down); color:var(--down); }
[dir="rtl"] #lrdBack svg{ transform:scaleX(-1); }   /* the "back" chevron points the reading-direction way in RTL */

.lrd-tabs{ flex:0 0 auto; display:flex; gap:2px; padding:7px 9px; border-bottom:1px solid var(--lr-line);
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
  /* seven tabs do not fit 375px. A bare scrollbar is not an affordance on a phone — it is invisible until
     you already know to swipe. The end fade says "there is more", the same way .lrd-emtabs already does. */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent); }
.lrd-tabs::-webkit-scrollbar{ display:none; }
[dir="rtl"] .lrd-tabs{ -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent);
                               mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent); }
.lrd-tab{ flex:0 0 auto; padding:6px 11px; border-radius:8px; border:1px solid transparent; background:none;
  color:var(--lr-ink2); font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; gap:5px; align-items:center; }
.lrd-tab:hover{ background:var(--card); }
.lrd-tab.on{ background:color-mix(in srgb,var(--lr-crimson) 14%, transparent); color:var(--lr-ink);
  border-color:color-mix(in srgb,var(--lr-crimson) 38%, transparent); }
.lrd-tab .lrd-tc{ font-size:10px; color:var(--lr-faint); }
.lrd-tab svg{ width:15px; height:15px; flex:0 0 auto; }
.lrd-head .lrd-hb svg{ width:15px; height:15px; }
.lrd-body{ flex:1 1 auto; overflow-y:auto; padding:12px 13px; min-height:0; }
.lrd-foot{ flex:0 0 auto; border-top:1px solid var(--lr-line); padding:9px 11px; }

/* members tab */
.lrd-mem{ display:flex; flex-direction:column; gap:3px; }
.lrd-m{ display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:9px; }
.lrd-m:hover{ background:var(--card); }
.lrd-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.lrd-mn{ font-size:13px; color:var(--lr-ink); font-weight:600; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrd-role{ font-size:10.5px; font-weight:800; letter-spacing:.3px; color:var(--lr-faint); text-transform:uppercase; }
.lrd-rolesel{ font-size:11px; background:var(--bg); border:1px solid var(--lr-line); border-radius:7px;
  color:var(--lr-ink2); padding:3px 6px; font-family:inherit; }
/* channel/group dashboard — REAL room metrics (owner/admin); honest, no fabricated fields */
.lrd-dash{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:9px; }
.lrd-dash:empty{ display:none; }
.lrd-stat{ background:var(--card); border:1px solid var(--lr-line); border-radius:9px; padding:8px 6px; text-align:center; }
.lrd-stat b{ display:block; font-size:16px; font-weight:800; color:var(--lr-ink); font-variant-numeric:tabular-nums; }
.lrd-stat span{ font-size:9.5px; font-weight:700; color:var(--lr-faint); text-transform:uppercase; letter-spacing:.3px; }
/* invite-only group — pending join-requests (owner Approve / Deny) */
.lrd-reqs:empty{ display:none; }
.lrd-reqs{ margin-bottom:9px; border:1px solid color-mix(in srgb,var(--lr-crimson) 30%, var(--lr-line)); border-radius:11px; padding:9px 10px; background:color-mix(in srgb,var(--lr-crimson) 7%, transparent); }
.lrd-reqh{ font-size:11px; font-weight:800; color:var(--lr-ink2); text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.lrd-reqn{ background:var(--lr-crimson); color:#fff; border-radius:999px; min-width:16px; height:16px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; }
.lrd-req{ display:flex; align-items:center; gap:7px; padding:4px 0; }
.lrd-reqnm{ flex:1 1 auto; min-width:0; font-size:12.5px; font-weight:600; color:var(--lr-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrd-reqbtn{ flex:0 0 auto; border:1px solid var(--lr-line); background:var(--card); color:var(--lr-ink2); border-radius:8px; padding:5px 11px; font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer; transition:.13s; }
.lrd-reqbtn.ok:hover{ color:var(--up); border-color:color-mix(in srgb,var(--up) 40%, var(--lr-line)); }
.lrd-reqbtn.no:hover{ color:var(--down); border-color:color-mix(in srgb,var(--down) 40%, var(--lr-line)); }
.lrd-reqbtn:disabled{ opacity:.5; cursor:default; }
/* owner moderation — room lock bar + per-member action buttons (status colors match the dock convention) */
.lrd-modbar{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:8px; }
/* raise-hand queue (owner sees who wants to speak) + per-member raised indicator */
.lrd-handq{ margin-bottom:9px; border:1px solid color-mix(in srgb,var(--lr-crimson) 30%,var(--lr-line)); border-radius:11px; padding:8px 10px; background:color-mix(in srgb,var(--lr-crimson) 6%,transparent); }
.lrd-handqh{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; color:var(--lr-ink2); margin-bottom:6px; }
.lrd-handqh svg{ width:14px; height:14px; }
.lrd-handqh b{ background:var(--lr-crimson); color:#fff; border-radius:999px; min-width:16px; height:16px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; margin-inline-start:auto; }
.lrd-handrow{ display:flex; align-items:center; gap:7px; padding:4px 0; }
.lrd-handnm{ flex:1 1 auto; min-width:0; font-size:12.5px; font-weight:600; color:var(--lr-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrd-handgrant{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; border:1px solid var(--lr-crimson); background:var(--lr-crimson); color:#fff; border-radius:8px; padding:5px 11px; }
.lrd-handgrant svg{ width:14px; height:14px; }
.lrd-handgrant:hover{ filter:brightness(1.07); }
.lrd-handup{ display:inline-flex; color:var(--lr-crimson); margin-inline-start:5px; }
.lrd-handup svg{ width:14px; height:14px; }
.lrd-m.raised{ background:color-mix(in srgb,var(--lr-crimson) 5%,transparent); }
.lrd-head .lrd-hb#lrdHand.on,.lrd-head .lrd-hb.on{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 45%,var(--lr-line)); background:color-mix(in srgb,var(--lr-crimson) 10%,transparent); }
/* GROUP: LIVE badge + invite-link bar */
.lrd-livebadge{ display:inline-block; vertical-align:middle; margin-inline-start:6px; font-size:9px; font-weight:800; letter-spacing:.4px; color:#fff; background:var(--lr-crimson); border-radius:4px; padding:1px 5px; animation:lrdLivePulse 2s ease-in-out infinite; }
@keyframes lrdLivePulse{ 0%,100%{ opacity:1 } 50%{ opacity:.5 } }
.lrd-invbar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.lrd-invinp{ flex:1 1 150px; min-width:0; font:inherit; font-size:11.5px; border:1px solid var(--lr-line); border-radius:8px; padding:6px 9px; background:var(--lr-bg); color:var(--lr-ink); }
.lrd-invbtn{ flex:0 0 auto; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; border:1px solid var(--lr-line); background:transparent; color:var(--lr-ink); border-radius:8px; padding:6px 10px; }
.lrd-invbtn:hover{ border-color:var(--lr-crimson); color:var(--lr-crimson); }
.lrd-invbtn.danger:hover{ border-color:var(--down); color:var(--down); }
.lrd-lockbtn{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12px; font-weight:700;
  background:var(--card); border:1px solid var(--lr-line); border-radius:9px; padding:7px 11px; color:var(--lr-ink2); cursor:pointer; transition:.13s; }
.lrd-lockbtn svg{ width:15px; height:15px; }
.lrd-lockbtn:hover{ color:var(--lr-ink); border-color:color-mix(in srgb,var(--lr-crimson) 40%, var(--lr-line)); }
.lrd-lockbtn.on{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 45%, var(--lr-line)); background:color-mix(in srgb,var(--lr-crimson) 9%, transparent); }
.lrd-modhint{ font-size:10.5px; font-weight:700; color:var(--lr-faint); }
.lrd-mactions{ display:inline-flex; align-items:center; gap:5px; margin-inline-start:auto; flex:0 0 auto; }
.lrd-mbtn{ width:27px; height:27px; border-radius:7px; border:1px solid var(--lr-line); background:var(--card);
  color:var(--lr-ink2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; transition:.13s; }
.lrd-mbtn svg{ width:14px; height:14px; }
.lrd-mbtn:hover{ color:var(--lr-ink); border-color:color-mix(in srgb,var(--lr-crimson) 40%, var(--lr-line)); }
.lrd-mbtn.on{ color:var(--up); border-color:color-mix(in srgb,var(--up) 38%, var(--lr-line)); background:color-mix(in srgb,var(--up) 10%, transparent); }   /* granted = active (dock 'live' green) */
.lrd-mbtn.warn:hover{ color:var(--lr-warn); border-color:color-mix(in srgb,var(--lr-warn) 45%, var(--lr-line)); }                                /* kick = amber caution */
.lrd-mbtn.danger:hover{ color:var(--down); border-color:color-mix(in srgb,var(--down) 45%, var(--lr-line)); }                                              /* ban = danger (dock convention) */
/* session replay PLAYER — timeline scrub over the real event log */
.lrd-rp-note{ font-size:10.5px; color:var(--lr-faint); line-height:1.5; margin-bottom:8px; }
.lrd-rp{ display:flex; flex-direction:column; gap:8px; }
.lrd-rp-feed{ max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:3px; }
.lrd-rpe{ font-size:12px; line-height:1.5; color:var(--lr-ink2); padding:2px 0; }
.lrd-rpe b{ color:var(--lr-ink); font-weight:700; }
.lrd-rpt{ color:var(--lr-faint); font-size:10.5px; margin-inline-end:5px; }
.lrd-rpb{ color:var(--lr-ink2); }
.lrd-rptag{ display:inline-block; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; padding:1px 6px; border-radius:999px; border:1px solid var(--lr-line); color:var(--lr-faint); }
.lrd-rptag.draw{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 35%,var(--lr-line)); }
.lrd-rptag.note{ color:var(--lr-warn); }
.lrd-rptag.join{ color:var(--up); }
.lrd-rptag.leave{ color:var(--down); }
.lrd-rp-ctl{ display:flex; align-items:center; gap:9px; padding-top:6px; border-top:1px solid var(--lr-line); }
.lrd-rp-pp{ width:34px; height:34px; flex:0 0 auto; border-radius:9px; border:1px solid var(--lr-crimson); background:var(--lr-crimson); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.lrd-rp-pp svg{ width:16px; height:16px; }
.lrd-rp-scrub{ flex:1 1 auto; min-width:0; accent-color:var(--lr-crimson); cursor:pointer; }
.lrd-rp-t{ font-size:10.5px; color:var(--lr-faint); flex:0 0 auto; white-space:nowrap; }
.lrd-rp-spd{ flex:0 0 auto; border:1px solid var(--lr-line); background:var(--card); color:var(--lr-ink2); border-radius:8px; padding:5px 9px; font-family:inherit; font-size:11px; font-weight:800; cursor:pointer; }

/* chat */
.lrd-feed{ display:flex; flex-direction:column; gap:8px; }
.lrd-msg{ font-size:12.5px; line-height:1.5; color:var(--lr-ink); }
.lrd-msg b{ font-weight:800; margin-inline-end:5px; }
.lrd-ev{ font-size:11px; color:var(--lr-faint); }
.lrd-compose{ display:flex; gap:7px; }
.lrd-compose input{ flex:1; background:var(--bg); border:1px solid var(--lr-line); border-radius:9px;
  padding:9px 11px; color:var(--lr-ink); font-size:13px; font-family:inherit; outline:0; }
.lrd-compose input:focus{ border-color:color-mix(in srgb,var(--lr-crimson) 50%, var(--lr-line)); }
.lrd-send{ background:var(--lr-crimson); color:#fff; border:0; border-radius:9px; padding:0 14px; font-weight:800; cursor:pointer; font-family:inherit; }
/* chat IMAGE attachment: attach button, pending preview, message thumbnail, fullscreen zoom */
.lrd-compose{ flex-direction:column; align-items:stretch; }   /* was a single row → now: preview row above, controls row below */
.lrd-crow{ display:flex; gap:7px; align-items:center; }
.lrd-attach{ flex:0 0 auto; width:36px; height:36px; border-radius:9px; border:1px solid var(--lr-line); background:var(--bg); color:var(--lr-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .15s,border-color .15s; }
.lrd-attach:hover{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 50%,var(--lr-line)); }
.lrd-cprevrow:empty{ display:none; }
.lrd-cprev{ position:relative; display:inline-block; width:62px; height:62px; border-radius:9px; border:1px solid var(--lr-line); background-size:cover; background-position:center; }
.lrd-cprev button{ position:absolute; top:-7px; inset-inline-end:-7px; width:20px; height:20px; border-radius:50%; border:0; background:var(--lr-crimson); color:#fff; font-size:11px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lrd-msg-img{ display:block; max-width:200px; max-height:210px; margin-top:5px; border-radius:10px; border:1px solid var(--lr-line); cursor:zoom-in; object-fit:cover; }
.lrd-imgzoom{ position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center; cursor:zoom-out; padding:24px; }
.lrd-imgzoom img{ max-width:96vw; max-height:92vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6); }

/* AGI */
.lrd-aibtns{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.lrd-aib{ font-size:11.5px; font-weight:700; color:var(--lr-ink2); background:var(--card); border:1px solid var(--lr-line);
  border-radius:8px; padding:6px 11px; cursor:pointer; font-family:inherit; }
.lrd-aib:hover{ border-color:color-mix(in srgb,var(--lr-crimson) 40%, var(--lr-line)); color:var(--lr-ink); }
.lrd-aiout{ font-size:12.5px; line-height:1.6; color:var(--lr-ink); white-space:pre-wrap; }
.lrd-ta{ width:100%; min-height:120px; resize:vertical; background:var(--bg); border:1px solid var(--lr-line);
  border-radius:10px; padding:11px; color:var(--lr-ink); font-size:13px; font-family:inherit; outline:0; }

/* bottom voice bar */
.lrd-voicebar{ position:fixed; inset-inline:18px var(--lr-dock); bottom:14px; z-index:182; display:none;
  align-items:center; gap:12px; padding:8px 14px; border-radius:14px; background:var(--lr-glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid var(--lr-line);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.7); }
.lrd-voicebar.on{ display:flex; }
.lrd-vbtn{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; cursor:pointer; font-family:inherit;
  border-radius:10px; padding:8px 14px; border:1px solid var(--lr-line); background:var(--card); color:var(--lr-ink); }
.lrd-vbtn svg{ width:15px; height:15px; flex:0 0 auto; }
.lrd-vbtn:disabled{ opacity:.5; cursor:default; }
.lrd-vbtn.join{ background:var(--lr-crimson); color:#fff; border-color:var(--lr-crimson); }
.lrd-vbtn.muted{ color:var(--down); border-color:color-mix(in srgb,var(--down) 40%, var(--lr-line)); }
.lrd-vspk{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--lr-faint); }
.lrd-vspk .spk{ display:inline-flex; align-items:center; gap:4px; color:var(--lr-ink2); font-weight:700; }
.lrd-vspk .spk.live{ color:var(--up); }
.lrd-vnote{ margin-inline-start:auto; font-size:10.5px; color:var(--lr-faint); }

/* P2P camera tiles — a floating strip above the voice bar (self + peers with a live video track) */
/* video/screen box — draggable + resizable floating panel (full mouse control; geometry persisted) */
.lrd-vidgrid{ position:fixed; inset-inline:auto var(--lr-dock); bottom:62px; z-index:181; display:none; flex-direction:column;
  width:236px; max-width:94vw; max-height:74vh; background:var(--bg2); border:1px solid var(--lr-line); border-radius:14px;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.8); overflow:hidden; }
.lrd-vidgrid.on{ display:flex; }
.lrd-vidgrid.lrd-vgfree{ inset:auto; inset-inline:auto; bottom:auto; }   /* free mode → inline left/top/width/height win (logical reset so it clears the base inset-inline anchor in RTL too) */
.lrd-vghead{ display:flex; align-items:center; gap:7px; padding:6px 10px; cursor:move; flex:0 0 auto; touch-action:none;
  user-select:none; -webkit-user-select:none; background:var(--card); border-bottom:1px solid var(--lr-line); }
.lrd-vgdots{ width:16px; height:9px; flex:0 0 auto; color:var(--lr-faint); opacity:.6;
  background:radial-gradient(currentColor 1.1px, transparent 1.4px) 0 0/5px 4px; }
.lrd-vgt{ font-size:10.5px; font-weight:800; color:var(--lr-ink2); text-transform:uppercase; letter-spacing:.4px; }
.lrd-vgtiles{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-wrap:wrap; gap:6px; padding:6px; align-content:flex-start; }
.lrd-vgrip{ position:absolute; inset-inline-end:2px; inset-block-end:2px; width:15px; height:15px; cursor:nwse-resize; touch-action:none; opacity:.6;
  background:linear-gradient(135deg, transparent 45%, var(--lr-faint) 45% 55%, transparent 55% 70%, var(--lr-faint) 70% 80%, transparent 80%); }
.lrd-vtile{ position:relative; flex:1 1 150px; min-width:118px; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:#0b0e16;
  border:1px solid var(--lr-line); }
.lrd-vtile video{ width:100%; height:100%; object-fit:cover; display:block; background:#0b0e16; }
.lrd-vtile.self video{ transform:scaleX(-1); }   /* mirror your own preview */
.lrd-vname{ position:absolute; inset-inline-start:6px; inset-block-end:6px; font-size:11px; font-weight:800; color:#fff;
  background:rgba(0,0,0,.55); border-radius:6px; padding:2px 8px; max-width:85%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrd-vbtn.cam.on{ background:var(--lr-crimson); color:#fff; border-color:var(--lr-crimson); }
.lrd-vbtn.scr.on{ background:var(--lr-crimson); color:#fff; border-color:var(--lr-crimson); }
.lrd-vbtn.join.on{ background:var(--lr-crimson); color:#fff; border-color:var(--lr-crimson); }
/* media controls strip — lives INSIDE the dock (under the tabs), always visible, no chart-widget collision.
   WAS: flex-wrap + a crimson-5% wash. MEASURED on the real page: the wash rendered #fdf5f5 over 37.6% of the
   strip in light theme (a pink slab tuned against #12151c and never re-tuned against white — the owner circled
   it), and the wrap piled 7 buttons of 66-140px into FOUR ragged rows even on a 1536px screen, ~177px of a
   796px panel spent before the first message. NOW: one row that scrolls, exactly like .lrd-tabs above it —
   same end-fade affordance, same RTL flip, same hidden scrollbar — on a transparent surface. */
.lrd-media{ flex:0 0 auto; display:flex; align-items:center; gap:7px; flex-wrap:nowrap; padding:9px 12px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--lr-line); background:transparent;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent); }
.lrd-media::-webkit-scrollbar{ display:none; }
[dir="rtl"] .lrd-media{ -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent);
                                mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent); }
.lrd-media:empty{ display:none; }
/* ART.15 ROLLBACK for the one-row strip, tested live: `PC.lrMediaOneRow=false` re-wraps it exactly as before,
   no deploy, no reload. The trade is real and belongs to the owner: one row costs a swipe to reach the tail
   (MEASURED scrollWidth 909 AR / 784 EN against clientWidth 347), wrapping costs ~120px of the chat area. */
.lrd-media.lrd-media-wrap{ flex-wrap:wrap; overflow-x:visible;
  -webkit-mask-image:none !important; mask-image:none !important; }
.lrd-media .lrd-vbtn{ font-size:12px; padding:7px 12px; flex:0 0 auto; white-space:nowrap; }
.lrd-vmeta{ font-size:10.5px; color:var(--lr-faint); margin-inline-start:auto; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.lrd-media .lrd-vmeta{ margin-inline-start:5px; flex:0 0 auto; }   /* auto-margin inside an overflowing nowrap track scrolls the content out of reach */
.lrd-vmeta svg{ width:13px; height:13px; flex:0 0 auto; }   /* the "owner-granted" lock had NO size → an unconstrained viewBox SVG rendered huge */
/* SHARE / PUBLISH MY CHART — the live-broadcast chip in the media bar (owner/presenter). Crimson = live. */
.lrd-vbtn.lrd-share{ background:var(--lr-crimson); color:#fff; border-color:var(--lr-crimson); }
.lrd-vbtn.lrd-share:hover{ filter:brightness(1.07); }
.lrd-vbtn.lrd-share .lrd-share-n{ background:rgba(255,255,255,.24); border-radius:999px; padding:1px 7px; font-size:11px; font-weight:800; }
.lrd-vbtn.lrd-share svg{ animation:lrSharePulse 2s ease-in-out infinite; }
@keyframes lrSharePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }

/* reopen pill — shows when a room is active but the dock is collapsed. Anchored TOP on the dock's
   side (where the panel minimizes to), clear of the bottom-left support widget + the right nav rail. */
.lrd-fab{ position:fixed; inset-inline-end:12px; inset-block-start:70px; z-index:185; display:none; align-items:center; gap:8px;
  max-width:240px; background:var(--lr-crimson); color:#fff; border:0; border-radius:999px; padding:10px 16px; font-weight:800;
  font-size:13px; cursor:grab; font-family:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  touch-action:none; user-select:none; -webkit-user-select:none;     /* draggable: don't pan-scroll / select while dragging */
  box-shadow:0 14px 34px -16px color-mix(in srgb,var(--lr-crimson) 80%, transparent); animation:lrdFabIn .18s ease; }
.lrd-fab.on{ display:inline-flex; }
.lrd-fab.lrd-drag{ cursor:grabbing; animation:none; box-shadow:0 20px 46px -14px color-mix(in srgb,var(--lr-crimson) 88%, transparent); }
.lrd-fab svg{ width:16px; height:16px; flex:0 0 auto; }
.lrd-fab span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
@keyframes lrdFabIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (max-width:760px){ .lrd-fab{ inset-block-start:auto; bottom:calc(var(--lr-sheet) + 12px); } }   /* was a flat 74px — buried under the sheet */
body:not(.lr-docked) .lrd-fab{ bottom:74px; }   /* dock closed → no sheet to clear */

/* ============================================================================
   2.5 · OMEGA DESIGN ELEVATION  (premium member identity · speaking rings ·
        dock chrome · focus + scrollbars). Brand law: crimson = signature accent,
        up-green = presence ONLY. Reduced-motion + RTL safe (logical properties).
   ============================================================================ */
/* dock chrome — a crimson hairline crown + a richer header wash + a soft open-fade */
.lrd-dock::before{ content:""; position:absolute; inset-inline:0; top:0; height:2px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--lr-crimson), transparent); opacity:.65; }
.lrd-dock.on:not(.lrd-dock-free){ animation:lrdDockIn .22s cubic-bezier(.2,.7,.3,1); }
@keyframes lrdDockIn{ from{ opacity:0; } to{ opacity:1; } }
/* header band. WAS a crimson-6% wash: measured #fffefe / #fef9f9 / #fef8f8 / #fef7f7 on white (visible pink,
   the owner's screenshot 3) and effectively invisible on dark (#18161d / #19161d). A tint calibrated for one
   theme is not a design for two. NOW a real surface token — distinct from the panel in BOTH themes — and the
   brand stays where it reads at every luminance: the crimson hairline crown on .lrd-dock::before.
   --card (not --card2): the sub-line under the room name is 10.5px --muted, and base.css:29 records --muted as
   tuned to 4.86:1 ON WHITE. Against --card2 (#f3f5f8) the FIRST version of this fix measured that line at
   4.44:1 from real pixels — under the 4.5:1 small-text floor, i.e. my own fix would have shipped a new
   contrast defect. On --card it is the app's own documented value, and a white bar over the slightly grey
   panel is the separation the header needed anyway. */
.lrd-head{ background:var(--card); }
.lrd-hav{ position:relative; box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 10%, transparent),
  0 4px 14px -6px color-mix(in srgb,var(--lr-crimson) 60%, transparent); }
.lrd-rn{ letter-spacing:-.2px; }

/* tab bar — animated active underline (TradingView-grade) on top of the pill */
.lrd-tab{ position:relative; transition:background .14s, color .14s; }
.lrd-tab.on::after{ content:""; position:absolute; inset-inline:11px; bottom:2px; height:2px; border-radius:2px;   /* was -8px: outside the padding box, so .lrd-tabs' overflow-x:auto clipped the band in half. .lrd-tab.on has background:none!important, so there is no pill fill to collide with */
  background:var(--lr-crimson); box-shadow:0 0 8px color-mix(in srgb,var(--lr-crimson) 60%, transparent); }
.lrd-tabs{ position:relative; }
.lrd-tc{ background:color-mix(in srgb,var(--lr-crimson) 16%, transparent); color:var(--lr-ink2)!important;
  border-radius:999px; min-width:16px; height:15px; padding:0 5px; display:inline-flex; align-items:center;
  justify-content:center; font-weight:800; font-size:9.5px; }

/* member rows — avatar identity, presence dot, speaking ring, role color, you-tag */
.lrd-m{ gap:10px; padding:6px 8px; transition:background .13s; }
.lrd-m.me{ background:color-mix(in srgb,var(--lr-crimson) 7%, transparent); }
.lrd-mav{ position:relative; flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-size:12.5px; font-weight:800; color:#fff; line-height:1; user-select:none;
  background:linear-gradient(150deg, var(--avc,#5a6273), color-mix(in srgb, var(--avc,#5a6273) 50%, #000));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 13%, transparent); }
.lrd-mav-img{ background-size:cover; background-position:center; background-repeat:no-repeat; color:transparent; }   /* real PROFILE PHOTO fills the avatar (overrides the initial gradient) — applies to .lrd-mav (members) + .lrm-av (chat) */
.lrd-mav::before{ content:""; position:absolute; inset-block-end:-1px; inset-inline-end:-1px; width:9px; height:9px;
  border-radius:50%; background:var(--up); border:2px solid var(--bg2); z-index:2; }   /* online presence (green = presence, allowed) */
.lrd-mav.off{ filter:grayscale(.65); opacity:.55; }
.lrd-mav.off::before{ background:var(--lr-faint); }
.lrd-mav::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid transparent; transition:border-color .18s; pointer-events:none; }
.lrd-mav.speaking::after{ border-color:var(--lr-crimson);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--lr-crimson) 28%, transparent); animation:lrdSpeak 1s ease-in-out infinite; }
@keyframes lrdSpeak{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.05); opacity:1; } }
.lrd-youtag{ font-style:normal; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-crimson) 12%, transparent);
  border:1px solid color-mix(in srgb,var(--lr-crimson) 30%, transparent); border-radius:5px; padding:1px 5px;
  margin-inline-start:6px; vertical-align:middle; }
.lrd-role.role-owner,.lrd-role.role-admin{ color:var(--lr-crimson); }
.lrd-role.role-moderator{ color:var(--lr-warn); }
.lrd-role.role-analyst,.lrd-role.role-mentor,.lrd-role.role-trader{ color:var(--lr-ink2); }

/* ══ participants header (always-on): PARTICIPANTS (N) · online ══ */
.lrd-memhd{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 8px 6px; }
.lrd-memhd-t{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:var(--lr-faint); }
.lrd-memhd-t svg{ width:15px; height:15px; }
.lrd-memhd-t b{ color:var(--lr-ink); font-size:12px; }
.lrd-memhd-on{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--up); white-space:nowrap; }
.lrd-memhd-on i{ width:6px; height:6px; border-radius:50%; background:var(--up); box-shadow:0 0 6px color-mix(in srgb,var(--up) 70%,transparent); }
/* ══ WORLD-CLASS PARTICIPANT ROW — cursor-colour pointer · role pills · live status ══ */
.lrd-mid{ display:inline-flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; }
.lrd-mid .lrd-mn{ flex:0 1 auto; }
/* the signature: each participant's LIVE cursor colour as a pointer glyph */
.lrd-mcur{ display:inline-flex; flex:0 0 auto; line-height:0; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.lrd-mcur svg{ width:12px; height:12px; display:block; }
/* real per-member status chips (mic/cam/draw) — muted, crimson pulse when speaking, green when streaming */
.lrd-mstat{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.lrd-mstat:empty{ display:none; }
.lrd-mst{ display:inline-flex; width:20px; height:20px; border-radius:6px; align-items:center; justify-content:center;
  color:var(--lr-faint); background:color-mix(in srgb,var(--lr-line) 45%,transparent); }
.lrd-mst svg{ width:12px; height:12px; }
.lrd-mst.on{ color:var(--up); background:color-mix(in srgb,var(--up) 12%,transparent); }
.lrd-mst.spk{ color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-crimson) 14%,transparent); animation:lrdSpkPulse 1.1s ease-in-out infinite; }
@keyframes lrdSpkPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
/* role → proper coloured PILL (mockup: Mentor crimson) */
.lrd-rolebadge{ flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  border-radius:999px; padding:2px 8px; border:1px solid transparent; white-space:nowrap;
  color:var(--lr-faint); background:color-mix(in srgb,var(--lr-line) 40%,transparent); }
.lrd-rolebadge.role-owner,.lrd-rolebadge.role-admin,.lrd-rolebadge.role-mentor{
  color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-crimson) 12%,transparent);
  border-color:color-mix(in srgb,var(--lr-crimson) 30%,transparent); }
.lrd-rolebadge.role-moderator{ color:var(--lr-warn); background:color-mix(in srgb,var(--lr-warn) 13%,transparent);
  border-color:color-mix(in srgb,var(--lr-warn) 32%,transparent); }
.lrd-rolebadge.role-analyst{ color:#3aa0ff; background:color-mix(in srgb,#3aa0ff 12%,transparent); border-color:color-mix(in srgb,#3aa0ff 30%,transparent); }
.lrd-rolebadge.role-trader{ color:var(--up); background:color-mix(in srgb,var(--up) 12%,transparent); border-color:color-mix(in srgb,var(--up) 28%,transparent); }

/* video tile — speaking glow + a self badge; smoother corners */
.lrd-vtile{ transition:border-color .18s, box-shadow .18s; }
.lrd-vtile.speaking{ border-color:var(--lr-crimson);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--lr-crimson) 45%, transparent), 0 0 18px -2px color-mix(in srgb,var(--lr-crimson) 55%, transparent); }

/* voice-bar buttons — subtle hover lift */
.lrd-vbtn{ transition:transform .12s, border-color .14s, background .14s, color .14s; }
.lrd-vbtn:not(:disabled):hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--lr-crimson) 40%, var(--lr-line)); }
.lrd-vbtn.join:not(:disabled):hover,.lrd-vbtn.cam.on:hover,.lrd-vbtn.scr.on:hover{ filter:brightness(1.07); }

/* keyboard focus — visible crimson ring everywhere in the dock */
.lrd-dock button:focus-visible,.lrd-dock input:focus-visible,.lrd-dock select:focus-visible,.lrd-dock textarea:focus-visible,
.lrd-voicebar button:focus-visible{ outline:2px solid color-mix(in srgb,var(--lr-crimson) 65%, transparent); outline-offset:1px; }

/* refined thin scrollbars in the dock scroll panes */
.lrd-body,.lrd-mem,.lrd-rp-feed,.lrd-aiout,.lrd-vgtiles{ scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--lr-faint) 40%, transparent) transparent; }
.lrd-body::-webkit-scrollbar,.lrd-rp-feed::-webkit-scrollbar,.lrd-aiout::-webkit-scrollbar,.lrd-vgtiles::-webkit-scrollbar{ width:9px; height:9px; }
.lrd-body::-webkit-scrollbar-thumb,.lrd-rp-feed::-webkit-scrollbar-thumb,.lrd-aiout::-webkit-scrollbar-thumb,.lrd-vgtiles::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--lr-faint) 32%, transparent); border-radius:9px; border:2px solid transparent; background-clip:padding-box; }
.lrd-body::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--lr-faint) 55%, transparent); background-clip:padding-box; }
.lrd-body::-webkit-scrollbar-track{ background:transparent; }

@media(prefers-reduced-motion:reduce){
  .lrd-dock.on:not(.lrd-dock-free){ animation:none; }
  .lrd-mav.speaking::after{ animation:none; }
}

/* ============================================================================
   2.6 · EMOJI + LIVE REACTIONS  (world-class picker · quick reaction strip ·
        floating broadcast reactions). Native Unicode; pooled + reduced-motion safe.
   ============================================================================ */
.lrd-pop{ position:fixed; z-index:1300; }
@keyframes lrdPopIn{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }

/* full categorized picker */
.lrd-emo{ width:332px; max-width:92vw; background:var(--bg2); border:1px solid var(--lr-line); border-radius:15px;
  box-shadow:0 26px 64px -20px rgba(0,0,0,.82), 0 0 0 1px color-mix(in srgb,var(--lr-crimson) 6%, transparent);
  overflow:hidden; display:flex; flex-direction:column; animation:lrdPopIn .14s ease; }
.lrd-emsrch{ padding:10px 11px 7px; }
.lrd-emsrch input{ width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--lr-line); border-radius:10px;
  padding:8px 12px; color:var(--lr-ink); font-size:13px; font-family:inherit; outline:0; }
.lrd-emsrch input:focus{ border-color:color-mix(in srgb,var(--lr-crimson) 50%,var(--lr-line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lr-crimson) 11%, transparent); }
.lrd-emtabs{ display:flex; gap:2px; padding:0 9px 7px; border-bottom:1px solid var(--lr-line); overflow-x:auto; scrollbar-width:none; }
.lrd-emtabs::-webkit-scrollbar{ display:none; }
.lrd-emt{ flex:0 0 auto; width:34px; height:30px; border:0; background:none; border-radius:8px; cursor:pointer; font-size:16px;
  line-height:1; display:grid; place-items:center; opacity:.65; transition:background .12s, opacity .12s; }
.lrd-emt:hover{ background:var(--card); opacity:1; }
.lrd-emt.on{ background:color-mix(in srgb,var(--lr-crimson) 14%, transparent); opacity:1;
  box-shadow:inset 0 -2px 0 var(--lr-crimson); }
.lrd-emgrid{ display:grid; grid-template-columns:repeat(8,1fr); gap:1px; padding:8px; max-height:232px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--lr-faint) 40%, transparent) transparent; }
.lrd-emgrid::-webkit-scrollbar{ width:9px; }
.lrd-emgrid::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--lr-faint) 32%, transparent); border-radius:9px; border:2px solid transparent; background-clip:padding-box; }
.lrd-emc{ aspect-ratio:1; border:0; background:none; border-radius:9px; cursor:pointer; font-size:20px; line-height:1;
  display:grid; place-items:center; transition:background .1s, transform .08s; }
.lrd-emc:hover{ background:var(--card); transform:scale(1.2); }
.lrd-emempty{ grid-column:1/-1; padding:26px 10px; text-align:center; font-size:12px; color:var(--lr-faint); }

/* quick reaction strip (pill) */
.lrd-rbar{ display:flex; gap:2px; padding:7px 9px; background:var(--bg2); border:1px solid var(--lr-line); border-radius:999px;
  box-shadow:0 20px 48px -18px rgba(0,0,0,.82), 0 0 0 1px color-mix(in srgb,var(--lr-crimson) 7%, transparent); animation:lrdPopIn .14s ease; }
.lrd-rbc{ width:40px; height:40px; border:0; background:none; border-radius:50%; cursor:pointer; font-size:22px; line-height:1;
  display:grid; place-items:center; transition:background .12s, transform .12s; }
.lrd-rbc:hover{ background:var(--card); transform:translateY(-3px) scale(1.2); }
.lrd-rbc.more{ font-size:19px; color:var(--lr-faint); font-weight:700; }
.lrd-rbc.pulse{ animation:lrdRbPulse .42s ease; }
@keyframes lrdRbPulse{ 0%{ transform:scale(.75); } 55%{ transform:scale(1.35); } 100%{ transform:scale(1); } }

/* floating broadcast reactions — rise over the chart band (never under the dock), pooled + capped */
.lrd-rlayer{ position:fixed; inset:0; z-index:178; pointer-events:none; overflow:hidden; }
.lrd-rfloat{ position:absolute; bottom:90px; font-size:30px; line-height:1; pointer-events:none; will-change:transform,opacity;
  filter:drop-shadow(0 3px 9px color-mix(in srgb, var(--glow,#c81e3a) 55%, transparent));
  animation:lrdFloatUp 2.8s cubic-bezier(.32,.66,.4,1) forwards; }
@keyframes lrdFloatUp{
  0%{ transform:translateY(22px) scale(.5); opacity:0; }
  12%{ opacity:1; transform:translateY(0) scale(1.12); }
  80%{ opacity:.92; }
  100%{ transform:translateY(calc(-1 * var(--rise,46vh))) translateX(var(--dx,0)) rotate(var(--rot,0)) scale(.84); opacity:0; }
}
@media(prefers-reduced-motion:reduce){
  .lrd-emo,.lrd-rbar{ animation:none; }
  .lrd-emc:hover,.lrd-rbc:hover{ transform:none; }
  .lrd-rfloat{ animation-duration:1.8s; }
}

/* ============================================================================
   2.7 · VIDEO BOX — FULL MOUSE CONTROL  (header controls · per-tile controls ·
        spotlight layout · maximize / minimize / edge-snap). Persisted in vlr_vidui.
   ============================================================================ */
/* header control cluster (does NOT trigger the drag — pointerdown bails on buttons) */
.lrd-vgcount{ font-size:10px; font-weight:700; color:var(--lr-faint); font-variant-numeric:tabular-nums; }
.lrd-vgctl{ display:flex; gap:1px; margin-inline-start:auto; }
.lrd-vgb{ width:24px; height:22px; border:0; background:none; border-radius:6px; color:var(--lr-ink2); cursor:pointer;
  display:grid; place-items:center; transition:background .12s, color .12s; }
.lrd-vgb svg{ width:14px; height:14px; }
.lrd-vgb:hover{ background:var(--bg2); color:var(--lr-ink); }
.lrd-vgb.on{ color:var(--lr-crimson); }

/* per-tile controls — appear on hover (always shown on touch); pin · fullscreen · local mute */
.lrd-vtctl{ position:absolute; top:5px; inset-inline-end:5px; display:flex; gap:3px; z-index:3;
  opacity:0; transform:translateY(-2px); transition:opacity .14s, transform .14s; }
.lrd-vtile:hover .lrd-vtctl,.lrd-vtile:focus-within .lrd-vtctl{ opacity:1; transform:none; }
.lrd-vtb{ width:25px; height:25px; border:0; border-radius:7px; background:rgba(10,12,18,.55); color:#fff; cursor:pointer;
  display:grid; place-items:center; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .12s, transform .1s; }
.lrd-vtb svg{ width:13px; height:13px; }
.lrd-vtb:hover{ background:var(--lr-crimson); transform:translateY(-1px); }
.lrd-vtb.on{ background:var(--lr-crimson); }
@media (hover:none){ .lrd-vtctl{ opacity:1; transform:none; } }

/* spotlight layout — one big tile + a filmstrip of the rest */
.lrd-vgtiles.spotlight .lrd-vtile{ flex:0 0 auto; width:58px; min-width:0; aspect-ratio:16/10; }
.lrd-vgtiles.spotlight .lrd-vtile.big{ flex:1 1 100%; width:100%; order:-1; aspect-ratio:16/9; }
.lrd-vgtiles.spotlight .lrd-vtile:not(.big) .lrd-vname{ font-size:9px; padding:1px 5px; }

/* maximize → FILL THE CHART AREA (never covers the dock or the toolbar). Physical props with !important cleanly
   beat the free-window inline geometry + the logical base rule. RTL: the dock sits on the left, so reserve there. */
.lrd-vidgrid.lrd-vgmax{ top:70px !important; bottom:80px !important; left:14px !important; right:calc(var(--lr-dock) + 14px) !important;
  width:auto !important; height:auto !important; max-width:none; max-height:none; transform:none !important; }
.lrd-vidgrid[dir="rtl"].lrd-vgmax{ left:calc(var(--lr-dock) + 14px) !important; right:14px !important; }
body:not(.lr-docked) .lrd-vidgrid.lrd-vgmax{ left:14px !important; right:14px !important; }   /* dock collapsed / floating → full width */
/* minimize → header-only bar (drag/restore only, NOT resizable: hide the handles so grabbing the bar can't
   accidentally un-minimize + resize it). */
.lrd-vidgrid.lrd-vgmin{ height:auto !important; min-height:0; max-height:none; }
.lrd-vidgrid.lrd-vgmin .lrd-vgtiles{ display:none; }
.lrd-vidgrid.lrd-vgmin .lrd-vghead{ border-bottom:0; }
.lrd-vidgrid.lrd-vgmin .lrd-rz{ display:none; }

/* FULL multi-directional resize handles (inside the box edges; PHYSICAL sides → correct in LTR + RTL).
   Header control buttons sit above the handles (z) so the top edge can resize without eating button clicks.
   DISCOVERABILITY: generous grab zones + a crimson edge-bar that reveals on box-hover (faint) and brightens on
   the targeted edge — so the user SEES the box is resizable from any side. Always-on corner grips for touch. */
.lrd-vgctl{ position:relative; z-index:8; }
.lrd-rz{ position:absolute; z-index:6; touch-action:none; }
.lrd-rz-n{ top:0; inset-inline-start:16px; inset-inline-end:88px; height:11px; cursor:ns-resize; }   /* end-inset clears the header buttons (RTL-safe) */
.lrd-rz-s{ bottom:0; left:16px; right:16px; height:12px; cursor:ns-resize; }
.lrd-rz-e{ right:0; top:16px; bottom:16px; width:12px; cursor:ew-resize; }
.lrd-rz-w{ left:0; top:16px; bottom:16px; width:12px; cursor:ew-resize; }
.lrd-rz-se{ right:0; bottom:0; width:22px; height:22px; cursor:nwse-resize; }
.lrd-rz-sw{ left:0; bottom:0; width:20px; height:20px; cursor:nesw-resize; }
.lrd-rz-ne{ top:0; inset-inline-end:0; width:22px; height:22px; cursor:nesw-resize; }   /* button-side top corner: logical inset → RTL-safe; sits z6 UNDER the z8 buttons */
.lrd-rz-nw{ top:0; inset-inline-start:0; width:20px; height:20px; cursor:nwse-resize; }   /* title-side top corner */
/* crimson edge-reveal affordance */
.lrd-rz-n::before,.lrd-rz-s::before,.lrd-rz-e::before,.lrd-rz-w::before{ content:""; position:absolute; background:var(--lr-crimson);
  opacity:0; transition:opacity .12s; border-radius:3px; pointer-events:none; box-shadow:0 0 6px color-mix(in srgb,var(--lr-crimson) 60%, transparent); }
.lrd-rz-n::before,.lrd-rz-s::before{ left:0; right:0; height:3px; }
.lrd-rz-n::before{ top:2px; } .lrd-rz-s::before{ bottom:2px; }
.lrd-rz-e::before,.lrd-rz-w::before{ top:0; bottom:0; width:3px; }
.lrd-rz-e::before{ right:2px; } .lrd-rz-w::before{ left:2px; }
.lrd-vidgrid:hover .lrd-rz-n::before,.lrd-vidgrid:hover .lrd-rz-s::before,
.lrd-vidgrid:hover .lrd-rz-e::before,.lrd-vidgrid:hover .lrd-rz-w::before{ opacity:.28; }   /* hovering the box reveals all 4 edges faintly */
.lrd-rz:hover::before{ opacity:.95 !important; }                                            /* the targeted edge lights up */
/* always-visible diagonal grips on ALL FOUR corners (the obvious "drag me" affordance, also for touch) */
.lrd-rz-se::after,.lrd-rz-sw::after,.lrd-rz-ne::after,.lrd-rz-nw::after{ content:""; position:absolute; width:10px; height:10px; opacity:.65; pointer-events:none;
  background:linear-gradient(var(--gpa,135deg), transparent 42%, var(--lr-faint) 42% 54%, transparent 54% 68%, var(--lr-faint) 68% 80%, transparent 80%); }
.lrd-rz-se::after{ right:3px; bottom:3px; } .lrd-rz-sw::after{ left:3px; bottom:3px; --gpa:225deg; }
.lrd-rz-ne::after{ right:3px; top:3px; --gpa:45deg; } .lrd-rz-nw::after{ left:3px; top:3px; --gpa:315deg; }
.lrd-rz-se:hover::after,.lrd-rz-sw:hover::after,.lrd-rz-ne:hover::after,.lrd-rz-nw:hover::after{ opacity:1; }
@media(hover:none){ .lrd-rz-n::before,.lrd-rz-s::before,.lrd-rz-e::before,.lrd-rz-w::before{ opacity:.2; } }   /* touch: keep edges faintly visible (no hover) */

/* FULLSCREEN (chart .pccard.pcmax = z-index 900): keep the whole LIVE ROOMS surface visible ON TOP of the
   maximized chart but still BELOW app menus/dialogs (--z-overlay:1000). Fixes "the box hides in fullscreen". */
html.pcmax-on .lrd-rlayer{ z-index:988; }
html.pcmax-on .lrd-dock{ z-index:990; }
html.pcmax-on .lrd-vidgrid{ z-index:992; }
html.pcmax-on .lrd-voicebar{ z-index:993; }
html.pcmax-on .lrd-fab{ z-index:995; }
body:has(#lrhub.on) .lrd-fab{ display:none; }   /* FIX: FAB (z185) sat BEHIND the hub modal (z1200) — hide it while the hub is open, restore on close */

/* ============================================================================
   2.8 · MEMBERS AT SCALE  (summary strip · member search · "+N watching" tail).
        Honest spectator pattern — DOM capped, the long tail is counted not painted.
   ============================================================================ */
.lrd-memsum{ display:flex; gap:15px; flex-wrap:wrap; padding:8px 11px; margin-bottom:8px; border:1px solid var(--lr-line);
  border-radius:11px; background:var(--card); font-size:11.5px; color:var(--lr-faint); }
.lrd-memsum b{ color:var(--lr-ink); font-weight:800; font-variant-numeric:tabular-nums; margin-inline-end:3px; }
.lrd-memsum .on b{ color:var(--up); }
/* the server withheld the names because the room is too big — say so instead of rendering a blank panel */
.lrd-membnd{ display:block; line-height:1.5; }
/* THE STAGE. One row that states what the room is actually limited by, plus the owner's control over it.
   Deliberately NOT tinted with --up/--down: those two carry price direction and nothing else
   (BR-AGI-001, and lock C7 counts every interactive element painting either of them). */
.lrd-seatbar{ align-items:center; justify-content:space-between; gap:10px; }
.lrd-seatbar > span{ font-variant-numeric:tabular-nums; }
.lrd-seatcap{ min-height:30px; padding:3px 8px; border-radius:8px; border:1px solid var(--lr-line);
  background:var(--bg2); color:var(--lr-ink); font:inherit; font-size:11.5px; cursor:pointer; }
@media (hover:none){ .lrd-seatcap{ min-height:38px; } }   /* a finger device, not a narrow one — the width-keyed guard was the measured trap */
/* a member holding a seat: the same "on" affordance every other granted control in this dock uses */
.lrd-mbtn.on{ color:var(--pcac,#c0392b); }
.lrd-memsrchrow{ margin-bottom:8px; }
.lrd-memsrch{ width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--lr-line); border-radius:9px;
  padding:8px 11px; color:var(--lr-ink); font-size:12.5px; font-family:inherit; outline:0; }
.lrd-memsrch:focus{ border-color:color-mix(in srgb,var(--lr-crimson) 50%,var(--lr-line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lr-crimson) 11%, transparent); }
.lrd-memtail{ display:flex; align-items:center; gap:8px; padding:10px; margin-top:5px; font-size:11.5px; color:var(--lr-faint);
  border-top:1px solid var(--lr-line); }
.lrd-memtail svg{ width:15px; height:15px; opacity:.65; flex:0 0 auto; }
.lrd-memtail b{ color:var(--lr-ink2); font-weight:800; font-variant-numeric:tabular-nums; }

/* ============================================================================
   2.9 · CHAT REDESIGN — Telegram-grade bubbles ("Nidar Chat"). Incoming left (avatar
        + sender-colour name + colour accent + time); outgoing right (crimson + ✓✓);
        consecutive-sender grouping; pinned bar; day dividers. Theme-var + RTL-safe
        (logical props → incoming flips to the page-start side, correct in ar/ku).
   ============================================================================ */
.lrm-feed{ display:flex; flex-direction:column; gap:0; padding:2px 2px 8px; }
.lrm{ display:flex; gap:8px; align-items:flex-end; margin-top:11px; }
.lrm.same{ margin-top:2px; }
.lrm.out{ flex-direction:row-reverse; }
.lrm-av{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800;
  color:#fff; line-height:1; user-select:none; background:linear-gradient(150deg, var(--avc,#5a6273), color-mix(in srgb, var(--avc,#5a6273) 52%, #000));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 12%, transparent); }
.lrm.same .lrm-av{ visibility:hidden; }                       /* keep the indent, hide the repeat avatar */
.lrm-col{ min-width:0; max-width:80%; display:flex; flex-direction:column; }
.lrm.out .lrm-col{ align-items:flex-end; }
.lrm-nm{ font-size:11.5px; font-weight:800; color:var(--avc,var(--lr-ink2)); margin:0 6px 3px; }
.lrm-bub{ position:relative; max-width:100%; background:var(--card); border:1px solid var(--lr-line); border-radius:15px;
  padding:7px 11px; font-size:13px; line-height:1.5; color:var(--lr-ink); box-shadow:0 1px 2px rgba(0,0,0,.05); overflow-wrap:anywhere; }
.lrm.in .lrm-bub{ border-start-start-radius:5px; border-inline-start:3px solid var(--avc,var(--lr-line)); }   /* per-sender colour accent */
.lrm.out .lrm-bub{ border-start-end-radius:5px; background:color-mix(in srgb,var(--lr-crimson) 13%, var(--card));
  border-color:color-mix(in srgb,var(--lr-crimson) 22%, var(--lr-line)); }
.lrm-tx{ white-space:pre-wrap; }
.lrm-bub.jumbo{ padding:5px 10px; }
.lrm-bub.jumbo .lrm-tx{ font-size:30px; line-height:1.2; vertical-align:middle; }   /* emoji-only message → big (Telegram "jumbo") */
.lrm-bub.jumbo .lrm-t{ vertical-align:bottom; }
.lrm-t{ font-size:9.5px; color:var(--lr-faint); margin-inline-start:8px; white-space:nowrap; display:inline-flex; align-items:center; gap:3px; }
.lrm.out .lrm-t{ color:color-mix(in srgb,var(--lr-crimson) 65%, var(--lr-faint)); }
.lrm-ck{ width:15px; height:9px; color:var(--up); flex:0 0 auto; }
.lrm-img{ display:block; max-width:210px; max-height:220px; border-radius:11px; margin-top:5px; cursor:zoom-in; object-fit:cover; border:1px solid var(--lr-line); }
.lrm.evt .lrm-bub{ display:none; }
.lrm.evt .lrm-act{ font-size:11.5px; color:var(--lr-faint); padding:1px 4px; }
.lrm.evt .lrm-act .lrm-t{ margin-inline-start:6px; }
.lrm-sys{ text-align:center; margin:9px 0; }
.lrm-sys span{ font-size:10px; color:var(--lr-faint); background:color-mix(in srgb,var(--lr-faint) 11%, transparent); border-radius:999px; padding:2px 11px; }
.lrm-day{ text-align:center; margin:12px 0 2px; }
.lrm-day span{ font-size:10px; font-weight:800; letter-spacing:.3px; color:var(--lr-faint); background:var(--card); border:1px solid var(--lr-line); border-radius:999px; padding:3px 13px; }
.lrm-pin{ position:sticky; top:-2px; z-index:3; display:flex; align-items:center; gap:10px; background:var(--lr-glass);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--lr-line);
  border-inline-start:3px solid var(--lr-crimson); border-radius:12px; padding:9px 12px; margin:2px 0 8px; }
.lrm-pin-b{ min-width:0; flex:1 1 auto; }
.lrm-pin-h{ font-size:10.5px; font-weight:800; color:var(--lr-crimson); margin-bottom:1px; }
.lrm-pin-t{ font-size:12px; color:var(--lr-ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrm-pin-ic{ flex:0 0 auto; color:var(--lr-crimson); }
.lrm-pin-x{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:0; background:transparent; color:var(--lr-faint); cursor:pointer; font-size:13px; line-height:1; }
.lrm-pin-x:hover{ color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-crimson) 11%, transparent); }
/* per-message PIN button (owner/admin) — hover-revealed at the bubble's top-outer corner */
.lrm-pinbtn{ position:absolute; top:-9px; inset-inline-end:-9px; width:22px; height:22px; border-radius:50%; border:1px solid var(--lr-line);
  background:var(--card); color:var(--lr-faint); display:grid; place-items:center; cursor:pointer; opacity:0; transition:opacity .12s,color .12s;
  box-shadow:0 1px 4px rgba(0,0,0,.14); z-index:4; }
.lrm-pinbtn svg{ width:12px; height:12px; }
.lrm:hover .lrm-pinbtn{ opacity:1; }
.lrm-pinbtn:hover{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 45%,var(--lr-line)); }
@media(hover:none){ .lrm-pinbtn{ opacity:.55; } }
/* per-message edit/delete — hover-revealed round buttons on the START side (pin stays on the END side, no collision) */
.lrm-act{ position:absolute; top:-9px; width:22px; height:22px; border-radius:50%; border:1px solid var(--lr-line); background:var(--card); color:var(--lr-faint); display:grid; place-items:center; cursor:pointer; opacity:0; transition:opacity .12s,color .12s; box-shadow:0 1px 4px rgba(0,0,0,.14); z-index:4; }
.lrm-act svg{ width:12px; height:12px; }
.lrm:hover .lrm-act{ opacity:1; }
.lrm-delbtn{ inset-inline-start:-9px; } .lrm-editbtn{ inset-inline-start:17px; }
.lrm-delbtn:hover{ color:var(--down); border-color:color-mix(in srgb,var(--down) 45%,var(--lr-line)); }
.lrm-editbtn:hover{ color:var(--lr-crimson); border-color:color-mix(in srgb,var(--lr-crimson) 45%,var(--lr-line)); }
@media(hover:none){ .lrm-act{ opacity:.55; } }
.lrm-ed{ font-style:italic; opacity:.6; font-size:9.5px; margin-inline-end:4px; }   /* "edited" marker before the time */
.lrm-bub.lrm-del{ opacity:.6; } .lrm-bub.lrm-del .lrm-tx{ font-style:italic; color:var(--lr-faint); }   /* deleted tombstone */

/* chrome to match the design — circular header buttons · underline tabs · white media pills · pill composer */
.lrd-head .lrd-hb{ border-radius:50%; border:0; background:color-mix(in srgb,var(--lr-faint) 13%, transparent); }
.lrd-head .lrd-hb:hover{ background:color-mix(in srgb,var(--lr-faint) 22%, transparent); color:var(--lr-ink); border:0; }
.lrd-head .lrd-hb.danger:hover{ background:color-mix(in srgb,var(--down) 15%, transparent); color:var(--down); }
.lrd-tab{ border:0!important; padding:7px 10px; }
.lrd-tab.on{ background:none!important; border-color:transparent!important; color:var(--lr-crimson); }
.lrd-tab.on .lrd-tc{ background:var(--lr-crimson); color:#fff!important; }
.lrd-media .lrd-vbtn{ border-radius:999px; background:var(--card); border:1px solid var(--lr-line); box-shadow:0 1px 2px rgba(0,0,0,.04); }
.lrd-media .lrd-vbtn.join{ background:var(--lr-crimson); color:#fff; border-color:var(--lr-crimson); }
/* "Share chart" = clean white button (its base rule is crimson+white-text → went invisible white-on-white once the media bar forced a white bg). Distinct candlestick icon; crimson watcher-count pill. */
.lrd-media .lrd-vbtn.lrd-share{ background:var(--card); color:var(--lr-ink); border-color:var(--lr-line); }
.lrd-media .lrd-vbtn.lrd-share svg{ animation:none; }
.lrd-media .lrd-vbtn.lrd-share .lrd-share-n{ background:var(--lr-crimson); color:#fff; }
.lrd-compose .lrd-crow{ background:var(--card); border:1px solid var(--lr-line); border-radius:24px; padding:4px 5px; gap:2px; align-items:center; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.lrd-compose input#lrdChatIn{ border:0!important; background:transparent!important; box-shadow:none!important; padding:8px 8px; }
.lrd-compose .lrd-attach{ width:34px; height:34px; border:0; background:transparent; color:var(--lr-faint); flex:0 0 auto; }
.lrd-compose .lrd-attach:hover{ color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-faint) 13%, transparent); }
.lrd-send{ width:40px; height:40px; flex:0 0 auto; border-radius:50%; padding:0; display:grid; place-items:center; background:var(--lr-crimson); color:#fff; border:0; }
.lrd-send:hover{ filter:brightness(1.08); }

/* ============================================================================
   2.95 · HEADER OVERFLOW MENU  (the Telegram pattern: a few primary controls in
        the bar, the rest in a named menu with real labels — NOT hidden, NAMED)
   ============================================================================ */
/* the ⋯ button carries a crimson dot while any of its items is ACTIVE (hand raised / present requested), so
   moving a control into the menu never hides its STATE — Art.9.
   NAME COLLISION CAUGHT BY MEASUREMENT, not by reading: this class was first written `.lrd-more`, which is
   ALREADY the chat scrollback button at liverooms.css:358 — `display:block; width:100%; margin:2px 0 8px`.
   The margins survived (the .lrd-hb rules override size and display, not margin), so the button group's flex
   line grew to 40px for 30px children and ⋯ rendered 3px above its four siblings: MEASURED header height
   97 -> 107px and rows 3 -> 4 in every cell. `.lrd-hmore` is unique. */
.lrd-head .lrd-hb.lrd-hmore{ position:relative; }
.lrd-head .lrd-hb.lrd-hmore.hason::after{ content:""; position:absolute; top:3px; inset-inline-end:3px; width:7px; height:7px;
  border-radius:50%; background:var(--lr-crimson); box-shadow:0 0 0 2px var(--card2); }
.lrd-hmenu{ position:absolute; z-index:60; min-width:196px; max-width:min(260px, 92%); padding:6px;
  background:var(--card); border:1px solid var(--lr-line); border-radius:13px;
  box-shadow:0 22px 52px -22px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb,var(--lr-crimson) 6%, transparent);
  display:flex; flex-direction:column; gap:2px; animation:lrdPopIn .13s ease; }
.lrd-hmi{ display:flex; align-items:center; gap:10px; width:100%; text-align:start; font:inherit; font-size:13px;
  font-weight:700; color:var(--lr-ink2); background:none; border:0; border-radius:9px; padding:9px 11px; cursor:pointer;
  transition:background .12s, color .12s; }
.lrd-hmi svg{ width:16px; height:16px; flex:0 0 auto; }
.lrd-hmi:hover{ background:var(--card2); color:var(--lr-ink); }
.lrd-hmi.on{ color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-crimson) 10%, transparent); }
.lrd-hmi span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(prefers-reduced-motion:reduce){ .lrd-hmenu{ animation:none; } }

/* MEDIA-BAR-01 — the action strip's overflow menu. The one-row scroller left FIVE of eight controls entirely
   off screen at every width from 375 to 1536 (measured scrollWidth 909 inside clientWidth 347), including the
   Camera the owner circled, with only a 22px mask fade as the affordance. room-dock.js now MOVES the real
   button nodes that do not fit into this menu — handlers, state classes and labels travel with them — so the
   ⋯ names every folded control instead of hiding it. `.lrd-mmi` re-dresses a pill button as a menu row; the
   pill's own `.lrd-media .lrd-vbtn` rules do not apply here because the node has left that container. */
.lrd-media .lrd-vbtn.lrd-mmore{ margin-inline-start:auto; padding:7px 9px; position:relative; }
.lrd-media .lrd-vbtn.lrd-mmore svg{ width:16px; height:16px; }
.lrd-media .lrd-vbtn.lrd-mmore.hason::after{ content:""; position:absolute; top:2px; inset-inline-end:2px; width:7px; height:7px;
  border-radius:50%; background:var(--lr-crimson); box-shadow:0 0 0 2px var(--card2); }
.lrd-mmenu .lrd-mmi{ display:flex; align-items:center; gap:10px; width:100%; text-align:start; font:inherit; font-size:13px;
  font-weight:700; color:var(--lr-ink2); background:none !important; border:0 !important; border-radius:9px; padding:9px 11px;
  cursor:pointer; box-shadow:none !important; white-space:nowrap; }
.lrd-mmenu .lrd-mmi svg{ width:16px; height:16px; flex:0 0 auto; }
.lrd-mmenu .lrd-mmi:hover{ background:var(--card2) !important; color:var(--lr-ink); }
.lrd-mmenu .lrd-mmi.on{ color:var(--lr-crimson); background:color-mix(in srgb,var(--lr-crimson) 10%, transparent) !important; }
.lrd-mmenu .lrd-mmi[disabled]{ opacity:.55; cursor:default; }
.lrd-mmenu .lrd-mmi span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.lrd-mmenu .lrd-mmi .lrd-share-n{ margin-inline-start:auto; }

/* MEDIA-PENDING-01 — while the browser's own permission bubble is open the toggle promise does not settle,
   and the button used to sit disabled and silent (measured still pending at 15,000 ms). It now READS as
   waiting instead of as broken: a steady pulse, never a fade-out (PROJECT_LAWS art.9 forbids concealing a
   state, and this is the opposite — it declares one). The toast that names the prompt is the real answer;
   this is only so the control does not look dead while the sentence is on screen. */
.lrd-media .lrd-vbtn.lrd-vpend{ opacity:1; cursor:progress; animation:lrdMedPend 1.05s ease-in-out infinite; }
@keyframes lrdMedPend{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--lr-crimson) 42%, transparent); }
                       50%{ box-shadow:0 0 0 4px color-mix(in srgb,var(--lr-crimson) 0%, transparent); } }
@media(prefers-reduced-motion:reduce){ .lrd-media .lrd-vbtn.lrd-vpend{ animation:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--lr-crimson) 30%, transparent); } }

/* ============================================================================
   2.96 · HUB — real controls: focusable rows/desks + styled selects
   ============================================================================ */
/* MEASURED: every desk card and room row was a <div> with an el.onclick — 10 of 10 tagName DIV, 0 focusable,
   and a touch audit of the whole hub found only 8 interactive controls because no row counted as one. Nobody
   on a keyboard or a screen reader could enter a room from the chart's Rooms panel. They are <button> now;
   these declarations restore the box model a <button> would otherwise impose. */
.lr-desk2, .lr-row2{ width:100%; box-sizing:border-box; text-align:start; font:inherit; color:inherit; -webkit-appearance:none; appearance:none; }
.lr-desk2:focus-visible, .lr-row2:focus-visible, .lrc:focus-visible{ outline:2px solid color-mix(in srgb,var(--lr-crimson) 70%, transparent); outline-offset:2px; }
/* the market filter and the sort control computed appearance:auto — raw operating-system combo boxes with the
   platform chevron, inside a panel the owner asked to be Telegram-grade. One chevron, drawn by us, RTL-aware. */
.lrh-sel{ -webkit-appearance:none; appearance:none; padding-inline-end:26px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  background-position:right 13px center, right 8px center; }
/* RTL moves the chevron to the other end — it does NOT mirror the glyph. A down-chevron is symmetric about
   its own vertical axis, so swapping the two gradient halves AS WELL as their positions flips it upside down:
   MEASURED, from the real rendered pixels of the market filter in ar and ku, an UP arrow (▲) beside a correct
   ▼ in en. Position only. */
[dir="rtl"] .lrh-sel{ background-position:left 8px center, left 13px center; }
.lrh-sel:focus-visible{ outline:2px solid color-mix(in srgb,var(--lr-crimson) 65%, transparent); outline-offset:1px; }
/* ── SEL-CASCADE-01 · a fix of my own fix, found by MEASURING it instead of reading it ────────────────────
   The block above removed the native chevron (appearance:none) and drew its own. MEASURED afterwards on the
   real page — all three hub selects, in ar/dark, en/light and ku/dark — appearance "none" AND
   background-image "none": the controls ended up with NO indicator at all, which is worse than the platform
   chevron the design lens complained about.
   CAUSE, read from the served bytes: app/static/js/chart/ui/rooms-compact.js:114 injects
   `#lrhub .lrh-sel{ … background:var(--lrp-bg)!important; padding:6px 10px!important … }` into <head> at
   runtime. `background` is a SHORTHAND, so with !important it resets background-image to none at higher
   specificity (1,1,0) than this file's `.lrh-sel` (0,1,0) — and `padding` likewise wipes padding-inline-end.
   `appearance` is not in that rule, so only the half that REMOVES the chevron survived.
   The honest close is in rooms-compact.js (declare background-color, not background) and that file belongs to
   another agent this wave — REPORTED, not edited. What this file can do without touching it is out-specify
   the two properties that were erased: `#lrhub select.lrh-sel` is (1,1,1) and wins on those properties only,
   leaving the injected palette, border, radius and layout exactly as they are. */
#lrhub select.lrh-sel{ padding-inline-end:26px !important;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%) !important;
  background-size:5px 5px,5px 5px !important; background-repeat:no-repeat !important;
  background-position:right 13px center, right 8px center !important; }
[dir="rtl"] #lrhub select.lrh-sel{ padding-inline-end:26px !important;
  background-position:left 8px center, left 13px center !important; }

/* ============================================================================
   3 · RESPONSIVE  (tablet folds rail to icons · mobile = full-screen sheets)
   ============================================================================ */
@media (max-width:1120px){
  .lrh-rail{ flex-basis:60px; }
  .lrh-nav .lrh-txt, .lrh-navsec, .lrh-nav .lrh-ct, .lrh-railfoot{ display:none; }
  .lrh-nav{ justify-content:center; } .lrh-nav.lrh-cta .lrh-txt{ display:inline; }
}
@media (max-width:760px){
  #lrhub{ padding:0; }
  .lrh-panel{ width:100vw; height:100dvh; border-radius:0; border:0; }
  .lrh-rail{ position:absolute; inset-block:62px 0; inset-inline-start:0; z-index:3; flex-basis:230px;
    transform:translateX(-110%); transition:transform .2s ease; box-shadow:0 0 60px rgba(0,0,0,.6); }
  html[dir="rtl"] .lrh-rail{ transform:translateX(110%); }
  .lrh-rail.open{ transform:none; }
  .lrh-nav .lrh-txt, .lrh-navsec, .lrh-nav .lrh-ct{ display:inline; }
  .lrh-burger{ display:grid !important; }
  .lrh-grid{ grid-template-columns:1fr; } .lr-fgrid{ grid-template-columns:1fr; }
  /* PHONE = BOTTOM SHEET, not a full-screen takeover.
     This was `inset:0; width:100vw`, so opening any room panel covered the ENTIRE chart — on the one product
     whose whole premise is analysing a shared chart together. Worse, the Pin tool then told the user to "click
     the chart to pin a note" over a chart they could not see. A sheet keeps ~42% of the viewport on the chart
     and the panel is still one tap from full screen via the existing #lrdMax button (rule further down).
     The margin !important below MUST stay: it is the only thing beating the dir-scoped desktop side-margin
     rules (specificity 0,3,3 vs 0,2,3 here). It now reserves the SHEET instead of zeroing everything. */
  html body.lr-docked .pcstage{ margin-left:0!important; margin-right:0!important; margin-bottom:var(--lr-sheet)!important; }
  .lrd-dock{ inset:auto 0 0 0; width:100vw; height:var(--lr-sheet); z-index:1190;
    border-start-start-radius:16px; border-start-end-radius:16px; border-top:1px solid var(--lr-line); }
  .lrd-voicebar{ inset-inline:10px 10px; }
  .lrd-vidgrid{ inset-inline:auto 8px; bottom:calc(var(--lr-sheet) + 16px); z-index:1191; width:66vw; max-width:300px; }
  /* MOBILE maximize: fill the phone (the --lr-dock reserve is a desktop side-panel concept — meaningless here,
     and would otherwise leave an ~18px sliver). Both dir selectors listed → RTL right/left swap is overridden. */
  .lrd-vidgrid.lrd-vgmax,.lrd-vidgrid[dir="rtl"].lrd-vgmax{ inset:64px 8px 70px 8px !important;
    width:auto !important; height:auto !important; max-width:none !important; transform:none !important; }
  /* touch: thin edge handles are unhittable + steal scroll → keep all FOUR corner grips, enlarged for finger */
  .lrd-vidgrid .lrd-rz-n,.lrd-vidgrid .lrd-rz-s,.lrd-vidgrid .lrd-rz-e,.lrd-vidgrid .lrd-rz-w{ display:none; }
  .lrd-rz-se,.lrd-rz-sw,.lrd-rz-ne,.lrd-rz-nw{ width:30px; height:30px; }
  .lrd-rz-se::after,.lrd-rz-sw::after,.lrd-rz-ne::after,.lrd-rz-nw::after{ width:12px; height:12px; opacity:.9; }
}
/* TOUCH, keyed to the POINTER and not to the width. The rules above stop at 760px, so a 768-1120px tablet —
   squarely a finger device — still got 6px/7px/8px edge strips and 20x20 corner grips, every one of them
   carrying touch-action:none, i.e. unhittable targets that also swallow the scroll gesture. Scoped to
   .lrd-dock so it outranks the (0,2,0) rules above and never touches the video grid's own block. */
@media (hover:none){
  .lrd-dock .lrd-rz-n,.lrd-dock .lrd-rz-s,.lrd-dock .lrd-rz-e,.lrd-dock .lrd-rz-w{ display:none; }
  .lrd-dock .lrd-rz-se,.lrd-dock .lrd-rz-sw,.lrd-dock .lrd-rz-ne,.lrd-dock .lrd-rz-nw{ width:30px; height:30px; }
  .lrd-dock .lrd-head .lrd-hb{ width:38px; height:38px; }   /* 30px header buttons are under the 40px finger target */
  /* the moderation buttons on a member row (27px) and the video-tile controls (25px) are the smallest targets
     in the surface and the first block missed them. Bumped conservatively, NOT to 38px: the member row holds
     seven of them plus an avatar, a name and a <select> in a non-wrapping flex, and a spotlight filmstrip tile
     is only 58px wide — the obvious numbers overflow both layouts. */
  .lrd-dock .lrd-mbtn{ width:32px; height:32px; }
  .lrd-vtb{ width:30px; height:30px; }
}
/* phone sheet height — a token so the dock, the chart margin, the FAB and the video grid can never disagree.
   dvh (not vh) so the browser's collapsing address bar does not leave a gap under the sheet. */
:root{ --lr-sheet:58dvh; }
@media (max-width:760px) and (orientation:landscape){ :root{ --lr-sheet:72dvh; } }   /* a landscape phone has almost no height to give the chart; the sheet takes more and #lrdMax is one tap away */
.lrh-burger{ display:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--lr-line);
  background:var(--card); color:var(--lr-ink2); cursor:pointer; place-items:center; font-size:16px; }

/* ═══════ COARSE POINTER — the 44px law (chart-inspector.css D9) reaches the rooms ═══════
   MEASURED in a real browser at 375, 768, 1024 and 1440 in BOTH themes: the hub fits every viewport with
   nothing outside it and no invisible text — but SEVEN controls sit under 44px on every device, and this
   stylesheet had ZERO (pointer:coarse) rules. Among them the ✕ that closes the hub (34x34) and the search
   field (26px tall): the two things a customer reaches for first on a phone. Desktop chrome is untouched. */
@media (pointer:coarse){
  .lrh-x,.lrh-maxbtn{width:44px;height:44px}
  .lrh-search input,.lrh-head input[type="text"],.lrh-head input[type="search"]{min-height:44px}
  .lrh-sel,.lrh-viewsel,.lrh-catsel{min-height:44px}
  .lrc-btn,.lrh-actions button{min-height:44px}
  /* CORRECTION to the previous commit in this file: its last two lines named `.lrh-tab`, `.lrd-btn`, `.lrd-ic` and
     `.lrdock button` — FOUR class names that exist nowhere in the repository (grep: 0 hits in every .js). The dock
     root is `.lrd-dock` / `#lrdDock`, so the rule meant to lift the whole in-room dock matched none of its 68
     buttons and only the hub's ✕ was ever raised. Real selectors, and the surfaces the block never named. */
  .lrd-dock button,#lrdDock button,.lrd-tab,.lrd-hb,.lrd-pop button,.lrd-emo button,#lrdm button{min-height:44px;min-width:44px}
}

/* ============================================================================
   2.9 · CAMERA STAGE — «كاميره حتا بدون اطراف» · the PICTURE is the panel
   ============================================================================
   THE OWNER'S REQUEST, and what it costs in declarations. He circled two things on his
   screenshot: the «الفيديو» header bar, and the pale 1px border drawn around the video.
   MEASURED on the real page before this block existed (docs/rooms/evidence/camera/):
     · header .lrd-vghead  34.80px = 16.17% of a one-tile 236x215.20 panel
     · tile border         1px solid var(--lr-line) -> rgb(228,231,238) in LIGHT theme,
                           i.e. a near-white hairline drawn AROUND A DARK PICTURE
     · picture / box       79.05%  (20.95% of the surface was chrome)
     · six hard literals   #0b0e16 x2, #fff x2, rgba(0,0,0,.55), rgba(10,12,18,.55)
     · phone 375/414       panel y = -93.83 / -124.25 with FIVE controls off the top of
                           the screen and failing document.elementFromPoint  -> FAILED

   WHY THIS IS A SEPARATE, ADDITIVE BLOCK AND NOT AN EDIT OF THE RULES ABOVE (art.15):
   every rule in section 2.7 and the phone/coarse arms is left BYTE-IDENTICAL. The new
   surface is scoped to `.lrd-vstage`, which room-dock.js adds only while
   `PC.lrCamStage !== false`. Turning the flag off removes the class and re-emits the old
   markup, so the ONLY rules that can match are the untouched originals — arm B of the
   rollback reproduces today's geometry because it IS today's geometry, not a copy of it.

   PLACEMENT comes from the owner's second image (a phone camera app): controls float ON
   the picture, circular, quiet, with exactly ONE clearly primary. The AESTHETIC does not:
   a bright plate with a dark glyph decodes 4.27:1 on this surface and fails WCAG AA.
   VOLURR's own answer to "legible over unpredictable moving content" already ships as
   .pclegend — blurred, tinted, hairlined glass — and that is the family used here.

   COLOUR LAW (BR-AGI-001 / PROJECT_LAWS art.3) — this surface paints NEITHER --up NOR
   --down in ANY state. Live is crimson. Muted is a glyph on an inert plate, never red.
   There is no green "connected" dot and no red "recording" dot. */

/* THREE video-context constants + one bed. They are theme-INVARIANT ON PURPOSE: they sit on
   PICTURES, not on the app. A camera frame is not lighter because the user chose light theme.
   That intent is already in the sheet today, encoded badly as three inconsistent literals.
   Four names replace six literals. DECODED from rendered PNG, 3 runs, zero spread:
     glass  rgba(8,10,16,.45) + blur(10px) saturate(.8) brightness(.45)  ->  9.75:1
     flat   .72                                                          ->  9.29:1
     flat   .68                                            ->  6.92:1 over GREY — UNDER the
            7.0 floor, which is why the fallback below is .72 and not .68
     shipped rgba(10,12,18,.55) tile button                              ->  4.30:1  FAILS AA */
/* THE HALO / RIM FAMILY IS NAMED TOO, and the reason is a measurement of the METRIC, not of the
   paint: cam-gate's hard-literal gate compared `backgroundColor` alone against a 2-entry allowlist,
   so it structurally could not see a literal in a background-image, a box-shadow, a colour or a
   border — and it returned 0 on a surface painting 9 distinct non-token colours. The gate is
   widened to the full property set in the same wave, and these five names remove the family it
   would then have to report. They are theme-INVARIANT for the same reason as the four above: they
   sit on PICTURES. They carry no ink of their own — they are the two rim POLARITIES that make a
   control's silhouette readable over an unpredictable frame (graded by G3c, not by a text ratio). */
:root{
  --lr-vplate:    rgba(8,10,16,.45);
  --lr-vplate-fx: blur(10px) saturate(.8) brightness(.45);
  --lr-vink:      #ffffff;
  --lr-vbed:      #0a0d14;
  --lr-vhalo:     rgba(8,10,16,.55);
  --lr-vhalo2:    rgba(8,10,16,.62);
  --lr-vhalo3:    rgba(8,10,16,.85);
  --lr-vrim:      rgba(255,255,255,.34);
  --lr-vshadow:   rgba(0,0,0,.42);
}
/* the fallback degrades the MATERIAL, never the contrast floor (art.9) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  :root{ --lr-vplate: rgba(8,10,16,.72); --lr-vplate-fx: none; }
}
html.lr-vflat{ --lr-vplate: rgba(8,10,16,.72); --lr-vplate-fx: none; }   /* PC.lrVGlass=false — a tuning knob, NOT the rollback */

/* ── the stage ───────────────────────────────────────────────────────────────────────────
   NO border, NO background, NO header, NO padding. The outer hairline is an OUTER SPREAD:
   `0 0 0 1px` paints on the chart BEHIND the box and structurally cannot draw inside the
   border box — which is what makes the light-theme pale frame he circled impossible rather
   than merely absent. It is also theme-aware, where the shipped shadow was ONE string in
   both themes (a hard 80%-black shadow under a near-white panel). */
.lrd-vidgrid.lrd-vstage{
  background:transparent; border:0; border-radius:var(--rad-lg); overflow:hidden;
  box-shadow: var(--el-3), 0 0 0 1px color-mix(in srgb, var(--line) 62%, transparent);
  min-height:0; cursor:move; touch-action:none;
}
/* min-height is 0 ON PURPOSE and the clamp lives in JS instead. A CSS floor of 160px would
   silently re-crop the one case this design exists to fix: a solo 16:9 picture in a 236px stage
   is 133px tall, and a 160px floor would letterbox-or-crop it back. The stage never derives its
   height from its tiles — _vgAutoH writes it from exactly one of five prioritised sources, and
   forces the puck below 96px, because anything under 96 is not a picture. */
/* the bar he circled. Its four jobs are re-homed (drag -> the picture + .lrd-vgrab; reset ->
   double-click + a named menu item; layout/max/min -> the menu). display:none means a zero
   box that is not focusable and not hit-testable: invisible AND inert, never invisible AND
   live — which is the exact defect .lrd-vtctl shipped (opacity:0 + pointer-events:auto). */
.lrd-vidgrid.lrd-vstage .lrd-vghead{ display:none; }
/* THE 348px RESERVATION DEFECT: the shipped rule anchors on var(--lr-dock) unconditionally, so
   with the dock collapsed the panel still measured x=348.00 — 348px of screen reserved for a
   panel that is no longer there. */
body:not(.lr-docked) .lrd-vidgrid.lrd-vstage:not(.lrd-vgfree):not(.lrd-vgmax){ inset-inline:auto 14px; }
/* free geometry must actually WIN. MEASURED: an SE drag of +144px right / +108px down produced
   232x666 — ZERO change — because max-height:74vh (=666) beat the free-mode inline height. */
.lrd-vidgrid.lrd-vstage.lrd-vgfree{ max-width:none; max-height:none; min-height:0; }

/* ── the grid. minmax(0,1fr) is load-bearing: with a plain 1fr a landscape cell overflowed its
      own stage at ratio 1.2757. The seam is TRANSPARENT — the chart shows through it; a
      --line-coloured seam would only relocate the pale hairline in between the tiles. ── */
.lrd-vidgrid.lrd-vstage .lrd-vgtiles{
  flex:1 1 auto; min-height:0; display:grid; gap:2px; padding:0; background:transparent;
  overflow:hidden; align-content:stretch;
  grid-template-rows:minmax(0,1fr); grid-auto-rows:minmax(0,1fr);
}
.lrd-vidgrid.lrd-vstage .lrd-vtile{
  position:relative; overflow:hidden; background:var(--card); border:0; border-radius:0;
  min-width:0; min-height:0; width:auto; flex:initial; aspect-ratio:auto;
  animation:lrVtIn var(--dur-2) var(--ease);
}
/* `container-type:inline-size` was here to drive one clamp() on the identity avatar. It was
   removed after MEASURING it: frame WORK per frame with two live <video> ran 5.378/5.141/5.749 ms
   with it and 3.352/3.221/3.404 ms without, against a 3.119/2.937/3.493 ms legacy baseline, 3 runs
   each, none discarded. Size containment on every tile is not worth one font-size. */
/* `width:auto` above is load-bearing, not tidiness. `.lrd-vgtiles.spotlight .lrd-vtile{width:58px}`
   at :1134 has the SAME specificity (0,3,0) as this rule, so it only loses on the properties this
   one actually declares — omit `width` and every stage tile silently becomes 58px the moment the
   spotlight class lands. _applyVgChrome no longer puts `spotlight`/`big` on the stage at all
   (it toggles `.spot` on the stage root instead), so this is belt AND braces. */
@keyframes lrVtIn{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:none; } }
.lrd-vidgrid.lrd-vstage .lrd-vtile video{ width:100%; height:100%; object-fit:cover; display:block; background:var(--lr-vbed); }
.lrd-vidgrid.lrd-vstage .lrd-vtile.self video{ transform:scaleX(-1); }             /* self-preview mirror — KEPT */
/* a shared screen is never cropped and never mirrored: cropping a shared chart destroys the
   information the room exists to look at. */
.lrd-vidgrid.lrd-vstage .lrd-vtile[data-kind="screen"] video,
.lrd-vidgrid.lrd-vstage .lrd-vtile[data-kind="present"] video,
.lrd-vidgrid.lrd-vstage .lrd-vtile.fit-contain video{ object-fit:contain; transform:none; }

/* SPEAKING — an INSET ring, because there is no longer an outside to draw on. A pseudo-element
   so only `opacity` animates; never `scale`, which on live video reads as jitter. Two channels:
   hue AND geometry, plus the chip's solid mic glyph — crimson alone is also the brand and the
   focus ring, so it can never be the only carrier of a state. */
.lrd-vidgrid.lrd-vstage .lrd-vtile::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; z-index:2;
  box-shadow: inset 0 0 0 2px var(--lr-crimson),
              inset 0 0 18px -4px color-mix(in srgb, var(--lr-crimson) 55%, transparent);
  transition: opacity var(--dur-2) var(--ease);
}
.lrd-vidgrid.lrd-vstage .lrd-vtile.speaking::after{ opacity:1; }

/* ── IDENTITY / OPENING / DENIED — the states nobody screenshots. A peer in voice with the
      camera OFF had ZERO representations on this surface; a camera opening painted an EMPTY
      tile for a measured ~220ms (tile at 268.6ms, first frame at 488.8ms) with no text at all.
      This plate is a UI surface with no picture under it, so it DOES follow the theme. ── */
.lrd-vidgrid.lrd-vstage .lrd-vid{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; background:var(--card); text-align:center; padding:8px;
}
.lrd-vidgrid.lrd-vstage .lrd-vid .lrd-mav{ width:min(40%,96px); height:auto; aspect-ratio:1; font-size:22px; }
.lrd-vidgrid.lrd-vstage .lrd-vidln{ font-size:11px; font-weight:700; color:var(--lr-ink2); max-width:92%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrd-vidgrid.lrd-vstage .lrd-vtile[data-kind="denied"] .lrd-vid{ box-shadow:inset 0 0 0 1px var(--lr-warn); }
.lrd-vidgrid.lrd-vstage .lrd-vtile[data-kind="denied"] .lrd-vidln{ color:var(--lr-warn); }
.lrd-vidgrid.lrd-vstage .lrd-vhow{ border:0; background:transparent; color:var(--lr-crimson); font-family:inherit;
  font-size:11px; font-weight:800; cursor:pointer; text-decoration:underline; padding:6px 10px; min-height:44px; }
/* the camera is opening — a 2px hairline that animates on transform ONLY */
.lrd-vidgrid.lrd-vstage .lrd-vprog{ position:absolute; inset-inline:0; inset-block-end:0; height:2px; overflow:hidden; z-index:3; }
.lrd-vidgrid.lrd-vstage .lrd-vprog i{ position:absolute; inset-block:0; inset-inline-start:0; width:38%;
  background:var(--lr-crimson); animation:lrVprog 1.2s var(--ease) infinite; }
@keyframes lrVprog{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(360%); } }

/* ── the name chip — ONE element carries the name and every tile state. No backdrop-filter on
      it: that is what holds the blur-layer count at exactly 3, independent of tile count.
      max-inline-size 62% (was 85%): MEASURED, a long name occupied 187.68px = 84.4% of a
      222.40px tile and clipped. The full name lives in title AND in the tile's aria-label, so
      truncation never loses information. ── */
.lrd-vidgrid.lrd-vstage .lrd-vname{
  position:absolute; inset-inline-start:8px; inset-block-end:8px; z-index:4;
  /* ORDER IS LOAD-BEARING. `max-width` and `max-inline-size` are the same property in a horizontal
     writing mode and cascade together by DECLARATION ORDER, so `max-width:none` written after
     `max-inline-size:62%` silently killed the cap this surface's own measurement chose. MEASURED
     with it dead: a chip read 106.42px inside a 117px tile with 2.58px to spare, and on a cold
     font cache the same chip read wider still and was CLIPPED — paintedFraction 0.9098 in run 0
     while runs 1 and 2 read 1.0000. `max-width:none` is still needed (the legacy rule at :880 sets
     85%); it just has to come first. */
  display:flex; align-items:center; gap:5px; max-width:none; max-inline-size:62%;
  font-size:11px; font-weight:800; color:var(--lr-vink);
  background:var(--lr-vplate); border-radius:999px; padding:3px 9px;
  box-shadow: inset 0 0 0 1px var(--lr-vrim), 0 0 0 1px var(--lr-vhalo);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* NO transition on inset-block-end. The lift is now a min()/max()/calc() clamp, and interpolating
     between two such expressions left the chip measurably PART-CLIPPED and not settling: run 0 of
     the repair instrument read paintedFraction 0.9098 / 0.9696 / 0.9914 on three tiles and the SAME
     three values again a second later, where runs 1 and 2 read 1.0000 for every chip. A name chip
     has no reason to travel; instant is both correct and one fewer duration on the surface. */
}
/* CLEARS THE CONTROL BAND — and is CLAMPED so it can never leave its own tile. MEASURED before the
   clamp: at 3 tiles the bottom-row tiles were 66.50px and a flat 78px lift put the whole chip above
   the tile's top edge, where overflow:hidden erased it — paintedFraction 0.0000 at 3 and at 6
   tiles, 0.1731 at 4, 0.1670 at 5. The JS row floor (_ROWMIN) is what makes the 78px reachable in
   normal states; this clamp is what guarantees the chip is PAINTED even when it is not. */
.lrd-vidgrid.lrd-vstage .lrd-vtile.botrow .lrd-vname{ inset-block-end:min(78px, max(8px, calc(100% - 30px))); }
/* SPOTLIGHT — the big tile IS the bottom row, so its chip landed at the filmstrip's own offset and
   the strip covered it (1371.5 px2 measured, strip z6 over chip z4). In spotlight the chip moves to
   the top inline-END corner: the grab handle is at top inline-START, so nothing meets it there. */
.lrd-vidgrid.lrd-vstage.spot .lrd-vtile .lrd-vname{
  inset-block-end:auto; inset-block-start:8px; inset-inline-start:auto; inset-inline-end:8px; }
/* the identity plate (no picture under it) must not be centred UNDER the control band. Scoped to
   the bottom row, which is exactly where tile order puts the camera-off people. */
.lrd-vidgrid.lrd-vstage .lrd-vtile.botrow .lrd-vid{ padding-block-end:74px; gap:5px; }
.lrd-vidgrid.lrd-vstage .lrd-vtile.botrow .lrd-vid .lrd-mav{ width:min(28%,40px); }
/* ── THE NAME CHIP IS INK TOO — and no amount of bottom padding can settle it ──────────────────
   The rule above clears the CONTROL BAND. It does not clear the CHIP, and the chip is ink: the
   plate centres its content while the chip is anchored at the bottom inline-start, so both want
   the same band. MEASURED off the live surface, one 236x133 tile, with the claim tile's state
   line: line box top 81.60 bottom 102.40 (h 20.80) · chip top 98.20 bottom 125.00 (h 26.80) ·
   overlap 756.50 px2. Every OTHER state survived this only because «بلا كاميرا» / «جارٍ الاتصال…»
   are short enough to clear the chip HORIZONTALLY when centred — luck about string length, not a
   rule, and a rule is what a lock needs.
   PADDING WAS TRIED AND MEASURED AND IS NOT THE ANSWER: 30px took the overlap 756.50 -> 158.87,
   and the value that would close it depends on where the chip is, which differs by row — a botrow
   chip is lifted to 78px, so clearing it would need a 109px reserve inside a 133px tile. That is
   not a bigger number, it is the wrong shape of fix.
   SO THE LINE LEAVES THE BAND INSTEAD OF FIGHTING FOR IT. On the claim plate the sentence is
   ordered ABOVE the avatar, which puts it clear of the chip whatever it says, in any of the three
   languages, at any tile size. Scoped to [data-kind="claimed"], so not one pixel of any state that
   shipped before moves (art.5) — the broad change that would have shrunk every camera-off avatar
   was reverted for exactly that reason. The remaining latent risk for the OTHER identity states is
   REPORTED, not silently re-tuned: a long enough name or line could still meet a chip there, and
   that geometry is the owner's to change, not this wave's.
   AND THE TOP OF THE TILE IS NOT EMPTY EITHER — this was caught by DECODING the screenshot, not by
   reading CSS: `.lrd-vgrab` is a 44px drag handle at the top inline-start corner (z 6, inset 8),
   and it ate «Th» of "The camera is on…" while every box-level number still read clean. 52 = its
   8px inset + its 44px side, so the plate's content starts below it. 3 numbers, one source each:
     · 52px top reserve  = the grab handle's own painted extent
     · min(20%,40px)     = what the avatar must become for 20.8 line + 9 gap + avatar to fit the
                           73px a 133x236 tile leaves after both reserves
     · g._vTall (JS)     = the SOLO claim tile grows like the denied one, because a 146px tile has
                           only 20px between the two reserves and everything in it would overflow.
   Graded against BOTH controls, solo and multi-tile, in ar/ku/en, by cam-source-unity-gate.js. */
.lrd-vidgrid.lrd-vstage .lrd-vtile[data-kind="claimed"] .lrd-vid{
  flex-direction:column-reverse; padding-block-start:52px; }
.lrd-vidgrid.lrd-vstage .lrd-vtile[data-kind="claimed"] .lrd-vid .lrd-mav{ width:min(20%,40px); }
.lrd-vidgrid.lrd-vstage.lrd-vbar-cmp .lrd-vtile.botrow .lrd-vid{ padding-block-end:58px; }
/* the DENIED tile carries a 44px recovery button. MEASURED before this: «كيف أسمح؟» was 38.9%
   covered by #lrdVPrim (1408 px2 of 3616) and a real click on the button's own centre pixel fired
   THE PRIMARY — voice.on went true -> false. The stage is grown (JS: g._vTall) and the plate is
   given the band's height back, so the two cannot meet. */
.lrd-vidgrid.lrd-vstage .lrd-vtile[data-kind="denied"] .lrd-vid{ padding-block-end:78px; }
.lrd-vidgrid.lrd-vstage .lrd-vtile[data-kind="denied"] .lrd-vid .lrd-mav{ width:min(26%,56px); }
.lrd-vidgrid.lrd-vstage .lrd-vname svg{ width:12px; height:12px; flex:0 0 auto; }
.lrd-vidgrid.lrd-vstage .lrd-vname .lrd-vcrop{ font-variant-numeric:tabular-nums; opacity:.9; }

/* ── THE THREE CIRCLES · 44 · 56 · 44, centred, in FIXED tracks ──────────────────────────────
      The bar is a three-column GRID with fixed track widths, not a flex. When a slot has no
      control it renders an inert aria-hidden spacer of the same width, so the mic satellite's
      painted x is IDENTICAL in every state at a given width — a geometry the code owns.
      Total width 44+56+44+8+8 = 160px, fixed, forever. In a 236px stage that leaves 38px each
      side, which is why this bar can never fold and never needs a min-width bump on touch. ── */
.lrd-vidgrid.lrd-vstage .lrd-vbar{
  position:absolute; inset-inline:0; inset-block-end:14px; z-index:6;
  display:grid; grid-template-columns:44px 56px 44px; gap:8px;
  justify-content:center; align-items:center; pointer-events:none;
}
.lrd-vidgrid.lrd-vstage .lrd-vbar > *{ pointer-events:auto; }
.lrd-vidgrid.lrd-vstage .lrd-vspacer{ pointer-events:none; visibility:hidden; }
.lrd-vidgrid.lrd-vstage .lrd-vsat,
.lrd-vidgrid.lrd-vstage #lrdVPrim{
  border:0; border-radius:999px; display:grid; place-items:center; cursor:pointer; padding:0;
  color:var(--lr-vink); background:var(--lr-vplate); font-family:inherit;
  -webkit-backdrop-filter:var(--lr-vplate-fx); backdrop-filter:var(--lr-vplate-fx);
  /* TWO RIM POLARITIES on every control. A single light rim measured 1.02-1.03:1 over mid-grey
     and vanished; a dark halo alone bought exactly zero over deep red. They grade different
     beds, so both ship. The deep-red hole (2.16:1) is an accepted, NAMED cost — the response
     to it is the GEOMETRIC channel: 56px against 44px in a slot that never moves. */
  box-shadow: inset 0 0 0 1.5px var(--lr-vrim),
              0 0 0 1px var(--lr-vhalo),
              0 3px 12px var(--lr-vshadow);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.lrd-vidgrid.lrd-vstage .lrd-vsat{ width:44px; height:44px; }
.lrd-vidgrid.lrd-vstage .lrd-vsat svg{ width:19px; height:19px; stroke-width:2.2; }
.lrd-vidgrid.lrd-vstage #lrdVPrim{ width:56px; height:56px;
  box-shadow: inset 0 0 0 2px var(--lr-crimson), 0 0 0 1.5px var(--lr-vhalo2), 0 4px 14px var(--lr-vshadow); }
.lrd-vidgrid.lrd-vstage #lrdVPrim svg{ width:24px; height:24px; stroke-width:2.2; }
.lrd-vidgrid.lrd-vstage .lrd-vsat:not(:disabled):hover,
.lrd-vidgrid.lrd-vstage #lrdVPrim:not(:disabled):hover{ transform:translateY(-1px); }
.lrd-vidgrid.lrd-vstage .lrd-vsat.on{ background:color-mix(in srgb, var(--lr-crimson) 30%, var(--lr-vhalo2)); }
/* THE PRIMARY, LIVE — the app's OWN active device, byte-for-byte the .pcbtn.on treatment:
   a crimson gradient fill + a top inset gloss + a crimson outward glow. Ring when idle, FILL
   when live: three channels, none of them a hue change (ring<->fill geometry, glyph shape,
   accessible name), so a colour-blind reader still reads the state. Idle ink 9.75:1; live ink
   4.93:1 — AA pass, AAA fail, DECLARED rather than hidden, because making it AAA would mean
   abandoning the brand's own active device on exactly one surface. */
.lrd-vidgrid.lrd-vstage #lrdVPrim.live{
  /* linear-gradient(180deg,#e94a4a,#c92b2b) is the app's OWN active-key face, copied from
     chart-institutional.css:205 — the declaration, not an approximation of it. The first run of
     cam-gate wrote `linear-gradient(#e94a4a,#c92b2b)`, which paints identically (180deg IS the
     default) but computes to a DIFFERENT string, so the equality gate read false on a surface
     that was already correct. The gate stays a string comparison and the declaration was made to
     match it, rather than the gate loosened to match the declaration. */
  background-image: linear-gradient(180deg,#e94a4a,#c92b2b); background-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow: inset 0 1.5px 1px var(--lr-vrim),
              0 0 0 1.5px var(--lr-vhalo2),
              0 4px 9px -2px color-mix(in srgb, var(--lr-crimson) 38%, transparent);
}
.lrd-vidgrid.lrd-vstage #lrdVPrim[disabled]{ cursor:default; opacity:1; }
.lrd-vidgrid.lrd-vstage #lrdVPrim[aria-busy="true"] svg{ animation:lrVbusy 1.1s var(--ease) infinite; }
@keyframes lrVbusy{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
/* THE BAR SIZE LAW — the answer to "a control band over a small tile" that never makes a live
   control invisible. Two sizes, chosen from the PAINTED stage box by JS (art.2), never from a
   width query. Under a coarse pointer Standard is mandatory (the block further down). */
.lrd-vidgrid.lrd-vstage.lrd-vbar-cmp .lrd-vbar{ grid-template-columns:36px 44px 36px; gap:6px; inset-block-end:10px; }
.lrd-vidgrid.lrd-vstage.lrd-vbar-cmp .lrd-vsat{ width:36px; height:36px; }
.lrd-vidgrid.lrd-vstage.lrd-vbar-cmp .lrd-vsat svg{ width:16px; height:16px; }
.lrd-vidgrid.lrd-vstage.lrd-vbar-cmp #lrdVPrim{ width:44px; height:44px; }
.lrd-vidgrid.lrd-vstage.lrd-vbar-cmp #lrdVPrim svg{ width:20px; height:20px; }
.lrd-vidgrid.lrd-vstage.lrd-vbar-cmp .lrd-vtile.botrow .lrd-vname{ inset-block-end:min(62px, max(8px, calc(100% - 30px))); }

/* the explicit drag handle. Drag-anywhere is not discoverable; a visible handle is. Both ship,
   because the handle costs 28px. */
.lrd-vidgrid.lrd-vstage .lrd-vgrab{
  position:absolute; inset-inline-start:8px; inset-block-start:8px; z-index:6;
  width:28px; height:28px; border:0; border-radius:999px; cursor:move; touch-action:none; padding:0;
  display:grid; place-items:center; color:var(--lr-vink); background:var(--lr-vplate);
  -webkit-backdrop-filter:var(--lr-vplate-fx); backdrop-filter:var(--lr-vplate-fx);
  box-shadow: inset 0 0 0 1px var(--lr-vrim), 0 0 0 1px var(--lr-vhalo);
}
.lrd-vidgrid.lrd-vstage .lrd-vgrab i{ display:block; width:12px; height:8px; background:currentColor;
  -webkit-mask:radial-gradient(#000 1.1px, transparent 1.4px) 0 0/4px 4px; mask:radial-gradient(#000 1.1px, transparent 1.4px) 0 0/4px 4px; }

/* SPOTLIGHT — the filmstrip carries _avatar(m) (the real profile photo, else the initial) and
   NO <video> and NO controls. The ground phase measured a reversible 60->30fps halving of the
   page's rAF rate on the SECOND live <video> (6 of 6 cycles, two independent stream sources,
   main-thread work unchanged at 2.1-3.0ms/frame; mechanism REAL_OPERATION_VERIFICATION_REQUIRED).
   A design that multiplies <video> elements to make 56px thumbnails is spending a budget nobody
   has measured. The shipped filmstrip tile is 58x36.25px carrying 25-30px controls — a control
   wider than half its own tile — with a 9px name chip at 60.4-61.7% of the tile. */
/* max-inline-size was calc(100% - 180px) — a 56px window at the 236px default, i.e. exactly ONE
   chip, with no scrollbar of any kind. MEASURED with six participants: 4 of 5 chips had
   paintedFraction 0 and hit-tested to the <video> beneath. The window is the stage's own width now,
   and room-dock.js counts the tail into a «+N» chip rather than scrolling it out of sight. */
.lrd-vidgrid.lrd-vstage .lrd-vstrip{
  position:absolute; inset-inline-start:8px; inset-block-end:78px; z-index:6;
  display:none; gap:6px; max-inline-size:calc(100% - 16px); overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
}
.lrd-vidgrid.lrd-vstage .lrd-vchipmore{ font-size:15px; font-weight:800; color:var(--lr-ink2);
  background:var(--card2); font-variant-numeric:tabular-nums; font-family:inherit; }
.lrd-vidgrid.lrd-vstage .lrd-vstrip::-webkit-scrollbar{ display:none; }
.lrd-vidgrid.lrd-vstage.spot .lrd-vstrip{ display:flex; }
.lrd-vidgrid.lrd-vstage.lrd-vbar-cmp .lrd-vstrip{ inset-block-end:62px; }
.lrd-vidgrid.lrd-vstage .lrd-vchip{
  flex:0 0 auto; width:56px; height:56px; border:0; border-radius:999px; overflow:hidden; padding:0;
  cursor:pointer; background:var(--card); display:grid; place-items:center;
  box-shadow:0 0 0 1px var(--lr-vhalo);
}
.lrd-vidgrid.lrd-vstage .lrd-vchip .lrd-mav{ width:100%; height:100%; font-size:19px; }
.lrd-vidgrid.lrd-vstage .lrd-vchip[aria-selected="true"]{ box-shadow:0 0 0 2px var(--lr-crimson), 0 0 0 4px var(--lr-vhalo2); }
.lrd-vidgrid.lrd-vstage .lrd-vchip.speaking{ box-shadow:0 0 0 2px var(--lr-crimson), 0 0 0 4px var(--lr-vhalo2); }
/* the honest "+N" cell — the stage NEVER scrolls; the long tail is counted, not painted.
   The same spectator pattern _memTotal() already establishes in this file. */
.lrd-vidgrid.lrd-vstage .lrd-vplus{
  display:grid; place-items:center; background:var(--card2); color:var(--lr-ink2);
  font-size:15px; font-weight:800; font-variant-numeric:tabular-nums;
}

/* MINIMISE -> THE PUCK. Today's minimised state is a 35.6px bar showing the word «الفيديو» with
   0 of 8 grips, and it is the only restore path out of a state whose only affordance this design
   removes. The puck is 56px, shows the spotlit-or-self picture, rings crimson when anything of
   yours is live, and it drags. ART.5 BEHAVIOUR CHANGE — flagged for the owner, covered by the flag. */
.lrd-vidgrid.lrd-vstage.lrd-vgmin{
  width:56px !important; height:56px !important; min-height:0; max-height:none; max-width:none;
  border-radius:999px; box-shadow: var(--el-2), 0 0 0 1px var(--lr-vhalo);
}
.lrd-vidgrid.lrd-vstage.lrd-vgmin .lrd-vgtiles{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-auto-rows:minmax(0,1fr) !important; }
.lrd-vidgrid.lrd-vstage.lrd-vgmin .lrd-vtile{ display:none; }
.lrd-vidgrid.lrd-vstage.lrd-vgmin .lrd-vtile.puck{ display:block; grid-area:1/1; }
.lrd-vidgrid.lrd-vstage.lrd-vgmin .lrd-vname,
.lrd-vidgrid.lrd-vstage.lrd-vgmin .lrd-vbar,
.lrd-vidgrid.lrd-vstage.lrd-vgmin .lrd-vstrip,
.lrd-vidgrid.lrd-vstage.lrd-vgmin .lrd-vgrab,
.lrd-vidgrid.lrd-vstage.lrd-vgmin .lrd-vidln,
.lrd-vidgrid.lrd-vstage.lrd-vgmin .lrd-vprog{ display:none; }
.lrd-vidgrid.lrd-vstage.lrd-vgmin.lrd-vlive{ box-shadow: var(--el-2), 0 0 0 2px var(--lr-crimson), 0 0 0 3.5px var(--lr-vhalo2); }
.lrd-vidgrid.lrd-vstage .lrd-vpuckhit{ position:absolute; inset:0; z-index:7; border:0; background:transparent; cursor:pointer; display:none; }
.lrd-vidgrid.lrd-vstage.lrd-vgmin .lrd-vpuckhit{ display:block; }
/* the top edge-handle inset existed ONLY to clear the header buttons that are now gone. Deleting
   the header's z8 cluster also makes .lrd-rz-ne hittable for free — it was the one grip of eight
   whose elementFromPoint did not return itself. */
.lrd-vidgrid.lrd-vstage .lrd-rz-n{ inset-inline-end:16px; }
.lrd-vidgrid.lrd-vstage.lrd-vgmin .lrd-rz{ display:none; }
/* THE FOUR CORNER CHEVRONS WERE PAINTED ON THE PICTURE AT REST. `.lrd-rz-se::after` and its three
   siblings at :1176 declare opacity:.65 and were never scoped out of this surface, so at rest —
   mouse parked, no hover — four 10x10 diagonal wedges sat in all four corners of the video, which
   is chrome on the image this surface exists to clear, and the owner's reference has nothing in the
   corners. They now match the n/s/e/w edge grips, which were already hover-only. This is NOT
   concealment (art.9): the grip itself is unchanged, still 22px, still hit-testable, and still
   carries its own resize cursor — the cursor is the affordance, and hovering paints the mark. */
.lrd-vidgrid.lrd-vstage .lrd-rz-se::after,
.lrd-vidgrid.lrd-vstage .lrd-rz-sw::after,
.lrd-vidgrid.lrd-vstage .lrd-rz-ne::after,
.lrd-vidgrid.lrd-vstage .lrd-rz-nw::after{ opacity:0; transition:opacity var(--dur-1) var(--ease); }
.lrd-vidgrid.lrd-vstage .lrd-rz-se:hover::after,
.lrd-vidgrid.lrd-vstage .lrd-rz-sw:hover::after,
.lrd-vidgrid.lrd-vstage .lrd-rz-ne:hover::after,
.lrd-vidgrid.lrd-vstage .lrd-rz-nw:hover::after{ opacity:1; }
/* an edge that CLAMPS says so for 180ms instead of silently not moving (art.9). No toast — a
   toast on every drag is noise. */
.lrd-vidgrid.lrd-vstage .lrd-rz.lrd-clamp::before{ opacity:.95 !important; }

/* the surface's own focus ring. The app's shipped ring is 2px solid crimson at 2px offset — and
   ON the crimson-ringed primary that ring is INVISIBLE. White inside a dark halo: two channels,
   legible over any frame. */
.lrd-vidgrid.lrd-vstage .lrd-vsat:focus-visible,
.lrd-vidgrid.lrd-vstage #lrdVPrim:focus-visible,
.lrd-vidgrid.lrd-vstage .lrd-vchip:focus-visible,
.lrd-vidgrid.lrd-vstage .lrd-vgrab:focus-visible,
.lrd-vidgrid.lrd-vstage .lrd-vhow:focus-visible,
.lrd-vidgrid.lrd-vstage .lrd-vtile:focus-visible{
  outline:2px solid var(--lr-vink); outline-offset:2px; box-shadow:0 0 0 5px var(--lr-vhalo3);
}
/* the one screen-reader line. Visually hidden, never display:none — a display:none live region
   is not announced. */
.lrd-vidgrid.lrd-vstage .lrd-sr{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ── PHONE — DESIGNED, not shrunk. This closes a FAILED. ──────────────────────────────────────
   MEASURED today: the shipped rule pins bottom:calc(var(--lr-sheet) + 16px) with NOTHING
   constraining top, so with two tiles the stage lands at y = -93.83 at 375x780 and -124.25 at
   414x800, with 5 of 5 controls failing elementFromPoint and inViewport=false.
   THE FIX BINDS THE HEIGHT CEILING TO --lr-sheet, the SAME token the sheet, the chart margin and
   the FAB already use, so the two can never disagree and overflow becomes structurally
   impossible rather than clamped after the fact. The landscape arm exists because a 780x375
   landscape phone misses a width-only query and falls through to the desktop panel. */
@media (max-width:760px), (max-height:520px){
  .lrd-vidgrid.lrd-vstage{
    inset-inline:8px !important; inset-block-end:calc(var(--lr-sheet) + 8px) !important;
    inset-block-start:auto !important; top:auto !important; bottom:auto;
    height:116px !important; max-height:calc(100dvh - var(--lr-sheet) - 72px) !important;
    min-height:0; width:auto !important; max-width:none !important;
    box-shadow: var(--el-2), 0 0 0 1px color-mix(in srgb, var(--line) 62%, transparent);
  }
  body:not(.lr-docked) .lrd-vidgrid.lrd-vstage{ inset-block-end:12px !important; max-height:calc(100dvh - 140px) !important; }
  /* grid-auto-columns:minmax(140px,1fr) — MEASURED, not chosen. With `auto` + aspect-ratio:16/9 the
     tiles sized to their own ratio inside a fixed 116px row and left the end of the stage EMPTY:
     picture/box was 0.8612 at 375 and 0.9563 at 414 against a 0.97 floor. 1fr fills the stage
     while the tiles fit; the 140px floor turns the row into a scroller once they cannot, instead
     of shrinking every face to a sliver. aspect-ratio is dropped here because the row height is
     already fixed — leaving it in makes the two constraints fight. */
  .lrd-vidgrid.lrd-vstage .lrd-vgtiles{ grid-template-columns:none !important; grid-auto-flow:column;
    grid-auto-columns:minmax(140px,1fr); grid-template-rows:minmax(0,1fr) !important; overflow-x:auto; overflow-y:hidden; }
  /* NO control sits on a phone tile: a 116px tile cannot carry a 44px control without it
     exceeding 25% of the tile — the same rule that kills a 30px button on a 58px filmstrip.
     On a phone the primary lives on the dock sheet's own 44px action strip, where #lrdVCam and
     #lrdVJoin are already gate-locked against folding (landing-fold.json F1, 30 of 30). When the
     sheet is collapsed, the picture takes the bar back. */
  /* …BUT THE ⋯ MENU IS NOT A MEDIA CONTROL AND IT MUST NOT GO WITH THEM. MEASURED with the whole
     bar hidden: at 375x780, docked, `reachableStageButtons` was exactly ["lrd-vgrab"] — one control
     on the picture, and (before the _vgDrag fix) it could not even drag. Minimise, maximise, reset
     position, spotlight, fit-whole-picture, fullscreen and mute-peer were ALL unreachable while
     docked, because they live behind #lrdVMore. The resize grips are display:none here and the
     legacy header is display:none, so functional reach on a phone was 3 -> 0.
     So slot C stays, alone, in the corner. The drag handle goes instead — and it is not a trade of
     one dead control for another: the phone arm pins inset-inline and inset-block-end with
     !important, which INLINE styles cannot beat, so free-dragging is inert here by construction. */
  .lrd-vidgrid.lrd-vstage .lrd-vbar{ display:grid; grid-template-columns:44px; gap:0;
    inset-inline:auto 8px; inset-block-end:8px; justify-content:end; }
  .lrd-vidgrid.lrd-vstage .lrd-vbar #lrdVMicSat,
  .lrd-vidgrid.lrd-vstage .lrd-vbar #lrdVPrim{ display:none; }
  body:not(.lr-docked) .lrd-vidgrid.lrd-vstage .lrd-vbar{ grid-template-columns:44px 56px 44px; gap:8px;
    inset-inline:0; inset-block-end:14px; justify-content:center; }
  body:not(.lr-docked) .lrd-vidgrid.lrd-vstage .lrd-vbar #lrdVMicSat{ display:grid; }
  body:not(.lr-docked) .lrd-vidgrid.lrd-vstage .lrd-vbar #lrdVPrim{ display:grid; }
  .lrd-vidgrid.lrd-vstage .lrd-vgrab{ display:none; }
  .lrd-vidgrid.lrd-vstage .lrd-vstrip{ display:none !important; }
  .lrd-vidgrid.lrd-vstage .lrd-rz{ display:none; }
  .lrd-vidgrid.lrd-vstage .lrd-vtile.botrow .lrd-vname{ inset-block-end:8px; }
  .lrd-vidgrid.lrd-vstage .lrd-vtile.botrow .lrd-vid{ padding-block-end:8px; }
  /* the claim plate's reversed order needs no phone arm: it is an ORDER, not a number, so it is
     correct at any tile size. Stated rather than assumed — no figure in
     docs/rooms/evidence/camera/cam-source-unity.json was taken on a phone viewport. */
  /* the phone grid is ONE row (grid-auto-flow:column), so when the sheet is collapsed and the full
     bar comes back onto the picture, EVERY chip is a bottom-row chip. Higher specificity than the
     botrow rule above, on purpose. */
  body:not(.lr-docked) .lrd-vidgrid.lrd-vstage .lrd-vtile .lrd-vname{ inset-block-end:78px; }
  /* a REFUSED camera has to carry a 44px recovery button, which a 116px strip cannot do */
  .lrd-vidgrid.lrd-vstage.lrd-vtall{ height:210px !important; }
  .lrd-vidgrid.lrd-vstage .lrd-vtile[data-kind="denied"] .lrd-vid{ padding-block-end:8px; }
  .lrd-vidgrid.lrd-vstage .lrd-vtile[data-kind="denied"] .lrd-vid .lrd-mav{ width:min(20%,40px); }
  body:not(.lr-docked) .lrd-vidgrid.lrd-vstage .lrd-vtile[data-kind="denied"] .lrd-vid{ padding-block-end:78px; }
  .lrd-vidgrid.lrd-vstage.lrd-vgmin{ inset-block-end:calc(var(--lr-sheet) + 8px) !important;
    inset-inline-start:auto !important; inset-inline-end:8px !important; width:56px !important; height:56px !important; }
}
/* coarse pointer: Standard is mandatory, and the 44px floor reaches every camera control.
   Scoped to .lrd-vstage so it outranks the generic .lrd-vtb bump above, which names an element
   this surface no longer emits. */
@media (hover:none){
  .lrd-vidgrid.lrd-vstage .lrd-vgrab{ width:44px; height:44px; }
  .lrd-vidgrid.lrd-vstage.lrd-vbar-cmp .lrd-vbar{ grid-template-columns:44px 56px 44px; gap:8px; inset-block-end:14px; }
  .lrd-vidgrid.lrd-vstage.lrd-vbar-cmp .lrd-vsat{ width:44px; height:44px; }
  .lrd-vidgrid.lrd-vstage.lrd-vbar-cmp .lrd-vsat svg{ width:19px; height:19px; }
  .lrd-vidgrid.lrd-vstage.lrd-vbar-cmp #lrdVPrim{ width:56px; height:56px; }
  .lrd-vidgrid.lrd-vstage.lrd-vbar-cmp #lrdVPrim svg{ width:24px; height:24px; }
}
@media (pointer:coarse){
  .lrd-vidgrid.lrd-vstage .lrd-vsat,
  .lrd-vidgrid.lrd-vstage .lrd-vchip,
  .lrd-vidgrid.lrd-vstage .lrd-vgrab{ min-width:44px; min-height:44px; }
  .lrd-vidgrid.lrd-vstage #lrdVPrim{ min-width:56px; min-height:56px; }
}
/* REDUCED MOTION. The global kill at dashboard.css:215 is unscoped and MEASURED working (every
   duration inside #lrdDock/#lrdVidGrid collapses to 1e-06s across 350 elements) — but relying on
   a global from another stylesheet is exactly the coupling that breaks silently, and a collapsed
   LOOP still has to land somewhere correct. Both loops are named here explicitly, and each one's
   resting appearance is a real state, not a frozen mid-frame. */
@media (prefers-reduced-motion:reduce){
  .lrd-vidgrid.lrd-vstage .lrd-vprog i{ animation:none; transform:none; inset-inline-start:0; width:100%; opacity:.55; }
  .lrd-vidgrid.lrd-vstage #lrdVPrim[aria-busy="true"] svg{ animation:none; opacity:1; }
  .lrd-vidgrid.lrd-vstage .lrd-vtile{ animation:none; }
}

/* THE PRIMACY LAW, the strip half. MEASURED: with the camera on, :881-883 paint #lrdVJoin
   (.join.on) AND #lrdVCam (.cam.on) in byte-identical rgb(226,59,59) — two co-primaries is no
   primary. While the stage owns the primary, the strip's media-state buttons keep saying they
   are live in TWO channels (border hue + the label «مغادرة الصوت» / «إيقاف الكاميرا») without a
   second crimson FILL. The buttons themselves are untouched: room-dock.js swaps the class on the
   existing node AFTER _mediaFold, so nothing is re-emitted, re-bound or re-ordered and the
   landing-fold.json F1 guarantee (Join-voice + Camera never fold, 30 of 30) is not in the path. */
/* `transition:none` IS THE SECOND HALF OF THE FIX, and it is not cosmetic. A CSS transition is
   driven by the AFTER-change style, so declaring none here makes the on -> lrd-live swap INSTANT
   even if it lands in a later task. MEASURED before it, 3 real presses of #lrdVMicSat, none
   discarded: #lrdVJoin and #lrdVCam computed EXACT rgb(226,59,59) while ALREADY carrying
   `lrd-vbtn join lrd-live` — 3 / 4 / 3 consecutive samples, crimson-ish until 181.0 / 264.4 /
   224.0 ms, because `.lrd-vbtn` transitions `background .14s` and the swap animated DOWN from
   crimson. There is no state change to animate: this node was never meant to be filled. */
.lrd-vbtn.join.lrd-live,.lrd-vbtn.cam.lrd-live,.lrd-vbtn.scr.lrd-live{
  background:transparent; color:var(--lr-crimson); transition:none;
  border-color:color-mix(in srgb, var(--lr-crimson) 55%, transparent); }
.lrd-vbtn.join.lrd-live:hover,.lrd-vbtn.cam.lrd-live:hover,.lrd-vbtn.scr.lrd-live:hover{
  background:color-mix(in srgb, var(--lr-crimson) 10%, transparent); filter:none; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   THE LOCATOR — «أنا أفتح الكاميرا — بس وين؟» (owner, 2026-08-10, Kurdish UI)
   ══════════════════════════════════════════════════════════════════════════════════════════════
   REPRODUCED BEFORE IT WAS STYLED (docs/rooms/evidence/camera/cam-where-diag.json, A1): with the
   minimise preference saved from an earlier session, pressing the camera left #lrdVCam reading
   «وەستاندنی کامێرا» with one live video track, and the ONLY painted <video> on a 1536x900 screen
   was 56.00 x 56.00 at (348, 782) — whose own centre hit-tested to BUTTON.lrd-vpuckhit, not to the
   picture. Nothing on the surface said why. This chip is the sentence that was missing.

   IT IS NOT A SECOND PRIMARY. The primacy law above allows exactly ONE crimson FILL on this bar,
   and this is not it: the chip is an OUTLINE in the same crimson family as `.lrd-live`, so the
   reader sees one filled control and one outlined answer, never two co-primaries. The live fact is
   carried in THREE channels that are not hue — a dot, a reticle glyph and a word — so a
   colour-blind reader loses nothing (BR-AGI-001 · art.3: crimson is brand, never direction).

   C4 — WHEN IT SAYS NOTHING IT IS NOTHING. `[hidden]` here has to beat `.lrd-media .lrd-vbtn`
   (0,2,0), which sets display:flex; the UA's `[hidden]{display:none}` is (0,1,0) and loses. An
   invisible control that is still clickable is exactly the defect `.lrd-vtctl` shipped once
   (opacity:0 with pointer-events:auto), and it is closed here by construction, not by hoping.
   C5 — `.lrd-dock button{min-height:44px;min-width:44px}` at :1479 already covers this node on a
   coarse pointer BY THE CASCADE, and that is all this comment may claim. The gate carries the arm
   that would measure it (cam-where-gate.js, W7_coarse44) and that arm is recorded **NOT RUN**:
   puppeteer reloads the page when hasTouch/isMobile change and the phone-viewport re-entry did not
   complete. So C5 is ARGUED here, not measured — see cam-locator.json.
   ART.15 — PC.lrCamWhere=false removes the chip in JS; nothing here needs to be undone. */
.lrd-vwhere[hidden]{ display:none !important; }
.lrd-media .lrd-vbtn.lrd-vwhere{
  background:transparent; color:var(--lr-crimson); transition:none;
  border-color:color-mix(in srgb, var(--lr-crimson) 55%, transparent);
  gap:6px; padding-inline:10px; }
.lrd-media .lrd-vbtn.lrd-vwhere:hover{
  background:color-mix(in srgb, var(--lr-crimson) 10%, transparent); filter:none; }
.lrd-vwhere .lrd-wdot{ width:7px; height:7px; border-radius:999px; flex:0 0 auto;
  background:var(--lr-crimson); box-shadow:0 0 0 2.5px color-mix(in srgb, var(--lr-crimson) 20%, transparent); }
.lrd-vwhere svg{ width:14px; height:14px; opacity:.9; }
@keyframes lrWhereDot{ 0%,100%{ opacity:1; } 50%{ opacity:.32; } }
.lrd-vwhere .lrd-wdot{ animation:lrWhereDot 1.9s ease-in-out infinite; }
/* the resting frame of the loop is a REAL state (a lit dot), not a frozen mid-frame */
@media (prefers-reduced-motion:reduce){ .lrd-vwhere .lrd-wdot{ animation:none; opacity:1; } }
/* THE LOCATOR'S OWN LINE — arithmetic, not taste. MEASURED (cam-where-barprobe.json, Kurdish,
   owner dock width 348, camera ON): #lrdMedia clientWidth 347 vs scrollWidth 551, and after the
   fold had folded every foldable control the row still held #lrdVJoin 201.07..335.20 and #lrdVCam
   65.11..194.08 — 58.11px left for the next slot against a 165.39px chip. The first build painted
   the answer at x=-107.28, outside the bar's track, elementFromPoint null at its own centre.
   Without the chip the same row already needs ~374px of 347, so there was no budget to take: the
   strip wraps for exactly as long as the picture cannot be found, and the chip owns a full line.
   Row 1 is still decided by the SHIPPED one-line fold — room-dock.js drops this class and takes
   the chip out of the measurement before calling _mediaFold, so neither that function nor the F1
   fold guarantee is in this path. `order` is visual only; the fold reads el.children. */
.lrd-media.lrd-media-locate{ flex-wrap:wrap; overflow-x:visible; row-gap:7px;
  -webkit-mask-image:none !important; mask-image:none !important; }
.lrd-media.lrd-media-locate .lrd-vbtn.lrd-vwhere{ flex:1 0 100%; order:99; justify-content:center; }