/* Player-bar additions -- extends assets/library.css (same "Monitor" token
   set). Shared by player.php and library.php (library.php's play buttons
   stream from player.php's endpoint but render their own bar/queue).

   IMPORTANT: player.php's own markup is off-limits (its bar is a bare
   `.player-bar > .now-playing + audio[controls]`, no `.transport` wrapper).
   Rules here must keep sizing that direct-child <audio> correctly -- a
   previous pass removed `.player-bar audio { flex:1; ... }` while building
   library.php's custom transport and left player.php's native controls
   under-sized, which is exactly the kind of thing Chrome/Safari respond to
   by silently dropping the volume slider (and, at extreme widths, the whole
   widget) -- see `.player-bar > audio` below. */

.empty-note {
  font-size: 13px; color: var(--text-dim); font-style: italic;
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-top: 18px;
}
.empty-note code { font-family: ui-monospace, monospace; font-size: 12px; }

.pl-drawer {
  border: 1px solid var(--line); border-radius: 8px; margin-top: 10px; background: var(--surface); overflow: hidden;
}
.pl-drawer summary {
  cursor: pointer; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 14px; list-style: none;
}
.pl-drawer summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
  .pl-drawer summary:hover { background: var(--surface-2); }
}
.pl-drawer table.rows { margin: 0; padding: 0 14px 10px; }
.pl-drawer tr.dim { opacity: 0.5; }

.play-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--accent-2); background: none;
  color: var(--accent-2); cursor: pointer; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
/* (hover: hover) -- touch taps otherwise simulate :hover with no matching
   "leave" event, so row/transport buttons stayed visually stuck in the
   hover color after every tap on iOS ("зависшие кнопки"). Scoped to real
   pointing devices only; tap feedback itself is unaffected. */
@media (hover: hover) {
  .play-btn:hover { background: var(--accent-2); color: var(--accent-ink); }
}
.play-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* Idle = the design's blue accent (matches the row's other links). Currently
   playing = a dedicated yellow (--now-playing, not the brand --accent -- this
   is a status signal, not a brand color) with the glyph itself switched to a
   stop square in JS, so it reads at a glance even without color. */
.play-btn.playing { background: var(--now-playing); border-color: var(--now-playing); color: var(--now-playing-ink); }

/* Same footprint as .play-btn (so the column doesn't jiggle) but dashed and
   dim -- explicitly "not playable here", not just a decorative placeholder. */
.no-file {
  width: 26px; height: 26px; border-radius: 50%; border: 1px dashed var(--line);
  color: var(--text-dim); font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
}

/* player.php's native <audio controls>: direct child of .player-bar, not
   wrapped in .transport. Keep it generously sized or the browser starts
   hiding sub-controls (volume first). Harmless no-op on library.php's own
   audio element, which is a direct child too but always display:none. */
.player-bar > audio {
  flex: 1; min-width: 240px; max-width: 640px; height: 36px; accent-color: var(--accent);
}

.player-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: 20px; flex-wrap: nowrap;
  background: var(--surface); border-top: 1px solid var(--line);
  /* env() is 0 in a normal browser tab; in the standalone PWA (Ф7) it keeps
     the bar clear of the iOS home-indicator area. */
  padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(6px);
}
/* Fixed width (not min/max) so the bar doesn't reflow every time the title
   length changes between tracks. */
.player-bar .now-playing { flex: 0 0 200px; width: 200px; overflow: hidden; }
.player-bar .now-playing .t { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-bar .now-playing .s { font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.player-bar .transport { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.transport-controls { display: flex; align-items: center; gap: 6px; flex: none; }
.transport-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: none;
  color: var(--text); cursor: pointer; font-size: 13px; line-height: 1; flex: none;
  display: flex; align-items: center; justify-content: center;
}
@media (hover: hover) {
  .transport-btn:hover:not(:disabled) { border-color: var(--accent-2); color: var(--accent-2); }
  .transport-btn.transport-btn-play:hover:not(:disabled) { background: var(--accent-2); color: var(--accent-ink); }
}
.transport-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.transport-btn:disabled { opacity: 0.3; cursor: default; }
.transport-btn.transport-btn-play { border-color: var(--accent-2); color: var(--accent-2); }
/* Persistent "on" state for toggle buttons (shuffle) -- same filled-pill
   language as .transport-btn-play's hover, just not hover-gated. */
.transport-btn.active { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); }
.transport-btn svg { display: block; flex: none; }

/* Stateful icons (play/pause, volume level): sibling SVGs in the button,
   toggled here instead of swapping textContent -- keeps them our vector art
   everywhere (iOS renders the ⏮⏭▶🔊 glyphs as colored system emoji). */
#play-btn .i-pause, #play-btn.playing .i-play { display: none; }
#play-btn.playing .i-pause { display: block; }
#vol-icon .i-vol-low, #vol-icon .i-vol-mute { display: none; }
#vol-icon[data-vol="low"] .i-vol-high, #vol-icon[data-vol="mute"] .i-vol-high { display: none; }
#vol-icon[data-vol="low"] .i-vol-low, #vol-icon[data-vol="mute"] .i-vol-mute { display: block; }

.seek { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 60px; }
.seek .time { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--text-dim); flex: none; width: 32px; font-variant-numeric: tabular-nums; }
.seek .time.duration { text-align: right; }

/* Volume's mute button is a plain .transport-btn (see markup) so it matches
   prev/next/play/shuffle exactly -- no icon-specific overrides here. */
.volume { display: flex; align-items: center; gap: 6px; flex: 0 0 120px; }

/* Fill (played / buffered / volume level) is painted by JS as a background
   gradient on the element itself -- `appearance: none` (needed to get a
   consistent cross-browser track/thumb we can style) throws out the native
   fill-to-value rendering browsers give <audio controls> for free, so it has
   to be rebuilt by hand. ::-moz-range-track stays transparent so Firefox
   shows that same gradient through it instead of painting over it. */
.seek input[type="range"], .volume input[type="range"] {
  flex: 1; min-width: 0; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; background: var(--surface-2); cursor: pointer;
}
.seek input[type="range"]::-webkit-slider-thumb, .volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent-2);
  box-shadow: 0 0 0 2px var(--surface); cursor: pointer;
}
.seek input[type="range"]::-moz-range-thumb, .volume input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent-2);
  border: none; box-shadow: 0 0 0 2px var(--surface); cursor: pointer;
}
.seek input[type="range"]::-moz-range-track, .volume input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px; background: transparent;
}

/* Fixed width, sized for the longest realistic spec ("24-bit / 176.4kHz")
   plus the Hi-Res pill -- the pill stays in the layout (visibility, not
   display) even when hidden so this box never changes width between tracks. */
.now-quality { display: flex; align-items: center; gap: 8px; flex: 0 0 180px; width: 180px; justify-content: flex-end; }
.now-quality .q-spec { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-dim); white-space: nowrap; letter-spacing: 0.01em; }

@media (max-width: 760px) {
  .player-bar { gap: 12px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); }
  /* Flexible (not the desktop fixed width): on narrow phones the fixed boxes
     used to add up past the viewport, crushing the seek bar to just its
     thumb and overflowing the bar itself. Title/artist ellipsize instead. */
  .player-bar .now-playing { flex: 1 1 90px; width: auto; min-width: 0; }
  .now-quality { display: none; }
}

@media (max-width: 560px) {
  .volume { display: none; }
  .seek .time { display: none; }
}

/* Ф9: queue-source line ("From: <playlist>") under the artist in the bar.
   Additive only -- this file is shared with deprecated/player.php's markup,
   which has no .src element (see the header comment). */
.player-bar .now-playing .src { font-size: 10px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-bar .now-playing .src a { color: var(--text-dim); border-bottom: 1px dotted var(--line); }
@media (hover: hover) {
  .player-bar .now-playing .src a:hover { color: var(--text); }
}

/* Trigger for the fullscreen Now Playing overlay (Ф10): the whole title/
   artist block, not just an icon -- bigger, more forgiving tap target. */
.now-playing { cursor: pointer; }

/* Ф10: fullscreen "Now Playing" overlay -- opened from the compact bar,
   solid full-viewport panel (not a floating card: this IS the page while
   open), same icon language as the compact bar's own transport, just
   bigger since it's the primary surface here instead of a footer strip. */
.np-overlay {
  position: fixed; inset: 0; z-index: 55; background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.np-overlay[hidden] { display: none; }

.np-topbar { width: 100%; max-width: 420px; display: flex; align-items: center; gap: 10px; flex: none; }
.np-close {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: none;
  color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none;
}
@media (hover: hover) {
  .np-close:hover { border-color: var(--accent-2); color: var(--accent-2); }
}
.np-source {
  flex: 1; text-align: center; font-size: 12px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.np-source a { color: var(--text-dim); border-bottom: 1px dotted var(--line); }
@media (hover: hover) {
  .np-source a:hover { color: var(--text); }
}
.np-topbar-spacer { width: 36px; flex: none; } /* balances .np-close so .np-source stays centered */

.np-art {
  width: min(72vw, 320px); height: min(72vw, 320px); margin-top: 28px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.np-art img { width: 100%; height: 100%; object-fit: cover; }
.np-art-fallback { font-size: 64px; color: var(--text-dim); line-height: 1; }

.np-meta { width: 100%; max-width: 420px; margin-top: 24px; text-align: center; }
.np-title { font-size: 20px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-artist { font-size: 14px; color: var(--text-dim); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.np-seek { width: 100%; max-width: 420px; margin-top: 18px; }
.np-seek input[type="range"] { width: 100%; }
.np-time-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); font-family: ui-monospace, monospace; margin-top: 2px; }

.np-quality { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-dim); font-family: ui-monospace, monospace; }

.np-transport { margin-top: 22px; display: flex; align-items: center; gap: 20px; flex: none; }
.np-btn {
  border: 1px solid var(--line); background: none; color: var(--text); cursor: pointer;
  border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.np-btn:disabled { opacity: 0.3; cursor: default; }
.np-btn.active { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); }
@media (hover: hover) {
  .np-btn:hover:not(:disabled) { border-color: var(--accent-2); color: var(--accent-2); }
}
.np-btn-play {
  width: 64px; height: 64px; border: none; background: var(--accent); color: var(--accent-ink);
}
@media (hover: hover) {
  .np-btn-play:hover:not(:disabled) { background: var(--accent-2); }
}
.np-btn-play .i-pause, .np-btn-play.playing .i-play { display: none; }
.np-btn-play.playing .i-pause { display: block; }

.np-queue-wrap { width: 100%; max-width: 420px; margin-top: 32px; flex: 1 1 auto; }
.np-queue-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); text-transform: uppercase; }
.np-queue { list-style: none; margin: 10px 0 0; padding: 0; }
.np-queue li {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line);
  font-size: 13px; cursor: pointer;
}
.np-queue li .np-q-idx { width: 20px; flex: none; color: var(--text-dim); font-family: ui-monospace, monospace; font-size: 11px; text-align: right; }
.np-queue li .np-q-meta { flex: 1; min-width: 0; overflow: hidden; }
.np-queue li .np-q-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-queue li .np-q-artist { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-queue li.playing { color: var(--now-playing); }
.np-queue li.playing .np-q-idx { color: var(--now-playing); }
@media (hover: hover) {
  .np-queue li:hover { background: var(--surface); }
}