/* Persistent bottom overlay for a music listen party - see MusicBar.ts's
   header comment for why this is a Shell-level component instead of a
   route (views/player/Player.css's .playerWrap is the video equivalent,
   and stays a full route takeover on purpose - a shared audio queue has
   no image to "theater mode" around, and the whole point here is staying
   able to browse/add tracks while it plays). Sits above .mainContent, at
   a lower z-index than .playerWrap (20) so a video party's takeover still
   correctly covers it - moot in practice since joining a video party
   calls leaveMusicParty() first (see Player.ts), but cheap to get right. */
.musicBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  background: var(--bg-header);
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .3);
}

/* A thin strip along the bar's own top edge, not inside .musicBarRow -
   the same "compact player" convention Spotify/YouTube Music use for
   their mini-players. Read-only (see MusicBar.ts's own comment) - no
   click/drag handling, just a visual position indicator. */
.musicBarProgressTrack {
  height: 3px;
  background: rgba(255, 255, 255, .12);
}

.musicBarProgressFill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .25s linear;
}

.musicBarRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  flex-wrap: wrap;
}

/* Smaller than the video player's presence row (Player.css/presence.css's
   36px default) - this bar is a thin strip, not an overlay on top of a
   large video frame. */
.musicBarPresence .avatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.musicBarImage {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--panel);
  flex-shrink: 0;
}

.musicBarImage.noImage { visibility: hidden; }

.musicBarInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}

.musicBarInfo strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.musicBarPosition { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* #castBtn while actively casting - same "clearly-on" treatment as
   views/player/Player.css's own .iconBtn[aria-pressed="true"] (ID-scoped
   here rather than a shared .iconBtn rule since #playPauseBtn's own
   "iconBtn" class in this bar has no matching style at all - see
   MusicBar.html - and never sets aria-pressed, so this couldn't touch it
   either way, but there's no shared iconBtn.css to hang a rule off yet). */
#castBtn[aria-pressed="true"] {
  color: #ff9800;
  background: rgba(255, 152, 0, .18);
}

/* Pops up ABOVE the bar (same pattern as Player.css's .settingsPanel above
   its gear button) - collapsed by default, see MusicBar.ts's toggleQueueBtn
   handler. Spans the full bar width (no max-width) rather than a fixed
   popup box - a party's queue can run long, and a narrow column wastes
   the width a desktop viewport already has going spare.
   display:flex/flex-direction:column here (rather than on .pageHeader/
   #queueList individually) is what lets #queueList be the only child
   that scrolls below - see #queueList's own comment. */
.musicBarQueue {
  max-height: 50vh;
  margin: 0 16px;
  padding: 14px 14px 0;
  background: var(--bg-header);
  border: 1px solid rgba(255, 255, 255, .08);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-direction: column;
}

.musicBarQueue .pageHeader { flex-shrink: 0; }

/* The only scrolling region inside .musicBarQueue - "File d'attente"
   above it stays put instead of scrolling away with the tracks. */
#queueList {
  overflow-y: auto;
}

@media (max-width: 720px) {
  .musicBarRow { justify-content: center; }
  .musicBarInfo { margin-right: 0; flex-basis: 100%; order: -1; text-align: center; }
  .musicBarQueue { margin: 0; border-radius: 0; }
}

/* One queue entry - a plain flex row (image, then a shrinking/truncating
   info column, then the duration), NOT views/album's shared .trackRow
   grid (styles/trackList.css) - that one's 4 fixed columns assume
   Album.ts's own index/name/duration/button shape, which crushed this
   list's track names into its 28px index column when reused here. See
   MusicBar.ts's own comment. */
.queueRow {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border-radius: 8px;
  padding: 8px 10px;
}

.queueRowArt {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-header);
  flex-shrink: 0;
}

.queueRowArt.noImage { visibility: hidden; }

.queueRowInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.queueRowName {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Artist/album/"Ajouté par X" condensed onto one secondary line (see
   MusicBar.ts) rather than each getting their own column - there's no
   room for 3+ columns once a name needs to read in full, unlike
   Album.ts's simpler index/name/duration/button row. */
.queueRowMeta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}