/* ====================================
   NTS Audio Player
======================================= */

.nts-audio-player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Standard height */
    background-color: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.4s var(--ease-out), height 0.3s ease, width 0.3s ease;
    box-shadow:
        0 -2px 10px rgba(0, 0, 0, 0.1),
        0 -1px 0 rgba(255, 255, 255, 0.4) inset;
    opacity: 1 !important;
    isolation: isolate;
}

/* Liquid-glass tint + highlight (sits above the distortion backdrop, so the
 * controls always have a readable surface to render against). */
.nts-audio-player::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.62) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0.6) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 22px -8px rgba(255, 255, 255, 0.75);
    pointer-events: none;
}

/* Distortion + backdrop blur layer. */
.nts-audio-player::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    filter: url(#nts-glass-distortion);
    -webkit-filter: url(#nts-glass-distortion);
    pointer-events: none;
}

.nts-audio-player.visible {
    transform: translateY(0);
}

.nts-audio-player.expanded {
    height: 400px;
}

.nts-audio-player-header {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 15px;
    position: relative;
    z-index: 2;
    background-color: transparent;
    box-shadow: none;
}

.nts-audio-player-thumbnail {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    margin-right: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
    background-color: var(--color-surface-alt);
}

@media (hover: hover) and (pointer: fine) {
    .nts-audio-player-thumbnail:hover {
        transform: translateY(-1px) scale(1.03);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    }
}

.nts-audio-player-thumbnail:active {
    transform: scale(0.97);
}

.nts-audio-player-info {
    flex: 0 0 auto; /* Don't grow or shrink */
    overflow: hidden;
    margin-right: 20px;
    min-width: 0; /* Ensures text truncation works properly */
    max-width: 20%; /* Limit width to make room for center controls */
    width: 20%; /* Fixed width to prevent shifting */
}

.nts-audio-player-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary);
}

a.nts-audio-player-title {
    display: block;
    text-decoration: none;
    color: var(--color-text-primary);
}

a.nts-audio-player-title[href]:hover,
a.nts-audio-player-title[href]:focus-visible {
    text-decoration: underline;
    cursor: pointer;
}

a.nts-audio-player-title:not([href]) {
    cursor: default;
}

.nts-audio-player-channel {
    font-size: 0.8rem;
    margin: 0;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nts-audio-player-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
    flex: 0 0 auto; /* Don't grow or shrink */
    /* Content-sized: the centre transport is absolutely positioned, so this
       cluster's width has no bearing on centring, and a fixed 20% only forced
       its contents to shrink. */
    width: auto;
}

.nts-audio-player-controls button {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 8px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 160ms var(--ease-out), background-color 0.2s ease, opacity 0.2s ease;
    border-radius: 50%;
    position: relative;
}

/* 32px icons in an 80px bar with 12px gaps flip the cursor between hand and
   arrow on every sweep across the cluster. Extend each button's hit region
   (same pattern as .episode-meta-action::after) so the controls form one
   continuous pointer surface; visuals are unchanged. The volume slider sits
   later in the DOM, so it wins the overlap at its own edge. */
.nts-audio-player-controls button::after,
.nts-audio-player-main-controls button::after {
    content: '';
    position: absolute;
    inset: -8px;
}

.nts-audio-player-controls button:hover:not(:disabled) {
    color: var(--color-text-primary);
    background-color: rgba(var(--color-text-primary-rgb), 0.08);
}

.nts-audio-player-controls button:active:not(:disabled) {
    transform: scale(0.88);
}

.nts-audio-player-controls button:disabled {
    cursor: default;
    opacity: 0.4;
}

.nts-audio-player-controls button i {
    font-size: 16px;
    display: inline-block;
}

/* Like button */
.nts-audio-player-like:hover:not(:disabled),
.nts-audio-player-playlist:hover:not(:disabled) {
    color: var(--color-text-primary) !important;
}

.nts-audio-player-like.liked {
    color: var(--color-text-primary) !important;
}

/* The heart swells for a beat when a track is liked. Keyed on .liked so it
   replays on every like, and stays still on unlike. */
@keyframes nts-player-heart-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.nts-audio-player-like.liked i {
    animation: nts-player-heart-pop 320ms var(--ease-out);
}

/* Track-info drawer toggle — mobile only. On desktop the drawer is reachable
 * from the docked sidebar and the keyboard shortcut, and the control cluster
 * has no width to spare beside the timestamp and volume slider. Prefixed with
 * .nts-audio-player-controls to beat that block's `button { display: flex }`. */
.nts-audio-player-controls .nts-audio-player-sidebar {
    display: none;
}

.nts-audio-player-center-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1; /* Take available space */
    padding: 0 15px;
    position: absolute; /* Position absolutely */
    left: 0;
    right: 0;
    margin: 0 auto; /* Center horizontally */
    width: 60%; /* Fixed width */
    max-width: 500px;
    pointer-events: none; /* Allow clicks to pass through to elements below */
}

.nts-audio-player-main-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2px;
    pointer-events: auto; /* Re-enable pointer events for buttons */
}

.nts-audio-player-prev, .nts-audio-player-next, .nts-audio-player-play-pause {
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 160ms var(--ease-out);
    position: relative;
}

/* Skip buttons are quiet satellites of the play disc: smaller, secondary
   colour, and only lit while hovered. */
.nts-audio-player-prev,
.nts-audio-player-next {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.nts-audio-player-prev i,
.nts-audio-player-next i {
    transition: transform 160ms var(--ease-out);
}

/* Play/pause is the one filled control in the bar, so the eye lands on it. */
.nts-audio-player-play-pause {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    background-color: var(--color-text-primary);
    color: var(--color-surface);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);
}

/* A play triangle reads left-heavy inside a circle; nudge it to the optical centre. */
.nts-audio-player-play-pause .fa-play {
    transform: translateX(1px);
}

@media (hover: hover) and (pointer: fine) {
    .nts-audio-player-prev:hover,
    .nts-audio-player-next:hover {
        color: var(--color-text-primary);
        background-color: rgba(var(--color-text-primary-rgb), 0.08);
    }

    /* The glyph leans the way it is about to skip. */
    .nts-audio-player-prev:hover i {
        transform: translateX(-1px);
    }

    .nts-audio-player-next:hover i {
        transform: translateX(1px);
    }

    .nts-audio-player-play-pause:hover {
        transform: scale(1.06);
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.14),
            0 6px 16px rgba(0, 0, 0, 0.16);
    }
}

.nts-audio-player-prev:active,
.nts-audio-player-next:active {
    transform: scale(0.88);
}

.nts-audio-player-play-pause:active {
    transform: scale(0.94);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.nts-audio-player-volume-container {
    position: relative;
    display: flex;
    align-items: center;
}

.nts-audio-player-volume-slider-container {
    width: 80px;
    display: flex;
    align-items: center;
}

.nts-audio-player-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    /* Longhands only: the `background` shorthand would reset background-clip
       and paint the pointer padding as a solid block. The gradient layer is
       the level fill; --volume is kept in step by nts-audio-player.js. */
    background-color: var(--color-border);
    background-image: linear-gradient(var(--color-text-primary), var(--color-text-primary));
    background-size: var(--volume, 100%) 100%;
    background-repeat: no-repeat;
    background-origin: content-box;
    outline: none;
    border-radius: 2px;
    cursor: pointer;
    /* A 4px strip is a near-impossible pointer target. Pad the hit zone out
       while clipping the painted track to the 4px content box; negative
       margins keep the layout footprint identical. */
    padding: 14px 6px;
    margin: -14px -6px;
    background-clip: content-box;
    box-sizing: content-box;
}

/* The thumb only surfaces while the slider is hovered, dragged or focused, so
   the resting track stays a clean line. Thumb rules are duplicated per engine
   rather than comma-joined: one unknown pseudo-element voids the whole list. */
.nts-audio-player-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--color-text-primary);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transform: scale(0);
    transition: transform 0.2s var(--ease-out);
}

.nts-audio-player-volume-slider::-moz-range-thumb {
    width: 8px;
    height: 8px;
    background: var(--color-text-primary);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transform: scale(0);
    transition: transform 0.2s var(--ease-out);
}

.nts-audio-player-volume-slider:hover::-webkit-slider-thumb,
.nts-audio-player-volume-slider:active::-webkit-slider-thumb,
.nts-audio-player-volume-slider:focus-visible::-webkit-slider-thumb {
    transform: scale(1);
}

.nts-audio-player-volume-slider:hover::-moz-range-thumb,
.nts-audio-player-volume-slider:active::-moz-range-thumb,
.nts-audio-player-volume-slider:focus-visible::-moz-range-thumb {
    transform: scale(1);
}

.nts-audio-player-progress-container {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: var(--color-border);
    cursor: pointer;
    overflow: visible;
    transition: height 0.2s ease, margin 0.2s ease, background-color 0.2s ease;
    border-radius: 2px;
    /* Generous scrub target around the visually 4px track (the painted bar
       is clipped to the content box; negative margins keep the flow height
       at the original margin-top 2px + 4px). Scrub math is x/width only. */
    padding: 8px 0;
    margin: -6px 0 -8px;
    background-clip: content-box;
    box-sizing: content-box;
    pointer-events: auto; /* Re-enable pointer events */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* The track swells under a fine pointer and while scrubbing. The margins
   move with the height so the flow footprint (and the track's centre line)
   stay put: 16px padding + 6px track - 16px margins = 6px, as at rest. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .nts-audio-player-progress-container:hover,
    .nts-audio-player.scrubbing .nts-audio-player-progress-container {
        height: 6px;
        margin: -7px 0 -9px;
    }
}

.nts-audio-player-progress-bar {
    height: 100%;
    background-color: var(--color-text-primary);
    width: 0;
    transition: width 0.1s linear;
    border-radius: 2px;
}

/* Handle and tooltip are always in the tree and revealed with opacity +
   scale, so they ease in rather than pop. The .scrubbing class (set by the
   player while a drag is live) keeps both up if the pointer leaves the track. */
.nts-audio-player-progress-handle {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background-color: var(--color-text-primary);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.2s var(--ease-out);
    z-index: 2; /* Ensure it's above other elements */
}

.nts-audio-player-progress-indicator {
    position: absolute;
    /* -25px from the old 4px box; the box top now sits 8px above the track */
    top: -19px;
    transform: translate(-50%, 4px);
    opacity: 0;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    border: 1px solid var(--color-border);
    transition: opacity 0.15s ease, transform 0.2s var(--ease-out);
}

@media (hover: hover) {
    .nts-audio-player-progress-container:hover .nts-audio-player-progress-handle {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .nts-audio-player-progress-container:hover .nts-audio-player-progress-indicator {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.nts-audio-player.scrubbing .nts-audio-player-progress-handle {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
}

.nts-audio-player.scrubbing .nts-audio-player-progress-indicator {
    opacity: 1;
    transform: translate(-50%, 0);
}

.nts-audio-player-time {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-right: 10px;
    min-width: 80px;
    text-align: center;
    /* The control cluster is narrower than its contents, and the timestamp is
       the only shrinkable item — without these it collapsed to min-width and
       wrapped onto a second line once the duration reached an hour.
       tabular-nums keeps the width steady as the digits tick. */
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.nts-audio-player-container {
    flex: 1;
    overflow: hidden;
    display: none;
    padding: 15px;
    background-color: var(--color-background);
    /* Lift above the liquid-glass tint (::before, z-index 0) — as a
     * non-positioned box the expanded embed painted underneath it and the
     * SoundCloud iframe rendered washed-out. */
    position: relative;
    z-index: 1;
}

.nts-audio-player.expanded .nts-audio-player-container {
    display: block;
}

.nts-audio-player-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

.nts-audio-player-close {
    padding: 8px !important;
}

.nts-audio-player-platform {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Loading state: a thin ring orbits the play disc while the stream resolves. */
@keyframes nts-player-spin {
    to { transform: rotate(360deg); }
}

.nts-audio-player.loading .nts-audio-player-play-pause {
    cursor: progress;
}

.nts-audio-player.loading .nts-audio-player-play-pause i {
    opacity: 0.35;
}

.nts-audio-player.loading .nts-audio-player-play-pause::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(var(--color-text-primary-rgb), 0.15);
    border-top-color: var(--color-text-primary);
    animation: nts-player-spin 0.9s linear infinite;
}

.nts-audio-player-loading {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--color-text-secondary);
}

.nts-audio-player.loading .nts-audio-player-loading {
    display: flex;
}

.nts-audio-player.loading .nts-audio-player-container {
    display: none;
}

/* Error state */
.nts-audio-player-error {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--color-text-secondary);
    text-align: center;
}

.nts-audio-player.error .nts-audio-player-error {
    display: flex;
}

.nts-audio-player.error .nts-audio-player-container {
    display: none;
}

/* Platform indicators */
.nts-audio-player-platform-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    margin-left: 8px;
}

.nts-audio-player-platform-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

.nts-audio-player-platform-indicator.mixcloud::before {
    background-color: #314359;
}

.nts-audio-player-platform-indicator.soundcloud::before {
    background-color: #ff8800;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .nts-audio-player {
        background-color: transparent;
        border-top-color: rgba(255, 255, 255, 0.1);
        box-shadow:
            0 -2px 10px rgba(0, 0, 0, 0.4),
            0 -1px 0 rgba(255, 255, 255, 0.06) inset;
    }

    .nts-audio-player::before {
        background:
            linear-gradient(135deg,
                rgba(20, 20, 24, 0.55) 0%,
                rgba(20, 20, 24, 0.45) 50%,
                rgba(20, 20, 24, 0.55) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            inset 0 0 22px -8px rgba(255, 255, 255, 0.35);
    }

    .nts-audio-player-header {
        background-color: transparent;
    }

    .nts-audio-player-container {
        background-color: transparent;
    }
    
    /* Improved control button visibility */
    .nts-audio-player-controls button {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .nts-audio-player-controls button:hover:not(:disabled) {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    /* Enhanced prev/next buttons (play/pause keeps its filled disc) */
    .nts-audio-player-prev, .nts-audio-player-next {
        color: rgba(255, 255, 255, 0.7);
    }

    .nts-audio-player-prev:hover, .nts-audio-player-next:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .nts-audio-player-play-pause {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.4),
            0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    /* Improved progress bar visibility */
    .nts-audio-player-progress-container {
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    .nts-audio-player-progress-container:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }
    
    .nts-audio-player-progress-bar {
        background-color: var(--color-text-primary);
    }
    
    /* Enhanced scrubber handle */
    .nts-audio-player-progress-handle {
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
    }
    
    /* Improved volume slider. Longhand only — the `background` shorthand
       resets background-clip to border-box and paints the 32px pointer
       padding as a solid block instead of the 4px track. */
    .nts-audio-player-volume-slider {
        background-color: rgba(255, 255, 255, 0.25);
    }
    
    .nts-audio-player-volume-slider::-webkit-slider-thumb {
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
    }
    
    /* Improved time display */
    .nts-audio-player-time {
        color: rgba(255, 255, 255, 0.7);
    }
    
    /* Improved progress indicator */
    .nts-audio-player-progress-indicator {
        background-color: var(--color-dark-surface);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }
}

/* ====================================
   Mobile Audio Player
   Compact floating card with liquid-glass blur. Grid layout:
     row 1: thumbnail | title/artist | close
     row 2: progress bar + split time (below bar)
     row 3: like | prev / play / next | info
======================================= */
@media (max-width: 767px) {
    /* Floating "liquid glass" card.
     * - The card itself is transparent; pseudo-layers do the look.
     * - ::after carries the backdrop blur + SVG displacement (turbulence)
     *   so the content behind the player refracts like wavy glass.
     * - ::before carries the inset highlight + a subtle tint so the surface
     *   still reads as a contained pane rather than a pure refraction patch.
     * - .nts-audio-player-header is given z-index so the controls sit above
     *   both pseudo-layers. */
    .nts-audio-player {
        /* Shared box for the two transport-row actions (like, add-to-playlist)
         * so the second can be offset past the first by a known width. */
        --player-action-size: 32px;
        left: var(--space-sm);
        right: var(--space-sm);
        width: auto;
        bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + var(--space-xs));
        height: auto;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background-color: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.08) inset,
            0 14px 36px rgba(0, 0, 0, 0.22),
            0 2px 6px rgba(0, 0, 0, 0.08),
            0 0 24px -10px rgba(255, 255, 255, 0.4);
        overflow: hidden;
        isolation: isolate;
    }

    /* Inner highlight + tint layer. Sits above the distortion layer so the
     * glass has a visible body and keeps text legible against busy artwork. */
    .nts-audio-player::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background:
            linear-gradient(135deg,
                rgba(255, 255, 255, 0.62) 0%,
                rgba(255, 255, 255, 0.5) 50%,
                rgba(255, 255, 255, 0.58) 100%);
        box-shadow:
            inset 0 0 18px -6px rgba(255, 255, 255, 0.85),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
        pointer-events: none;
    }

    /* Backdrop blur + organic displacement. Filter only affects what's behind
     * the pseudo-element (via backdrop-filter), giving the wavy refraction. */
    .nts-audio-player::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        -webkit-backdrop-filter: saturate(180%) blur(22px);
        backdrop-filter: saturate(180%) blur(22px);
        filter: url(#nts-glass-distortion);
        -webkit-filter: url(#nts-glass-distortion);
        pointer-events: none;
    }

    .nts-audio-player-header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "thumb meta  close"
            "prog  prog  prog"
            "time  time  time"
            "main  main  main";
        align-items: center;
        column-gap: 8px;
        row-gap: 4px;
        height: auto;
        padding: 10px 12px;
        background: transparent;
        box-shadow: none;
        position: relative;
        z-index: 1;
    }

    .nts-audio-player-thumbnail {
        grid-area: thumb;
        width: 38px;
        height: 38px;
        margin-right: 0;
        border-radius: 8px;
    }

    .nts-audio-player-info {
        grid-area: meta;
        flex: 1;
        max-width: none;
        width: auto;
        margin-right: 0;
        min-width: 0;
        align-self: center;
    }

    .nts-audio-player-title {
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .nts-audio-player-channel {
        font-size: 0.74rem;
        line-height: 1.25;
        margin-top: 1px;
    }

    /* Unwrap the center-controls and controls wrappers so their children
     * participate directly in the header grid. */
    .nts-audio-player-center-controls,
    .nts-audio-player-controls {
        display: contents;
    }

    .nts-audio-player-main-controls {
        grid-area: main;
        gap: 18px;
        margin-bottom: 0;
        margin-top: 0;
        justify-self: center;
        transform: translateY(-10%);
    }

    .nts-audio-player-prev,
    .nts-audio-player-next {
        width: 36px;
        height: 36px;
        font-size: 1.05rem;
        color: var(--color-text-primary);
        background: transparent;
    }

    .nts-audio-player-play-pause {
        width: 53px;
        height: 53px;
        font-size: 1.5rem;
        background-color: var(--color-text-primary);
        color: var(--color-surface);
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    }

    .nts-audio-player-play-pause i {
        font-size: 17px;
    }

    /* Tall touch zone with a visually thin track. background-clip: content-box
     * confines the visible bg to the 3px track, while padding extends the
     * tappable area vertically. */
    .nts-audio-player-progress-container {
        grid-area: prog;
        position: relative;
        width: auto;
        height: 3px;
        padding: 14px 0;
        /* Horizontal margin shrinks both the visible track and the touch
         * zone together, keeping the scrubber math (clientX vs rect.width)
         * consistent. */
        margin: 0 10px;
        border-radius: 2px;
        background-color: rgba(0, 0, 0, 0.18);
        background-clip: content-box;
        align-self: stretch;
        box-sizing: content-box;
    }

    .nts-audio-player-progress-bar {
        border-radius: 2px;
    }

    .nts-audio-player-progress-handle {
        opacity: 1;
        top: 50%;
        width: 14px;
        height: 14px;
        transform: translate(-50%, -50%);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    }

    .nts-audio-player-time {
        display: flex;
        grid-area: time;
        justify-content: space-between;
        align-items: center;
        align-self: start;
        /* Pull the timestamps up so they sit right under the visible 3px
         * track instead of below the 14px touch-padding gap. */
        margin: -10px 10px 0;
        min-width: 0;
        padding: 0;
        background: transparent;
        font-size: 0.68rem;
        font-variant-numeric: tabular-nums;
        color: var(--color-text-secondary);
        pointer-events: none;
    }

    .nts-audio-player-time-sep {
        display: none;
    }

    /* Hide controls that aren't part of the mobile layout.
     * Use .nts-audio-player-controls prefix so we beat
     * .nts-audio-player-controls button { display: flex }. */
    .nts-audio-player-controls .nts-audio-player-volume-container,
    .nts-audio-player-platform {
        display: none;
    }

    /* Inset the like button ~10% from the player edge so the bottom row breathes
     * around the larger play/pause control. The translateY matches the lift
     * applied to .nts-audio-player-main-controls so all bottom-row icons sit
     * on the same baseline. Placed by line rather than by area so it overlays
     * the full-width transport row — that keeps play/pause centred on the card
     * instead of on whatever is left over beside it. */
    .nts-audio-player-like {
        grid-row: 4;
        grid-column: 1;
        justify-self: start;
        margin-left: 14%;
        width: var(--player-action-size);
        height: var(--player-action-size);
        padding: 0 !important;
        font-size: 0.95rem;
        transform: translateY(-10%);
    }

    /* Track-info toggle, mirroring the like button on the other edge. Placed in
     * column 3 rather than spanning the row so its percentage inset resolves
     * against a flanking column, as the like button's does — measured against
     * the full row it would sit ~50px in and read as lopsided. */
    .nts-audio-player-controls .nts-audio-player-sidebar {
        display: inline-flex;
        grid-row: 4;
        grid-column: 3;
        justify-self: end;
        margin-right: 14%;
        padding: 10px;
        font-size: 0.95rem;
        transform: translateY(-10%);
    }

    /* Filing sits beside the heart. Tracklist rows drop their own
     * add-to-playlist control on mobile (tracklist.css), so this is the one
     * place a playing track can be filed. Placed in column 1 like the heart
     * and offset past it by a button width, so the two read as one cluster
     * while the transport stays centred on the card rather than on the space
     * left beside them. */
    .nts-audio-player-controls .nts-audio-player-playlist {
        display: inline-flex;
        grid-row: 4;
        grid-column: 1;
        justify-self: start;
        margin-left: 14%;
        width: var(--player-action-size);
        height: var(--player-action-size);
        padding: 0 !important;
        font-size: 0.95rem;
        /* Offset past the like button with a transform, not a margin: column 1
         * is sized to its contents, and a real margin here would widen it and
         * push the title and artwork across. */
        transform: translate(calc(var(--player-action-size) + 6px), -10%);
    }

    .nts-audio-player-close {
        grid-area: close;
        justify-self: end;
        margin-right: 10%;
        padding: 6px !important;
        font-size: 0.95rem;
    }

    /* Expanded: hide custom header controls, show native audio full-width */
    .nts-audio-player.expanded {
        height: auto;
    }

    .nts-audio-player.expanded .nts-audio-player-center-controls {
        display: none;
    }

    .nts-audio-player.expanded .nts-audio-player-container {
        flex: 0 0 auto;
        padding: var(--space-sm);
        background: transparent;
    }

    .nts-audio-player.expanded .nts-audio-player-container audio {
        width: 100%;
    }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
    .nts-audio-player {
        background-color: transparent;
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.04) inset,
            0 14px 36px rgba(0, 0, 0, 0.55),
            0 2px 8px rgba(0, 0, 0, 0.35),
            0 0 24px -10px rgba(255, 255, 255, 0.18);
    }

    .nts-audio-player::before {
        background:
            linear-gradient(135deg,
                rgba(20, 20, 24, 0.55) 0%,
                rgba(20, 20, 24, 0.45) 50%,
                rgba(20, 20, 24, 0.55) 100%);
        box-shadow:
            inset 0 0 18px -6px rgba(255, 255, 255, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .nts-audio-player-progress-container {
        background-color: rgba(255, 255, 255, 0.18);
    }

    .nts-audio-player-play-pause {
        background-color: var(--color-text-primary);
        color: var(--color-dark-surface);
    }
}

/* Pulse animation for auto-play hint */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}