/* web-player/style.css — Spotify-style web player stylesheet */

:root {
  --bg-base: #0a0d14;
  --bg-surface: #121824;
  --bg-surface-elevated: #1a2234;
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-light: #818cf8;
  --accent-emerald: #10b981;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(99, 102, 241, 0.4);

  /* Audio-reactive ambient light behind stage (Cover & Canvas) */
  --glow-c1: rgba(129, 140, 248, 0.85);
  --glow-c2: rgba(168, 85, 247, 0.65);
  --glow-c3: rgba(236, 72, 153, 0.40);
  --ambient-scale: 1.0;
  --ambient-brightness: 1.0;
  --ambient-opacity: 0.55;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg-base);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Custom modern scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Glassmorphic panels */
.glass-panel {
  background: rgba(18, 24, 36, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-subtle);
}

.glass-pill {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
}

.glass-pill.active {
  background: var(--primary);
  border-color: var(--primary-light);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.4);
}

/* Ambient canvas background glow */
.ambient-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(80px) saturate(1.8) brightness(0.6);
  transform: scale(1.2);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  transition: opacity 0.8s ease-in-out;
}

/* Ambient stage light aura behind cover & canvas (audio-reactive, centered behind stage) */
.ambient-stage-light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--ambient-scale, 1.0));
  pointer-events: none;
  z-index: 0;
  opacity: var(--ambient-opacity, 0.55);
  filter: blur(45px) saturate(1.25) brightness(var(--ambient-brightness, 1.0));
  will-change: transform, opacity, filter;
  transition: opacity 0.4s ease, border-radius 0.5s ease, width 0.5s ease, height 0.5s ease;
}

.ambient-stage-light.mode-cover {
  width: clamp(440px, 75vw, 640px);
  height: clamp(440px, 75vw, 640px);
  border-radius: 9999px;
  background: radial-gradient(
    circle at center,
    var(--glow-c1) 0%,
    var(--glow-c1) 32%,
    var(--glow-c2) 56%,
    var(--glow-c3) 76%,
    rgba(10, 13, 20, 0) 96%,
    transparent 100%
  );
}

.ambient-stage-light.mode-canvas {
  width: clamp(380px, 50vw, 480px);
  height: clamp(520px, 70vh, 680px);
  border-radius: 35%;
  background: radial-gradient(
    ellipse at center,
    var(--glow-c1) 0%,
    var(--glow-c1) 30%,
    var(--glow-c2) 55%,
    var(--glow-c3) 78%,
    rgba(10, 13, 20, 0) 96%,
    transparent 100%
  );
}

.ambient-stage-light.mode-lyrics {
  width: min(92vw, 680px);
  height: min(60vh, 520px);
  border-radius: 30%;
  opacity: calc(var(--ambient-opacity, 0.55) * 0.4);
  background: radial-gradient(
    ellipse at center,
    var(--glow-c1) 0%,
    var(--glow-c2) 48%,
    var(--glow-c3) 75%,
    transparent 100%
  );
}

/* Slide-out Queue & Library Drawer */
#panel-queue {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  height: 100%;
  z-index: 50;
  background: rgba(12, 16, 26, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.85);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

#panel-queue.open {
  transform: translateX(0) !important;
}

#queue-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#queue-backdrop.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Auto-dismiss countdown bar */
#queue-timer-bar.active {
  opacity: 1;
}

#queue-timer-fill {
  transition: width 0.1s linear;
}

/* Vinyl rotation animation for cover art view */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mobile navigation hide on desktop */
@media (min-width: 768px) {
  nav {
    display: none !important;
  }
}

/* Core Layout & Flex Fallbacks (ensures robust alignment across all environments) */
.app-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 48rem; /* 768px */
  margin: 0 auto;
  overflow: hidden;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}

button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}

#btn-play {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: var(--primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

#btn-play:hover {
  background-color: var(--primary-hover);
}

#btn-play:active {
  transform: scale(0.95);
}

#cover-container {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 52vh;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

#canvas-container {
  position: relative;
  max-height: 54vh;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

@media (max-height: 720px) {
  #cover-container {
    max-height: 42vh;
    max-width: 300px;
  }
  #canvas-container {
    max-height: 44vh;
  }
}

#cover-container.hidden,
#canvas-container.hidden,
#lyrics-container.hidden {
  display: none !important;
}

.vinyl-disc {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: spin-slow 22s linear infinite;
  animation-play-state: paused;
}

.vinyl-disc.playing {
  animation-play-state: running;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.98), 0 0 40px var(--glow-c1, rgba(99, 102, 241, 0.3)), 0 0 0 1px rgba(255, 255, 255, 0.14);
}

#panel-player {
  overflow-x: hidden;
}

/* Picture disc: cover art fills the entire circular disc */
.vinyl-cover-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
  display: block;
}

/* Concentric micro-grooves overlay across the artwork */
.vinyl-grooves {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.6) 0%, transparent 12%, transparent 22%, rgba(0, 0, 0, 0.3) 24%, transparent 26%),
    radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.75) 96%, rgba(0, 0, 0, 0.95) 100%),
    repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: overlay;
}

/* Depth, rim and run-out shadows */
.vinyl-grooves-depth {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.15),
    inset 0 0 0 8px rgba(0, 0, 0, 0.5),
    inset 0 0 40px rgba(0, 0, 0, 0.85);
}

/* Center Spindle Hole */
.vinyl-hole {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: #020617;
  border: 2.5px solid rgba(212, 212, 216, 0.75);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.9), inset 0 2px 4px rgba(0, 0, 0, 0.95);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vinyl-hole-center {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.95);
}

/* Realistic vinyl light sheen (birefringence highlight) */
.vinyl-sheen {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 30;
  background: conic-gradient(
    from 35deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.05) 25deg,
    rgba(255, 255, 255, 0.22) 45deg,
    rgba(255, 255, 255, 0.05) 65deg,
    transparent 95deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.05) 205deg,
    rgba(255, 255, 255, 0.22) 225deg,
    rgba(255, 255, 255, 0.05) 245deg,
    transparent 275deg
  );
  mix-blend-mode: screen;
}

/* Waveform Canvas & Scrubber */
.waveform-container {
  position: relative;
  width: 100%;
  height: 48px;
  cursor: pointer;
}

.waveform-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.waveform-scrub-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.waveform-container:hover .waveform-scrub-hover {
  opacity: 1;
}

/* Section pills for lyrics */
.section-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.3);
  margin-bottom: 0.5rem;
}

.section-pill.chorus {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}

.section-pill.bridge {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

/* Range input slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  height: 4px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  background-color: var(--primary-light);
}

/* Mobile safe area handling */
.safe-bottom {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

.safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Track context menu (sidebar ⋯ actions) */
.track-menu {
  transform-origin: top right;
  animation: track-menu-in 0.12s ease-out;
}

@keyframes track-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .track-menu {
    animation: none;
  }
}

/* Prevent unwanted bounce / rubber-banding on mobile */
body, html {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

.touch-pan-y {
  touch-action: pan-y;
}

/* ── Player column: top-anchored scroll ────────────────────────────────────
   The footer carries its own top margin (mt-auto), so the column must NOT
   use justify-content: space-between: in an overflowing flex column the
   first items get pushed above the scroll origin and can never be reached.
   flex-start + mt-auto keeps the footer pinned when content is short while
   letting the whole column scroll when it is tall (small phones). */
#panel-player {
  justify-content: flex-start;
  min-height: 0;
}

/* ── Mobile fixes (<768px: the bottom tab bar is visible) ───────────────── */
@media (max-width: 767px) {
  /* Bottom padding must clear the fixed 4rem tab bar. (.safe-bottom alone
     only reserves ~1rem, which left the transport controls hidden behind
     the tab bar with no way to reach them.) */
  .safe-bottom {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Library drawer docks ABOVE the tab bar instead of covering it, so the
     Now Playing / Library tabs stay visible and tappable while browsing. */
  #panel-queue {
    top: 0;
    bottom: 4rem;
    height: auto;
    border-left: none;
  }

  /* Tab bar stays above the drawer + backdrop (drawer z-50, backdrop z-40)
     so there is always an obvious way back to the player. */
  #mobile-tabbar {
    z-index: 60;
  }

  /* Keep the vinyl disc circular: cap width by viewport height as well, so
     the max-height cap can never squash it into an ellipse. */
  #cover-container {
    width: min(100%, 38vh);
  }
}

/* ── Narrow phones (<640px): icon-only header ──────────────────────────────
   "Now Playing" + 3 labeled pills + 3 action buttons exceed ~360px side by
   side. Labels collapse to icons; full labels return on wider screens. */
@media (max-width: 639px) {
  #panel-player .pill-label,
  #panel-player .now-playing-label {
    display: none;
  }

  #panel-player .glass-pill {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}