:root {
    --bg-white: #ffffff;
    --border-gray: #eef0f2;
    --accent-blue: #3498db;
    --icon-filter: brightness(0.2);
    }
    
    /* Container Principal */
    .audio-player-sidebar.light-theme {
    /* width: 100%; */
    max-width: 300px;
    /* background: var(--bg-white); */
    /* border: 1px solid var(--border-gray); */
    /* border-radius: 12px; */
    padding: 10px 14px;
    display: flex !important;
    align-items: center;
    gap: 2px;
    position: relative; /* Necessário para posicionar o volume */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    animation: playerSlideIn 0.5s ease-out forwards;
    }
    
    /* Ícones e Animação de Hover */
    .audio-player-sidebar .icon-btn {
    cursor: pointer;
    filter: var(--icon-filter);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s;
    object-fit: contain;
    flex-shrink: 0;
    }
    
    .audio-player-sidebar .icon-btn:hover {
    transform: scale(1.25); /* Animação de crescer ao passar o mouse */
    filter: brightness(0);
    }
    
    /* Tamanhos dos Botões */
    .audio-player-sidebar .primary-play-pause {
    width: 38px !important;
    height: 38px !important;
    }
    
    /* Aumentei de 16px para 20px para melhor visibilidade */
    .audio-player-sidebar .small-nav,
    .audio-player-sidebar .small-utility {
    width: 20px !important;
    height: 20px !important;
    }
    
    /* Estrutura de Colunas */
    .col-controls-wrapper {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    }
    
    .row-seekbar { width: 100%; }
    .seek-bar { width: 100%; height: 5px; cursor: pointer; }
    
    .row-info-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    }
    
    .mini-actions {
    display: flex;
    align-items: center;
    gap: 2px; /* Mais espaço entre botões */
    }
    
    /* Slider de Volume Vertical Fluante */
    .volume-control {
    display: none; /* Escondido por padrão */
    position: absolute;
    bottom: 45px; /* Fica acima do botão de volume */
    left: 65px;   /* Ajuste conforme a posição do ícone de volume */
    background: white;
    padding: 10px 5px;
    border: 1px solid var(--border-gray);
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 100;
    }
    
    #volumeSlider {
    writing-mode: bt-lr; /* Orientação vertical para navegadores modernos */
    -webkit-appearance: slider-vertical; /* Orientação vertical para Webkit */
    width: 8px;
    height: 80px;
    padding: 0 5px;
    }
    
    /* Tempos */
    .time-container {
    font-size: 11px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
    }
    
    @keyframes playerSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
    }
    
    @media (max-width: 768px) {
        .audio-player-sidebar.light-theme {
            width: 100%;
            max-width:768px; /* Evita colar nas bordas laterais */
            position: relative; /* Mude de absolute para fixed para garantir que apareça na viewport */
            transform: translateX(-50%); /* Ajuste fino da centralização */
            z-index: 10;   /* Garante que fique acima de tudo */
            box-sizing: border-box;
            background:rgba(244, 244, 249, 0.0); /* Garante que o fundo não seja transparente */
            display: flex !important; /* Reforça o display flex */
            padding: 0 20px;
            margin-bottom: -10px;
            box-shadow: none;
        }
        .primary-play-pause, .mini-actions {display: none;}
        .row-info-actions {
            position: absolute;
            top: 20px;
            right: 20px;
            justify-content: flex-end;
        }
        .is-sticky .row-info-actions {
            margin-right: -30px;
        }

        .is-sticky .audio-player-sidebar {
            padding: 0 0 0 0;
            width: 78%;
            margin-top: -25px;
        }

        .seek-bar {
            /* Remove a aparência padrão do navegador */
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 10px; /* Altura desejada */
            background: rgba(238, 238, 238, 0.1); /* Cor de fundo azul claro */
            outline: none;
            border: 1px solid rgb(196, 196, 196); /* Borda laranja */
            border-radius: 0px;
            overflow: hidden; /* Importante para o efeito de preenchimento no Chrome */
            border-radius: 20px;
        }

        /* --- ESTILO PARA CHROME, SAFARI, EDGE --- */
        
        /* O "Caminho" (Track) */
        .seek-bar::-webkit-slider-runnable-track {
            height: 10px;
            background: lightblue;
            background: rgba(214, 214, 214, 0.1); /* Cor de fundo azul claro */

        }

        /* O "Botão" (Thumb) */
        .seek-bar::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 15px;
            height: 10px;
            border-radius: 20px;
            z-index: 100;
            background: #2284ff; /* Cor do botão */
            cursor: pointer;
            /* Truque para a Cor de Preenchimento Verde: shadow gigante à esquerda */
            box-shadow: -100vw 0 0 100vw #2284ff40; 
        }

        /* --- ESTILO PARA FIREFOX --- */
        
        /* O "Caminho" */
        .seek-bar::-moz-range-track {
            height: 20px;
            background: lightblue;
        }

        /* A "Cor de Preenchimento" (Exclusivo Firefox) */
        .seek-bar::-moz-range-progress {
            background-color: green; 
            height: 20px;
        }

        /* O "Botão" no Firefox */
        .seek-bar::-moz-range-thumb {
            width: 15px;
            height: 20px;
            background: green;
            border: none;
            border-radius: 0;
            cursor: pointer;
        }
    }