/*
 * Wilbur Website Helper — chatbot popup redesign (desktop).
 *
 * Replaces the legacy full-screen modal with a corner-anchored panel on
 * desktop (≥ 768 px) so the user can see the page underneath — critical UX
 * for the prefill animation (user must observe the form fill happening).
 *
 * Mobile (< 768 px) keeps the original full-screen overlay, which is the
 * right pattern on small viewports.
 *
 * Layered as an override stylesheet so the existing chatbot.min.css stays
 * untouched. Loaded after chatbot.min.css from functions.php.
 *
 * See docs/WILBUR_WEBSITE_HELPER_PLAN.md §L (Chatbot layout + visual redesign).
 */

@media (min-width: 768px) {
    /*
     * Overlay becomes transparent + click-through on desktop. The user can
     * still scroll/click the page behind the panel while chatting. The
     * `.chatbot-container` below re-enables pointer events inside itself.
     */
    .chatbot-overlay {
        background: transparent;
        pointer-events: none;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0;
    }

    .chatbot-overlay .chatbot-container {
        pointer-events: auto;
        width: 460px;
        /*
         * Tall side-rail layout on desktop. Previously capped at 780px with a
         * 4rem bottom margin (reserving footprint for the floating bubble,
         * which is actually hidden when the panel is open). That left ~240px
         * of dead space above the panel on a 1080p viewport.
         *
         * New: fill almost the full viewport height with equal 1rem breathing
         * room on top and bottom, with a 900px ceiling so the panel doesn't
         * stretch absurdly on ultra-tall monitors. On medium-tall viewports
         * (700–900px) the panel grows to nearly fill the available space.
         */
        height: min(900px, calc(100vh - 2rem));
        max-width: calc(100vw - 1.5rem);
        margin: 1rem 1rem 1rem 0;
        padding: 0;
        border-radius: 1.125rem;
        box-shadow:
            0 24px 60px rgba(20, 20, 30, 0.22),
            0 8px 20px rgba(20, 20, 30, 0.10);
        border: 1px solid rgba(0, 0, 0, 0.06);
        background: #fff;
        overflow: hidden; /* clip the iframe corners to the rounded panel */
        animation: wilbur-panel-enter 220ms cubic-bezier(0.2, 0.7, 0.1, 1) both;
    }

    /*
     * The iframe inside the panel must fill it completely — no scrollbar
     * gap, no padding. Without these the iframe defaults to a body-sized
     * box and leaves an empty strip at the bottom of the panel.
     */
    .chatbot-overlay .chatbot-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

    /* Desktop-specific position adjustments live in the parent media query;
     * the visual polish (size, colour, hover) is shared with mobile and
     * lives outside this block so both viewports get the refined X button. */

    /*
     * When the popup is open we hide the floating "Chat with Wilbur AI"
     * bubble — the panel itself signals the chat is active. Body class
     * `wilbur-popup-open` is toggled by chatbot.js.
     */
    body.wilbur-popup-open .chatbot-button {
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
        transition: opacity 160ms ease-out, transform 160ms ease-out;
    }

    /*
     * Bubble polish — slightly larger touch target, gentle hover lift.
     * Keep the existing colours (var(--default-red-color)) — those come
     * from the theme's design tokens. min-height enforces WCAG 2.5.5
     * 44 px floor on mobile + desktop alike.
     */
    .chatbot-button {
        min-height: 2.75rem;
        padding: 0.55rem 1.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow:
            0 10px 24px rgba(196, 30, 30, 0.30),
            0 3px 8px rgba(196, 30, 30, 0.15);
        transition: transform 160ms ease-out, box-shadow 160ms ease-out;
    }
    .chatbot-button:hover,
    .chatbot-button:focus-visible {
        transform: translateY(-2px);
        box-shadow:
            0 14px 30px rgba(196, 30, 30, 0.36),
            0 4px 12px rgba(196, 30, 30, 0.20);
        outline: none;
    }
}

/*
 * X close button — refined at all viewports. The legacy chatbot.css set
 * `font-size: 3rem` which read as a giant black glyph after the rest of
 * the chrome was polished. This shared style applies on desktop AND mobile;
 * the desktop block above only nudges its position to clear the rounded
 * panel corner. Mobile uses the same visual treatment with a slightly
 * tighter offset.
 */
/* WCAG 2.5.5 — 44×44 px minimum touch target. */
.chatbot-close,
.chatbot-minimize {
    position: absolute;
    top: 0.5rem;
    font-size: 1.5rem;
    line-height: 1;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: #6b7480;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    cursor: pointer;
    transition: color 140ms ease-out, background-color 140ms ease-out, transform 200ms ease-out;
}
.chatbot-close { right: 0.5rem; }
/* Sit the minimize button to the LEFT of the close so the visual flow reads
 * `[ − ] [ × ]`. Both shrink the panel; the `−` reads as "I'll be back".
 * Offset accounts for the wider 2.75rem close button. */
.chatbot-minimize { right: 3.5rem; }

.chatbot-close:hover,
.chatbot-close:focus-visible {
    color: #1a1f29;
    background: #ECEFF3;
    transform: rotate(90deg);
    outline: none;
}
.chatbot-minimize:hover,
.chatbot-minimize:focus-visible {
    color: #1a1f29;
    background: #ECEFF3;
    transform: translateY(2px);
    outline: none;
}

@media (min-width: 768px) {
    /* Desktop popup — nudge the X clear of the rounded corner. */
    .chatbot-close {
        top: 0.65rem;
        right: 0.75rem;
    }
    .chatbot-minimize {
        top: 0.65rem;
        right: 3.75rem;
    }
}

/*
 * Mobile (< 768px) — the popup is a full-screen modal. Lock body scroll
 * declaratively via CSS whenever `wilbur-popup-open` is on the body, so
 * the lock auto-applies on viewport resize (devtools mobile preview,
 * rotation, true mobile open). The legacy JS toggle of `.overflow-y-hidden`
 * only fires on open/close clicks and would miss a desktop→mobile flip
 * mid-session — that was the bug where body scroll behind the popup wasn't
 * blocked after switching to mobile preview. Properties mirror the existing
 * `.overflow-y-hidden` utility class so the visual behaviour is unchanged.
 */
@media (max-width: 767px) {
    body.wilbur-popup-open {
        overflow: hidden;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 0;
    }

    /* Reclaim the 1.5rem top padding the legacy chatbot.css reserved for
     * the giant 3rem close glyph. With the refined X now ~2.25rem we only
     * need a thin top stripe. The iframe header has its own padding-right
     * (2.75rem on .header-status) to keep the Online pill clear of the X. */
    .chatbot-container {
        padding-top: 0;
    }
}

/*
 * Reduced motion — skip the slide-in animation entirely.
 */
@media (prefers-reduced-motion: reduce) {
    .chatbot-overlay .chatbot-container {
        animation: none;
    }
    .chatbot-button {
        transition: none;
    }
}

@keyframes wilbur-panel-enter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/*
 * Panel exit — mirror of wilbur-panel-enter, played in reverse when
 * chatbot.js fades the panel down before setting display:none. Pair of
 * the entry/exit animations replaces the previous hard `display:none`
 * cut and gives the prefill flow a smoother "Wilbur stepped back so
 * you can watch the page" beat. See chatbot.js::toggleChatbotPopup.
 */
.chatbot-overlay .chatbot-container.is-hiding {
    animation: wilbur-panel-exit 200ms cubic-bezier(0.4, 0, 0.85, 0.4) both;
}
@keyframes wilbur-panel-exit {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
}

/*
 * Navigation loading overlay.
 *
 * Bridges the white-flash moment between Wilbur clicking Search and the
 * results page rendering. The overlay is injected by chatbot.js when
 * `sessionStorage.wilbur_nav_pending` is set (planted by the controller
 * right before the Search submit, and again on the new page's load),
 * and faded out after `window.load` fires.
 *
 * Brand-coloured radial gradient + centered avatar pulse + caption,
 * tuned to feel like a moment of intent (Wilbur is doing something
 * for you) rather than a generic spinner.
 */
.wilbur-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.98) 0%, rgba(247, 240, 240, 0.98) 60%, rgba(238, 226, 226, 0.98) 100%);
    color: #1a1f29;
    opacity: 0;
    pointer-events: auto;
    animation: wilbur-nav-overlay-in 180ms ease-out 0ms both;
}
.wilbur-nav-overlay.is-leaving {
    animation: wilbur-nav-overlay-out 260ms cubic-bezier(0.4, 0, 0.85, 0.4) both;
}
.wilbur-nav-overlay__avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--default-red-color, #c41e1e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: 0.02em;
    box-shadow:
        0 12px 30px rgba(196, 30, 30, 0.30),
        0 4px 12px rgba(196, 30, 30, 0.18),
        0 0 0 0 rgba(196, 30, 30, 0.45);
    animation: wilbur-nav-overlay-pulse 1500ms ease-in-out infinite;
}
.wilbur-nav-overlay__caption {
    font-size: 1rem;
    font-weight: 500;
    color: #1a1f29;
    text-align: center;
    max-width: 22rem;
    line-height: 1.4;
}
.wilbur-nav-overlay__caption strong {
    color: var(--default-red-color, #c41e1e);
    font-weight: 700;
}
@keyframes wilbur-nav-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes wilbur-nav-overlay-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes wilbur-nav-overlay-pulse {
    0%, 100% {
        box-shadow:
            0 12px 30px rgba(196, 30, 30, 0.30),
            0 4px 12px rgba(196, 30, 30, 0.18),
            0 0 0 0 rgba(196, 30, 30, 0.45);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 14px 34px rgba(196, 30, 30, 0.38),
            0 6px 16px rgba(196, 30, 30, 0.22),
            0 0 0 14px rgba(196, 30, 30, 0);
        transform: scale(1.04);
    }
}
@media (prefers-reduced-motion: reduce) {
    .wilbur-nav-overlay {
        animation: none;
        opacity: 1;
    }
    .wilbur-nav-overlay.is-leaving {
        animation: none;
        opacity: 0;
        transition: opacity 200ms linear;
    }
    .wilbur-nav-overlay__avatar {
        animation: none;
    }
    .chatbot-overlay .chatbot-container.is-hiding {
        animation: none;
        opacity: 0;
    }
}

/*
 * Subtle pulse for proactive prompts. Triggered by adding
 * `body.wilbur-bubble-pulse` (used later by the proactive intervention
 * subsystem to nudge users when they're stuck). Idempotent: not present
 * by default.
 */
@media (min-width: 768px) {
    body.wilbur-bubble-pulse .chatbot-button {
        animation: wilbur-bubble-pulse 1800ms ease-in-out infinite;
    }
    @keyframes wilbur-bubble-pulse {
        0%, 100% {
            box-shadow:
                0 10px 24px rgba(196, 30, 30, 0.30),
                0 3px 8px rgba(196, 30, 30, 0.15),
                0 0 0 0 rgba(196, 30, 30, 0.42);
        }
        50% {
            box-shadow:
                0 10px 24px rgba(196, 30, 30, 0.30),
                0 3px 8px rgba(196, 30, 30, 0.15),
                0 0 0 12px rgba(196, 30, 30, 0);
        }
    }
}

/* ---------------------------------------------------------------------------
 * Proactive "peek" bubble — anchored to the launcher when the chat is
 * collapsed. Surfaces the proactive prompt copy + a CTA so the user can get
 * help WITHOUT opening the panel first (the in-panel card is hidden while
 * minimised). chatbot.js::showWilburPeek sets fixed right/bottom offsets from
 * the launcher's rect; this file owns the look + enter/leave animation.
 * Mobile + desktop. Shows only while collapsed, so it never fights the open
 * panel (z 10000) — sits above the launcher (z 1001) and page chrome.
 * --------------------------------------------------------------------------- */
.wilbur-peek {
    position: fixed;
    right: 1.5rem;            /* JS overrides from the launcher rect; fallback only */
    bottom: 6rem;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    max-width: min(20rem, calc(100vw - 2rem));
    animation: wilbur-peek-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wilbur-peek.is-leaving {
    animation: wilbur-peek-out 200ms ease-in both;
    pointer-events: none;
}
.wilbur-peek__body {
    /* The whole card is a button → open chat + start helping */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    margin: 0;
    cursor: pointer;
    text-align: left;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: #ffffff;
    color: #1a1f29;
    border-radius: 1rem;
    box-shadow:
        0 12px 30px rgba(26, 31, 41, 0.18),
        0 4px 10px rgba(26, 31, 41, 0.10);
    transition: box-shadow 160ms ease, transform 160ms ease;
}
.wilbur-peek__body:hover {
    box-shadow:
        0 16px 38px rgba(26, 31, 41, 0.22),
        0 6px 14px rgba(26, 31, 41, 0.12);
    transform: translateY(-1px);
}
.wilbur-peek__body:focus-visible {
    outline: 2px solid var(--default-red-color, #c41e1e);
    outline-offset: 2px;
}
.wilbur-peek__body::after {
    /* Tail pointing down-right toward the launcher */
    content: "";
    position: absolute;
    right: 1.25rem;
    bottom: -0.4rem;
    width: 0.9rem;
    height: 0.9rem;
    background: #ffffff;
    transform: rotate(45deg);
    border-radius: 0 0 0.2rem 0;
    box-shadow: 3px 3px 8px rgba(26, 31, 41, 0.08);
}
.wilbur-peek__avatar {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--default-red-color, #c41e1e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    margin-top: 0.0625rem;
}
.wilbur-peek__textwrap {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}
.wilbur-peek__text {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 500;
}
.wilbur-peek__cta {
    align-self: flex-start;
    font-size: 1rem;
    font-weight: 700;
    color: var(--default-red-color, #c41e1e);
    display: inline-flex;
    align-items: center;
}
.wilbur-peek__cta::after {
    content: "\2192";        /* → */
    margin-left: 0.25rem;
    transition: transform 160ms ease;
}
.wilbur-peek__body:hover .wilbur-peek__cta::after {
    transform: translateX(2px);
}
.wilbur-peek__dismiss {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    cursor: pointer;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 31, 41, 0.06);
    color: #1a1f29;
    padding: 0;
    transition: background 160ms ease, color 160ms ease;
}
.wilbur-peek__dismiss:hover {
    background: rgba(196, 30, 30, 0.12);
    color: var(--default-red-color, #c41e1e);
}
.wilbur-peek__dismiss:focus-visible {
    outline: 2px solid var(--default-red-color, #c41e1e);
    outline-offset: 2px;
}
@keyframes wilbur-peek-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wilbur-peek-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(8px) scale(0.97); }
}
@media (max-width: 480px) {
    .wilbur-peek { max-width: calc(100vw - 1.5rem); }
}
@media (prefers-reduced-motion: reduce) {
    .wilbur-peek { animation: none; }
    .wilbur-peek.is-leaving { animation: none; opacity: 0; }
    .wilbur-peek__body,
    .wilbur-peek__cta::after { transition: none; }
}

/*
 * Acting state — the launcher pulses while the AI is performing an action
 * on the parent page (form fill / highlight). Applied to the chatbot-button
 * via `.is-acting` class while `wilbur:request-collapse` is in flight.
 * Removed when the ack returns and the popup is restored.
 *
 * Two-ring pulse (slightly stronger than the proactive nudge) so the user
 * understands "Wilbur is actively working — wait a moment", not "Wilbur
 * wants your attention". The `::after` pseudo carries the spinning ring
 * so it composites without disturbing the bubble's own shadow.
 *
 * Mobile + desktop alike (no media query gate), with reduced-motion respect.
 */
.chatbot-button.is-acting {
    /* `position` stays whatever the launcher already uses (fixed bubble on
     * desktop, absolute on mobile dock); don't override. The pulse alone
     * conveys "Wilbur is actively working" — the previous spinning-ring
     * ::after looked broken on pill-shaped buttons because the ring's
     * fixed corner radius didn't match the button curve and the rotating
     * transparent-top gap created a "border-walking" visual glitch. */
    animation: wilbur-acting-pulse 1500ms ease-in-out infinite;
}
@keyframes wilbur-acting-pulse {
    0%, 100% {
        box-shadow:
            0 10px 24px rgba(196, 30, 30, 0.30),
            0 3px 8px rgba(196, 30, 30, 0.15),
            0 0 0 0 rgba(196, 30, 30, 0.42);
    }
    50% {
        box-shadow:
            0 12px 28px rgba(196, 30, 30, 0.38),
            0 4px 10px rgba(196, 30, 30, 0.22),
            0 0 0 14px rgba(196, 30, 30, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .chatbot-button.is-acting {
        animation: none;
    }
}