/* ── Jukebox: coverflow of recently-played Spotify tracks ── */

.jukebox {
    position: fixed;
    bottom: 74px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(92vw, 420px);
    z-index: 300;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
    padding: 18px 16px 14px;
    /* spring "pop out of the bar" */
    transform-origin: bottom center;
    transform: translateY(24px) scale(0.82);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease;
}
.jukebox.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* ── Coverflow stage ── */
.jbx-stage {
    position: relative;
    height: 172px;
    perspective: 900px;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}
.jbx-stage:active { cursor: grabbing; }

.jbx-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 148px;
    height: 148px;
    border-radius: 8px;
    overflow: hidden;
    background: #f2f2f2;
    border: 3px solid #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    will-change: transform, opacity;
    /* transform is set per-frame in JS; transition gives the spring on settle */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
.jbx-cover.dragging { transition: none; }
.jbx-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* ── Film mode: the playing clip takes most of the width; neighbours peek ── */
.jukebox.mode-film { width: min(94vw, 560px); }
.jukebox.mode-film .jbx-stage { height: 254px; }
.jukebox.mode-film .jbx-cover { width: 420px; height: 236px; }

/* The film player lives here permanently, pinned over the centre cover. It is never
   re-parented or rebuilt, so it keeps the playback permission the first tap grants
   (that is what allows autoplay on later swipes, especially on mobile). */
.jbx-videoslot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 120;
    display: none;
    overflow: hidden;
    border-radius: 8px;
    border: 3px solid #fff;
    background: #000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: opacity 0.15s ease;
}
.jukebox.mode-film .jbx-videoslot { display: block; width: 420px; height: 236px; }
/* while dragging, reveal the thumbnails underneath so the swipe reads clearly */
.jbx-videoslot.dragging { opacity: 0; pointer-events: none; }
.jbx-videoslot iframe { width: 100%; height: 100%; border: 0; display: block; }

body.theme-retro .jbx-videoslot {
    border-radius: 0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* ── Marquee banner: "now playing: X by Y" scrolling left→right, seamless ── */
.jbx-banner {
    margin-top: 12px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.jbx-marquee {
    display: inline-flex;
    will-change: transform;
    animation: jbx-scroll 16s linear infinite;
}
.jbx-marquee span {
    font-size: 0.8em;
    letter-spacing: 0.5px;
    color: #333;
    padding-right: 2.5em; /* spacing between repeats */
}
.jbx-marquee .jbx-sep { color: #1DB954; }
/* -50% → 0 makes the text travel to the right; two identical copies loop seamlessly */
@keyframes jbx-scroll {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Top-right controls inside the popup: minimize (–) and stop (×), clearly separated */
.jbx-topbar {
    position: absolute;
    top: 8px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 10;
}
/* Matches .toolbar-btn exactly — same box, same 12px glyph, same hover */
.jbx-iconbtn {
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    color: #bbb;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.jbx-iconbtn svg { width: 12px; height: 12px; }
.jbx-iconbtn:hover { color: #333; background: #f5f5f5; }
.jbx-iconbtn:active { background: #eee; }

/* ── Toolbar transport: persists while music plays, even when minimized ── */
.jbx-transport {
    display: none;
    align-items: center;
    gap: 4px;
}
.jbx-transport.active { display: inline-flex; }
.jbx-transport .toolbar-btn { position: relative; }
.jbx-transport .jbx-t-stop { margin-left: 2px; }

/* ── 1995 / retro theme ── */
body.theme-retro .jbx-topbar .jbx-iconbtn {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    border-radius: 0;
    color: #000;
}
body.theme-retro .jukebox {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    border-radius: 0;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}
body.theme-retro .jbx-cover {
    border-radius: 0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
body.theme-retro .jbx-banner {
    margin-top: 12px;
    background: #000;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 4px 0;
}
body.theme-retro .jbx-marquee span { color: #33ff66; font-family: 'Courier New', monospace; }
body.theme-retro .jbx-marquee .jbx-sep { color: #33ff66; }

/* Transport sits in the toolbar; give it the same rhythm as the other sections */
.jbx-transport { gap: 6px; }

/* ── Mobile: petite player + compact bar, with room to spare ── */
@media (max-width: 600px) {
    .jukebox {
        bottom: 60px;
        width: min(86vw, 300px);
        padding: 12px 10px 10px;
        border-radius: 14px;
    }
    .jbx-stage { height: 124px; }
    .jbx-cover { width: 104px; height: 104px; border-width: 2px; }
    .jbx-banner { margin-top: 8px; }
    .jbx-marquee span { font-size: 0.7em; }
    .jbx-iconbtn { width: 24px; height: 24px; }   /* same as mobile .toolbar-btn */
    .jbx-iconbtn svg { width: 11px; height: 11px; }
    .jbx-topbar { top: 5px; right: 6px; }

    /* Film stays clip-dominant on mobile */
    .jukebox.mode-film { width: min(94vw, 360px); }
    .jukebox.mode-film .jbx-stage { height: 176px; }
    .jukebox.mode-film .jbx-cover { width: 276px; height: 155px; }
    .jukebox.mode-film .jbx-videoslot { width: 276px; height: 155px; border-width: 2px; }

    /* Compress the bar so prev/pause/next/stop fit without stretching it */
    .toolbar {
        padding: 5px 9px;
        bottom: 12px;
        max-width: calc(100vw - 20px);
        box-sizing: border-box;
    }
    .toolbar-sep { margin: 0 6px; }
    .toolbar-section { gap: 6px; }
    /* :not(.toolbar-lucky) — that one is a text button and must keep width:auto,
       otherwise its label overflows the pill (this file loads after main.css) */
    .toolbar-btn:not(.toolbar-lucky) { width: 24px; height: 24px; }
    .toolbar-btn svg { width: 11px; height: 11px; }
    .toolbar-lucky { width: auto; height: 24px; }
    .jbx-transport { gap: 3px; }
    /* While music is playing, the transport takes priority over the lucky label */
    body:has(.jbx-transport.active) .toolbar-lucky { display: none; }
}

/* Very narrow phones: trim the theme labels too */
@media (max-width: 380px) {
    .jukebox { width: 92vw; }
    .jbx-cover { width: 94px; height: 94px; }
    .jbx-stage { height: 112px; }
    body:has(.jbx-transport.active) .theme-label { display: none; }
}