@keak/sdk 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +301 -4
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +301 -4
- package/dist/index.js.map +1 -1
- package/dist/toolbar/ElementSelector.d.ts.map +1 -1
- package/dist/toolbar/KeakToolbar.d.ts.map +1 -1
- package/dist/toolbar/utils/fiberSource.d.ts +16 -0
- package/dist/toolbar/utils/fiberSource.d.ts.map +1 -1
- package/dist/toolbar.css +1 -1
- package/dist/toolbar.js +199 -3
- package/dist/toolbar.js.map +1 -1
- package/package.json +1 -1
package/dist/toolbar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
: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}}
|
|
1
|
+
: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}}
|
package/dist/toolbar.js
CHANGED
|
@@ -281,9 +281,116 @@ function getSourceConfidence(sourceInfo) {
|
|
|
281
281
|
}
|
|
282
282
|
return 'low';
|
|
283
283
|
}
|
|
284
|
+
/**
|
|
285
|
+
* Check if an element is part of a dynamically generated list (.map(), .forEach(), etc.)
|
|
286
|
+
*
|
|
287
|
+
* Detection strategy:
|
|
288
|
+
* 1. Check if multiple siblings share the same source location (primary method)
|
|
289
|
+
* 2. This indicates they're generated from the same template (likely a map)
|
|
290
|
+
* 3. Also check if the element is a descendant of an element that's in a map
|
|
291
|
+
*
|
|
292
|
+
* @param element The DOM element to check
|
|
293
|
+
* @returns Object with isInMap (boolean) and reason (string) if detected
|
|
294
|
+
*/
|
|
295
|
+
function isElementInDynamicList(element) {
|
|
296
|
+
// First, check if the element itself is in a map
|
|
297
|
+
const directCheck = checkElementForMapPattern(element);
|
|
298
|
+
if (directCheck.isInMap) {
|
|
299
|
+
return directCheck;
|
|
300
|
+
}
|
|
301
|
+
// If not, check if any ancestor is in a map
|
|
302
|
+
let current = element.parentElement;
|
|
303
|
+
let depth = 0;
|
|
304
|
+
const maxDepth = 10; // Limit traversal depth to avoid performance issues
|
|
305
|
+
while (current && depth < maxDepth) {
|
|
306
|
+
const ancestorCheck = checkElementForMapPattern(current);
|
|
307
|
+
if (ancestorCheck.isInMap) {
|
|
308
|
+
return {
|
|
309
|
+
isInMap: true,
|
|
310
|
+
reason: `This element is a child of a dynamically generated list item. ${ancestorCheck.reason}`,
|
|
311
|
+
siblingCount: ancestorCheck.siblingCount
|
|
312
|
+
};
|
|
313
|
+
}
|
|
314
|
+
current = current.parentElement;
|
|
315
|
+
depth++;
|
|
316
|
+
}
|
|
317
|
+
return { isInMap: false };
|
|
318
|
+
}
|
|
319
|
+
/**
|
|
320
|
+
* Helper function to check if a specific element is part of a map pattern
|
|
321
|
+
*/
|
|
322
|
+
function checkElementForMapPattern(element) {
|
|
323
|
+
const parent = element.parentElement;
|
|
324
|
+
if (!parent) {
|
|
325
|
+
return { isInMap: false };
|
|
326
|
+
}
|
|
327
|
+
// Get all sibling elements (including the element itself)
|
|
328
|
+
const siblings = Array.from(parent.children).filter((sibling) => sibling instanceof HTMLElement);
|
|
329
|
+
// Need at least 2 siblings to detect a pattern
|
|
330
|
+
if (siblings.length < 2) {
|
|
331
|
+
return { isInMap: false };
|
|
332
|
+
}
|
|
333
|
+
// Get source location for the target element
|
|
334
|
+
const elementSource = getReactFiberSource(element);
|
|
335
|
+
// If we can't get source for the element, try data-keak-src attribute
|
|
336
|
+
let elementSourceKey = null;
|
|
337
|
+
if (elementSource) {
|
|
338
|
+
elementSourceKey = `${elementSource.fileName}:${elementSource.lineNumber}`;
|
|
339
|
+
}
|
|
340
|
+
else {
|
|
341
|
+
const keakSrc = element.getAttribute('data-keak-src');
|
|
342
|
+
if (keakSrc) {
|
|
343
|
+
// Format is "file:line:column", we use file:line as key
|
|
344
|
+
const parts = keakSrc.split(':');
|
|
345
|
+
if (parts.length >= 2) {
|
|
346
|
+
const fileName = parts.slice(0, -2).join(':'); // Handle Windows paths
|
|
347
|
+
const lineNumber = parts[parts.length - 2];
|
|
348
|
+
elementSourceKey = `${fileName}:${lineNumber}`;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
// If we don't have source info, we can't detect map patterns reliably
|
|
353
|
+
if (!elementSourceKey) {
|
|
354
|
+
return { isInMap: false };
|
|
355
|
+
}
|
|
356
|
+
// Check how many siblings share the same source location
|
|
357
|
+
let matchingSiblings = 0;
|
|
358
|
+
for (const sibling of siblings) {
|
|
359
|
+
const siblingSource = getReactFiberSource(sibling);
|
|
360
|
+
let siblingSourceKey = null;
|
|
361
|
+
if (siblingSource) {
|
|
362
|
+
siblingSourceKey = `${siblingSource.fileName}:${siblingSource.lineNumber}`;
|
|
363
|
+
}
|
|
364
|
+
else {
|
|
365
|
+
const keakSrc = sibling.getAttribute('data-keak-src');
|
|
366
|
+
if (keakSrc) {
|
|
367
|
+
const parts = keakSrc.split(':');
|
|
368
|
+
if (parts.length >= 2) {
|
|
369
|
+
const fileName = parts.slice(0, -2).join(':');
|
|
370
|
+
const lineNumber = parts[parts.length - 2];
|
|
371
|
+
siblingSourceKey = `${fileName}:${lineNumber}`;
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
if (siblingSourceKey === elementSourceKey) {
|
|
376
|
+
matchingSiblings++;
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
// If 2+ siblings share the same source location, it's likely a map/forEach
|
|
380
|
+
// We use >= 2 because the element itself counts as one
|
|
381
|
+
if (matchingSiblings >= 2) {
|
|
382
|
+
return {
|
|
383
|
+
isInMap: true,
|
|
384
|
+
reason: `Multiple elements (${matchingSiblings}) share the same source location, indicating they're generated from a .map() or similar dynamic list pattern`,
|
|
385
|
+
siblingCount: matchingSiblings
|
|
386
|
+
};
|
|
387
|
+
}
|
|
388
|
+
return { isInMap: false };
|
|
389
|
+
}
|
|
284
390
|
|
|
285
391
|
const ElementSelector = ({ onElementSelected, onCancel, }) => {
|
|
286
392
|
const [hoveredElement, setHoveredElement] = useState(null);
|
|
393
|
+
const [mapWarning, setMapWarning] = useState({ show: false, message: "" });
|
|
287
394
|
const highlightRef = useRef(null);
|
|
288
395
|
useEffect(() => {
|
|
289
396
|
const handleMouseMove = (e) => {
|
|
@@ -308,9 +415,27 @@ const ElementSelector = ({ onElementSelected, onCancel, }) => {
|
|
|
308
415
|
target.closest(".keak-toolbar") ||
|
|
309
416
|
target.closest(".keak-selector-highlight") ||
|
|
310
417
|
target.closest(".keak-selector-tooltip") ||
|
|
311
|
-
target.closest(".keak-selector-instructions")
|
|
418
|
+
target.closest(".keak-selector-instructions") ||
|
|
419
|
+
target.closest(".keak-map-warning")) {
|
|
312
420
|
return;
|
|
313
421
|
}
|
|
422
|
+
// Check if element is inside a dynamic list (.map(), .forEach(), etc.)
|
|
423
|
+
const mapCheck = isElementInDynamicList(target);
|
|
424
|
+
if (mapCheck.isInMap) {
|
|
425
|
+
// Show warning and prevent selection
|
|
426
|
+
setMapWarning({
|
|
427
|
+
show: true,
|
|
428
|
+
message: mapCheck.reason || "Element is part of a dynamically generated list",
|
|
429
|
+
siblingCount: mapCheck.siblingCount
|
|
430
|
+
});
|
|
431
|
+
// Auto-hide warning after 5 seconds
|
|
432
|
+
setTimeout(() => {
|
|
433
|
+
setMapWarning({ show: false, message: "" });
|
|
434
|
+
}, 5000);
|
|
435
|
+
return; // Prevent selection
|
|
436
|
+
}
|
|
437
|
+
// Clear any existing warning
|
|
438
|
+
setMapWarning({ show: false, message: "" });
|
|
314
439
|
onElementSelected(target);
|
|
315
440
|
};
|
|
316
441
|
const handleKeyDown = (e) => {
|
|
@@ -473,7 +598,65 @@ const ElementSelector = ({ onElementSelected, onCancel, }) => {
|
|
|
473
598
|
return { selector, text, source, impact };
|
|
474
599
|
};
|
|
475
600
|
const elementInfo = hoveredElement ? getElementInfo(hoveredElement) : null;
|
|
476
|
-
return (jsxs(Fragment, { children: [jsx("div", { ref: highlightRef, className: "keak-selector-highlight" }),
|
|
601
|
+
return (jsxs(Fragment, { children: [jsx("div", { ref: highlightRef, className: "keak-selector-highlight" }), mapWarning.show && (jsx("div", { className: "keak-map-warning", style: {
|
|
602
|
+
position: "fixed",
|
|
603
|
+
top: "140px",
|
|
604
|
+
left: "50%",
|
|
605
|
+
transform: "translateX(-50%)",
|
|
606
|
+
maxWidth: "500px",
|
|
607
|
+
background: "hsl(0 84.2% 60.2%)",
|
|
608
|
+
border: "1px solid hsl(0 72.2% 50.6%)",
|
|
609
|
+
borderRadius: "8px",
|
|
610
|
+
padding: "16px 20px",
|
|
611
|
+
boxShadow: "0 10px 30px 0 rgba(0, 0, 0, 0.3)",
|
|
612
|
+
fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
613
|
+
zIndex: 1000000,
|
|
614
|
+
color: "white",
|
|
615
|
+
animation: "slideDown 0.3s ease-out",
|
|
616
|
+
}, children: jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsx("div", { style: {
|
|
617
|
+
fontSize: "20px",
|
|
618
|
+
lineHeight: "1",
|
|
619
|
+
marginTop: "2px",
|
|
620
|
+
}, children: "\u26A0\uFE0F" }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: {
|
|
621
|
+
fontSize: "15px",
|
|
622
|
+
fontWeight: 600,
|
|
623
|
+
marginBottom: "8px",
|
|
624
|
+
}, children: "Cannot select element from dynamic list" }), jsx("div", { style: {
|
|
625
|
+
fontSize: "13px",
|
|
626
|
+
lineHeight: "1.5",
|
|
627
|
+
opacity: 0.95,
|
|
628
|
+
marginBottom: "12px",
|
|
629
|
+
}, children: "This element is part of a dynamically generated list (.map(), .forEach(), etc.). Selecting individual items isn't supported because:" }), jsxs("ul", { style: {
|
|
630
|
+
fontSize: "13px",
|
|
631
|
+
lineHeight: "1.6",
|
|
632
|
+
margin: "0 0 12px 0",
|
|
633
|
+
paddingLeft: "20px",
|
|
634
|
+
opacity: 0.95,
|
|
635
|
+
listStyle: "none",
|
|
636
|
+
}, 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: {
|
|
637
|
+
fontSize: "13px",
|
|
638
|
+
fontWeight: 600,
|
|
639
|
+
marginTop: "12px",
|
|
640
|
+
paddingTop: "12px",
|
|
641
|
+
borderTop: "1px solid rgba(255, 255, 255, 0.2)",
|
|
642
|
+
}, children: "\uD83D\uDCA1 Alternatives:" }), jsxs("ul", { style: {
|
|
643
|
+
fontSize: "13px",
|
|
644
|
+
lineHeight: "1.6",
|
|
645
|
+
margin: "8px 0 0 0",
|
|
646
|
+
paddingLeft: "20px",
|
|
647
|
+
opacity: 0.95,
|
|
648
|
+
listStyle: "none",
|
|
649
|
+
}, 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: {
|
|
650
|
+
background: "transparent",
|
|
651
|
+
border: "none",
|
|
652
|
+
color: "white",
|
|
653
|
+
cursor: "pointer",
|
|
654
|
+
fontSize: "18px",
|
|
655
|
+
lineHeight: "1",
|
|
656
|
+
padding: "0",
|
|
657
|
+
opacity: 0.8,
|
|
658
|
+
transition: "opacity 0.2s",
|
|
659
|
+
}, 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: {
|
|
477
660
|
position: "fixed",
|
|
478
661
|
bottom: `${window.innerHeight -
|
|
479
662
|
hoveredElement.getBoundingClientRect().top +
|
|
@@ -1018,7 +1201,7 @@ function styleInject(css, ref) {
|
|
|
1018
1201
|
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}";
|
|
1019
1202
|
styleInject(css_248z$1);
|
|
1020
1203
|
|
|
1021
|
-
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}}";
|
|
1204
|
+
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}}";
|
|
1022
1205
|
styleInject(css_248z);
|
|
1023
1206
|
|
|
1024
1207
|
const KeakToolbar = ({ position = 'bottom-right', theme = 'auto' }) => {
|
|
@@ -1095,6 +1278,19 @@ const KeakToolbar = ({ position = 'bottom-right', theme = 'auto' }) => {
|
|
|
1095
1278
|
console.log('[Keak Toolbar] Tag:', element.tagName);
|
|
1096
1279
|
console.log('[Keak Toolbar] HTML (first 300 chars):', element.outerHTML.substring(0, 300));
|
|
1097
1280
|
console.log('[Keak Toolbar] All attributes:', Array.from(element.attributes).map(a => `${a.name}="${a.value}"`).join(', '));
|
|
1281
|
+
// Check if element is inside a dynamic list (.map(), .forEach(), etc.)
|
|
1282
|
+
const mapCheck = isElementInDynamicList(element);
|
|
1283
|
+
if (mapCheck.isInMap) {
|
|
1284
|
+
console.log('[Keak Toolbar] ⚠️ Element is part of a dynamic list, preventing selection');
|
|
1285
|
+
console.log('[Keak Toolbar] Reason:', mapCheck.reason);
|
|
1286
|
+
// Show a brief visual feedback
|
|
1287
|
+
element.style.transition = 'all 0.3s';
|
|
1288
|
+
element.style.outline = '3px solid #ef4444';
|
|
1289
|
+
setTimeout(() => { element.style.outline = ''; }, 2000);
|
|
1290
|
+
// Don't proceed with selection
|
|
1291
|
+
setIsSelecting(false);
|
|
1292
|
+
return;
|
|
1293
|
+
}
|
|
1098
1294
|
setSelectedElement(element);
|
|
1099
1295
|
setIsSelecting(false);
|
|
1100
1296
|
updateSelectedHighlight(element);
|