/* =========================================================================
 * Super Live Music Lyrics — live YouTube player (ship-now)
 * Facade poster (no CLS / no 3rd-party JS on load) + CSS-only draggable PiP
 * floating player (no iframe reparent -> playback never restarts).
 * Uses niyal-modern-ui premium tokens (--nmui-*) with safe fallbacks.
 * ========================================================================= */

.niyal-video {
  position: relative;
  width: 100%;
  margin: 0 0 16px;
}

/* 16:9 media box — reserves space up front (no layout shift) */
.niyal-video-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;              /* subtle, video-like (not the pill the premium layer gives buttons) */
  overflow: hidden;
  background: #000;
  box-shadow: var(--nmui-shadow-md, 0 6px 18px rgba(0, 0, 0, .18));
  touch-action: manipulation;      /* prompt taps into the iframe on mobile (no
                                      double-tap-zoom / 300ms delay); pan still
                                      allowed so the YT seek bar works. */
}
/* The poster is a <button>; the premium layer's :is(button, input[type=submit])
   rule (specificity 0,2,2 via the attribute arg) rounds it to a pill AND — via its
   `background:` shorthand — resets background-size/repeat/position to their initial
   values (auto / repeat / 0% 0%), so the thumbnail TILES instead of covering. Pin
   all of them here so the thumbnail fills the box squarely (no repeat) and is
   clipped by the box's own radius. */
.niyal-video .niyal-video-poster {
  border-radius: 0 !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
@supports not (aspect-ratio: 1 / 1) {
  .niyal-video-box { height: 0; padding-top: 56.25%; }
}

.niyal-video-poster,
.niyal-yt-mount,
.niyal-yt-mount iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Poster / play facade */
.niyal-video-poster {
  display: block;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-color: #000;
  transition: filter .2s ease;
  z-index: 4;   /* sit ABOVE the (initially empty) .niyal-yt-mount so the WHOLE
                   poster reliably catches the play click — not just dead-center */
}
.niyal-video-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .35));
}
.niyal-video-poster:hover { filter: brightness(1.05); }
.niyal-play {
  position: absolute;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--nmui-accent, #e4422e);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .18s ease;
  z-index: 2;
}
.niyal-play::before {
  content: "";
  position: absolute;
  left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}
.niyal-video-poster:hover .niyal-play { transform: translate(-50%, -50%) scale(1.08); }

/* PiP launch button */
.niyal-pip-toggle {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 6;                      /* above the poster (z-index:4) so it stays tappable */
  width: 38px; height: 38px;
  display: none;                 /* shown by JS once a player exists */
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--nmui-r-pill, 999px);
  color: #fff;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.niyal-pip-toggle:hover { background: var(--nmui-accent, #e4422e); transform: translateY(-1px); }
.niyal-video.is-playing .niyal-pip-toggle { display: inline-flex; }

/* Once playing, the poster facade (and its play button) must NEVER intercept the
   iframe — hide it via the class too (not just an inline style) and kill pointer
   events, so the native YouTube controls underneath are fully clickable. */
.niyal-video.is-playing .niyal-video-poster { display: none !important; pointer-events: none !important; }
/* The premium layer nudges every button up 1px on hover; don't let that "slide"
   the poster facade (it's a full-cover facade, not a real button). */
html.nmui-premium .niyal-video-poster:hover,
html.nmui-premium .niyal-video-poster:active { transform: none !important; }
/* On the top hero the float/drag button is always visible (discoverable), even
   before playback, so users know the player can pop out and be dragged. */
.niyal-video--top .niyal-pip-toggle { display: inline-flex; }

/* Floating-mode header (hidden until floating) */
.niyal-video-head { display: none; }

/* Video hero shows at the TOP on every breakpoint (Smule-style). The sidebar
   facade is retired so a single player is never duplicated. */
.niyal-video--top { display: block; }
.niyal-video--top .niyal-video { margin-bottom: 18px; }
.niyal-video--sidebar { display: none; }
/* Desktop: keep the hero a tasteful centered size, not a giant full-width block. */
@media (min-width: 901px) {
  .niyal-video--top { max-width: 760px; margin-left: auto; margin-right: auto; }
}
/* A subtle "drag me" hint on the hero's float button. */
.niyal-video--top .niyal-pip-toggle::after {
  content: attr(data-hint);
  position: absolute;
  right: 46px; top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 11px; font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: 3px 8px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.niyal-video--top:hover .niyal-pip-toggle::after { opacity: 1; }
@media (max-width: 900px) { .niyal-video--top .niyal-pip-toggle::after { display: none; } }

/* ---- Floating PiP (CSS-only position:fixed on the same node) ---- */
.niyal-video.niyal-floating {
  position: fixed;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));  /* clear the bottom nav */
  left: auto; top: auto;
  width: clamp(240px, 72vw, 360px);
  margin: 0;
  z-index: 2147483300;
  border-radius: var(--nmui-r-md, 18px);
  overflow: hidden;
  box-shadow: var(--nmui-shadow-lg, 0 12px 30px rgba(0, 0, 0, .38));
  background: var(--nmui-surface, #14161c);
  /* NOTE: do NOT put touch-action:none here — on the floating player it swallows
     every tap before it reaches the cross-origin YouTube iframe, killing the
     native play/pause/seek/fullscreen controls. It belongs only on the drag
     handle (.niyal-video-head) below. */
}
.niyal-video.niyal-floating .niyal-video-box { border-radius: 0; box-shadow: none; }
.niyal-video.niyal-floating .niyal-pip-toggle { display: none; }
.niyal-video.niyal-floating .niyal-video-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: grab;
  color: var(--nmui-text, #e8eaed);
  background: var(--nmui-elev, #232730);
  user-select: none;
  touch-action: none;          /* drag handle only — never over the video/iframe */
}
.niyal-video.niyal-floating.niyal-dragging .niyal-video-head { cursor: grabbing; }
.niyal-video-grip {
  width: 26px; height: 4px; border-radius: 999px;
  background: currentColor; opacity: .4;
}
.niyal-video-name { flex: 1; font-size: 12px; font-weight: 600; opacity: .85; }
.niyal-video-dock {
  border: none; background: transparent; color: inherit;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .8;
}
.niyal-video-dock:hover { opacity: 1; color: var(--nmui-accent, #e4422e); }
/* Fullwidth toggle (only visible in the floating header) + pinch hint */
.niyal-video-wide {
  border: none; background: transparent; color: inherit;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 6px; opacity: .8;
}
.niyal-video-wide:hover { opacity: 1; color: var(--nmui-accent, #e4422e); }

/* Fullwidth floating player — fills left↔right (great on mobile). */
.niyal-video.niyal-floating.niyal-video--wide {
  width: calc(100vw - 12px) !important;
  left: 6px !important;
  right: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .niyal-video-poster, .niyal-play, .niyal-pip-toggle { transition: none; }
}

/* ============================ LIVE LYRICS ============================== */
.niyal-lyric-lines { line-height: 2; }
.niyal-ll { transition: color .25s ease, transform .25s ease, background .25s ease; border-radius: 6px; }

/* active (currently-sung) line — Smule-style accent highlight */
.niyal-ll.is-active {
  color: var(--nmui-accent, #e4422e);
  font-weight: 700;
  background: color-mix(in srgb, var(--nmui-accent, #e4422e) 12%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nmui-accent, #e4422e) 12%, transparent);
}

/* "Live demo — auto-synced" badge (song has no saved timings; karaoke is
   auto-distributed across the video duration). */
.niyal-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--nmui-accent, #e4422e);
  background: color-mix(in srgb, var(--nmui-accent, #e4422e) 14%, transparent);
}
.niyal-demo-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--nmui-accent, #e4422e);
  animation: niyal-demo-pulse 1.4s infinite;
}
@keyframes niyal-demo-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nmui-accent, #e4422e) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* tap-to-sync editor */
body.niyal-sync-mode .niyal-ll { cursor: pointer; }
.niyal-ll.is-cue {
  background: color-mix(in srgb, var(--nmui-accent, #e4422e) 18%, transparent);
  box-shadow: 0 0 0 2px var(--nmui-accent, #e4422e);
  border-radius: 6px;
  padding: 0 4px;
}

.niyal-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--nmui-r-pill, 999px);
  background: var(--nmui-accent, #e4422e);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--nmui-shadow-sm, 0 2px 6px rgba(0, 0, 0, .15));
}
.niyal-sync-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* "Your sync is pending approval" pill (visitor's own submission). */
.niyal-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #9a6b00;
  background: rgba(240, 180, 40, .16);
}
html[data-theme="dark"] .niyal-sync-status { color: #ffcf6b; background: rgba(240, 180, 40, .14); }

.niyal-sync-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));   /* above the bottom nav */
  z-index: 2147483200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--nmui-glass-dark, rgba(20, 22, 28, .94));
  backdrop-filter: blur(16px) saturate(150%);
  color: #fff;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .3);
}
.niyal-sync-hint { flex: 1; font-size: 12px; opacity: .9; }
.niyal-sync-count { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; }
.niyal-sync-save,
.niyal-sync-exit {
  border: none;
  border-radius: var(--nmui-r-pill, 999px);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.niyal-sync-save { background: var(--nmui-accent, #e4422e); color: #fff; }
.niyal-sync-exit { background: rgba(255, 255, 255, .16); color: #fff; }

/* Manual TAP / UNDO keys — sit LEFT of Submit so mobile users can sync without a
   keyboard (Tap = Space = stamp the current line, Undo = Backspace). */
.niyal-sync-keys { display: flex; gap: 8px; flex: 0 0 auto; }
.niyal-sync-key {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; border-radius: var(--nmui-r-pill, 999px);
  padding: 8px 14px; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .16);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.niyal-sync-key:active { transform: scale(.95); }
.niyal-key-ic { font-size: 16px; line-height: 1; }
/* Distinct colours (beat the premium layer's global accent button style):
   Tap = green (advance), Undo/Exit = neutral, Submit = accent red. */
.niyal-sync-bar .niyal-sync-tap { background: rgba(37, 197, 94, .95) !important; color: #fff !important; }
.niyal-sync-bar .niyal-sync-tap:hover { background: rgba(37, 197, 94, 1) !important; }
.niyal-sync-bar .niyal-sync-back,
.niyal-sync-bar .niyal-sync-exit { background: rgba(255, 255, 255, .18) !important; color: #fff !important; }
.niyal-sync-bar .niyal-sync-back:hover,
.niyal-sync-bar .niyal-sync-exit:hover { background: rgba(255, 255, 255, .28) !important; }
.niyal-sync-bar .niyal-sync-save { background: var(--nmui-accent, #e4422e) !important; color: #fff !important; }

@media (max-width: 600px) {
  .niyal-sync-hint { display: none; }
  .niyal-sync-bar { gap: 8px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .niyal-sync-count { min-width: 44px; text-align: center; }
  .niyal-sync-key { padding: 12px 16px; font-size: 14px; }       /* bigger touch targets */
  .niyal-sync-save, .niyal-sync-exit { padding: 12px 16px; font-size: 13px; }
}