/* =========================================================================
 * Staging Read-Only Banner
 * ------------------------------------------------------------------------
 * Visible reminder that this is the read-only staging clone, not prod.
 * Injected on DOMContentLoaded by firebaseConfig.js (clone variant).
 * ========================================================================= */

/* Vertical strip on the RIGHT edge, full height. Keeps the top of the page
 * (and the side-navigation drawer that slides in from the left) completely
 * unobstructed. Body gets a right padding so content doesn't sit under it.
 *
 * History: this used to be a 48-px-tall horizontal strip across the top of
 * the page, but it overlapped the side-nav drawer's header when the drawer
 * was open. STG-WALK-7 moved it to the right edge.
 */
#staging-banner {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    z-index: 100000;
    background: repeating-linear-gradient(
        45deg,
        #b80000,
        #b80000 12px,
        #8a0000 12px,
        #8a0000 24px
    );
    color: #fff;
    font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    padding: 16px 0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    user-select: none;
    text-transform: uppercase;
    line-height: 32px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#staging-banner .staging-banner__pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    margin: 0 0 8px 0;
    animation: staging-banner-pulse 1.4s ease-in-out infinite;
}

@keyframes staging-banner-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.6); }
}

/* The sub-line ("Live prod data ... Layer 1 (SDK guard) active ...") is
 * the first thing to drop on a 32-px-wide vertical strip. The main line
 * is loud enough on its own. */
#staging-banner__detail {
    display: none;
}

/* Reserve space on the right edge so app content isn't covered. */
body.staging-banner-active {
    padding-right: 32px !important;
}

/* When a write is blocked, briefly flash the banner brighter. */
#staging-banner.staging-banner--flash {
    animation: staging-banner-flash 0.8s ease-out;
}
@keyframes staging-banner-flash {
    0%   { background: #ffeb3b; color: #000; }
    100% { background: repeating-linear-gradient(45deg, #b80000, #b80000 12px, #8a0000 12px, #8a0000 24px); color: #fff; }
}