/* Visualizer positioning behind the history list */

.row.historic {
    position: relative; 
    z-index: 1; /* Keep history items above the canvas */
    border-radius: 12px;
    min-height: 300px;
    background: rgba(0, 0, 0, 0.5); /* 50% transparent background */
    padding: 20px; /* Add some padding since it now has a background */
}

@media (max-width: 767px) {
    .row.historic {
        background: none;
        border-radius: 0;
        padding: 0;
    }
}

#history-visualizer {
    position: fixed;
    top: 0; /* Will be overwritten by JS */
    left: 0;
    width: 100vw;
    height: 100%; /* Will be overwritten by JS */
    z-index: 5; /* Between background mask (2) and main content (10) */
    pointer-events: none; /* Let clicks pass through */
}

/* Position the dat.gui controls over the history container */
#visualizer-controls {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
}

/* Ensure the dat.gui container itself doesn't cause scrolling or overlap issues */
#visualizer-controls .dg.ac {
    position: static !important; /* Override dat.gui fixed positioning */
}