@keak/sdk 1.0.7 → 1.0.9

package/dist/toolbar.js

@@ -281,9 +281,116 @@ function getSourceConfidence(sourceInfo) {
     }
     return 'low';
 }
+/**
+ * Check if an element is part of a dynamically generated list (.map(), .forEach(), etc.)
+ *
+ * Detection strategy:
+ * 1. Check if multiple siblings share the same source location (primary method)
+ * 2. This indicates they're generated from the same template (likely a map)
+ * 3. Also check if the element is a descendant of an element that's in a map
+ *
+ * @param element The DOM element to check
+ * @returns Object with isInMap (boolean) and reason (string) if detected
+ */
+function isElementInDynamicList(element) {
+    // First, check if the element itself is in a map
+    const directCheck = checkElementForMapPattern(element);
+    if (directCheck.isInMap) {
+        return directCheck;
+    }
+    // If not, check if any ancestor is in a map
+    let current = element.parentElement;
+    let depth = 0;
+    const maxDepth = 10; // Limit traversal depth to avoid performance issues
+    while (current && depth < maxDepth) {
+        const ancestorCheck = checkElementForMapPattern(current);
+        if (ancestorCheck.isInMap) {
+            return {
+                isInMap: true,
+                reason: `This element is a child of a dynamically generated list item. ${ancestorCheck.reason}`,
+                siblingCount: ancestorCheck.siblingCount
+            };
+        }
+        current = current.parentElement;
+        depth++;
+    }
+    return { isInMap: false };
+}
+/**
+ * Helper function to check if a specific element is part of a map pattern
+ */
+function checkElementForMapPattern(element) {
+    const parent = element.parentElement;
+    if (!parent) {
+        return { isInMap: false };
+    }
+    // Get all sibling elements (including the element itself)
+    const siblings = Array.from(parent.children).filter((sibling) => sibling instanceof HTMLElement);
+    // Need at least 2 siblings to detect a pattern
+    if (siblings.length < 2) {
+        return { isInMap: false };
+    }
+    // Get source location for the target element
+    const elementSource = getReactFiberSource(element);
+    // If we can't get source for the element, try data-keak-src attribute
+    let elementSourceKey = null;
+    if (elementSource) {
+        elementSourceKey = `${elementSource.fileName}:${elementSource.lineNumber}`;
+    }
+    else {
+        const keakSrc = element.getAttribute('data-keak-src');
+        if (keakSrc) {
+            // Format is "file:line:column", we use file:line as key
+            const parts = keakSrc.split(':');
+            if (parts.length >= 2) {
+                const fileName = parts.slice(0, -2).join(':'); // Handle Windows paths
+                const lineNumber = parts[parts.length - 2];
+                elementSourceKey = `${fileName}:${lineNumber}`;
+            }
+        }
+    }
+    // If we don't have source info, we can't detect map patterns reliably
+    if (!elementSourceKey) {
+        return { isInMap: false };
+    }
+    // Check how many siblings share the same source location
+    let matchingSiblings = 0;
+    for (const sibling of siblings) {
+        const siblingSource = getReactFiberSource(sibling);
+        let siblingSourceKey = null;
+        if (siblingSource) {
+            siblingSourceKey = `${siblingSource.fileName}:${siblingSource.lineNumber}`;
+        }
+        else {
+            const keakSrc = sibling.getAttribute('data-keak-src');
+            if (keakSrc) {
+                const parts = keakSrc.split(':');
+                if (parts.length >= 2) {
+                    const fileName = parts.slice(0, -2).join(':');
+                    const lineNumber = parts[parts.length - 2];
+                    siblingSourceKey = `${fileName}:${lineNumber}`;
+                }
+            }
+        }
+        if (siblingSourceKey === elementSourceKey) {
+            matchingSiblings++;
+        }
+    }
+    // If 2+ siblings share the same source location, it's likely a map/forEach
+    // We use >= 2 because the element itself counts as one
+    if (matchingSiblings >= 2) {
+        return {
+            isInMap: true,
+            reason: `Multiple elements (${matchingSiblings}) share the same source location, indicating they're generated from a .map() or similar dynamic list pattern`,
+            siblingCount: matchingSiblings
+        };
+    }
+    return { isInMap: false };
+}
 
 const ElementSelector = ({ onElementSelected, onCancel, }) => {
     const [hoveredElement, setHoveredElement] = useState(null);
+    const [mapWarning, setMapWarning] = useState({ show: false, message: "" });
     const highlightRef = useRef(null);
     useEffect(() => {
         const handleMouseMove = (e) => {
@@ -308,9 +415,27 @@ const ElementSelector = ({ onElementSelected, onCancel, }) => {
                 target.closest(".keak-toolbar") ||
                 target.closest(".keak-selector-highlight") ||
                 target.closest(".keak-selector-tooltip") ||
-                target.closest(".keak-selector-instructions")) {
+                target.closest(".keak-selector-instructions") ||
+                target.closest(".keak-map-warning")) {
                 return;
             }
+            // Check if element is inside a dynamic list (.map(), .forEach(), etc.)
+            const mapCheck = isElementInDynamicList(target);
+            if (mapCheck.isInMap) {
+                // Show warning and prevent selection
+                setMapWarning({
+                    show: true,
+                    message: mapCheck.reason || "Element is part of a dynamically generated list",
+                    siblingCount: mapCheck.siblingCount
+                });
+                // Auto-hide warning after 5 seconds
+                setTimeout(() => {
+                    setMapWarning({ show: false, message: "" });
+                }, 5000);
+                return; // Prevent selection
+            }
+            // Clear any existing warning
+            setMapWarning({ show: false, message: "" });
             onElementSelected(target);
         };
         const handleKeyDown = (e) => {
@@ -473,7 +598,65 @@ const ElementSelector = ({ onElementSelected, onCancel, }) => {
         return { selector, text, source, impact };
     };
     const elementInfo = hoveredElement ? getElementInfo(hoveredElement) : null;
-    return (jsxs(Fragment, { children: [jsx("div", { ref: highlightRef, className: "keak-selector-highlight" }), hoveredElement && elementInfo && (jsxs("div", { className: "keak-selector-tooltip", style: {
+    return (jsxs(Fragment, { children: [jsx("div", { ref: highlightRef, className: "keak-selector-highlight" }), mapWarning.show && (jsx("div", { className: "keak-map-warning", style: {
+                    position: "fixed",
+                    top: "140px",
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    maxWidth: "500px",
+                    background: "hsl(0 84.2% 60.2%)",
+                    border: "1px solid hsl(0 72.2% 50.6%)",
+                    borderRadius: "8px",
+                    padding: "16px 20px",
+                    boxShadow: "0 10px 30px 0 rgba(0, 0, 0, 0.3)",
+                    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                    zIndex: 1000000,
+                    color: "white",
+                    animation: "slideDown 0.3s ease-out",
+                }, children: jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsx("div", { style: {
+                                fontSize: "20px",
+                                lineHeight: "1",
+                                marginTop: "2px",
+                            }, children: "\u26A0\uFE0F" }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: {
+                                        fontSize: "15px",
+                                        fontWeight: 600,
+                                        marginBottom: "8px",
+                                    }, children: "Cannot select element from dynamic list" }), jsx("div", { style: {
+                                        fontSize: "13px",
+                                        lineHeight: "1.5",
+                                        opacity: 0.95,
+                                        marginBottom: "12px",
+                                    }, children: "This element is part of a dynamically generated list (.map(), .forEach(), etc.). Selecting individual items isn't supported because:" }), jsxs("ul", { style: {
+                                        fontSize: "13px",
+                                        lineHeight: "1.6",
+                                        margin: "0 0 12px 0",
+                                        paddingLeft: "20px",
+                                        opacity: 0.95,
+                                        listStyle: "none",
+                                    }, children: [jsxs("li", { style: { position: "relative", paddingLeft: "16px" }, children: [jsx("span", { style: { position: "absolute", left: 0 }, children: "-" }), "The data might come from props or a database"] }), jsxs("li", { style: { position: "relative", paddingLeft: "16px" }, children: [jsx("span", { style: { position: "absolute", left: 0 }, children: "-" }), "Variants would affect all items, not just one"] })] }), jsx("div", { style: {
+                                        fontSize: "13px",
+                                        fontWeight: 600,
+                                        marginTop: "12px",
+                                        paddingTop: "12px",
+                                        borderTop: "1px solid rgba(255, 255, 255, 0.2)",
+                                    }, children: "\uD83D\uDCA1 Alternatives:" }), jsxs("ul", { style: {
+                                        fontSize: "13px",
+                                        lineHeight: "1.6",
+                                        margin: "8px 0 0 0",
+                                        paddingLeft: "20px",
+                                        opacity: 0.95,
+                                        listStyle: "none",
+                                    }, children: [jsxs("li", { style: { position: "relative", paddingLeft: "16px" }, children: [jsx("span", { style: { position: "absolute", left: 0 }, children: "-" }), "Select the parent container to test the entire list"] }), jsxs("li", { style: { position: "relative", paddingLeft: "16px" }, children: [jsx("span", { style: { position: "absolute", left: 0 }, children: "-" }), "Extract list items into a separate component and wrap it in Experiment/Variant"] })] })] }), jsx("button", { onClick: () => setMapWarning({ show: false, message: "" }), style: {
+                                background: "transparent",
+                                border: "none",
+                                color: "white",
+                                cursor: "pointer",
+                                fontSize: "18px",
+                                lineHeight: "1",
+                                padding: "0",
+                                opacity: 0.8,
+                                transition: "opacity 0.2s",
+                            }, onMouseEnter: (e) => (e.currentTarget.style.opacity = "1"), onMouseLeave: (e) => (e.currentTarget.style.opacity = "0.8"), children: "\u00D7" })] }) })), hoveredElement && elementInfo && (jsxs("div", { className: "keak-selector-tooltip", style: {
                     position: "fixed",
                     bottom: `${window.innerHeight -
                         hoveredElement.getBoundingClientRect().top +
@@ -1018,7 +1201,7 @@ function styleInject(css, ref) {
 var css_248z$1 = "@import \"./toolbar/styles/toolbar.css\";.keak-toolbar,.keak-toolbar :not(.keak-optimize-btn *){color:#000!important;font-weight:600!important}.keak-action-btn.active,.keak-action-btn.active *,.keak-optimize-btn,.keak-optimize-btn *{color:#fff!important}";
 styleInject(css_248z$1);
 
-var css_248z = ":root{--keak-background:17 23 34;--keak-foreground:243 246 252;--keak-card:17 23 34;--keak-card-foreground:243 246 252;--keak-popover:17 23 34;--keak-popover-foreground:243 246 252;--keak-primary:88 152 237;--keak-primary-foreground:17 23 34;--keak-secondary:47 61 90;--keak-secondary-foreground:243 246 252;--keak-muted:47 61 90;--keak-muted-foreground:168 179 202;--keak-accent:88 152 237;--keak-accent-foreground:17 23 34;--keak-destructive:239 68 68;--keak-destructive-foreground:255 255 255;--keak-border:47 61 90;--keak-input:17 23 34;--keak-ring:88 152 237;--keak-radius:12px;--glass-bg:rgba(17,23,34,.95);--glass-border:rgba(88,152,237,.15);--glass-shadow:0 8px 32px rgba(0,0,0,.3);--glass-backdrop:blur(20px);--keak-chart-1:88 152 237;--keak-chart-2:16 185 129;--keak-chart-3:245 158 11;--keak-chart-4:239 68 68;--keak-chart-5:139 92 246}*{scrollbar-color:#2f3d5a #111722;scrollbar-width:thin}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:#111722;border-radius:3px}::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px;-webkit-transition:background .2s;transition:background .2s}::-webkit-scrollbar-thumb:hover{background:#374151}::-webkit-scrollbar-corner{background:#111722}.keak-toolbar-panel-content::-webkit-scrollbar{width:6px}.keak-toolbar-panel-content::-webkit-scrollbar-track{background:transparent}.keak-toolbar-panel-content::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-toolbar-panel-content::-webkit-scrollbar-thumb:hover{background:#374151}.keak-toolbar{backdrop-filter:var(--glass-backdrop);-webkit-backdrop-filter:var(--glass-backdrop);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--keak-radius);box-shadow:var(--glass-shadow);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;font-size:14px;line-height:1.5;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;-moz-user-select:none;user-select:none}.keak-toolbar:before{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(147,197,253,.05) 50%,rgba(59,130,246,.1));bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:-1}.keak-toolbar *{box-sizing:border-box}.keak-toolbar.dragging{backdrop-filter:blur(25px);box-shadow:0 12px 40px rgba(59,130,246,.25),0 0 0 1px rgba(59,130,246,.3);transform:scale(1.02);transition:none}.keak-toolbar.dragging .keak-toolbar-header{cursor:grabbing!important}.keak-toolbar.minimized{border-radius:26px;box-shadow:0 4px 20px rgba(59,130,246,.2);height:52px;width:52px}.keak-toolbar-toggle{align-items:center;background:transparent;border:none;border-radius:26px;cursor:pointer;display:flex;height:52px;justify-content:center;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:52px}.keak-toolbar-toggle:before{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(147,197,253,.1));border-radius:inherit;content:\"\";inset:0;opacity:0;position:absolute;transition:opacity .3s ease}.keak-toolbar-toggle:hover:before{opacity:1}.keak-toolbar-toggle:hover{box-shadow:0 6px 24px rgba(59,130,246,.3);transform:scale(1.08)}.keak-toolbar-collapsed{align-items:center;background:var(--glass-bg);border-radius:26px;box-shadow:var(--glass-shadow);display:flex;gap:12px;min-width:140px;padding:8px 16px}.keak-toolbar-collapsed .keak-toolbar-toggle{align-items:center;display:flex;flex:1;gap:8px;justify-content:flex-start;padding:0 12px}.keak-toolbar-label{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600}.keak-toolbar-minimize{align-items:center;background:transparent;border:none;border-radius:10px;color:hsl(var(--keak-muted-foreground));cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s ease;width:36px}.keak-toolbar-minimize:hover{background:hsl(var(--keak-accent));color:hsl(var(--keak-accent-foreground));transform:scale(1.05)}.keak-toolbar.expanded{display:flex;flex-direction:column;max-height:650px;width:400px}.keak-toolbar-expanded{background:var(--glass-bg);border-radius:var(--keak-radius);display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}.keak-toolbar-header{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border-bottom:1px solid hsl(var(--keak-border));cursor:grab;display:flex;padding:16px 20px;position:relative;transition:all .2s ease;z-index:2}.keak-toolbar-header:before{background:linear-gradient(90deg,rgba(59,130,246,.05),transparent 50%,rgba(59,130,246,.05));bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.keak-toolbar-header:hover{background:hsla(0,0%,100%,.98)}.keak-toolbar-header:active{cursor:grabbing}.keak-toolbar-brand{align-items:center;display:flex;flex:1;gap:10px;pointer-events:none}.keak-toolbar-title{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,hsl(var(--keak-primary)),#0ea5e9);-webkit-background-clip:text;background-clip:text;color:hsl(var(--keak-foreground));font-size:18px;font-weight:700}.keak-model-selector{margin:0 16px;pointer-events:auto;position:relative}.keak-simple-dropdown{display:inline-block;position:relative}.keak-dropdown-trigger{align-items:center;background:hsla(0,0%,100%,.9);border:1px solid hsl(var(--keak-border));border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.05);color:hsl(var(--keak-foreground));cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:8px;min-width:120px;padding:8px 14px;position:relative;transition:all .2s ease}.keak-dropdown-trigger:hover{background:rgba(59,130,246,.05);border-color:hsl(var(--keak-primary));box-shadow:0 4px 12px rgba(59,130,246,.15);transform:translateY(-1px)}.keak-dropdown-arrow{height:12px;margin-left:auto;transition:transform .2s ease;width:12px}.keak-dropdown-trigger[data-open=true] .keak-dropdown-arrow{transform:rotate(180deg)}.keak-dropdown-content{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.98);border:1px solid hsl(var(--keak-border));border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.1);left:0;margin-top:4px;min-width:140px;overflow:hidden;position:absolute;right:0;top:100%;z-index:999999999}.keak-dropdown-item{align-items:center;color:hsl(var(--keak-foreground));cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:8px;padding:10px 14px;transition:all .2s ease}.keak-dropdown-item:hover{background:rgba(59,130,246,.08)}.keak-dropdown-item[data-selected=true]{background:rgba(59,130,246,.1);color:hsl(var(--keak-primary))}.keak-model-dropdown{-webkit-appearance:none;-moz-appearance:none;appearance:none;backdrop-filter:blur(8px);background:rgba(51,65,85,.9);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;border:1px solid var(--glass-border);border-radius:10px;color:hsl(var(--keak-foreground));cursor:pointer;font-size:13px;font-weight:500;min-width:120px;padding:8px 32px 8px 14px;transition:all .2s ease}.keak-model-dropdown:hover{background:rgba(59,130,246,.15);border-color:hsl(var(--keak-primary));box-shadow:0 4px 12px rgba(59,130,246,.25);transform:translateY(-1px)}.keak-model-dropdown:focus{border-color:hsl(var(--keak-primary));box-shadow:0 0 0 3px rgba(59,130,246,.2);outline:none}.keak-toolbar-controls{display:flex;gap:6px;pointer-events:auto}.keak-toolbar-close{align-items:center;background:transparent;border:none;border-radius:8px;color:hsl(var(--keak-muted-foreground));cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s ease;width:32px}.keak-toolbar-close:hover{background:rgba(239,68,68,.1);color:hsl(var(--keak-destructive));transform:scale(1.05)}.keak-toolbar-actions{backdrop-filter:blur(8px);background:rgba(248,250,252,.8);border-bottom:1px solid hsl(var(--keak-border));display:flex;gap:10px;padding:16px 20px}.keak-toolbar,.keak-toolbar *{color:#000!important;font-weight:600}.keak-action-btn span,.keak-action-btn.active,.keak-action-btn.active *,.keak-dropdown-item,.keak-dropdown-trigger,.keak-optimize-btn,.keak-optimize-btn *,.keak-status-selected,.keak-toolbar-title{color:#fff!important}.keak-toolbar .keak-element-text,.keak-toolbar .keak-form-label,.keak-toolbar .keak-metrics-title,.keak-toolbar .keak-scan-summary-title,.keak-toolbar .keak-scan-title,.keak-toolbar .keak-suggestion-text,.keak-toolbar .keak-suggestions-header,.keak-toolbar .keak-variation-title,.keak-toolbar h1,.keak-toolbar h2,.keak-toolbar h3{color:#f3f6fc;font-weight:700}.keak-action-btn{align-items:center;backdrop-filter:blur(8px);background:hsla(0,0%,100%,.9);border:1px solid hsl(var(--keak-border));border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);color:hsl(var(--keak-foreground));cursor:pointer;display:flex;flex:1;flex-direction:column;font-size:12px;gap:6px;overflow:hidden;padding:12px 16px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.keak-action-btn:before{background:linear-gradient(90deg,transparent,rgba(59,130,246,.1),transparent);content:\"\";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.keak-action-btn:hover:before{left:100%}.keak-action-btn:hover{background:rgba(59,130,246,.05);border-color:hsl(var(--keak-primary));box-shadow:0 4px 20px rgba(59,130,246,.15);transform:translateY(-2px)}.keak-action-btn.active{background:linear-gradient(135deg,hsl(var(--keak-primary)),#0ea5e9);border-color:hsl(var(--keak-primary));box-shadow:0 6px 20px rgba(59,130,246,.4);color:#fff}.keak-action-btn.active:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent)}.keak-action-btn span{color:hsl(var(--keak-foreground));font-weight:700;letter-spacing:.025em}.keak-toolbar-content{backdrop-filter:blur(8px);background:rgba(248,250,252,.3);flex:1;overflow-y:auto;position:relative}.keak-toolbar-content::-webkit-scrollbar-thumb{background:#2f3d5a}.keak-toolbar-content::-webkit-scrollbar-thumb:hover{background:#374151}.keak-toolbar-content:before{background:linear-gradient(180deg,rgba(59,130,246,.02),transparent 50%);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.keak-toolbar-status{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border-top:1px solid hsl(var(--keak-border));color:hsl(var(--keak-foreground));display:flex;font-size:12px;font-weight:600;justify-content:space-between;padding:12px 20px}.keak-status-selected code{background:rgba(59,130,246,.1);border-radius:6px;color:hsl(var(--keak-foreground));font-family:JetBrains Mono,SF Mono,monospace;font-weight:700;padding:3px 8px}.keak-toolbar-status kbd{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);border-radius:6px;color:hsl(var(--keak-foreground));font-family:inherit;font-size:11px;font-weight:600;padding:3px 8px}.keak-toolbar-content::-webkit-scrollbar{width:6px}.keak-toolbar-content::-webkit-scrollbar-track{background:transparent}.keak-toolbar-content::-webkit-scrollbar-thumb{background:rgba(59,130,246,.3);border-radius:3px;-webkit-transition:background .2s ease;transition:background .2s ease}.keak-toolbar-content::-webkit-scrollbar-thumb:hover{background:rgba(59,130,246,.5)}@keyframes keak-slide-up{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes keak-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes keak-scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.keak-toolbar.expanded{animation:keak-slide-up .4s cubic-bezier(.34,1.56,.64,1)}@media (max-width:480px){.keak-toolbar.expanded{max-width:400px;width:calc(100vw - 32px)}}.keak-selected-highlight{background:rgba(37,99,235,.08);border:2px solid #2563eb;border-radius:8px;box-shadow:0 0 0 1px rgba(37,99,235,.1),0 4px 12px rgba(37,99,235,.15),0 2px 4px rgba(37,99,235,.1);pointer-events:none;position:absolute;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:999998}.keak-selected-highlight.generating{animation:keak-shimmer 2s ease-in-out infinite;background:linear-gradient(90deg,rgba(37,99,235,.08),rgba(37,99,235,.2) 50%,rgba(37,99,235,.08));background-size:200% 100%;border-color:#2563eb;box-shadow:0 0 0 1px rgba(37,99,235,.2),0 4px 16px rgba(37,99,235,.25),0 2px 6px rgba(37,99,235,.15)}@keyframes keak-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.keak-loading-spinner{animation:keak-spin 1s linear infinite;border:2px solid rgba(59,130,246,.2);border-radius:50%;border-top:2px solid hsl(var(--keak-primary));height:20px;width:20px}@keyframes keak-spin{to{transform:rotate(1turn)}}.keak-success-toast{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 25px rgba(16,185,129,.3)}.keak-error-toast,.keak-success-toast{backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2);border-radius:12px;color:#fff;font-weight:500;padding:12px 20px}.keak-error-toast{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 8px 25px rgba(239,68,68,.3)}.keak-selector-highlight{background:rgba(88,152,237,.15);border:2px solid #6b7280;border-radius:4px;box-shadow:0 0 0 2px rgba(88,152,237,.25);display:none;pointer-events:none;position:absolute;transition:all .1s ease-out;z-index:999999}.keak-selector-tooltip{backdrop-filter:blur(12px);background:rgba(15,23,42,.9);border:1px solid hsla(0,0%,100%,.1);border-radius:8px;box-shadow:0 8px 25px rgba(0,0,0,.3);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;padding:8px 14px;pointer-events:none;position:fixed;white-space:nowrap;z-index:999999}.keak-selector-tooltip code{background:rgba(59,130,246,.2);border-radius:4px;color:#60a5fa;font-family:JetBrains Mono,SF Mono,monospace;font-weight:500;padding:2px 6px}.keak-selector-instructions{align-items:center;animation:keak-fade-in .3s ease-out;background:rgba(15,23,42,.9);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.4);color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;gap:16px;left:50%;padding:16px 24px;pointer-events:none;position:fixed;top:24px;transform:translateX(-50%);z-index:999999}.keak-selector-instructions-icon{align-items:center;background:hsl(var(--keak-primary));border-radius:50%;box-shadow:0 4px 12px rgba(59,130,246,.4);display:flex;height:28px;justify-content:center;width:28px}.keak-selector-instructions kbd{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:6px;font-size:12px;font-weight:500;margin:0 4px;padding:4px 8px}body.keak-selecting,body.keak-selecting *{cursor:crosshair!important}body.keak-selecting .keak-selector-highlight,body.keak-selecting .keak-selector-instructions,body.keak-selecting .keak-selector-tooltip,body.keak-selecting .keak-toolbar{cursor:default!important}.keak-prompt-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-prompt-header{margin-bottom:12px}.keak-prompt-title{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600;margin-bottom:8px}.keak-element-preview{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:4px;color:#a8b3ca;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;overflow:hidden;padding:8px 12px;text-overflow:ellipsis;white-space:nowrap}.keak-main-input{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.keak-input-label{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600;margin-bottom:8px}.keak-main-textarea{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:4px;color:#f3f6fc;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;min-height:100px;padding:16px;resize:vertical;transition:all .2s;width:100%}.keak-main-textarea:focus{background:hsla(0,0%,100%,.08);border-color:#374151;box-shadow:0 4px 10px 0 rgba(43,59,91,.12);outline:none}.keak-main-textarea::-moz-placeholder{color:#6b7280;opacity:1}.keak-main-textarea::placeholder{color:#6b7280;opacity:1}.keak-main-textarea:-webkit-autofill,.keak-main-textarea:-webkit-autofill:focus,.keak-main-textarea:-webkit-autofill:hover{-webkit-text-fill-color:#f3f6fc;-webkit-box-shadow:inset 0 0 0 1000px hsla(0,0%,100%,.05);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.keak-context-section{display:flex;flex-direction:column;gap:6px}.keak-context-input{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:4px;color:#f3f6fc;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;padding:12px 16px;transition:all .2s;width:100%}.keak-context-input:focus{background:hsla(0,0%,100%,.08);border-color:#374151;box-shadow:0 4px 10px 0 rgba(43,59,91,.12);outline:none}.keak-context-input::-moz-placeholder{color:#6b7280;opacity:1}.keak-context-input::placeholder{color:#6b7280;opacity:1}.keak-context-input:-webkit-autofill,.keak-context-input:-webkit-autofill:focus,.keak-context-input:-webkit-autofill:hover{-webkit-text-fill-color:#f3f6fc;-webkit-box-shadow:inset 0 0 0 1000px hsla(0,0%,100%,.05);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.keak-optimize-section{align-items:center;display:flex;flex-direction:column;gap:8px;margin-top:20px}.keak-optimize-btn{align-items:center;background:linear-gradient(135deg,#3b82f6,#6366f1);border:none;border-radius:12px;box-shadow:0 4px 20px rgba(59,130,246,.3);color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:800;gap:10px;justify-content:center;overflow:hidden;padding:16px 24px;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.1);transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.keak-optimize-btn span{color:#fff}.keak-optimize-btn:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:\"\";height:100%;left:-100%;position:absolute;top:0;transition:left .6s ease;width:100%}.keak-optimize-btn:hover:before{left:100%}.keak-optimize-btn:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#4f46e5);box-shadow:0 8px 30px rgba(59,130,246,.4);transform:translateY(-2px)}.keak-optimize-btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.5;transform:none}.keak-optimize-btn:disabled:before{display:none}.keak-optimize-hint{color:#f3f6fc!important;font-size:11px;opacity:.7;text-align:center}.keak-optimize-hint kbd{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:4px;font-size:10px;font-weight:500;margin:0 2px;padding:2px 6px}.keak-suggestions{flex:1;overflow-y:auto;padding-top:16px}.keak-suggestions::-webkit-scrollbar{width:6px}.keak-suggestions::-webkit-scrollbar-track{background:transparent}.keak-suggestions::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-suggestions::-webkit-scrollbar-thumb:hover{background:#374151}.keak-loading{align-items:center;color:hsl(var(--keak-muted-foreground));display:flex;flex-direction:column;gap:12px;justify-content:center;padding:40px}.keak-suggestion-card{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:8px;box-shadow:0 4px 10px 0 rgba(43,59,91,.12);cursor:pointer;margin-bottom:12px;overflow:hidden;padding:16px;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.keak-suggestion-card:before{background:linear-gradient(135deg,rgba(88,152,237,.05),rgba(88,152,237,.08));bottom:0;content:\"\";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease}.keak-suggestion-card:hover{background:hsla(0,0%,100%,.08);border-color:#374151;box-shadow:0 4px 10px 0 rgba(43,59,91,.18);transform:translateY(-2px)}.keak-suggestion-card:hover:before{opacity:1}.keak-suggestion-text{color:#f3f6fc;font-size:14px;font-weight:600;line-height:1.4;margin-bottom:8px;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.05);z-index:1}.keak-suggestion-meta{align-items:center;color:#a8b3ca;display:flex;font-size:12px;font-weight:600;gap:8px;position:relative;z-index:1}.keak-suggestion-card:hover .keak-suggestion-action{opacity:1}.keak-suggestion-content-wrapper{align-items:flex-start;display:flex;gap:12px;width:100%}.keak-suggestion-badge-wrapper{flex-shrink:0}.keak-suggestion-variant-badge{align-items:center;background:rgba(88,152,237,.2);border:1px solid rgba(88,152,237,.3);border-radius:8px;box-shadow:none;color:#5898ed;display:flex;font-size:12px;font-weight:700;height:32px;justify-content:center;width:32px}.keak-suggestion-text-wrapper{flex:1;min-width:0}.keak-suggestion-action{color:#5898ed;flex-shrink:0;opacity:.6;transition:opacity .2s}.keak-variation-history{margin-bottom:12px;max-height:200px;overflow-y:auto}.keak-variation-history::-webkit-scrollbar{width:6px}.keak-variation-history::-webkit-scrollbar-track{background:transparent}.keak-variation-history::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-variation-history::-webkit-scrollbar-thumb:hover{background:#374151}.keak-variation-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:8px}.keak-variation-title{color:#f3f6fc;flex-shrink:0;font-size:13px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.05);white-space:nowrap}.keak-variation-actions{display:flex;flex-shrink:0;gap:8px}.keak-variation-item{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:8px;cursor:pointer;font-size:11px;margin-bottom:6px;padding:10px;transition:all .2s}.keak-variation-item:hover{background:hsla(0,0%,100%,.08);border-color:#374151}.keak-variation-item.selected{background:rgba(88,152,237,.15);border-color:#5898ed}.keak-variation-meta{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}.keak-variation-model{background:rgba(88,152,237,.2);border-radius:4px;color:#5898ed;font-size:9px;font-weight:600;padding:2px 6px;text-transform:uppercase}.keak-variation-time{color:#a8b3ca;font-size:9px}.keak-variation-prompt{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;color:#f3f6fc;display:-webkit-box;font-size:10px;line-height:1.3;margin-bottom:4px;overflow:hidden}.keak-variation-count{color:#a8b3ca;font-size:9px}.keak-save-changes-section{background:rgba(88,152,237,.1);border:1px solid rgba(88,152,237,.3);border-radius:8px;margin-top:16px;padding:16px;text-align:center}.keak-save-message{color:#f3f6fc;font-size:13px;font-weight:500;margin-bottom:12px}.keak-save-changes-btn{align-items:center;background:linear-gradient(-46.0266deg,rgba(20,10,86,0) 20.511%,rgba(20,10,86,.2) 87.062%),linear-gradient(181.531deg,rgba(255,254,254,.12) 8.1705%,rgba(2,4,13,.2) 91.829%),#5898ed;border:1px solid rgba(55,65,81,.5);border-radius:4px;box-shadow:0 8px 10px 0 rgba(1,1,42,.25),inset 2px 2px 4px 0 rgba(5,5,80,.4),inset -4px -4px 10px 0 hsla(0,0%,100%,.25),inset 4px 4px 10px 0 rgba(25,18,67,.4);color:#000!important;cursor:pointer;display:flex;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:600;gap:8px;justify-content:center;padding:12px 16px;transition:all .2s;width:100%}.keak-save-changes-btn *{color:#000!important}.keak-save-changes-btn:hover{box-shadow:0 8px 10px 0 rgba(1,1,42,.25),0 0 15px rgba(88,152,237,.4),inset 2px 2px 4px 0 rgba(5,5,80,.4),inset -4px -4px 10px 0 hsla(0,0%,100%,.25),inset 4px 4px 10px 0 rgba(25,18,67,.4);transform:scale(1.01)}.keak-page-scan-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-scan-header{margin-bottom:16px}.keak-scan-title{align-items:center;color:#f3f6fc;display:flex;font-size:14px;font-weight:600;justify-content:space-between;margin-bottom:8px}.keak-scan-stats{color:#a8b3ca;display:flex;font-size:12px;gap:16px;margin-bottom:8px}.keak-scan-actions{display:flex;gap:8px;margin-bottom:8px}.keak-scan-summary{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);border-radius:12px;font-size:12px;margin-bottom:16px;padding:16px}.keak-scan-summary-title{color:hsl(var(--keak-foreground));font-size:13px;font-weight:600;margin-bottom:6px}.keak-scan-summary-text{color:hsl(var(--keak-muted-foreground));line-height:1.4}.keak-scan-results{flex:1;overflow-y:auto}.keak-scan-results::-webkit-scrollbar{width:6px}.keak-scan-results::-webkit-scrollbar-track{background:transparent}.keak-scan-results::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-scan-results::-webkit-scrollbar-thumb:hover{background:#374151}.keak-scan-loading{align-items:center;color:hsl(var(--keak-muted-foreground));display:flex;flex-direction:column;justify-content:center;padding:40px}.keak-scan-spinner{animation:keak-spin 1s linear infinite;border:3px solid hsl(var(--keak-border));border-radius:50%;border-top:3px solid #10b981;height:32px;margin-bottom:16px;width:32px}.keak-scan-progress-container{align-items:center;display:flex;flex-direction:column;gap:16px;max-width:300px;width:100%}.keak-scan-progress-bar{height:8px;width:100%}.keak-scan-progress-text{font-size:11px}.keak-no-results,.keak-scan-progress-text{color:hsl(var(--keak-muted-foreground));text-align:center}.keak-no-results{padding:40px}.keak-element-card{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:12px;margin-bottom:12px;overflow:hidden;transition:all .2s}.keak-element-card:hover{border-color:#10b981;box-shadow:0 4px 12px rgba(16,185,129,.1);transform:translateY(-1px)}.keak-element-header{align-items:center;background:hsl(var(--keak-muted));border-bottom:1px solid hsl(var(--keak-border));cursor:pointer;display:flex;justify-content:space-between;padding:12px 16px;transition:all .2s}.keak-element-header:hover{background:rgba(59,130,246,.05)}.keak-element-info{align-items:center;display:flex;flex:1;gap:10px}.keak-element-tag{background:rgba(88,152,237,.2);border-radius:4px;color:#5898ed;font-size:10px;font-weight:600;padding:3px 8px;text-transform:uppercase}.keak-element-text{color:#f3f6fc;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.keak-navigate-icon{color:hsl(var(--keak-muted-foreground));font-size:12px;margin-left:8px}.keak-priority-badge{border-radius:6px;color:#fff;font-size:10px;font-weight:600;padding:3px 8px}.keak-suggestions-list{padding:16px}.keak-suggestions-header{align-items:center;color:hsl(var(--keak-muted-foreground));display:flex;font-size:11px;font-weight:500;gap:6px;margin-bottom:12px}.keak-suggestion-item{background:hsl(var(--keak-input));border:1px solid hsl(var(--keak-border));border-radius:8px;cursor:pointer;font-size:12px;line-height:1.4;margin-bottom:8px;padding:12px;transition:all .2s}.keak-suggestion-item:hover{background:rgba(59,130,246,.05);border-color:#10b981;transform:translateX(2px)}.keak-suggestion-item:last-child{margin-bottom:0}.keak-suggestion-item.recommended{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(99,102,241,.1));border-color:rgba(59,130,246,.3)}.keak-suggestion-content{align-items:flex-start;display:flex;gap:10px}.keak-suggestion-badge{border-radius:6px;color:#fff;flex-shrink:0;font-size:10px;font-weight:700;padding:3px 8px}.keak-suggestion-badge.recommended{background:#3b82f6}.keak-suggestion-badge.default{background:#6b7280}.keak-suggestion-text-content{flex:1;line-height:1.4}.keak-suggestion-recommended-label{color:#3b82f6;font-size:10px;font-weight:500;margin-top:4px}.keak-model-badge{align-items:center;background:rgba(59,130,246,.1);border-radius:6px;color:hsl(var(--keak-primary));display:inline-flex;font-size:10px;font-weight:600;padding:2px 8px;text-transform:uppercase}.line-clamp-2{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.space-y-2>*+*{margin-top:.5rem}.max-h-48{max-height:12rem}.keak-experiment-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-experiment-form{display:flex;flex-direction:column;gap:12px}.keak-form-group{display:flex;flex-direction:column;gap:6px}.keak-form-label{color:hsl(var(--keak-muted-foreground));font-size:12px;font-weight:500}.keak-form-input{background:hsl(var(--keak-input));border:1px solid hsl(var(--keak-border));border-radius:8px;color:hsl(var(--keak-foreground));font-size:13px;padding:12px 16px;transition:all .2s}.keak-form-input:focus{border-color:hsl(var(--keak-primary));box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.keak-variants-section{flex:1;overflow-y:auto}.keak-variants-section::-webkit-scrollbar{width:6px}.keak-variants-section::-webkit-scrollbar-track{background:transparent}.keak-variants-section::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-variants-section::-webkit-scrollbar-thumb:hover{background:#374151}.keak-variant-card{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:8px;margin-bottom:8px;padding:12px}.keak-variant-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.keak-variant-name{color:hsl(var(--keak-foreground));font-size:13px;font-weight:500}.keak-variant-content{background:hsl(var(--keak-input));border:1px solid hsl(var(--keak-border));border-radius:8px;color:hsl(var(--keak-foreground));font-family:JetBrains Mono,SF Mono,monospace;font-size:12px;min-height:60px;padding:12px;resize:vertical;width:100%}.keak-experiment-actions{display:flex;gap:8px;margin-top:16px}.keak-experiment-list{flex:1;overflow-y:auto}.keak-experiment-list::-webkit-scrollbar{width:6px}.keak-experiment-list::-webkit-scrollbar-track{background:transparent}.keak-experiment-list::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-experiment-list::-webkit-scrollbar-thumb:hover{background:#374151}.keak-experiment-item{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:8px;cursor:pointer;margin-bottom:8px;padding:12px;transition:all .2s}.keak-experiment-item:hover{background:rgba(59,130,246,.02);border-color:hsl(var(--keak-primary))}.keak-experiment-name{color:hsl(var(--keak-foreground));font-weight:500}.keak-experiment-url{align-items:center;display:flex;font-size:10px;gap:4px;margin-top:4px;opacity:.7}.keak-experiment-url,.keak-no-element{color:hsl(var(--keak-muted-foreground))}.keak-no-element{padding:20px;text-align:center}.keak-metrics-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-metrics-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.keak-metrics-title{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600}.keak-time-selector{background:hsl(var(--keak-muted));border-radius:6px;display:flex;gap:4px;padding:2px}.keak-time-option{background:transparent;border:none;border-radius:4px;color:hsl(var(--keak-muted-foreground));cursor:pointer;font-size:11px;font-weight:500;padding:4px 8px;transition:all .2s}.keak-time-option.active{background:hsl(var(--keak-primary));color:#fff}.keak-metrics-list{flex:1;overflow-y:auto}.keak-metrics-list::-webkit-scrollbar{width:6px}.keak-metrics-list::-webkit-scrollbar-track{background:transparent}.keak-metrics-list::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-metrics-list::-webkit-scrollbar-thumb:hover{background:#374151}.keak-metric-card{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:8px;cursor:pointer;margin-bottom:8px;padding:12px;transition:all .2s}.keak-metric-card:hover{background:rgba(59,130,246,.02);border-color:hsl(var(--keak-primary))}.keak-metric-card.selected{background:rgba(59,130,246,.05);border-color:hsl(var(--keak-primary))}.keak-empty-state{color:hsl(var(--keak-muted-foreground));padding:40px 20px;text-align:center}.keak-multi-element-toggle{background:hsla(0,0%,100%,.95);border:1px solid hsl(var(--keak-border));border-radius:12px;margin-bottom:16px;padding:20px}.keak-toggle-header{margin-bottom:16px;text-align:center}.keak-toggle-title{color:hsl(var(--keak-foreground));font-size:16px;font-weight:700;margin-bottom:6px}.keak-toggle-info{color:hsl(var(--keak-muted-foreground));font-size:12px;font-weight:500}.keak-version-toggle{background:hsl(var(--keak-muted));border-radius:10px;display:flex;gap:12px;margin-bottom:20px;padding:4px}.keak-version-btn{background:transparent;border:none;border-radius:8px;color:hsl(var(--keak-muted-foreground));cursor:pointer;flex:1;font-size:14px;font-weight:600;overflow:hidden;padding:12px 16px;position:relative;transition:all .2s ease}.keak-version-btn:hover:not(:disabled){background:rgba(59,130,246,.1);color:hsl(var(--keak-primary))}.keak-version-btn.active{background:linear-gradient(135deg,hsl(var(--keak-primary)),#0ea5e9);box-shadow:0 4px 12px rgba(59,130,246,.3);color:#fff}.keak-version-btn:disabled{cursor:not-allowed;opacity:.6}.keak-version-btn:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:\"\";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.keak-version-btn.active:hover:before{left:100%}@media (max-width:480px){.keak-quick-actions{flex-direction:column}.keak-element-info{align-items:flex-start}.keak-element-info,.keak-suggestions-content{flex-direction:column;gap:6px}.keak-version-toggle{flex-direction:column;gap:8px}}";
+var css_248z = ":root{--keak-background:17 23 34;--keak-foreground:243 246 252;--keak-card:17 23 34;--keak-card-foreground:243 246 252;--keak-popover:17 23 34;--keak-popover-foreground:243 246 252;--keak-primary:88 152 237;--keak-primary-foreground:17 23 34;--keak-secondary:47 61 90;--keak-secondary-foreground:243 246 252;--keak-muted:47 61 90;--keak-muted-foreground:168 179 202;--keak-accent:88 152 237;--keak-accent-foreground:17 23 34;--keak-destructive:239 68 68;--keak-destructive-foreground:255 255 255;--keak-border:47 61 90;--keak-input:17 23 34;--keak-ring:88 152 237;--keak-radius:12px;--glass-bg:rgba(17,23,34,.95);--glass-border:rgba(88,152,237,.15);--glass-shadow:0 8px 32px rgba(0,0,0,.3);--glass-backdrop:blur(20px);--keak-chart-1:88 152 237;--keak-chart-2:16 185 129;--keak-chart-3:245 158 11;--keak-chart-4:239 68 68;--keak-chart-5:139 92 246}*{scrollbar-color:#2f3d5a #111722;scrollbar-width:thin}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:#111722;border-radius:3px}::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px;-webkit-transition:background .2s;transition:background .2s}::-webkit-scrollbar-thumb:hover{background:#374151}::-webkit-scrollbar-corner{background:#111722}.keak-toolbar-panel-content::-webkit-scrollbar{width:6px}.keak-toolbar-panel-content::-webkit-scrollbar-track{background:transparent}.keak-toolbar-panel-content::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-toolbar-panel-content::-webkit-scrollbar-thumb:hover{background:#374151}.keak-toolbar{backdrop-filter:var(--glass-backdrop);-webkit-backdrop-filter:var(--glass-backdrop);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--keak-radius);box-shadow:var(--glass-shadow);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;font-size:14px;line-height:1.5;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;-moz-user-select:none;user-select:none}.keak-toolbar:before{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(147,197,253,.05) 50%,rgba(59,130,246,.1));bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:-1}.keak-toolbar *{box-sizing:border-box}.keak-toolbar.dragging{backdrop-filter:blur(25px);box-shadow:0 12px 40px rgba(59,130,246,.25),0 0 0 1px rgba(59,130,246,.3);transform:scale(1.02);transition:none}.keak-toolbar.dragging .keak-toolbar-header{cursor:grabbing!important}.keak-toolbar.minimized{border-radius:26px;box-shadow:0 4px 20px rgba(59,130,246,.2);height:52px;width:52px}.keak-toolbar-toggle{align-items:center;background:transparent;border:none;border-radius:26px;cursor:pointer;display:flex;height:52px;justify-content:center;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:52px}.keak-toolbar-toggle:before{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(147,197,253,.1));border-radius:inherit;content:\"\";inset:0;opacity:0;position:absolute;transition:opacity .3s ease}.keak-toolbar-toggle:hover:before{opacity:1}.keak-toolbar-toggle:hover{box-shadow:0 6px 24px rgba(59,130,246,.3);transform:scale(1.08)}.keak-toolbar-collapsed{align-items:center;background:var(--glass-bg);border-radius:26px;box-shadow:var(--glass-shadow);display:flex;gap:12px;min-width:140px;padding:8px 16px}.keak-toolbar-collapsed .keak-toolbar-toggle{align-items:center;display:flex;flex:1;gap:8px;justify-content:flex-start;padding:0 12px}.keak-toolbar-label{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600}.keak-toolbar-minimize{align-items:center;background:transparent;border:none;border-radius:10px;color:hsl(var(--keak-muted-foreground));cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s ease;width:36px}.keak-toolbar-minimize:hover{background:hsl(var(--keak-accent));color:hsl(var(--keak-accent-foreground));transform:scale(1.05)}.keak-toolbar.expanded{display:flex;flex-direction:column;max-height:650px;width:400px}.keak-toolbar-expanded{background:var(--glass-bg);border-radius:var(--keak-radius);display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}.keak-toolbar-header{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border-bottom:1px solid hsl(var(--keak-border));cursor:grab;display:flex;padding:16px 20px;position:relative;transition:all .2s ease;z-index:2}.keak-toolbar-header:before{background:linear-gradient(90deg,rgba(59,130,246,.05),transparent 50%,rgba(59,130,246,.05));bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.keak-toolbar-header:hover{background:hsla(0,0%,100%,.98)}.keak-toolbar-header:active{cursor:grabbing}.keak-toolbar-brand{align-items:center;display:flex;flex:1;gap:10px;pointer-events:none}.keak-toolbar-title{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,hsl(var(--keak-primary)),#0ea5e9);-webkit-background-clip:text;background-clip:text;color:hsl(var(--keak-foreground));font-size:18px;font-weight:700}.keak-model-selector{margin:0 16px;pointer-events:auto;position:relative}.keak-simple-dropdown{display:inline-block;position:relative}.keak-dropdown-trigger{align-items:center;background:hsla(0,0%,100%,.9);border:1px solid hsl(var(--keak-border));border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.05);color:hsl(var(--keak-foreground));cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:8px;min-width:120px;padding:8px 14px;position:relative;transition:all .2s ease}.keak-dropdown-trigger:hover{background:rgba(59,130,246,.05);border-color:hsl(var(--keak-primary));box-shadow:0 4px 12px rgba(59,130,246,.15);transform:translateY(-1px)}.keak-dropdown-arrow{height:12px;margin-left:auto;transition:transform .2s ease;width:12px}.keak-dropdown-trigger[data-open=true] .keak-dropdown-arrow{transform:rotate(180deg)}.keak-dropdown-content{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.98);border:1px solid hsl(var(--keak-border));border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.1);left:0;margin-top:4px;min-width:140px;overflow:hidden;position:absolute;right:0;top:100%;z-index:999999999}.keak-dropdown-item{align-items:center;color:hsl(var(--keak-foreground));cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:8px;padding:10px 14px;transition:all .2s ease}.keak-dropdown-item:hover{background:rgba(59,130,246,.08)}.keak-dropdown-item[data-selected=true]{background:rgba(59,130,246,.1);color:hsl(var(--keak-primary))}.keak-model-dropdown{-webkit-appearance:none;-moz-appearance:none;appearance:none;backdrop-filter:blur(8px);background:rgba(51,65,85,.9);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;border:1px solid var(--glass-border);border-radius:10px;color:hsl(var(--keak-foreground));cursor:pointer;font-size:13px;font-weight:500;min-width:120px;padding:8px 32px 8px 14px;transition:all .2s ease}.keak-model-dropdown:hover{background:rgba(59,130,246,.15);border-color:hsl(var(--keak-primary));box-shadow:0 4px 12px rgba(59,130,246,.25);transform:translateY(-1px)}.keak-model-dropdown:focus{border-color:hsl(var(--keak-primary));box-shadow:0 0 0 3px rgba(59,130,246,.2);outline:none}.keak-toolbar-controls{display:flex;gap:6px;pointer-events:auto}.keak-toolbar-close{align-items:center;background:transparent;border:none;border-radius:8px;color:hsl(var(--keak-muted-foreground));cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s ease;width:32px}.keak-toolbar-close:hover{background:rgba(239,68,68,.1);color:hsl(var(--keak-destructive));transform:scale(1.05)}.keak-toolbar-actions{backdrop-filter:blur(8px);background:rgba(248,250,252,.8);border-bottom:1px solid hsl(var(--keak-border));display:flex;gap:10px;padding:16px 20px}.keak-toolbar,.keak-toolbar *{color:#000!important;font-weight:600}.keak-action-btn span,.keak-action-btn.active,.keak-action-btn.active *,.keak-dropdown-item,.keak-dropdown-trigger,.keak-optimize-btn,.keak-optimize-btn *,.keak-status-selected,.keak-toolbar-title{color:#fff!important}.keak-toolbar .keak-element-text,.keak-toolbar .keak-form-label,.keak-toolbar .keak-metrics-title,.keak-toolbar .keak-scan-summary-title,.keak-toolbar .keak-scan-title,.keak-toolbar .keak-suggestion-text,.keak-toolbar .keak-suggestions-header,.keak-toolbar .keak-variation-title,.keak-toolbar h1,.keak-toolbar h2,.keak-toolbar h3{color:#f3f6fc;font-weight:700}.keak-action-btn{align-items:center;backdrop-filter:blur(8px);background:hsla(0,0%,100%,.9);border:1px solid hsl(var(--keak-border));border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);color:hsl(var(--keak-foreground));cursor:pointer;display:flex;flex:1;flex-direction:column;font-size:12px;gap:6px;overflow:hidden;padding:12px 16px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.keak-action-btn:before{background:linear-gradient(90deg,transparent,rgba(59,130,246,.1),transparent);content:\"\";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.keak-action-btn:hover:before{left:100%}.keak-action-btn:hover{background:rgba(59,130,246,.05);border-color:hsl(var(--keak-primary));box-shadow:0 4px 20px rgba(59,130,246,.15);transform:translateY(-2px)}.keak-action-btn.active{background:linear-gradient(135deg,hsl(var(--keak-primary)),#0ea5e9);border-color:hsl(var(--keak-primary));box-shadow:0 6px 20px rgba(59,130,246,.4);color:#fff}.keak-action-btn.active:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent)}.keak-action-btn span{color:hsl(var(--keak-foreground));font-weight:700;letter-spacing:.025em}.keak-toolbar-content{backdrop-filter:blur(8px);background:rgba(248,250,252,.3);flex:1;overflow-y:auto;position:relative}.keak-toolbar-content::-webkit-scrollbar-thumb{background:#2f3d5a}.keak-toolbar-content::-webkit-scrollbar-thumb:hover{background:#374151}.keak-toolbar-content:before{background:linear-gradient(180deg,rgba(59,130,246,.02),transparent 50%);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.keak-toolbar-status{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border-top:1px solid hsl(var(--keak-border));color:hsl(var(--keak-foreground));display:flex;font-size:12px;font-weight:600;justify-content:space-between;padding:12px 20px}.keak-status-selected code{background:rgba(59,130,246,.1);border-radius:6px;color:hsl(var(--keak-foreground));font-family:JetBrains Mono,SF Mono,monospace;font-weight:700;padding:3px 8px}.keak-toolbar-status kbd{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);border-radius:6px;color:hsl(var(--keak-foreground));font-family:inherit;font-size:11px;font-weight:600;padding:3px 8px}.keak-toolbar-content::-webkit-scrollbar{width:6px}.keak-toolbar-content::-webkit-scrollbar-track{background:transparent}.keak-toolbar-content::-webkit-scrollbar-thumb{background:rgba(59,130,246,.3);border-radius:3px;-webkit-transition:background .2s ease;transition:background .2s ease}.keak-toolbar-content::-webkit-scrollbar-thumb:hover{background:rgba(59,130,246,.5)}@keyframes keak-slide-up{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes keak-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes keak-scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.keak-toolbar.expanded{animation:keak-slide-up .4s cubic-bezier(.34,1.56,.64,1)}@media (max-width:480px){.keak-toolbar.expanded{max-width:400px;width:calc(100vw - 32px)}}.keak-selected-highlight{background:rgba(37,99,235,.08);border:2px solid #2563eb;border-radius:8px;box-shadow:0 0 0 1px rgba(37,99,235,.1),0 4px 12px rgba(37,99,235,.15),0 2px 4px rgba(37,99,235,.1);pointer-events:none;position:absolute;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:999998}.keak-selected-highlight.generating{animation:keak-shimmer 2s ease-in-out infinite;background:linear-gradient(90deg,rgba(37,99,235,.08),rgba(37,99,235,.2) 50%,rgba(37,99,235,.08));background-size:200% 100%;border-color:#2563eb;box-shadow:0 0 0 1px rgba(37,99,235,.2),0 4px 16px rgba(37,99,235,.25),0 2px 6px rgba(37,99,235,.15)}@keyframes keak-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.keak-loading-spinner{animation:keak-spin 1s linear infinite;border:2px solid rgba(59,130,246,.2);border-radius:50%;border-top:2px solid hsl(var(--keak-primary));height:20px;width:20px}@keyframes keak-spin{to{transform:rotate(1turn)}}.keak-success-toast{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 25px rgba(16,185,129,.3)}.keak-error-toast,.keak-success-toast{backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2);border-radius:12px;color:#fff;font-weight:500;padding:12px 20px}.keak-error-toast{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 8px 25px rgba(239,68,68,.3)}.keak-selector-highlight{background:rgba(88,152,237,.15);border:2px solid #6b7280;border-radius:4px;box-shadow:0 0 0 2px rgba(88,152,237,.25);display:none;pointer-events:none;position:absolute;transition:all .1s ease-out;z-index:999999}.keak-selector-tooltip{backdrop-filter:blur(12px);background:rgba(15,23,42,.9);border:1px solid hsla(0,0%,100%,.1);border-radius:8px;box-shadow:0 8px 25px rgba(0,0,0,.3);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;padding:8px 14px;pointer-events:none;position:fixed;white-space:nowrap;z-index:999999}.keak-selector-tooltip code{background:rgba(59,130,246,.2);border-radius:4px;color:#60a5fa;font-family:JetBrains Mono,SF Mono,monospace;font-weight:500;padding:2px 6px}.keak-selector-instructions{align-items:center;animation:keak-fade-in .3s ease-out;background:rgba(15,23,42,.9);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.4);color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;gap:16px;left:50%;padding:16px 24px;pointer-events:none;position:fixed;top:24px;transform:translateX(-50%);z-index:999999}.keak-selector-instructions-icon{align-items:center;background:hsl(var(--keak-primary));border-radius:50%;box-shadow:0 4px 12px rgba(59,130,246,.4);display:flex;height:28px;justify-content:center;width:28px}.keak-selector-instructions kbd{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:6px;font-size:12px;font-weight:500;margin:0 4px;padding:4px 8px}body.keak-selecting,body.keak-selecting *{cursor:crosshair!important}body.keak-selecting .keak-selector-highlight,body.keak-selecting .keak-selector-instructions,body.keak-selecting .keak-selector-tooltip,body.keak-selecting .keak-toolbar{cursor:default!important}.keak-prompt-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-prompt-header{margin-bottom:12px}.keak-prompt-title{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600;margin-bottom:8px}.keak-element-preview{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:4px;color:#a8b3ca;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;overflow:hidden;padding:8px 12px;text-overflow:ellipsis;white-space:nowrap}.keak-main-input{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.keak-input-label{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600;margin-bottom:8px}.keak-main-textarea{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:4px;color:#f3f6fc;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;min-height:100px;padding:16px;resize:vertical;transition:all .2s;width:100%}.keak-main-textarea:focus{background:hsla(0,0%,100%,.08);border-color:#374151;box-shadow:0 4px 10px 0 rgba(43,59,91,.12);outline:none}.keak-main-textarea::-moz-placeholder{color:#6b7280;opacity:1}.keak-main-textarea::placeholder{color:#6b7280;opacity:1}.keak-main-textarea:-webkit-autofill,.keak-main-textarea:-webkit-autofill:focus,.keak-main-textarea:-webkit-autofill:hover{-webkit-text-fill-color:#f3f6fc;-webkit-box-shadow:inset 0 0 0 1000px hsla(0,0%,100%,.05);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.keak-context-section{display:flex;flex-direction:column;gap:6px}.keak-context-input{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:4px;color:#f3f6fc;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;padding:12px 16px;transition:all .2s;width:100%}.keak-context-input:focus{background:hsla(0,0%,100%,.08);border-color:#374151;box-shadow:0 4px 10px 0 rgba(43,59,91,.12);outline:none}.keak-context-input::-moz-placeholder{color:#6b7280;opacity:1}.keak-context-input::placeholder{color:#6b7280;opacity:1}.keak-context-input:-webkit-autofill,.keak-context-input:-webkit-autofill:focus,.keak-context-input:-webkit-autofill:hover{-webkit-text-fill-color:#f3f6fc;-webkit-box-shadow:inset 0 0 0 1000px hsla(0,0%,100%,.05);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.keak-optimize-section{align-items:center;display:flex;flex-direction:column;gap:8px;margin-top:20px}.keak-optimize-btn{align-items:center;background:linear-gradient(135deg,#3b82f6,#6366f1);border:none;border-radius:12px;box-shadow:0 4px 20px rgba(59,130,246,.3);color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:800;gap:10px;justify-content:center;overflow:hidden;padding:16px 24px;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.1);transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.keak-optimize-btn span{color:#fff}.keak-optimize-btn:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:\"\";height:100%;left:-100%;position:absolute;top:0;transition:left .6s ease;width:100%}.keak-optimize-btn:hover:before{left:100%}.keak-optimize-btn:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#4f46e5);box-shadow:0 8px 30px rgba(59,130,246,.4);transform:translateY(-2px)}.keak-optimize-btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.5;transform:none}.keak-optimize-btn:disabled:before{display:none}.keak-optimize-hint{color:#f3f6fc!important;font-size:11px;opacity:.7;text-align:center}.keak-optimize-hint kbd{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:4px;font-size:10px;font-weight:500;margin:0 2px;padding:2px 6px}.keak-suggestions{flex:1;overflow-y:auto;padding-top:16px}.keak-suggestions::-webkit-scrollbar{width:6px}.keak-suggestions::-webkit-scrollbar-track{background:transparent}.keak-suggestions::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-suggestions::-webkit-scrollbar-thumb:hover{background:#374151}.keak-loading{align-items:center;color:hsl(var(--keak-muted-foreground));display:flex;flex-direction:column;gap:12px;justify-content:center;padding:40px}.keak-suggestion-card{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:8px;box-shadow:0 4px 10px 0 rgba(43,59,91,.12);cursor:pointer;margin-bottom:12px;overflow:hidden;padding:16px;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.keak-suggestion-card:before{background:linear-gradient(135deg,rgba(88,152,237,.05),rgba(88,152,237,.08));bottom:0;content:\"\";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease}.keak-suggestion-card:hover{background:hsla(0,0%,100%,.08);border-color:#374151;box-shadow:0 4px 10px 0 rgba(43,59,91,.18);transform:translateY(-2px)}.keak-suggestion-card:hover:before{opacity:1}.keak-suggestion-text{color:#f3f6fc;font-size:14px;font-weight:600;line-height:1.4;margin-bottom:8px;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.05);z-index:1}.keak-suggestion-meta{align-items:center;color:#a8b3ca;display:flex;font-size:12px;font-weight:600;gap:8px;position:relative;z-index:1}.keak-suggestion-card:hover .keak-suggestion-action{opacity:1}.keak-suggestion-content-wrapper{align-items:flex-start;display:flex;gap:12px;width:100%}.keak-suggestion-badge-wrapper{flex-shrink:0}.keak-suggestion-variant-badge{align-items:center;background:rgba(88,152,237,.2);border:1px solid rgba(88,152,237,.3);border-radius:8px;box-shadow:none;color:#5898ed;display:flex;font-size:12px;font-weight:700;height:32px;justify-content:center;width:32px}.keak-suggestion-text-wrapper{flex:1;min-width:0}.keak-suggestion-action{color:#5898ed;flex-shrink:0;opacity:.6;transition:opacity .2s}.keak-variation-history{margin-bottom:12px;max-height:200px;overflow-y:auto}.keak-variation-history::-webkit-scrollbar{width:6px}.keak-variation-history::-webkit-scrollbar-track{background:transparent}.keak-variation-history::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-variation-history::-webkit-scrollbar-thumb:hover{background:#374151}.keak-variation-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:8px}.keak-variation-title{color:#f3f6fc;flex-shrink:0;font-size:13px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.05);white-space:nowrap}.keak-variation-actions{display:flex;flex-shrink:0;gap:8px}.keak-variation-item{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:8px;cursor:pointer;font-size:11px;margin-bottom:6px;padding:10px;transition:all .2s}.keak-variation-item:hover{background:hsla(0,0%,100%,.08);border-color:#374151}.keak-variation-item.selected{background:rgba(88,152,237,.15);border-color:#5898ed}.keak-variation-meta{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}.keak-variation-model{background:rgba(88,152,237,.2);border-radius:4px;color:#5898ed;font-size:9px;font-weight:600;padding:2px 6px;text-transform:uppercase}.keak-variation-time{color:#a8b3ca;font-size:9px}.keak-variation-prompt{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;color:#f3f6fc;display:-webkit-box;font-size:10px;line-height:1.3;margin-bottom:4px;overflow:hidden}.keak-variation-count{color:#a8b3ca;font-size:9px}.keak-save-changes-section{background:rgba(88,152,237,.1);border:1px solid rgba(88,152,237,.3);border-radius:8px;margin-top:16px;padding:16px;text-align:center}.keak-save-message{color:#f3f6fc;font-size:13px;font-weight:500;margin-bottom:12px}.keak-save-changes-btn{align-items:center;background:linear-gradient(-46.0266deg,rgba(20,10,86,0) 20.511%,rgba(20,10,86,.2) 87.062%),linear-gradient(181.531deg,rgba(255,254,254,.12) 8.1705%,rgba(2,4,13,.2) 91.829%),#5898ed;border:1px solid rgba(55,65,81,.5);border-radius:4px;box-shadow:0 8px 10px 0 rgba(1,1,42,.25),inset 2px 2px 4px 0 rgba(5,5,80,.4),inset -4px -4px 10px 0 hsla(0,0%,100%,.25),inset 4px 4px 10px 0 rgba(25,18,67,.4);color:#000!important;cursor:pointer;display:flex;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:600;gap:8px;justify-content:center;padding:12px 16px;transition:all .2s;width:100%}.keak-save-changes-btn *{color:#000!important}.keak-save-changes-btn:hover{box-shadow:0 8px 10px 0 rgba(1,1,42,.25),0 0 15px rgba(88,152,237,.4),inset 2px 2px 4px 0 rgba(5,5,80,.4),inset -4px -4px 10px 0 hsla(0,0%,100%,.25),inset 4px 4px 10px 0 rgba(25,18,67,.4);transform:scale(1.01)}.keak-page-scan-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-scan-header{margin-bottom:16px}.keak-scan-title{align-items:center;color:#f3f6fc;display:flex;font-size:14px;font-weight:600;justify-content:space-between;margin-bottom:8px}.keak-scan-stats{color:#a8b3ca;display:flex;font-size:12px;gap:16px;margin-bottom:8px}.keak-scan-actions{display:flex;gap:8px;margin-bottom:8px}.keak-scan-summary{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);border-radius:12px;font-size:12px;margin-bottom:16px;padding:16px}.keak-scan-summary-title{color:hsl(var(--keak-foreground));font-size:13px;font-weight:600;margin-bottom:6px}.keak-scan-summary-text{color:hsl(var(--keak-muted-foreground));line-height:1.4}.keak-scan-results{flex:1;overflow-y:auto}.keak-scan-results::-webkit-scrollbar{width:6px}.keak-scan-results::-webkit-scrollbar-track{background:transparent}.keak-scan-results::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-scan-results::-webkit-scrollbar-thumb:hover{background:#374151}.keak-scan-loading{align-items:center;color:hsl(var(--keak-muted-foreground));display:flex;flex-direction:column;justify-content:center;padding:40px}.keak-scan-spinner{animation:keak-spin 1s linear infinite;border:3px solid hsl(var(--keak-border));border-radius:50%;border-top:3px solid #10b981;height:32px;margin-bottom:16px;width:32px}.keak-scan-progress-container{align-items:center;display:flex;flex-direction:column;gap:16px;max-width:300px;width:100%}.keak-scan-progress-bar{height:8px;width:100%}.keak-scan-progress-text{font-size:11px}.keak-no-results,.keak-scan-progress-text{color:hsl(var(--keak-muted-foreground));text-align:center}.keak-no-results{padding:40px}.keak-element-card{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:12px;margin-bottom:12px;overflow:hidden;transition:all .2s}.keak-element-card:hover{border-color:#10b981;box-shadow:0 4px 12px rgba(16,185,129,.1);transform:translateY(-1px)}.keak-element-header{align-items:center;background:hsl(var(--keak-muted));border-bottom:1px solid hsl(var(--keak-border));cursor:pointer;display:flex;justify-content:space-between;padding:12px 16px;transition:all .2s}.keak-element-header:hover{background:rgba(59,130,246,.05)}.keak-element-info{align-items:center;display:flex;flex:1;gap:10px}.keak-element-tag{background:rgba(88,152,237,.2);border-radius:4px;color:#5898ed;font-size:10px;font-weight:600;padding:3px 8px;text-transform:uppercase}.keak-element-text{color:#f3f6fc;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.keak-navigate-icon{color:hsl(var(--keak-muted-foreground));font-size:12px;margin-left:8px}.keak-priority-badge{border-radius:6px;color:#fff;font-size:10px;font-weight:600;padding:3px 8px}.keak-suggestions-list{padding:16px}.keak-suggestions-header{align-items:center;color:hsl(var(--keak-muted-foreground));display:flex;font-size:11px;font-weight:500;gap:6px;margin-bottom:12px}.keak-suggestion-item{background:hsl(var(--keak-input));border:1px solid hsl(var(--keak-border));border-radius:8px;cursor:pointer;font-size:12px;line-height:1.4;margin-bottom:8px;padding:12px;transition:all .2s}.keak-suggestion-item:hover{background:rgba(59,130,246,.05);border-color:#10b981;transform:translateX(2px)}.keak-suggestion-item:last-child{margin-bottom:0}.keak-suggestion-item.recommended{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(99,102,241,.1));border-color:rgba(59,130,246,.3)}.keak-suggestion-content{align-items:flex-start;display:flex;gap:10px}.keak-suggestion-badge{border-radius:6px;color:#fff;flex-shrink:0;font-size:10px;font-weight:700;padding:3px 8px}.keak-suggestion-badge.recommended{background:#3b82f6}.keak-suggestion-badge.default{background:#6b7280}.keak-suggestion-text-content{flex:1;line-height:1.4}.keak-suggestion-recommended-label{color:#3b82f6;font-size:10px;font-weight:500;margin-top:4px}.keak-model-badge{align-items:center;background:rgba(59,130,246,.1);border-radius:6px;color:hsl(var(--keak-primary));display:inline-flex;font-size:10px;font-weight:600;padding:2px 8px;text-transform:uppercase}.line-clamp-2{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.space-y-2>*+*{margin-top:.5rem}.max-h-48{max-height:12rem}.keak-experiment-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-experiment-form{display:flex;flex-direction:column;gap:12px}.keak-form-group{display:flex;flex-direction:column;gap:6px}.keak-form-label{color:hsl(var(--keak-muted-foreground));font-size:12px;font-weight:500}.keak-form-input{background:hsl(var(--keak-input));border:1px solid hsl(var(--keak-border));border-radius:8px;color:hsl(var(--keak-foreground));font-size:13px;padding:12px 16px;transition:all .2s}.keak-form-input:focus{border-color:hsl(var(--keak-primary));box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.keak-variants-section{flex:1;overflow-y:auto}.keak-variants-section::-webkit-scrollbar{width:6px}.keak-variants-section::-webkit-scrollbar-track{background:transparent}.keak-variants-section::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-variants-section::-webkit-scrollbar-thumb:hover{background:#374151}.keak-variant-card{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:8px;margin-bottom:8px;padding:12px}.keak-variant-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.keak-variant-name{color:hsl(var(--keak-foreground));font-size:13px;font-weight:500}.keak-variant-content{background:hsl(var(--keak-input));border:1px solid hsl(var(--keak-border));border-radius:8px;color:hsl(var(--keak-foreground));font-family:JetBrains Mono,SF Mono,monospace;font-size:12px;min-height:60px;padding:12px;resize:vertical;width:100%}.keak-experiment-actions{display:flex;gap:8px;margin-top:16px}.keak-experiment-list{flex:1;overflow-y:auto}.keak-experiment-list::-webkit-scrollbar{width:6px}.keak-experiment-list::-webkit-scrollbar-track{background:transparent}.keak-experiment-list::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-experiment-list::-webkit-scrollbar-thumb:hover{background:#374151}.keak-experiment-item{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:8px;cursor:pointer;margin-bottom:8px;padding:12px;transition:all .2s}.keak-experiment-item:hover{background:rgba(59,130,246,.02);border-color:hsl(var(--keak-primary))}.keak-experiment-name{color:hsl(var(--keak-foreground));font-weight:500}.keak-experiment-url{align-items:center;display:flex;font-size:10px;gap:4px;margin-top:4px;opacity:.7}.keak-experiment-url,.keak-no-element{color:hsl(var(--keak-muted-foreground))}.keak-no-element{padding:20px;text-align:center}.keak-metrics-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-metrics-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.keak-metrics-title{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600}.keak-time-selector{background:hsl(var(--keak-muted));border-radius:6px;display:flex;gap:4px;padding:2px}.keak-time-option{background:transparent;border:none;border-radius:4px;color:hsl(var(--keak-muted-foreground));cursor:pointer;font-size:11px;font-weight:500;padding:4px 8px;transition:all .2s}.keak-time-option.active{background:hsl(var(--keak-primary));color:#fff}.keak-metrics-list{flex:1;overflow-y:auto}.keak-metrics-list::-webkit-scrollbar{width:6px}.keak-metrics-list::-webkit-scrollbar-track{background:transparent}.keak-metrics-list::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-metrics-list::-webkit-scrollbar-thumb:hover{background:#374151}.keak-metric-card{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:8px;cursor:pointer;margin-bottom:8px;padding:12px;transition:all .2s}.keak-metric-card:hover{background:rgba(59,130,246,.02);border-color:hsl(var(--keak-primary))}.keak-metric-card.selected{background:rgba(59,130,246,.05);border-color:hsl(var(--keak-primary))}.keak-empty-state{color:hsl(var(--keak-muted-foreground));padding:40px 20px;text-align:center}.keak-multi-element-toggle{background:hsla(0,0%,100%,.95);border:1px solid hsl(var(--keak-border));border-radius:12px;margin-bottom:16px;padding:20px}.keak-toggle-header{margin-bottom:16px;text-align:center}.keak-toggle-title{color:hsl(var(--keak-foreground));font-size:16px;font-weight:700;margin-bottom:6px}.keak-toggle-info{color:hsl(var(--keak-muted-foreground));font-size:12px;font-weight:500}.keak-version-toggle{background:hsl(var(--keak-muted));border-radius:10px;display:flex;gap:12px;margin-bottom:20px;padding:4px}.keak-version-btn{background:transparent;border:none;border-radius:8px;color:hsl(var(--keak-muted-foreground));cursor:pointer;flex:1;font-size:14px;font-weight:600;overflow:hidden;padding:12px 16px;position:relative;transition:all .2s ease}.keak-version-btn:hover:not(:disabled){background:rgba(59,130,246,.1);color:hsl(var(--keak-primary))}.keak-version-btn.active{background:linear-gradient(135deg,hsl(var(--keak-primary)),#0ea5e9);box-shadow:0 4px 12px rgba(59,130,246,.3);color:#fff}.keak-version-btn:disabled{cursor:not-allowed;opacity:.6}.keak-version-btn:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:\"\";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.keak-version-btn.active:hover:before{left:100%}@keyframes slideDown{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.keak-map-warning{animation:slideDown .3s ease-out}@media (max-width:480px){.keak-quick-actions{flex-direction:column}.keak-element-info{align-items:flex-start}.keak-element-info,.keak-suggestions-content{flex-direction:column;gap:6px}.keak-version-toggle{flex-direction:column;gap:8px}}";
 styleInject(css_248z);
 
 const KeakToolbar = ({ position = 'bottom-right', theme = 'auto' }) => {
@@ -1095,6 +1278,19 @@ const KeakToolbar = ({ position = 'bottom-right', theme = 'auto' }) => {
         console.log('[Keak Toolbar] Tag:', element.tagName);
         console.log('[Keak Toolbar] HTML (first 300 chars):', element.outerHTML.substring(0, 300));
         console.log('[Keak Toolbar] All attributes:', Array.from(element.attributes).map(a => `${a.name}="${a.value}"`).join(', '));
+        // Check if element is inside a dynamic list (.map(), .forEach(), etc.)
+        const mapCheck = isElementInDynamicList(element);
+        if (mapCheck.isInMap) {
+            console.log('[Keak Toolbar] ⚠️ Element is part of a dynamic list, preventing selection');
+            console.log('[Keak Toolbar] Reason:', mapCheck.reason);
+            // Show a brief visual feedback
+            element.style.transition = 'all 0.3s';
+            element.style.outline = '3px solid #ef4444';
+            setTimeout(() => { element.style.outline = ''; }, 2000);
+            // Don't proceed with selection
+            setIsSelecting(false);
+            return;
+        }
         setSelectedElement(element);
         setIsSelecting(false);
         updateSelectedHighlight(element);