/*
 * APlayer tweaks — minimal, safe overrides.
 *
 * Constraints (learned the hard way):
 *   - APlayer's .aplayer-music has fixed height:20px + overflow:hidden.
 *     Title font-size MUST stay ≤ 14px (default) or text gets vertically clipped.
 *   - .aplayer-info is fixed 66px tall — don't tweak padding/margin globally.
 *   - Only color + border-radius are safe to override.
 *
 * Loaded via themes/butterfly/_config.yml inject.head.
 */

/* ---------- Container: rounded card, theme-following bg/shadow ---------- */
/* Both the root AND the body are position:fixed; bottom:0 by default. Lift BOTH
   by the same amount, otherwise the un-lifted one stays as a bg strip stuck to
   the viewport bottom edge. */
.aplayer.aplayer-fixed {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--card-bg) !important;
  color: var(--font-color);
  box-shadow: var(--card-box-shadow);
  transition: box-shadow 0.2s ease;
  bottom: 16px !important;
  left: 16px !important;
}

.aplayer.aplayer-fixed:hover {
  box-shadow: var(--card-hover-box-shadow);
}

.aplayer.aplayer-fixed .aplayer-body {
  background: var(--card-bg) !important;
  border-radius: 12px 0 0 12px;
  bottom: 16px !important;
  left: 16px !important;
}

/* Cover: round left corners only, right side meets the info panel */
.aplayer.aplayer-fixed .aplayer-pic {
  border-radius: 12px 0 0 12px !important;
}

/* ---------- Title + Author: bump font size, expand container to match ---------- */
/* APlayer default .aplayer-music is height:20px; widening to 24px to fit 15px text
   safely, and shrinking margin-bottom by the same 4px so .aplayer-info stays 66px. */
.aplayer.aplayer-fixed .aplayer-info .aplayer-music {
  height: 24px !important;
  margin-bottom: 9px !important;
}

.aplayer.aplayer-fixed .aplayer-info .aplayer-title {
  color: var(--font-color) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

.aplayer.aplayer-fixed .aplayer-info .aplayer-author {
  color: var(--font-color) !important;
  opacity: 0.65;
  font-size: 13px !important;
}

/* Kill APlayer's default light-blue top divider line */
.aplayer.aplayer-fixed .aplayer-info {
  border-top: none !important;
}

/* ---------- Time + controls follow theme ---------- */
.aplayer.aplayer-fixed .aplayer-info .aplayer-controller .aplayer-time {
  color: var(--font-color) !important;
  opacity: 0.7;
}

.aplayer.aplayer-fixed .aplayer-info .aplayer-controller .aplayer-icon path {
  fill: var(--font-color) !important;
  opacity: 0.78;
  transition: opacity 0.15s ease;
}

.aplayer.aplayer-fixed .aplayer-info .aplayer-controller .aplayer-icon:hover path {
  opacity: 1;
}

/* ---------- Native collapse arrow: round outer edge ---------- */
.aplayer.aplayer-fixed .aplayer-body .aplayer-miniswitcher {
  border-radius: 0 12px 12px 0 !important;
}

/* ---------- Playlist: kill all ugly borders + subtle hover/selected bg ---------- */
/* Default APlayer: list container has 1px #eee border (visible white in dark mode);
   each row has 1px #e9e9e9 border-top (I previously dyed it theme-blue, even uglier).
   Strip both. Selected/hover bg: subtle alpha overlay, theme-flipped. */
.aplayer.aplayer-fixed .aplayer-list {
  background: var(--card-bg) !important;
  border: none !important;
}

.aplayer.aplayer-fixed .aplayer-list ol li {
  color: var(--font-color) !important;
  border-top: none !important;
  transition: background 0.15s ease;
}

.aplayer.aplayer-fixed .aplayer-list ol li:hover,
.aplayer.aplayer-fixed .aplayer-list ol li.aplayer-list-light {
  background: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .aplayer.aplayer-fixed .aplayer-list ol li:hover,
[data-theme="dark"] .aplayer.aplayer-fixed .aplayer-list ol li.aplayer-list-light {
  background: rgba(255, 255, 255, 0.06) !important;
}

.aplayer.aplayer-fixed .aplayer-list ol li .aplayer-list-author {
  color: var(--font-color) !important;
  opacity: 0.6;
}

/* The 3px theme-color vertical bar APlayer draws on the currently-playing row */
.aplayer.aplayer-fixed .aplayer-list ol li .aplayer-list-cur {
  display: none !important;
}

/* ---------- Lyrics: bump font, show more lines, theme-aware color ----------
   Keep APlayer's default position (bottom:10px floating ticker with text-shadow).
   Container 30px → 88px lets ~4 lines show (current + 1-2 above/below dimmed).
   Color via Butterfly token so dark mode auto-adapts. */
.aplayer.aplayer-fixed .aplayer-lrc {
  height: 88px !important;
}

.aplayer.aplayer-fixed .aplayer-lrc p {
  font-size: 14px !important;
  line-height: 20px !important;
  height: 20px !important;
  color: var(--font-color) !important;
  opacity: 0.5;
}

.aplayer.aplayer-fixed .aplayer-lrc p.aplayer-lrc-current {
  font-size: 15px !important;
  font-weight: 600 !important;
  min-height: 20px !important;
  color: var(--font-color) !important;
  opacity: 1;
}

/* Default text-shadow is white-only (only works on light bg). In dark mode swap
   to a dark shadow so lines stay legible. */
[data-theme="dark"] .aplayer.aplayer-fixed .aplayer-lrc {
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000 !important;
}

/* ---------- Mobile (≤640px): scale everything down a notch ---------- */
@media (max-width: 640px) {
  /* Smaller viewport margins */
  .aplayer.aplayer-fixed,
  .aplayer.aplayer-fixed .aplayer-body {
    bottom: 10px !important;
    left: 10px !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* Title + author: ~1.5px smaller */
  .aplayer.aplayer-fixed .aplayer-info .aplayer-title {
    font-size: 13.5px !important;
  }
  .aplayer.aplayer-fixed .aplayer-info .aplayer-author {
    font-size: 11.5px !important;
  }

  /* Lyrics: smaller font, fewer visible lines (88px → 60px container) */
  .aplayer.aplayer-fixed .aplayer-lrc {
    height: 60px !important;
  }
  .aplayer.aplayer-fixed .aplayer-lrc p {
    font-size: 12.5px !important;
    line-height: 18px !important;
    height: 18px !important;
  }
  .aplayer.aplayer-fixed .aplayer-lrc p.aplayer-lrc-current {
    font-size: 13.5px !important;
    min-height: 18px !important;
  }
}