/* webinar-room.css — the automated as-live room widget (webinar-room-widget.js).
   Self-contained on purpose: this renders on the webinar's PUBLISHED site, which
   does not carry the coach app's design tokens, so values are concrete (with the
   brand accent overridable via --wbr-accent if the shell sets it). */
.wbr {
  --wbr-accent: #6a4cf1;
  --wbr-ink: #191b28;
  --wbr-soft: #6f7390;
  display: grid; grid-template-columns: 1fr 320px; gap: 16px;
  max-width: 1200px; margin: 0 auto; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--wbr-ink);
}
@media (max-width: 860px) { .wbr { grid-template-columns: 1fr; } }
.wbr-loading, .wbr-msg { padding: 40px 20px; text-align: center; color: var(--wbr-soft); font-size: 15px; }

.wbr-stage { position: relative; background: #000; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; }
.wbr-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.wbr-pops { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; pointer-events: none; }
.wbr-pop { pointer-events: auto; background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 8px 30px rgba(0,0,0,.25); animation: wbr-rise .28s ease; }
@keyframes wbr-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.wbr-pop-h { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.wbr-pop-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; background: var(--wbr-accent); color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 14px; }
.wbr-offer { border-left: 4px solid var(--wbr-accent); }
.wbr-poll-opt { display: block; width: 100%; min-height: 44px; box-sizing: border-box; text-align: left; margin: 6px 0 0; padding: 11px 12px; border: 1px solid #e3e4ef; border-radius: 8px; background: #fafaff; cursor: pointer; font: inherit; }
.wbr-poll-opt:hover { border-color: var(--wbr-accent); }
.wbr-handout a, .wbr-ann { font-size: 14px; }
.wbr-ann { background: #fff; }

.wbr-side { border: 1px solid #e7e8f0; border-radius: 14px; display: flex; flex-direction: column; min-height: 320px; max-height: 70vh; }
.wbr-side-h { font-weight: 700; font-size: 14px; padding: 12px 14px; border-bottom: 1px solid #eff0f6; }
.wbr-chat { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.wbr-chat-line { font-size: 13.5px; line-height: 1.45; }
.wbr-chat-line b { color: var(--wbr-accent); }

.wbr-wait, .wbr-ended { grid-column: 1 / -1; text-align: center; padding: 64px 20px; background: linear-gradient(180deg, #f7f7fb, #fff); border-radius: 14px; }
.wbr-wait-h, .wbr-ended-h { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.wbr-wait-c { font-size: 34px; font-weight: 800; color: var(--wbr-accent); font-variant-numeric: tabular-nums; }
.wbr-ended-sub { color: var(--wbr-soft); font-size: 15px; margin-top: 8px; }

/* In-room offer scarcity countdown */
.wbr-offer-count { font-size: 13px; font-weight: 700; color: #c0423a; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.wbr-offer-closed { opacity: .6; }
.wbr-offer-closed .wbr-offer-count { color: #6f7390; }

/* In-room AI host assistant: the ask box */
.wbr-ask { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #eff0f6; }
.wbr-ask-in { flex: 1; min-height: 44px; box-sizing: border-box; padding: 11px 12px; border: 1px solid #e3e4ef; border-radius: 8px; font: inherit; font-size: 13.5px; }
.wbr-ask-go { min-height: 44px; padding: 9px 16px; border: 0; border-radius: 8px; background: var(--wbr-accent); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.wbr-chat-line.wbr-me b { color: var(--wbr-ink); }
.wbr-chat-line.wbr-host b { color: var(--wbr-accent); }

/* ── Live room (IVS): coach broadcast + attendee viewer ── */
.wbl { max-width: 1100px; margin: 0 auto; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #191b28; }
/* Live room = stage + chat side (mirrors the automated room's .wbr grid).
   Stacks on mobile: chat under the video. */
.wbl-live-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .wbl-live-grid { grid-template-columns: 1fr; } }
.wbl-side { border: 1px solid #e7e8f0; border-radius: 14px; display: flex; flex-direction: column; min-height: 320px; max-height: 70vh; background: #fff; }
.wbl-side-h { font-weight: 700; font-size: 14px; padding: 12px 14px; border-bottom: 1px solid #eff0f6; }
.wbl-chat { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.wbl-chat-line { font-size: 13.5px; line-height: 1.45; }
.wbl-chat-line b { color: #191b28; }
.wbl-chat-line.wbl-chat-host b { color: #6a4cf1; }
.wbl-ask { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #eff0f6; }
.wbl-ask-in { flex: 1; padding: 10px 11px; border: 1px solid #e3e4ef; border-radius: 8px; font: inherit; font-size: 13.5px; min-height: 44px; box-sizing: border-box; }
.wbl-ask-go { padding: 9px 14px; border: 0; border-radius: 8px; background: #6a4cf1; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; min-height: 44px; }
.wbl-chat-note { padding: 8px 14px; font-size: 12px; color: #6f7390; border-top: 1px solid #eff0f6; }
/* Coach hand queue (R4): raised hands + on-stage guests, invite/remove. */
.wbl-hands { border-bottom: 1px solid #eff0f6; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.wbl-hands-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6f7390; }
.wbl-hand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wbl-hand-name { font-size: 13px; font-weight: 600; color: #191b28; }
.wbl-hand-btn { font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: #6a4cf1; border: 0; border-radius: 8px; padding: 6px 12px; min-height: 44px; cursor: pointer; }
.wbl-hand-btn.danger { background: #fff; color: #c0423a; border: 1px solid #e3e4ef; }
.wbl-hand-btn.danger:hover { border-color: #c0423a; }
/* Coach private-message (DM) inbox (L7): one thread per attendee who messaged
   the host privately. Inbox list + a focused thread panel with a reply box. */
.wbl-dm { border-bottom: 1px solid #eff0f6; display: flex; flex-direction: column; }
.wbl-dm-n { color: #6a4cf1; font-weight: 700; }
.wbl-dm-list { display: flex; flex-direction: column; max-height: 168px; overflow-y: auto; }
.wbl-dm-row { display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; width: 100%; background: none; border: 0; border-bottom: 1px solid #f3f4fa; padding: 9px 14px; cursor: pointer; font: inherit; min-height: 44px; }
.wbl-dm-row:hover { background: #f7f7fc; }
.wbl-dm-row-who { font-size: 13px; font-weight: 700; color: #191b28; }
.wbl-dm-row-pre { font-size: 12px; color: #6f7390; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbl-dm-thread { display: flex; flex-direction: column; }
.wbl-dm-thread-h { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #eff0f6; }
.wbl-dm-back { font: inherit; font-size: 12px; font-weight: 700; color: #6a4cf1; background: none; border: 0; cursor: pointer; padding: 6px 8px; min-height: 44px; }
.wbl-dm-who { font-size: 13px; font-weight: 700; color: #191b28; }
.wbl-dm-msgs { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; padding: 12px 14px; }
.wbl-dm-msg { align-self: flex-start; max-width: 82%; background: #eff0f6; color: #191b28; font-size: 13px; line-height: 1.4; padding: 7px 10px; border-radius: 12px 12px 12px 4px; }
.wbl-dm-msg.wbl-dm-me { align-self: flex-end; background: #6a4cf1; color: #fff; border-radius: 12px 12px 4px 12px; }
/* Attendee side (L7): a collapsed "Message host privately" opener that expands
   into the private thread. Opener sits below the public chat composer. */
.wbl-dm-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #f7f7fc; border: 0; border-top: 1px solid #eff0f6; color: #4a3ad0; font: inherit; font-size: 12.5px; font-weight: 700; padding: 11px 14px; min-height: 44px; cursor: pointer; }
.wbl-dm-open:hover { background: #efeafd; }
.wbl-dm-badge { background: #6a4cf1; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 99px; }
.wbl-dm-attendee { border-top: 1px solid #eff0f6; }
.wbl-dm-note { border-top: 0; }
.wbl-stage { position: relative; background: #000; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; }
.wbl-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.wbl-badge { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; }
.wbl-badge.on { background: #c0423a; }
.wbl-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* In-broadcast host controls (mic / camera). Light pill; a clear red "off"
   state so the coach can see at a glance they are muted / camera-off. */
.wbl-ctl { font: inherit; font-size: 13px; font-weight: 600; color: #191b28; background: #eff0f6; border: 1px solid #e3e4ef; border-radius: 10px; padding: 10px 14px; min-height: 44px; cursor: pointer; }
.wbl-ctl:hover { border-color: #6a4cf1; }
.wbl-ctl.off { background: #fbe9e7; border-color: #c0423a; color: #c0423a; }
.wbl-ctl.active { background: #6a4cf1; border-color: #6a4cf1; color: #fff; }
/* Picture-in-picture: the host's camera while a screen is shared (screen is
   the main video). Bottom-right, over the stage. */
.wbl-pip { position: absolute; right: 12px; bottom: 12px; width: 22%; min-width: 120px; max-width: 240px; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border: 2px solid #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
/* Live viewer count — a readable pill on the stage (top-right), mirroring the
   live badge top-left. */
.wbl-viewers { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; }
/* ── Multi-publisher gallery (R4 co-hosts) ──
   Every camera on the live stage — host, guests brought up, and you once you
   accept — is a tile. Zoom model: no screen share → a square-ish gallery that
   fills the stage (one speaker = one full-bleed tile, i.e. the pre-co-host
   look); a screen share → the screen is the main video and the cameras drop to
   a filmstrip bottom-right. Grid columns are set inline from the tile count. */
.wbl-grid { position: absolute; inset: 0; display: grid; gap: 6px; padding: 6px; background: #000; grid-auto-rows: 1fr; }
.wbl-grid-empty { display: none; }
.wbl-tile { position: relative; background: #111; border-radius: 8px; overflow: hidden; min-height: 0; min-width: 0; }
.wbl-tile-v { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.wbl-tile-name { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.wbl-tile-self .wbl-tile-name { background: #6a4cf1; }
.wbl-grid.wbl-strip { inset: auto 12px 12px auto; display: flex; gap: 8px; height: 22%; max-height: 140px; width: auto; background: transparent; padding: 0; grid-auto-rows: initial; }
.wbl-grid.wbl-strip .wbl-tile { height: 100%; width: auto; aspect-ratio: 16 / 9; border: 2px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.wbl-audio { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Attendee control bar (raise hand → join stage → leave). Mirrors .wbl-bar. */
.wbl-attendee-bar { min-height: 44px; }
/* ── Native slides (R2b) ──
   Attendee: the shared slide covers the stage (like a screenshare); when it's
   on, any cameras drop to a filmstrip bottom-right, driven by a class on the
   STAGE so renderStage's grid-class rebuild never clobbers it. */
.wbl-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; z-index: 2; }
.wbl-stage.wbl-has-slide .wbl-grid { inset: auto 12px 12px auto; display: flex; gap: 8px; height: 22%; max-height: 140px; width: auto; background: transparent; padding: 0; grid-auto-rows: initial; z-index: 3; }
.wbl-stage.wbl-has-slide .wbl-grid .wbl-tile { height: 100%; width: auto; aspect-ratio: 16 / 9; border: 2px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
/* Coach: the slide control strip (prev / position / next / stop). */
.wbl-slidebar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; background: #eff0f6; border: 1px solid #e3e4ef; border-radius: 10px; flex-wrap: wrap; }
/* In-room offer push strip — same shape as the slide strip. */
.wbl-offerbar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; background: #eff0f6; border: 1px solid #e3e4ef; border-radius: 10px; flex-wrap: wrap; }
.wbl-offer-url { flex: 1 1 200px; min-width: 160px; padding: 10px 12px; border: 1px solid #d7d8e6; border-radius: 8px; font-size: 14px; color: #191b28; background: #fff; }
.wbl-slide-pos { font-size: 13px; font-weight: 700; color: #191b28; font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; }
.wbl-go, .wbl-end { border: 0; border-radius: 10px; padding: 12px 20px; font-weight: 700; font-size: 15px; cursor: pointer; color: #fff; }
.wbl-go { background: #c0423a; }
.wbl-end { background: #4d5168; }
.wbl-go:disabled { opacity: .6; cursor: default; }
.wbl-msg { font-size: 13.5px; color: #6f7390; }
.wbl-msg.bad { color: #c0423a; }
/* Waiting-for-broadcast overlay — light to match the platform (was a dark
   radial). Sits over the black video stage; a soft light panel reads cleaner
   and consistent with .wbr-wait above. */
.wbl-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #191b28; padding: 24px; background: linear-gradient(180deg, #f7f7fb, #fff); }
.wbl-wait-h { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.wbl-wait-s { font-size: 14px; color: #6f7390; }

/* Attendee breakout bar: shown when the coach opens breakouts, or while in one.
   Light surface + brand accent (was a dark #14162a bar + stale #6c63ff). */
.wbl-breakouts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; background: #eff0f6; border: 1px solid #e3e4ef; border-radius: 10px; }
.wbl-bo-label { font-size: 13px; font-weight: 600; color: #6f7390; }
.wbl-bo-btn { font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: #6a4cf1; border: 0; border-radius: 8px; padding: 8px 14px; min-height: 44px; cursor: pointer; }
.wbl-bo-btn:hover { filter: brightness(1.08); }

/* ── Live reactions (R3) ──
   Tap the emoji bar → that emoji floats up over the video for everyone (Zoom
   parity). The overlay layer sits above the stage but never intercepts clicks
   (pointer-events:none); the bar is a normal 44px-touch control row beneath it.
   Same light .wbl idiom + accent as the rest of this file. */
.wbl-react-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.wbl-float { position: absolute; bottom: 6%; font-size: 30px; line-height: 1; will-change: transform, opacity; animation: wbl-float-up 2.4s ease-out forwards; }
@keyframes wbl-float-up {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  15%  { transform: translateY(-6%) scale(1); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-74%) scale(1.1); opacity: 0; }
}
.wbl-reactwrap { margin-top: 10px; }
.wbl-reactbar { display: flex; gap: 6px; flex-wrap: wrap; }
.wbl-react { font-size: 20px; line-height: 1; background: #eff0f6; border: 1px solid #e3e4ef; border-radius: 10px; min-width: 44px; min-height: 44px; cursor: pointer; padding: 0 6px; transition: transform .08s ease; }
.wbl-react:hover { border-color: #6a4cf1; }
.wbl-react:active { transform: scale(.92); }
@media (prefers-reduced-motion: reduce) { .wbl-float { animation-duration: .01s; } }

/* ── R5 replay (Session C) ──
   The Replay badge + the ephemeral replayed-reaction float, rendered by the
   room widget (.wbr- namespace) in mode:'replay'. Concrete hex is this file's
   deliberate idiom (published pages carry no app tokens). pointer-events:none
   on both — they are fading overlays, never controls (the toast-trap rule). */
.wbr-replay-badge { position:absolute; top:10px; left:10px; z-index:3;
  background:rgba(20,22,40,.72); color:#fff; font-size:12px; font-weight:600;
  letter-spacing:.4px; text-transform:uppercase; padding:4px 10px;
  border-radius:999px; pointer-events:none; }
.wbr-react { position:absolute; bottom:16px; right:18px; z-index:3;
  font-size:34px; line-height:1; pointer-events:none;
  animation: wbr-react-float 3.8s ease-out forwards; }
@keyframes wbr-react-float {
  from { opacity:0; transform: translateY(0) scale(.8); }
  15%  { opacity:1; transform: translateY(-8px) scale(1); }
  to   { opacity:0; transform: translateY(-120px) scale(1.05); } }

/* ── Q&A queue (R3) ──
   The question queue in the side panel + the featured-question banner over the
   stage. Same light .wbl idiom + accent as the rest of this file. 44px touch
   targets on every control. */
.wbl-qa { margin-bottom: 14px; }
.wbl-qa-n { color: #6f7390; font-weight: 600; font-size: 13px; }
.wbl-qa-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.wbl-qa-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: #f7f7fb; border: 1px solid #e3e4ef; border-radius: 10px; }
.wbl-qa-row.wbl-qa-feat { border-color: #6a4cf1; box-shadow: 0 0 0 1px #6a4cf1 inset; }
.wbl-qa-row.wbl-qa-answered { opacity: .6; }
.wbl-qa-up { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 8px; font: inherit; font-size: 13px; font-weight: 700; color: #4d5168; background: #eff0f6; border: 1px solid #e3e4ef; border-radius: 10px; cursor: pointer; font-variant-numeric: tabular-nums; }
button.wbl-qa-up:hover { border-color: #6a4cf1; }
button.wbl-qa-up.on { background: #6a4cf1; border-color: #6a4cf1; color: #fff; }
.wbl-qa-body { flex: 1 1 auto; font-size: 13.5px; line-height: 1.35; color: #191b28; word-break: break-word; }
.wbl-qa-body b { color: #6a4cf1; margin-right: 4px; }
.wbl-qa-tag { display: inline-block; font-size: 11px; font-weight: 700; color: #2e7d32; background: #e6f4ea; border-radius: 6px; padding: 1px 6px; }
.wbl-qa-ctrls { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.wbl-qa-btn { font: inherit; font-size: 12px; font-weight: 600; color: #191b28; background: #fff; border: 1px solid #e3e4ef; border-radius: 8px; padding: 6px 10px; min-height: 32px; cursor: pointer; white-space: nowrap; }
.wbl-qa-btn:hover { border-color: #6a4cf1; }
/* The "Ask a question" secondary button in the attendee composer. */
.wbl-ask-ask { font: inherit; font-size: 13px; font-weight: 600; color: #6a4cf1; background: #eef0ff; border: 1px solid #d8d5ff; border-radius: 8px; padding: 9px 12px; min-height: 44px; cursor: pointer; }
.wbl-ask-ask:hover { filter: brightness(.98); }
/* Featured question/message banner — over the bottom of the stage, above pops. */
.wbl-pinned { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; background: rgba(20,22,40,.86); color: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.wbl-pinned-in { display: flex; align-items: center; gap: 8px; font-size: 14.5px; line-height: 1.35; }
.wbl-pinned-in b { color: #cbb9ff; }
.wbl-pinned-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; background: #6a4cf1; color: #fff; border-radius: 999px; padding: 3px 8px; }
.wbl-pinned-x { margin-left: auto; flex: 0 0 auto; min-width: 32px; min-height: 32px; font: inherit; font-size: 14px; color: #fff; background: rgba(255,255,255,.15); border: 0; border-radius: 8px; cursor: pointer; }
.wbl-pinned-x:hover { background: rgba(255,255,255,.28); }

/* ── Chat moderation (R3) — coach-only per-line controls ──
   Make-question (?) + remove (✕), revealed on hover/focus of a chat line so
   they never crowd the read view. Only rendered on the coach side. */
.wbl-chat-line { position: relative; }
.wbl-chat-mod { position: absolute; top: 0; right: 0; display: none; gap: 4px; }
.wbl-chat-line:hover .wbl-chat-mod,
.wbl-chat-line:focus-within .wbl-chat-mod { display: inline-flex; }
.wbl-chat-modb { min-width: 26px; min-height: 26px; font: inherit; font-size: 13px; font-weight: 700; line-height: 1; color: #4d5168; background: #eff0f6; border: 1px solid #e3e4ef; border-radius: 6px; cursor: pointer; }
.wbl-chat-modb:hover { border-color: #6a4cf1; color: #6a4cf1; }
.wbl-chat-modb.del:hover { border-color: #c0423a; color: #c0423a; }

/* ── Waiting room device / sound check (R3) ──
   Sits inside the .wbl-wait overlay (a light panel). Local-only preview + a mic
   level meter — Zoom "Test speaker & mic". Same light .wbl idiom; 44px targets. */
.wbl-check { margin-top: 18px; width: 100%; max-width: 360px; }
.wbl-check-start { font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: #6a4cf1; border: 0; border-radius: 10px; padding: 12px 18px; min-height: 44px; cursor: pointer; }
.wbl-check-start:hover { filter: brightness(1.05); }
.wbl-check-start:disabled { opacity: .6; cursor: default; }
.wbl-check-body { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.wbl-check-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border-radius: 12px; transform: scaleX(-1); }
.wbl-check-meter { height: 8px; background: #e3e4ef; border-radius: 999px; overflow: hidden; }
.wbl-check-meter-bar { height: 100%; width: 0; background: linear-gradient(90deg, #6a4cf1, #2e7d32); border-radius: 999px; transition: width .05s linear; }
.wbl-check-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wbl-check-btn { font: inherit; font-size: 13px; font-weight: 600; color: #191b28; background: #eff0f6; border: 1px solid #e3e4ef; border-radius: 10px; padding: 10px 14px; min-height: 44px; cursor: pointer; }
.wbl-check-btn:hover { border-color: #6a4cf1; }
.wbl-check-btn.off { background: #fbe9e7; border-color: #c0423a; color: #c0423a; }
.wbl-check-msg { font-size: 13px; color: #6f7390; text-align: center; }

/* ── In-room offer modal (webinar-offer-modal.js) ──
   ONE component shared by the live, automated and replay rooms: the offer's
   pay surface (hosted checkout or published funnel) framed INSIDE the room.
   Mounted on <body>, outside .wbr/.wbl, so the accent is re-derived here from
   the same overridable token with this file's concrete fallback (the published
   page carries no app tokens — the file's deliberate idiom).
   ⚠️ Trap-1 rule (CODING-STANDARDS 2026-08-07): the backdrop catches clicks
   ONLY while the modal is open (click-to-close) and the JS removes it
   synchronously on close — it is never left faded at opacity 0 over the live
   controls. Both close controls pin pointer-events:auto. */
.wbo-overlay { --wbo-accent: var(--wbr-accent, #6a4cf1);
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(20,22,40,.62);
  animation: wbo-fade .18s ease; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
@keyframes wbo-fade { from { opacity: 0; } to { opacity: 1; } }
.wbo-panel { display: flex; flex-direction: column; width: min(96vw, 860px);
  height: min(92vh, 780px); background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35); animation: wbr-rise .28s ease; }
.wbo-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px;
  border-bottom: 1px solid #eff0f6; }
.wbo-title { flex: 1; font-weight: 700; font-size: 15px; color: #191b28;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbo-x { flex: 0 0 auto; min-width: 44px; min-height: 44px; font: inherit; font-size: 17px;
  line-height: 1; color: #4d5168; background: #eff0f6; border: 1px solid #e3e4ef;
  border-radius: 10px; cursor: pointer; pointer-events: auto; }
.wbo-x:hover { border-color: var(--wbo-accent); color: var(--wbo-accent); }
.wbo-body { position: relative; flex: 1; min-height: 0; background: #f7f7fb; }
.wbo-loading { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #6f7390; font-size: 14px; }
.wbo-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The link card (mode 'link' / the graceful fallback): headline + the SAME
   .wbr-pop-cta button the offer card uses — one CTA style, not a second one. */
.wbo-link { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px; }
.wbo-link-h { font-size: 20px; font-weight: 800; color: #191b28; }
.wbo-link-none { font-size: 14px; color: #6f7390; }
/* Mobile close bar: always visible, thumb-reachable, >=48px (spec). Hidden on
   desktop, where the head ✕ + backdrop + Escape close. */
.wbo-foot { display: none; flex: 0 0 auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #eff0f6; background: #fff; }
.wbo-back { width: 100%; min-height: 48px; font: inherit; font-size: 15px; font-weight: 700;
  color: #fff; background: var(--wbo-accent); border: 0; border-radius: 10px;
  cursor: pointer; pointer-events: auto; }
/* Purchase confirmed (`cbk:purchase` heard from the same-origin checkout):
   the iframe keeps showing its own thanks/access view; the shell affirms. */
.wbo-done .wbo-title { color: #2e7d32; }
.wbo-done .wbo-back { background: #2e7d32; }
/* Mobile: near-full-screen (spec), the room still playing behind. Same 860px
   breakpoint as the rest of this file. */
@media (max-width: 860px) {
  .wbo-overlay { padding: 0; }
  .wbo-panel { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .wbo-x { display: none; }
  .wbo-foot { display: block; }
}
@media (prefers-reduced-motion: reduce) { .wbo-overlay, .wbo-panel { animation: none; } }