@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ============================================================
 * v2.2.3 — Watch Live · Monochrome Glass redesign (comprehensive)
 *
 * Mirrors the mockup tokens (page / surf / glass / hair / fg / ink)
 * AND remaps the legacy cinema tokens so the redesign wins
 * regardless of whether downstream sheets reference --cn-* or
 * the new --eos-* names.
 *
 * Loaded AFTER watch-cinema.css. Scoped to .eos-watch--cinema so
 * the rest of the site is untouched.
 * ============================================================ */

/* ---- 1. New design tokens (mockup-aligned) ------------------- */
.eos-watch--cinema {
  /* mockup token set */
  --r:  22px;
  --r2: 14px;
  --r3: 10px;
  --blur: blur(26px) saturate(150%);

  /* Light defaults (also when [data-theme="light"]) */
  --page:    #EFEEEA;
  --surf:    rgba(20,20,22,0.035);
  --surf2:   rgba(20,20,22,0.065);
  --glass:   rgba(255,255,255,0.72);
  --glassBrd:rgba(20,20,22,0.08);
  --hair:    rgba(20,20,22,0.09);
  --fg:      #141416;
  --fg2:     rgba(20,20,22,0.6);
  --fg3:     rgba(20,20,22,0.4);
  --ink:     #141416;
  --inkFg:   #FFFFFF;
  --shadow:  0 34px 70px -28px rgba(20,20,30,0.24);
  --shadowSm:0 12px 32px -14px rgba(20,20,30,0.16);
  --live:    #E5342B;
  --stage:   #0A0A0C;

  /* Remap LEGACY cinema tokens onto the new ones so older CSS still resolves */
  --cn-radius:    var(--r);
  --cn-radius-sm: var(--r2);
  --cn-amber:       var(--ink);
  --cn-amber-dark:  var(--ink);
  --cn-amber-soft:  var(--inkFg);
  --cn-amber-glow:  var(--surf);
  --cn-bg:        var(--glass);
  --cn-bg-soft:   var(--surf);
  --cn-bg-softer: var(--surf);
  --cn-fg:        var(--fg);
  --cn-muted:     var(--fg2);
  --cn-border:    var(--hair);
  --cn-shadow:    var(--shadow);

  --eos-ink:      var(--ink);
  --eos-ink-fg:   var(--inkFg);
  --eos-glass:    var(--glass);
  --eos-glass-brd:var(--glassBrd);
  --eos-blur:     var(--blur);

  font-family: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: var(--page);
  color: var(--fg);
}

[data-theme="dark"] .eos-watch--cinema {
  /* Chrome-dark palette (sampled from reference snip) */
  --page:    #202124;            /* base background + side rail */
  --surf:    rgba(255,255,255,0.055);
  --surf2:   rgba(255,255,255,0.10);
  --glass:   rgba(41,42,45,0.78); /* #292A2D elevated card surface */
  --glassBrd:rgba(255,255,255,0.11);
  --hair:    rgba(255,255,255,0.09);
  --fg:      #E3E3E3;            /* primary text */
  --fg2:     #9AA0A6;            /* secondary / muted text */
  --fg3:     rgba(154,160,166,0.55);
  --ink:     #E8EAED;            /* near-white primary fill (active tab / send / avatars) */
  --inkFg:   #202124;
  --stage:   #16171A;            /* video frame, a touch darker than panels */
  --shadow:  0 34px 80px -24px rgba(0,0,0,0.8);
  --shadowSm:0 10px 34px -14px rgba(0,0,0,0.65);
  --live:    #FF453A;
}

/* ---- 2. Outer rhythm ----------------------------------------- */
.eos-watch--cinema {
  gap: 20px !important;
  margin: 40px auto 72px !important;
}

/* ---- 3. Top bar : deep glass --------------------------------- */
.eos-watch--cinema .eos-cn-top {
  padding: 14px 18px !important;
  border-radius: var(--r) !important;
  background: var(--glass) !important;
  border: 1px solid var(--glassBrd) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  backdrop-filter: var(--blur) !important;
  box-shadow: var(--shadowSm) !important;
}
.eos-watch--cinema .eos-cn-live {
  background: rgba(229,52,43,0.12) !important;
  color: var(--live) !important;
  letter-spacing: 0.14em !important;
  animation: egwpulse 1.6s ease-in-out infinite;
}
@keyframes egwpulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(229,52,43,0.55); }
  50%     { box-shadow: 0 0 0 7px rgba(229,52,43,0); }
}
[data-theme="dark"] .eos-watch--cinema .eos-cn-live {
  background: rgba(255,69,58,0.16) !important;
  color: #FF6961 !important;
}
.eos-watch--cinema .eos-cn-live span { background: var(--live) !important; }
.eos-watch--cinema .eos-cn-soon {
  background: var(--surf) !important;
  color: var(--fg2) !important;
  letter-spacing: 0.06em !important;
}
.eos-watch--cinema .eos-cn-top__t {
  font-family: 'Jost', sans-serif !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
  letter-spacing: -0.01em !important;
}
.eos-watch--cinema .eos-cn-top__s { color: var(--fg2) !important; }
.eos-watch--cinema .eos-cn-top__views {
  background: var(--surf) !important;
  border-radius: 999px !important;
  font-variant-numeric: tabular-nums;
  color: var(--fg2) !important;
}
.eos-watch--cinema .eos-cn-ibtn {
  border-radius: 12px !important;
  background: var(--surf) !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-cn-ibtn:hover {
  background: var(--surf2) !important;
  color: var(--fg) !important;
  transform: translateY(-1px);
}
.eos-watch--cinema .eos-cn-ibtn.is-on {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
}

/* ---- 4. Stage + Player : ambient glass ----------------------- */
.eos-watch--cinema .eos-watch-stage {
  gap: 16px !important;
  position: relative;
}
.eos-watch--cinema .eos-watch-stage::before {
  content: "";
  position: absolute;
  left: 4%; right: 4%; top: -3%;
  height: 62%;
  background: radial-gradient(60% 80% at 50% 30%, rgba(255,255,255,0.16), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  animation: egwGlow 7s ease-in-out infinite;
}
[data-theme="dark"] .eos-watch--cinema .eos-watch-stage::before {
  background: radial-gradient(60% 80% at 50% 30%, rgba(255,255,255,0.10), transparent 70%);
}
.eos-watch--cinema .eos-watch-stage > * { position: relative; z-index: 1; }
@keyframes egwGlow { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

.eos-watch--cinema .eos-player {
  border-radius: var(--r) !important;
  border: 1px solid var(--glassBrd) !important;
  background: var(--stage) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 44px 96px -30px rgba(0,0,0,0.55),
    0 0 80px -26px rgba(255,255,255,0.12) !important;
}
[data-theme="dark"] .eos-watch--cinema .eos-player {
  box-shadow:
    0 44px 110px -30px rgba(0,0,0,0.82),
    0 0 90px -24px rgba(255,255,255,0.10) !important;
}

/* Player chrome strip : glass pill */
.eos-watch--cinema .eos-cn-chrome {
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  backdrop-filter: var(--blur) !important;
  border: 1px solid var(--glassBrd) !important;
  box-shadow: var(--shadowSm) !important;
}
.eos-watch--cinema .eos-cn-chrome button,
.eos-watch--cinema .eos-cn-chrome a {
  border: 0 !important;
  background: var(--surf) !important;
  color: var(--fg) !important;
  border-radius: 999px !important;
}
.eos-watch--cinema .eos-cn-chrome button:hover,
.eos-watch--cinema .eos-cn-chrome a:hover {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
}

/* ---- 5. Countdown -------------------------------------------- */
.eos-watch--cinema .eos-countdown-unit .num {
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  color: var(--fg) !important;
  letter-spacing: -0.02em !important;
}
.eos-watch--cinema .eos-countdown-unit .lbl {
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  opacity: 0.6;
  color: var(--fg2) !important;
}

/* ---- 6. Side dock : frosted glass ---------------------------- */
.eos-watch--cinema .eos-side {
  border-radius: var(--r) !important;
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  backdrop-filter: var(--blur) !important;
  border: 1px solid var(--glassBrd) !important;
  box-shadow: var(--shadow) !important;
}
.eos-watch--cinema .eos-side::before {
  background: radial-gradient(ellipse at top, rgba(255,255,255,0.10), transparent 70%) !important;
}
.eos-watch--cinema .eos-side-tabs {
  border-bottom: 1px solid var(--hair) !important;
}
.eos-watch--cinema .eos-side-tab {
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-side-tab.is-active {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
  opacity: 1 !important;
}

/* ---- 7. Chat surfaces : monochrome ink ----------------------- */
.eos-watch--cinema .eos-chat-utility-lane {
  background: var(--surf) !important;
  border-bottom: 1px solid var(--hair) !important;
}
.eos-watch--cinema .eos-chat-mode {
  background: var(--surf) !important;
}
.eos-watch--cinema .eos-chat-mode-btn.is-on {
  background: var(--glass) !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-msg-avatar,
.eos-watch--cinema .eos-msg__avatar,
.eos-watch--cinema .eos-chat-msg .eos-chat-msg__avatar,
.eos-watch--cinema .eos-chat-msg .eos-chat-msg-avatar,
.eos-watch--cinema .eos-chat-msg-av,
.eos-watch--cinema .eos-chat-msg__av {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
  box-shadow: none !important;
}
.eos-watch--cinema .eos-chat-send {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
  box-shadow: var(--shadowSm) !important;
}
.eos-watch--cinema .eos-chat-input {
  background: var(--surf) !important;
  color: var(--fg) !important;
  border-color: transparent !important;
}
.eos-watch--cinema .eos-chat-input:focus {
  border-color: var(--ink) !important;
  background: var(--glass) !important;
  box-shadow: 0 0 0 3px var(--surf2) !important;
}
.eos-watch--cinema .eos-chat-signin {
  background: var(--surf) !important;
  color: var(--fg) !important;
}

/* ---- 8. Notes pane ------------------------------------------ */
.eos-watch--cinema .eos-nt-modes button.is-on {
  background: var(--glass) !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-nt-editor {
  color: var(--fg) !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
}
.eos-watch--cinema .eos-nt-editor blockquote {
  border-left-color: var(--fg) !important;
  background: var(--surf) !important;
}
.eos-watch--cinema .eos-nt-editor h2 { color: var(--fg) !important; }
.eos-watch--cinema .eos-nt-pendet {
  background: var(--surf) !important;
  color: var(--fg2) !important;
  border-color: var(--hair) !important;
}
.eos-watch--cinema .eos-nt-foot {
  background: var(--surf) !important;
  border-top: 1px solid var(--hair) !important;
}

/* ---- 9. Bible pane ------------------------------------------ */
.eos-watch--cinema .eos-bible-brand {
  background: var(--surf) !important;
  border: 1px solid var(--hair) !important;
  border-left: 2px solid var(--fg) !important;
}
.eos-watch--cinema .eos-bible-brand-name { color: var(--fg) !important; }
.eos-watch--cinema .eos-bible-brand-ic {
  background: var(--surf) !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-bible-brand-ic:hover { background: var(--surf2) !important; }
.eos-watch--cinema .eos-bible-chip {
  background: var(--surf) !important;
  border: 1px solid var(--hair) !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-bible-chip:hover {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
}
.eos-watch--cinema .eos-bible-tb-btn {
  background: var(--surf) !important;
  border: 1px solid var(--hair) !important;
  color: var(--fg) !important;
}

/* ---- 10. Meta strip + chips --------------------------------- */
.eos-watch--cinema .eos-watch-meta {
  border-top-color: var(--hair) !important;
}
.eos-watch--cinema .eos-watch-title {
  font-family: 'Jost', sans-serif !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-watch-credits { color: var(--fg2) !important; }
.eos-watch--cinema .eos-watch-description { color: var(--fg2) !important; }
.eos-watch--cinema .eos-watch-scripture {
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  opacity: 0.92 !important;
  padding-left: 16px !important;
  border-left: 2px solid var(--hair) !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-watch-status {
  letter-spacing: 0.14em !important;
  color: var(--fg2) !important;
}
.eos-watch--cinema .eos-chip {
  padding: 10px 17px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background: var(--surf) !important;
  border: 1px solid var(--hair) !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-watch-actions .eos-chip:first-child,
.eos-watch--cinema .eos-chip:hover {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
  border-color: transparent !important;
}

/* ---- 11. Replay rail cards ---------------------------------- */
.eos-watch--cinema .eos-rail-thumb {
  border-radius: var(--r2) !important;
  border: 1px solid var(--glassBrd) !important;
  overflow: hidden;
}
.eos-watch--cinema .eos-rail-card {
  background: var(--glass) !important;
  border: 1px solid var(--glassBrd) !important;
  border-radius: var(--r2) !important;
}
.eos-watch--cinema .eos-rail-card h3 {
  font-family: 'Jost', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-section-head h2,
.eos-watch--cinema .eos-watch-replays h2 {
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
  color: var(--fg) !important;
}

/* ---- 12. Floating overlays / shower / spotlight / amen ------ */
.eos-watch--cinema .eos-am-btn {
  background: linear-gradient(135deg, var(--ink), var(--ink)) !important;
  color: var(--inkFg) !important;
  border-color: var(--glassBrd) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
}
.eos-watch--cinema .eos-mc-btn {
  background: var(--glass) !important;
  color: var(--fg) !important;
  border-color: var(--glassBrd) !important;
}

/* ---- 13. Responsive polish ---------------------------------- */
@media (max-width: 720px) {
  .eos-watch--cinema { gap: 14px !important; }
  .eos-watch--cinema .eos-watch-title { font-size: 26px !important; }
}

/* ---- 14. Neutralise parent-theme heading bleed ------------- *
 * global.css forces text-transform:uppercase, clamp(28–40px) sizes,
 * weight 700 and --color-primary on every h1–h6. That leaked into the
 * redesign: the title rendered ALL-CAPS, "Recent replays" came through
 * oversized + uppercase (overlapping the cards), and replay-card titles
 * were uppercase too. Reset the watch-specific headings to the mockup. */
.eos-watch--cinema .eos-watch-title {
  text-transform: none !important;
}
.eos-watch--cinema .eos-rail-card h3 {
  text-transform: none !important;
  font-size: 14px !important;
  line-height: 1.32 !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}
.eos-watch--cinema .eos-section-head {
  align-items: flex-end !important;
  margin-bottom: 14px !important;
}
.eos-watch--cinema .eos-section-head h2,
.eos-watch--cinema .eos-watch-replays h2 {
  text-transform: none !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* ---- 15. Full-width replay row ------------------------------ *
 * page-watch.php now renders .eos-watch-replays as a direct grid child
 * (it used to be nested in .eos-watch-stage, trapping it in the narrow
 * left column). Place it in the full-width "extra" row so the rail fills
 * the lower area beneath the stage + side dock. */
.eos-watch--cinema > .eos-watch-replays {
  grid-area: extra;
  grid-column: 1 / -1;
  margin-top: 6px !important;
}

/* ---- 16. Side tabs : distinct active pill ------------------- *
 * The underline-only active state read almost identically to the inactive
 * tabs against the glass panel. Give the active tab a solid ink pill so
 * it's unmistakably distinct from the background. */
.eos-watch--cinema .eos-side-tabs {
  gap: 6px !important;
  padding: 10px 10px 10px !important;
}
.eos-watch--cinema .eos-side-tab {
  border-bottom: 0 !important;
  border-radius: 12px !important;
  color: var(--fg2) !important;
  opacity: 1 !important;
}
.eos-watch--cinema .eos-side-tab:hover {
  background: var(--surf) !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-side-tab.is-active {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
  border-bottom-color: transparent !important;
  box-shadow: var(--shadowSm) !important;
}

/* ---- 17. Sign-in prompt centred ----------------------------- */
.eos-watch--cinema .eos-chat-signin {
  text-align: center !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  min-width: 340px !important;
  max-width: 88% !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* ---- 17b. Chat surfaces follow the watch theme -------------- *
 * chat-aurora / chat-studio paint the chat with their own palette
 * (coral pins, purple names, their own dark greys) which clashed with
 * the monochrome redesign — most visibly in dark mode. Re-map every
 * chat surface onto the redesign tokens so the whole panel matches the
 * selected theme (Chrome-dark greys in dark, light glass in light). */
.eos-watch--cinema .eos-chat-pane,
.eos-watch--cinema .eos-chat,
.eos-watch--cinema .eos-chat-stream {
  background: transparent !important;
}
.eos-watch--cinema .eos-chat-msg:hover { background: var(--surf) !important; }
.eos-watch--cinema .eos-chat-msg .who,
.eos-watch--cinema .eos-chat-msg__name { color: var(--fg) !important; }
.eos-watch--cinema .eos-chat-msg__text,
.eos-watch--cinema .eos-chat-msg .body { color: var(--fg) !important; }
.eos-watch--cinema .eos-chat-msg .time,
.eos-watch--cinema .eos-chat-msg__time { color: var(--fg3) !important; }
.eos-watch--cinema .eos-chat-pin {
  background: var(--surf) !important;
  border-bottom: 1px solid var(--hair) !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-chat-pin__ico,
.eos-watch--cinema .eos-chat-pin__lbl { color: var(--fg2) !important; }
.eos-watch--cinema .eos-chat-pin__txt { color: var(--fg) !important; }
.eos-watch--cinema .eos-chat-pin__x { color: var(--fg3) !important; }
.eos-watch--cinema .eos-chat-form {
  background: transparent !important;
  border-top: 1px solid var(--hair) !important;
}
.eos-watch--cinema .eos-chat-typing,
.eos-watch--cinema .eos-chat-typing__text { color: var(--fg2) !important; }
.eos-watch--cinema .eos-chat-mention { color: var(--fg) !important; font-weight: 600; }

/* Active tab text must read on the light pill (was inheriting a stray white) */
.eos-watch--cinema .eos-side-tab.is-active,
.eos-watch--cinema .eos-side-tab.is-active svg { color: var(--inkFg) !important; }

/* ---- 17c. Chat (Aurora) dark theme ------------------------- *
 * chat-aurora.css is a LIGHT-only redesign — it hardcodes its --au-*
 * palette (#FFFFFF surfaces, navy ink) with no dark variant, so the whole
 * chat panel stayed white in dark mode. Redefine the Aurora tokens to the
 * Chrome-dark palette so the entire chat subsystem follows the theme. */
[data-theme="dark"] .eos-watch--cinema .eos-side-panel[data-eos-panel="chat"],
[data-theme="dark"] .eos-watch--cinema .eos-chat {
  --au-surface:   #292A2D;
  --au-surface-2: #303135;
  --au-surface-3: #3C4043;
  --au-ink:       #E3E3E3;
  --au-ink-mut:   #9AA0A6;
  --au-ink-sub:   #7E8388;
  --au-navy:      #E3E3E3;
  --au-navy-700:  #4A4E52;
  --au-line:      rgba(255,255,255,0.09);
  --au-line-2:    rgba(255,255,255,0.14);
  --au-coral:       #8AB4F8;
  --au-coral-press: #AECBFA;
  --au-coral-soft:  rgba(138,180,248,0.16);
  --au-coral-ink:   #AECBFA;
  --au-shadow:    0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --au-shadow-sm: 0 2px 8px rgba(0,0,0,0.55);
}
/* The Aurora panel shell paints its own --au-surface; let the side dock
   glass show through instead so the chat matches the rest of the dock. */
[data-theme="dark"] .eos-watch--cinema .eos-side-panel[data-eos-panel="chat"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Keep the composer input on the grey Chrome palette (chat-studio forces a navy fill in dark) */
[data-theme="dark"] .eos-watch--cinema .eos-chat-input {
  background: var(--surf) !important;
  color: var(--fg) !important;
}

/* ---- 17d. Notes colour swatches ----------------------------- *
 * Richer palette incl. white (for dark mode) + black; give every swatch a
 * visible ring so white-on-light and black-on-dark are both selectable. */
.eos-watch--cinema .eos-nt-swatch {
  border: 1px solid var(--fg3) !important;
  box-shadow: 0 0 0 1px var(--hair);
}
.eos-watch--cinema .eos-nt-colors { flex-wrap: wrap; height: auto !important; padding-top: 4px !important; padding-bottom: 4px !important; }

/* ---- 17e. Collapse the control strip for YouTube streams ---- *
 * A YouTube embed shows its own native control bar, so the theme's strip
 * is redundant — collapse it when the player provider is youtube. */
.eos-watch--cinema .eos-player[data-provider="youtube"] ~ .eos-cn-chrome {
  display: none !important;
}

/* ---- 17f. Remove the left-accent line on cards -------------- *
 * chat-studio paints an amber/green border-left bar on the pinned strip
 * and many sibling cards. It's off-brand for the monochrome redesign —
 * strip it everywhere so these surfaces read consistently (no colored bar). */
.eos-watch--cinema .eos-chat-pin,
.eos-watch--cinema .eos-chat-slowbar,
.eos-watch--cinema .eos-chat-qa,
.eos-watch--cinema .eos-chat-msg--mentioned-me,
.eos-watch--cinema .eos-chat-quoted,
.eos-watch--cinema .eos-chat-tr-block,
.eos-watch--cinema .eos-ps-card,
.eos-watch--cinema .eos-wf-card,
.eos-watch--cinema .eos-sf-card,
.eos-watch--cinema .eos-ann-bar,
.eos-watch--cinema .eos-tg-give-btn,
.eos-watch--cinema .eos-am-dash,
.eos-watch--cinema .eos-sp-card,
.eos-watch--cinema .eos-spotlight,
.eos-watch--cinema .eos-bible-brand {
  border-left: 1px solid var(--hair) !important;
}
.eos-watch--cinema .eos-chat-msg--mentioned-me { padding-left: 10px !important; }

/* ---- 17g. Notes editor headings (neutralise global bleed) --- *
 * global.css uppercases + recolors all h1–h6; that leaked into the notes
 * editor so choosing "Heading" produced ALL-CAPS black text. Reset them. */
.eos-watch--cinema .eos-nt-editor h1,
.eos-watch--cinema .eos-nt-editor h2,
.eos-watch--cinema .eos-nt-editor h3 {
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--fg) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 600 !important;
}
.eos-watch--cinema .eos-nt-editor h1 { font-size: 22px !important; line-height: 1.25 !important; margin: 10px 0 6px !important; }
.eos-watch--cinema .eos-nt-editor h2 { font-size: 18px !important; line-height: 1.3 !important; margin: 10px 0 5px !important; }
.eos-watch--cinema .eos-nt-editor h3 { font-size: 15px !important; line-height: 1.3 !important; margin: 8px 0 4px !important; }

/* ---- 17h. Notes ink palette: floating + toggleable ---------- *
 * The pen palette was pinned top-left, obstructing the canvas. Float it as
 * a centered bottom bar, hidden until the user opens it with the pen FAB. */
.eos-watch--cinema .eos-nt-palette {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 60px !important;
  transform: translateX(-50%);
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center;
  align-items: center;
  gap: 5px !important;
  max-width: min(300px, calc(100% - 28px)) !important;
  padding: 8px 10px !important;
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glassBrd) !important;
  box-shadow: var(--shadow) !important;
  z-index: 9 !important;
}
.eos-watch--cinema .eos-nt-palette button {
  width: 28px !important;
  height: 28px !important;
}
.eos-watch--cinema .eos-nt-palette .eos-nt-palette__sep {
  width: 1px !important;
  height: 22px !important;
  margin: 0 4px !important;
}
.eos-watch--cinema .eos-notes.is-draw .eos-nt-palette { display: none !important; }
.eos-watch--cinema .eos-notes.is-draw.ink-tools-open .eos-nt-palette { display: flex !important; }
.eos-watch--cinema .eos-nt-palette-toggle { display: none; }
.eos-watch--cinema .eos-notes.is-draw .eos-nt-palette-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 14px;
  bottom: 60px;
  z-index: 10;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--inkFg);
  border: 0;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: 18px;
  transition: transform 120ms ease;
}
.eos-watch--cinema .eos-notes.is-draw .eos-nt-palette-toggle:hover { transform: translateY(-1px); }
.eos-watch--cinema .eos-notes.is-draw.ink-tools-open .eos-nt-palette-toggle {
  background: var(--surf2);
  color: var(--fg);
}

/* ---- 17i. Note templates (GoodNotes-style) ------------------ *
 * A paper-style picker: the chosen template paints a ruling behind both
 * the typed editor and the draw canvas. Lines use themed hairlines. */
.eos-watch--cinema .eos-nt-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 14px 10px;
}
.eos-watch--cinema .eos-nt-toprow .eos-nt-modes {
  margin: 0 !important;
  align-self: auto !important;
}
.eos-watch--cinema .eos-nt-template-sel {
  margin: 0 !important;
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  padding: 0 16px;
  background: var(--surf);
  color: var(--fg);
  border: 1px solid var(--hair);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  flex: none;
}
.eos-watch--cinema .eos-nt-template-sel option {
  background: var(--page);
  color: var(--fg);
}
.eos-watch--cinema .eos-notes[data-nt-template="lined"] .eos-nt-editor {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--hair) 27px, var(--hair) 28px);
  background-position: 0 17px;
}
.eos-watch--cinema .eos-notes[data-nt-template="dotted"] .eos-nt-editor {
  background-image: radial-gradient(var(--fg3) 1px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 0 5px;
}
/* Align typed line-height to the ruling so the rule/dot row always sits
   between lines of text (never striking through). */
.eos-watch--cinema .eos-notes[data-nt-template="lined"] .eos-nt-editor { line-height: 28px !important; }
.eos-watch--cinema .eos-notes[data-nt-template="dotted"] .eos-nt-editor { line-height: 22px !important; }

/* ---- 17j. Fullscreen / cinema: floating middle-right dock --- *
 * In cinema (class) and native fullscreen the chat/notes/Bible box floats
 * as a glass card pinned MIDDLE-right, kept usable and toggleable via the
 * FAB. Hiding slides it off-screen rather than hard-cutting it. */
.eos-watch--cinema:fullscreen,
.eos-watch--cinema:-webkit-full-screen {
  display: block !important;
  background: #000 !important;
  width: 100vw; height: 100vh;
}
.eos-watch--cinema:fullscreen .eos-watch-stage { height: 100vh; }
.eos-watch--cinema:fullscreen .eos-player { height: 100vh; width: 100vw; }
.eos-watch--cinema:fullscreen .eos-watch__resizer,
.eos-watch--cinema:fullscreen #pv-resizer,
.eos-watch--cinema.is-cn-cinema #pv-resizer { display: none !important; }

/* Shared floating-dock geometry (middle-right, vertically centered).
 * Centered via inset:0 + margin:auto (transform-free) so the responsive
 * mobile overrides at ≤1100px can't fight it; transform is reserved for
 * the hide-slide only. Cinema (class) and :fullscreen kept as SEPARATE
 * ungrouped rules — grouping a class selector with :fullscreen can drop
 * the whole rule in some engines. */
.eos-watch--cinema.is-cn-cinema > .eos-side {
  position: fixed !important;
  top: 0 !important; bottom: 0 !important;
  right: 18px !important; left: auto !important;
  margin: auto 0 !important;
  transform: none !important;
  background: var(--page) !important;
  width: 384px !important;
  max-width: calc(100vw - 36px) !important;
  height: min(78vh, 700px) !important;
  min-height: 0 !important;
  max-height: 78vh !important;
  border-radius: 16px !important;
  border: 1px solid var(--glassBrd) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.6) !important;
  overflow: hidden !important;
  z-index: 9000 !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s !important;
}
.eos-watch--cinema:fullscreen .eos-side {
  position: fixed !important;
  top: 0 !important; bottom: 0 !important;
  right: 18px !important; left: auto !important;
  margin: auto 0 !important;
  transform: none !important;
  background: var(--page) !important;
  width: 384px !important;
  max-width: calc(100vw - 36px) !important;
  height: min(78vh, 700px) !important;
  min-height: 0 !important;
  max-height: 78vh !important;
  border-radius: 16px !important;
  border: 1px solid var(--glassBrd) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.6) !important;
  overflow: hidden !important;
  z-index: 9000 !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s !important;
}
/* Hidden state — slide the card off the right edge (stays mounted/usable) */
.eos-watch--cinema.is-cn-cinema.cn-side-hidden > .eos-side {
  transform: translateX(calc(100% + 28px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.eos-watch--cinema:fullscreen.cn-side-hidden .eos-side {
  transform: translateX(calc(100% + 28px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---- 17k. Bible: monochrome polish + book/chapter picker ---- *
 * watch-cinema.css paints the Bible pane green (brand, name, icons) and
 * amber (chip hover), with a 📖 emoji — all off-brand. These dark-scoped
 * rules beat it, and we add a real two-step book→chapter picker. */
.eos-watch--cinema .eos-bible-brand,
[data-theme="dark"] .eos-watch--cinema .eos-bible-brand {
  background: var(--surf) !important;
  border: 1px solid var(--hair) !important;
  border-left: 1px solid var(--hair) !important;
  border-radius: 12px !important;
}
.eos-watch--cinema .eos-bible-brand-name,
[data-theme="dark"] .eos-watch--cinema .eos-bible-brand-name { color: var(--fg) !important; letter-spacing: -0.01em !important; text-transform: none !important; }
.eos-watch--cinema .eos-bible-brand-name::before { content: none !important; }

/* Brand title + data-source caption */
.eos-watch--cinema .eos-bible-brand-name { align-items: center !important; gap: 9px !important; }
.eos-bible-brand-col { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; min-width: 0; }
.eos-bible-brand-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.eos-watch--cinema .eos-bible-brand-src {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--fg2) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eos-watch--cinema .eos-bible-brand-ic,
[data-theme="dark"] .eos-watch--cinema .eos-bible-brand-ic {
  background: transparent !important;
  color: var(--fg2) !important;
  border: 1px solid var(--hair) !important;
}
.eos-watch--cinema .eos-bible-brand-ic:hover,
[data-theme="dark"] .eos-watch--cinema .eos-bible-brand-ic:hover { background: var(--surf2) !important; color: var(--fg) !important; }
.eos-watch--cinema .eos-bible-chip:hover,
[data-theme="dark"] .eos-watch--cinema .eos-bible-chip:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--inkFg) !important;
}

/* Popover shell */
.eos-watch--cinema .eos-bible-pop {
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glassBrd) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.eos-watch--cinema .eos-bible-pop-head {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px !important; margin: 0 !important;
  border-bottom: 1px solid var(--hair) !important;
}
.eos-watch--cinema .eos-bible-pop-head strong { font-size: 13.5px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; white-space: nowrap; }
.eos-watch--cinema .eos-bible-pop-x {
  flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: var(--surf); color: var(--fg2);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.eos-watch--cinema .eos-bible-pop-x:hover { background: var(--surf2); color: var(--fg); }
.eos-watch--cinema .eos-bible-pop-body { padding: 14px 16px !important; }

/* Reference input row */
.eos-watch--cinema .eos-bible-form { display: flex !important; gap: 8px; }
.eos-watch--cinema .eos-bible-form input[type="text"] {
  flex: 1; min-width: 0; height: 38px; box-sizing: border-box;
  border: 1px solid var(--hair) !important; border-radius: 999px !important;
  background: var(--surf) !important; color: var(--fg) !important;
  font: inherit; font-size: 13px; padding: 0 14px !important; outline: none;
}
.eos-watch--cinema .eos-bible-form input[type="text"]:focus { border-color: var(--fg3) !important; }
.eos-watch--cinema .eos-bible-form .eos-btn-primary {
  flex: none; height: 38px; padding: 0 18px !important;
  background: var(--ink) !important; color: var(--inkFg) !important;
  border: 0 !important; border-radius: 999px !important;
  font-weight: 600; font-size: 12.5px; cursor: pointer;
}

/* Segmented OT/NT toggle */
.eos-bible-seg { display: flex; gap: 4px; padding: 4px; margin: 14px 0 12px; background: var(--surf); border: 1px solid var(--hair); border-radius: 999px; }
.eos-bible-seg button {
  flex: 1; height: 30px; border: 0; border-radius: 999px; background: transparent;
  color: var(--fg2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s;
}
.eos-bible-seg button.is-on { background: var(--ink); color: var(--inkFg); }

/* Books grid */
.eos-bible-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 230px; overflow-y: auto; padding: 2px; }
.eos-bible-book {
  height: 36px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 9px;
  background: var(--surf); color: var(--fg); font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, border-color .12s, color .12s;
}
.eos-bible-book:hover { background: var(--ink); border-color: var(--ink); color: var(--inkFg); }

/* Chapter step */
.eos-bible-chapters-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; }
.eos-bible-back {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px;
  border: 1px solid var(--hair); border-radius: 999px; background: var(--surf); color: var(--fg);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.eos-bible-back:hover { background: var(--surf2); }
.eos-bible-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; max-height: 250px; overflow-y: auto; padding: 2px; }
.eos-bible-chapter {
  height: 40px; border: 1px solid var(--hair); border-radius: 9px; background: var(--surf);
  color: var(--fg); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.eos-bible-chapter:hover { background: var(--ink); border-color: var(--ink); color: var(--inkFg); }

/* Popular passages */
.eos-watch--cinema .eos-bible-form-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--fg2) !important; margin: 0 0 8px !important; }
.eos-watch--cinema .eos-bible-pop-divider { height: 1px; background: var(--hair) !important; margin: 16px 0 !important; border: 0 !important; }
.eos-watch--cinema .eos-bible-picks-grid { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.eos-watch--cinema .eos-bible-pick {
  height: 30px; padding: 0 12px !important; border: 1px solid var(--hair) !important; border-radius: 999px !important;
  background: var(--surf) !important; color: var(--fg) !important; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.eos-watch--cinema .eos-bible-pick:hover { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--inkFg) !important; }

.eos-bible-step[hidden] { display: none !important; }

/* Production's popover uses native <select> for book/chapter — give them the
   same monochrome pill treatment as the reference input. */
.eos-watch--cinema .eos-bible-pop-body select {
  width: 100%; box-sizing: border-box; height: 38px;
  margin: 0 0 10px;
  border: 1px solid var(--hair) !important; border-radius: 10px !important;
  background: var(--surf) !important; color: var(--fg) !important;
  font: inherit; font-size: 13px; padding: 0 12px !important; outline: none;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg2) 50%), linear-gradient(135deg, var(--fg2) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.eos-watch--cinema .eos-bible-pop-body select:focus { border-color: var(--fg3) !important; }
.eos-watch--cinema .eos-bible-pop-body select[size] { height: auto; padding: 4px !important; background-image: none; }
.eos-watch--cinema .eos-bible-pop-body select option { background: var(--page); color: var(--fg); }
.eos-watch--cinema .eos-bible-browse-go {
  width: 100%; height: 38px; margin: 2px 0 0;
  background: var(--ink) !important; color: var(--inkFg) !important;
  border: 0 !important; border-radius: 999px !important; font-weight: 600; font-size: 12.5px; cursor: pointer;
}

/* Book / Chapter / Verse dropdown row */
.eos-bible-selects { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.eos-bible-sel { display: flex; flex-direction: column; gap: 5px; flex: 1 1 130px; min-width: 0; }
.eos-bible-sel.eos-bible-sel-sm { flex: 0 1 92px; }
.eos-bible-sel-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--fg2); padding-left: 2px; }
.eos-bible-selects select {
  width: 100%; box-sizing: border-box; height: 38px; margin: 0 !important;
  border: 1px solid var(--hair) !important; border-radius: 10px !important;
  background: var(--surf) !important; color: var(--fg) !important;
  font: inherit; font-size: 13px; padding: 0 30px 0 12px !important; outline: none;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg2) 50%), linear-gradient(135deg, var(--fg2) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.eos-bible-selects select:focus { border-color: var(--fg3) !important; }
.eos-bible-selects select option,
.eos-bible-selects select optgroup { background: var(--page); color: var(--fg); }
.eos-bible-go {
  flex: none; height: 38px; padding: 0 18px;
  background: var(--ink); color: var(--inkFg);
  border: 0; border-radius: 999px; font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.eos-bible-go:hover { opacity: .9; }

/* Bible result text must follow the theme (was a hardcoded grey) */
.eos-watch--cinema .eos-bible-result,
.eos-watch--cinema .eos-bible-result p,
.eos-watch--cinema .eos-bible-result .eos-bible-verse,
.eos-watch--cinema .eos-bible-result-text { color: var(--fg) !important; }
.eos-watch--cinema .eos-bible-result .eos-bible-ref,
.eos-watch--cinema .eos-bible-result .eos-bible-result-ref,
.eos-watch--cinema .eos-bible-result p:first-child { color: var(--fg2) !important; opacity: 1 !important; }
.eos-watch--cinema .eos-bible-result .eos-bible-vnum { color: var(--fg3) !important; }

/* Font-size popover (was completely unstyled → full-width transparent block) */
.eos-watch--cinema .eos-bible-fs-pop {
  position: absolute !important;
  top: 60px !important; right: 14px !important; left: auto !important;
  z-index: 20;
  display: flex !important; align-items: center; gap: 6px;
  padding: 8px !important; margin: 0 !important;
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glassBrd) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
  width: auto !important;
}
.eos-watch--cinema .eos-bible-fs-pop[hidden] { display: none !important; }
.eos-watch--cinema .eos-bible-fs-btn {
  flex: none; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair) !important; border-radius: 10px !important;
  background: var(--surf) !important; color: var(--fg) !important;
  font-weight: 600; line-height: 1; cursor: pointer; padding: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.eos-watch--cinema .eos-bible-fs-btn:hover { background: var(--surf2) !important; }
.eos-watch--cinema .eos-bible-fs-btn.is-on {
  background: var(--ink) !important; border-color: var(--ink) !important; color: var(--inkFg) !important;
}
.eos-watch--cinema .eos-bible-fs-btn[data-bible-fs="s"]  { font-size: 11px; }
.eos-watch--cinema .eos-bible-fs-btn[data-bible-fs="m"]  { font-size: 14px; }
.eos-watch--cinema .eos-bible-fs-btn[data-bible-fs="l"]  { font-size: 17px; }
.eos-watch--cinema .eos-bible-fs-btn[data-bible-fs="xl"] { font-size: 21px; }

/* Bible toolbar + pane spacing */
.eos-watch--cinema .eos-bible-toolbar { display: flex !important; align-items: center; gap: 8px !important; flex-wrap: wrap; margin: 12px 0 14px !important; }
.eos-watch--cinema .eos-bible-toolbar .eos-bible-tb-btn { margin-left: 0 !important; }
.eos-watch--cinema .eos-bible-toolbar .eos-bible-tb-aa { margin-left: auto !important; }
.eos-watch--cinema .eos-bible-recents-head { margin: 4px 0 8px !important; }
.eos-watch--cinema .eos-bible-quick { margin: 0 0 4px !important; }

/* ---- 17l. Mobile / narrow-viewport layout ------------------- *
 * watch-cinema.css hardcodes a 2-column grid with no media queries, so the
 * page overflowed horizontally on phones. Stack it below 900px: player on
 * top, engagement dock below, full-width and comfortably tall. */
@media (max-width: 1100px) {
  .eos-watch--cinema {
    grid-template-columns: 1fr !important;
    grid-template-areas: "top" "stage" "side" "extra" !important;
    gap: 14px !important;
    padding: 0 14px !important;
  }
  .eos-watch--cinema > .eos-watch__resizer,
  .eos-watch--cinema #pv-resizer { display: none !important; }
  .eos-watch--cinema > .eos-side {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 70vh !important;
    margin: 0 !important;
  }
  /* A single 1fr track still grows to its items' min-content — force the
     grid children (and their scrollable rails) to be allowed to shrink. */
  .eos-watch--cinema > .eos-watch-stage,
  .eos-watch--cinema > .eos-side { min-width: 0 !important; max-width: 100% !important; }
  .eos-watch--cinema > .eos-watch-replays { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; }
  .eos-watch--cinema .eos-watch-stage > * { min-width: 0 !important; }
  .eos-watch--cinema .eos-rail { overflow-x: auto !important; min-width: 0 !important; }
  /* Top bar wraps instead of overflowing */
  .eos-watch--cinema > .eos-cn-top {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  .eos-cn-top__views { display: none !important; }
}
@media (max-width: 560px) {
  .eos-watch--cinema { padding: 0 10px !important; }
  .eos-watch-title { font-size: 26px !important; }
  .eos-watch--cinema > .eos-side { min-height: 78vh !important; }
  /* Stage actions + chips wrap cleanly */
  .eos-watch-actions { flex-wrap: wrap !important; }
  .eos-cn-chrome { flex-wrap: wrap !important; row-gap: 6px !important; }
}

/* ---- 17m. Side-panel colour consistency (tabs + notes) ------ *
 * Light-mode bleed: inactive tabs rendered white (invisible), the notes
 * heading came through black + uppercase (global h3), and helper/labels
 * used hardcoded greys. Bind everything to the theme tokens. */
.eos-watch--cinema .eos-side-tabs .eos-side-tab { color: rgba(20,20,22,0.6) !important; opacity: 1 !important; }
.eos-watch--cinema .eos-side-tabs .eos-side-tab svg { color: rgba(20,20,22,0.6) !important; }
.eos-watch--cinema .eos-side-tabs .eos-side-tab.is-active,
.eos-watch--cinema .eos-side-tabs .eos-side-tab.is-active svg { color: #ffffff !important; }
[data-theme="dark"] .eos-watch--cinema .eos-side-tabs .eos-side-tab { color: #9AA0A6 !important; }
[data-theme="dark"] .eos-watch--cinema .eos-side-tabs .eos-side-tab svg { color: #9AA0A6 !important; }
[data-theme="dark"] .eos-watch--cinema .eos-side-tabs .eos-side-tab.is-active,
[data-theme="dark"] .eos-watch--cinema .eos-side-tabs .eos-side-tab.is-active svg { color: #202124 !important; }
.eos-watch--cinema .eos-notes > h3 {
  color: var(--fg) !important; text-transform: none !important; letter-spacing: -0.01em !important;
  font-family: 'Jost', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; margin: 0 0 4px !important;
}
.eos-watch--cinema .eos-notes-help { color: var(--fg2) !important; }
.eos-watch--cinema .eos-bible-recents-label,
.eos-watch--cinema .eos-bible-recents-empty,
.eos-watch--cinema .eos-bible-recents-clear { color: var(--fg2) !important; }
.eos-watch--cinema .eos-bible-quick li { color: var(--fg) !important; }

/* ---- 17z. Motion: entrances, hovers, micro-interactions ----- *
 * Tasteful entrances on load + responsive hovers. All gated behind
 * prefers-reduced-motion so accessibility is respected. */
@media (prefers-reduced-motion: no-preference) {
  /* Block entrances on load — top bar, stage, side dock, meta, replays */
  .eos-watch--cinema > .eos-cn-top { animation: w-drop .55s cubic-bezier(.16,.84,.44,1) both; }
  .eos-watch--cinema > .eos-watch-stage { animation: w-rise .65s cubic-bezier(.16,.84,.44,1) .06s both; }
  .eos-watch--cinema > .eos-side { animation: w-slide .65s cubic-bezier(.16,.84,.44,1) .12s both; }
  .eos-watch--cinema .eos-watch-meta { animation: w-rise .6s cubic-bezier(.16,.84,.44,1) .18s both; }
  .eos-watch--cinema .eos-watch-replays { animation: w-rise .6s cubic-bezier(.16,.84,.44,1) .24s both; }
  @keyframes w-drop  { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
  @keyframes w-rise  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes w-slide { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

  /* Side tabs fade-in stagger */
  .eos-watch--cinema .eos-side-tabs .eos-side-tab { animation: w-fade .5s ease .2s both; }
  .eos-watch--cinema .eos-side-tabs .eos-side-tab:nth-child(2) { animation-delay: .26s; }
  .eos-watch--cinema .eos-side-tabs .eos-side-tab:nth-child(3) { animation-delay: .32s; }
  @keyframes w-fade { from { opacity: 0; } to { opacity: 1; } }

  /* Chat messages rise as they arrive (first paint) */
  .eos-watch--cinema .eos-chat-msg { animation: w-msg .4s cubic-bezier(.16,.84,.44,1) both; }
  @keyframes w-msg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* LIVE dot pulse on the top bar */
  .eos-watch--cinema .eos-cn-live > span { animation: w-pulse 1.6s ease-in-out infinite; }
  @keyframes w-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,52,43,.5); } 50% { box-shadow: 0 0 0 6px rgba(229,52,43,0); } }
}

/* Hover micro-interactions (no motion-pref gate needed — cheap transforms) */
.eos-watch--cinema .eos-rail-card { transition: transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease, border-color .25s ease; }
.eos-watch--cinema .eos-rail-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.eos-watch--cinema .eos-rail-thumb { overflow: hidden; }
.eos-watch--cinema .eos-rail-thumb .eos-media-play { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.eos-watch--cinema .eos-rail-card:hover .eos-media-play { transform: scale(1.15); }

.eos-watch--cinema .eos-chip,
.eos-watch--cinema .eos-cn-ibtn,
.eos-watch--cinema .eos-cn-chrome button { transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s ease, color .18s ease; }
.eos-watch--cinema .eos-chip:hover,
.eos-watch--cinema .eos-cn-ibtn:hover { transform: translateY(-2px); }
.eos-watch--cinema .eos-cn-chrome button:hover { transform: translateY(-1px) scale(1.04); }

.eos-watch--cinema .eos-side-tab { transition: color .18s ease, background .18s ease; }
.eos-watch--cinema .eos-chat-send { transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s ease; }
.eos-watch--cinema .eos-chat-send:hover { transform: scale(1.08) rotate(-6deg); }
.eos-watch--cinema .eos-chat-msg__avatar { transition: transform .2s ease; }
.eos-watch--cinema .eos-chat-msg:hover .eos-chat-msg__avatar { transform: scale(1.08); }

.eos-watch--cinema .eos-chat-mode-btn,
.eos-watch--cinema .eos-chat-util-ico,
.eos-watch--cinema .eos-chat-util-pill { transition: background .18s ease, color .18s ease, transform .18s ease; }
.eos-watch--cinema .eos-chat-util-ico:hover { transform: translateY(-1px); }

/* ---- 17aa. YouTube chat embed fallback --------------------- */
.eos-watch--cinema .eos-chat-embed-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 32px 24px; height: 100%; box-sizing: border-box;
}
.eos-watch--cinema .eos-chat-embed-fallback p { color: var(--fg2); font-size: 13px; line-height: 1.5; max-width: 34ch; margin: 0; }
.eos-watch--cinema .eos-chat-embed-fallback .eos-chip {
  background: var(--live) !important; color: #fff !important; border-color: var(--live) !important;
}

/* ---- 17ac. Admin / moderator chat UI — Monochrome Glass ----- *
 * The whole moderator surface (pin strip, slow-mode bar, polls, mentions,
 * edit bar, link previews and the Q&A system) was built on off-brand colour:
 * amber (--watch-accent / #F5A312), and the Q&A panel adds purple (#534AB7),
 * red and green. The user-facing redesign never touched these, so an admin
 * saw a rainbow of legacy controls on the otherwise-monochrome page.
 * 1) Re-point the accent tokens to ink (fixes everything token-derived).
 * 2) Neutralise the remaining hardcoded literals on each admin surface.
 * The single live/recording red is preserved as the lone status accent. */
.eos-watch--cinema {
  --watch-accent: var(--ink);
  --color-accent: var(--ink);
  --color-accent-soft: var(--surf2);
}

/* Pinned strip + pin badge/action */
.eos-watch--cinema .eos-chat-pin { background: var(--surf) !important; color: var(--fg) !important; }
.eos-watch--cinema .eos-chat-pin:hover { background: var(--surf2) !important; }
.eos-watch--cinema .eos-chat-pin__ico,
.eos-watch--cinema .eos-chat-pin__lbl { color: var(--fg2) !important; }
.eos-watch--cinema .eos-chat-pin__txt { color: var(--fg) !important; }
.eos-watch--cinema .eos-chat-msg--pinned .body { box-shadow: 0 0 0 1.5px var(--fg3) !important; }
.eos-watch--cinema .eos-chat-pin-badge { background: var(--ink) !important; color: var(--inkFg) !important; }
.eos-watch--cinema .eos-chat-pin-badge svg,
.eos-watch--cinema [data-theme="dark"] .eos-chat-pin-badge svg { color: var(--inkFg) !important; }
.eos-watch--cinema .eos-chat-action--pin,
[data-theme="dark"] .eos-watch--cinema .eos-chat-action--pin { color: var(--fg2) !important; }
.eos-watch--cinema .eos-chat-action--pin:hover,
[data-theme="dark"] .eos-watch--cinema .eos-chat-action--pin:hover { background: var(--surf2) !important; color: var(--fg) !important; }

/* Mute action (admin) — neutral, not pink */
.eos-watch--cinema .eos-chat-action--mute,
[data-theme="dark"] .eos-watch--cinema .eos-chat-action--mute { color: var(--fg2) !important; }
.eos-watch--cinema .eos-chat-action--mute:hover,
[data-theme="dark"] .eos-watch--cinema .eos-chat-action--mute:hover { background: var(--surf2) !important; color: var(--live) !important; }

/* Slow-mode bar */
.eos-watch--cinema .eos-chat-slowbar,
[data-theme="dark"] .eos-watch--cinema .eos-chat-slowbar {
  background: var(--surf) !important; color: var(--fg) !important; border-color: var(--hair) !important;
}
.eos-watch--cinema .eos-chat-slowbar__select,
[data-theme="dark"] .eos-watch--cinema .eos-chat-slowbar__select {
  background: var(--surf2) !important; color: var(--fg) !important; border-color: var(--hair) !important;
}

/* Mentions */
.eos-watch--cinema .eos-chat-mention,
[data-theme="dark"] .eos-watch--cinema .eos-chat-mention {
  background: var(--surf2) !important; color: var(--fg) !important;
}
.eos-watch--cinema .eos-chat-msg--mentioned-me .body { background: var(--surf2) !important; }

/* Edit bar */
.eos-watch--cinema .eos-chat-editbar,
[data-theme="dark"] .eos-watch--cinema .eos-chat-editbar {
  background: var(--surf) !important; border-color: var(--hair) !important;
}
.eos-watch--cinema .eos-chat-editbar__save { background: var(--ink) !important; color: var(--inkFg) !important; }

/* Composer "create poll" button + poll cards */
.eos-watch--cinema .eos-chat-poll-btn:hover,
[data-theme="dark"] .eos-watch--cinema .eos-chat-poll-btn:hover { background: var(--surf2) !important; color: var(--fg) !important; }
.eos-watch--cinema .eos-chat-msg__avatar--poll { background: var(--ink) !important; color: var(--inkFg) !important; }
.eos-watch--cinema .eos-chat-poll {
  background: var(--surf) !important; border-left-color: var(--fg3) !important; color: var(--fg) !important;
}
.eos-watch--cinema .eos-chat-poll__meta svg { color: var(--fg2) !important; }
.eos-watch--cinema .eos-chat-poll__opt:hover { border-color: var(--fg3) !important; }
.eos-watch--cinema .eos-chat-poll__opt.is-mine { border-color: var(--ink) !important; background: var(--surf2) !important; }
.eos-watch--cinema .eos-chat-poll__fill { background: var(--surf2) !important; }

/* Link previews */
.eos-watch--cinema .eos-chat-lp,
.eos-watch--cinema .eos-chat-lp-mini { border-left-color: var(--fg3) !important; background: var(--surf) !important; }
.eos-watch--cinema .eos-chat-lp__thumb--fallback,
.eos-watch--cinema .eos-chat-lp-mini__thumb--fallback { color: var(--fg2) !important; }

/* ── Q&A system (chat-studio purple/red/green/amber → monochrome) ── */
.eos-watch--cinema .eos-chat-qa__bar,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__bar {
  background: var(--surf) !important; border-bottom-color: var(--hair) !important;
}
.eos-watch--cinema .eos-chat-qa__ico,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__ico { color: var(--fg2) !important; }
.eos-watch--cinema .eos-chat-qa__lbl,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__lbl { color: var(--fg) !important; }
.eos-watch--cinema .eos-chat-qa__live { background: var(--live) !important; color: #fff !important; }
.eos-watch--cinema .eos-chat-qa__toggle,
.eos-watch--cinema .eos-chat-qa[hidden="false"] .eos-chat-qa__toggle:not(.is-end) {
  background: var(--ink) !important; color: var(--inkFg) !important;
}
.eos-watch--cinema .eos-chat-qa__toggle:hover { filter: brightness(0.92); }
.eos-watch--cinema .eos-chat-qa__submit-input:focus {
  border-color: var(--fg3) !important; box-shadow: 0 0 0 2px var(--surf2) !important;
}
.eos-watch--cinema .eos-chat-qa__submit-send { background: var(--ink) !important; color: var(--inkFg) !important; }
.eos-watch--cinema .eos-chat-qa__who,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__who { color: var(--fg2) !important; }
.eos-watch--cinema .eos-chat-qa__item.top-voted,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__item.top-voted {
  background: var(--surf2) !important; border-color: var(--hair) !important;
}
.eos-watch--cinema .eos-chat-qa__item.answered,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__item.answered {
  background: var(--surf) !important; border-color: var(--hair) !important;
}
.eos-watch--cinema .eos-chat-qa__vote-btn:hover,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__vote-btn:hover { color: var(--fg) !important; background: var(--surf2) !important; }
.eos-watch--cinema .eos-chat-qa__vote-btn.voted { color: var(--ink) !important; background: var(--surf2) !important; }
.eos-watch--cinema .eos-chat-qa__vote-num,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__vote-num,
.eos-watch--cinema .eos-chat-qa__item.top-voted .eos-chat-qa__vote-num,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__item.top-voted .eos-chat-qa__vote-num { color: var(--fg) !important; }
.eos-watch--cinema .eos-chat-qa__answer,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__answer { background: var(--surf2) !important; }
.eos-watch--cinema .eos-chat-qa__answer-by,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__answer-by { color: var(--fg2) !important; }
.eos-watch--cinema .eos-chat-qa__admin-answer { background: var(--ink) !important; color: var(--inkFg) !important; }
.eos-watch--cinema .eos-chat-qa__admin-dismiss:hover,
[data-theme="dark"] .eos-watch--cinema .eos-chat-qa__admin-dismiss:hover { background: var(--surf2) !important; color: var(--live) !important; }

/* ---- 17ad. Admin "Chat controls" quick-panel (.eos-aqc-*) --- *
 * The floating admin gear (top-right of the chat) + its quick-toggle
 * popover and the Moments tally were amber/green legacy. The amber gear
 * square, amber panel title and amber ON-toggles are what an admin sees
 * over the otherwise-monochrome page. Re-theme to monochrome glass. */
.eos-watch--cinema .eos-aqc-gear,
[data-theme="dark"] .eos-watch--cinema .eos-aqc-gear {
  background: var(--surf2) !important;
  color: var(--fg) !important;
  border: 1px solid var(--hair) !important;
}
.eos-watch--cinema .eos-aqc-gear:hover,
[data-theme="dark"] .eos-watch--cinema .eos-aqc-gear:hover {
  background: var(--ink) !important; color: var(--inkFg) !important; transform: rotate(30deg);
}
.eos-watch--cinema .eos-aqc-gear:focus-visible { outline: 2px solid var(--fg3) !important; }

.eos-watch--cinema .eos-aqc-panel,
[data-theme="dark"] .eos-watch--cinema .eos-aqc-panel {
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glassBrd) !important;
  box-shadow: var(--shadow) !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-aqc-head,
[data-theme="dark"] .eos-watch--cinema .eos-aqc-head { border-bottom-color: var(--hair) !important; }
.eos-watch--cinema .eos-aqc-head__title,
[data-theme="dark"] .eos-watch--cinema .eos-aqc-head__title { color: var(--fg) !important; }
.eos-watch--cinema .eos-aqc-head__title i { color: var(--fg2) !important; }
.eos-watch--cinema .eos-aqc-sub,
.eos-watch--cinema .eos-aqc-desc { color: var(--fg2) !important; }
.eos-watch--cinema .eos-aqc-name { color: var(--fg) !important; }
.eos-watch--cinema .eos-aqc-row:hover,
[data-theme="dark"] .eos-watch--cinema .eos-aqc-row:hover { background: var(--surf) !important; }
.eos-watch--cinema .eos-aqc-row.is-saved { background: var(--surf2) !important; }

/* The amber ON-toggles → ink */
.eos-watch--cinema .eos-aqc-tgl input:checked ~ .eos-aqc-tgl-track { background: var(--ink) !important; }

/* Footer deep-link + Moments tally */
.eos-watch--cinema .eos-aqc-foot,
[data-theme="dark"] .eos-watch--cinema .eos-aqc-foot { border-top-color: var(--hair) !important; }
.eos-watch--cinema .eos-aqc-deep,
[data-theme="dark"] .eos-watch--cinema .eos-aqc-deep { color: var(--fg) !important; }
.eos-watch--cinema .eos-aqc-deep i { color: var(--fg2) !important; }
.eos-watch--cinema .eos-mc-tally,
[data-theme="dark"] .eos-watch--cinema .eos-mc-tally { background: var(--surf) !important; color: var(--fg) !important; border-color: var(--hair) !important; }

/* ---- 17af. "Watching now" presence bar (green → monochrome) - *
 * .eos-chat-pr__bar shipped green (#1D9E75 left-accent + green tint). It's
 * the most prominent off-brand element an admin sees. Retheme to glass. */
.eos-watch--cinema .eos-chat-pr__bar,
[data-theme="dark"] .eos-watch--cinema .eos-chat-pr__bar {
  background: var(--surf) !important;
  border: 1px solid var(--hair) !important;
  border-left: 1px solid var(--hair) !important;
  color: var(--fg) !important;
}
.eos-watch--cinema .eos-chat-pr__dot,
.eos-watch--cinema .eos-chat-dot {
  background: var(--fg2) !important;
}
.eos-watch--cinema .eos-chat-pr__lbl,
.eos-watch--cinema .eos-chat-pr__total-big { color: var(--fg) !important; }
.eos-watch--cinema .eos-chat-pr__list,
[data-theme="dark"] .eos-watch--cinema .eos-chat-pr__list {
  background: var(--glass) !important;
  border: 1px solid var(--glassBrd) !important;
}
.eos-watch--cinema .eos-chat-pr__optout { color: var(--fg2) !important; }
.eos-watch--cinema .eos-chat-pr__av { border-color: var(--page) !important; }
.eos-watch--cinema .eos-mc-tally span:last-child,
[data-theme="dark"] .eos-watch--cinema .eos-mc-tally span:last-child { color: var(--fg) !important; }

/* Admin panel stays on-screen on narrow/stacked layouts */
@media (max-width: 600px) {
  .eos-watch--cinema .eos-aqc-panel {
    left: 10px !important; right: 10px !important; width: auto !important;
    max-width: none !important;
  }
}

/* ---- 17ae. In-chat verse card + pinned scripture (green → mono) *
 * The verse-lookup card (.eos-chat-vc__card) and pinned-scripture banner
 * (.eos-ps-card) are green (rgba(29,158,117)/#0F6E56/#5DCAA5) in chat-studio.
 * Retheme to monochrome glass so admin/member chat stays on-brand. */
.eos-watch--cinema .eos-chat-vc__card,
[data-theme="dark"] .eos-watch--cinema .eos-chat-vc__card,
.eos-watch--cinema .eos-ps-card,
[data-theme="dark"] .eos-watch--cinema .eos-ps-card {
  background: var(--surf) !important;
  border: 1px solid var(--hair) !important;
}
.eos-watch--cinema .eos-chat-vc__ref,
.eos-watch--cinema .eos-chat-vc__title,
.eos-watch--cinema .eos-ps-ref,
[data-theme="dark"] .eos-watch--cinema .eos-ps-ref,
.eos-watch--cinema .eos-ps-label { color: var(--fg) !important; }
.eos-watch--cinema .eos-chat-vc__text,
.eos-watch--cinema .eos-ps-text { color: var(--fg) !important; }
.eos-watch--cinema .eos-chat-vc__text sup,
.eos-watch--cinema .eos-ps-text sup,
[data-theme="dark"] .eos-watch--cinema .eos-ps-text sup { color: var(--fg2) !important; }
/* Translation pill + version chip */
.eos-watch--cinema .eos-chat-vc__ver,
.eos-watch--cinema .eos-chat-vc__trans,
.eos-watch--cinema .eos-ps-trans,
[data-theme="dark"] .eos-watch--cinema .eos-ps-trans {
  background: var(--surf2) !important; color: var(--fg) !important; border-color: var(--hair) !important;
}
/* "Read in Bible tab" CTAs → ink outline */
.eos-watch--cinema .eos-chat-vc__cta,
.eos-watch--cinema .eos-ps-cta,
[data-theme="dark"] .eos-watch--cinema .eos-ps-cta {
  background: transparent !important; color: var(--fg) !important; border-color: var(--hair) !important;
}
.eos-watch--cinema .eos-chat-vc__cta:hover,
.eos-watch--cinema .eos-ps-cta:hover,
[data-theme="dark"] .eos-watch--cinema .eos-ps-cta:hover { background: var(--surf2) !important; color: var(--fg) !important; }

/* ---- 18. Sanity marker (DevTools verification) -------------- */
.eos-watch--cinema::after { content: ""; display: none; --eos-redesign-v: "2.2.3"; }