/* copied from src/mini/mini.css by scripts/website-pages.mjs: don't edit here */
@font-face {
  font-family: 'Figtree Variable';
  src: url(/assets/fonts/figtree-latin-wght-normal.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
/* The mini player window: transparent, with the card filling it. */
html.mini-root,
html.mini-root body,
html.mini-root #root {
  background: transparent !important;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.mini-card {
  --mini-accent: var(--accent, #1ed760);
  position: absolute;
  inset: 12px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 24px;
  /* clip children (artwork, animations) to the rounded shape too, never to a square */
  clip-path: inset(0 round 24px);
  isolation: isolate;
  background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  font-family: 'Figtree Variable', -apple-system, 'Segoe UI', sans-serif;
  user-select: none;
  -webkit-app-region: drag;
}
/* The shadow lives on its own rounded layer behind the card (the card clips itself) and stays
   inside the 12 px window margin so the window edge never cuts it square. */
#root:has(.mini-card)::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 24px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.mini-card button {
  -webkit-app-region: no-drag;
}

.mini-text {
  flex: 1;
  min-width: 0;
  padding: 14px 6px 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  position: relative;
}

.mini-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: #9b9b9b;
  letter-spacing: 0.01em;
}
.mini-logo {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

/* equaliser bars */
.mini-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin-left: 2px;
}
.mini-bars i {
  width: 3px;
  height: 4px;
  border-radius: 1px;
  background: var(--mini-accent);
  transition: height 0.3s ease;
}
.mini-bars.on i {
  animation: mini-bar 0.9s ease-in-out infinite;
}
.mini-bars.on i:nth-child(2) {
  animation-delay: -0.45s;
  animation-duration: 0.8s;
}
.mini-bars.on i:nth-child(3) {
  animation-delay: -0.2s;
  animation-duration: 1.05s;
}
.mini-bars.on i:nth-child(4) {
  animation-delay: -0.6s;
  animation-duration: 0.7s;
}
@keyframes mini-bar {
  0%,
  100% {
    height: 4px;
  }
  50% {
    height: 12px;
  }
}

/* title and artist; swapped for controls on hover */
.mini-info,
.mini-controls {
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.mini-info {
  min-width: 0;
}
.mini-title {
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.mini-artist {
  font-size: 12.5px;
  color: #b3b3b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.mini-controls {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}
.mini-card:hover .mini-info {
  opacity: 0;
  transform: translateY(-4px);
}
.mini-card:hover .mini-controls {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mini-controls button,
.mini-corner button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #d6d6d6;
  cursor: pointer;
}
.mini-controls button:hover:not(:disabled),
.mini-corner button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.mini-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}
.mini-controls .mini-play {
  width: 34px;
  height: 34px;
  background: #fff;
  color: #000;
}
.mini-controls .mini-play:hover:not(:disabled) {
  background: #fff;
  color: #000;
  transform: scale(1.05);
}

/* the cover as a spinning record, cut off by the card's right edge */
.mini-disc-wrap {
  position: relative;
  width: 84px;
  flex: none;
}
.mini-disc {
  position: absolute;
  top: 50%;
  left: 0;
  width: 112px;
  height: 112px;
  margin-top: -56px;
  border-radius: 50%;
  overflow: hidden;
  background: #222;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    -6px 0 16px rgba(0, 0, 0, 0.5);
  animation: mini-spin 6s linear infinite;
  animation-play-state: paused;
}
.mini-card.playing .mini-disc {
  animation-play-state: running;
}
.mini-disc img,
.mini-disc-empty {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mini-disc-empty {
  background: radial-gradient(circle, #333 0%, #1b1b1b 70%);
}
.mini-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle, #5b5b5b 0 3px, #2a2a2a 3.5px 100%);
  box-shadow:
    0 0 0 2px rgba(220, 220, 220, 0.85),
    inset 0 0 2px rgba(0, 0, 0, 0.6);
}
@keyframes mini-spin {
  to {
    transform: rotate(360deg);
  }
}

/* expand and close, top right over the record */
.mini-corner {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mini-card:hover .mini-corner {
  opacity: 1;
}
.mini-corner button {
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.55);
  color: #eee;
}
.mini-corner button:hover {
  background: rgba(0, 0, 0, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .mini-disc,
  .mini-bars.on i {
    animation: none;
  }
}