/* Verberg paarse VU-meters in header bij Home view */
body.home-mode .sticky-header-nav .vuMeter {
    display: none !important;
}
/* extra content sidebars voor twee andere vu meters */
.extra-left-sidebar,
.extra-right-sidebar {
    width: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.extra-left-top,
.extra-left-bottom,
.extra-right-top,
.extra-right-bottom {
    flex: 1;
    background: transparent;
    min-height: 50px;
}

/* Echte paarse VU-meters links/rechts */
#vuLeft .bar,
#vuRight .bar {
    width: 5px;
    height: 40px; /* hoogte wordt door JS aangepast */
    margin: 0 2px;
    background: linear-gradient(180deg, #239d43 0%, #8a319c 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px #8e44ad;
    transition: height 0.1s ease, background 0.3s;
}
@media (max-width: 768px) {
    .left-content-sidebar,
    .right-content-sidebar {
        /* Voeg marge toe zodat de VU sidebars verder van de audiocontainer staan */
        margin-left: 10px;
        margin-right: 10px;
        display: none;
    }

    .left-content-sidebar-top,
    .right-content-sidebar-top {
        display: none;
    }

    /* Verberg VU-meters in de header op mobiel */
    #vuLeft,
    #vuRight {
        display: none !important;
    }
}
/* Hoogte instellen Groene VU meters */
#vuContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 25px;
}
.vuMeter {
    display: flex;
    gap: 2px;
}

.bar {
    width: 3px; /* Breedte van elke strook */
    margin: 0 3px; /* Ruimte tussen de stroken */
    background-color: #a500ce; /* kleur vu meter*/
    display: inline-block;
    height: 10px; /* Beginhoogte, wordt dynamisch aangepast */
    transition: height 0.1s ease; /* Soepele overgang voor hoogte */
}



/* Zij‑VU’s: 3 smalle meters per kant */
/* Zij‑VU’s: 3 smalle meters per kant, naast elkaar */
/* Zij‑VU’s: 3 smalle meters per kant */
/* Zij‑VU’s: 3 smalle meters per kant, naast elkaar */
.sidebar-vu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    height: 280px;          /* max hoogte vu bars content */
    padding: 10px 0;
    margin-top: 92px; /* legacy: kan blijven staan, ids hieronder sturen de echte positie */
}

/* plaatsing-hoogte instellen vu meters content */
body.music-mode #vuLeftSidebar,
body.music-mode #vuRightSidebar {
    top: 127px !important;
    margin-top: 0 !important;
}

/* Groene neon-glow VU balkjes */
 .sidebar-vu-meter {
    width: 3px;
    height: 280px;
    background: linear-gradient(to top, #0b3b0b, #2ee02e);
    border-radius: 4px;
    box-shadow:
        0 0 6px rgba(46, 224, 46, 0.6),
        0 0 12px rgba(46, 224, 46, 0.5),
        0 0 18px rgba(46, 224, 46, 0.4);
    transform-origin: bottom center;
    transform: scaleY(0.2);
    transition: transform 0.07s linear, box-shadow 0.07s linear;
    animation: sidebarVuGlow 1.2s ease-in-out infinite alternate;
}

/* Kleine puls in de glow, niet in de hoogte (hoogte doet JS al) */
@keyframes sidebarVuGlow {
    0% {
        box-shadow:
            0 0 4px rgba(224, 46, 129, 0.5),
            0 0 10px rgba(46, 52, 224, 0.4),
            0 0 16px rgba(232, 239, 10, 0.3);
    }
    100% {
        box-shadow:
            0 0 8px rgba(224, 46, 84, 0.8),
            0 0 18px rgba(46, 46, 224, 0.7),
            0 0 26px rgba(218, 241, 6, 0.6);
    }
}