/* ====================================
   YouTube Player
======================================= */

.youtube-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.3s ease, height 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, mirrors .nts-audio-player. */
.youtube-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;
}

.youtube-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;
}

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

.youtube-player.expanded {
    height: 400px;
}

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

.youtube-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;
}

.youtube-player-thumbnail:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.youtube-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 */
}

.youtube-player-info.clickable {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.youtube-player-info.clickable:hover {
    opacity: 0.8;
}

.youtube-player-info.clickable:hover .youtube-player-title {
    text-decoration: underline;
}

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

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

.youtube-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 */
    width: 20%; /* Fixed width to match info section */
}

.youtube-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 0.2s ease, background-color 0.2s ease;
    border-radius: 50%;
    position: relative;
}

/* Same hit-region extension as the NTS transport: 32px icons with 12px gaps
   otherwise flip the cursor on every sweep across the cluster. The volume
   slider sits later in the DOM, so it wins the overlap at its own edge. */
.youtube-player-controls button::after,
.youtube-player-prev-next-controls button::after {
    content: '';
    position: absolute;
    inset: -8px;
}

.youtube-player-controls button:hover {
    color: var(--color-text-primary);
}

.youtube-player-controls button:disabled {
    cursor: default;
}

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

/* Like button */
.youtube-player-like {
    transition: color 0.2s ease !important;
}

.youtube-player-like:hover {
    color: var(--color-text-primary) !important;
}

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

.youtube-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 */
}

.youtube-player-prev-next-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 2px;
    pointer-events: auto; /* Re-enable pointer events for buttons */
}

.youtube-player-prev, .youtube-player-next, .youtube-player-play-pause {
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

.youtube-player-play-pause {
    width: 42px;
    height: 42px;
    font-size: 1.8rem;
}

@media (hover: hover) and (pointer: fine) {
    .youtube-player-prev:hover,
    .youtube-player-next:hover,
    .youtube-player-play-pause:hover {
        transform: scale(1.04);
    }
}

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

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

.youtube-player-volume-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: var(--color-border);
    outline: none;
    border-radius: 2px;
    transition: height 0.2s ease;
    /* 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;
}

.youtube-player-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px;
    height: 4px;
    background: var(--color-text-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: width 0.2s ease, height 0.2s ease;
}

.youtube-player-volume-slider:hover::-webkit-slider-thumb {
    width: 8px;
    height: 8px;
}

.youtube-player-progress-container {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: var(--color-border);
    cursor: pointer;
    overflow: visible;
    transition: height 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;
}


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

.youtube-player-progress-handle {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color:rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: none;
    transition: width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease;
    z-index: 2; /* Ensure it's above other elements */
}

.youtube-player-progress-container:hover .youtube-player-progress-handle {
    display: block;
    width: 10px;
    height: 10px;
}

.youtube-player-progress-indicator {
    position: absolute;
    /* -25px from the old 4px box; the box top now sits 8px above the track */
    top: -17px;
    transform: translateX(-50%);
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    display: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    border: 1px solid var(--color-border);
}

.youtube-player-progress-container:hover .youtube-player-progress-indicator {
    display: block;
}

.youtube-player-time {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-right: 10px;
    min-width: 80px;
    text-align: center;
}

.youtube-player-container {
    flex: 1;
    overflow: hidden;
    display: none;
    /* Above the ::before glass tint (z-index 0) -- without its own stacking
       position the white gradient washes over the video. */
    position: relative;
    z-index: 2;
}

.youtube-player.expanded .youtube-player-container {
    display: block;
}

#youtube-iframe-container {
    width: 100%;
    height: 100%;
}

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

.youtube-player-autoplay-toggle {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color 0.2s ease, transform 0.2s ease;
    border-radius: 50%;
}



/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .youtube-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;
    }

    .youtube-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);
    }

    .youtube-player-header {
        background-color: transparent;
    }
    
    /* Improved control button visibility */
    .youtube-player-controls button {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .youtube-player-controls button:hover {
        filter: brightness(90%);
    }
    
    /* Enhanced play/prev/next buttons */
    .youtube-player-prev, .youtube-player-next, .youtube-player-play-pause {
        color: rgba(255, 255, 255, 0.8);
    }
    
    /* Improved progress bar visibility */
    .youtube-player-progress-container {
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    .youtube-player-progress-container:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }
    
    .youtube-player-progress-bar {
        background-color: var(--color-text-primary);
    }
    
    /* Enhanced scrubber handle */
    .youtube-player-progress-handle {
        background-color: var(--color-text-primary);
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
    }
    
    .youtube-player-progress-container:hover .youtube-player-progress-handle {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    }
    
    /* Improved volume slider */
    .youtube-player-volume-slider {
        background: rgba(255, 255, 255, 0.25);
    }
    
    .youtube-player-volume-slider::-webkit-slider-thumb {
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
    }
    
    /* Improved time display */
    .youtube-player-time {
        color: rgba(255, 255, 255, 0.7);
    }
    
    /* Improved progress indicator */
    .youtube-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);
    }
    
    /* Improved autoplay toggle */
    .youtube-player-autoplay-toggle {
        color: rgba(255, 255, 255, 0.7);
    }
}

/* ====================================
   Mobile YouTube Player — parity with .nts-audio-player
======================================= */
@media (max-width: 767px) {
    .youtube-player {
        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;
    }

    .youtube-player::before {
        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);
    }

    .youtube-player::after {
        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);
    }

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

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

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

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

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

    .youtube-player-center-controls,
    .youtube-player-controls {
        display: contents;
    }

    .youtube-player-prev-next-controls {
        grid-area: main;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        margin: 0;
        justify-self: center;
        transform: translateY(-10%);
    }

    .youtube-player-prev,
    .youtube-player-next {
        width: 36px;
        height: 36px;
        font-size: 1.05rem;
        background: transparent;
    }

    .youtube-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);
    }

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

    .youtube-player-progress-container {
        grid-area: prog;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        height: 3px;
        padding: 14px 0;
        margin: 0;
        border-radius: 2px;
        background-color: rgba(0, 0, 0, 0.18);
        background-clip: content-box;
        align-self: stretch;
        box-sizing: content-box;
    }

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

    .youtube-player-progress-handle {
        display: block;
        top: 50%;
        width: 14px;
        height: 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    }

    .youtube-player-time {
        display: flex;
        grid-area: time;
        justify-content: space-between;
        align-items: center;
        align-self: start;
        margin: -10px 0 0;
        min-width: 0;
        padding: 0 1px;
        background: transparent;
        font-size: 0.68rem;
        font-variant-numeric: tabular-nums;
        color: var(--color-text-secondary);
        pointer-events: none;
    }

    .youtube-player-time-sep {
        display: none;
    }

    .youtube-player-controls .youtube-player-volume-container {
        display: none;
    }

    .youtube-player-like {
        grid-area: like;
        justify-self: start;
        margin-left: 10%;
        padding: 6px !important;
        font-size: 0.95rem;
        transform: translateY(-10%);
    }

    .youtube-player-autoplay-toggle {
        grid-area: autoplay;
        justify-self: end;
        display: inline-flex;
        margin-right: 10%;
        padding: 6px !important;
        font-size: 0.95rem;
        transform: translateY(-10%);
    }

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

    .youtube-player.expanded {
        height: auto;
    }

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

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

@media (max-width: 767px) and (prefers-color-scheme: dark) {
    .youtube-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);
    }

    .youtube-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);
    }

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

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