/* 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;
}

/* GUI mode hides #terminal-stack but leaves #player and #layout-spacer in
   place as flex siblings (see gui-view.js) -- #layout-row's normal
   flex-row layout (height: calc(100vh - 3rem), the spacer's width-mirror
   trick) exists purely to keep the player beside the terminal without
   overlap in TERMINAL mode. With no terminal to avoid here, that reserved
   full-height row would just leave a near-empty band above the GUI panel
   instead, so this switches the row to a small fixed corner widget --
   still visible, still controllable, and pinned in place as the page
   scrolls -- rather than a layout leftover.
   Top-right, not bottom-right: #gui itself is centered with max-width:
   960px, so on any viewport wide enough to show a gutter beside it at
   all, that gutter runs the panel's full height -- top-right just puts
   the card at the very start of it instead of the end, with no other
   difference. Confirmed live: bottom-right needed extra CSS on #gui just
   to stop the card overlapping the track list's rightmost column, and
   that fix threw the whole panel visibly off-center. Top-right doesn't
   need that -- the panel's own header is a few lines tall, nowhere near
   the height a played-track card needs, so there's no equivalent
   collision to work around. */
#layout-row.gui-mode {
  position: fixed;
  /* #gui comes later in the DOM at the same z-index (see terminal.css /
     gui.css) -- source order alone would paint it on top of this fixed
     row, burying the player behind the GUI panel wherever they overlap
     on screen. This bump is what actually keeps the player visible above
     it. */
  z-index: 5;
  /* Clears #gui's own header row (logo + "back to terminal") entirely,
     rather than sitting flush in the very corner and fighting with it --
     confirmed live as a real collision at typical desktop widths
     otherwise. */
  inset: 5.5rem 1.5rem auto auto;
  height: auto;
  margin: 0;
  max-width: none;
  padding: 0;
}

#layout-row.gui-mode #layout-spacer,
#layout-row.gui-mode #terminal-stack {
  display: none;
}

#layout-row.gui-mode #player {
  /* Narrower than the terminal-mode card (260px) -- confirmed live that
     260px still overlapped the track list's rightmost column (the
     download links) on the top few rows; 190px clears it at #gui's
     960px max-width. */
  width: min(190px, calc(100vw - 3rem));
  margin-bottom: 0;
}

/* 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;
    /* Was 3.5rem -- trimmed since #brand-mark (the only thing this
       clears; it's position:fixed, not in this flow) is a small label
       nowhere near this tall, and every rem reclaimed here is a rem the
       terminal below can have instead. */
    margin-top: 2.25rem;
  }

  #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. Bumped from 75vh -- confirmed live
       as a real complaint: the terminal was noticeably shorter than the
       available screen, forcing a scroll to see recent output that
       should've just fit. Still short of 100vh on purpose: #player
       (visible below the terminal once a track is playing -- see
       .player-idle below) and #mode-toggle-btn both need their own room
       in this same column, and this height is shared with them, not the
       terminal alone. */
    height: min(86vh, 86dvh);
    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: 2rem;
  }

  /* Was 72vh -- smaller than the 780px query above it, which meant the
     terminal actually shrank again on the smallest phones instead of
     just staying proportionally the same. Matches the 780px value now. */
  #terminal-stack {
    height: min(86vh, 86dvh);
    min-height: 240px;
  }

  #player {
    padding: 0.9rem;
  }
}