/* ============================================================
   SHARED · Feedback deep-link styles
   (pairs with feedback-focus-flash.js + feedback-deeplink.js)

   .fbw-flash — the focus/flash highlight applied to the element a
   feedback report points at. Brief, unmistakable, self-removing
   (the JS removes the class). Under prefers-reduced-motion the
   pulse is replaced by a static highlight that the JS holds for a
   few seconds — the highlight is functional, not decorative.

   .fbw-deeplink-note — small admin-facing status card (report not
   found, Arena-item explanation, unresolvable scope). Reuses the
   fbw- token palette from feedback-widget.css.
   ============================================================ */

.fbw-flash {
    animation: fbwFlashPulse 0.8s ease-out 2;
    border-radius: 6px;
}
@keyframes fbwFlashPulse {
    0% {
        outline: 3px solid rgba(18, 132, 245, 0);
        background-color: rgba(18, 132, 245, 0);
    }
    30% {
        outline: 3px solid rgba(18, 132, 245, 0.9);
        background-color: rgba(18, 132, 245, 0.12);
    }
    100% {
        outline: 3px solid rgba(18, 132, 245, 0);
        background-color: rgba(18, 132, 245, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fbw-flash {
        animation: none;
        outline: 3px solid rgba(18, 132, 245, 0.9);
        background-color: rgba(18, 132, 245, 0.12);
    }
}

.fbw-deeplink-note {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    max-width: min(480px, calc(100vw - 48px));
    background: #FFFFFF;
    color: #111111;
    border: 1px solid #E4E4E1;
    border-radius: 12px;
    padding: 12px 16px;
    font: 400 13.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
    box-shadow: 0 14px 36px rgba(17, 17, 17, 0.14);
    z-index: 1360; /* above the widget (1350), still below lightboxes/tour */
}

.fbw-deeplink-note .fbw-note-id {
    font-family: ui-monospace, Menlo, monospace;
    background: #E4F3FE;
    color: #0B6BC9;
    border-radius: 6px;
    padding: 1px 6px;
}