/* Full-viewport fixed backdrop. Sits behind the detail content (.mix-detail-foreground is z-index:1)
   and never intercepts pointer events — except the zoom slider, which re-enables them on itself. */
.mix-waveform-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* The canvas fills the viewport. The glassy/frosted treatment is a CSS backdrop-blur on this layer
   (the ribbon's luminous depth is drawn inside the canvas by the module); together they read as lit
   glass moving behind the content rather than a hard chart. */
.mix-waveform-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Zoom slider — a small viewing control pinned to the bottom-right. Pointer events are re-enabled
   here only (the backdrop stays inert), and it is never a seek surface. */
.mix-waveform-zoom {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 180px;
    max-width: 40vw;
    pointer-events: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.mix-waveform-zoom:hover {
    opacity: 1;
}