/* =============================================================================
   tiny-player.css — Tiny Player Mode overlay.

   Layout: when body has `.tiny-player-mode`, hide every direct child of body
   except the overlay. The overlay fills the (square) window, with the inner
   `.queue-hero`'s cover promoted to fill the entire frame. Every other piece
   of the hero (title, controls, waveform, volume) lives in a translucent
   bottom-half pane that fades in on hover.

   Sizing rule of thumb: every position / size / font is in `vmin`, so the
   layout scales proportionally as the user drags the square between 350px
   (the locked minimum) and the larger sizes. The aspect ratio is locked at
   1:1 by main.js, so vw == vh == vmin in this view.

   Drag region: the cover area is a window-drag region (so the user can grab
   anywhere on the album art to move the window); every interactive child is
   marked `no-drag` so buttons / sliders remain clickable.

   The hero markup itself is rendered by the existing `_renderFullHero`
   pipeline in queue.js — that path iterates every `.queue-hero` and paints
   the same content into each one. We simply re-style our copy here.
   ============================================================================= */

#tiny-player-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    background: #000;
    color: #fff;
    /* Whole overlay is a window-drag region — children opt out below. */
    -webkit-app-region: drag;
}

/* ---- 3D flip card ---------------------------------------------------- */
/* The cover hero (front face) and the queue panel (back face) live on
   opposite sides of a single card. Toggling .tp-queue-open on the overlay
   rotates the card 180° on Y. backface-visibility: hidden hides whichever
   face is facing away from the viewer mid-rotation, and the perspective
   on the stage gives the rotation depth. */
#tiny-player-overlay .tp-flip-stage {
    position: absolute;
    inset: 0;
    perspective: 1200px;
}
#tiny-player-overlay .tp-flip-card {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#tiny-player-overlay.tp-queue-open .tp-flip-card {
    transform: rotateY(180deg);
}
#tiny-player-overlay .tp-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    /* `isolation: isolate` forces a flat compositing layer for the
       face, which fixes the subtle washed-out look caused by Chromium
       blending through preserve-3d ancestors. We don't paint a black
       background here because that would obscure the scrim that lives
       on .tp-hero (the scrim has to share the face's stacking
       context to render above the cover but below the controls). */
    isolation: isolate;
}
#tiny-player-overlay .tp-face-back {
    transform: rotateY(180deg);
}

/* Body class governs visibility. Without it the overlay is hidden via
   the `hidden` HTML attribute (set in markup) and the rest of the app
   shows normally. */
body.tiny-player-mode > *:not(#tiny-player-overlay):not(audio):not(script) {
    display: none !important;
}
body.tiny-player-mode #tiny-player-overlay { display: block; }
body.tiny-player-mode #tiny-player-overlay[hidden] { display: block; }
body:not(.tiny-player-mode) #tiny-player-overlay { display: none; }

/* ---- The hero, repurposed as a full-bleed square -------------------- */

#tiny-player-overlay .tp-hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    /* The inner layout is a flex/grid in the normal queue-hero stylesheet;
       reset to a plain block so absolute children fill the square. */
    display: block;
}

/* The cover element fills the entire window. The normal qh-cover styles
   in queue.css use background-image inline, which we keep — we just
   override the box geometry. The cover is deliberately NOT a drag region:
   it lives inside a preserve-3d/perspective layer pile where app-region
   hit-testing is unreliable, so the actual drag handle is the dedicated
   .tp-drag-surface layered just above it (see below). The cover spans
   z-index 2 or lower only, so the hover-chrome and the drag surface sit
   above it. */
#tiny-player-overlay .tp-hero .qh-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-width: none;
    max-height: none;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    /* The cover may show a `.qh-cover-placeholder` icon when no track
       is loaded — keep it centered. */
    -webkit-app-region: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
#tiny-player-overlay .tp-hero .qh-cover-placeholder {
    opacity: 0.5;
}
#tiny-player-overlay .tp-hero .qh-cover .qh-cover-badge {
    /* Hide the quality badge drawn on top of the hero cover — it clutters
       the tiny square. Reachable in normal mode. */
    display: none !important;
}
#tiny-player-overlay .tp-hero .qh-rating-row {
    /* Hide the like + star rating row in tiny mode — saves vertical
       space. The user can still favourite from the normal UI. */
    display: none !important;
}

/* Everything that's NOT the cover lives in a hover-revealed pane on
   the bottom half. Default-hidden via opacity so transitions feel
   smooth and the cover doesn't flicker. The 1s transition-delay on
   the unhovered state is the "linger after mouse leaves" behaviour
   the user asked for — controls don't snap away the moment the
   mouse exits the window. pointer-events follows the same delay so
   the buttons stay clickable during the linger. */
#tiny-player-overlay .tp-hero > *:not(.qh-cover):not(.tp-drag-surface) {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out 1s,
                pointer-events 0s linear 1.4s;
    -webkit-app-region: no-drag;
}

/* When hovered, fade the controls in. Snap-in is fast (180ms, no
   delay); the linger applies to fade-out only. */
#tiny-player-overlay:hover .tp-hero > *:not(.qh-cover):not(.tp-drag-surface) {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.18s ease-out 0s,
                pointer-events 0s linear 0s;
}

/* Dedicated window-drag surface. The cover can't own the drag region
   reliably: it lives inside the flip card's preserve-3d / perspective /
   isolation layer chain, and Chromium's app-region hit-test maps region
   rects through those layers imprecisely — so grabbing the art dragged
   the window only sometimes. This surface is a plain child of .tp-hero
   in the SAME layer as the (working) clickable controls, so its region
   maps as reliably as their hit-testing. It sits above the cover (z2)
   and below the scrim (z4) + controls (z5), so it never blocks the
   hover-chrome; wherever the pointer isn't over an interactive element,
   the whole square becomes a dependable drag handle. */
#tiny-player-overlay .tp-hero .tp-drag-surface {
    position: absolute;
    inset: 0;
    z-index: 2;
    -webkit-app-region: drag;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}

/* The bottom-half scrim — drawn as a pseudo-element on .tp-hero so it
   shares the cover's stacking context. Earlier the scrim lived on the
   overlay, but Chromium's preserve-3d rendering paints faces after
   sibling pseudo-elements regardless of z-index, leaving the scrim
   stuck behind the cover. As a child of .tp-hero it slots cleanly
   between the cover (z: implicit) and the controls (z: 5).

   Heavy opacity (>=80% from very early on) is deliberate: bright covers
   were drowning the controls when the scrim was a soft gradient. The
   top edge still fades over ~12% of the band so the cover-to-controls
   transition isn't a hard line. */
#tiny-player-overlay .tp-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0)    0%,
        rgba(0,0,0,0.80) 12%,
        rgba(0,0,0,0.92) 100%);
    opacity: 0;
    /* Same linger profile as the controls: 1s delay before fading
       on mouse-leave; snap-in on mouse-enter. */
    transition: opacity 0.4s ease-out 1s;
    pointer-events: none;
    z-index: 4;
}
#tiny-player-overlay:hover .tp-hero::after {
    opacity: 1;
    transition: opacity 0.18s ease-out 0s;
}
/* While the queue is open the scrim hides behind the queue panel and
   should not interfere with it visually. */
#tiny-player-overlay.tp-queue-open .tp-hero::after {
    opacity: 0 !important;
    transition: opacity 0.18s ease-out 0s;
}

/* ---- Layout the bottom-half panes ----------------------------------- */
/* The hero's children — info / progress / controls / aux-controls —
   stack from bottom up. Anchor each one with `bottom: <vmin>` so they
   scale with the window's edge length (locked square ⇒ vmin == vw == vh).
   Aim: at 350px (vmin = 3.5px) every row is readable; at 600px each
   row grows proportionally instead of looking tiny in a big window. */

/* Volume row at the very bottom of the bottom-half.
   `max-width: none` overrides queue.css's 520px cap — that cap is
   meant for the desktop hero where the row sits centred in a wide
   card, but here we want it to stretch with the square. Same idea
   on the rows below. `margin: 0` overrides queue.css's `margin-top:
   6px` which would shift the absolute-positioned row off its anchor. */
#tiny-player-overlay .tp-hero .qh-aux-controls {
    bottom: 2vmin;
    padding: 0 3vmin;
    display: flex;
    align-items: center;
    gap: 2vmin;
    width: auto;
    max-width: none;
    margin: 0;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-hero .qh-aux-controls .qh-eq,
#tiny-player-overlay .tp-hero .qh-aux-controls .qh-tiny {
    /* Already in tiny mode — don't show the toggle that brought us
       here, and don't duplicate the EQ button (still on the normal-mode
       player bar). */
    display: none;
}
#tiny-player-overlay .tp-hero .qh-aux-controls .qh-vol-icon {
    color: #fff;
    width: 4.6vmin;
    height: 4.6vmin;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#tiny-player-overlay .tp-hero .qh-aux-controls .qh-vol-icon svg {
    width: 100%;
    height: 100%;
}
#tiny-player-overlay .tp-hero .qh-aux-controls .qh-volume-slider {
    flex: 1 1 auto;
    height: 2.4vmin;
    min-height: 8px;
    min-width: 0;
    background: rgba(255,255,255,0.22);
    border: 0;
    border-radius: 1.2vmin;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-hero .qh-aux-controls .qh-volume-fill {
    height: 100%;
    background: var(--accent-primary, #ff6b35);
    border-radius: 0.8vmin;
}
#tiny-player-overlay .tp-hero .qh-aux-controls .qh-volume-percent {
    font-size: 4.6vmin;
    color: rgba(255,255,255,0.85);
    min-width: 11vmin;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Transport buttons row. queue.css pins each .qh-ctrl at width:44px /
   height:44px (and 60px for play/pause); we override with vmin so the
   buttons grow with the square. `width: auto / max-width: none` on the
   row drops queue.css's centring cap. */
#tiny-player-overlay .tp-hero .qh-controls {
    bottom: 9vmin;
    padding: 0 3vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vmin;
    width: auto;
    max-width: none;
    margin: 0;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-hero .qh-controls .qh-ctrl {
    background: rgba(255,255,255,0.10);
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 0;
    width: 8.5vmin;
    height: 8.5vmin;
    min-width: 30px;
    min-height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-hero .qh-controls .qh-ctrl:hover {
    background: rgba(255,255,255,0.22);
    transform: none;
}
#tiny-player-overlay .tp-hero .qh-controls .qh-ctrl svg {
    width: 4.6vmin;
    height: 4.6vmin;
    min-width: 16px;
    min-height: 16px;
}
#tiny-player-overlay .tp-hero .qh-controls .qh-play-pause,
#tiny-player-overlay .tp-hero .qh-controls .qh-ctrl.qh-play-pause {
    background: var(--accent-gradient, var(--accent-primary, #ff6b35));
    width: 12vmin;
    height: 12vmin;
    min-width: 42px;
    min-height: 42px;
    box-shadow: 0 1vmin 2.5vmin rgba(var(--accent-primary-rgb, 255, 107, 53), 0.35);
}
#tiny-player-overlay .tp-hero .qh-controls .qh-play-pause:hover {
    transform: scale(1.05);
}
#tiny-player-overlay .tp-hero .qh-controls .qh-play-pause svg {
    width: 6vmin;
    height: 6vmin;
    min-width: 22px;
    min-height: 22px;
}

/* Progress + waveform. queue.css's `max-width: 520px` here is the
   primary reason "the soundwave doesn't scale" at larger window sizes
   — it caps the row so the waveform never grows beyond ~520px. We
   release that cap so the track stretches with the square. */
#tiny-player-overlay .tp-hero .qh-progress {
    bottom: 24vmin;
    padding: 0 3vmin;
    display: flex;
    align-items: center;
    gap: 2vmin;
    font-size: 4.6vmin;
    color: rgba(255,255,255,0.9);
    width: auto;
    max-width: none;
    margin: 0;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-hero .qh-progress .qh-time-current,
#tiny-player-overlay .tp-hero .qh-progress .qh-time-total {
    min-width: 12vmin;
    font-variant-numeric: tabular-nums;
}
#tiny-player-overlay .tp-hero .qh-progress-track {
    flex: 1 1 auto;
    position: relative;
    height: 7vmin;
    min-height: 26px;
    background: rgba(255,255,255,0.05);
    border-radius: 0.8vmin;
    cursor: pointer;
    overflow: hidden;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-hero .qh-progress-track .qh-wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Title + artist. queue.css caps `.qh-info` at max-width 640px and uses
   flex-direction: column with gap:4px — we want full-width centred text
   in tiny mode, no width cap, no extra gap. */
#tiny-player-overlay .tp-hero .qh-info {
    bottom: 35vmin;
    padding: 0 4vmin;
    text-align: center;
    display: block;
    width: auto;
    max-width: none;
    gap: 0;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-hero .qh-title {
    font-size: 5.6vmin;
    font-weight: 700;
    color: #fff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
#tiny-player-overlay .tp-hero .qh-artist {
    font-size: 4.4vmin;
    color: rgba(255,255,255,0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
/* Suppress the secondary work / credits / album lines — too much text
   for a small square. The user can flip back to full mode for those. */
#tiny-player-overlay .tp-hero .qh-work,
#tiny-player-overlay .tp-hero .qh-credits,
#tiny-player-overlay .tp-hero .qh-album {
    display: none;
}

/* ---- Queue panel (back face of the flip card) ---------------------- */
/* The panel fills its face. Visibility is driven by the 3D flip on the
   parent .tp-flip-card — no opacity toggle needed. The panel is
   interactive; the queue-list rows opt out of the drag region too so
   clicks don't start a window drag. */

#tiny-player-overlay .tp-queue {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: rgba(10, 10, 16, 0.96);
    backdrop-filter: blur(8px);
    color: #fff;
    -webkit-app-region: no-drag;
}

/* Tab strip — full-width across the top of the queue panel. Action
   buttons live on the front overlay (outside the flip), so the back
   face's tabs occupy the entire width without reservation gaps. The
   strip itself is a drag region so the user can still move the
   window while the queue is open; tabs opt out below. */
#tiny-player-overlay .tp-queue-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 0.8vmin;
    padding: 2vmin 2vmin;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    -webkit-app-region: drag;
}
#tiny-player-overlay .tp-queue-tabs .rpq-tab {
    flex: 1 1 0;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    /* Doubled from the original 2.8vmin so tab text reads cleanly at
       a glance, even at the 350px minimum window size. */
    font-size: 5.2vmin;
    font-weight: 600;
    padding: 2vmin 0.8vmin;
    border-radius: 1.2vmin;
    cursor: pointer;
    -webkit-app-region: no-drag;
    transition: background 0.12s ease-out, color 0.12s ease-out;
}
#tiny-player-overlay .tp-queue-tabs .rpq-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
#tiny-player-overlay .tp-queue-tabs .rpq-tab.active {
    background: rgba(var(--accent-primary-rgb, 255, 107, 53), 0.22);
    color: #fff;
}

/* Scrollable list body. Each tp-list-* shares the same area; the
   hidden attribute (driven by syncQueueModeUI) keeps only one visible.
   Padding scales in vmin so list rows breathe at any size. */
#tiny-player-overlay .tp-queue-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1vmin 1vmin 1.5vmin;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-list { display: block; }
#tiny-player-overlay .tp-list[hidden] { display: none; }

/* Re-style the queue rows that get rendered into our lists. The
   renderers in queue.js (`_renderQueueSongsInto` / Albums / Works)
   emit `.queue-song-item` rows, `.queue-album-group` blocks, and
   `.queue-work-item` rows. Override the sidebar/Now-Playing fixed-px
   sizing with vmin so the rows scale with the square. */

/* Songs list rows. Sized so the smallest line (artist) is ~14px at the
   350px minimum window width — readable at a glance, scales with the
   square at larger sizes. */
#tiny-player-overlay .tp-list .queue-song-item {
    padding: 2vmin 2.4vmin;
    border-radius: 1.4vmin;
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 1vmin;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-list .queue-song-item:hover {
    background: rgba(255, 255, 255, 0.10);
}
#tiny-player-overlay .tp-list .queue-song-item.playing {
    background: rgba(var(--accent-primary-rgb, 255, 107, 53), 0.18);
    padding-left: 2.4vmin;
}
#tiny-player-overlay .tp-list .queue-song-item .qs-cover {
    width: 12vmin;
    height: 12vmin;
    min-width: 42px;
    min-height: 42px;
    margin-right: 2.2vmin;
    border-radius: 1.2vmin;
    flex: 0 0 auto;
    background-size: cover;
    background-position: center;
}
#tiny-player-overlay .tp-list .queue-song-item .qs-cover-placeholder {
    font-size: 4.4vmin;
}
#tiny-player-overlay .tp-list .queue-song-item .qs-info {
    flex: 1 1 auto;
    min-width: 0;
}
#tiny-player-overlay .tp-list .queue-song-item .qs-title {
    font-size: 4.6vmin;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0 0.5vmin 0;
    line-height: 1.2;
}
#tiny-player-overlay .tp-list .queue-song-item .qs-artist {
    font-size: 4vmin;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
#tiny-player-overlay .tp-list .queue-song-item .qs-remove {
    font-size: 5vmin;
    color: rgba(255, 255, 255, 0.55);
    padding: 0 1vmin;
}
#tiny-player-overlay .tp-list .queue-song-item .qs-duration {
    font-size: 4vmin;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 1.6vmin;
}
/* Quality badge inside a row. */
#tiny-player-overlay .tp-list .queue-song-item .quality-badge {
    font-size: 3vmin;
    padding: 0.6vmin 1.2vmin;
}

/* Albums list — collapsible groups with a header + nested track rows. */
#tiny-player-overlay .tp-list .queue-album-group {
    margin-bottom: 1.6vmin;
}
#tiny-player-overlay .tp-list .queue-album-header {
    display: flex;
    align-items: center;
    gap: 2vmin;
    padding: 2vmin 2.4vmin;
    border-radius: 1.4vmin;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-list .queue-album-header:hover {
    background: rgba(255, 255, 255, 0.10);
}
#tiny-player-overlay .tp-list .qah-cover {
    width: 12vmin;
    height: 12vmin;
    min-width: 42px;
    min-height: 42px;
    border-radius: 1.2vmin;
    flex: 0 0 auto;
    background-size: cover;
    background-position: center;
}
#tiny-player-overlay .tp-list .qah-info {
    flex: 1 1 auto;
    min-width: 0;
}
#tiny-player-overlay .tp-list .qah-title,
#tiny-player-overlay .tp-list .qah-title-text {
    font-size: 4.6vmin;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#tiny-player-overlay .tp-list .qah-artist,
#tiny-player-overlay .tp-list .qah-subhead {
    font-size: 4vmin;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#tiny-player-overlay .tp-list .queue-album-tracks {
    padding: 0.8vmin 0 0.6vmin 1.4vmin;
}
#tiny-player-overlay .tp-list .queue-album-work {
    font-size: 4vmin;
    color: rgba(255, 255, 255, 0.6);
    padding: 1.2vmin 2vmin 0.6vmin;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
#tiny-player-overlay .tp-list .queue-album-track {
    display: flex;
    align-items: center;
    gap: 1.4vmin;
    padding: 1.2vmin 1.8vmin;
    font-size: 4.4vmin;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 1vmin;
    cursor: pointer;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-list .queue-album-track:hover {
    background: rgba(255, 255, 255, 0.06);
}
/* Now-playing track inside the tiny-player Albums tab. Mirrors the
   full-view treatment (gradient background, left bar, accent text +
   ▶ replacing the track-number digit) but scaled in vmin so it reads
   at the overlay's own type sizes. */
#tiny-player-overlay .tp-list .queue-album-track.playing {
    background: linear-gradient(
        to right,
        rgba(var(--accent-primary-rgb, 255, 107, 53), 0.48) 0%,
        rgba(var(--accent-primary-rgb, 255, 107, 53), 0.24) 40%,
        rgba(var(--accent-primary-rgb, 255, 107, 53), 0.06) 100%);
    box-shadow: box-shadow: none;
}
#tiny-player-overlay .tp-list .queue-album-track.playing .qat-title,
#tiny-player-overlay .tp-list .queue-album-track.playing .qat-duration {
    color: var(--accent-primary);
    font-weight: 700;
}
/* Override the play-arrow size so it reads at vmin scale instead of
   the 13px the global queue.css rule sets — too small in the overlay. */
#tiny-player-overlay .tp-list .queue-album-track.playing .qat-num::before {
    font-size: 4vmin;
}

/* Now-playing album HEADER inside the tiny-player Albums tab. The
   `#tiny-player-overlay .tp-list .queue-album-header` rule above wins
   on specificity (an ID beats any number of classes) over the global
   `.queue-album-group.has-playing .queue-album-header` styling, so the
   accent tint silently disappears here unless we redeclare it under
   the same ID-scoped specificity. */
#tiny-player-overlay .tp-list .queue-album-group.has-playing .queue-album-header {
    background: linear-gradient(
        to right,
        rgba(var(--accent-primary-rgb, 255, 107, 53), 0.20) 0%,
        rgba(var(--accent-primary-rgb, 255, 107, 53), 0.08) 100%);
    /* Bar comes from .accent-bar-host::after (queue.css): a straight line at the
   shared --accent-bar-width. This was 0.6vmin, so the mini player's bar was
   a different thickness than the sidebar's on every screen size. */
    box-shadow: none;
}
#tiny-player-overlay .tp-list .queue-album-group.has-playing .qah-title,
#tiny-player-overlay .tp-list .queue-album-group.has-playing .qah-title-text {
    color: var(--accent-primary);
}

#tiny-player-overlay .tp-list .queue-album-track .qat-num {
    width: 6vmin;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
    font-size: 4vmin;
    flex: 0 0 auto;
    text-align: right;
}
#tiny-player-overlay .tp-list .queue-album-track .qat-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#tiny-player-overlay .tp-list .queue-album-track .qat-duration {
    color: rgba(255, 255, 255, 0.55);
    font-size: 4vmin;
    font-variant-numeric: tabular-nums;
}

/* Works list — the tree renders as `.queue-tg-group` rows (which also
   carry `.queue-album-group`) with `.queue-tg-header` headers (also
   `.queue-album-header`), so the Albums-tab rules above already cover
   the group card, header surface, cover, info and track rows. What we
   add here is the tier indentation, header/remove hit targets and the
   empty-bucket strip. Interactives are no-drag so the headers don't
   start a window-drag. */
#tiny-player-overlay .tp-list .queue-tg-group {
    margin-bottom: 1.6vmin;
}
#tiny-player-overlay .tp-list .queue-tg-tier-1 {
    margin-left: 2.4vmin;
}
#tiny-player-overlay .tp-list .queue-tg-tier-2 {
    margin-left: 4.8vmin;
}
#tiny-player-overlay .tp-list .queue-tg-header {
    cursor: pointer;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-list .queue-tg-header .qah-toggle {
    font-size: 4.2vmin;
    padding: 0 1vmin;
}
#tiny-player-overlay .tp-list .queue-tg-header .qah-remove {
    width: 5vmin;
    height: 5vmin;
    min-width: 22px;
    min-height: 22px;
    font-size: 4vmin;
    opacity: 0.85;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-list .queue-tg-header .qah-remove:hover {
    opacity: 1;
}
#tiny-player-overlay .tp-list .queue-tg-group .queue-album-track .qat-remove {
    font-size: 4.6vmin;
    padding: 0 1vmin;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay .tp-list .queue-tg-empty-bucket {
    padding: 2vmin 2.4vmin;
    margin: 0.8vmin 0 1.2vmin 2.4vmin;
    border-radius: 1.2vmin;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font-size: 4vmin;
    font-style: italic;
    -webkit-app-region: no-drag;
}

/* Empty-state message rendered by _renderQueueSongsInto when queue
   is empty. */
#tiny-player-overlay .tp-list .empty-queue {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    padding: 8vmin 4vmin;
    font-size: 4.6vmin;
}
#tiny-player-overlay .tp-list .empty-queue .eq-icon {
    opacity: 0.5;
    margin-bottom: 2.5vmin;
}
#tiny-player-overlay .tp-list .empty-queue .eq-icon svg {
    width: 12vmin;
    height: 12vmin;
}

/* Slim scrollbar so it doesn't dominate at small sizes. */
#tiny-player-overlay .tp-queue-body::-webkit-scrollbar {
    width: 6px;
}
#tiny-player-overlay .tp-queue-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}
#tiny-player-overlay .tp-queue-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* Reflect the open state on the hamburger button itself so the user
   sees it's active. Same accent treatment as the AOT button. */
#tiny-player-overlay.tp-queue-open #tp-queue-btn {
    background: var(--accent-primary, #ff6b35);
    color: #fff;
}

/* In queue (menu) mode the actions cluster stays on screen so the user
   is never trapped on the panel — the hamburger doubles as the back-to-
   cover affordance and the exit button is always one click away. It
   slides to the bottom-right corner so it doesn't sit on top of the
   third tab. The queue still auto-closes 1 s after mouse-leave. */
#tiny-player-overlay.tp-queue-open .tp-window-actions {
    top: auto;
    bottom: 2vmin;
    right: 2vmin;
}

/* ---- Window-action buttons (always on top, exit) -------------------- */

/* Action buttons cluster — sits OUTSIDE the flip card so it stays
   put when the card rotates. Same 1s linger-after-mouse-leave
   profile as the cover-mode controls. */
#tiny-player-overlay .tp-window-actions {
    position: absolute;
    top: 1.6vmin;
    right: 1.6vmin;
    z-index: 100;
    display: flex;
    gap: 1vmin;
    opacity: 0;
    transition: opacity 0.4s ease-out 1s,
                pointer-events 0s linear 1.4s;
    pointer-events: none;
    -webkit-app-region: no-drag;
}
#tiny-player-overlay:hover .tp-window-actions {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.18s ease-out 0s,
                pointer-events 0s linear 0s;
}
.tp-action-btn {
    background: rgba(0,0,0,0.45);
    border: 0;
    color: #fff;
    width: 7vmin;
    height: 7vmin;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    backdrop-filter: blur(6px);
    -webkit-app-region: no-drag;
}
.tp-action-btn svg {
    width: 4vmin;
    height: 4vmin;
    min-width: 14px;
    min-height: 14px;
}
.tp-action-btn:hover { background: rgba(0,0,0,0.7); }
.tp-action-btn[aria-pressed="true"] {
    background: var(--accent-primary, #ff6b35);
    color: #fff;
}
.tp-action-btn[aria-pressed="true"]:hover {
    background: var(--accent-primary, #ff6b35);
    filter: brightness(1.15);
}

/* Single-click selection highlight inside the tiny-player queue lists.
   The global `.selected` rules lose to the ID-scoped backgrounds above,
   so redeclare the tint under the same specificity tier (track rows get
   the brighter band, headers the fainter one — mirroring the full UI). */
#tiny-player-overlay .tp-list .queue-song-item.selected,
#tiny-player-overlay .tp-list .queue-album-track.selected {
    background: linear-gradient(
        to right,
        rgba(var(--accent-primary-rgb, 255, 107, 53), 0.30) 0%,
        rgba(var(--accent-primary-rgb, 255, 107, 53), 0.10) 100%);
}
#tiny-player-overlay .tp-list .queue-album-header.selected,
#tiny-player-overlay .tp-list .queue-tg-header.selected {
    background: linear-gradient(
        to right,
        rgba(var(--accent-primary-rgb, 255, 107, 53), 0.22) 0%,
        rgba(var(--accent-primary-rgb, 255, 107, 53), 0.06) 100%);
}