/* ==========================================================================
 * MILLENOVA GLOBAL PLAYER — PLAYER SHELL AND VISIBILITY CONTRACT
 *
 * OWNER:
 * This file owns the outer floating/global player container, shell geometry, header, expanded versus minimized visibility and the open/close/minimize presentation.
 *
 * MUST NOT OWN:
 * Do not define provider surfaces, queue rows, Stage composition, mobile Stage overrides, menus or reactions. Scrollbar chrome remains owned by
 * Styles/scrollbars.css. JavaScript state/queue/provider semantics stay
 * outside CSS.
 *
 * CASCADE CONTRACT:
 * Phase 11A mechanical split: loaded at manifest position 01, after
 * nothing (first player file). Rule order is unchanged from the former monolith (baseline
 * df93472, lines 8–225). New corrections go into the canonical owning
 * rule; never append dated Phase/fix blocks.
 *
 * DEPENDENCIES:
 * Depends on the floating_playlist.php shell markup, .is-minimized/.is-open state classes set by Scripts/floating-playlist.js and Styles/tokens.css design tokens.
 * ========================================================================== */

/*
 * SCROLLBAR OWNER: Styles/scrollbars.css
 * Scrollbar appearance is centralized there. This file may own overflow,
 * scroll-snap and scrollbar-gutter behavior, but must not style scrollbar chrome.
 */

/* Millenova floating playlist player */
.floating-playlist {
  --mn-mplayer-shell-width: min(390px, calc(100vw - 32px));
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1500;
  width: var(--mn-mplayer-shell-width);
  color: var(--mn-text);
  font-family: var(--mn-font-body);
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.42));
}

.floating-playlist[hidden] {
  display: none !important;
}

.floating-playlist__full,
.floating-playlist__mini {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 0, rgba(255,58,167,.08), transparent 16rem),
    radial-gradient(circle at 10% 40%, rgba(110,242,255,.055), transparent 18rem),
    #08090d;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 24px 70px rgba(0,0,0,.4);
  overflow: hidden;
}

.floating-playlist__full[hidden],
.floating-playlist__mini[hidden] {
  display: none !important;
}

.floating-playlist:not(.is-minimized) .floating-playlist__mini,
.floating-playlist.is-minimized .floating-playlist__full {
  display: none !important;
}

.floating-playlist__header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .72rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,.065);
}

.floating-playlist__title-wrap {
  min-width: 0;
  display: grid;
  gap: .12rem;
}

.floating-playlist__title {
  overflow: hidden;
  color: var(--mn-text);
  font-size: .84rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-playlist__header-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.floating-playlist__header-actions a,
.floating-playlist__header-actions button,
.floating-playlist__transport button,
.floating-playlist__mini-controls button,
.floating-playlist__restore {
  border: 0;
  background: transparent;
  color: var(--mn-muted);
  cursor: pointer;
}

.floating-playlist__manage,
.floating-playlist__minimize,
.floating-playlist__close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px !important;
  text-decoration: none;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

.floating-playlist__manage:hover,
.floating-playlist__manage:focus-visible,
.floating-playlist__minimize:hover,
.floating-playlist__minimize:focus-visible,
.floating-playlist__close:hover,
.floating-playlist__close:focus-visible {
  background: rgba(255,255,255,.055);
  color: #fff;
  outline: 0;
  transform: scale(1.05);
}

.floating-playlist__manage svg,
.floating-playlist__minimize svg,
.floating-playlist__close svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.floating-playlist__close:hover,
.floating-playlist__close:focus-visible,
.floating-playlist__mini-close:hover,
.floating-playlist__mini-close:focus-visible {
  color: #ff7087 !important;
  background: rgba(255,90,114,.075) !important;
}

.floating-playlist__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #030406;
}

.floating-playlist__video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(130deg, rgba(110,242,255,.025), transparent 38%, rgba(255,58,167,.03));
}

.floating-playlist__video-mount,
.floating-playlist__video-mount > div,
.floating-playlist__video-mount iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.floating-playlist__video[data-playback-adapter="spotify"],
.floating-playlist__video[data-playback-adapter="soundcloud"] {
  aspect-ratio: auto;
}

.floating-playlist__video[data-playback-adapter="spotify"] {
  height: 152px;
}

.floating-playlist__video[data-playback-adapter="soundcloud"] {
  height: 206px;
}

.floating-playlist__provider-mount,
.floating-playlist__provider-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #08090d;
}

.millenova-provider-stack {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 40px;
  overflow: hidden;
  background: #08090d;
}

.millenova-provider-stack .floating-playlist__provider-iframe {
  position: relative !important;
  inset: auto !important;
  min-height: 0;
  width: 100% !important;
  height: 100% !important;
}

.millenova-provider-seek {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: .45rem;
  align-items: center;
  padding: .35rem .55rem;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(6,7,11,.98);
}

.millenova-provider-seek__time {
  color: var(--mn-muted);
  font-size: .48rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.millenova-provider-seek__range {
  width: 100%;
  min-width: 0;
  height: 20px;
  margin: 0;
  accent-color: var(--mn-cyan);
  cursor: pointer;
}

.millenova-provider-seek__range:disabled {
  opacity: .35;
  cursor: default;
}