/**
 * Wilbur Website Helper — controller animations.
 *
 * Reduced-motion safe. Uses CSS custom properties for theme palette so the
 * highlight color can be adjusted at :root without touching this file.
 *
 * See docs/WILBUR_WEBSITE_HELPER_PLAN.md §8.
 */

:root {
    --wilbur-accent: #C41E1E;
    --wilbur-success: #1E9E5A;
    --wilbur-pulse-duration: 250ms;
    --wilbur-check-duration: 700ms;
}

@media (prefers-color-scheme: dark) {
    :root {
        --wilbur-accent: #FF6E6E;
        --wilbur-success: #4DD993;
    }
}

/* --- Field pulse highlight ------------------------------------------------ */

.wilbur-pulse {
    animation: wilbur-pulse-key var(--wilbur-pulse-duration) ease-out;
    box-shadow: 0 0 0 0 rgba(196, 30, 30, 0.5);
}

@keyframes wilbur-pulse-key {
    0%   { box-shadow: 0 0 0 0   rgba(196, 30, 30, 0.55); }
    60%  { box-shadow: 0 0 0 6px rgba(196, 30, 30, 0.10); }
    100% { box-shadow: 0 0 0 0   rgba(196, 30, 30, 0.00); }
}

/* --- Green check pin ----------------------------------------------------- */

.wilbur-check {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%) scale(0.6);
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wilbur-success);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity 150ms ease-out, transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1.2);
}

.wilbur-check-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.wilbur-check-fade {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
}

/* --- highlight_element pulse --------------------------------------------- */
/*
 * Applied by runHighlightElement to draw attention to an element the AI is
 * referring to. Repeats a colored outline pulse so the user catches it even
 * if they're not looking at that exact spot. Auto-removed after the action's
 * duration_ms by the runner.
 */
.wilbur-highlight {
    animation: wilbur-highlight-pulse 1.2s ease-out 0s infinite;
    position: relative;
    z-index: 50;
}
@keyframes wilbur-highlight-pulse {
    0% {
        outline: 2px solid rgba(196, 30, 30, 0.85);
        outline-offset: 2px;
        box-shadow: 0 0 0 0 rgba(196, 30, 30, 0.55);
    }
    70% {
        outline-offset: 6px;
        box-shadow: 0 0 0 14px rgba(196, 30, 30, 0.00);
    }
    100% {
        outline: 2px solid rgba(196, 30, 30, 0.85);
        outline-offset: 2px;
        box-shadow: 0 0 0 0 rgba(196, 30, 30, 0.00);
    }
}

/*
 * Small "pin" label rendered next to the highlighted element when the
 * action carries `label`. Avoids overlapping the element itself by floating
 * to the top-right corner.
 */
.wilbur-highlight-pin {
    position: absolute;
    top: -1.4rem;
    right: -0.25rem;
    background: var(--wilbur-accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    box-shadow: 0 4px 12px rgba(20, 20, 30, 0.18);
    white-space: nowrap;
    pointer-events: none;
    z-index: 51;
    animation: wilbur-pin-pop 220ms cubic-bezier(0.2, 0.7, 0.3, 1.2);
}
@keyframes wilbur-pin-pop {
    from { opacity: 0; transform: translateY(4px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* --- Virtual cursor (AI pointer) ----------------------------------------
 *
 * Floating arrow that visibly travels between fields so the user sees
 * WHERE the AI is acting on the page. Position is set imperatively from
 * JS via CSS custom properties --wilbur-cursor-x / --wilbur-cursor-y and
 * the CSS transition smooths the travel. Click hint is a quick ring at
 * the cursor position. Hot-spot (the point that "lands" on the target)
 * sits at the cursor's top-left corner — matching native OS cursors.
 */
.wilbur-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    /*
     * Position is driven ENTIRELY by the CSS custom properties — fall back
     * to off-screen (-40,-40) only when the JS hasn't set them yet. Pulling
     * the transform out of the `.wilbur-cursor-visible` rule (where it used
     * to reset to off-screen on hide) means the cursor stays at its LAST
     * tracked coordinate when it fades out, instead of sliding to the
     * top-left corner over the 480ms transform transition. That fixes the
     * "cursor flies to top-left right before nav" visual artifact.
     */
    transform: translate3d(var(--wilbur-cursor-x, -40px), var(--wilbur-cursor-y, -40px), 0) scale(0.85);
    transform-origin: 4px 4px;
    pointer-events: none;
    z-index: 2147483646;
    opacity: 0;
    transition:
        transform 480ms cubic-bezier(0.25, 0.85, 0.35, 1),
        opacity 220ms ease-out;
    will-change: transform, opacity;
    filter: drop-shadow(0 2px 4px rgba(20, 20, 30, 0.30));
}
.wilbur-cursor::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wilbur-accent);
    /* Arrow shape, hot-spot at top-left (matches OS cursors) */
    clip-path: polygon(0 0, 0 80%, 25% 65%, 40% 100%, 55% 90%, 40% 55%, 70% 55%);
    border-radius: 1px;
}
.wilbur-cursor-visible {
    opacity: 1;
    transform: translate3d(var(--wilbur-cursor-x, 0px), var(--wilbur-cursor-y, 0px), 0) scale(1);
}
.wilbur-cursor-click {
    animation: wilbur-cursor-click-key 320ms ease-out;
}
@keyframes wilbur-cursor-click-key {
    0%   { filter: drop-shadow(0 2px 4px rgba(20, 20, 30, 0.30)); }
    50%  { filter: drop-shadow(0 0 12px var(--wilbur-accent)) brightness(1.15); }
    100% { filter: drop-shadow(0 2px 4px rgba(20, 20, 30, 0.30)); }
}
.wilbur-cursor-ripple {
    position: fixed;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--wilbur-accent);
    opacity: 0.55;
    pointer-events: none;
    z-index: 2147483645;
    transform: translate3d(var(--wilbur-ripple-x, 0px), var(--wilbur-ripple-y, 0px), 0) scale(0.4);
    animation: wilbur-ripple-key 480ms cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
}
@keyframes wilbur-ripple-key {
    0%   { opacity: 0.55; transform: translate3d(var(--wilbur-ripple-x, 0px), var(--wilbur-ripple-y, 0px), 0) scale(0.4); }
    100% { opacity: 0;    transform: translate3d(var(--wilbur-ripple-x, 0px), var(--wilbur-ripple-y, 0px), 0) scale(2.4); }
}

/* --- Active-field glow ---------------------------------------------------
 * Persistent halo on the field the AI is CURRENTLY driving (set when the
 * cursor lands, cleared when the field is committed). Separate from the
 * one-shot .wilbur-pulse so the user can track focus throughout typing.
 */
/* No `position` change here on purpose — adding `position: relative` would
 * create a new stacking context and can break absolutely-positioned
 * autocomplete dropdowns that were positioned against a higher ancestor.
 * Outline + box-shadow give the persistent glow without touching layout.
 */
.wilbur-active-field {
    outline: 2px solid var(--wilbur-accent) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(196, 30, 30, 0.12);
    transition: outline-offset 180ms ease-out, box-shadow 220ms ease-out;
}

/* --- Progress ribbon (top-right action chip) -----------------------------
 *
 * Floating chip shown DURING a multi-step action ("Wilbur is filling X of
 * Y"). Distinct from the in-chat "Filled N fields" pill — that one renders
 * inside the chatbot iframe AFTER the action completes; this ribbon is on
 * the host page and visible WHILE it runs, with a per-step status line
 * and a thin progress bar.
 */
.wilbur-progress-ribbon {
    position: fixed;
    top: 1rem;
    right: 1rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.75rem 1rem 0.85rem;
    background: #fff;
    color: #1d1d1f;
    border-radius: 0.75rem;
    box-shadow: 0 10px 32px rgba(20, 20, 30, 0.18), 0 2px 6px rgba(20, 20, 30, 0.08);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.3;
    z-index: 2147483640;
    pointer-events: none;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 220ms ease-out, transform 320ms cubic-bezier(0.22, 0.7, 0.3, 1);
    border-left: 3px solid var(--wilbur-accent);
}
.wilbur-progress-ribbon-visible {
    opacity: 1;
    transform: translateX(0);
}
.wilbur-progress-ribbon-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #1d1d1f;
}
.wilbur-progress-ribbon-title::before {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--wilbur-accent);
    animation: wilbur-progress-dot 1.2s ease-in-out infinite;
}
@keyframes wilbur-progress-dot {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}
.wilbur-progress-ribbon-step {
    margin-top: 0.25rem;
    color: #4a4a52;
    font-size: 1rem;
    font-weight: 400;
    min-height: 1.2em;
}
.wilbur-progress-ribbon-bar {
    margin-top: 0.6rem;
    height: 3px;
    background: rgba(196, 30, 30, 0.12);
    border-radius: 999px;
    overflow: hidden;
}
.wilbur-progress-ribbon-bar-fill {
    height: 100%;
    background: var(--wilbur-accent);
    border-radius: 999px;
    width: 0%;
    transition: width 320ms cubic-bezier(0.22, 0.7, 0.3, 1);
}
.wilbur-progress-ribbon-done {
    border-left-color: var(--wilbur-success);
}
.wilbur-progress-ribbon-done .wilbur-progress-ribbon-title::before {
    animation: none;
    background: var(--wilbur-success);
}
.wilbur-progress-ribbon-done .wilbur-progress-ribbon-bar-fill {
    background: var(--wilbur-success);
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .wilbur-pulse        { animation: none; box-shadow: 0 0 0 2px rgba(196, 30, 30, 0.35); }
    .wilbur-check        { transition: opacity 0ms; }
    .wilbur-check-visible { transform: translateY(-50%) scale(1); }
    .wilbur-highlight    { animation: none; outline: 2px solid var(--wilbur-accent); outline-offset: 2px; }
    .wilbur-highlight-pin { animation: none; }
    .wilbur-cursor       { transition: opacity 120ms ease-out; }
    .wilbur-cursor-click { animation: none; }
    .wilbur-cursor-ripple { animation: none; opacity: 0; }
    .wilbur-progress-ribbon { transition: opacity 120ms ease-out; transform: none; }
    .wilbur-progress-ribbon-visible { transform: none; }
    .wilbur-progress-ribbon-title::before { animation: none; }
    .wilbur-progress-ribbon-bar-fill { transition: width 120ms linear; }
}