/**
 * Vanduo Framework - Music Player
 * Audio playback component with transport controls, volume, and optional
 * shuffle, progress bar, and playlist features.
 */

:root {
  /* Sizing (Fibonacci pairs) */
  --vd-music-player-padding-x: 1.3125rem;     /* 21px */
  --vd-music-player-padding-y: 0.8125rem;     /* 13px */
  --vd-music-player-padding-x-sm: 0.8125rem;  /* 13px */
  --vd-music-player-padding-y-sm: 0.5rem;     /*  8px */
  --vd-music-player-padding-x-lg: 2.125rem;   /* 34px */
  --vd-music-player-padding-y-lg: 1.3125rem;  /* 21px */
  --vd-music-player-gap: 0.8125rem;           /* 13px */
  --vd-music-player-btn-size: 2.125rem;       /* 34px */
  --vd-music-player-btn-size-sm: 1.625rem;    /* 26px */
  --vd-music-player-btn-size-lg: 2.625rem;    /* 42px */
  --vd-music-player-icon-size: 1.125rem;
  --vd-music-player-volume-width: clamp(3.25rem, 16vw, 4.5rem);
  --vd-music-player-volume-width-sm: 3rem;
  --vd-music-player-volume-width-lg: 5.5rem;
  --vd-music-player-border-radius: var(--vd-border-radius, 0.5rem);
  --vd-music-player-border-width: 1px;

  /* Colors */
  --vd-music-player-bg: var(--vd-bg-primary);
  --vd-music-player-bg-secondary: var(--vd-bg-secondary);
  --vd-music-player-border: var(--vd-border-color);
  --vd-music-player-text: var(--vd-text-primary);
  --vd-music-player-text-muted: var(--vd-text-muted);
  --vd-music-player-accent: var(--vd-color-primary);
  --vd-music-player-btn-hover-bg: var(--vd-bg-secondary);
  --vd-music-player-btn-active-bg: var(--vd-color-primary-alpha-10, rgba(var(--vd-color-primary-rgb, 59,130,246), 0.1));
  --vd-music-player-track-bg: var(--vd-border-color);
  --vd-music-player-track-fill: var(--vd-color-primary);
  --vd-music-player-playlist-hover: var(--vd-bg-secondary);
  --vd-music-player-playlist-active-bg: var(--vd-color-primary-alpha-10, rgba(var(--vd-color-primary-rgb, 59,130,246), 0.1));
  --vd-music-player-playlist-active-text: var(--vd-color-primary);

  /* Transitions */
  --vd-music-player-transition: 0.15s ease;

  /* Glass (uses framework glass tokens; music-player-glass can override) */
  --vd-music-player-glass-bg: var(--vd-glass-bg-light, rgba(255, 255, 255, 0.72));
  --vd-music-player-glass-border: var(--vd-glass-border-light, rgba(255, 255, 255, 0.5));
  --vd-music-player-glass-shadow: var(--vd-glass-shadow, 0 4px 24px rgba(0, 0, 0, 0.12));
  --vd-music-player-floating-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  --vd-music-player-floating-z: 10050;
  --vd-music-player-floating-offset: 1rem;
  --vd-music-player-toolbar-gap: 0.375rem;
  --vd-music-player-handle-size: 1.5rem;
}

/* Dark Theme */
[data-theme="dark"] {
  --vd-music-player-bg: var(--vd-bg-primary);
  --vd-music-player-bg-secondary: var(--vd-color-gray-800);
  --vd-music-player-btn-hover-bg: var(--vd-color-gray-700);
  --vd-music-player-playlist-hover: var(--vd-color-gray-700);
  --vd-music-player-glass-bg: var(--vd-glass-bg-dark, rgba(30, 30, 40, 0.72));
  --vd-music-player-glass-border: var(--vd-glass-border-dark, rgba(255, 255, 255, 0.14));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --vd-music-player-bg: var(--vd-bg-primary);
    --vd-music-player-bg-secondary: var(--vd-color-gray-800);
    --vd-music-player-btn-hover-bg: var(--vd-color-gray-700);
    --vd-music-player-playlist-hover: var(--vd-color-gray-700);
    --vd-music-player-glass-bg: var(--vd-glass-bg-dark, rgba(30, 30, 40, 0.72));
    --vd-music-player-glass-border: var(--vd-glass-border-dark, rgba(255, 255, 255, 0.14));
  }
}

/* ============================================================
   Base Container
   ============================================================ */

.vd-music-player {
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: var(--vd-music-player-bg);
  border: var(--vd-music-player-border-width) solid var(--vd-music-player-border);
  border-radius: var(--vd-music-player-border-radius);
  padding: var(--vd-music-player-padding-y) var(--vd-music-player-padding-x);
  min-width: 16rem;
  max-width: 28rem;
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   Now Playing — track info bar
   ============================================================ */

.vd-music-player-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 1.5rem;
  margin-bottom: 0.625rem;
}

.vd-music-player-icon {
  flex-shrink: 0;
  color: var(--vd-music-player-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}

.vd-music-player-track-name {
  font-size: var(--vd-font-size-sm, 0.875rem);
  color: var(--vd-music-player-text);
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.vd-music-player-track-name.is-idle {
  color: var(--vd-music-player-text-muted);
  font-style: italic;
}

/* ============================================================
   Controls Row
   ============================================================ */

.vd-music-player-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.vd-music-player-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vd-music-player-btn-size);
  height: var(--vd-music-player-btn-size);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--vd-music-player-border-radius);
  color: var(--vd-music-player-text);
  cursor: pointer;
  transition:
    background-color var(--vd-music-player-transition),
    color var(--vd-music-player-transition);
  flex-shrink: 0;
}

.vd-music-player-btn:hover:not(:disabled) {
  background-color: var(--vd-music-player-btn-hover-bg);
  color: var(--vd-music-player-accent);
}

.vd-music-player-btn:focus-visible {
  outline: 2px solid var(--vd-music-player-accent);
  outline-offset: 1px;
}

.vd-music-player-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.vd-music-player-btn.is-active {
  color: var(--vd-music-player-accent);
  background-color: var(--vd-music-player-btn-active-bg);
}

/* Play/Pause is slightly larger */
.vd-music-player-btn-play {
  width: calc(var(--vd-music-player-btn-size) + 0.25rem);
  height: calc(var(--vd-music-player-btn-size) + 0.25rem);
}

.vd-music-player-btn svg,
.vd-music-player-btn i {
  width: var(--vd-music-player-icon-size);
  height: var(--vd-music-player-icon-size);
  font-size: var(--vd-music-player-icon-size);
  pointer-events: none;
}

/* Spacer to push volume to the right */
.vd-music-player-spacer {
  flex: 1 1 1.5rem;
  min-width: 0;
}

/* ============================================================
   Volume
   ============================================================ */

.vd-music-player-volume {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.vd-music-player-volume-icon {
  flex-shrink: 0;
  color: var(--vd-music-player-text-muted);
  display: flex;
  align-items: center;
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}

.vd-music-player-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: var(--vd-music-player-volume-width);
  height: 4px;
  border-radius: 9999px;
  background: var(--vd-music-player-track-bg);
  cursor: pointer;
  outline: none;
  min-width: 3.25rem;
  max-width: 100%;
  flex: 0 1 var(--vd-music-player-volume-width);
}

.vd-music-player-volume-slider:focus-visible {
  outline: 2px solid var(--vd-music-player-accent);
  outline-offset: 2px;
}

/* WebKit thumb */
.vd-music-player-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--vd-music-player-accent);
  cursor: pointer;
  transition: transform var(--vd-music-player-transition);
}

.vd-music-player-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Firefox thumb */
.vd-music-player-volume-slider::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--vd-music-player-accent);
  cursor: pointer;
  border: none;
  transition: transform var(--vd-music-player-transition);
}

.vd-music-player-volume-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
}

/* Firefox track fill */
.vd-music-player-volume-slider::-moz-range-progress {
  background: var(--vd-music-player-track-fill);
  border-radius: 9999px;
}

/* ============================================================
   Progress Bar
   ============================================================ */

.vd-music-player-progress {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.vd-music-player.has-progress .vd-music-player-progress {
  display: flex;
}

.vd-music-player-progress-bar {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 9999px;
  background: var(--vd-music-player-track-bg);
  cursor: pointer;
  outline: none;
}

.vd-music-player-progress-bar:focus-visible {
  outline: 2px solid var(--vd-music-player-accent);
  outline-offset: 2px;
}

.vd-music-player-progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--vd-music-player-accent);
  cursor: pointer;
  transition: transform var(--vd-music-player-transition);
}

.vd-music-player-progress-bar::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.vd-music-player-progress-bar::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--vd-music-player-accent);
  border: none;
  cursor: pointer;
  transition: transform var(--vd-music-player-transition);
}

.vd-music-player-progress-bar::-moz-range-progress {
  background: var(--vd-music-player-track-fill);
  border-radius: 9999px;
}

.vd-music-player-time {
  font-size: 0.6875rem;
  color: var(--vd-music-player-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
  text-align: right;
}

.vd-music-player-time:first-child {
  text-align: left;
}

/* ============================================================
   Playlist
   ============================================================ */

.vd-music-player-playlist {
  display: none;
  flex-direction: column;
  margin-top: 0.625rem;
  border-top: var(--vd-music-player-border-width) solid var(--vd-music-player-border);
  padding-top: 0.5rem;
  max-height: 12rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.vd-music-player.has-playlist .vd-music-player-playlist.is-open {
  display: flex;
}

.vd-music-player-playlist-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: calc(var(--vd-music-player-border-radius) * 0.5);
  cursor: pointer;
  font-size: var(--vd-font-size-sm, 0.875rem);
  color: var(--vd-music-player-text);
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  transition:
    background-color var(--vd-music-player-transition),
    color var(--vd-music-player-transition);
}

.vd-music-player-playlist-item:hover {
  background-color: var(--vd-music-player-playlist-hover);
}

.vd-music-player-playlist-item:focus-visible {
  outline: 2px solid var(--vd-music-player-accent);
  outline-offset: 1px;
}

.vd-music-player-playlist-item.is-active {
  background-color: var(--vd-music-player-playlist-active-bg);
  color: var(--vd-music-player-playlist-active-text);
  font-weight: var(--vd-font-weight-medium, 500);
}

.vd-music-player-playlist-num {
  flex-shrink: 0;
  width: 1.25rem;
  font-size: 0.6875rem;
  color: var(--vd-music-player-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vd-music-player-playlist-item.is-active .vd-music-player-playlist-num {
  color: var(--vd-music-player-accent);
}

.vd-music-player-playlist-name {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ============================================================
   Variants — Compact (floating minimal bar)
   ============================================================ */

.vd-music-player-compact {
  flex-direction: row;
  align-items: center;
  padding: 0.5rem 0.8125rem;
  min-width: auto;
  max-width: none;
  width: auto;
  gap: 0.5rem;
}

.vd-music-player-compact .vd-music-player-info {
  display: none;
}

.vd-music-player-compact .vd-music-player-controls {
  gap: 0.125rem;
}

/* ============================================================
   Variants — Inline (full-width bar)
   ============================================================ */

.vd-music-player-inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.625rem var(--vd-music-player-padding-x);
  min-width: 0;
  max-width: none;
  gap: 0.625rem;
}

.vd-music-player-inline .vd-music-player-info {
  flex: 1;
  min-width: 8rem;
  margin-bottom: 0;
}

.vd-music-player-inline .vd-music-player-controls {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.vd-music-player-inline .vd-music-player-volume {
  flex: 0 1 auto;
}

.vd-music-player-inline .vd-music-player-volume-slider {
  width: clamp(4rem, 18vw, 5.5rem);
  flex-basis: clamp(4rem, 18vw, 5.5rem);
}

.vd-music-player-inline .vd-music-player-progress {
  flex-basis: 100%;
  margin-top: 0.375rem;
}

/* ============================================================
   Sizes
   ============================================================ */

.vd-music-player-sm {
  padding: var(--vd-music-player-padding-y-sm) var(--vd-music-player-padding-x-sm);
  font-size: var(--vd-font-size-sm, 0.875rem);
}

.vd-music-player-sm .vd-music-player-btn {
  width: var(--vd-music-player-btn-size-sm);
  height: var(--vd-music-player-btn-size-sm);
}

.vd-music-player-sm .vd-music-player-btn-play {
  width: calc(var(--vd-music-player-btn-size-sm) + 0.125rem);
  height: calc(var(--vd-music-player-btn-size-sm) + 0.125rem);
}

.vd-music-player-sm .vd-music-player-btn svg,
.vd-music-player-sm .vd-music-player-btn i {
  font-size: 0.9375rem;
  width: 0.9375rem;
  height: 0.9375rem;
}

.vd-music-player-sm .vd-music-player-volume-slider {
  width: var(--vd-music-player-volume-width-sm);
  min-width: var(--vd-music-player-volume-width-sm);
  flex-basis: var(--vd-music-player-volume-width-sm);
}

.vd-music-player-lg {
  padding: var(--vd-music-player-padding-y-lg) var(--vd-music-player-padding-x-lg);
}

.vd-music-player-lg .vd-music-player-btn {
  width: var(--vd-music-player-btn-size-lg);
  height: var(--vd-music-player-btn-size-lg);
}

.vd-music-player-lg .vd-music-player-btn-play {
  width: calc(var(--vd-music-player-btn-size-lg) + 0.25rem);
  height: calc(var(--vd-music-player-btn-size-lg) + 0.25rem);
}

.vd-music-player-lg .vd-music-player-btn svg,
.vd-music-player-lg .vd-music-player-btn i {
  font-size: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}

.vd-music-player-lg .vd-music-player-volume-slider {
  width: var(--vd-music-player-volume-width-lg);
  min-width: 4rem;
  flex-basis: var(--vd-music-player-volume-width-lg);
}

/* ============================================================
   Neutral color variant — use gray instead of primary
   ============================================================ */

.vd-music-player-neutral {
  --vd-music-player-accent: var(--vd-text-primary);
  --vd-music-player-track-fill: var(--vd-text-primary);
  --vd-music-player-playlist-active-text: var(--vd-text-primary);
  --vd-music-player-playlist-active-bg: var(--vd-bg-secondary);
  --vd-music-player-btn-active-bg: var(--vd-bg-secondary);
}

/* ============================================================
   Glass variant — frosted surface (aligns with effects/glass.css)
   ============================================================ */

.vd-music-player-glass {
  position: relative;
  overflow: hidden;
  background: var(--vd-music-player-glass-bg);
  border-color: var(--vd-music-player-glass-border);
  box-shadow: var(--vd-music-player-glass-shadow);
  backdrop-filter: blur(var(--vd-glass-blur, 12px)) saturate(var(--vd-glass-saturate, 1.8));
  -webkit-backdrop-filter: blur(var(--vd-glass-blur, 12px)) saturate(var(--vd-glass-saturate, 1.8));
  isolation: isolate;
}

.vd-music-player-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, var(--vd-glass-highlight-alpha, 0.12)) 0%,
    rgba(255, 255, 255, 0) 45%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.vd-music-player-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
  opacity: var(--vd-glass-noise-opacity, 0.12);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.vd-music-player-glass > * {
  position: relative;
  z-index: 1;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vd-music-player-glass {
    background: var(--vd-music-player-bg);
  }

  .vd-music-player-glass::before,
  .vd-music-player-glass::after {
    display: none;
  }
}

/* ============================================================
   Floating / detached — fixed overlay above page content
   ============================================================ */

.vd-music-player.vd-music-player-floating {
  position: fixed;
  z-index: var(--vd-music-player-floating-z);
  max-width: min(28rem, calc(100vw - 2 * var(--vd-music-player-floating-offset)));
  width: min(28rem, calc(100vw - 2 * var(--vd-music-player-floating-offset)));
  margin: 0;
  box-shadow: var(--vd-music-player-floating-shadow);
  transition:
    box-shadow var(--vd-music-player-transition),
    transform var(--vd-music-player-transition);
}

.vd-music-player-floating.vd-music-player-floating-bottom-left,
.vd-music-player-floating.vd-music-player-floating-bottom-right {
  bottom: var(--vd-music-player-floating-offset);
  top: auto;
}

.vd-music-player-floating.vd-music-player-floating-bottom-left {
  left: var(--vd-music-player-floating-offset);
  right: auto;
}

.vd-music-player-floating.vd-music-player-floating-bottom-right {
  right: var(--vd-music-player-floating-offset);
  left: auto;
}

.vd-music-player-floating.vd-music-player-floating-top-left,
.vd-music-player-floating.vd-music-player-floating-top-right {
  top: var(--vd-music-player-floating-offset);
  bottom: auto;
}

.vd-music-player-floating.vd-music-player-floating-top-left {
  left: var(--vd-music-player-floating-offset);
  right: auto;
}

.vd-music-player-floating.vd-music-player-floating-top-right {
  right: var(--vd-music-player-floating-offset);
  left: auto;
}

.vd-music-player-floating:hover {
  box-shadow: var(--vd-glass-float-shadow, 0 14px 42px rgba(0, 0, 0, 0.2));
}

/* Custom coordinates (set via JS) override corner presets */
.vd-music-player-floating.is-position-custom {
  top: var(--vd-music-player-floating-top, 1rem) !important;
  left: var(--vd-music-player-floating-left, 1rem) !important;
  right: auto !important;
  bottom: auto !important;
}

/* ============================================================
   Toolbar — drag handle, detach, minimize
   ============================================================ */

.vd-music-player-toolbar {
  display: flex;
  align-items: center;
  gap: var(--vd-music-player-toolbar-gap);
  margin: calc(-0.25rem) calc(-0.25rem) 0.5rem calc(-0.25rem);
  min-height: var(--vd-music-player-handle-size);
  position: relative;
  z-index: 2;
}

.vd-music-player-drag-handle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: var(--vd-music-player-handle-size);
  padding: 0;
  border: none;
  border-radius: var(--vd-music-player-border-radius);
  background: transparent;
  color: var(--vd-music-player-text-muted);
  cursor: grab;
  touch-action: none;
}

.vd-music-player-drag-handle:active {
  cursor: grabbing;
}

.vd-music-player-drag-handle .ph {
  font-size: 1.125rem;
  pointer-events: none;
}

.vd-music-player-detached.vd-music-player-draggable .vd-music-player-drag-handle {
  display: inline-flex;
}

.vd-music-player-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 0.5rem;
}

.vd-music-player-btn-attach,
.vd-music-player-btn-detach,
.vd-music-player-btn-minimize {
  flex-shrink: 0;
}

/* Detach: show detach when inline; after detach show attach + optional drag */
.vd-music-player.vd-music-player-detached .vd-music-player-btn-detach {
  display: none;
}

.vd-music-player .vd-music-player-btn-attach {
  display: none;
}

.vd-music-player.vd-music-player-detached .vd-music-player-btn-attach {
  display: inline-flex;
}

/* ============================================================
   Minimized — compact transport + volume only
   ============================================================ */

.vd-music-player-minimized .vd-music-player-info,
.vd-music-player-minimized .vd-music-player-progress,
.vd-music-player-minimized .vd-music-player-playlist {
  display: none !important;
}

.vd-music-player-minimized .vd-music-player-btn-shuffle,
.vd-music-player-minimized .vd-music-player-btn-playlist {
  display: none;
}

.vd-music-player-minimized {
  min-width: auto;
  max-width: min(22rem, 100vw);
}

/* ============================================================
   Reduced Motion
   ============================================================ */

@media (prefers-reduced-transparency: reduce) {
  .vd-music-player-glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--vd-music-player-bg);
    border-color: var(--vd-music-player-border);
  }

  .vd-music-player-glass::before,
  .vd-music-player-glass::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vd-music-player-btn,
  .vd-music-player-volume-slider::-webkit-slider-thumb,
  .vd-music-player-volume-slider::-moz-range-thumb,
  .vd-music-player-progress-bar::-webkit-slider-thumb,
  .vd-music-player-progress-bar::-moz-range-thumb,
  .vd-music-player-playlist-item,
  .vd-music-player-floating {
    transition: none;
  }

  .vd-music-player-floating:hover {
    box-shadow: var(--vd-music-player-floating-shadow);
  }
}

@media (max-width: 640px) {
  .vd-music-player {
    min-width: 0;
    max-width: none;
  }

  .vd-music-player-controls {
    row-gap: 0.5rem;
  }

  .vd-music-player-spacer {
    display: none;
  }

  .vd-music-player-volume {
    margin-left: auto;
  }
}