/* Spacer to prevent content overlap. position:relative + z-index:1 establishes a stacking context
   that paints above the WaveformVisualizer backdrop (fixed, z-index:0), and the opaque page-surface
   background makes the spacer read as solid page — occluding the visualizer where it sits in flow,
   the same way the app bar covers the top. Theme-aware alias, so it inverts for free. */
.player-spacer {
    width: 100%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background: var(--deepdrft-page-surface);
}

.player-spacer.expanded {
    height: var(--player-height, 60px);
}

.player-spacer.minimized {
    height: 60px;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }