/* =========================================
   NOXIASOUNDS — Mini Player Widget
   ========================================= */

.mini-player {
  position: fixed;
  left: 16px;
  right: 16px;
  /* sits above bottom-nav: nav ~74px + 14px margin + 12px gap */
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  border-radius: 20px;
  overflow: hidden;
  max-width: 488px;
  margin: 0 auto;

  /* Override glass for deeper feel */
  background: rgba(18,8,40,0.82) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(157,92,255,0.22) !important;
  box-shadow:
    0 -4px 24px rgba(0,0,0,0.4),
    0 8px 32px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;

  /* Slide up animation */
  transform: translateY(calc(100% + 20px));
  transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1),
              opacity 0.3s ease;
  opacity: 0;
}

/* Center on wider screens */
@media (min-width: 520px) {
  .mini-player {
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 20px));
    right: auto;
    width: calc(100% - 32px);
    max-width: 488px;
  }

  .mini-player.player-visible {
    transform: translateX(-50%) translateY(0) !important;
  }
}

.mini-player.player-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Accent glow line at top */
.mini-player::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157,92,255,0.6), rgba(192,132,252,0.4), transparent);
  pointer-events: none;
}

/* Playing pulse border */
.mini-player.is-playing {
  border-color: rgba(157,92,255,0.40) !important;
  box-shadow:
    0 -4px 24px rgba(0,0,0,0.4),
    0 8px 32px rgba(0,0,0,0.5),
    0 0 28px rgba(124,58,237,0.18),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* ── Inner layout ── */
.mini-player-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 16px;
  position: relative;
}

/* ── Thumbnail ── */
.mini-thumb {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.mini-thumb-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Track info ── */
.mini-player-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-width: 0;
}

.mini-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mini-title {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.mini-category {
  font-size: 0.70rem;
  color: var(--text-muted);
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Controls ── */
.mini-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mini-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
  color: var(--text-secondary);
}

.mini-play-pause {
  background: linear-gradient(135deg, var(--purple-warm), var(--purple-mid));
  color: #fff;
  box-shadow: 0 0 16px rgba(124,58,237,0.40);
  padding-left: 2px; /* optical play icon centering */
}

.mini-play-pause:hover {
  transform: scale(1.12);
  box-shadow: 0 0 24px rgba(124,58,237,0.65);
}

.mini-play-pause:active {
  transform: scale(0.93);
}

.mini-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
}

.mini-close:hover {
  background: rgba(255,255,255,0.10);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.15);
}

/* ── Progress bar ── */
.mini-progress-track {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.10);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}

.mini-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--purple-warm), var(--rose-warm));
  border-radius: 2px;
  /* No CSS transition — rAF handles smooth updates */
  box-shadow: 0 0 8px rgba(192,132,252,0.6);
  will-change: width;
}

/* ── Mini waveform (playing indicator) ── */
.mini-wave {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  height: 0;
  opacity: 0;
  transition: opacity 0.3s, height 0.3s;
  pointer-events: none;
}

.mini-wave.wave-active {
  opacity: 0; /* subtle — progress bar does the job */
}

.mini-wave span {
  display: block;
  width: 2.5px;
  border-radius: 3px;
  background: var(--rose-warm);
  animation: miniWaveBar 1.2s ease-in-out infinite;
}

.mini-wave span:nth-child(1) { height: 8px;  animation-delay: 0s;    }
.mini-wave span:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.mini-wave span:nth-child(3) { height: 10px; animation-delay: 0.3s;  }
.mini-wave span:nth-child(4) { height: 14px; animation-delay: 0.1s;  }
.mini-wave span:nth-child(5) { height: 8px;  animation-delay: 0.25s; }

@keyframes miniWaveBar {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50%       { transform: scaleY(1.0); opacity: 1;   }
}

/* ── Responsive ── */
@media (min-width: 480px) {
  .mini-thumb  { width: 50px; height: 50px; }
  .mini-title  { font-size: 0.92rem; }
}