/* A flex item of #layout-row (see terminal.css), sitting beside the
   terminal as a fixed-width sidebar card -- not position:fixed, so it
   can never overlap the terminal; the shared flex row guarantees spacing
   at every viewport width. align-items:flex-end on the row keeps this
   anchored to the bottom, matching a corner-docked feel without any of
   the fixed-position collision math that caused the original overlap. */
#player {
  flex: 0 1 260px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem;
  /* #layout-row's flex-end alignment naturally lines this up with the
     BOTTOM OF #terminal-stack -- which includes #mode-toggle-btn below
     the terminal, not just the terminal panel itself. This margin pulls
     the card up by exactly that button's footprint (its height + the
     gap above it) so the player card's bottom edge lines up with the
     terminal panel's own bottom instead. Measured directly in-browser
     (37px at 1440px viewport); the button is fixed-content/single-line
     so this offset doesn't shift across breakpoints above the 780px
     mobile stack, where this rule doesn't apply anyway. */
  margin-bottom: 37px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  backdrop-filter: blur(3px) saturate(140%);
  -webkit-backdrop-filter: blur(3px) saturate(140%);
  box-shadow: 0 0 50px rgba(168, 85, 247, 0.12), 0 12px 30px rgba(0, 0, 0, 0.5);
  font-family: var(--font);
}

/* Space-reserving hidden state (not display:none) so nothing jumps when
   playback starts or stops. */
#player.player-idle {
  visibility: hidden;
}

/* The centerpiece: fills the card's full width, square. */
#player-art {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 30px rgba(129, 140, 248, 0.3);
}

.player-title {
  width: 100%;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--fg);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Applied only when the title actually overflows (see setPlayerTitle in
   audio-player.js) -- a fade at both edges instead of a hard clip, since
   the text is now sliding in and out through them rather than sitting
   still behind an ellipsis. */
.player-title.scrolling {
  text-align: left;
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}

.player-title .marquee-track {
  display: inline-flex;
  width: max-content;
  animation: marquee-scroll linear infinite;
  animation-duration: var(--marquee-duration, 10s);
}

.player-title .marquee-gap {
  display: inline-block;
  width: 2.5em;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-title .marquee-track {
    animation: none;
  }
}

.player-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.player-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.player-time {
  font-size: 0.68rem;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  margin-top: -0.3rem;
}

.player-controls {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
}

.player-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  line-height: 1;
  /* #player-spotify is an <a>, not a <button> -- base.css's `button`
     type-selector styling doesn't reach it, so this class carries its own
     complete look rather than depending on that base rule. */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-border);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.player-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.player-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 780px) {
  #layout-row {
    /* Fixed 100vh is the wrong tool on mobile: the address bar and, worse,
       the on-screen keyboard opening on #cmd-input focus both shrink the
       real visible area without shrinking `vh`, which used to either clip
       the player entirely or force the terminal to fight it for space.
       Letting the row grow with its content and scroll the *page* instead
       sidesteps all of that -- there's no fixed budget to run out of. */
    height: auto;
    flex-direction: column;
    align-items: center;
    margin-top: 3.5rem;
  }

  #layout-spacer {
    display: none;
  }

  #terminal-stack {
    /* A bounded (not 100%-of-parent) height so #scrollback still scrolls
       internally instead of the terminal growing to fit all output and
       pushing the player off-screen. Was 60vh, sized back when the idle
       player still reserved its full card height below the terminal --
       now that it's display:none while idle (see #player.player-idle
       above), that budget goes almost entirely to empty space instead, so
       this can claim more of the screen without actually crowding
       anything once a track does start playing. */
    height: min(75vh, 75dvh);
    min-height: 280px;
    width: 100%;
  }

  #player {
    width: 100%;
    max-width: 320px;
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  /* On desktop this stays visibility:hidden (space-reserving) so the
     terminal doesn't shift width when the player appears/disappears
     beside it. On mobile the player stacks BELOW the terminal instead --
     reserving its space there just leaves a large permanent empty gap
     under the terminal even when nothing's playing, which is what was
     actually happening. display:none costs a layout shift when a track
     starts, but that's far less noticeable (and less wasteful) than an
     always-present dead zone taking up most of the screen. */
  #player.player-idle {
    display: none;
  }
}

@media (max-width: 420px) {
  #layout-row {
    padding: 0 1rem;
    margin-top: 3.25rem;
  }

  #terminal-stack {
    height: min(72vh, 72dvh);
    min-height: 240px;
  }

  #player {
    padding: 0.9rem;
  }
}