/* ==============================
   NOW PLAYING
============================== */

/* Skeleton shimmer while loading */
@keyframes np-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.np-skeleton {
  background: #111;
  border-radius: 12px;
  border: 1px solid rgba(255,105,180,0.04);
  padding: 14px;
  text-align: center;
}

.np-skeleton-art {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
  background-size: 800px 100%;
  animation: np-shimmer 1.4s infinite linear;
}

.np-skeleton-line {
  height: 14px;
  border-radius: 6px;
  margin-top: 10px;
  background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
  background-size: 800px 100%;
  animation: np-shimmer 1.4s infinite linear;
}

.np-skeleton-line.short {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6px;
}

.np-skeleton-bar {
  height: 6px;
  border-radius: 5px;
  margin-top: 12px;
  background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
  background-size: 800px 100%;
  animation: np-shimmer 1.4s infinite linear;
}
.now-playing {
  text-align: center;
}

.now-img,
.now-playing-img {
  width: 100%;
  border-radius: 10px;
  margin-top: 10px;
  transition: opacity 0.4s ease;
}

.now-title,
.now-playing-title {
  color: #ff69b4;
  font-weight: bold;
  margin-top: 10px;
}

.now-artist,
.now-playing-artist {
  color: #ccc;
  font-size: 0.9rem;
}

.np-progress-container {
  height: 6px;
  background: #333;
  border-radius: 5px;
  margin-top: 10px;
  overflow: hidden;
}

.np-progress-bar {
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, #ff69b4, #ff00ff);
  border-radius: 5px;
  transition: width 0.15s linear;
}

/* Desktop: np-row is block (vertical card layout) */
.np-row {
  display: block;
  text-decoration: none;
}
.np-art-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.np-info {
  /* On desktop, info flows naturally below art */
  text-align: center;
}

/* ── Mobile: compact horizontal bar matching native NowPlayingBar ── */
@media (max-width: 767px) {
  .right-box.now-playing {
    position: fixed !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 850 !important;
    padding: 6px 10px !important;
    border: none !important;
    border-top: 1px solid rgba(255,105,180,0.25) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #0a0a0a !important;
    box-shadow: 0 -2px 12px rgba(255,105,180,0.15) !important;
    text-align: left !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .right-box.now-playing .np-heading {
    display: none !important;
  }

  /* Row layout: art | info */
  .right-box.now-playing .np-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Art — 36x36 compact like native NowPlayingBar */
  .right-box.now-playing .np-art-wrap {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .right-box.now-playing .now-playing-img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    margin: 0 !important;
    object-fit: cover !important;
  }

  /* Info — title + artist stacked */
  .right-box.now-playing .np-info {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .right-box.now-playing .now-playing-title {
    margin: 0 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .right-box.now-playing .now-playing-artist {
    margin: 1px 0 0 0 !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Progress bar — thin line at very top */
  .right-box.now-playing .np-progress-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.08) !important;
  }

  .right-box.now-playing .np-progress-bar {
    height: 3px !important;
    border-radius: 0 !important;
  }

  /* Pause overlay — smaller */
  .right-box.now-playing .np-art-wrap svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Skeleton — compact */
  .np-skeleton {
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .np-skeleton h3 { display: none !important; }
  .np-skeleton-art {
    width: 48px !important; min-width: 48px !important; height: 48px !important;
  }
  .np-skeleton-line {
    margin-top: 0 !important; height: 12px !important; flex: 1 !important;
  }
  .np-skeleton-line.short {
    width: 40% !important; margin: 4px 0 0 0 !important;
  }
  .np-skeleton-bar { display: none !important; }
}