/* ===================================
   Music Mini Player
=================================== */

#music-mini-player{

    direction:ltr;

    position:fixed;

    left:50%;
    bottom:13px;

    transform:
            translateX(-50%)
            translateY(140px);

    width:min(900px,92vw);

    height:80px;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-radius:28px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
            0 15px 45px rgba(0,0,0,.25);

    opacity:0;

    pointer-events:none;

    transition:.35s ease;

    z-index:9999;

}

#music-mini-player.show{

    opacity:1;

    pointer-events:auto;

    transform:
            translateX(-50%)
            translateY(0);

}

/* ========================== */

.music-mini-info{

    min-width:180px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

#music-mini-title{

    color:white;

    font-size:18px;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

#music-mini-artist{

    color:rgba(255,255,255,.65);

    font-size:13px;

    margin-top:4px;

}

/* ========================== */

.music-mini-progress{

    flex:1;

    height:6px;

    border-radius:20px;

    overflow:hidden;

    background:rgba(255,255,255,.12);

    position:relative;

}

#music-mini-progress-fill{

    position:absolute;

    left:0;
    top:0;

    width:0;

    height:100%;

    border-radius:20px;

    background:linear-gradient(
            90deg,
            #ff9335,
            #ff4f6d
    );

    transition:width .25s linear;

}

/* ========================== */

.music-mini-controls{

    display:flex;

    align-items:center;

    gap:12px;

}

.music-mini-controls button{

    width:48px;

    height:48px;

    border:none;

    border-radius:16px;

    background:rgba(255,255,255,.08);

    color:white;

    cursor:pointer;

    transition:.25s;

    display:flex;

    align-items:center;

    justify-content:center;

}

.music-mini-controls button:hover{

    transform:translateY(-2px);

    background:rgba(255,255,255,.18);

}

#music-mini-play{

    width:56px;

    height:56px;

    border-radius:18px;

    background:#00d563;

}

#music-mini-play:hover{

    background:#00ef6b;

}

#music-mini-close{

    margin-left: 10px;

    width:46px;

    height:46px;

    border:none;

    border-radius:16px;

    background:rgba(255,255,255,.08);

    color:white;

    cursor:pointer;

    transition:.25s;

    display:flex;

    align-items:center;

    justify-content:center;

}

#music-mini-close:hover{

    background:rgba(255,255,255,.18);

    transform:translateY(-2px);

}

@media (max-width:768px){

    #music-mini-player{

        width:95%;

        height:auto;

        padding:14px;

        gap:14px;

        flex-wrap:wrap;

    }

    .music-mini-info{

        width:100%;

        min-width:0;

    }

    .music-mini-progress{

        width:100%;

        flex:none;

    }

    .music-mini-controls{

        width:100%;

        justify-content:center;

    }

    #music-mini-close {
        position:fixed;
        right:10px;
    }

    .music-mini-controls button{

        width:40px;

        height:40px;

        border:none;

        border-radius:12px;
    }

    #music-mini-play{

        width:48px;

        height:48px;

        border-radius:16px;
    }

    }