/* Loader screen setup */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

:root {
    --jzor-debugging-status: 'Disconnected';
    --jzor-debugging-color: #0f03;
    --jzor-debugging-edge: rgba(0,0,0,0);
    --jzor-debugging-running-display-block: 'initial';
    --jzor-debugging-paused-display-none: 'initial';
}

/* Inset viewport edge — passive indicator that’s visible no matter where the user’s
   attention is. Color tracks --jzor-debugging-edge (set by jzor.loader.setDebuggerStatus
   alongside --jzor-debugging-color). pointer-events:none so clicks still reach the app. */
html.jzor-debugging::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 3px var(--jzor-debugging-edge);
    transition: box-shadow 150ms ease-out;
    z-index: 999999;
}

html.jzor-debugging::after {
    content: var(--jzor-debugging-status);
    background: var(--jzor-debugging-color);
    border-radius: 0 0 0.5rem 0.5rem;
    position: fixed;
    top:0px;
    padding: 0px 10px 5px 10px;
    left:50%;
    transform: translateX(-50%);
    font-size: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    user-select: none;
    /* pointer-events re-enabled below on the real <div> badge (::after cannot receive clicks).
       See jzor.loader.js showDebuggerStatus — it also injects a real element for click-to-copy. */
    pointer-events: none;
    font-variant: small-caps;
    z-index: 1000000;
    transition: background 150ms ease-out;
}

/* Click-to-copy badge: a real DOM element injected by the loader so it can receive clicks.
   Positioned on top of the ::after pseudo so visually identical but interactive. */
#jzor-debugger-badge {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0px 10px 5px 10px;
    border-radius: 0 0 0.5rem 0.5rem;
    font-size: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    font-variant: small-caps;
    user-select: none;
    cursor: pointer;
    z-index: 1000001;
    background: transparent;
    color: transparent;
    /* Sits atop ::after — invisible but captures clicks. Tooltip surfaces the full appId. */
}
#jzor-debugger-badge:hover {
    filter: brightness(1.15);
}
#jzor-debugger-badge.jzor-debugger-copied::after {
    content: 'copied';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    padding: 2px 8px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    border-radius: 4px;
    font-size: 0.75rem;
    font-variant: normal;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   Loader-surface styling moved out of this shared stylesheet.
   Each loader surface is now self-contained — its markup AND its
   <style> live together in one overridable @pages file, inlined
   into the loader page so the styling ships in the document and
   can't fail like an external asset (and a per-app/package override
   replaces look + markup together):
     • splash            → @pages/splash.html
     • reconnect modal    → @pages/reconnect-modal.html
     • blazor error UI    → @pages/blazor-error.html
     • throttle overlay   → @pages/throttle.html
     • terminated takeover → @pages/terminated.html (already inline)
   The host guarantees only the lifecycle defaults (hidden-by-default
   + #jzor-splash.hide) via a tiny inline block in JzorLoader.cshtml.
   ───────────────────────────────────────────────────────────── */