open-web-inspector
Version:
The open source web element inspector - AI-controllable DOM inspection with live CSS editing, hover highlighting, and developer tools integration
1 lines • 95.6 kB
JavaScript
!function(){"use strict";if(!window.OpenWebInspector){class e{constructor(){this.isAnalyzeMode=!1,this.currentHighlightedElement=null,this.popup=null,this.overlay=null,this.originalCursor=null,this.cssChanges=new Map,this.currentElement=null,this.actualSelectedElement=null,this.init()}init(){this.createStyles(),this.setupEventListeners(),this.setupExternalAPI(),this.setupKeyboardShortcuts(),this.setupDOMEvents(),this.checkURLParameters()}createStyles(){const e=document.createElement("style");e.id="open-web-inspector-styles",e.textContent="\n .open-web-inspector-highlight {\n position: relative !important;\n outline: 2px solid #ff4444 !important;\n outline-offset: 1px !important;\n box-shadow: 0 0 0 1px rgba(255, 68, 68, 0.3) !important;\n z-index: 9998 !important;\n }\n\n .open-web-inspector-popup {\n position: fixed !important;\n top: 50% !important;\n left: 50% !important;\n transform: translate(-50%, -50%) !important;\n width: 98vw !important;\n max-width: 1200px !important;\n max-height: 90vh !important;\n background: white !important;\n border: 1px solid #ddd !important;\n border-radius: 10px !important;\n box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;\n z-index: 10001 !important;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;\n font-size: 15px !important;\n overflow: hidden !important;\n }\n\n .open-web-inspector-popup-header {\n background: #f8f9fa !important;\n padding: 20px 25px !important;\n border-bottom: 1px solid #ddd !important;\n display: flex !important;\n justify-content: space-between !important;\n align-items: center !important;\n }\n\n .open-web-inspector-popup-title {\n margin: 0 !important;\n font-size: 20px !important;\n font-weight: 600 !important;\n color: #333 !important;\n }\n\n .open-web-inspector-popup-close {\n background: none !important;\n border: none !important;\n font-size: 24px !important;\n cursor: pointer !important;\n color: #666 !important;\n padding: 0 !important;\n width: 32px !important;\n height: 32px !important;\n border-radius: 50% !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n transition: background-color 0.2s !important;\n }\n\n .open-web-inspector-popup-close:hover {\n background-color: #f0f0f0 !important;\n }\n\n .open-web-inspector-ai-snapshot-btn {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;\n border: none !important;\n color: white !important;\n padding: 8px 16px !important;\n border-radius: 6px !important;\n font-size: 13px !important;\n font-weight: 600 !important;\n cursor: pointer !important;\n transition: all 0.2s ease !important;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;\n margin-right: 12px !important;\n }\n\n .open-web-inspector-ai-snapshot-btn:hover {\n transform: translateY(-1px) !important;\n box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;\n background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;\n }\n\n .open-web-inspector-ai-snapshot-btn:active {\n transform: translateY(0) !important;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;\n }\n\n .open-web-inspector-ai-snapshot-btn.copied {\n background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;\n }\n\n .open-web-inspector-popup-header-actions {\n display: flex !important;\n align-items: center !important;\n gap: 8px !important;\n }\n\n .open-web-inspector-screenshot-btn {\n background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;\n border: none !important;\n color: white !important;\n padding: 8px 16px !important;\n border-radius: 6px !important;\n font-size: 13px !important;\n font-weight: 600 !important;\n cursor: pointer !important;\n transition: all 0.2s ease !important;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;\n margin-right: 8px !important;\n }\n\n .open-web-inspector-screenshot-btn:hover {\n transform: translateY(-1px) !important;\n box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;\n background: linear-gradient(135deg, #ff5252 0%, #e53e3e 100%) !important;\n }\n\n .open-web-inspector-screenshot-btn:active {\n transform: translateY(0) !important;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;\n }\n\n .open-web-inspector-screenshot-btn.capturing {\n background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%) !important;\n }\n\n .open-web-inspector-screenshot-btn.copied {\n background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;\n }\n\n .open-web-inspector-css-value-input {\n background: transparent !important;\n border: 1px solid transparent !important;\n color: #e74c3c !important;\n font-family: 'Courier New', monospace !important;\n font-size: 11px !important;\n padding: 2px 4px !important;\n border-radius: 3px !important;\n min-width: 60px !important;\n max-width: 200px !important;\n transition: all 0.2s ease !important;\n }\n\n .open-web-inspector-css-value-input:hover {\n border-color: #3498db !important;\n background: rgba(52, 152, 219, 0.1) !important;\n }\n\n .open-web-inspector-css-value-input:focus {\n outline: none !important;\n border-color: #3498db !important;\n background: rgba(52, 152, 219, 0.15) !important;\n box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2) !important;\n }\n\n .open-web-inspector-css-value-input.changed {\n background: rgba(46, 204, 113, 0.15) !important;\n border-color: #2ecc71 !important;\n color: #27ae60 !important;\n font-weight: 600 !important;\n }\n\n .open-web-inspector-css-reset-btn {\n background: #95a5a6 !important;\n border: none !important;\n color: white !important;\n padding: 2px 6px !important;\n border-radius: 3px !important;\n font-size: 10px !important;\n cursor: pointer !important;\n margin-left: 8px !important;\n opacity: 0 !important;\n transition: opacity 0.2s ease !important;\n }\n\n .open-web-inspector-css-property:hover .open-web-inspector-css-reset-btn {\n opacity: 1 !important;\n }\n\n .open-web-inspector-css-reset-btn:hover {\n background: #7f8c8d !important;\n }\n\n .open-web-inspector-css-rule-group {\n background: #ffffff !important;\n border: 1px solid #e2e8f0 !important;\n border-radius: 6px !important;\n margin-bottom: 12px !important;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;\n overflow: hidden !important;\n }\n\n .open-web-inspector-css-rule-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;\n color: white !important;\n padding: 8px 12px !important;\n cursor: pointer !important;\n display: flex !important;\n align-items: center !important;\n justify-content: space-between !important;\n font-weight: 600 !important;\n font-size: 12px !important;\n user-select: none !important;\n transition: all 0.2s ease !important;\n }\n\n .open-web-inspector-css-rule-header:hover {\n background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;\n transform: translateY(-1px) !important;\n }\n\n .open-web-inspector-css-rule-header.collapsed {\n background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%) !important;\n }\n\n .open-web-inspector-css-rule-selector {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;\n font-size: 11px !important;\n }\n\n .open-web-inspector-css-rule-toggle {\n font-size: 14px !important;\n transition: transform 0.2s ease !important;\n }\n\n .open-web-inspector-css-rule-toggle.collapsed {\n transform: rotate(-90deg) !important;\n }\n\n .open-web-inspector-css-rule-content {\n display: block !important;\n overflow: hidden !important;\n transition: max-height 0.3s ease !important;\n }\n\n .open-web-inspector-css-rule-content.collapsed {\n max-height: 0 !important;\n }\n\n .open-web-inspector-css-rule-properties {\n padding: 8px !important;\n }\n\n .open-web-inspector-css-rules-container {\n padding: 0 !important;\n margin: 0 !important;\n }\n\n .open-web-inspector-css-inherited-rule {\n border-left: 3px solid #f39c12 !important;\n background: linear-gradient(135deg, #fff3cd 0%, #fef9e7 100%) !important;\n }\n\n .open-web-inspector-css-inherited-rule .open-web-inspector-css-rule-header {\n background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;\n }\n\n .open-web-inspector-css-inherited-rule .open-web-inspector-css-rule-header:hover {\n background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;\n }\n\n .open-web-inspector-popup-content {\n padding: 0 !important;\n max-height: calc(90vh - 70px) !important;\n overflow-y: auto !important;\n }\n\n .open-web-inspector-tabs {\n display: flex !important;\n border-bottom: 1px solid #ddd !important;\n background: #f8f9fa !important;\n }\n\n .open-web-inspector-tab {\n padding: 12px 24px !important;\n background: none !important;\n border: none !important;\n cursor: pointer !important;\n font-size: 15px !important;\n font-weight: 500 !important;\n color: #666 !important;\n transition: all 0.2s !important;\n border-bottom: 3px solid transparent !important;\n }\n\n .open-web-inspector-tab.active {\n color: #4299e1 !important;\n border-bottom-color: #4299e1 !important;\n background: white !important;\n }\n\n .open-web-inspector-tab:hover {\n background: #e2e8f0 !important;\n }\n\n .open-web-inspector-tab-content {\n padding: 20px 25px !important;\n display: none !important;\n }\n\n .open-web-inspector-tab-content.active {\n display: block !important;\n }\n\n .open-web-inspector-html-content {\n background: #f8f9fa !important;\n border: 1px solid #e2e8f0 !important;\n border-radius: 4px !important;\n padding: 15px !important;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;\n font-size: 13px !important;\n line-height: 1.5 !important;\n white-space: pre-wrap !important;\n overflow-x: auto !important;\n max-height: 400px !important;\n overflow-y: auto !important;\n margin: 0 !important;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;\n }\n\n .open-web-inspector-css-grid {\n display: grid !important;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;\n gap: 1px !important;\n background: #f0f0f0 !important;\n border: 1px solid #e2e8f0 !important;\n border-radius: 4px !important;\n overflow: hidden !important;\n margin: 0 !important;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;\n }\n\n .open-web-inspector-css-property {\n display: flex !important;\n justify-content: space-between !important;\n align-items: center !important;\n padding: 6px 10px !important;\n background: white !important;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;\n font-size: 11px !important;\n line-height: 1.3 !important;\n min-height: 32px !important;\n border-bottom: 1px solid #f0f0f0 !important;\n }\n\n .open-web-inspector-css-property:nth-child(even) {\n background-color: #f8f9fa !important;\n }\n\n .open-web-inspector-css-property-name {\n font-weight: 600 !important;\n color: #e53e3e !important;\n min-width: 100px !important;\n max-width: 130px !important;\n margin-right: 8px !important;\n flex-shrink: 0 !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n }\n\n .open-web-inspector-css-property-value {\n color: #2d3748 !important;\n text-align: right !important;\n flex: 1 !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n font-size: 11px !important;\n }\n\n .open-web-inspector-overlay {\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n background: rgba(0, 0, 0, 0.5) !important;\n z-index: 10000 !important;\n }\n\n .open-web-inspector-analyze-cursor {\n cursor: crosshair !important;\n }\n\n .open-web-inspector-element-tree-section {\n background: #ffffff !important;\n border: 1px solid #e2e8f0 !important;\n border-radius: 6px !important;\n margin-bottom: 25px !important;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;\n }\n\n .open-web-inspector-element-tree-header {\n background: #4299e1 !important;\n color: white !important;\n padding: 10px 15px !important;\n border-radius: 6px 6px 0 0 !important;\n font-size: 13px !important;\n font-weight: 600 !important;\n margin: 0 !important;\n border-bottom: 1px solid #3182ce !important;\n }\n\n .open-web-inspector-element-path {\n background: #f7fafc !important;\n padding: 8px 12px !important;\n border-radius: 0 0 6px 6px !important;\n margin: 0 !important;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;\n font-size: 13px !important;\n color: #4a5568 !important;\n white-space: pre !important;\n overflow-x: auto !important;\n line-height: 1.5 !important;\n max-height: 250px !important;\n overflow-y: auto !important;\n }\n\n .open-web-inspector-content-section {\n background: #ffffff !important;\n border: 1px solid #e2e8f0 !important;\n border-radius: 6px !important;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;\n overflow: hidden !important;\n }\n\n .open-web-inspector-element-path .tree-element {\n cursor: pointer !important;\n padding: 2px 4px !important;\n border-radius: 3px !important;\n transition: all 0.2s ease !important;\n display: inline-block !important;\n }\n\n .open-web-inspector-element-path .tree-element:hover {\n background-color: #e2e8f0 !important;\n color: #2d3748 !important;\n }\n\n .open-web-inspector-element-path .tree-element.selected {\n background-color: #4299e1 !important;\n color: white !important;\n font-weight: 600 !important;\n }\n\n .open-web-inspector-element-path .tree-element.selected:hover {\n background-color: #3182ce !important;\n }\n\n\n\n .open-web-inspector-preview-content {\n transform: scale(0.8) !important;\n transform-origin: top left !important;\n width: 125% !important;\n pointer-events: none !important;\n position: relative !important;\n overflow: hidden !important;\n padding: 15px !important;\n border: 1px solid #e2e8f0 !important;\n border-radius: 4px !important;\n background: #ffffff !important;\n max-height: 300px !important;\n overflow-y: auto !important;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;\n }\n\n .open-web-inspector-preview-content * {\n pointer-events: none !important;\n max-width: none !important;\n position: static !important;\n }\n\n .open-web-inspector-preview-content img {\n max-width: 100% !important;\n height: auto !important;\n }\n\n .open-web-inspector-preview-content script {\n display: none !important;\n }\n\n .open-web-inspector-sub-tabs {\n display: flex !important;\n border-bottom: 1px solid #e2e8f0 !important;\n background: #f8f9fa !important;\n margin: 0 !important;\n padding: 0 20px !important;\n }\n\n .open-web-inspector-sub-tab {\n padding: 8px 16px !important;\n background: none !important;\n border: none !important;\n cursor: pointer !important;\n font-size: 13px !important;\n font-weight: 500 !important;\n color: #666 !important;\n transition: all 0.2s !important;\n border-bottom: 2px solid transparent !important;\n position: relative !important;\n }\n\n .open-web-inspector-sub-tab.active {\n color: #4299e1 !important;\n border-bottom-color: #4299e1 !important;\n background: white !important;\n }\n\n .open-web-inspector-sub-tab:hover {\n background: #e2e8f0 !important;\n }\n\n .open-web-inspector-sub-tab.active:hover {\n background: white !important;\n }\n\n .open-web-inspector-sub-tab-content {\n display: none !important;\n padding: 20px !important;\n }\n\n .open-web-inspector-sub-tab-content.active {\n display: block !important;\n }\n\n /* ========== NEW FAB-STYLE POPUP ========== */\n .open-web-inspector-fab-popup {\n position: fixed !important;\n z-index: 999999 !important;\n background: #2d3748 !important;\n border-radius: 25px !important;\n padding: 8px 12px !important;\n display: flex !important;\n gap: 4px !important;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;\n backdrop-filter: blur(10px) !important;\n border: 1px solid rgba(255, 255, 255, 0.1) !important;\n animation: fabSlideIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;\n }\n\n @keyframes fabSlideIn {\n from {\n opacity: 0;\n transform: scale(0.8) translateY(10px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }\n\n .open-web-inspector-fab-button {\n width: 52px !important;\n height: 52px !important;\n border-radius: 18px !important;\n border: none !important;\n background: transparent !important;\n color: #e2e8f0 !important;\n cursor: pointer !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n justify-content: center !important;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;\n font-size: 14px !important;\n position: relative !important;\n overflow: hidden !important;\n padding: 6px 4px 4px 4px !important;\n gap: 2px !important;\n }\n\n .open-web-inspector-fab-button:before {\n content: '' !important;\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n background: rgba(255, 255, 255, 0.1) !important;\n border-radius: 18px !important;\n opacity: 0 !important;\n transition: opacity 0.2s !important;\n }\n\n .open-web-inspector-fab-label {\n font-size: 9px !important;\n font-weight: 500 !important;\n color: inherit !important;\n text-align: center !important;\n line-height: 1 !important;\n margin-top: 1px !important;\n letter-spacing: 0.3px !important;\n opacity: 0.9 !important;\n z-index: 1 !important;\n position: relative !important;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;\n }\n\n .open-web-inspector-fab-button:hover:before {\n opacity: 1 !important;\n }\n\n .open-web-inspector-fab-button:hover .open-web-inspector-fab-label {\n opacity: 1 !important;\n transform: translateY(-1px) !important;\n }\n\n .open-web-inspector-fab-button:hover {\n transform: scale(1.05) !important;\n color: white !important;\n }\n\n .open-web-inspector-fab-button:active {\n transform: scale(0.95) !important;\n }\n\n .open-web-inspector-fab-button svg {\n width: 16px !important;\n height: 16px !important;\n fill: currentColor !important;\n z-index: 1 !important;\n position: relative !important;\n }\n\n /* Color variants for different buttons */\n .open-web-inspector-fab-button.code {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;\n }\n\n .open-web-inspector-fab-button.screenshot {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;\n }\n\n .open-web-inspector-fab-button.natural-language {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;\n }\n\n .open-web-inspector-fab-tooltip {\n position: absolute !important;\n bottom: -40px !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n background: #1a202c !important;\n color: white !important;\n padding: 4px 8px !important;\n border-radius: 6px !important;\n font-size: 11px !important;\n white-space: nowrap !important;\n opacity: 0 !important;\n pointer-events: none !important;\n transition: opacity 0.2s !important;\n z-index: 1000000 !important;\n }\n\n .open-web-inspector-fab-button:hover .open-web-inspector-fab-tooltip {\n opacity: 1 !important;\n }\n\n /* Panel styles for when buttons are clicked */\n .open-web-inspector-panel {\n position: fixed !important;\n z-index: 999998 !important;\n background: white !important;\n border-radius: 12px !important;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;\n border: 1px solid #e2e8f0 !important;\n min-width: 350px !important;\n max-width: 500px !important;\n max-height: 600px !important;\n overflow: hidden !important;\n animation: panelSlideIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;\n }\n\n @keyframes panelSlideIn {\n from {\n opacity: 0;\n transform: scale(0.9) translateY(20px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }\n\n .open-web-inspector-panel-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;\n color: white !important;\n padding: 16px 20px !important;\n font-weight: 600 !important;\n font-size: 16px !important;\n display: flex !important;\n justify-content: space-between !important;\n align-items: center !important;\n cursor: move !important;\n }\n\n .open-web-inspector-panel-close {\n background: rgba(255, 255, 255, 0.2) !important;\n border: none !important;\n color: white !important;\n width: 24px !important;\n height: 24px !important;\n border-radius: 12px !important;\n cursor: pointer !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n transition: all 0.2s !important;\n }\n\n .open-web-inspector-panel-close:hover {\n background: rgba(255, 255, 255, 0.3) !important;\n transform: scale(1.1) !important;\n }\n\n .open-web-inspector-panel-header-actions {\n display: flex !important;\n align-items: center !important;\n gap: 10px !important;\n }\n\n .open-web-inspector-copy-ai-instructions-btn {\n background: rgba(255, 255, 255, 0.9) !important;\n border: 1px solid rgba(255, 255, 255, 0.3) !important;\n color: #4a5568 !important;\n padding: 6px 12px !important;\n border-radius: 6px !important;\n font-size: 12px !important;\n cursor: pointer !important;\n transition: all 0.2s ease !important;\n font-weight: 600 !important;\n backdrop-filter: blur(10px) !important;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;\n }\n\n .open-web-inspector-copy-ai-instructions-btn:hover {\n background: rgba(255, 255, 255, 1) !important;\n transform: translateY(-1px) !important;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;\n color: #2d3748 !important;\n }\n\n /* Natural Language Panel Styling */\n .open-web-inspector-natural-language-panel {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;\n border: none !important;\n box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4) !important;\n z-index: 1000000 !important; /* Higher than FAB popup (999999) */\n }\n\n .open-web-inspector-natural-language-panel .open-web-inspector-panel-header {\n background: rgba(255, 255, 255, 0.1) !important;\n backdrop-filter: blur(10px) !important;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;\n }\n\n .open-web-inspector-ask-ai-title {\n display: flex !important;\n flex-direction: column !important;\n gap: 2px !important;\n }\n\n .open-web-inspector-ask-ai-main-title {\n color: white !important;\n font-weight: 700 !important;\n font-size: 16px !important;\n line-height: 1.2 !important;\n }\n\n .open-web-inspector-ask-ai-subtitle {\n color: rgba(255, 255, 255, 0.8) !important;\n font-weight: 400 !important;\n font-size: 12px !important;\n line-height: 1.2 !important;\n opacity: 0.9 !important;\n }\n\n .open-web-inspector-natural-language-panel .open-web-inspector-panel-content {\n background: rgba(255, 255, 255, 0.95) !important;\n backdrop-filter: blur(10px) !important;\n }\n\n /* Code Panel Title Styling */\n .open-web-inspector-code-panel-title {\n display: flex !important;\n flex-direction: column !important;\n gap: 2px !important;\n }\n\n .open-web-inspector-code-panel-main-title {\n color: white !important;\n font-weight: 700 !important;\n font-size: 16px !important;\n line-height: 1.2 !important;\n }\n\n .open-web-inspector-code-panel-subtitle {\n color: rgba(255, 255, 255, 0.8) !important;\n font-weight: 400 !important;\n font-size: 12px !important;\n line-height: 1.2 !important;\n opacity: 0.9 !important;\n }\n\n .open-web-inspector-panel-content {\n padding: 0 !important;\n overflow-y: auto !important;\n max-height: 520px !important;\n }\n\n /* Code panel specific styles */\n .open-web-inspector-code-tabs {\n display: flex !important;\n background: #f8f9fa !important;\n border-bottom: 1px solid #e2e8f0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n .open-web-inspector-code-tab {\n flex: 1 !important;\n padding: 12px 20px !important;\n background: none !important;\n border: none !important;\n cursor: pointer !important;\n font-size: 14px !important;\n font-weight: 500 !important;\n color: #666 !important;\n transition: all 0.2s !important;\n border-bottom: 3px solid transparent !important;\n }\n\n .open-web-inspector-code-tab.active {\n color: #4299e1 !important;\n border-bottom-color: #4299e1 !important;\n background: white !important;\n }\n\n .open-web-inspector-code-tab:hover {\n background: #e2e8f0 !important;\n }\n\n .open-web-inspector-code-tab.active:hover {\n background: white !important;\n }\n\n .open-web-inspector-code-tab-content {\n display: none !important;\n }\n\n .open-web-inspector-code-tab-content.active {\n display: block !important;\n }\n ",document.head.appendChild(e)}setupEventListeners(){this.handleMouseOver=this.handleMouseOver.bind(this),this.handleMouseOut=this.handleMouseOut.bind(this),this.handleClick=this.handleClick.bind(this),this.handleKeyPress=this.handleKeyPress.bind(this),document.addEventListener("keydown",this.handleKeyPress)}setupExternalAPI(){this._apiInstance=this}attachGlobalAPI(){const e=this;e._originalMethods={enableAnalyzeMode:e.enableAnalyzeMode,disableAnalyzeMode:e.disableAnalyzeMode,toggleAnalyzeMode:e.toggleAnalyzeMode},e.enable=()=>(e.isAnalyzeMode||e.enableAnalyzeMode(),!0),e.disable=()=>(e.isAnalyzeMode&&e.disableAnalyzeMode(),!0),e.toggle=()=>(e.toggleAnalyzeMode(),e.isAnalyzeMode),e.isActive=()=>e.isAnalyzeMode,e.getVersion=()=>"2.0.0",e.selectElement=t=>{e.isAnalyzeMode||e.enableAnalyzeMode();const n=document.querySelector(t);return!!n&&(e.showElementDetails(n),!0)}}setupKeyboardShortcuts(){document.addEventListener("keydown",e=>{e.ctrlKey&&e.shiftKey&&"E"===e.key&&(e.preventDefault(),this.toggleAnalyzeMode()),"Escape"===e.key&&this.isAnalyzeMode&&(e.preventDefault(),this.disableAnalyzeMode())})}setupDOMEvents(){const e=this;document.addEventListener("open-web-inspector-enable",()=>{e.enable?e.enable():e.enableAnalyzeMode()}),document.addEventListener("open-web-inspector-disable",()=>{e.disable?e.disable():e.disableAnalyzeMode()}),document.addEventListener("open-web-inspector-toggle",()=>{e.toggle?e.toggle():e.toggleAnalyzeMode()}),document.addEventListener("open-web-inspector-select",t=>{if(t.detail&&t.detail.selector)if(e.selectElement)e.selectElement(t.detail.selector);else{e.isAnalyzeMode||e.enableAnalyzeMode();const n=document.querySelector(t.detail.selector);n&&e.showElementDetails(n)}})}checkURLParameters(){const e=new URLSearchParams(window.location.search),t=e.get("open-web-inspector"),n=e.get("inspect"),o=this;"true"!==t&&"1"!==t&&"enable"!==t||setTimeout(()=>{o.enable?o.enable():o.enableAnalyzeMode()},100),n&&setTimeout(()=>{if(o.selectElement)o.selectElement(n);else{o.isAnalyzeMode||o.enableAnalyzeMode();const e=document.querySelector(n);e&&o.showElementDetails(e)}},200)}toggleAnalyzeMode(){this.isAnalyzeMode?this.disableAnalyzeMode():this.enableAnalyzeMode()}enableAnalyzeMode(){this.isAnalyzeMode=!0,document.addEventListener("mouseover",this.handleMouseOver),document.addEventListener("mouseout",this.handleMouseOut),document.addEventListener("click",this.handleClick),this.originalCursor=document.body.style.cursor,document.body.classList.add("open-web-inspector-analyze-cursor")}disableAnalyzeMode(){this.isAnalyzeMode=!1,document.removeEventListener("mouseover",this.handleMouseOver),document.removeEventListener("mouseout",this.handleMouseOut),document.removeEventListener("click",this.handleClick),document.body.classList.remove("open-web-inspector-analyze-cursor"),this.removeHighlight(),this.closePopup()}handleMouseOver(e){this.isAnalyzeMode&&(this.isOurElement(e.target)||this.highlightElement(e.target))}handleMouseOut(e){this.isAnalyzeMode&&(e.target.contains(e.relatedTarget)||this.removeHighlight())}handleClick(e){this.isAnalyzeMode&&(this.isOurElement(e.target)||(e.preventDefault(),e.stopPropagation(),this.showElementDetails(e.target)))}handleKeyPress(e){"Escape"===e.key&&this.closePopup()}isOurElement(e){return e.closest(".open-web-inspector-popup, .open-web-inspector-overlay, .open-web-inspector-fab-popup, .open-web-inspector-panel, .open-web-inspector-natural-language-panel")||"analyzeToggle"===e.id||e.classList.contains("open-web-inspector-popup")||e.classList.contains("open-web-inspector-overlay")||e.classList.contains("open-web-inspector-fab-popup")||e.classList.contains("open-web-inspector-panel")||e.classList.contains("open-web-inspector-natural-language-panel")}highlightElement(e){this.removeHighlight(),this.currentHighlightedElement=e,e.classList.add("open-web-inspector-highlight")}removeHighlight(){this.currentHighlightedElement&&(this.currentHighlightedElement.classList.remove("open-web-inspector-highlight"),this.currentHighlightedElement=null)}showElementDetails(e){this.removeHighlight(),this.createPopup(e)}createPopup(e){this.closePopup(),this.currentElement=e,e.className.includes("open-web-inspector")||(this.actualSelectedElement=e),this.createFabPopup(e)}createFabPopup(e){const t=e.getBoundingClientRect(),n=Math.min(t.right+10,window.innerWidth-200),o=Math.min(t.top,window.innerHeight-60);this.fabPopup=document.createElement("div"),this.fabPopup.className="open-web-inspector-fab-popup",this.fabPopup.style.left=n+"px",this.fabPopup.style.top=o+"px",this.fabPopup.innerHTML='\n <button class="open-web-inspector-fab-button code" data-action="code">\n <svg viewBox="0 0 24 24">\n <path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z"/>\n </svg>\n <span class="open-web-inspector-fab-label">Code</span>\n <div class="open-web-inspector-fab-tooltip">Code Inspector</div>\n </button>\n <button class="open-web-inspector-fab-button screenshot" data-action="screenshot">\n <svg viewBox="0 0 24 24">\n <path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"/>\n </svg>\n <span class="open-web-inspector-fab-label">Capture</span>\n <div class="open-web-inspector-fab-tooltip">Screenshot</div>\n </button>\n <button class="open-web-inspector-fab-button natural-language" data-action="natural-language">\n <svg viewBox="0 0 24 24">\n \x3c!-- Chat bubble --\x3e\n <path d="M20 2H4A2 2 0 0 0 2 4V16A2 2 0 0 0 4 18H18L22 22V4A2 2 0 0 0 20 2M4 4H20V16H17.17L16 17.17L14.83 16H4V4M6 7V9H12V7H6M6 11V13H15V11H6Z"/>\n \x3c!-- AI sparkles --\x3e\n <circle cx="17" cy="6" r="0.8" fill="currentColor" opacity="0.6"/>\n <circle cx="18" cy="8" r="0.6" fill="currentColor" opacity="0.4"/>\n <circle cx="16" cy="9" r="0.5" fill="currentColor" opacity="0.5"/>\n </svg>\n <span class="open-web-inspector-fab-label">Ask</span>\n <div class="open-web-inspector-fab-tooltip">Ask AI to modify this element</div>\n </button>\n ',document.body.appendChild(this.fabPopup),this.setupFabHandlers(e)}setupFabHandlers(e){this.fabPopup.querySelectorAll(".open-web-inspector-fab-button").forEach(t=>{t.addEventListener("click",n=>{switch(n.stopPropagation(),t.dataset.action){case"code":this.openCodePanel(e);break;case"screenshot":this.takeElementScreenshot(e);break;case"natural-language":this.openNaturalLanguageInterface(e)}})}),this.fabOutsideClickHandler&&document.removeEventListener("click",this.fabOutsideClickHandler),this.fabOutsideClickHandler=this.handleFabOutsideClick.bind(this),setTimeout(()=>{this.cssPanel||this.htmlPanel||document.addEventListener("click",this.fabOutsideClickHandler,{once:!0})},100)}handleFabOutsideClick(e){this.isOurElement(e.target)||e.target.closest(".open-web-inspector-fab-popup, .open-web-inspector-panel")||this.closePopup()}openCSSPanel(e){this.closePanels();const{x:t,y:n}=this.calculatePanelPosition();this.cssPanel=document.createElement("div"),this.cssPanel.className="open-web-inspector-panel",this.cssPanel.style.left=t+"px",this.cssPanel.style.top=n+"px",this.cssPanel.innerHTML=`\n <div class="open-web-inspector-panel-header">\n <span>🎨 CSS Editor - ${this.getElementTitle(e)}</span>\n <button class="open-web-inspector-panel-close">×</button>\n </div>\n <div class="open-web-inspector-panel-content">\n <div style="padding: 20px;">\n <div style="color: #3498db; font-weight: normal; font-size: 12px; margin-bottom: 15px; padding: 8px 12px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #3498db;">✏️ Edit live! 📁 Expand/collapse 👨👩👧👦 Shows inherited</div>\n <div class="open-web-inspector-css-rules-container">\n ${this.generateCSSStyles(e)}\n </div>\n </div>\n </div>\n `,document.body.appendChild(this.cssPanel),this.setupPanelHandlers(this.cssPanel,e),this.setupCSSEditing(),this.setupCSSRuleCollapsing(),this.makePanelDraggable(this.cssPanel)}openHTMLPanel(e){this.closePanels();const{x:t,y:n}=this.calculatePanelPosition();this.htmlPanel=document.createElement("div"),this.htmlPanel.className="open-web-inspector-panel",this.htmlPanel.style.left=t+"px",this.htmlPanel.style.top=n+"px",this.htmlPanel.innerHTML=`\n <div class="open-web-inspector-panel-header">\n <span>📄 HTML & Tree - ${this.getElementTitle(e)}</span>\n <button class="open-web-inspector-panel-close">×</button>\n </div>\n <div class="open-web-inspector-panel-content">\n <div style="padding: 20px;">\n <div class="open-web-inspector-element-path" style="background: #f8f9fa; padding: 8px 12px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 12px; white-space: pre; overflow-x: auto; line-height: 1.6; margin-bottom: 20px;">${this.getElementPath(e)}</div>\n \n <div class="open-web-inspector-sub-tabs">\n <button class="open-web-inspector-sub-tab active" data-tab="preview">Preview</button>\n <button class="open-web-inspector-sub-tab" data-tab="html">HTML Structure</button>\n </div>\n \n <div class="open-web-inspector-sub-tab-content active" data-tab-content="preview">\n <div class="open-web-inspector-preview-content" style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-top: 10px; min-height: 100px; border: 1px solid #e2e8f0;">\n ${this.getElementHTML(e)}\n </div>\n </div>\n \n <div class="open-web-inspector-sub-tab-content" data-tab-content="html">\n <div class="open-web-inspector-html-content" style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-top: 10px; font-family: 'Courier New', monospace; font-size: 11px; white-space: pre-wrap; overflow-x: auto; min-height: 100px; border: 1px solid #e2e8f0;"></div>\n </div>\n </div>\n </div>\n `,document.body.appendChild(this.htmlPanel),this.setupPanelHandlers(this.htmlPanel,e),this.setupTreeElementHandlers(),this.setupSubTabs(),this.makePanelDraggable(this.htmlPanel);const o=this.htmlPanel.querySelector(".open-web-inspector-html-content");if(o){const t=this.getElementHTML(e);o.innerHTML="",o.appendChild(document.createTextNode(t))}}calculatePanelPosition(){let e=window.innerWidth-450-20,t=20;if(this.fabPopup){const n=this.fabPopup.getBoundingClientRect();n.left<e+450&&n.top<t+600&&(t=Math.max(20,window.innerHeight-600-20))}return{x:e,y:t}}setupPanelHandlers(e,t){e.querySelector(".open-web-inspector-panel-close").addEventListener("click",()=>this.closePanels()),this.panelOutsideClickHandler&&document.removeEventListener("click",this.panelOutsideClickHandler),this.panelOutsideClickHandler=this.handlePanelOutsideClick.bind(this),setTimeout(()=>{document.addEventListener("click",this.panelOutsideClickHandler,{once:!0})},100)}handlePanelOutsideClick(e){this.isOurElement(e.target)?setTimeout(()=>{this.panelOutsideClickHandler&&document.addEventListener("click",this.panelOutsideClickHandler,{once:!0})},100):this.closePopup()}makePanelDraggable(e){const t=e.querySelector(".open-web-inspector-panel-header");let n,o,i,a,r=!1;t.addEventListener("mousedown",t=>{r=!0,n=t.clientX,o=t.clientY,i=parseInt(e.style.left),a=parseInt(e.style.top),document.addEventListener("mousemove",s),document.addEventListener("mouseup",p),t.preventDefault()});const s=t=>{if(!r)return;const s=t.clientX-n,p=t.clientY-o;e.style.left=i+s+"px",e.style.top=a+p+"px"},p=()=>{r=!1,document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",p)}}openCodePanel(e){this.closePanels();const{x:t,y:n}=this.calculateCodePanelPosition();this.codePanel=document.createElement("div"),this.codePanel.className="open-web-inspector-panel",this.codePanel.style.left=t+"px",this.codePanel.style.top=n+"px",this.codePanel.style.width="650px",this.codePanel.style.maxHeight="700px",this.codePanel.innerHTML=`\n <div class="open-web-inspector-panel-header">\n <div class="open-web-inspector-code-panel-title">\n <div class="open-web-inspector-code-panel-main-title">📝 Code Inspector</div>\n <div class="open-web-inspector-code-panel-subtitle">${this.getElementTitle(e)}</div>\n </div>\n <div class="open-web-inspector-panel-header-actions">\n <button class="open-web-inspector-copy-ai-instructions-btn" type="button">🤖 Copy AI Instructions</button>\n <button class="open-web-inspector-panel-close">×</button>\n </div>\n </div>\n <div class="open-web-inspector-panel-content">\n <div class="open-web-inspector-code-tabs">\n <button class="open-web-inspector-code-tab active" data-tab="html">📄 HTML & Tree</button>\n <button class="open-web-inspector-code-tab" data-tab="css">🎨 CSS Styles</button>\n </div>\n \n \x3c!-- HTML Tab Content --\x3e\n <div class="open-web-inspector-code-tab-content active" data-tab-content="html">\n <div style="padding: 20px;">\n <div class="open-web-inspector-element-path" style="background: #f8f9fa; padding: 8px 12px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 12px; white-space: pre; overflow-x: auto; line-height: 1.6; margin-bottom: 20px;">${this.getElementPath(e)}</div>\n \n <div class="open-web-inspector-sub-tabs">\n <button class="open-web-inspector-sub-tab active" data-tab="preview">Preview</button>\n <button class="open-web-inspector-sub-tab" data-tab="html">HTML Structure</button>\n </div>\n \n <div class="open-web-inspector-sub-tab-content active" data-tab-content="preview">\n <div class="open-web-inspector-preview-content" style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-top: 10px; min-height: 100px; border: 1px solid #e2e8f0;">\n ${this.getElementHTML(e)}\n </div>\n </div>\n \n <div class="open-web-inspector-sub-tab-content" data-tab-content="html">\n <div class="open-web-inspector-html-content" style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-top: 10px; font-family: 'Courier New', monospace; font-size: 11px; white-space: pre-wrap; overflow-x: auto; min-height: 100px; border: 1px solid #e2e8f0;"></div>\n </div>\n </div>\n </div>\n \n \x3c!-- CSS Tab Content --\x3e\n <div class="open-web-inspector-code-tab-content" data-tab-content="css">\n <div style="padding: 20px;">\n <div style="color: #3498db; font-weight: normal; font-size: 12px; margin-bottom: 15px; padding: 8px 12px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #3498db;">✏️ Edit live! 📁 Expand/collapse 👨👩👧👦 Shows inherited</div>\n <div class="open-web-inspector-css-rules-container">\n ${this.generateCSSStyles(e)}\n </div>\n </div>\n </div>\n </div>\n `,document.body.appendChild(this.codePanel),this.setupCodePanelHandlers(this.codePanel,e),this.setupTreeElementHandlers(),this.setupSubTabs(),this.setupCSSEditing(),this.setupCSSRuleCollapsing(),this.setupCodeTabs(),this.makePanelDraggable(this.codePanel);const o=this.codePanel.querySelector(".open-web-inspector-html-content");if(o){const t=this.getElementHTML(e);o.innerHTML="",o.appendChild(document.createTextNode(t))}}calculateCodePanelPosition(){let e=window.innerWidth-650-20,t=20;if(this.fabPopup){const n=this.fabPopup.getBoundingClientRect();n.left<e+650&&n.top<t+700&&(t=Math.max(20,window.innerHeight-700-20))}return{x:e,y:t}}setupCodePanelHandlers(e,t){e.querySelector(".open-web-inspector-panel-close").addEventListener("click",()=>this.closePanels());const n=e.querySelector(".open-web-inspector-copy-ai-instructions-btn");n&&n.addEventListener("click",()=>this.generateAISnapshot(t)),this.panelOutsideClickHandler&&document.removeEventListener("click",this.panelOutsideClickHandler),this.panelOutsideClickHandler=this.handlePanelOutsideClick.bind(this),setTimeout(()=>{document.addEventListener("click",this.panelOutsideClickHandler,{once:!0})},100)}setupCodeTabs(){if(!this.codePanel)return;const e=this.codePanel.querySelectorAll(".open-web-inspector-code-tab"),t=this.codePanel.querySelectorAll(".open-web-inspector-code-tab-content");e.forEach(n=>{n.addEventListener("click",()=>{const o=n.dataset.tab;e.forEach(e=>e.classList.remove("active")),t.forEach(e=>e.classList.remove("active")),n.classList.add("active");const i=this.codePanel.querySelector(`[data-tab-content="${o}"]`);i&&i.classList.add("active")})})}closePanels(){this.cssPanel&&(this.cssPanel.remove(),this.cssPanel=null),this.htmlPanel&&(this.htmlPanel.remove(),this.htmlPanel=null),this.codePanel&&(this.codePanel.remove(),this.codePanel=null),this.naturalLanguagePanel&&(this.naturalLanguagePanel.remove(),this.naturalLanguagePanel=null),this.panelOutsideClickHandler&&(document.removeEventListener("click",this.panelOutsideClickHandler),this.panelOutsideClickHandler=null)}generatePopupContent(e){const t=this.getElementPath(e),n=window.getComputedStyle(e);return this.getElementHTML(e),`\n <div class="open-web-inspector-popup-header">\n <h3 class="open-web-inspector-popup-title">${this.getElementTitle(e)}</h3>\n <div class="open-web-inspector-popup-header-actions">\n <button class="open-web-inspector-screenshot-btn" type="button">📸 Screenshot</button>\n <button class="open-web-inspector-popup-close" type="button">×</button>\n </div>\n </div>\n <div class="open-web-inspector-popup-content">\n <div class="open-web-inspector-tabs">\n <button class="open-web-inspector-tab active" data-tab="html">HTML</button>\n <button class="open-web-inspector-tab" data-tab="css">CSS Styles</button>\n <button class="open-web-inspector-tab" data-tab="computed">Computed Styles</button>\n </div>\n \n <div class="open-web-inspector-tab-content active" data-tab-content="html">\n <div class="open-web-inspector-element-tree-section">\n <div class="open-web-inspector-element-path">${t}</div>\n </div>\n \n <div class="open-web-inspector-content-section">\n <div class="open-web-inspector-sub-tabs">\n <button class="open-web-inspector-sub-tab active" data-sub-tab="preview">👁️ Preview</button>\n <button class="open-web-inspector-sub-tab" data-sub-tab="html-structure">📝 HTML Structure</button>\n </div>\n \n <div class="open-web-inspector-sub-tab-content active" data-sub-tab-content="preview">\n <div class="open-web-inspector-preview-content">${this.generateElementPreview(e)}</div>\n </div>\n \n <div class="open-web-inspector-sub-tab-content" data-sub-tab-content="html-structure">\n <div class="open-web-inspector-html-content"></div>\n </div>\n </div>\n </div>\n \n <div class="open-web-inspector-tab-content" data-tab-content="css">\n <div style="color: #3498db; font-weight: normal; font-size: 12px; margin-bottom: 15px; padding: 8px 12px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #3498db;">✏️ Edit live! 📁 Expand/collapse 👨👩👧👦 Shows inherited</div>\n <div class="open-web-inspector-css-rules-container">\n ${this.generateCSSStyles(e)}\n </div>\n </div>\n \n <div class="open-web-inspector-tab-content" data-tab-content="computed">\n <h4>Computed Styles:</h4>\n <div class="open-web-inspector-css-grid">\n ${this.generateComputedStyles(n)}\n </div>\n </div>\n </div>\n `}getElementTitle(e){return`Element Inspector - ${e.tagName.toLowerCase()}${e.id?`#${e.id}`:e.className?`.${e.className.split(" ")[0]}`:""}`}openNaturalLanguageInterface(e){this.closePanels();const t=e.getBoundingClientRect();let n=Math.min(t.right+10,window.innerWidth-350),o=Math.min(t.top,window.innerHeight-200);if(this.fabPopup){const e=this.fabPopup.getBoundingClientRect();n<e.right+10&&o<e.bottom+10&&(o=Math.max(e.bottom+10,o),o+200>window.innerHeight&&(o=window.innerHeight-210))}this.naturalLanguagePanel=document.createElement("div"),this.naturalLanguagePanel.className="open-web-inspector-panel open-web-inspector-natural-language-panel",this.naturalLanguagePanel.style.left=n+"px",this.naturalLanguagePanel.style.top=o+"px",this.naturalLanguagePanel.style.width="320px",this.naturalLanguagePanel.style.maxHeight="200px",this.naturalLanguagePanel.innerHTML=`\n <div class="open-web-inspector-panel-header">\n <div class="open-web-inspector-ask-ai-title">\n <div class="open-web-inspector-ask-ai-main-title">💬 Ask AI</div>\n <div class="open-web-inspector-ask-ai-subtitle">${this.getElementTitle(e)}</div>\n </div>\n <button class="open-web-inspector-panel-close">×</button>\n </div>\n <div class="open-web-inspector-panel-content">\n <div style="padding: 20px;">\n <div style="margin-bottom: 15px;">\n <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333; font-size: 14px;">\n What would you like to do with this element?\n </label>\n <input type="text" \n class="open-web-inspector-natural-language-input" \n placeholder="e.g., Make this text red, increase the spacing, add a border..."\n style="width: 100%; padding: 10px; border: 2px solid #e1e8ed; border-radius: 6px; font-size: 14px; font-family: inherit;"\n maxlength="200">\n </div>\n <div style="display: flex; justify-content: flex-end; gap: 10px;">\n <button class="open-web-inspector-natural-language-cancel" \n style="padding: 8px 16px; background: #f8f9fa; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 13px;">\n Cancel\n </button>\n <button class="open-web-inspector-natural-language-copy" \n style="padding: 8px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500;">\n 📋 Copy AI Instructions\n </button>\n </div>\n </div>\n </div>\n `,document.body.appendChild(this.naturalLanguagePanel),this.setupNaturalLanguageHandlers(e),this.makePanelDraggable(this.naturalLanguagePanel);const i=this.naturalLanguagePanel.querySelector(".open-web-inspector-natural-language-input");i&&setTimeout(()=>i.focus(),100)}setupNaturalLanguageHandlers(e){if(!this.naturalLanguagePanel)return;const t=this.naturalLanguagePanel.querySelector(".open-web-inspector-panel-close"),n=this.naturalLanguagePanel.querySelector(".open-web-inspector-natural-language-cancel"),o=this.naturalLanguagePanel.querySelector(".open-web-inspector-natural-language-copy"),i=this.naturalLanguagePanel.querySelector(".open-web-inspector-natural-language-input"),a=()=>this.closePanels();t.addEventListener("click",a),n.addEventListener("click",a),o.addEventListener("click",()=>this.generateAISnapshotWithRequest(e)),i.addEventListener("keydown",t=>{"Enter"===t.key&&(t.preventDefault(),this.generateAISnapshotWithRequest(e))});const r=()=>{const e=i.value.trim().length>0;o.disabled=!e,o.style.opacity=e?"1":"0.6",o.style.cursor=e?"pointer":"not-allowed"};i.addEventListener("input",r),r(),this.naturalLanguageOutsideClickHandler=e=>{this.isOurElement(e.target)||this.closePanels()},setTimeout(()=>{document.addEventListener("click",this.naturalLanguageOutsideClickHandler,{once:!0})},100)}async generateAISnapshotWithRequest(e){const t=this.naturalLanguagePanel?.querySelector(".open-web-inspector-natural-language-input"),n=t?.value.trim()||"";if(!n)return void(t&&(t.style.borderColor="#e74c3c",setTimeout(()=>{t.style.borderColor="#e1e8ed"},1e3)));const o=this.naturalLanguagePanel?.querySelector(".open-web-inspector-natural-language-copy");if(o){const t=o.innerHTML;o.innerHTML="⏳ Generating...",o.disabled=!0;try{await this.generateAISnapshot(e,n),this.closePanels()}catch(e){o.innerHTML="❌ Try Again",setTimeout(()=>{o.innerHTML=t,o.disabled=!1},2e3)}}}async generateAISnapshot(e,t=""){try{const n=e.tagName.toLowerCase(),o=`${n}${e.id?`#${e.id}`:e.className?`.${e.className.split(" ")[0]}`:""}`,i=this.getElementPathText(e),a=this.getElementHTML(e),r=this.getCSSStylesWithChangesText(e),s=this.getKeyComputedStylesText(e),p=this.cssChanges.has(e)&&Object.keys(this.cssChanges.get(e)).length>0,l=`🤖 AI Element Snapshot - ${o}${p?"\n\n⚠️ **IMPORTANT**: This element has been modified using the live CSS editor. The CSS section shows both original and modified values.":""}${t?`\n\n## 🎯 USER REQUEST\nThe user wants you to: **${t}**\n\nPlease provide specific CSS code and instructions to achieve this request for the element analyzed below.`:""}\n\n## ELEMENT CONTEXT\nThis is an HTML element analysis from a web page inspection tool${p?" with live CSS editing capabilities":""}. Use this information to understand the element's structure, styling, and position in the DOM hierarchy.\n\n## ELEMENT PATH\nThe element's location in the DOM tree:\n${i}\n\n## HTML STRUCTURE\n\`\`\`html\n${a}\n\`\`\`\n\n## ${p?"CSS STYLES (WITH MODIFICATIONS)":"EXPLICIT CSS RULES"}\n\`\`\`css\n${r}\n\`\`\`\n\n## COMPUTED STYLES (FINAL VALUES)\n\`\`\`css\n${s}\n\`\`\`\n\n## GUIDANCE FOR AI\n- Element Type: ${n}\n- Identifier: ${o}\n- Use this information to understand layout, styling, or help debug CSS/HTML issues\n- The element path shows the hierarchical structure from the selected element up to the document root\n- **COMPUTED STYLES contain the final values** the browser actually uses (often more useful than raw CSS)\n- Cross-origin stylesheets are blocked by browsers but computed styles show the final result${p?"\n- **CSS CHANGES**: Modified values are marked with comments showing original vs current values":""}\n\n## CSS MODIFICATION GUIDANCE\nTo modify this element's styles, use these selectors (in order of effectiveness):\n${this.generateCSSModificationGuidance(e)}`;await navigator.clipboard.writeText(l);const c=this.fabPopup&&this.fabPopup.querySelector('.open-web-inspector-fab-button[data-action="ai"]')||this.popup&&this.popup.querySelector(".open-web-inspector-ai-snapshot-btn");c&&(c.textContent,c.innerHTML='<svg viewBox="0 0 24 24">\n <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/>\n </svg>',c.classList.add("copied"),setTimeout(()=>{c.innerHTML='<svg viewBox="0 0 24 24">\n <path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M6,12A2,2 0 0,1 8,10A2,2 0 0,1 10,12A2,2 0 0,1 8,14A2,2 0 0,1 6,12M12,4A2,2 0 0,1 14,2A2,2 0 0,1 16,4A2,2 0 0,1 14,6A2,2 0 0,1 12,4M12,20A2,2 0 0,1 14,18A2,2 0 0,1 16,20A2,2 0 0,1 14,22A2,2 0 0,1 12,20M12,9A2,2 0 0,1 14,7A2,2 0 0,1 16,9A2,2 0 0,1 14,11A2,2 0 0,1 12,9M12,15A2,2 0 0,1 14,13A2,2 0 0,1 16,15A2,2 0 0,1 14,17A2,2 0 0,1 12,15Z"/>\n </svg>',c.classList.remove("copied")},2e3))}catch(e){const t=this.fabPopup&&this.fabPopup.querySelector('.open-web-inspector-fab-button[data-action="ai"]')||this.popup&&this.popup.querySelector(".open-web-inspector-ai-snapshot-btn");if(t){const e=t.innerHTML;t.innerHTML='<svg viewBox="0 0 24 24">\n <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>\n </svg>',setTimeout(()=>{t.innerHTML=e},2e3)}}}async takeElementScreenshot(e){const t=this.fabPopup&&this.fabPopup.querySelector('.open-web-inspector-fab-button[data-action="screenshot"]')||this.popup&&this.popup.querySelector(".open-web-inspector-screenshot-btn");if(!t)return;const n=t.innerHTML;let o=!1;try{if(t.innerHTML='<svg viewBox="0 0 24 24">\n <path d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21A7,7 0 0,1 14,26H10A7,7 0 0,1 3,19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M10,9A5,5 0 0,0 5,14V17H19V14A5,5 0 0,0 14,9H10Z"/>\n </svg>',t.classList.add("capturing"),window.html2canvas||await this.loadHtml2Canvas(),0===e.offsetWidth||0===e.offsetHeight)throw new Error("Element has no visible dimensions");o=e.classList.contains("open-web-inspector-highlight"),e.classList.remove("open-web-inspector-highlight"),this.fabPopup&&(this.fabPopup.style.display="none"),this.popup&&(this.popup.style.display="none"),this.cssPanel&&(this.cssPanel.style.display="none"),this.htmlPanel&&(this.htmlPanel.style.display="none");const n=document.querySelector(".open-web-inspector-overlay");n&&(n.style.display="none"),await new Promise(e=>setTimeout(e,150));const i={allowTaint:!0,useCORS:!0,scale:2,backgroundColor:"#ffffff",logging:!1,scrollX:0,scrollY:0,ignoreElements:e=>e.classList&&(e.classList.contains("open-web-inspector-popup")||e.classList.contains("open-web-inspector-overlay")||e.classList.contains("open-web-inspector-highlight-box")||e.classList.contains("open-web-inspector-fab-popup")||e.classList.contains("open-web-inspector-panel"))},a=await window.html2canvas(e,i),r=await new Promise(e=>a.toBlob(e,"image/png"));await navigator.clipboard.write([new ClipboardItem({"image/png":r})]),t.innerHTML='<svg viewBox="0 0 24 24">\n <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/>\n </svg>',t.classList.remove("capturing"),t.classList.add("copied")}catch(e){t.innerHTML='<svg viewBox="0 0 24 24">\n <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>\n </svg>',t.classList.remove("capturing"),"NotAllowedError"===e.name||e.message&&e.message.includes("html2canvas")}finally{o&&this.currentHighlightedElement===e&&e.classList.add("open-web-inspector-highlight"),this.fabPopup&&(this.fabPopup.style.display="flex"),this.popup&&(this.popup.style.display="block"),this.cssPanel&&(this.cssPanel.style.display="block"),this.htmlPanel&&(this.htmlPanel.style.display="block");const i=document.querySelector(".open-web-inspector-overlay");i&&(i.style.display="block"),setTimeout(()=>{t.innerHTML=n,t.classList.remove("capturing","copied")},2e3)}}async loadHtml2Canvas(){return new Promise((e,t)=>{if(window.html2canvas)return void e();const n=document.createElement("script");n.src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js",n.onload=()=>e(),n.onerror=()=>t(new Error("Failed to load html2canvas library")),document.head.appendChild(n)})}setupCSSEditing(){try{const e=this.codePanel||this.cssPanel||this.popup;if(!e)return;if("function"!=typeof e.querySelectorAll)return;e.querySelectorAll(".open-web-inspector-css-value-input").forEach(e=>{const t=e.dataset.property,n=e.dataset.originalValue;e.addEventListener("input",()=>{const o=e.value.trim();o!==n?(this.recordCSSChange(this.currentElement,t,n,o),e.classList.add("changed"),this.updateResetButton(t,!0)):(this.resetCSSProperty(this.currentElement,t),e.classList.remove("changed"),this.updateResetButton(t,!1))}),e.addEventListener("keydown",t=>{"Enter"===t.key&&(e.blur(),t.preventDefault())}),e.addEventListener("keydown",o=>{"Escape"===o.key&&(e.value=this.getCurrentPropertyValue(this.currentElement,t)||n,e.blur(),o.preventDefault())})}),e.querySelectorAll(".open-web-inspector-css-reset-btn").forEach(e=>{const t=e.dataset.property;e.addEventListener("click",()=>{this.resetCSSProperty(this.currentElement,t),this.refreshCSSDisplay()})})}catch(e){}}updateResetButton(e,t){const n=this.codePanel||this.cssPanel||this.popup;if(!n)return;const o=n.querySelector(`[data-property="${e}"]`);if(!o)return;let i=o.querySelector(".open-web-inspector-css-reset-btn");t&&!i?(i=document.createElement("button"),i.className="open-web-inspector-css-reset-btn",i.dataset.property=e,i.textContent="↺",i.title="Reset to original",i.addEventListener("click",()=>{this.resetCSSProperty(this.currentElement,e),this.refreshCSSDisplay()}),o.appendChild(i)):!t&&i&&i.remove()}refreshCSSDisplay(){if(!this.currentElement)return;const e=this.codePanel||this.cssPanel||this.popup;if(!e)return;const t=e.querySelector(".open-web-inspector-css-rules-container")||e.querySelector('.open-web-inspector-tab-content[data-tab-content="css"] .open-web-inspector-css-rules-container');t&&(t.innerHTML=this.generateCSSStyles(this.currentElement),this.setupCSSEditing(),this.setupCSSRuleCollapsing())}setupCSSRuleCollapsing(){const e=this.codePanel||this.cssPanel||this.popup;e&&e.querySelectorAll(".open-web-inspector-css-rule-header").forEach(t=>{t.replaceWith(t.cloneNode(!0));const n=e.querySelector(`[data-rule-id="${t.dataset.ruleId}"]`);n&&n.addEventListener("click",()=>{this.toggleCSSRuleGroup(n.dataset.ruleId)})})}toggleCSSRuleGroup(e){const t=this.codePanel||this.cssPanel||this.popup;if(!t)return;const n=t.querySelector(`[data-rule-id="${e}"]`),o=t.querySelector(`[data-rule-content="${e}"]`),i=n?.querySelector(".open-web-inspector-css-rule-toggle");n&&o&&i&&(o.classList.contains("collapsed")?(o.classList.remove("collapsed"),n.classList.remove("collapsed"),i.classList.remove("collapsed"),o.style.maxHeight=o.scrollHeight+"px"):(o.style.maxHeight="0px",o.classList.add("collapsed"),n.classList.add("collapsed"),i.classList.add("collapsed")))}getElementPathText(e){const t=[];let n=e;for(;n&&n!==document.documentElement;){const e=`${n.tagName.toLowerCase()}${n.id?`#${n.id}`:""}${n.className?`.${n.className.split(" ")[0]}`:""}`;t.push(e),n=n.parentElement}return t.map((e,t)=>`${" ".repeat(t)}${0===t?"🎯":"📄"} ${e}`).join("\n")}getCSSStylesText(e){const t=[];if(e.style.length>0){t.push("/* Inline Styles */");for(let n=0;n<e.style.length;n++){const o=e.style[n],i=e.style.getPropertyValue(o);t.push(`${o}: ${i};`)}t.push("")}try{const n=[],o=document.styleSheets;for(let t=0;t<o.length;t++)try{const i=o[t].cssRules||o[t].rules;for(let t=0;t<i.length;t++){const o=i[t];o.selectorText&&e.matches&&e.matches(o.selectorText)&&n.push({selector:o.selectorText,cssText:o.style.cssText})}}catch(e){}n.length>0&&(t.push("/* Matched CSS Rules */"),n.forEach(e=>{t.push(`${e.selector} {`),e.cssText&&e.cssText.split(";").filter(e=>e.trim()).forEach(e=>{e.trim()&&t.push(` ${e.trim()};`)}),t.push("}"),t.push("")}))}catch(e){t.push("/* Unable to access some stylesheet rules due to CORS restrictions */")}return t.join("\n")||"/* Cross-origin stylesheets blocked - see computed styles below for actual values */"}getCSSStylesWithChangesText(e){const t=[],n=this.cssChanges.has(e)&&Object.keys(this.cssChanges.get(e)).length>0;if(n){const n=this.cssChanges.get(e);t.push("/* ===== CSS CHANGES DETECTED ===== */"),t.push("/* This element has been modified in the inspector. */"),t.push("/* Below are the original vs modified values: */"),t.push(""),Object.entries(n).forEach(([e,n])=>{t.push(`/* PROPERTY: ${e} */`),t.push(`/* ORIGINAL: ${n.original} */`),t.push(`/* MODIFIED: ${n.current} */`),t.push(`${e}: ${n.current}; /* ← USER CHANGED THIS */`),t.push("")}),t.push("/* ===== END OF CHANGES ===== */"),t.push("")}const o=this.getCSSStylesText(e);return n?(t.push("/* ===== ORIGINAL CSS STYLES (for reference) ===== */"),t.push(o),t.join("\n")):o}getKeyComputedStylesText(e){const t=window.getComputedStyle(e),n=["/* Key Computed Styles */"];return["display","position","width","height","margin","padding","border","background","color","font-family","font-size","line-height","text-align","flex-direction","justify-content","align-items","grid-template-columns","grid-template-rows","transform","opacity","z-index","overflow"].forEach(e=>{const o=t.getPropertyValue(e);o&&"none"!==o&&"auto"!==o&&"normal"!==o&&"initial"!==o&&n.push(`${e}: ${o};`)}),n.join("\n")}setupTabs(){const e=this.popup.querySelectorAll(".open-web-inspector-tab"),t=this.popup.querySelectorAll(".open-web-inspector-tab-content");e.forEach(n=>{n.addEventListener("click",()=>{const o=n.dataset.tab;e.forEach(e=>e.classList.remove("active")),t.forEach(e=>e.classList.remove("active")),n.classList.add("active");const i=this.popup.querySelector(`[data-tab-content="${o}"]`);i&&i.classList.add("active")})})}setupSubTabs(){const e=this.codePanel||this.htmlPanel||this.popup;if(!e)return;const t=e.querySelectorAll(".open-web-inspector-sub-tab"),n=e.querySelectorAll(".open-web-inspector-sub-tab-content");t.forEach(o=>{o.addEventListener("click",()=>{const i=o.dataset.tab;t.forEach(e=>e.classList.remove("active")),n.forEach(e=>e.classList.remove("active")),o.classList.add("active");const a=e.querySelector(`[data-tab-content="${i}"]`);if(a&&(a.classList.add("active"),"html"===i)){const e=a.querySelector(".open-web-inspector-html-content");if(e&&e.children.length>0){const t=e.textContent||e.innerText;e.innerHTML="",e.appendChild(document.createTextNode(t))}}})})}setupTreeElementHandlers(){const e=this.codePanel||this.htmlPanel||this.popup;e&&e.querySelectorAll(".tree-element").forEach(e=>{e.addEventListener("click",t=>{t.stopPropagation();const n=parseInt(e.dataset.elementIndex);this.switchToElement(n)})})}switchToElement(e){if(!this.treeElements||e<0||e>=this.treeElements.length)return;const t=this.treeElements[e];this.currentSelectedIndex=e,this.removeHighlight(),this.highlightElement(t),this.currentElement=t,this.updatePopupContent(t),this.codePanel&&this.updateCodePanelCSS(t)}updateCodePanelCSS(e){if(!this.codePanel)return;const t=this.codePanel.querySelector(".open-web-inspector-code-panel-subtitle");t&&(t.textContent=this.getElementTitle(e));const n=this.codePanel.querySelector(".open-web-inspector-css-rules-container");n&&(n.innerHTML=this.generateCSSStyles(e),this.setupCSSEditing(),this.setupCSSRuleCollapsing())}updatePopupContent(e){const t=this.getElementPath(e),n=window.getComputedStyle(e),o=this.getElementHTML(e),i=this.codePanel||this.htmlPanel||this.cssPanel||this.popup;if(!i)return;const a=i.querySelector(".open-web-inspector-element-path");a&&(a.innerHTML=t,this.setupTreeElementHandlers()),this.setupSubTabs();const r=i.querySelector(".open-web-inspector-preview-content");r&&(r.innerHTML=this.generateElementPreview(e));const s=i.querySelector(".open-web-inspector-html-content");s&&(s.innerHTML="",s.appendChild(document.createTextNode(o))),this.currentElement=e;let p=null;if(this.codePanel&&(p=this.codePanel.querySelector(".open-web-inspector-css-rules-container")),!p&&this.popup&&(p=this.popup.querySelector('.open-web-inspector-tab-content[data-tab-content="css"] .open-web-inspector-css-rules-container')),p&&(p.innerHTML=this.generateCSSStyles(e),this.setupCSSEditing(),this.setupCSSRuleCollapsing()),this.popup){const e=this.popup.querySelector('.open-web-inspector-tab-content[data-tab-content="computed"] .open-web-inspector-css-grid');e&&(e.innerHTML=this.generateComputedStyles(n))}if(this.popup){const t=this.popup.querySelector(".open-web-inspector-popup-title");t&&(t.textContent=this.getElementTitle(e))}if(this.popup){const t=this.popup.querySelector(".open-web-inspector-screenshot-btn");t&&(t.replaceWith(t.cloneNode(!0)),this.popup.querySelector(".open-web-inspector-screenshot-btn").addEventListener("click",()=>this.takeElementScreenshot(e)))}}getElementPath(e){const t=[],n=[];let o=e;for(;o&&o!==document.documentElement;){let e=o.tagName.toLowerCase();if(o.id)e+=`#${o.id}`;else if(o.className){const t=o.className.toString().split(" ").filter(e=>e&&!e.startsWith("open-web-inspector-")).slice(0,2).join(".");t&&(e+=`.${t}`)}t.unshift(e),n.unshift(o),o=o.parentElement}this.treeElements=n,this.currentSelectedIndex=t.length-1;let i="";for(let e=0;e<t.length;e++){const n=" ".repeat(e),o=e===t.length-1?"🎯 ":0===e?"📄 ":"📁 ";i+=`${n}<span class="${e===this.currentSelectedIndex?"tree-element selected":"tree-element"}" data-element-index="${e}">${o}${t[e]}</span>`,e<t.length-1&&(i+="\n")}return i}generateElementPreview(e){try{const t=e.cloneNode(!0);this.cleanClonedElement(t);const n=window.getComputedStyle(e);let o="position: relative !important; ";return["background","background-color","background-image","background-size","background-position","color","border","border-radius","padding","margin","font-family","font-size","font-weight","line-height","text-align","display","flex-direction","justify-content","align-items","width","height","min-width","min-height","max-width","max-height","box-shadow","opacity","overflow"].forEach(e=>{const t=n.getPropertyValue(e);if(t&&"auto"!==t&&"normal"!==t&&"none"!==t){if(("width"===e||"height"===e)&&t.includes("px")&&parseInt(t)>800)return;o+=`${e}: ${t}; `}}),t.style.cssText=o,t.querySelectorAll("script").forEach(e=>e.remove()),this.cleanElementAttributes(t),t.outerHTML}catch(e){return'<div style="padding: 20px; text-align: center; color: #666; border: 1px dashed #ccc; border-radius: 4px;">👁️ Preview not available for this element</div>'}}cleanClonedElement(e){e.classList&&e.classList.remove("open-web-inspector-highlight"),Array.from(e.children||[]).forEach(e=>{this.cleanClonedElement(e)})}cleanElementAttributes(e){["onclick","onmouseover","onmouseout","onload","onerror","onsubmit","onchange","onfocus","onblur","href"].forEach(t=>{e.hasAttribute&&e.hasAttribute(t)&&e.removeAttribute(t)}),Array.from(e.children||[]).forEach(e=>{this.cleanElementAttributes(e)})}getElementHTML(e){const t=e.cloneNode(!0);t.classList.remove("open-web-inspector-highlight");const n=t.outerHTML;return this.formatHTML(n)}formatHTML(e){return e.replace(/></g,">\n<").replace(/\n\s*\n/g,"\n").split("\n").map((e,t)=>{const n=(e.match(/^\s*<[^/]/g)||[]).length;return" ".repeat(Math.max(0,n-1))+e.trim()}).join("\n")}generateCSSStyles(e){const t=this.getMatchedCSSRules(e);return 0===t.length?'<div style="padding: 20px; text-align: center; color: #666;">No CSS rules found for this element</div>':t.map(e=>this.generateCSSRuleGroup(e)).join("")}getMatchedCSSRules(e){const t=this.actualSelectedElement||e,n=[];let o=0,i=!1;try{for(let e=0;e<document.styleSheets.length;e++){const a=document.styleSheets[e];try{const e=a.cssRules||a.rules;if(!e)continue;for(let o=0;o<e.length;o++){const a=e[o];if(1===a.type&&a.selectorText)try{if(t.matches(a.selectorText)){const e=[];for(let t=0;t<a.style.length;t++){const n=a.style[t];e.push({property:n,value:a.style.getPropertyValue(n)})}n.push({selector:a.selectorText,properties:e,specificity:this.calculateSpecificity?this.calculateSpecificity(a.selectorText):100,source:"stylesheet"}),i=!0}}catch(e){continue}}}catch(e){o++}}}catch(e){}const a=window.getComputedStyle(t),r=this.generateElementSelector(t),s=i?`${r} (computed)`:`${r} (computed - ${o} blocked stylesheets)`,p=this.extractMeaningfulComputedStyles(a);p.length>0&&n.push({selector:s,properties:p,specificity:i?1:1e3,source:"computed"});const l=this.getInlineStyles(t);return l.length>0&&n.push({selector:`${r} (inline)`,properties:l,specificity:1e3,source:"inline"}),n.sort((e,t)=>{if("inline"===e.source)return-1;if("inline"===t.source)return 1;if(!i){if("computed"===e.source)return-1;if("computed"===t.source)return 1}return"stylesheet"===e.source&&"computed"===t.source?-1:"stylesheet"===t.source&&"computed"===e.source?1:t.specificity-e.specificity})}generateElementSelector(e){const t=e.tagName.toLowerCase(),n=e.id?`#${e.id}`:"";let o="";if(e.className&&e.className.trim()){const t=e.className.trim().split(/\s+/).filter(e=>!e.match(/^(is-|has-|u-|js-|sr-only|visually-hidden)/)&&e.length>1).slice(0,3);t.length>0&&(o="."+t.join("."))}return`${t}${n}${o}`}extractMeaningfulComputedStyles(e){const t=[];return["display","position","z-index","overflow","box-sizing","visibility","opacity","float","clear","width","height","min-width","min-height","max-width","max-height","margin","margin-top","margin-right","margin-bottom","margin-left","padding","padding-top","padding-right","padding-bottom","padding-left","border","border-width","border-style","border-color","border-radius","outline","background","background-color","background-image","background-size","background-position","background-repeat","color","font-family","font-size","font-weight","font-style","line-height","text-align","text-decoration","text-transform","letter-spacing","word-spacing","flex","flex-direction","flex-wrap","justify-content","align-items","align-content","grid","grid-template-columns","grid-template-rows","grid-gap"].forEach(n=>{const o=e.getPropertyValue(n);o&&this.isMeaningfulValue(n,o)&&t.push({property:n,value:o})}),t}isMeaningfulValue(e,t){return!(["initial","normal","auto","none","0px","0px 0px","0px 0px 0px 0px","rgba(0, 0, 0, 0)","transparent"].includes(t)||"font-weight"===e&&"400"===t||"line-height"===e&&"normal"===t||"z-index"===e&&"auto"===t||e.includes("margin")&&"0px"===t||e.includes("padding")&&"0px"===t)}generateCSSModificationGuidance(e){const t=[],n=e.tagName.toLowerCase(),o=e.id,i=e.className?e.className.trim().split(/\s+/).filter(e=>e&&!e.includes("open-web-inspector")&&e.length>1):[];if(o&&t.push(`1. **#${o}** (highest specificity - overrides almost everything)`),o&&t.push(`2. **${n}#${o}** (very high specificity)`),i.length>0){const e=i.slice(0,3).join(".");t.push(`3. **${n}.${e}** (high specificity - matches exact element)`)}if(i.length>0){const e=i[0];t.push(`4. **${n}.${e}** (medium specificity - for ${e} styling)`),i.length>1&&t.push(`5. **.${e}.${i[1]}** (class combination)`),t.push(`6. **.${e}** (targets all ${e} elements)`)}return t.push(`${t.length+1}. **${n}** (lowest specificity - affects all ${n} elements)`),t.push(""),t.push("**EXAMPLE CSS RULES:**"),o?t.push(`\`\`\`css\n#${o} {\n color: blue;\n font-size: 20px;\n}\n\`\`\``):i.length>0?t.push(`\`\`\`css\n.${i[0]} {\n color: blue;\n font-size: 20px;\n}\n\`\`\``):t.push(`\`\`\`css\n${n} {\n color: blue;\n font-size: 20px;\n}\n\`\`\``),t.push(""),t.push("**INLINE STYLE OPTION (highest priority):**"),t.push(`\`\`\`html\n<${n}${o?` id="${o}"`:""}${i.length?` class="${i.join(" ")}"`:""} style="color: blue; font-size: 20px;">\n\`\`\``),t.join("\n")}getInlineStyles(e){const t=[],n=e.style;for(let e=0;e<n.length;e++){const o=n[e],i=n.getPropertyValue(o);t.push({property:o,value:i})}return t}getInheritedStyles(e,t){const n=[],o=this.getInheritableProperties(),i=new Set;t.forEach(e=>{e.properties.forEach(e=>{i.add(e.property)})});let a=e.parentElement,r=0;for(;a&&a!==document.documentElement&&r<10;){const e=this.getParentInheritedProperties(a,o,i);if(e.length>0){const t=this.getElementSelector(a);n.push({selector:`Inherited from ${t}`,properties:e,specificity:0,source:"inherited",parentElement:a}),e.forEach(e=>{i.add(e.property)})}a=a.parentElement,r++}return n}getInheritableProperties(){return["color","font-family","font-size","font-weight","font-style","font-variant","line-height","text-align","text-decoration","text-transform","text-indent","letter-spacing","word-spacing","list-style","list-style-type","list-style-position","list-style-image","cursor","visibility","white-space","direction","quotes","orphans","widows","caption-side","border-collapse","border-spacing","empty-cells","table-layout"]}getParentInheritedProperties(e,t,n){const o=[];window.getComputedStyle(e);try{Array.from(document.styleSheets).forEach(i=>{try{Array.from(i.cssRules||i.rules||[]).forEach(i=>{i.type===CSSRule.STYLE_RULE&&i.selectorText&&this.elementMatchesSelector(e,i.selectorText)&&this.extractPropertiesFromRule(i).forEach(e=>{t.includes(e.property)&&!n.has(e.property)&&o.push(e)})})}catch(e){}})}catch(e){}const i=e.style;for(let e=0;e<i.length;e++){const a=i[e];if(t.includes(a)&&!n.has(a)){const e=i.getPropertyValue(a);o.push({property:a,value:e})}}const a=[],r=new Set;return o.forEach(e=>{r.has(e.property)||(a.push(e),r.add(e.property))}),a}getElementSelector(e){return`${e.tagName.toLowerCase()}${e.id?`#${e.id}`:""}${e.className?`.${e.className.split(" ")[0]}`:""}`}elementMatchesSelector(e,t){try{return e.matches(t)}catch(e){return!1}}extractPropertiesFromRule(e){const t=[],n=e.style,o=this.groupIntoShorthands(n);for(const[e,n]of o)t.push({property:e,value:n});return t}groupIntoShorthands(e){const t=new Map,n=new Set,o=[];for(let t=0;t<e.length;t++){const n=e[t],i=e.getPropertyValue(n);o.push({property:n,value:i})}return this.tryReconstructShorthand(o,t,n,"background",["background-color","background-image","background-repeat","background-attachment","background-position","background-size","background-origin","background-clip"]),this.tryReconstructShorthand(o,t,n,"border",["border-top-width","border-right-width","border-bottom-width","border-left-width","border-top-style","border-right-style","border-bottom-style","border-left-style","border-top-color","border-right-color","border-bottom-color","border-left-color"]),this.tryReconstructShorthand(o,t,n,"padding",["padding-top","padding-right","padding-bottom","padding-left"]),this.tryReconstructShorthand(o,t,n,"margin",["margin-top","margin-right","margin-bottom","margin-left"]),this.tryReconstructShorthand(o,t,n,"border-radius",["border-top-left-radius","border-top-right-radius","border-bottom-right-radius","border-bottom-left-radius"]),o.forEach(({property:e,value:o})=>{n.has(e)||t.set(e,o)}),t}tryReconstructShorthand(e,t,n,o,i){const a=[],r=[];if(e.forEach(({property:e,value:t})=>{i.includes(e)&&(a.push(e),r.push(t))}),a.length>0){let i="";if("padding"===o||"margin"===o){const t=this.getLonghandValue(e,`${o}-top`),n=this.getLonghandValue(e,`${o}-right`),a=this.getLonghandValue(e,`${o}-bottom`),r=this.getLonghandValue(e,`${o}-left`);t&&n&&a&&r&&(i=t===n&&n===a&&a===r?t:t===a&&n===r?`${t} ${n}`:`${t} ${n} ${a} ${r}`)}else i=r.find(e=>e&&"initial"!==e&&"none"!==e)||r[0];i&&(t.set(o,i),a.forEach(e=>n.add(e)))}}getLonghandValue(e,t){const n=e.find(e=>e.property===t);return n?n.value:null}calculateSpecificity(e){return 100*(e.match(/#/g)||[]).length+10*(e.match(/\./g)||[]).length+10*(e.match(/\[/g)||[]).length+10*(e.match(/:/g)||[]).length+(e.match(/[a-zA-Z]/g)||[]).length}getComputedStylesRule(e,t){const n=window.getComputedStyle(e),o=[],i=new Set;return t.forEach(e=>{e.properties.forEach(e=>{i.add(e.property)})}),["display","position","z-index","overflow","box-sizing"].forEach(e=>{if(!i.has(e)){const t=n.getPropertyValue(e);t&&"none"!==t&&"auto"!==t&&"normal"!==t&&"initial"!==t&&o.push({property:e,value:t})}}),{selector:"computed styles",properties:o,specificity:0,source:"computed"}}generateCSSRuleGroup(e){const t=`rule-${Math.random().toString(36).substr(2,9)}`,n=("inline"===e.source||e.properties.length<=5)&&"inherited"!==e.source,o=e.properties.map(e=>{const t=this.hasPropertyChanged(this.currentElement,e.property),n=this.getCurrentPropertyValue(this.currentElement,e.property)||e.value;return`\n <div class="open-web-inspector-css-property" data-property="${e.property}">\n <span class="open-web-inspector-css-property-name" title="${e.property}">${e.property}</span>\n <input \n type="text" \n class="open-web-inspector-css-value-input ${t?"changed":""}" \n value="${n}" \n data-property="${e.property}"\n data-original-value="${e.value}"\n title="Click to edit. Press Enter to apply."\n />\n ${t?`<button class="open-web-inspector-css-reset-btn" data-property="${e.property}" title="Reset to original">↺</button>`:""}\n </div>\n `}).join(""),i="inline"===e.source?"📝":"computed"===e.source?"🧮":"inherited"===e.source?"👨👩👧👦":"🎨";return`\n <div class="open-web-inspector-css-rule-group${"inherited"===e.source?" open-web-inspector-css-inherited-rule":""}">\n <div class="open-web-inspector-css-rule-header ${n?"":"collapsed"}" data-rule-id="${t}">\n <span class="open-web-inspector-css-rule-selector">\n ${i} ${e.selector} \n <small style="opacity: 0.8;">(${e.properties.length} ${1===e.properties.length?"property":"properties"})</small>\n </span>\n <span class="open-web-inspector-css-rule-toggle ${n?"":"collapsed"}">▼</span>\n </div>\n <div class="open-web-inspector-css-rule-content ${n?"":"collapsed"}" data-rule-content="${t}">\n <div class="open-web-inspector-css-rule-properties">\n ${o}\n </div>\n </div>\n </div>\n `}hasPropertyChanged(e,t){return!!this.cssChanges.has(e)&&this.cssChanges.get(e).hasOwnProperty(t)}getCurrentPropertyValue(e,t){if(!this.cssChanges.has(e))return null;const n=this.cssChanges.get(e);return n[t]?.current||null}getOriginalPropertyValue(e,t){if(!this.cssChanges.has(e))return null;const n=this.cssChanges.get(e);return n[t]?.original||null}recordCSSChange(e,t,n,o){this.cssChanges.has(e)||this.cssChanges.set(e,{});const i=this.cssChanges.get(e);i[t]||(i[t]={original:n}),i[t].current=o,e.style.setProperty(t,o)}resetCSSProperty(e,t){if(!this.cssChanges.has(e))return;const n=this.cssChanges.get(e);n[t]&&(e.style.removeProperty(t),delete n[t],0===Object.keys(n).length&&this.cssChanges.delete(e))}generateComputedStyles(e){return Array.from(e).map(t=>{const n=e.getPropertyValue(t);return`\n <div class="open-web-inspector-css-property">\n <span class="open-web-inspector-css-property-name" title="${t}">${t}</span>\n <span class="open-web-inspector-css-property-value" title="${n}">${n}</span>\n </div>\n `}).join("")}closePopup(){this.popup&&(this.popup.remove(),this.popup=null),this.overlay&&(this.overlay.remove(),this.overlay=null),this.fabPopup&&(this.fabPopup.remove(),this.fabPopup=null),this.fabOutsideClickHandler&&(document.removeEventListener("click",this.fabOutsideClickHandler),this.fabOutsideClickHandler=null),this.closePanels()}}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{window.OpenWebInspector=new e,window.OpenWebInspector.attachGlobalAPI()}):(window.OpenWebInspector=new e,window.OpenWebInspector.attachGlobalAPI())}}();