#persistent-player-container {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.8);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #000;
}

#player-hero-slot {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: rgba(24, 24, 28, 0.5);
    border-radius: 1rem;
}

#persistent-player-container.is-pip {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 320px !important;
    height: 180px !important;
    z-index: 9999 !important;
    border: 2px solid #00f0ff !important;
    box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 240, 255, 0.3) !important;
    animation: pipPop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (max-width: 640px) {
    #persistent-player-container.is-pip {
        width: 240px !important;
        height: 135px !important;
        bottom: 16px !important;
        right: 16px !important;
    }
}

@keyframes pipPop {
    from {
        transform: translateY(40px) scale(0.9);
        opacity: 0.5;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Animação e Estilos do Botão de Áudio Flutuante */
#unmute-btn {
    transition: opacity 0.3s ease, transform 0.2s ease;
}

/* Ajuste do botão quando o player entra em modo Mini-Player (PiP) */
#persistent-player-container.is-pip #unmute-btn {
    top: 8px !important;
    left: 8px !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
}

#persistent-player-container.is-pip #unmute-btn span:first-child {
    font-size: 12px !important;
}