/* ── Slide video ──────────────────────────────────────────────────────────
   Two halves: the venue display's full-screen player (VideoStage.vue) and the
   presenter console's transport and readiness block (VideoControl.vue). See
   `Slide.video` in src/shared/deck.ts. */

/* ── The player, venue display only ───────────────────────────────────── */

/* Above everything on the display, the connected-count badge included: while
   the clip runs the screen is the film and nothing else. Every child sits in
   the one grid cell, so the start button and the bar overlay the picture
   without any physical offsets to get wrong in an RTL document. */
.odv {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  background: #000;
}

.odv > * {
  grid-area: 1 / 1;
}

.odv.is-idle.is-playing {
  cursor: none;
}

.odv-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Only when Chrome refused to start with sound, or the file failed. Big
   enough to hit from across a stage with a trackpad. */
.odv-start {
  place-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.7em 1.3em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full, 980px);
  background: rgba(10, 12, 20, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-body, inherit);
  font-size: clamp(22px, 2.2vw, 40px);
  font-weight: 400;
  cursor: pointer;
}

.odv-start:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.odv-start-icon {
  width: 1.3em;
  height: 1.3em;
  fill: currentColor;
}

.odv-wait {
  place-self: center;
  margin: 0;
  padding: 0.5em 1em;
  border-radius: var(--radius-full, 980px);
  background: rgba(10, 12, 20, 0.6);
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(18px, 1.8vw, 32px);
}

/* The bar: shown on mouse movement and while paused, gone two and a half
   seconds into untouched playback. */
.odv-bar {
  place-self: end stretch;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px 22px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  color: #fff;
  transition: opacity 0.3s ease;
}

.odv.is-idle.is-playing .odv-bar {
  opacity: 0;
  pointer-events: none;
}

.odv-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}

.odv-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.odv-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.odv-time {
  flex: 0 0 auto;
  min-width: 3.6em;
  font-family: var(--font-mono, monospace);
  font-size: 15px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* `--odv-progress` is set from the player's position (a computed :style). */
.odv-seek {
  flex: 1 1 auto;
  height: 4px;
  margin: 0;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #fff var(--odv-progress, 0%),
    rgba(255, 255, 255, 0.3) var(--odv-progress, 0%)
  );
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.odv-seek::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}

.odv-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

/* ── The console block, presenter only ────────────────────────────────── */

.od-video-ctl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.od-video-ctl.is-warn {
  border-color: rgba(230, 162, 60, 0.6);
  background: rgba(230, 162, 60, 0.06);
}

.od-video-ctl-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--text-tertiary);
}

.od-video-ctl-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.od-video-clock {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.od-video-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

.od-video-hint.is-warn {
  color: #b45309;
}

/* Chip reuses .od-poll-chip; only the video states are added here. */
.od-poll-chip.is-video-ok {
  border-color: rgba(46, 204, 113, 0.6);
  background: rgba(46, 204, 113, 0.1);
  color: #1d8f4e;
}

.od-poll-chip.is-video-busy {
  border-color: var(--primary-border);
  background: var(--primary-light);
  color: var(--primary-color);
}

.od-poll-chip.is-video-warn {
  border-color: rgba(230, 162, 60, 0.6);
  background: rgba(230, 162, 60, 0.12);
  color: #b45309;
}