/* Layout Transitions - Smooth animated layout switching */

/* Animate player column width changes */
#player-column {
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        margin-left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animate playlist column visibility and width */
#playlist-column {
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Centered Mode - Player takes more space when no playlist */
.player-centered #player-column {
    max-width: 83.33333333% !important;
    /* col-lg-10 */
    margin-left: auto;
    margin-right: auto;
}

/* Split Mode - Player shares space with playlist */
.player-split #player-column {
    max-width: 66.66666667% !important;
    /* col-lg-8 */
    margin-left: 0;
    margin-right: 0;
}

/* Playlist visible in split mode */
.player-split #playlist-column {
    max-width: 33.33333333% !important;
    /* col-lg-4 */
    opacity: 1;
}

/* Playlist hidden in centered mode */
.player-centered #playlist-column,
#playlist-column.d-none {
    max-width: 0 !important;
    opacity: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure content doesn't jump during transition */
.playlist-container {
    width: 100%;
    min-width: 300px;
    /* Prevent squishing */
}