/* Mini player (assets/mini-player.js): the bar at the bottom that mirrors the <audio> playing. Loaded by the shells that opt in. */
.mini-player { position: fixed; left: 50%; bottom: 12px; z-index: 60; transform: translate(-50%, 140%); width: min(960px, calc(100% - 24px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(80px, 2fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: var(--card, #111); color: var(--card-foreground, #fff); border: 1px solid var(--border, rgba(255,255,255,.12)); box-shadow: 0 12px 40px rgba(0,0,0,.35); transition: transform .25s ease; }
.mini-player.is-open { transform: translate(-50%, 0); }
body.has-mini-player { padding-bottom: 84px; }
.mini-player .mp-cover { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--muted, rgba(255,255,255,.08)); flex: none; }
.mini-player .mp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-player .mp-cover.is-empty img { display: none; }
.mini-player .mp-meta { min-width: 0; }
.mini-player .mp-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-player .mp-sub { font-size: 11px; opacity: .6; }
.mini-player .mp-ctl { display: flex; align-items: center; gap: 2px; }
.mini-player .mp-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.mini-player .mp-btn svg { width: 18px; height: 18px; }
.mini-player .mp-btn:hover { background: rgba(127,127,127,.18); }
.mini-player .mp-play { width: 38px; height: 38px; background: var(--primary, #7c3aed); color: var(--primary-foreground, #fff); }
.mini-player .mp-play:hover { filter: brightness(1.1); background: var(--primary, #7c3aed); }
.mini-player:not(.has-many) .mp-prev, .mini-player:not(.has-many) .mp-next { opacity: .35; pointer-events: none; }
.mini-player .mp-seek { position: relative; height: 6px; border-radius: 999px; background: rgba(127,127,127,.3); cursor: pointer; outline: none; }
.mini-player .mp-seek:focus-visible { box-shadow: 0 0 0 2px var(--ring, #7c3aed); }
.mini-player .mp-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--primary, #7c3aed); }
.mini-player .mp-time { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .7; white-space: nowrap; }
@media (max-width: 640px) {
  .mini-player { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; }
  .mini-player .mp-cover { grid-area: 1 / 1; }
  .mini-player .mp-meta { grid-area: 1 / 2; }
  .mini-player .mp-ctl { grid-area: 1 / 3; }
  .mini-player .mp-close { grid-area: 1 / 4; }
  .mini-player .mp-seek { grid-area: 2 / 1 / 2 / -1; }
  .mini-player .mp-time { display: none; }
}