/* css/player.css - Estilos globales del reproductor */

body {
    background-color: var(--color-player-bg, #F2ECCF);
    color: var(--color-player-text, #3D405B);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Custom scrollbar for playlist - Subtle for Windows */
.playlist-scroll::-webkit-scrollbar {
    width: 4px;
}

.playlist-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.playlist-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.playlist-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Progress Bar Input Customization */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    height: 10px;
    border-radius: 5px;
    cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    background: #404040;
    border-radius: 5px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #E07A5F;
    margin-top: -5px;
    box-shadow: 0 0 10px rgba(224, 122, 95, 0.5);
    transition: transform 0.1s;
}

input[type=range]:hover::-webkit-slider-thumb {
    transform: scale(1.2);
}

input[type=range]:focus {
    outline: none;
}

/* Dynamic Progress fill via CSS var applied in JS */
.progress-filled {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #E07A5F;
    border-radius: 5px;
    pointer-events: none;
}

.cover-glow {
    box-shadow: 0 10px 50px -10px rgba(224, 122, 95, 0.3);
}

/* Auto-scrolling Text Animations */
@keyframes scrollText {
    0% {
        transform: translate3d(100%, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Protagonist Mode Mobile Transitions */
@media (max-width: 767px) {
    .lyrics-active main {
        /* Shrink the player area further to give more room for the playlist below (~250px) */
        height: calc(100dvh - 250px) !important;
    }

    .lyrics-active aside {
        /* Expand the sidebar up so more tracks are visible (~250px) */
        height: 250px !important;
    }

    .lyrics-active #lyrics-floating-container {
        opacity: 1 !important;
        pointer-events: auto !important;
        flex: 1 1 50px !important; /* Grow unconditionally into the space */
        display: flex !important;
    }
}

/* Protagonist Mode Desktop Transitions */
@media (min-width: 768px) {
    .lyrics-active main {
        z-index: 30 !important;
        overflow: visible !important;
    }

    .lyrics-active #playlist {
        /* Preserve background of its parent container, but shrink the actual track list to the bottom */
        flex: 0 0 250px !important; 
        margin-top: auto;
    }

    #lyrics-floating-container {
        /* Keep out of normal flow always on desktop so main player is perfectly centered and NEVER jumps! */
        position: absolute;
    }

    .lyrics-active #lyrics-floating-container {
        opacity: 1 !important;
        pointer-events: auto !important;
        position: fixed !important;
        right: 0 !important;
        top: 100px !important; /* Stand clear of the Aside header */
        bottom: 250px !important; /* Leave bottom 250px for the playlist */
        /* width matches the aside width natively using breakpoints */
        width: 24rem !important; /* md:w-96 = 24rem = 384px */
        height: calc(100dvh - 350px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 50 !important;
        background: transparent !important;
        padding: 2rem !important;
    }
    
    @media (min-width: 1024px) {
        .lyrics-active #lyrics-floating-container {
            width: 480px !important; /* lg:w-[480px] */
        }
    }

    .lyrics-active #lyric-prev,
    .lyrics-active #lyric-next {
        font-size: 1.25rem !important;
        padding: 0.75rem 0 !important;
    }

    .lyrics-active #lyric-current {
        font-size: 1.75rem !important;
        padding: 1rem 0 !important;
        white-space: normal !important; 
    }

    .lyrics-active .volume-wrapper {
         /* Use visibility hidden instead of display none to prevent the layout from shifting / "dancing" when it disappears */
         visibility: hidden !important;
    }
}

#lyrics-floating-container {
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px); /* Slight slide down effect when appearing */
}