/* Shared loading feedback. Uses existing request state, never timers or network
   interception to guess whether work is complete. Loaded before other layers so
   its temporary border can override legacy !important borders without resizing. */
@property --gui-loading-edge {
    syntax: "<color>";
    inherits: false;
    initial-value: #4660c7;
}

@layer gui-loading {
    :root { --gui-loading-blue:#4660c7; --gui-loading-violet:#8053c5; --gui-loading-cyan:#147e98; }
    :root[data-theme="dark"] { --gui-loading-blue:#8ca6ff; --gui-loading-violet:#bc9aff; --gui-loading-cyan:#67cddd; }

    :where(.loading-state) { border-radius:.65rem; }

    :where(
        .loading-state, .is-loading, [aria-busy="true"], [data-loading="true"],
        [data-load-state="loading"], [data-status="loading"], [data-attention-status="loading"],
        [aria-busy="true"] .gui-metric-card, [data-loading="true"] .gui-metric-card,
        .automation-center__summary-frame:has(.automation-center__summary-frame-actions[aria-busy="true"]) .gui-metric-card
    ):not(:where([hidden], .hidden, [aria-hidden="true"])) {
        --gui-loading-edge:var(--gui-loading-blue);
        animation:gui-loading-border 3.6s ease-in-out infinite !important;
        border-color:var(--gui-loading-edge) !important;
        /* Inset outline adds a frame even to borderless loaders. It preserves
           existing shadows, selected rings, text, pointer events and geometry. */
        outline:2px solid var(--gui-loading-edge) !important;
        outline-offset:-2px !important;
    }

    /* Busy controls retain an independent, visible keyboard-focus indicator. */
    :where(.is-loading, [aria-busy="true"], [data-loading="true"],
        [data-load-state="loading"], [data-status="loading"], [data-attention-status="loading"],
        [aria-busy="true"] .gui-metric-card, [data-loading="true"] .gui-metric-card,
        .automation-center__summary-frame:has(.automation-center__summary-frame-actions[aria-busy="true"]) .gui-metric-card
    ):focus-visible {
        outline-color:var(--ds-primary,#4660c7) !important;
        outline-offset:3px !important;
    }

    /* Replace the older analysis-only frame with the common treatment. */
    .automation-result-detail__analysis.is-loading::after { content:none !important; animation:none !important; }

    @keyframes gui-loading-border {
        0%, 100% { --gui-loading-edge:var(--gui-loading-blue); }
        33.333% { --gui-loading-edge:var(--gui-loading-violet); }
        66.667% { --gui-loading-edge:var(--gui-loading-cyan); }
    }

    @media (prefers-reduced-motion:reduce), (forced-colors:active) {
        :where(.loading-state, .is-loading, [aria-busy="true"], [data-loading="true"],
            [data-load-state="loading"], [data-status="loading"], [data-attention-status="loading"],
            [aria-busy="true"] .gui-metric-card, [data-loading="true"] .gui-metric-card,
            .automation-center__summary-frame:has(.automation-center__summary-frame-actions[aria-busy="true"]) .gui-metric-card
        ) { animation:none !important; }
    }
    @media (forced-colors:active) {
        :root { --gui-loading-blue:Highlight; }
        :where(.loading-state, .is-loading, [aria-busy="true"], [data-loading="true"],
            [data-load-state="loading"], [data-status="loading"], [data-attention-status="loading"],
            [aria-busy="true"] .gui-metric-card, [data-loading="true"] .gui-metric-card,
            .automation-center__summary-frame:has(.automation-center__summary-frame-actions[aria-busy="true"]) .gui-metric-card
        ) { outline-color:Highlight !important; }
    }
}