/* ---------- Plyr + Auto-PiP / Sticky (final polished) ---------- */
/* ---------- Native YouTube fallback ---------- */
.yt-native{
  position:relative; display:block; width:100%;
  border-radius:12px; overflow:hidden; background:#000;
  box-shadow:0 12px 12px rgba(0,0,0,.25);
  aspect-ratio: var(--yt-ratio, 16/9);
}
.yt-native iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@supports not (aspect-ratio: 1/1){
  .yt-native{ height:auto; }
  .yt-native::before{ content:""; display:block; padding-top:56.25%; }
  @media (max-width:560px){ .yt-native::before{ padding-top:66.6667%; } }
  .yt-native iframe{ position:absolute; inset:0; width:100%; height:100%; }
}
@media (max-width:560px){ .yt-native{ --yt-ratio: 3/2; } }

/* ---------- Plyr base ---------- */
.plyr__poster{ pointer-events:none; z-index:1; }
.zf-tap{ position:absolute; inset:0; z-index:2; background:transparent; pointer-events:auto; touch-action:pan-y; }
.plyr__controls{ position:relative; z-index:3; }
.plyr__control--overlaid{ z-index:4 !important; pointer-events:auto !important; }

.post-video{ margin:10px 0 6px; }
.post-video .plyr{
  border-radius:12px; overflow:hidden; background:#000;
  box-shadow:0 12px 12px rgba(0,0,0,.25);
  --plyr-video-ratio:16/9;
}
/* radius match with container (12px) */
.post-video .plyr__video-embed{ border-radius:12px; overflow:hidden; margin:0; box-shadow:none; }
.post-video .plyr__video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Caption */
.video-caption{ margin-top:8px; background:#f5f6f8; color:#6b7280; border-radius:10px; padding:10px 14px; }
.video-caption .video-title{ font-weight:700; color:#111827; margin-right:6px; }
.video-caption .video-desc{ color:#6b7280; }

/* ---------- Theme / controls ---------- */
.zeno-plyr{
  --plyr-control-radius:12px;
  --plyr-tooltip-background:#0b0e11; --plyr-tooltip-color:#fff;
  --plyr-audio-controls-background:transparent;
  --plyr-range-track-background:rgba(255,255,255,.25);
  --plyr-range-fill-background:var(--plyr-color-main);
  --plyr-badge-background:rgba(0,0,0,.5);
  -webkit-tap-highlight-color:transparent;

  /* Focus ring token (fallback color) */
  --zf-focus-ring: rgba(124,255,91,.35);
}
/* Theme variants */
.zeno-plyr.zf--lime { --plyr-color-main:#7CFF5B; }
.zeno-plyr.zf--miami{ --plyr-color-main:#ff5ea6; }

/* If color-mix is supported, derive focus ring from theme color */
@supports (color: color-mix(in srgb, red 50%, white)){
  .zeno-plyr{ --zf-focus-ring: color-mix(in srgb, var(--plyr-color-main) 35%, transparent); }
}

.zeno-plyr .plyr__controls{
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45));
  border-radius:12px; padding:6px 8px;
}
.zeno-plyr .plyr__control{ box-shadow:0 8px 20px rgba(0,0,0,.15); }
.zeno-plyr .plyr__progress input[type=range]{ height:6px; }
.zeno-plyr .plyr__captions{ font-size:15px; text-shadow:0 2px 6px rgba(0,0,0,.6); }

/* Unified, theme-aware focus ring */
.zeno-plyr .plyr__control:focus-visible,
.zeno-plyr .plyr__controls input[type=range]:focus-visible,
.zeno-plyr .pip-close:focus-visible,
.zeno-plyr .plyr__control--youtube:focus-visible{
  outline:0;
  box-shadow:0 0 0 2px var(--zf-focus-ring) inset;
  border-radius:8px;
}

.zeno-plyr .plyr__control--overlaid{ background:transparent !important; box-shadow:none !important; }
.zeno-plyr.plyr--playing .plyr__control--overlaid{ display:none !important; }
.zeno-plyr .plyr__controls .plyr__control[data-plyr="play"],
.zeno-plyr .plyr__controls .plyr__control[data-plyr="settings"],
.zeno-plyr .plyr__controls .plyr__control[data-plyr="fullscreen"],
.zeno-plyr .plyr__controls .plyr__control[data-plyr="mute"]{
  background:transparent !important; box-shadow:none !important; border:none !important;
}

/* ---------- Controls UX: cursor pointers ---------- */
.zeno-plyr .plyr__controls button,
.zeno-plyr .plyr__controls .plyr__control,
.zeno-plyr .plyr__progress input[type=range],
.zeno-plyr .plyr__volume input[type=range]{ cursor:pointer; }
.zeno-plyr .plyr__progress__container, .zeno-plyr .plyr__volume{ cursor:pointer; }

/* YouTube button */
.plyr__controls .plyr__control--youtube{
  background:rgba(255,0,0,.85); color:#fff; border-radius:6px;
  padding:4px; margin:0 4px; display:flex; align-items:center; justify-content:center;
  text-decoration:none; pointer-events:auto;
}
.plyr__controls .plyr__control--youtube:hover{ background:rgba(255,0,0,1); }

/* Mobile tweaks */
@media (max-width:768px){
  .plyr__controls{ font-size:12px; padding:6px; }
  .plyr__controls button{ width:28px; height:28px; }
  .plyr__progress__container{ height:4px; }
  .zeno-plyr .plyr__controls [data-plyr="mute"],
  .zeno-plyr .plyr__controls .plyr__volume{ display:none !important; }
}

/* ---------- Sticky mini-player ---------- */
.pip-sticky{
  position:fixed; right:16px; bottom:16px; width:min(380px,46vw); aspect-ratio:16/9;
  z-index:9999; border-radius:12px; overflow:hidden; background:#000;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  opacity:0; transform:scale(.9) translateY(12px);
  transition:opacity .22s ease, transform .22s ease;
}
.pip-sticky.is-visible{ opacity:1; transform:scale(1) translateY(0); }
.pip-sticky .plyr__video-embed, .pip-sticky .plyr{ height:100%; }

.pip-close{
  position:absolute; top:6px; right:6px; z-index:3; width:28px; height:28px; border:0; border-radius:6px;
  background:rgba(25,25,25,.72) !important; color:#fff !important; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s ease;
}
.pip-close:hover{ background:rgba(255,0,0,.75) !important; }
.pip-close:after{ content:"✕"; font-size:14px; line-height:1; font-weight:600; }

.pip-handle{
  position:absolute; inset:0 0 auto 0; height:40px; z-index:2;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
  cursor:grab; user-select:none; -webkit-user-select:none; display:none;
  touch-action:none; /* smoother drag on touch */
}
.pip-sticky .pip-handle{ display:block; }
.pip-handle:active{ cursor:grabbing; }

@media (max-width:560px){
  .post-video .plyr{ --plyr-video-ratio: 3/2; }
  .pip-sticky{ width:min(92vw,360px); aspect-ratio:16/9; }
}

/* ---------- Auto-hide UI (fade + slide) ---------- */
.zeno-plyr .plyr__controls{ transition: opacity .28s ease, transform .28s ease; transform: translateY(0); will-change: opacity, transform; }
.zeno-plyr.zf-ui-hidden .plyr__controls{ opacity:0; pointer-events:none; transform:translateY(12px); }
.zeno-plyr .plyr__control--overlaid{ transition: opacity .28s ease, transform .28s ease; transform:translateY(0); }
.zeno-plyr.zf-ui-hidden .plyr__control--overlaid{ opacity:0; transform:translateY(8px); }
.zeno-plyr .plyr__captions{ transition:opacity .28s ease; }
.zeno-plyr.zf-ui-hidden .plyr__captions{ opacity:.75; }
@media (hover:hover){ .zeno-plyr.zf-ui-hidden{ cursor:none; } }

/* ---------- Watermark OFF ---------- */
.zeno-plyr .zf-watermark { display:none !important; }

/* ---------- Placeholder to hold layout while PiP ---------- */
.pip-ph{ height:0; pointer-events:none; visibility:hidden; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .pip-sticky{ transition:none !important; }
  .zeno-plyr .plyr__controls,
  .zeno-plyr .plyr__control--overlaid,
  .zeno-plyr .zf-watermark{ transition:none !important; }
}

/* Double-tap seek feedback bubbles */
.zeno-plyr .zf-skip{
  position:absolute; inset:0; z-index:5; pointer-events:none; display:block;
}
.zeno-plyr .zf-skip .b{
  position:absolute; top:50%;
  transform:translateY(-50%) scale(.9);
  padding:8px 12px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; font-weight:700;
  opacity:0; transition:opacity .18s ease, transform .18s ease;
  user-select:none;
}
.zeno-plyr .zf-skip .b.left{  left:12%; }
.zeno-plyr .zf-skip .b.right{ right:12%; }
.zeno-plyr .zf-skip .b.show{ opacity:1; transform:translateY(-50%) scale(1); }