/* =============================================================================
   Radio footer — Spotify-inspired layout, TBONE colors/chrome
   AUTHORITATIVE owner of .radio-footer / popup-panel (do not re-style in pages/*).
   Loaded AFTER page CSS. Many !important rules remain as a safety net for SPA
   skin swaps and legacy specificity; peel only with visual QA per property.
   Heights/clearance: tokens.css (--footer-bar / --footer-clearance).
   Palette: black bar, accent-red edge, yellow title, dim artist, white icons
   ============================================================================= */

.radio-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    /* Bar row height from tokens; safe-area via padding */
    height: auto !important;
    min-height: var(--footer-bar) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 12px var(--footer-safe) !important;
    box-sizing: border-box !important;
    z-index: 100 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 1.2fr) minmax(0, 1fr) !important;
    grid-template-rows: var(--footer-bar) !important;
    align-items: center !important;
    gap: 8px !important;

    /*
     * Transparent shell — depth comes from layers:
     *   z0 visualizer → z1 .footer-bg scrim → z2 controls
     * So the bars glow under a dark glass, and title/play stay legible.
     */
    background-color: transparent !important;
    /* Red edge only on phones — desktop/tablet read cleaner without it */
    border-top: none !important;
    /* visible so the soft scrim can rise above the bar (x+y both visible; mixed values clamp) */
    overflow: visible !important;
    isolation: isolate !important; /* keep z-index layers inside the bar */
}

/*
 * Scrim between visualizer and chrome.
 * Fades to fully transparent at the top edge (soft into the page — no hard line),
 * solid enough through the mid/bottom so track meta + controls stay readable.
 * Extends slightly above the bar so the fade lives outside the text row.
 */
.radio-footer .footer-bg {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: -28px !important; /* soft rise above the bar */
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.28) 22%,
        rgba(0, 0, 0, 0.72) 48%,
        rgba(0, 0, 0, 0.88) 72%,
        rgba(0, 0, 0, 0.92) 100%
    ) !important;
}

.radio-footer::before {
    display: none !important; /* top border handled by border-top */
}

/* ----- Left: art + meta ----- */
.radio-footer .footer-left,
.radio-footer .left-section {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: start !important;
    z-index: 2 !important;
}

.radio-footer .album-art {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    border: 1px solid var(--accent-red, #a30000) !important;
    object-fit: cover !important;
    background: #111 !important;
    margin: 0 !important;
}

.radio-footer .track-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    cursor: pointer;
}

/* Visualizer sits beside track meta (Spotify "heart" slot) */
.radio-footer .footer-left > .visualizer-toggle {
    flex: 0 0 auto !important;
    margin-left: 2px !important;
}

.radio-footer .track-title {
    font-family: "OCR-A", monospace !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    color: var(--text-yellow, #ffff00) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

.radio-footer .track-artist {
    font-size: 0.78rem !important;
    color: var(--text-dim, #d3d3d3) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

/* ----- Center: play + progress ----- */
.radio-footer .footer-center,
.radio-footer .center-controls {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 420px !important;
    z-index: 2 !important;
    justify-self: center !important;
}

.radio-footer .transport,
.radio-footer .controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Original TBONE play control (icon-only, not Spotify circle) */
.radio-footer .control-btn,
.radio-footer .play-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    box-shadow: none !important;
}

.radio-footer .control-btn:hover:not(:disabled),
.radio-footer .control-btn:focus-visible:not(:disabled),
.radio-footer .play-btn:hover:not(:disabled),
.radio-footer .play-btn:focus-visible:not(:disabled) {
    transform: scale(1.1) !important;
    background: transparent !important;
    color: var(--accent-red, #a30000) !important;
    outline: none !important;
}

.radio-footer .control-btn:disabled,
.radio-footer .play-btn:disabled {
    opacity: 1 !important;
    cursor: wait !important;
    color: var(--accent-red, #a30000) !important;
}

.radio-footer .control-btn svg,
.radio-footer .play-btn svg {
    width: 42px !important;
    height: 42px !important;
    display: block !important;
}

.radio-footer .loading-indicator {
    animation: tbone-footer-spin 1s linear infinite !important;
}

/* Progress: elapsed | red bar | duration (AzuraCast now_playing.elapsed/duration) */
.radio-footer .progress-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

.radio-footer .progress-block[hidden] {
    display: none !important;
}

.radio-footer .time-elapsed,
.radio-footer .time-duration {
    font-family: "OCR-A", monospace !important;
    font-size: 0.68rem !important;
    font-weight: bold !important;
    color: var(--text-yellow, #ffff00) !important; /* match page yellow accents */
    min-width: 2.5em !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    user-select: none !important;
    text-shadow: 0 0 1px #000 !important;
}

.radio-footer .time-elapsed {
    text-align: right !important;
}

.radio-footer .time-duration {
    text-align: left !important;
}

.radio-footer .progress-track {
    position: relative !important;
    flex: 1 1 auto !important;
    height: 5px !important;
    background: #4d4d4d !important; /* unplayed / remaining */
    border-radius: 2px !important;
    overflow: hidden !important;
    min-width: 48px !important;
}

/*
 * Played portion — red fill grows left→right over grey track.
 * Width MUST NOT use !important: JS sets --progress-pct / inline width from AzuraCast.
 */
.radio-footer .progress-fill {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--progress-pct, 0%);
    max-width: 100%;
    background: var(--accent-red, #a30000) !important; /* played portion */
    border-radius: 2px !important;
    transition: width 0.35s linear;
    pointer-events: none;
}

.radio-footer .visualizer-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #b3b3b3 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    transition: color 0.12s ease, background-color 0.12s ease !important;
    position: static !important;
    flex: 0 0 auto !important;
}

.radio-footer .visualizer-toggle:hover,
.radio-footer .visualizer-toggle:focus-visible,
.radio-footer .visualizer-toggle[aria-pressed="true"] {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
    transform: none !important;
}

.radio-footer .visualizer-toggle[aria-pressed="true"] {
    color: var(--accent-red, #a30000) !important;
}

/* ----- Right: volume (always visible slider like Spotify) ----- */
.radio-footer .footer-right {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    min-width: 0 !important;
    z-index: 2 !important;
    padding-right: 4px !important;
}

.radio-footer .volume-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 140px !important;
}

.radio-footer .volume-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: none !important;
    background: transparent !important;
    color: #b3b3b3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: color 0.12s ease !important;
}

.radio-footer .volume-btn:hover,
.radio-footer .volume-btn:focus-visible {
    color: #ffffff !important;
    background: transparent !important;
    outline: none !important;
    transform: none !important;
}

.radio-footer .volume-slider {
    /* Always visible (not hover-expand).
       Filled (left) = accent red via --vol-pct gradient; remainder = grey. */
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 88px !important;
    max-width: 40vw !important;
    height: 5px !important;
    margin: 0 !important;
    opacity: 1 !important;
    cursor: pointer !important;
    accent-color: var(--accent-red, #a30000) !important;
    --vol-pct: 30%;
    background: linear-gradient(
        to right,
        var(--accent-red, #a30000) 0%,
        var(--accent-red, #a30000) var(--vol-pct),
        #4d4d4d var(--vol-pct),
        #4d4d4d 100%
    ) !important;
    border-radius: 2px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.radio-footer .volume-slider::-webkit-slider-runnable-track {
    height: 5px;
    background: transparent; /* gradient lives on the input itself */
    border-radius: 2px;
}

.radio-footer .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    margin-top: -3.5px;
    border: none;
    box-shadow: none;
}

.radio-footer .volume-slider::-moz-range-track {
    height: 5px;
    background: transparent;
    border-radius: 2px;
    border: none;
}

/* Firefox: paint progress with progress pseudo */
.radio-footer .volume-slider::-moz-range-progress {
    height: 5px;
    background: var(--accent-red, #a30000);
    border-radius: 2px;
}

.radio-footer .volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
}

.radio-footer .volume-wrapper:hover .volume-slider,
.radio-footer .volume-slider:focus,
.radio-footer .volume-btn:focus + .volume-slider {
    width: 88px !important;
    opacity: 1 !important;
}

/* ----- Visualizer: bottom layer (under .footer-bg scrim, under controls) -----
   Do NOT force position on control columns — that broke grid centering. */
.radio-footer .visualizer,
.visualizer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: none !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    opacity: 1 !important;
}

.visualizer.active,
.radio-footer .visualizer.active {
    display: block !important;
}

.visualizer canvas,
#canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    opacity: 0.95 !important;
}

/* Self-hosted visitor counter (file-backed, no third-party) */
.radio-footer .visitor-counter {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 1px !important;
    flex: 0 0 auto !important;
    margin: 0 10px 0 0 !important;
    padding: 2px 6px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: "OCR-A", monospace !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    user-select: none !important;
    z-index: 2 !important;
}

.radio-footer .visitor-counter-label {
    font-size: 0.55rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #b3b3b3 !important;
}

.radio-footer .visitor-counter-value {
    font-size: 0.78rem !important;
    font-weight: bold !important;
    color: var(--text-yellow, #ffff00) !important;
}

/*
 * Phablet / phone footer (≤640px):
 * Row 1: [art + title/artist] [play] [mute]
 * Row 2: full-width red progress + timestamps (when track length is known)
 * Hide visualizer, visitor count, and volume slider (device volume + mute).
 */
@media (max-width: 640px) {
    .radio-footer {
        padding: 6px 12px var(--footer-safe) !important;
        gap: 6px 10px !important;
        height: auto !important;
        min-height: var(--footer-bar) !important;
        max-height: none !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
    }

    .radio-footer .footer-left,
    .radio-footer .left-section {
        grid-column: 1 !important;
        grid-row: 1 !important;
        gap: 8px !important;
        max-width: 100% !important;
    }

    .radio-footer .album-art {
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 48px !important;
    }

    .radio-footer .track-title {
        font-size: 0.82rem !important;
    }

    .radio-footer .track-artist {
        font-size: 0.7rem !important;
    }

    .radio-footer .footer-center,
    .radio-footer .center-controls {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        gap: 0 !important;
        justify-self: center !important;
        /* progress is re-parented visually via grid placement below */
        display: contents !important;
    }

    .radio-footer .transport,
    .radio-footer .controls {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    /* Red progress + timestamps on their own full-width row */
    .radio-footer .progress-block {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        max-width: none !important;
        width: 100% !important;
        padding: 0 2px 2px !important;
        z-index: 2 !important;
    }

    .radio-footer .progress-block[hidden] {
        display: none !important;
    }

    .radio-footer .control-btn,
    .radio-footer .play-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .radio-footer .control-btn svg,
    .radio-footer .play-btn svg {
        width: 36px !important;
        height: 36px !important;
    }

    .radio-footer .footer-right {
        grid-column: 3 !important;
        grid-row: 1 !important;
        padding-right: 0 !important;
        gap: 0 !important;
    }

    .radio-footer .footer-left > .visualizer-toggle,
    .radio-footer .visualizer-toggle {
        display: none !important;
    }

    .radio-footer .visitor-counter {
        display: none !important;
    }

    .radio-footer .volume-wrapper {
        max-width: none !important;
        gap: 0 !important;
    }

    .radio-footer .volume-slider {
        display: none !important;
    }

    .radio-footer .volume-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* Scrim must cover two-row height */
    .radio-footer .footer-bg {
        top: -20px !important;
    }
}

/* ----- Now-playing popup ----- */
.popup-panel {
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    bottom: -400px !important;
    width: min(300px, calc(100vw - 24px)) !important;
    max-width: 300px !important;
    max-height: none !important;
    padding: 14px !important;
    background: rgba(0, 0, 0, 0.92) !important;
    border: none !important; /* art keeps its own red edge; card is borderless */
    box-shadow: none !important;
    z-index: 110 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: bottom 0.28s ease, opacity 0.28s ease !important;
    opacity: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none;
}

.popup-panel.visible {
    bottom: var(--footer-popup-bottom) !important;
    opacity: 1 !important;
    pointer-events: auto;
}

.popup-panel .close-btn {
    position: absolute !important;
    top: 4px !important;
    right: 6px !important;
    background: transparent !important;
    border: none !important;
    color: #ff0000 !important;
    cursor: pointer !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 1rem !important;
    padding: 0 !important;
}

.popup-panel .close-btn:hover,
.popup-panel .close-btn:focus-visible {
    color: var(--accent-red, #a30000) !important;
    outline: none !important;
}

.popup-panel .popup-art {
    width: 100% !important;
    max-width: 240px !important;
    height: auto !important;
    border: 1px solid var(--accent-red, #a30000) !important;
    margin: 8px auto 10px !important;
    display: block !important;
}

.popup-panel .popup-title {
    font-family: "OCR-A", monospace !important;
    font-size: 1.05rem !important;
    color: var(--text-yellow, #ffff00) !important;
    text-align: center !important;
    margin: 0 !important;
}

.popup-panel .popup-artist {
    font-size: 0.9rem !important;
    color: var(--text-dim, #d3d3d3) !important;
    text-align: center !important;
    margin: 4px 0 0 !important;
}

.loading-indicator {
    animation: tbone-footer-spin 1s linear infinite;
}

@keyframes tbone-footer-spin {
    to { transform: rotate(360deg); }
}

/* Fixed-footer clearance — ONE place only (page-wrapper).
   Heights/clearance come from tokens.css (--footer-bar / --footer-clearance). */
body.site.has-radio-footer {
    padding-bottom: 0 !important;
}

body.site.has-radio-footer .page-wrapper,
body.site .page-wrapper {
    padding-bottom: var(--footer-clearance) !important;
}

/* ----- Desktop widen ----- */
@media (min-width: 769px) {
    .radio-footer {
        height: auto !important;
        min-height: var(--footer-bar) !important;
        max-height: none !important;
        grid-template-rows: var(--footer-bar) !important;
        padding: 0 16px var(--footer-safe) !important;
        gap: 16px !important;
    }

    .radio-footer .album-art {
        flex: 0 0 64px !important;
        width: 64px !important;
        height: 64px !important;
    }

    .radio-footer .track-title {
        font-size: 0.95rem !important;
    }

    .radio-footer .track-artist {
        font-size: 0.82rem !important;
    }

    .radio-footer .control-btn,
    .radio-footer .play-btn {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }

    .radio-footer .control-btn svg,
    .radio-footer .play-btn svg {
        width: 42px !important;
        height: 42px !important;
    }

    .radio-footer .footer-center,
    .radio-footer .center-controls {
        max-width: 480px !important;
        gap: 6px !important;
    }

    .radio-footer .progress-block {
        max-width: 460px !important;
    }

    .radio-footer .volume-wrapper {
        max-width: 160px !important;
    }

    .radio-footer .volume-slider {
        width: 110px !important;
    }

    .radio-footer .volume-wrapper:hover .volume-slider,
    .radio-footer .volume-slider:focus,
    .radio-footer .volume-btn:focus + .volume-slider {
        width: 110px !important;
    }

    /* clearance / popup bottom: tokens.css --footer-bar (tablet) */
}

@media (min-width: 1025px) {
    .radio-footer {
        height: auto !important;
        min-height: var(--footer-bar) !important;
        max-height: none !important;
        grid-template-rows: var(--footer-bar) !important;
        padding: 0 20px var(--footer-safe) !important;
    }

    .radio-footer .album-art {
        flex: 0 0 68px !important;
        width: 68px !important;
        height: 68px !important;
    }

    .radio-footer .track-title {
        font-size: 1rem !important;
    }

    .radio-footer .track-artist {
        font-size: 0.88rem !important;
    }

    .radio-footer .control-btn,
    .radio-footer .play-btn {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }

    .radio-footer .control-btn svg,
    .radio-footer .play-btn svg {
        width: 42px !important;
        height: 42px !important;
    }

    .radio-footer .volume-slider {
        width: 120px !important;
    }

    .radio-footer .volume-wrapper:hover .volume-slider,
    .radio-footer .volume-slider:focus,
    .radio-footer .volume-btn:focus + .volume-slider {
        width: 120px !important;
    }

    /* clearance / popup bottom: tokens.css --footer-bar (desktop) */
}

/* Narrow phones: tighter padding + red top edge as a clear bar separator */
@media (max-width: 480px) {
    .radio-footer {
        padding: 0 10px var(--footer-safe) !important;
        gap: 8px !important;
        border-top: 1px solid var(--accent-red, #a30000) !important;
    }

    .radio-footer .album-art {
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .radio-footer .track-title {
        font-size: 0.78rem !important;
    }

    .radio-footer .track-artist {
        font-size: 0.65rem !important;
    }

    .popup-panel {
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-left: none !important;
        border-right: none !important;
    }
}

/* Art page used to hide footer on mobile — keep player available (below desktop) */
@media (max-width: 1024px) {
    .radio-footer {
        display: grid !important;
    }
}