/* background/cmp-chroma-current.css - Scoped styles for Chroma Current background */

.cmp-chroma-container {
    position: relative;
    overflow: hidden;
    background-color: #000000;
}

.cmp-chroma-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none !important;
    user-select: none;
    -webkit-user-select: none;
    z-index: 0;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.cmp-chroma-canvas--hidden {
    opacity: 0;
    pointer-events: none;
}

/* With no WebGL, the host retains its opaque first frame. */
.cmp-chroma-container.cmp-chroma-fallback .cmp-chroma-canvas {
    display: none !important;
}

/* Working shell only; login retains its own background. */
.cmp-chroma-stage, .cmp-chroma-stage.cmp-chroma-container {
    position: fixed; inset: 0; z-index: var(--cmp-z-bg, 0);
    overflow: hidden; contain: strict; pointer-events: none;
    background: #050506;
}
/* The same dot field remains visible on phones; dark surfaces protect text. */
@media (max-width: 1023px) {
    .cmp-chroma-stage .cmp-chroma-canvas { opacity: .52; }
    .cmp-chroma-stage ~ .cmp-app { --cmp-panel: rgba(9, 10, 15, .94); }
    .cmp-chroma-stage ~ .cmp-app .cmp-pagehead { background: rgba(5, 5, 9, .86); border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .cmp-chroma-canvas { transition: none; }
}
/* Keep the animated field in the gutters, with stable reading surfaces. */
@media (min-width: 1024px) {
    .cmp-chroma-stage .cmp-chroma-canvas { opacity: .68; }
    .cmp-chroma-stage ~ .cmp-app {
        --cmp-panel: rgba(11, 12, 18, .94);
        --cmp-side: rgba(8, 9, 12, .96);
    }
    .cmp-chroma-stage ~ .cmp-app .cmp-ctx { background: rgba(8, 9, 12, .94); }
    .cmp-chroma-stage ~ .cmp-app .cmp-top { background: rgba(8, 9, 12, .90); }
    .cmp-chroma-stage ~ .cmp-app .cmp-pagehead {
        padding: 20px 24px; border: 1px solid rgba(255,255,255,.08);
        border-radius: 16px; background: rgba(8, 9, 14, .94);
    }
}