/* Persistent bottom player bar (js/player/global-player.js) — permanent
   chrome per the redesign brief, always visible (even in a disabled
   "Nothing playing" state), not conditionally shown only once a track is
   loaded. position:fixed, pinned to the viewport regardless of page
   scroll — see css/shell.css's file comment for the full fixed-chrome
   layout (<main> is offset by --shell-playerbar-height there so its
   content is never hidden behind this bar; not duplicated here). */

#app-player-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--tilt-surface);
  border-top: 2px solid var(--tilt-accent);
}

.player-transport {
  background: none;
  border: none;
  color: var(--tilt-text);
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem;
  text-transform: none;
  letter-spacing: normal;
}

.player-transport:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.player-transport:hover:not(:disabled) {
  filter: none;
  transform: none;
  color: var(--tilt-accent);
}

.player-meta {
  display: flex;
  flex-direction: column;
  min-width: 8rem;
  overflow: hidden;
}

.player-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-artist {
  font-size: 0.8rem;
  color: var(--tilt-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-progress {
  flex: 1;
  height: 0.35rem;
  accent-color: var(--tilt-accent);
}

.player-time {
  font-size: 0.75rem;
  color: var(--tilt-text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.player-theme-switcher {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--tilt-text-muted);
  flex-shrink: 0;
}

.player-theme-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid var(--tilt-border);
  padding: 0;
  cursor: pointer;
}

.player-legal {
  font-size: 0.7rem;
  color: var(--tilt-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Queue flyout (js/player/global-player.js) — #app-player-bar's own
   position:fixed is this panel's positioning context, so it anchors just
   above the bar without needing a wrapper. :not([hidden]) beats the UA
   [hidden] rule the same way every other toggled panel in this app does
   (see css/rooms.css's .deck-load-panel comment for the full reasoning). */
.player-queue-toggle {
  font-size: 0.75rem;
  white-space: nowrap;
}

.player-queue-panel:not([hidden]) {
  position: absolute;
  right: 1rem;
  bottom: 100%;
  margin-bottom: 0.5rem;
  width: 18rem;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--tilt-surface);
  border: 1px solid var(--tilt-border);
  border-radius: var(--tilt-radius);
  padding: 0.5rem;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

.player-queue-panel ul {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.player-queue-panel li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.player-queue-panel li.is-current .player-queue-item-label {
  color: var(--tilt-accent);
  font-weight: 700;
}

.player-queue-item-label {
  flex: 1;
  text-align: left;
  background: none;
  border: none;
  color: var(--tilt-text);
  padding: 0.3rem;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-queue-item-remove {
  background: none;
  border: none;
  color: var(--tilt-text-muted);
  padding: 0.2rem 0.4rem;
}

.player-queue-item-remove:hover {
  color: crimson;
}

@media (max-width: 60rem) {
  .player-theme-switcher,
  .player-legal {
    display: none;
  }
}