import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef, } from "react";
import { useEditContext } from "../client-components";
import { Logo } from "../editor/ui/Icons";
import { X } from "lucide-react";
import { ActionButton } from "../components/ActionButton";
import { cn } from "../lib/utils";
import { createPortal } from "react-dom";
export const tourScrollIntoViewMarginClass = "scroll-mt-32 scroll-mb-32 md:scroll-mt-24 md:scroll-mb-24";
function tourEventPathIncludesSelector(e, selector) {
    const root = document.querySelector(selector);
    if (!root)
        return false;
    for (const n of e.composedPath()) {
        if (n instanceof Node && root.contains(n))
            return true;
    }
    return false;
}
/**
 * Blocks pointer/touch events outside the focus rectangle. The tour previously used a
 * full-screen div with clip-path to "punch a hole"; on iOS/WebKit, clip-path often does
 * not exclude the cutout from hit-testing, so scrolling inside the spotlight (e.g. content
 * tree) did not receive touch events. Four edge strips leave a true empty region.
 */
function TourPointerBlockers({ focusRect, passThrough, }) {
    if (passThrough)
        return null;
    const base = {
        position: "fixed",
        zIndex: 260,
        pointerEvents: "auto",
        backgroundColor: "transparent",
    };
    if (!focusRect) {
        return (_jsx("div", { className: "tour-pointer-blocker tour-pointer-blocker-full", style: { ...base, inset: 0 }, "aria-hidden": true }));
    }
    const vw = window.innerWidth;
    const vh = window.innerHeight;
    const { left, top, width, height } = focusRect;
    const right = left + width;
    const bottom = top + height;
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "tour-pointer-blocker tour-pointer-blocker-top", style: {
                    ...base,
                    left: 0,
                    top: 0,
                    width: vw,
                    height: Math.max(0, top),
                }, "aria-hidden": true }), _jsx("div", { className: "tour-pointer-blocker tour-pointer-blocker-bottom", style: {
                    ...base,
                    left: 0,
                    top: bottom,
                    width: vw,
                    height: Math.max(0, vh - bottom),
                }, "aria-hidden": true }), _jsx("div", { className: "tour-pointer-blocker tour-pointer-blocker-left", style: {
                    ...base,
                    left: 0,
                    top,
                    width: Math.max(0, left),
                    height,
                }, "aria-hidden": true }), _jsx("div", { className: "tour-pointer-blocker tour-pointer-blocker-right", style: {
                    ...base,
                    left: right,
                    top,
                    width: Math.max(0, vw - right),
                    height,
                }, "aria-hidden": true })] }));
}
export function Tour({ tourStopCallback, configuration, restoredFromUrl = false, }) {
    const [mounted, setMounted] = useState(false);
    useEffect(() => {
        setMounted(true);
    }, []);
    const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
    // Track if we should skip the first prepareAction (when restored from URL)
    const skipInitialPrepareActionRef = useRef(restoredFromUrl);
    const [currentStep, setCurrentStep] = useState("start-tour");
    const [show, setShow] = useState(true);
    const [bubbleVisible, setBubbleVisible] = useState(true);
    const editContext = useEditContext();
    const [focusRect, setFocusRect] = useState(null);
    const [pointToRect, setPointToRect] = useState(null);
    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
    const waitForElement = (selector, timeout = 0) => {
        if (selector.startsWith("iframe:")) {
            return waitForElementInIframe(selector.substring(7), timeout);
        }
        return new Promise((resolve) => {
            const startTime = Date.now();
            const checkForElement = () => {
                const element = document.querySelector(selector);
                if (element) {
                    let rect = element.getBoundingClientRect();
                    const extendFocus = step?.extendFocus || 10;
                    rect = new DOMRect(rect.left - extendFocus / 2, rect.top - extendFocus / 2, rect.width + extendFocus, rect.height + extendFocus);
                    resolve(rect);
                }
                else if (timeout > 0 && Date.now() - startTime >= timeout) {
                    resolve(undefined);
                }
                else {
                    requestAnimationFrame(checkForElement);
                }
            };
            checkForElement();
        });
    };
    const waitForElementInIframe = (selector, timeout = 0) => {
        return new Promise((resolve, reject) => {
            const startTime = Date.now();
            const checkForElement = () => {
                const iframe = document.querySelector("iframe.page-iframe");
                if (iframe && iframe.contentDocument) {
                    const element = iframe.contentDocument.querySelector(selector);
                    if (element) {
                        const elementRect = element.getBoundingClientRect();
                        const iframeRect = iframe.getBoundingClientRect();
                        let rect = new DOMRect(elementRect.left + iframeRect.left, elementRect.top + iframeRect.top, elementRect.width, elementRect.height);
                        const extendFocus = step?.extendFocus || 10;
                        rect = new DOMRect(rect.left - extendFocus / 2, rect.top - extendFocus / 2, rect.width + extendFocus, rect.height + extendFocus);
                        resolve(rect);
                    }
                    else if (timeout > 0 && Date.now() - startTime >= timeout) {
                        resolve(undefined);
                    }
                    else {
                        requestAnimationFrame(checkForElement);
                    }
                }
                else if (Date.now() - startTime >= timeout) {
                    reject(new Error(`Timeout waiting for iframe: ${selector}`));
                }
                else {
                    requestAnimationFrame(checkForElement);
                }
            };
            checkForElement();
        });
    };
    const waitForElementToDisappear = (selector) => {
        return new Promise((resolve) => {
            const checkForElement = () => {
                const element = document.querySelector(selector);
                if (!element) {
                    resolve();
                }
                else {
                    requestAnimationFrame(checkForElement);
                }
            };
            checkForElement();
        });
    };
    const waitForInput = (selector, minNumberOfCharacters = 1) => {
        return new Promise((resolve) => {
            const checkForInput = () => {
                const input = document.querySelector(selector);
                let inputValue = "";
                if (input?.getAttribute("contenteditable")) {
                    console.log("contenteditable", input.innerText);
                    inputValue = input.innerText;
                }
                else if (input &&
                    input.value.length >= minNumberOfCharacters) {
                    inputValue = input.value;
                }
                if (inputValue.length >= minNumberOfCharacters) {
                    console.log("input found", inputValue);
                    resolve();
                }
                else {
                    requestAnimationFrame(checkForInput);
                }
            };
            checkForInput();
        });
    };
    function setNativeValue(element, value) {
        const valueSetter = Object.getOwnPropertyDescriptor(element.constructor.prototype, "value")?.set;
        const prototype = Object.getPrototypeOf(element);
        const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, "value")?.set;
        if (valueSetter && valueSetter !== prototypeValueSetter) {
            prototypeValueSetter?.call(element, value);
        }
        else {
            valueSetter?.call(element, value);
        }
        const event = new Event("input", { bubbles: true });
        element.dispatchEvent(event);
    }
    async function simulateTyping(element, text, interval = 35) {
        let i = 0;
        while (i <= text.length) {
            const currentText = text.substring(0, i);
            setNativeValue(element, currentText);
            i++;
            const randomDelay = interval * (0.5 + Math.random());
            await delay(randomDelay);
        }
    }
    const findNextAvailableStep = (stepId) => {
        const step = tourSteps[stepId];
        if (!step)
            return null;
        // Check if this step should be skipped
        if (step.skipIf && step.skipIf(configuration)) {
            // If it should be skipped, try to find the next step
            if (step.nextStep) {
                return findNextAvailableStep(step.nextStep);
            }
            return null;
        }
        return stepId;
    };
    /**
     * Animated step change with fade out/in transition
     * Automatically skips steps that should be skipped based on configuration
     */
    const animatedStepChange = async (newStepId) => {
        setBubbleVisible(false); // Fade out
        await delay(200); // Wait for fade out
        // Find the next available step (skip steps that should be skipped)
        const availableStepId = findNextAvailableStep(newStepId);
        if (!availableStepId) {
            // No available step found, stop the tour
            stopTour();
            return;
        }
        setCurrentStep(availableStepId); // Change content
        await delay(50); // Small delay
        setBubbleVisible(true); // Fade in
    };
    /**
     * Stops the tour and resets the state.
     */
    const stopTour = () => {
        setCurrentStep("start-tour");
        setFocusRect(null);
        tourStopCallback();
    };
    const tours = editContext.configuration.tours;
    const tour = tours[editContext.configuration.activeTour];
    const tourSteps = tour.getSteps({
        editContext: editContext,
        nextStep: (stepId) => animatedStepChange(stepId),
        stopTour: () => tourStopCallback(),
        waitForElement,
        waitForElementToDisappear,
        setFocusRect,
        delay,
        waitForInput: waitForInput,
        simulateTyping,
    });
    const step = tourSteps[currentStep];
    // Effect to run each step - must be called unconditionally (React hooks rules)
    useEffect(() => {
        const runStep = async () => {
            const currentStepData = tourSteps[currentStep];
            if (!currentStepData)
                return;
            setShow(false);
            setFocusRect(null);
            await delay(500);
            // Check if this step should be skipped
            if (currentStepData.skipIf && currentStepData.skipIf(configuration)) {
                // Skip this step and go to the next one
                if (currentStepData.nextStep) {
                    animatedStepChange(currentStepData.nextStep);
                }
                else {
                    stopTour();
                }
                return;
            }
            console.log("step", currentStep, currentStepData);
            if (currentStepData.prepareAction) {
                // Skip prepareAction on initial render when tour was restored from URL
                // to prevent infinite navigation loops
                if (skipInitialPrepareActionRef.current) {
                    skipInitialPrepareActionRef.current = false;
                }
                else {
                    await currentStepData.prepareAction();
                }
            }
            if (currentStepData.focusElement) {
                const rect = await waitForElement(currentStepData.focusElement, 5000);
                if (!rect)
                    animatedStepChange("error");
                else
                    setFocusRect(rect);
            }
            setShow(true);
            if (currentStepData.waitForUserInput) {
                const nextStep = (await currentStepData.waitForUserInput()) ||
                    currentStepData.nextStep;
                if (nextStep) {
                    animatedStepChange(nextStep);
                }
                else
                    console.log("no next step defined for step", currentStep);
            }
            else {
                if (currentStepData.waitForElement) {
                    await waitForElement(currentStepData.waitForElement);
                    if (currentStepData.nextStep) {
                        animatedStepChange(currentStepData.nextStep);
                    }
                }
            }
        };
        runStep();
    }, [currentStep]);
    // Effect to calculate point-to rectangle - must be called unconditionally
    useEffect(() => {
        const getPointTo = async () => {
            const currentStepData = tourSteps[currentStep];
            if (!currentStepData) {
                setPointToRect(focusRect);
                return;
            }
            let newPointToRect = focusRect;
            if (currentStepData.getPointTo) {
                const pointTo = currentStepData.getPointTo();
                if (pointTo) {
                    newPointToRect = pointTo;
                }
            }
            if (currentStepData.pointToElement) {
                const rect = await waitForElement(currentStepData.pointToElement, 5000);
                if (rect) {
                    newPointToRect = rect;
                }
            }
            setPointToRect(newPointToRect);
        };
        getPointTo();
    }, [focusRect, currentStep]);
    // Set data attribute on body to indicate tour is active (for dialog detection)
    useEffect(() => {
        if (show) {
            document.body.setAttribute("data-tour-active", "true");
        }
        else {
            document.body.removeAttribute("data-tour-active");
        }
        return () => {
            document.body.removeAttribute("data-tour-active");
        };
    }, [show]);
    // Per-step lockScroll: block shell scroll; optional allowSelector for nested scroll (e.g. folder tree)
    useEffect(() => {
        if (!mounted)
            return;
        const stepData = tourSteps[currentStep];
        const lock = stepData?.lockScroll;
        if (!lock)
            return;
        const allowSelector = typeof lock === "object" && lock.allowSelector
            ? lock.allowSelector
            : null;
        const html = document.documentElement;
        const body = document.body;
        const prev = {
            htmlOverflow: html.style.overflow,
            bodyOverflow: body.style.overflow,
            htmlOverscroll: html.style.overscrollBehavior,
            bodyOverscroll: body.style.overscrollBehavior,
        };
        html.style.overflow = "hidden";
        body.style.overflow = "hidden";
        html.style.overscrollBehavior = "none";
        body.style.overscrollBehavior = "none";
        const onWheel = (e) => {
            if (allowSelector && tourEventPathIncludesSelector(e, allowSelector)) {
                return;
            }
            e.preventDefault();
        };
        const onTouchMove = (e) => {
            if (allowSelector && tourEventPathIncludesSelector(e, allowSelector)) {
                return;
            }
            e.preventDefault();
        };
        document.addEventListener("wheel", onWheel, {
            capture: true,
            passive: false,
        });
        document.addEventListener("touchmove", onTouchMove, {
            capture: true,
            passive: false,
        });
        return () => {
            html.style.overflow = prev.htmlOverflow;
            body.style.overflow = prev.bodyOverflow;
            html.style.overscrollBehavior = prev.htmlOverscroll;
            body.style.overscrollBehavior = prev.bodyOverscroll;
            document.removeEventListener("wheel", onWheel, { capture: true });
            document.removeEventListener("touchmove", onTouchMove, { capture: true });
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps -- tourSteps is recreated each render; lockScroll is read for currentStep only
    }, [mounted, currentStep]);
    // Closing the software keyboard changes the visual viewport; remeasure spotlight.
    useEffect(() => {
        if (!mounted || !show)
            return;
        const stepData = tourSteps[currentStep];
        const selector = stepData?.focusElement;
        if (!selector || selector.startsWith("iframe:"))
            return;
        const extendFocus = stepData.extendFocus ?? 10;
        const updateFocusRect = () => {
            const el = document.querySelector(selector);
            if (!el)
                return;
            let rect = el.getBoundingClientRect();
            rect = new DOMRect(rect.left - extendFocus / 2, rect.top - extendFocus / 2, rect.width + extendFocus, rect.height + extendFocus);
            setFocusRect(rect);
        };
        const viewportSnapshot = () => ({
            innerWidth: window.innerWidth,
            innerHeight: window.innerHeight,
            vvWidth: window.visualViewport?.width ?? null,
            vvHeight: window.visualViewport?.height ?? null,
        });
        let prevViewport = viewportSnapshot();
        const onViewportChange = () => {
            const next = viewportSnapshot();
            if (next.innerWidth === prevViewport.innerWidth &&
                next.innerHeight === prevViewport.innerHeight &&
                next.vvWidth === prevViewport.vvWidth &&
                next.vvHeight === prevViewport.vvHeight) {
                return;
            }
            prevViewport = next;
            requestAnimationFrame(updateFocusRect);
        };
        const vv = window.visualViewport;
        const focusElement = document.querySelector(selector);
        if (focusElement) {
            focusElement.addEventListener("focusin", onViewportChange);
        }
        vv?.addEventListener("resize", onViewportChange);
        window.addEventListener("resize", onViewportChange);
        window.addEventListener("orientationchange", onViewportChange);
        return () => {
            vv?.removeEventListener("resize", onViewportChange);
            window.removeEventListener("resize", onViewportChange);
            window.removeEventListener("orientationchange", onViewportChange);
            if (focusElement) {
                focusElement.removeEventListener("focusin", onViewportChange);
            }
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps -- tourSteps is recreated each render; focusElement/extendFocus read for currentStep only
    }, [mounted, show, currentStep]);
    // Early return after all hooks have been called
    if (!step || !mounted) {
        return null;
    }
    let bubblePosition = step.bubblePosition || "right";
    if (isMobile) {
        if (pointToRect) {
            const elementCenterInVisual = pointToRect.top + pointToRect.height / 2;
            bubblePosition =
                elementCenterInVisual > window.innerHeight / 2 ? "top" : "bottom";
        }
        else {
            bubblePosition = "bottom";
        }
    }
    const bubbleStyle = {};
    let boxStyle = {
        position: "fixed",
        left: "50%",
        top: "50%",
        transform: "translate(-50%, -50%)",
    };
    let arrowStyle = {};
    if (pointToRect) {
        if (bubblePosition === "bottom") {
            boxStyle = {
                position: isMobile ? "fixed" : "absolute",
                left: isMobile ? "50%" : pointToRect.left + pointToRect.width / 2,
                top: isMobile
                    ? pointToRect.top + pointToRect.height + 10
                    : pointToRect.top + pointToRect.height,
                transform: "translate(-50%, 0)",
            };
        }
        if (bubblePosition === "top") {
            boxStyle = {
                position: "fixed",
                left: "50%",
                top: pointToRect.top - 10,
                transform: "translate(-50%, -100%)",
            };
        }
        if (!isMobile && bubblePosition === "right") {
            const anchorCenter = step.bubbleVerticalAnchor === "center";
            boxStyle = {
                position: "absolute",
                left: pointToRect.left + pointToRect.width,
                top: anchorCenter
                    ? pointToRect.top + pointToRect.height / 2
                    : pointToRect.top - 10,
                alignItems: "flex-start",
                ...(anchorCenter ? { transform: "translateY(-50%)" } : {}),
            };
            arrowStyle = {
                marginLeft: "-20px",
            };
            bubbleStyle.marginLeft = "80px";
            bubbleStyle.marginTop = anchorCenter ? "0px" : "-20px";
        }
        if (!isMobile && bubblePosition === "left") {
            boxStyle = {
                position: "absolute",
                right: window.innerWidth - pointToRect.left,
                top: pointToRect.top + pointToRect.height / 2,
                alignItems: "flex-end",
            };
            arrowStyle = {
                marginRight: "-20px",
            };
        }
        if (!isMobile && bubblePosition === "top-right") {
            boxStyle = {
                position: "absolute",
                left: pointToRect.left + pointToRect.width,
                bottom: window.innerHeight - pointToRect.top,
                transform: "translate(-50%, 0)",
                flexDirection: "column-reverse",
            };
            arrowStyle = {
                transform: "rotate(180deg)",
            };
            if (step.flipArrow) {
                arrowStyle = {
                    transform: "scaleX(-1)",
                };
            }
        }
        if (!isMobile && bubblePosition === "bottom-right") {
            boxStyle = {
                position: "absolute",
                left: pointToRect.left + pointToRect.width,
                top: pointToRect.top + pointToRect.height,
                transform: "translate(0, 0)",
                flexDirection: "row",
                alignItems: "flex-start",
            };
            arrowStyle = {
                transform: "rotate(270deg)",
                marginLeft: "20px",
            };
            if (step.flipArrow) {
                arrowStyle.transform = "rotate(270deg) scaleX(-1)";
            }
        }
        if (!isMobile && bubblePosition === "top-left") {
            boxStyle = {
                position: "absolute",
                right: window.innerWidth - pointToRect.left + 200,
                bottom: window.innerHeight - pointToRect.top,
                transform: "translate(50%, 0)",
                flexDirection: "column-reverse",
                alignItems: "flex-end",
            };
            arrowStyle = {
                transform: "rotate(120deg)",
            };
            if (step.flipArrow) {
                arrowStyle.transform = "rotate(90deg) scaleX(-1)";
            }
        }
    }
    // Viewport correction: ensure bubble stays within screen bounds
    const getCorrectedBoxStyle = (style) => {
        if (!pointToRect)
            return style;
        const correctedStyle = { ...style };
        const margin = 10;
        if (isMobile) {
            const bubbleHeight = 150;
            const vTop = margin;
            const vBottom = window.innerHeight - margin;
            if (typeof correctedStyle.top === "number") {
                if (correctedStyle.top < vTop) {
                    correctedStyle.top = vTop;
                }
                if (correctedStyle.top + bubbleHeight > vBottom) {
                    correctedStyle.top = Math.max(vTop, vBottom - bubbleHeight);
                }
            }
            return correctedStyle;
        }
        // For desktop: check if bubble would be outside viewport
        if (correctedStyle.position === "absolute") {
            // If bubble would be too far down, move it up
            if (typeof correctedStyle.top === "number") {
                const maxTop = window.innerHeight - 250;
                if (correctedStyle.top > maxTop) {
                    correctedStyle.top = Math.max(margin, maxTop);
                }
            }
            // If bubble would be too far right, move it left
            if (typeof correctedStyle.left === "number") {
                const bubbleWidth = 500;
                const maxLeft = window.innerWidth - bubbleWidth - margin;
                if (correctedStyle.left > maxLeft) {
                    correctedStyle.left = Math.max(margin, maxLeft);
                }
            }
            // Handle right positioning
            if (typeof correctedStyle.right === "number") {
                const bubbleWidth = 500;
                if (correctedStyle.right > window.innerWidth - bubbleWidth - margin) {
                    correctedStyle.right = margin;
                }
            }
            // Handle bottom positioning
            if (typeof correctedStyle.bottom === "number") {
                const maxBottom = window.innerHeight - 250;
                if (correctedStyle.bottom > maxBottom) {
                    delete correctedStyle.bottom;
                    correctedStyle.top = window.innerHeight - 200 - margin;
                }
            }
        }
        return correctedStyle;
    };
    // Apply viewport correction
    boxStyle = getCorrectedBoxStyle(boxStyle);
    const arrowRotation = bubblePosition === "right" ? "-rotate-90" : "";
    const passThrough = [
        "drag-component",
        "drag-component-placeholder",
        "drop-component",
        "drop-component-placeholder",
    ].includes(currentStep);
    // Spotlight style with rounded corners using box-shadow technique (visual only)
    const spotlightStyle = focusRect
        ? {
            position: "fixed",
            left: focusRect.left,
            top: focusRect.top,
            width: focusRect.width,
            height: focusRect.height,
            borderRadius: "12px",
            boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.3)",
            pointerEvents: "none",
            transition: "all 0.2s ease-in-out",
            zIndex: 270,
        }
        : null;
    if (!show) {
        return createPortal(_jsxs(_Fragment, { children: [_jsx(TourPointerBlockers, { focusRect: focusRect, passThrough: passThrough }), spotlightStyle && (_jsx("div", { className: "spotlight", style: spotlightStyle }))] }), document.body);
    }
    return createPortal(_jsxs(_Fragment, { children: [_jsx(TourPointerBlockers, { focusRect: focusRect, passThrough: passThrough }), spotlightStyle && (_jsx("div", { className: "spotlight", style: spotlightStyle })), _jsxs("div", { style: { ...boxStyle, pointerEvents: passThrough ? "none" : "auto" }, className: `fade-in z-270 flex flex-col items-center text-gray-800 transition-opacity duration-200 ${bubbleVisible ? "opacity-100" : "opacity-0"}`, children: [!isMobile && focusRect && (_jsx("div", { className: "pointer-events-none", children: _jsx("svg", { width: "100px", height: "100px", viewBox: "0 -7.89 113.08 113.08", xmlns: "http://www.w3.org/2000/svg", className: cn("text-theme-secondary pointer-events-none drop-shadow-[0_2px_8px_rgba(150,80,251,0.35)]", arrowRotation), style: arrowStyle, children: _jsx("path", { fill: "currentColor", stroke: "none", d: "M20.1871 175C15.7485 172.891 13.0008 172.469 12.1553 170.992C8.98489 165.508 5.39173 160.024 3.70083 153.908C-1.37187 137.666 -0.737781 121.214 2.64402 104.762C8.35081 76.7092 21.0325 51.8201 36.8847 28.1966C38.5756 25.6655 40.0552 23.1344 41.7461 20.3924C41.7461 20.1814 41.5347 19.7596 41.112 19.1268C36.462 20.3923 31.6007 21.6579 26.9507 22.7125C24.4144 23.1344 21.4552 23.1344 18.9189 22.2907C17.4394 21.8688 15.3258 19.5486 15.3258 18.0722C15.3258 16.1739 16.8053 13.8537 18.0735 12.1663C19.1303 11.1117 21.0326 10.9008 22.7235 10.4789C35.4052 7.31508 48.087 3.72935 60.9801 0.776411C71.9709 -1.75468 75.564 1.83105 74.9299 12.5882C74.2959 23.7672 74.0845 34.9462 73.6618 45.9142C73.4505 49.289 72.8164 52.8747 72.3936 56.6714C63.5164 52.6638 63.5164 52.6638 60.346 18.494C47.0301 33.2588 38.1529 49.289 29.9098 65.7411C21.6666 82.1932 16.1712 99.489 13.2121 117.839C10.2531 136.823 13.8462 154.751 20.1871 175Z" }) }) })), _jsx("style", { children: `
                        @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');                        
                        .handwritten {
                            font-family: 'Caveat', cursive;
                        }
                        .fade-background {
                            background: radial-gradient(circle, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0) 90%);
                        }
                        .fade-in {
                            animation: fadeIn 0.5s ease-in-out;
                        }
                        @keyframes fadeIn {
                            from { opacity: 0; }
                            to { opacity: 1; }
                        }
                    ` }), _jsx("div", { className: `border-theme-secondary relative flex rounded-lg border bg-gray-50 shadow-2xl ${isMobile
                            ? "w-[95vw] flex-col items-center gap-3"
                            : "items-stretch justify-center gap-6"}`, style: bubbleStyle, "data-testid": "tour-bubble", children: _jsxs("div", { className: `flex flex-col gap-3 ${isMobile
                                ? "items-center justify-center p-3"
                                : "items-end justify-between p-6"}`, children: [_jsxs("div", { className: "flex w-full items-start gap-4", children: [_jsxs("div", { className: `flex min-w-0 flex-1 flex-col gap-2 text-gray-800 ${isMobile
                                                ? "max-w-[80vw] text-center text-lg"
                                                : "max-w-[450px] text-left text-2xl"}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Logo, { className: "w-8 shrink-0" }), _jsx("div", { className: "text-xl font-bold", children: step.title })] }), _jsx("div", { className: "text-xs text-gray-500", children: step.description })] }), _jsx("button", { className: "text-2xs hover:text-theme-secondary shrink-0 cursor-pointer font-bold", onClick: stopTour, type: "button", title: "Close tour", "aria-label": "Close tour", children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "flex gap-2", children: step.buttons &&
                                        step.buttons.map((button, index) => (_jsx(ActionButton, { onClick: button.onClick, className: button.className, "data-testid": `tour-button-${index}`, children: button.label }, index))) })] }) })] })] }), document.body);
}
//# sourceMappingURL=Tour.js.map