/**
 * Key-Music Player Mix - Mini Meter
 * Styles pour le VU-mètre stéréo miniature
 * Version: 1.0
 */
 
/* =================
 1. Mini Meter de piste
 ==================== */
/* Conteneur principal du meter */
.kmp-comparator-mini-meter {
    display: inline-flex;
    width: 5px; /* Légèrement plus large pour mieux voir les segments */
    height: 38px; /* Hauteur ajustée pour correspondre aux boutons */
    position: relative;
    vertical-align: middle;
    gap: 1px;
    background-color: #111111; /* Fond sombre pour mieux voir les segments LED */

    overflow: hidden;
    margin-right: 8px;
}

/* Style spécifique pour le meter placé en premier (avant l'icône) */
.kmp-comparator-mini-meter-first {
    margin-right: 10px;
    margin-left: 0;
    height: 38px; /* Assurer la même hauteur que l'icône */
    align-self: center;
}

/* Ajustement des marges si on veut aligner le VU-meter avec la barre de progression globale */
.kmp-comparator-global-progress-container {
    padding-left: 16px; /* Réduire légèrement pour compenser l'espace du VU-meter */
}

/* Barres individuelles (gauche et droite) */
.kmp-comparator-mini-meter-bar {
    flex: 1;
    height: 100%;
    position: relative;
    background: none;
    border-radius: 1px;
    overflow: hidden;
}

/* Ajuster le conteneur principal de la piste */
.kmp-comparator-global-progress-container {
    padding-right: 48px; /* Réduire l'espace à droite si nécessaire */
}

/* Assurer que la dernière piste n'a pas de marge inférieure excessive */
.kmp-comparator-track-container:last-child {
    margin-bottom: 0;
}

/* Niveau de volume pour chaque barre */
.kmp-comparator-mini-meter-level {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%; /* Sera modifié par JS */
    transition: height 0.05s ease-out;
    /* Suppression du gradient et remplacement par un background transparent */
    background: transparent;
    /* Création des segments LED avec repeating-linear-gradient */
    background-image: repeating-linear-gradient(
        to top,
        #00FF00 0px, #00FF00 2px, /* Segments verts (12 segments) */
        transparent 2px, transparent 3px,
        #00FF00 3px, #00FF00 5px,
        transparent 5px, transparent 6px,
        #00FF00 6px, #00FF00 8px,
        transparent 8px, transparent 9px,
        #00FF00 9px, #00FF00 11px,
        transparent 11px, transparent 12px,
        #00FF00 12px, #00FF00 14px,
        transparent 14px, transparent 15px,
        #00FF00 15px, #00FF00 17px,
        transparent 17px, transparent 18px,
        
        #FFFF00 18px, #FFFF00 20px, /* Segments jaunes (3 segments) */
        transparent 20px, transparent 21px,
        #FFFF00 21px, #FFFF00 23px,
        transparent 23px, transparent 24px,
        #FFFF00 24px, #FFFF00 26px,
        transparent 26px, transparent 27px,
        
        #FF0000 27px, #FF0000 29px, /* Segments rouges (3 segments) */
        transparent 29px, transparent 30px,
        #FF0000 30px, #FF0000 32px,
        transparent 32px, transparent 33px,
        #FF0000 33px, #FF0000 35px,
        transparent 35px, transparent 36px
    );
}

/* Niveau peak */
.kmp-comparator-mini-meter-peak {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Hauteur d'un segment LED */
    background-color: #00FF00; /* Couleur par défaut */
    transition: bottom 0.1s ease-out, background-color 0.1s ease;
    display: none; /* Masque le repère de volume  */
}

/* Petites étiquettes L et R (optionnel) */
.kmp-comparator-mini-meter-label {
    position: absolute;
    bottom: 0;
    font-size: 6px;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

.kmp-comparator-mini-meter-label.left {
    left: 1px;
}

.kmp-comparator-mini-meter-label.right {
    right: 1px;
}

/* Styles pour différentes tailles de lecteur */
.kmp-comparator-player.small .kmp-comparator-mini-meter {
    width: 8px;
    height: 30px; /* Ajusté pour taille small */
}

.kmp-comparator-player.large .kmp-comparator-mini-meter {
    width: 8px;
    height: 48px; /* Ajusté pour taille large */
}

/* Style pour les écrans mobiles */
@media (max-width: 600px) {
    .kmp-comparator-mini-meter {
        width: 8px;
        height: 34px; /* Ajusté pour mobile */
    }
}