/* =========================================================
   ESTILOS GERAIS DO PLAYER (BASE / PC)
========================================================= */
:root {
    --fullscreen-scale: 1; /* Adicionado fallback global do CSS */
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }

body { 
    background-color: transparent; 
    color: #ffffff; 
    height: 100vh; 
    overflow: hidden; 
    transition: background-color 0.8s ease; 
}

.player-wrapper { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    height: 100%; 
    padding: 0 30px; 
    background: rgba(24, 24, 24, 0.95); 
    backdrop-filter: blur(10px); 
}

/* =========================================================
   INFORMAÇÕES DA MÚSICA (Lado Esquerdo)
========================================================= */
.track-cover-area { 
    display: flex; 
    align-items: center; 
    width: 10%; 
    min-width: 80px; 
}

.cover-wrapper { 
    width: 60px; 
    height: 60px; 
    border-radius: 6px; 
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    transition: all 0.3s ease; 
    cursor: pointer; 
}
.cover-wrapper.playing { 
    transform: scale(1.05); 
    box-shadow: 0 8px 20px rgba(239, 84, 102, 0.3); 
}
#trackCover { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* =========================================================
   CONTROLES CENTRAIS E BARRA
========================================================= */
.player-controls-area { 
    display: flex; 
    align-items: center; 
    flex: 1; 
    justify-content: space-between; 
    padding: 0 20px; 
}

.track-texts { 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    position: relative; 
    width: 30%; 
}
.title { 
    font-size: 14px; 
    font-weight: bold; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
}
.artist { 
    font-size: 12px; 
    color: #b3b3b3; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
}

#btnPlayerAddPlaylist { 
    position: absolute; 
    right: 0; 
    top: 2px; 
    background: none; 
    border: none; 
    color: #b3b3b3; 
    cursor: pointer; 
    transition: 0.2s; 
}
#btnPlayerAddPlaylist:hover { 
    color: #ef5466; 
    transform: scale(1.1); 
}

/* Esconde o botão móvel de tela cheia por padrão (no PC) */
#btnFullscreenMobile { display: none; }

.buttons-row { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    justify-content: center; 
    width: 30%; 
}
.control-btn { 
    background: none; 
    border: none; 
    color: #b3b3b3; 
    cursor: pointer; 
    transition: 0.2s; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.control-btn:hover { color: #ffffff; transform: scale(1.1); }
.control-btn.active { color: #ef5466; }

.play-pause-btn { 
    color: #ffffff; 
    background: #ef5466; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    padding-left: 2px; 
    box-shadow: 0 4px 10px rgba(239, 84, 102, 0.4); 
}
.play-pause-btn:hover { background: #d43f50; transform: scale(1.1); color: #fff; }

/* ----------------------------------------------------
   BARRA DE PROGRESSO COM BUFFER VISUAL (A MÁGICA CSS)
---------------------------------------------------- */
.progress-container { 
    display: flex; 
    align-items: center; 
    width: 30%; 
    gap: 10px; 
    font-size: 11px; 
    color: #b3b3b3; 
    font-weight: 500; 
}
#progressBar { 
    flex: 1; 
    -webkit-appearance: none; 
    height: 4px; 
    border-radius: 2px; 
    outline: none; 
    cursor: pointer; 
    transition: 0.1s; 
    background: linear-gradient(
        to right, 
        #ef5466 var(--progress, 0%), 
        #ef5466 var(--progress, 0%), 
        rgba(255, 255, 255, 0.4) var(--progress, 0%), 
        rgba(255, 255, 255, 0.4) var(--buffer, 0%), 
        #444 var(--buffer, 0%)
    );
}

#progressBar::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    background: #ffffff; 
    opacity: 0; 
    transition: opacity 0.2s, transform 0.2s; 
}
.progress-container:hover #progressBar::-webkit-slider-thumb { opacity: 1; }
#progressBar::-webkit-slider-thumb:hover { transform: scale(1.3); background: #ef5466; }

/* =========================================================
   FERRAMENTAS EXTRAS (Lado Direito)
========================================================= */
.extra-controls { 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    gap: 20px; 
    width: 20%; 
    min-width: 150px; 
}
.eq-dropdown { 
    background-color: transparent; 
    color: #b3b3b3; 
    border: 1px solid #444; 
    padding: 6px 12px; 
    border-radius: 20px; 
    outline: none; 
    cursor: pointer; 
    font-size: 12px; 
    font-weight: bold; 
}

/* Botões Flutuantes de Tela Cheia */
.btn-close-fs { 
    position: absolute; top: 30px; right: 30px; 
    background: rgba(0,0,0,0.5); border: none; color: white; width: 50px; height: 50px; 
    border-radius: 50%; cursor: pointer; z-index: 10; transition: 0.3s; 
    display: flex; align-items: center; justify-content: center; 
}
.btn-close-fs:hover { background: #ef5466; transform: scale(1.1); }

.btn-native-fs { 
    display: none; 
    position: absolute; top: 30px; left: 30px; 
    background: rgba(0,0,0,0.5); border: none; color: white; width: 50px; height: 50px; 
    border-radius: 50%; cursor: pointer; z-index: 10; transition: 0.3s; 
    align-items: center; justify-content: center; 
}
.btn-native-fs:hover { background: #ef5466; transform: scale(1.1); }


/* =========================================================
   TELA CHEIA (PC PADRÃO) E GERAL TELA CHEIA
========================================================= */
body.fullscreen-active {
    /* CORREÇÃO: O valor '--fullscreen-scale: 1;' foi removido para não quebrar o script Javascript. */
}
body.fullscreen-active .player-wrapper { flex-direction: column; justify-content: center; background: transparent; backdrop-filter: none; }

body.fullscreen-active .title,
body.fullscreen-active .artist,
body.fullscreen-active .progress-container span {
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.9);
}

body.fullscreen-active .control-btn:not(.play-pause-btn) svg,
body.fullscreen-active #btnPlayerAddPlaylist svg {
    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.9));
}

body.fullscreen-active .play-pause-btn {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
}

/* REORGANIZAÇÃO APENAS PARA O COMPUTADOR (Telas maiores que 768px) */
@media screen and (min-width: 769px) {
    body.fullscreen-active .player-controls-area { display: contents; }
    
    body.fullscreen-active .track-texts { order: 1; margin-bottom: 30px; }
    body.fullscreen-active .track-cover-area { order: 2; margin-bottom: 40px; }
    body.fullscreen-active .progress-container { order: 3; margin-bottom: 20px; width: 100%; max-width: 600px; }
    body.fullscreen-active .buttons-row { order: 4; width: 100%; max-width: 600px; }
    body.fullscreen-active .extra-controls { order: 5; margin-top: 30px;}
}

body.fullscreen-active .track-cover-area { display: flex; justify-content: center; width: 100%; }
body.fullscreen-active .cover-wrapper { 
    width: calc(350px * var(--fullscreen-scale)); 
    height: calc(350px * var(--fullscreen-scale)); 
    border-radius: 15px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.8); 
}

body.fullscreen-active .player-controls-area { flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 600px; }
body.fullscreen-active .track-texts { width: 100%; text-align: center; }
body.fullscreen-active .title { 
    font-size: calc(40px * var(--fullscreen-scale)); 
    font-weight: 800; 
    margin-bottom: calc(10px * var(--fullscreen-scale)); 
}
body.fullscreen-active .artist { 
    font-size: calc(20px * var(--fullscreen-scale)); 
    color: #ddd; 
}
body.fullscreen-active #btnPlayerAddPlaylist { right: 20%; top: 15px; } 

body.fullscreen-active .progress-container { width: 100%; font-size: 14px; }
body.fullscreen-active .buttons-row { width: 100%; justify-content: center; gap: 40px; }
body.fullscreen-active .play-pause-btn { 
    width: calc(80px * var(--fullscreen-scale)); 
    height: calc(80px * var(--fullscreen-scale)); 
}
body.fullscreen-active .play-pause-btn svg { 
    width: calc(45px * var(--fullscreen-scale)); 
    height: calc(45px * var(--fullscreen-scale)); 
}
body.fullscreen-active .control-btn svg { 
    width: calc(30px * var(--fullscreen-scale)); 
    height: calc(30px * var(--fullscreen-scale)); 
}

body.fullscreen-active .extra-controls { display: flex; justify-content: center; margin-top: 30px; width: 100%; }


/* =========================================================
   SMARTPHONES (Telas até 768px - Modo Retrato)
========================================================= */
@media screen and (max-width: 768px) {
    .player-wrapper { flex-direction: column; padding: 5px 15px 10px 15px; justify-content: space-between; align-items: center; }
    
    .track-cover-area { width: 100%; justify-content: flex-start; margin-bottom: 5px; position: relative; }
    .cover-wrapper { width: 45px; height: 45px; border-radius: 4px; margin-right: 15px; } 

    .player-controls-area { flex-direction: column; width: 100%; padding: 0; gap: 8px; }

    .track-texts { position: absolute; left: 60px; top: 5px; width: calc(100% - 90px); text-align: left; }
    .title { font-size: 13px; margin-bottom: 2px; }
    .artist { font-size: 11px; }

    #btnPlayerAddPlaylist { position: absolute; right: 0; top: 10px; }

    .progress-container { width: 100%; gap: 8px; font-size: 9px; display: flex !important; }
    #progressBar { height: 3px; }

    .buttons-row { width: 100%; justify-content: center; gap: 25px; margin-top: 2px; }

    .control-btn svg { width: 18px; height: 18px; }
    .play-pause-btn { width: 35px; height: 35px; padding-left: 1px; }
    .play-pause-btn svg { width: 20px; height: 20px; }

    /* Aqui mostramos o botão de tela cheia que foi escondido no PC */
    #btnShuffle, #btnRepeat, #btnPrev, #btnNext, #btnFullscreenMobile { display: flex !important; }

    .extra-controls { display: none !important; } 

    /* CELULAR EM TELA CHEIA */
    body.fullscreen-active .player-wrapper { flex-direction: column; justify-content: center; padding: 20px; }
    body.fullscreen-active .track-cover-area { margin-bottom: 30px; justify-content: center; position: static; }
    body.fullscreen-active .cover-wrapper { 
        width: calc(260px * var(--fullscreen-scale)); 
        height: calc(260px * var(--fullscreen-scale)); 
        margin-right: 0; 
    }
    body.fullscreen-active .track-texts { position: static; text-align: center; width: 100%; margin-bottom: 20px; }
    body.fullscreen-active .title { 
        font-size: calc(24px * var(--fullscreen-scale)); 
        margin-bottom: 5px; 
    }
    body.fullscreen-active .artist { 
        font-size: calc(16px * var(--fullscreen-scale)); 
    }
    body.fullscreen-active #btnPlayerAddPlaylist { position: absolute; right: 10%; top: 30px; }
    body.fullscreen-active .buttons-row { justify-content: center; gap: 30px; margin-top: 15px; }
    body.fullscreen-active .play-pause-btn { 
        width: calc(70px * var(--fullscreen-scale)); 
        height: calc(70px * var(--fullscreen-scale)); 
    }
    body.fullscreen-active .play-pause-btn svg { 
        width: calc(35px * var(--fullscreen-scale)); 
        height: calc(35px * var(--fullscreen-scale)); 
    }
    body.fullscreen-active .control-btn svg { 
        width: calc(24px * var(--fullscreen-scale)); 
        height: calc(24px * var(--fullscreen-scale)); 
    }
}

/* =========================================================
   CENTRAL MULTIMÍDIA (9 Polegadas - F11 Paisagem)
========================================================= */
@media screen and (orientation: landscape) and (max-height: 800px) {
    body.fullscreen-active .player-wrapper { flex-direction: row; justify-content: space-evenly; align-items: center; padding: 20px 40px; }
    
    body.fullscreen-active .track-cover-area { width: 45%; margin-bottom: 0; display: flex; justify-content: center; order: 1; }
    
    body.fullscreen-active .cover-wrapper { 
        width: calc(420px * var(--fullscreen-scale)); 
        height: calc(420px * var(--fullscreen-scale)); 
        box-shadow: 0 15px 40px rgba(0,0,0,0.9); 
    }
    
    body.fullscreen-active .player-controls-area { display: flex; width: 50%; max-width: none; align-items: center; gap: 30px; order: 2; }
    
    body.fullscreen-active .track-texts { text-align: center; width: 100%; }
    body.fullscreen-active .title { 
        font-size: calc(32px * var(--fullscreen-scale)); 
        margin-bottom: calc(10px * var(--fullscreen-scale));
    }
    body.fullscreen-active .artist { 
        font-size: calc(22px * var(--fullscreen-scale)); 
    }
    body.fullscreen-active #btnPlayerAddPlaylist { display: none; } 
    body.fullscreen-active .progress-container { width: 90%; }
    body.fullscreen-active .buttons-row { width: 100%; justify-content: center; gap: 40px; }
    body.fullscreen-active .play-pause-btn { 
        width: calc(90px * var(--fullscreen-scale)); 
        height: calc(90px * var(--fullscreen-scale)); 
    }
    body.fullscreen-active .play-pause-btn svg { 
        width: calc(50px * var(--fullscreen-scale)); 
        height: calc(50px * var(--fullscreen-scale)); 
    }
    body.fullscreen-active .control-btn svg { 
        width: calc(36px * var(--fullscreen-scale)); 
        height: calc(36px * var(--fullscreen-scale)); 
    }
    body.fullscreen-active .extra-controls { position: absolute; bottom: 25px; right: 40px; width: auto; display: flex; }
    body.fullscreen-active .btn-native-fs { display: flex; top: 20px; left: 20px; }
}