/* =========================================================================
   iPrompter — Video underlay (parallel preview)
   Loaded after public.css, so these rules win on specificity ties.
   ========================================================================= */

/* The <video> fills the stage and sits behind everything else. */
.bg-cam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Selfie-mirror: matches what the user sees of themselves */
  transform: scaleX(-1);
  background: #000;
  z-index: 0;
  /* Hidden by default — JS reveals it once a stream is attached */
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.bg-cam.is-live { opacity: 1; }

/* Dim overlay sits between camera and prompter text. Opacity set inline by JS. */
.bg-dim {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55; /* default; JS overrides */
  transition: opacity .15s linear;
}

/* Lift prompter text + focus line above the video + dim. */
#stage .focus-line { z-index: 3; }
#stage .prompter-scroll { position: relative; z-index: 2; background: transparent; }

/* Lift dock + countdown + grace pill above the dim too. */
#stage .dock,
#stage .countdown,
#stage .grace-pill { z-index: 4; }

/* When the underlay setting is OFF, hide the video entirely and skip the dim. */
body.underlay-off .bg-cam,
body.underlay-off .bg-dim { display: none; }