/* ---------- Video player — full-screen pushed layer ----------
   Same layer/scrim/is-open pattern as downloads.css/.sh-* in detail.css,
   but full-bleed (a player is the primary content, not a side sheet) and
   above both (z-overlay + 3) since Play inside the downloads panel opens it
   on top of that panel too. */

.pl-layer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 3);
  pointer-events: none;
}

.pl-layer.is-hidden {
  display: none;
}

.pl-scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.pl-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #000;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.pl-layer.is-open {
  pointer-events: auto;
}

.pl-layer.is-open .pl-scrim {
  opacity: 1;
}

.pl-layer.is-open .pl-stage {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .pl-stage {
    transition: opacity var(--duration-fast) linear;
    transform: none;
  }
}

/* ---------- Top bar ---------- */
.pl-topbar {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: calc(var(--space-3) + env(safe-area-inset-top))
    calc(var(--space-4) + env(safe-area-inset-right)) var(--space-5)
    calc(var(--space-4) + env(safe-area-inset-left));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);
  pointer-events: none;
}

.pl-topbar .pl-close,
.pl-topbar .pl-brightness-btn {
  pointer-events: auto;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
}

/* ---------- Brightness — fallback video-filter control, not real system
   brightness (the web/TWA layer has no access to that) ---------- */
.pl-brightness-popover {
  position: absolute;
  top: 100%;
  inset-inline-end: var(--space-4);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-md);
  pointer-events: auto;
}

.pl-brightness-popover[hidden] {
  display: none;
}

.pl-brightness-slider {
  width: 8rem;
  accent-color: var(--color-accent);
}

.pl-title {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Player controls stay LTR (see player.js) but the title text itself keeps
   its own natural direction — Persian titles should still read RTL. */
.pl-title:lang(fa) {
  direction: rtl;
  text-align: right;
}

/* ---------- Media ---------- */
.pl-media {
  flex: 1;
  min-height: 0;
  display: flex;
}

.pl-video,
.pl-media .plyr {
  width: 100%;
  height: 100%;
}

/* Letterbox rather than stretch/crop across the wide range of source aspect
   ratios (4:3 up to 21:9 releases) and device aspect ratios (16:9–21:9). */
.pl-video,
.pl-media .plyr video {
  object-fit: contain;
}

.pl-media .plyr__controls {
  padding-inline-end: calc(var(--plyr-control-spacing, 10px) + env(safe-area-inset-right));
  padding-inline-start: calc(var(--plyr-control-spacing, 10px) + env(safe-area-inset-left));
  padding-bottom: env(safe-area-inset-bottom);
}

.pl-media .plyr {
  --plyr-color-main: var(--color-accent);
  --plyr-video-background: #000;
  --plyr-badge-background: var(--color-accent);
  --plyr-badge-text-color: var(--color-accent-contrast);
  --plyr-control-icon-size: 19px;
  --plyr-control-spacing: 10px;
  --plyr-control-radius: var(--radius-sm);
  --plyr-video-control-color: #fff;
  --plyr-video-control-color-hover: var(--color-accent-contrast);
  --plyr-video-control-background-hover: var(--color-accent);
  --plyr-menu-background: var(--color-bg-elevated);
  --plyr-menu-color: var(--color-text);
  --plyr-menu-arrow-color: var(--color-text-secondary);
  --plyr-menu-radius: var(--radius-md);
  --plyr-tooltip-background: var(--color-bg-elevated);
  --plyr-tooltip-color: var(--color-text);
  --plyr-font-family: var(--font-body);
  --plyr-range-thumb-height: 14px;
  --plyr-range-track-height: 5px;
}

/* ---------- Status overlay (loading/buffering/error) ---------- */
.pl-status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  pointer-events: none;
}

/* Same reason `.pl-brightness-popover[hidden]` needs this below: `.pl-status`
   sets its own `display`, which otherwise beats the browser's default
   `[hidden]{display:none}` UA rule regardless of specificity — without this,
   setting `statusEl.hidden = true` (setStatus(null) in player.js, called once
   the video reaches 'canplay'/'playing') never actually hides the element,
   so its semi-transparent background box is left on screen for the rest of
   playback even after the "Preparing…" text itself is cleared. */
.pl-status[hidden] {
  display: none;
}

.pl-status.is-error {
  color: var(--color-danger);
  pointer-events: auto;
}

.pl-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- "Resuming…" notice — brief, near the top, only for a real resume ----------
   Same dark-pill look as .pl-status (this player's own overlay convention —
   the app-wide .mm-toast lives bottom-fixed and light-elevated, wrong spot
   and wrong contrast against a video). Sits just below the top bar so it
   never overlaps the close/brightness buttons. */
.pl-resume-toast {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 5rem);
  transform: translate(-50%, -6px);
  z-index: 3;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  background: rgba(0, 0, 0, 0.65);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.pl-resume-toast:not([hidden]) {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Same `[hidden]` vs. author-`display` fight as `.pl-status`/`.pl-brightness-popover`
   above — this element has no explicit `display` of its own, but needs an
   explicit rule anyway since the opacity/transform rule above would
   otherwise keep it laid out (and briefly visible) even while `[hidden]`. */
.pl-resume-toast[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pl-resume-toast {
    transition: opacity var(--duration-fast) linear;
    transform: translate(-50%, 0);
  }
}

.pl-retry-btn svg {
  width: 1em;
  height: 1em;
}

/* ---------- Double-tap seek flash (±10s) ---------- */
.pl-seek-flash {
  position: absolute;
  top: 50%;
  width: 40%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
}

.pl-seek-flash-left {
  left: 0;
  justify-content: flex-start;
  padding-inline-start: var(--space-6);
}

.pl-seek-flash-right {
  right: 0;
  justify-content: flex-end;
  padding-inline-end: var(--space-6);
}

.pl-seek-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.35), transparent 70%);
}

.pl-seek-flash.is-visible {
  animation: pl-seek-flash-pop var(--duration-base, 200ms) ease-out;
  opacity: 1;
  transition: opacity 200ms ease-in 500ms;
}

@keyframes pl-seek-flash-pop {
  from { opacity: 0; transform: translateY(-50%) scale(0.85); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pl-seek-flash.is-visible {
    animation: none;
  }
}

/* ---------- Small screens: pull the top bar in a bit tighter ---------- */
@media (max-width: 480px) {
  .pl-topbar {
    padding-inline: var(--space-3);
  }
}