Spaces:
Running
Running
File size: 129,359 Bytes
0646b18 |
1 |
"use strict";(self.webpackChunk_carbon_ai_chat_examples_web_components_basic=self.webpackChunk_carbon_ai_chat_examples_web_components_basic||[]).push([[1470],{7958:function(n,e,t){var a=t(21598),o=t.n(a),r=t(2607),i=t.n(r)()(o());i.push([n.id,'.config-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.6);\n backdrop-filter: blur(4px);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10000;\n animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.config-modal {\n background: white;\n border-radius: 12px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n width: 90%;\n max-width: 900px;\n max-height: 85vh;\n display: flex;\n flex-direction: column;\n animation: slideUp 0.3s ease;\n}\n\n@keyframes slideUp {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n.config-modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 24px;\n border-bottom: 1px solid #e5e7eb;\n}\n\n.config-modal-header h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.config-modal-close {\n background: none;\n border: none;\n color: #6b7280;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n border-radius: 6px;\n transition: all 0.2s ease;\n}\n\n.config-modal-close:hover {\n background: #f3f4f6;\n color: #1f2937;\n}\n\n.config-modal-tabs {\n display: flex;\n gap: 4px;\n padding: 12px 24px 0;\n border-bottom: 1px solid #e5e7eb;\n}\n\n.config-tab {\n padding: 8px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n color: #6b7280;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.config-tab:hover {\n color: #1f2937;\n}\n\n.config-tab.active {\n color: #667eea;\n border-bottom-color: #667eea;\n}\n\n.config-modal-toolbar {\n display: flex;\n gap: 8px;\n padding: 12px 24px;\n border-bottom: 1px solid #e5e7eb;\n background: #f9fafb;\n}\n\n.toolbar-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: white;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n color: #374151;\n font-size: 13px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.toolbar-btn:hover {\n background: #f3f4f6;\n border-color: #9ca3af;\n}\n\n.config-modal-content {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.section-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.add-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: #667eea;\n border: none;\n border-radius: 6px;\n color: white;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.add-btn:hover {\n background: #5568d3;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);\n}\n\n.config-card {\n background: #f9fafb;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n padding: 20px;\n margin-bottom: 16px;\n}\n\n.config-card h3 {\n margin: 0 0 16px 0;\n font-size: 16px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.config-card h4 {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: #374151;\n}\n\n.config-card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.config-form {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n}\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-group label {\n font-size: 13px;\n font-weight: 500;\n color: #374151;\n}\n\n.form-group small {\n font-size: 12px;\n color: #6b7280;\n margin-top: -2px;\n}\n\n.form-group input[type="text"],\n.form-group input[type="number"],\n.form-group input[type="password"],\n.form-group select,\n.form-group textarea {\n padding: 8px 12px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n font-size: 14px;\n color: #1f2937;\n background: white;\n transition: all 0.2s ease;\n}\n\n.form-group input:focus,\n.form-group select:focus,\n.form-group textarea:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-group input[type="range"] {\n width: 100%;\n}\n\n.form-group-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.add-small-btn {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n background: white;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n color: #374151;\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.add-small-btn:hover {\n background: #f3f4f6;\n border-color: #9ca3af;\n}\n\n.args-list,\n.env-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.arg-item,\n.env-item {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.arg-item input {\n flex: 1;\n padding: 6px 10px;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n font-size: 13px;\n}\n\n.env-item {\n background: white;\n padding: 8px;\n border-radius: 6px;\n border: 1px solid #e5e7eb;\n}\n\n.env-key {\n font-size: 12px;\n font-weight: 600;\n color: #4b5563;\n min-width: 120px;\n font-family: monospace;\n}\n\n.env-item input {\n flex: 1;\n padding: 4px 8px;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n font-size: 13px;\n}\n\n.remove-btn,\n.delete-btn {\n background: none;\n border: none;\n color: #ef4444;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.remove-btn:hover,\n.delete-btn:hover {\n background: #fee2e2;\n}\n\n.sources-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.source-item {\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n padding: 12px;\n}\n\n.source-header {\n display: flex;\n gap: 8px;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.source-name {\n flex: 1;\n font-weight: 500;\n}\n\n.source-details {\n padding-left: 28px;\n}\n\n.empty-state {\n text-align: center;\n padding: 40px 20px;\n color: #6b7280;\n}\n\n.empty-state p {\n margin: 0;\n font-size: 14px;\n}\n\n.config-modal-footer {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid #e5e7eb;\n background: #f9fafb;\n}\n\n.cancel-btn {\n padding: 8px 16px;\n background: white;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n color: #374151;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.cancel-btn:hover {\n background: #f3f4f6;\n}\n\n.save-btn {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: #667eea;\n border: none;\n border-radius: 6px;\n color: white;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.save-btn:hover {\n background: #5568d3;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);\n}\n\n.save-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.save-btn.success {\n background: #10b981;\n}\n\n.save-btn.error {\n background: #ef4444;\n}\n\n.checkbox-label {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n user-select: none;\n}\n\n.checkbox-label input[type="checkbox"] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n}\n\n.checkbox-label span {\n font-size: 14px;\n font-weight: 500;\n color: #1f2937;\n}\n\n/* Agent Config Card Styles */\n.agent-config-card {\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n margin-bottom: 12px;\n overflow: hidden;\n transition: all 0.2s;\n}\n\n.agent-config-card:hover {\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.agent-config-header {\n background: #f9fafb;\n padding: 12px;\n}\n\n.agent-config-top {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.agent-config-name {\n flex: 1;\n font-weight: 600;\n}\n\n.expand-btn {\n background: none;\n border: none;\n color: #6b7280;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n border-radius: 4px;\n transition: all 0.2s;\n}\n\n.expand-btn:hover {\n background: #e5e7eb;\n color: #1f2937;\n}\n\n.agent-summary {\n display: flex;\n gap: 12px;\n margin-top: 8px;\n padding-left: 28px;\n}\n\n.agent-summary-item {\n font-size: 11px;\n color: #64748b;\n background: white;\n padding: 3px 8px;\n border-radius: 4px;\n border: 1px solid #e5e7eb;\n}\n\n.agent-config-details {\n padding: 16px;\n border-top: 1px solid #e5e7eb;\n background: white;\n}\n\n.tools-count-small {\n font-size: 11px;\n color: #64748b;\n background: white;\n padding: 2px 6px;\n border-radius: 4px;\n border: 1px solid #e5e7eb;\n}\n\n.tools-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 8px;\n padding: 12px;\n background: #f9fafb;\n border-radius: 6px;\n border: 1px solid #e5e7eb;\n}\n\n.tool-checkbox-label {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 8px;\n background: white;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.2s;\n border: 1px solid #e5e7eb;\n}\n\n.tool-checkbox-label:hover {\n background: #f1f5f9;\n border-color: #cbd5e1;\n}\n\n.tool-checkbox-label input[type="checkbox"] {\n cursor: pointer;\n}\n\n.tool-checkbox-label span {\n font-size: 12px;\n color: #374151;\n user-select: none;\n}\n\n.policies-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.policies-empty {\n padding: 24px;\n text-align: center;\n color: #94a3b8;\n font-size: 12px;\n background: #f9fafb;\n border-radius: 6px;\n border: 1px dashed #e5e7eb;\n}\n\n.policy-item {\n display: flex;\n gap: 8px;\n align-items: flex-start;\n background: #f9fafb;\n padding: 10px;\n border-radius: 6px;\n border: 1px solid #e5e7eb;\n transition: all 0.2s;\n}\n\n.policy-item:hover {\n background: #f1f5f9;\n border-color: #cbd5e1;\n}\n\n.policy-item textarea {\n flex: 1;\n padding: 8px;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n font-size: 13px;\n color: #1f2937;\n background: white;\n resize: vertical;\n min-height: 60px;\n font-family: inherit;\n line-height: 1.5;\n}\n\n.policy-item textarea:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.policy-item .remove-btn {\n flex-shrink: 0;\n margin-top: 8px;\n}\n\n.add-small-btn {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n background: #667eea;\n color: white;\n border: none;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.add-small-btn:hover {\n background: #5568d3;\n box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);\n}\n\n.add-small-btn:active {\n transform: translateY(1px);\n}\n\n.form-group-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.apps-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 12px;\n}\n\n.app-config-section {\n background: #f9fafb;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n padding: 12px;\n transition: all 0.2s;\n}\n\n.app-config-section:hover {\n border-color: #cbd5e1;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.app-config-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n}\n\n.app-config-header strong {\n font-size: 14px;\n color: #1f2937;\n display: block;\n}\n\n.app-tools-section {\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid #e5e7eb;\n}\n\n.add-agent-modal {\n max-width: 600px;\n}\n\n.source-info-card {\n background: #f9fafb;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n padding: 12px;\n margin-top: 8px;\n}\n\n.source-info-row {\n display: flex;\n gap: 8px;\n margin-bottom: 8px;\n align-items: flex-start;\n}\n\n.source-info-row:last-child {\n margin-bottom: 0;\n}\n\n.source-info-row strong {\n min-width: 140px;\n font-size: 12px;\n color: #4b5563;\n font-weight: 600;\n}\n\n.source-info-row span {\n font-size: 12px;\n color: #1f2937;\n flex: 1;\n}\n\n.env-vars-display {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n}\n\n.env-var-display-item {\n display: flex;\n gap: 6px;\n align-items: center;\n font-size: 11px;\n font-family: monospace;\n background: white;\n padding: 4px 8px;\n border-radius: 4px;\n border: 1px solid #e5e7eb;\n}\n\n.env-var-display-item code {\n color: #1f2937;\n background: #f3f4f6;\n padding: 2px 4px;\n border-radius: 3px;\n}\n\n.env-var-display-item span {\n color: #6b7280;\n}\n\n.autonomy-slider-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 20px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-radius: 8px;\n border: 1px solid #e5e7eb;\n}\n\n.autonomy-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: -8px;\n}\n\n.autonomy-label-display {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n margin-bottom: 8px;\n}\n\n.autonomy-value {\n font-size: 32px;\n font-weight: 700;\n line-height: 1;\n}\n\n.autonomy-description {\n font-size: 14px;\n font-weight: 600;\n color: #64748b;\n}\n\n.autonomy-slider {\n width: 100%;\n height: 8px;\n border-radius: 4px;\n outline: none;\n appearance: none;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.autonomy-slider::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: white;\n border: 3px solid currentColor;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n transition: all 0.2s ease;\n}\n\n.autonomy-slider::-webkit-slider-thumb:hover {\n transform: scale(1.15);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n}\n\n.autonomy-slider::-moz-range-thumb {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: white;\n border: 3px solid currentColor;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n transition: all 0.2s ease;\n}\n\n.autonomy-slider::-moz-range-thumb:hover {\n transform: scale(1.15);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n}\n\n.autonomy-markers {\n display: flex;\n justify-content: space-between;\n font-size: 11px;\n color: #94a3b8;\n font-weight: 600;\n margin-top: -4px;\n}\n\n.confirmation-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n}\n\n.confirmation-grid .checkbox-label {\n padding: 12px;\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n transition: all 0.2s;\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n\n.confirmation-grid .checkbox-label:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.confirmation-grid .checkbox-label input {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.confirmation-grid .checkbox-label div {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.confirmation-grid .checkbox-label span {\n font-size: 14px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.confirmation-grid .checkbox-label small {\n font-size: 12px;\n color: #64748b;\n font-weight: normal;\n}\n\n.intervention-rules-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 12px;\n}\n\n.intervention-rule-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n transition: all 0.2s;\n}\n\n.intervention-rule-item:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.intervention-rule-item input[type="checkbox"] {\n flex-shrink: 0;\n cursor: pointer;\n}\n\n.intervention-rule-item .rule-text {\n flex: 1;\n font-size: 13px;\n color: #1f2937;\n line-height: 1.5;\n}\n\n.intervention-rule-item .rule-text.disabled {\n color: #94a3b8;\n text-decoration: line-through;\n}\n\n.intervention-rule-item .remove-btn {\n flex-shrink: 0;\n}\n\n.adaptive-learning-info {\n padding: 12px 16px;\n background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);\n border-left: 4px solid #3b82f6;\n border-radius: 6px;\n margin: 12px 0;\n}\n\n.adaptive-learning-info .info-text {\n margin: 0;\n font-size: 13px;\n color: #1e40af;\n line-height: 1.6;\n}\n\n.range-labels {\n display: flex;\n justify-content: space-between;\n margin-top: 4px;\n margin-bottom: 4px;\n}\n\n.range-labels small {\n font-size: 11px;\n color: #94a3b8;\n}\n\n.learning-examples {\n margin-top: 16px;\n padding: 16px;\n background: #f8fafc;\n border-radius: 6px;\n border: 1px solid #e5e7eb;\n}\n\n.learning-examples h4 {\n margin: 0 0 12px 0;\n font-size: 13px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.learning-bullets {\n margin: 0;\n padding-left: 20px;\n list-style: none;\n}\n\n.learning-bullets li {\n position: relative;\n font-size: 12px;\n line-height: 1.6;\n color: #4b5563;\n margin-bottom: 8px;\n padding-left: 8px;\n}\n\n.learning-bullets li:before {\n content: "→";\n position: absolute;\n left: -12px;\n color: #667eea;\n font-weight: bold;\n}\n\n.learning-bullets li:last-child {\n margin-bottom: 0;\n}\n\n.learning-bullets li strong {\n color: #1f2937;\n font-weight: 600;\n}\n\n/* Apps & Tools Section */\n.apps-section {\n padding: 20px 0;\n}\n\n.apps-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n gap: 20px;\n}\n\n.app-card {\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n padding: 16px;\n background: #fafbfc;\n transition: border-color 0.2s;\n}\n\n.app-card:hover {\n border-color: #cbd5e1;\n}\n\n.app-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.app-header h4 {\n margin: 0;\n color: #1e293b;\n font-size: 16px;\n font-weight: 600;\n}\n\n.app-type {\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.app-type.api {\n background: #dbeafe;\n color: #1d4ed8;\n}\n\n.app-description {\n color: #64748b;\n font-size: 14px;\n margin: 8px 0;\n line-height: 1.4;\n}\n\n.app-url {\n color: #6366f1;\n font-size: 13px;\n margin: 4px 0;\n font-family: monospace;\n}\n\n.app-tools h5 {\n margin: 16px 0 8px 0;\n color: #374151;\n font-size: 14px;\n font-weight: 600;\n}\n\n.no-tools {\n color: #9ca3af;\n font-style: italic;\n font-size: 13px;\n}\n\n.tools-list {\n max-height: 200px;\n overflow-y: auto;\n}\n\n.tool-item {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding: 8px 12px;\n margin: 4px 0;\n background: white;\n border: 1px solid #f1f5f9;\n border-radius: 6px;\n gap: 12px;\n}\n\n.tool-name {\n font-weight: 500;\n color: #1e293b;\n font-size: 13px;\n flex-shrink: 0;\n}\n\n.tool-description {\n color: #64748b;\n font-size: 12px;\n line-height: 1.4;\n flex: 1;\n}\n\n.loading-text {\n color: #64748b;\n font-style: italic;\n font-size: 14px;\n}\n\n/* Services Section */\n.services-section {\n padding: 20px 0;\n}\n\n.services-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.service-badge {\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n background: #dcfce7;\n color: #166534;\n}\n\n.service-description {\n color: #374151;\n font-size: 14px;\n margin: 0;\n line-height: 1.5;\n background: white;\n padding: 12px;\n border-radius: 6px;\n border: 1px solid #e5e7eb;\n}\n\n.service-url {\n color: #6366f1;\n font-size: 13px;\n margin: 0;\n font-family: monospace;\n background: white;\n padding: 8px 12px;\n border-radius: 6px;\n border: 1px solid #e5e7eb;\n word-break: break-all;\n}\n\n/* Mobile styles */\n@media (max-width: 768px) {\n .config-modal {\n width: 95%;\n max-height: 90vh;\n }\n\n .config-modal-content {\n padding: 16px;\n }\n\n .config-form {\n gap: 12px;\n }\n\n .form-group {\n margin-bottom: 12px;\n }\n\n .apps-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n .app-card {\n padding: 12px;\n }\n}\n\n',""]),e.A=i},10166:function(n,e,t){var a=t(21598),o=t.n(a),r=t(2607),i=t.n(r)()(o());i.push([n.id,".config-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 16px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n height: 48px;\n flex-shrink: 0;\n}\n\n.config-header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n color: white;\n}\n\n.config-header-icon {\n opacity: 0.9;\n width: 18px;\n height: 18px;\n}\n\n.config-header-title {\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 0.3px;\n}\n\n.config-header-buttons {\n display: flex;\n gap: 8px;\n}\n\n.config-header-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: rgba(255, 255, 255, 0.15);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 6px;\n color: white;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n backdrop-filter: blur(10px);\n white-space: nowrap;\n}\n\n.config-header-btn:hover {\n background: rgba(255, 255, 255, 0.25);\n border-color: rgba(255, 255, 255, 0.3);\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);\n}\n\n.config-header-btn:active {\n transform: translateY(0);\n}\n\n.config-header-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n background: rgba(255, 255, 255, 0.08);\n}\n\n.config-header-btn:disabled:hover {\n background: rgba(255, 255, 255, 0.08);\n border-color: rgba(255, 255, 255, 0.2);\n}\n\n/* Mobile responsiveness */\n@media (max-width: 1024px) {\n .config-header {\n padding: 8px 12px;\n height: 44px;\n }\n\n .config-header-buttons {\n gap: 6px;\n }\n\n .config-header-btn {\n padding: 6px 10px;\n font-size: 12px;\n }\n\n .config-header-title {\n font-size: 13px;\n }\n}\n\n@media (max-width: 768px) {\n .config-header {\n padding: 8px 10px;\n height: 44px;\n }\n\n .config-header-buttons {\n gap: 4px;\n }\n\n .config-header-btn {\n padding: 6px 8px;\n font-size: 11px;\n min-width: 32px;\n }\n\n /* Hide text labels on very small screens, keep icons only */\n .config-header-btn span {\n display: none;\n }\n\n .config-header-btn {\n padding: 8px;\n justify-content: center;\n min-width: 36px;\n min-height: 36px;\n }\n\n .config-header-title {\n font-size: 12px;\n }\n}\n\n@media (max-width: 480px) {\n .config-header {\n padding: 6px 8px;\n height: 40px;\n }\n\n .config-header-left {\n gap: 6px;\n }\n\n .config-header-icon {\n width: 16px;\n height: 16px;\n }\n\n .config-header-title {\n font-size: 11px;\n }\n\n .config-header-btn {\n padding: 6px;\n min-width: 32px;\n min-height: 32px;\n }\n}\n\n/* Touch-friendly improvements */\n@media (hover: none) and (pointer: coarse) {\n .config-header-btn {\n min-height: 44px;\n min-width: 44px;\n padding: 10px;\n }\n\n .config-header-btn:hover {\n background: rgba(255, 255, 255, 0.2);\n }\n}\n\n/* Prevent text selection on mobile */\n@media (max-width: 768px) {\n .config-header-btn {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n}\n\n/* Mobile Menu Styles */\n.mobile-menu-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n padding-top: 40px;\n padding-right: 10px;\n}\n\n.mobile-menu {\n background: white;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n width: 280px;\n max-height: calc(100vh - 60px);\n overflow-y: auto;\n animation: slideInFromRight 0.3s ease-out;\n}\n\n@keyframes slideInFromRight {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.mobile-menu-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #e5e7eb;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border-radius: 12px 12px 0 0;\n}\n\n.mobile-menu-header h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n}\n\n.mobile-menu-close {\n background: none;\n border: none;\n color: white;\n cursor: pointer;\n padding: 4px;\n border-radius: 6px;\n transition: background 0.2s;\n}\n\n.mobile-menu-close:hover {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.mobile-menu-content {\n padding: 8px 0;\n}\n\n.mobile-menu-item {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 14px 20px;\n background: none;\n border: none;\n text-align: left;\n cursor: pointer;\n color: #374151;\n font-size: 16px;\n font-weight: 500;\n transition: background 0.2s;\n border-bottom: 1px solid #f3f4f6;\n}\n\n.mobile-menu-item:hover {\n background: #f8fafc;\n}\n\n.mobile-menu-item:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n color: #9ca3af;\n}\n\n.mobile-menu-item:disabled:hover {\n background: transparent;\n}\n\n.mobile-menu-item:last-child {\n border-bottom: none;\n}\n\n.mobile-menu-item span {\n flex: 1;\n}\n\n/* Mobile menu button specific styles */\n.mobile-menu-btn {\n min-width: 44px !important;\n min-height: 44px !important;\n padding: 10px !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n}\n\n/* Hidden tabs - visually hidden but still in DOM */\n.hidden-tab {\n display: none !important;\n}\n\n",""]),e.A=i},10237:function(n,e,t){var a=t(21598),o=t.n(a),r=t(2607),i=t.n(r)()(o());i.push([n.id,'.external {\n background: green;\n color: #fff;\n padding: 1rem;\n}\n\n/* Main container styles */\n.ai-system-steps {\n font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",\n "Helvetica Neue", sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding-left: 0px !important;\n padding-right: 10px;\n}\n\n/* .new-step {\n animation: fadeIn 0.8s ease-out;\n opacity: 1;\n} */\n\n/* @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n} */\n\n/* Main title */\n.system-title {\n font-size: 1.5rem;\n font-weight: bold;\n margin-bottom: 20px;\n color: #333;\n}\n\n/* Steps container */\n.steps-container {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n/* Individual step */\n.step {\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n transition: all 0.3s ease;\n}\n\n.step.expanded {\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Step header */\n.step-header {\n padding: 12px 16px;\n background-color: #f5f7f9;\n display: flex;\n justify-content: space-between;\n /* align-items: center; */\n transition: background-color 0.2s ease;\n}\n\n.step-header:hover {\n background-color: #edf0f3;\n}\n\n/* Title container to group title and expand button */\n.title-container {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n}\n\n/* Step title styling */\n.step-title {\n font-style: italic;\n font-weight: 500;\n color: #333;\n flex-grow: 1;\n}\n\n/* Expand button styling */\n.expand-button {\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #555;\n padding: 4px;\n border-radius: 50%;\n transition: background-color 0.2s ease, color 0.2s ease;\n}\n\n.expand-button:hover {\n background-color: rgba(0, 0, 0, 0.05);\n color: #222;\n}\n\n/* Step content */\n.step-content {\n padding: 16px;\n overflow-x: scroll;\n background-color: white;\n line-height: 1.5;\n}\n\n/* Styles for the stop button container to ensure it\'s always visible */\n.stop-button-container {\n position: sticky;\n bottom: 0;\n opacity: 1;\n background-color: rgba(255, 255, 255, 0);\n padding: 8px 0;\n border-top: 0px solid #e0e0e0;\n z-index: 100;\n width: 100%;\n text-align: center;\n}\n\n.stop-button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 8px 16px;\n background-color: #ff4d4d;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-weight: bold;\n margin: 0 auto;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n transition: all 0.2s ease;\n}\n\n.stop-button:hover {\n background-color: #ff3333;\n box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);\n}\n\n.stop-button:disabled {\n background-color: #cccccc;\n cursor: default;\n box-shadow: none;\n}\n\n.stop-button svg {\n margin-right: 8px;\n}\n',""]),e.A=i},15052:function(n,e,t){t.d(e,{A:function(){return A}});var a=t(7378),o=t(83281),r=t(67733),i=t.n(r),s=t(48034),l=t.n(s),c=t(62562),p=t.n(c),d=t(39805),m=t.n(d),g=t(57577),f=t.n(g),x=t(79062),b=t.n(x),u=t(10166),h={};h.styleTagTransform=b(),h.setAttributes=m(),h.insert=p().bind(null,"head"),h.domAPI=l(),h.insertStyleElement=f();i()(u.A,h),u.A&&u.A.locals&&u.A.locals;var w=t(27082),y=t(57547),v=t(40362),k=t(78987),E=t(52068),z=t(83533),N=t(85521);function A({onToggleLeftSidebar:n,onToggleWorkspace:e,leftSidebarCollapsed:t,workspaceOpen:r}){const[i,s]=(0,a.useState)(null),[l,c]=(0,a.useState)(!1),[p,d]=(0,a.useState)(!1);(0,a.useEffect)(()=>{const n=()=>{d(window.innerWidth<480)};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[]);const m=()=>c(!1);return a.createElement("div",{className:"config-header"},a.createElement("div",{className:"config-header-left"},a.createElement(o.wB_,{className:"config-header-icon"}),a.createElement("span",{className:"config-header-title"},"CUGA Agent")),a.createElement("div",{className:"config-header-buttons"},p?a.createElement("button",{className:"config-header-btn mobile-menu-btn",onClick:()=>c(!l),title:"Menu"},l?a.createElement(o.X,{size:16}):a.createElement(o.W1t,{size:16})):a.createElement(a.Fragment,null,a.createElement("button",{className:"config-header-btn",onClick:n,title:t?"Show sidebar":"Hide sidebar"},a.createElement(o.Bx2,{size:16}),a.createElement("span",null,"Sidebar")),a.createElement("button",{className:"config-header-btn",onClick:e,title:r?"Close workspace":"Open workspace"},a.createElement(o.vdG,{size:16}),a.createElement("span",null,"Workspace")),a.createElement("button",{className:"config-header-btn hidden-tab",disabled:!0,title:"Configure knowledge sources (Coming soon)"},a.createElement(o.Gyj,{size:16}),a.createElement("span",null,"Knowledge")),a.createElement("button",{className:"config-header-btn hidden-tab",disabled:!0,title:"Configure memory settings (Coming soon)"},a.createElement(o.jy9,{size:16}),a.createElement("span",null,"Memory")),a.createElement("button",{className:"config-header-btn hidden-tab",disabled:!0,title:"Configure sub-agents (Coming soon)"},a.createElement(o.zWC,{size:16}),a.createElement("span",null,"Sub Agents")),a.createElement("button",{className:"config-header-btn",onClick:()=>s("tools"),title:"Configure tools"},a.createElement(o.IFY,{size:16}),a.createElement("span",null,"Tools")),a.createElement("button",{className:"config-header-btn hidden-tab",disabled:!0,title:"Configure model settings (Coming soon)"},a.createElement(o.fX,{size:16}),a.createElement("span",null,"Model")),a.createElement("button",{className:"config-header-btn hidden-tab",disabled:!0,title:"Configure security policies (Coming soon)"},a.createElement(o.ekZ,{size:16}),a.createElement("span",null,"Policies")),a.createElement("button",{className:"config-header-btn hidden-tab",disabled:!0,title:"Configure agent autonomy and human interaction (Coming soon)"},a.createElement(o.ZKV,{size:16}),a.createElement("span",null,"Agent ∙ Human")))),"knowledge"===i&&a.createElement(y.A,{onClose:()=>s(null)}),"memory"===i&&a.createElement(w.A,{onClose:()=>s(null)}),"subagents"===i&&a.createElement(k.A,{onClose:()=>s(null)}),"tools"===i&&a.createElement(v.A,{onClose:()=>s(null)}),"model"===i&&a.createElement(E.A,{onClose:()=>s(null)}),"policies"===i&&a.createElement(z.A,{onClose:()=>s(null)}),"agenthuman"===i&&a.createElement(N.A,{onClose:()=>s(null)}),p&&l&&a.createElement("div",{className:"mobile-menu-overlay",onClick:m},a.createElement("div",{className:"mobile-menu",onClick:n=>n.stopPropagation()},a.createElement("div",{className:"mobile-menu-header"},a.createElement("h3",null,"Menu"),a.createElement("button",{className:"mobile-menu-close",onClick:m},a.createElement(o.X,{size:20}))),a.createElement("div",{className:"mobile-menu-content"},a.createElement("button",{className:"mobile-menu-item",onClick:()=>{n(),m()}},a.createElement(o.Bx2,{size:18}),a.createElement("span",null,"Sidebar")),a.createElement("button",{className:"mobile-menu-item",onClick:()=>{e(),m()}},a.createElement(o.vdG,{size:18}),a.createElement("span",null,"Workspace")),a.createElement("button",{className:"mobile-menu-item hidden-tab",disabled:!0},a.createElement(o.Gyj,{size:18}),a.createElement("span",null,"Knowledge")),a.createElement("button",{className:"mobile-menu-item hidden-tab",disabled:!0},a.createElement(o.jy9,{size:18}),a.createElement("span",null,"Memory")),a.createElement("button",{className:"mobile-menu-item hidden-tab",disabled:!0},a.createElement(o.zWC,{size:18}),a.createElement("span",null,"Sub Agents")),a.createElement("button",{className:"mobile-menu-item",onClick:()=>{s("tools"),m()}},a.createElement(o.IFY,{size:18}),a.createElement("span",null,"Tools")),a.createElement("button",{className:"mobile-menu-item hidden-tab",disabled:!0},a.createElement(o.fX,{size:18}),a.createElement("span",null,"Model")),a.createElement("button",{className:"mobile-menu-item hidden-tab",disabled:!0},a.createElement(o.ekZ,{size:18}),a.createElement("span",null,"Policies")),a.createElement("button",{className:"mobile-menu-item hidden-tab",disabled:!0},a.createElement(o.ZKV,{size:18}),a.createElement("span",null,"Agent ⋅ Human"))))))}},24238:function(n,e,t){t.d(e,{_:function(){return F}});var a=t(7378),o=t(83281),r=t(58895),i=t(67733),s=t.n(i),l=t(48034),c=t.n(l),p=t(62562),d=t.n(p),m=t(39805),g=t.n(m),f=t(57577),x=t.n(f),b=t(79062),u=t.n(b),h=t(71576),w={};w.styleTagTransform=u(),w.setAttributes=g(),w.insert=d().bind(null,"head"),w.domAPI=c(),w.insertStyleElement=x();s()(h.A,w),h.A&&h.A.locals&&h.A.locals;var y=t(10237),v={};v.styleTagTransform=u(),v.setAttributes=g(),v.insert=d().bind(null,"head"),v.domAPI=c(),v.insertStyleElement=x();s()(y.A,v),y.A&&y.A.locals&&y.A.locals;var k=t(80425),E=t(92690),z=t(20966),N=t(16923),A=t(95550),C=t(40590),S=t(42718),I=t(69389),T=t(50693),_=t(31681),M=t(34046),j=t(64651);const P="#4e00ec";var U=({chatInstance:n})=>{const[e,t]=(0,a.useState)([]),[o,i]=(0,a.useState)(null),[s,l]=(0,a.useState)(!1),[c,p]=(0,a.useState)({}),[d,m]=(0,a.useState)(!1),[g,f]=(0,a.useState)(!1),[x,b]=(0,a.useState)(0),[u,h]=(0,a.useState)(!1),[w,y]=(0,a.useState)("inplace"),[v,U]=(0,a.useState)({}),[D,R]=(0,a.useState)([]),[Y,$]=(0,a.useState)(null),H=(0,a.useRef)(null),W=(0,a.useRef)({}),F=(0,a.useCallback)(n=>{t(e=>e.map(e=>e.id===n?{...e,completed:!0}:e))},[]);(0,a.useEffect)(()=>{"undefined"!=typeof window&&(window.aiSystemInterface={addStep:(n,a)=>{if("string"==typeof a&&(a.startsWith("{")||a.startsWith("[")))try{JSON.parse(a)}catch(n){}const o={id:`step-${Date.now()}-${Math.random()}`,title:n,content:a,expanded:!0,isNew:!0,timestamp:Date.now()};t(n=>{if(0===n.length){const n=`card-${Date.now()}`;return i(n),[o]}return[...n,o]}),"inplace"===w&&(e.length>0?b(n=>n+1):b(0)),"SuggestHumanActions"===n&&(p(n=>({...n,[o.id]:!0})),m(!0)),"FinalAnswerAgent"!==n&&"FinalAnswer"!==n&&"Answer"!==n||(f(!0),m(!0),p(n=>({...n,[o.id]:!0})),setTimeout(()=>{const n=new CustomEvent("finalAnswerComplete",{detail:{stepId:o.id}});window.dispatchEvent(n)},500))},getAllSteps:()=>e,stopProcessing:()=>{h(!0),l(!0),m(!0),p({})},isProcessingStopped:()=>s,setProcessingComplete:n=>{l(n)},forceReset:()=>{t([]),l(!1),i(null),m(!1),f(!1),b(0),h(!1),p({}),W.current={}},hasStepWithTitle:n=>e.some(e=>e.title===n)})},[e,o,s,w]),(0,a.useEffect)(()=>{if(e.length>0){const n=setTimeout(()=>{const n=e[e.length-1],t=W.current[n.id];t?t.scrollIntoView({behavior:"smooth",block:"center"}):H.current&&H.current.scrollIntoView({behavior:"smooth",block:"center"})},100);return()=>clearTimeout(n)}},[e.length]),(0,a.useEffect)(()=>()=>{W.current={}},[]),(0,a.useEffect)(()=>{const n=[];let t=0;e.forEach(e=>{if("Answer"===e.title||"FinalAnswerAgent"===e.title)try{let a,o={};if("string"==typeof e.content)try{a=JSON.parse(e.content),(void 0!==a.data&&a.variables||a.variables)&&(o=a.variables)}catch(n){}else if(e.content&&"object"==typeof e.content&&"variables"in e.content){const n=e.content;n.variables&&(o=n.variables)}Object.keys(o).length>0&&(n.push({id:e.id,title:`Turn ${t}`,timestamp:e.timestamp,variables:o}),t++)}catch(n){}}),R(e=>{if(e.length!==n.length)return n;const t=e.some((e,t)=>{const a=n[t];return!a||e.id!==a.id||JSON.stringify(e.variables)!==JSON.stringify(a.variables)});return t?n:e}),$(e=>n.length>0?e&&n.find(n=>n.id===e)?e:n[n.length-1].id:D.length>0?e&&D.find(n=>n.id===e)?e:D[D.length-1].id:null)},[e]),(0,a.useEffect)(()=>{if(Y){const n=D.find(n=>n.id===Y);n&&U(n.variables)}else D.length>0?U(D[D.length-1].variables):U({})},[Y,D]),(0,a.useEffect)(()=>{const n=new CustomEvent("variablesUpdate",{detail:{variables:v,history:D}});window.dispatchEvent(n)},[v,D]);const G=(n,e)=>{switch(n){case"PlanControllerAgent":if(e.subtasks_progress&&e.next_subtask){const n=e.subtasks_progress.filter(n=>"completed"===n).length,t=e.subtasks_progress.length;return 0===t?`I'm managing the overall task progress. There's <span style="color:${P}; font-weight: 600;">one next task</span>. ${e.conclude_task?"The task is ready to be concluded.":`Next up: <span style="color:${P}; font-weight: 600;">${e.next_subtask}</span>`}`:`I'm managing the overall task progress. Currently <span style="color:${P}; font-weight: 600;">${n} out of ${t} subtasks</span> are completed. ${e.conclude_task?"The task is ready to be concluded.":`Next up: <span style="color:${P}; font-weight: 600;">${e.next_subtask}</span>`}`}return"I'm analyzing the task structure and planning the execution approach.";case"TaskDecompositionAgent":const n=e.task_decomposition?.length||0;return`I've broken down your request into <span style="color:${P}; font-weight: 600;">${n} manageable steps</span>. Each step is designed to work with specific applications and accomplish a specific part of your overall goal.`;case"APIPlannerAgent":if(e.action&&(e.action_input_coder_agent||e.action_input_shortlisting_agent||e.action_input_conclude_task)){const n=e.action;if("CoderAgent"===n)return`I'm preparing to write code for you. The task involves: <span style="color:${P}; font-weight: 600;">${e.action_input_coder_agent?.task_description||"Code generation task"}</span>`;if("ApiShortlistingAgent"===n){const n=e.action_input_shortlisting_agent?.task_description;if(n){const e=n.length>60?n.substring(0,60)+"...":n;return`I'm analyzing available APIs, <span style="color:${P}; font-weight:500;">${e}</span>`}return"I'm analyzing available APIs to find the best options for your request. This will help me understand what tools are available to accomplish your task."}if("ConcludeTask"===n){const n=e.action_input_conclude_task?.final_response;if(n){const e=n.length>60?n.substring(0,60)+"...":n;return`I'm ready to provide you with the final answer based on all the work completed so far. <span style="color:${P}; font-weight:500;">${e}</span>`}return"I'm ready to provide you with the final answer based on all the work completed so far."}}return"I'm reflecting on the code and planning the next steps in the workflow.";case"CodeAgent":if(e.code){const n=e.code.split("\n").length,t=e.execution_output?e.execution_output.substring(0,50)+(e.execution_output.length>50?"...":""):"";return`I've generated and executed <span style="color:${P}; font-weight: 600;">${n} lines of code</span> to accomplish your request. Here's a preview of the output: <span style="color:#10b981; font-family:monospace; background:#f0fdf4; padding:2px 4px; border-radius:3px; font-weight:500;">${t}</span>`}return"I'm working on generating code for your request.";case"ShortlisterAgent":if(e.result){const n=e.result.length,t=e.result[0],a=t?.relevance_score||0,o=t?.name||t?.title||"Unknown API",r=o.length>30?o.substring(0,30)+"...":o;return`I've analyzed and shortlisted <span style="color:${P}; font-weight: 600;">${n} relevant APIs</span> for your request. The top match is <span style="color:${P}; font-weight: 600;">${r}</span> with a <span style="color:${P}; font-weight: 600;">${Math.round(100*a)}% relevance score</span>.`}return"I'm analyzing available APIs to find the most relevant ones for your request.";case"TaskAnalyzerAgent":if(e&&Array.isArray(e)){const n=e.map(n=>`<span style="color:${P}; font-weight: 600;">${n.name}</span>`).join(", ");return`I've identified <span style="color:${P}; font-weight: 600;">${e.length} integrated applications</span> that can help with your request: ${n}. These apps are ready to be used in the workflow.`}return"I'm analyzing the available applications to understand what tools we can use.";case"PlannerAgent":return"I'm planning the next action in the workflow. This involves determining the best approach to continue working on your request.";case"QaAgent":return e.name&&e.answer?`I've analyzed the question "<span style="color:${P}; font-weight: 600;">${e.name}</span>" and provided a comprehensive answer with <span style="color:${P}; font-weight: 600;">${e.answer.split(" ").length} words</span>.`:"I'm processing a question and preparing a detailed answer.";case"FinalAnswerAgent":return e.final_answer?"I've completed your request and prepared the final answer.":"I'm preparing the final answer to your request.";case"ReuseAgent":return"string"==typeof e?e.split("\n")[0]:"Save and reuse operation completed.";case"SuggestHumanActions":return e.action_id?"I'm waiting for your input to continue. Please review the suggested action and let me know how you'd like to proceed.":"I'm preparing suggestions for your next action.";case"APICodePlannerAgent":const t="string"==typeof e?e:JSON.stringify(e),a=t.length>80?t.substring(0,80)+"...":t;return`I've generated a plan for the coding agent to follow. Plan preview: <span style="color:${P}; font-weight:500;">${a}</span>`;default:return"I'm processing your request and working on the next step in the workflow."}},L=(0,a.useCallback)(e=>{try{let t;if("string"==typeof e.content)try{t=JSON.parse(e.content);const n=Object.keys(t);if(void 0!==t.data&&t.variables)t="Answer"===e.title||"FinalAnswerAgent"===e.title?{final_answer:t.data,variables:t.variables}:"object"!=typeof t.data||Array.isArray(t.data)?{data:t.data,variables:t.variables}:{...t.data,variables:t.variables};else if(1===n.length&&"data"===n[0]){t=t.data}}catch(n){t=e.content}else t=e.content;let o=[];if(t&&t.additional_data&&t.additional_data.tool){const n=a.createElement(j.A,{toolData:t.additional_data.tool});o.push(n)}let i=null;switch(e.title){case"PlanControllerAgent":t.subtasks_progress&&t.next_subtask&&(i=a.createElement(k.A,{taskData:t}));break;case"TaskDecompositionAgent":i=a.createElement(A.A,{decompositionData:t});break;case"APIPlannerAgent":i=t.action&&(t.action_input_coder_agent||t.action_input_shortlisting_agent||t.action_input_conclude_task)?a.createElement(E.A,{actionData:t}):a.createElement(S.A,{title:"Code Reflection",content:t});break;case"CodeAgent":t.code&&(i=a.createElement(z.A,{coderData:t}));break;case"ShortlisterAgent":t&&(i=a.createElement(C.A,{shortlisterData:t}));break;case"WaitForResponse":return null;case"TaskAnalyzerAgent":t&&Array.isArray(t)&&(i=a.createElement(N.A,{appData:t}));break;case"PlannerAgent":t&&(i=a.createElement(I.A,{agentData:t}));break;case"simple_text_box":t&&(i=t);break;case"QaAgent":t&&(i=a.createElement(T.A,{qaData:t}));break;case"Answer":case"FinalAnswerAgent":if(t){const n=t.final_answer||("string"==typeof t?t:null);n&&(i=a.createElement("div",{style:{fontSize:"14px",lineHeight:"1.6",color:"#1e293b"},dangerouslySetInnerHTML:{__html:(0,r.xI)(n)}}))}break;case"SuggestHumanActions":t&&t.action_id&&(i=a.createElement(_.n,{followupAction:t,callback:async t=>{F(e.id),await(0,M.BI)(n,"",t)}}));break;default:null!==t&&("object"==typeof t||Array.isArray(t))&&!(t instanceof Date)&&!(t instanceof RegExp)&&(t=JSON.stringify(t,null,2),t=`\`\`\`json\n${t}\n\`\`\``),t||(t=""),i=a.createElement(S.A,{title:e.title,content:t})}return i&&o.push(i),a.createElement("div",null,o)}catch(n){return null}},[n,F]),B=(0,a.useCallback)(n=>{p(e=>({...e,[n]:!e[n]}))},[c]),O=(0,a.useCallback)(()=>{m(n=>!n)},[]),q=e.some(n=>"Error"===n.title),X=e.filter(n=>"FinalAnswerAgent"===n.title||"FinalAnswer"===n.title),V=e.filter(n=>"SuggestHumanActions"===n.title&&!n.completed),K=e.filter(n=>"FinalAnswerAgent"!==n.title&&"FinalAnswer"!==n.title&&!("SuggestHumanActions"===n.title&&!n.completed)),J=e[x],Z=!u&&"inplace"===w&&!g&&0===V.length&&J,Q=!u&&e.length>0&&!s&&!g&&0===V.length&&!q,nn=(n,e=!1)=>{let t;try{if("string"==typeof n.content)try{t=JSON.parse(n.content);const e=Object.keys(t);if(1===e.length&&"data"===e[0]){t=t.data}}catch(e){t=n.content}else t=n.content}catch(e){t=n.content}if("simple_text"===n.title)return a.createElement("div",{key:n.id,style:{marginBottom:"10px"}},n.content);const o=c[n.id]?L(n):null;return a.createElement("div",{key:n.id,ref:e=>{W.current[n.id]=e},className:`component-container ${n.isNew?"new-component":""} ${e?"current-step":""}`,style:{marginBottom:"16px",padding:"12px",paddingTop:"28px",backgroundColor:"#ffffff",borderRadius:"6px",border:"1px solid #e2e8f0",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.05)",position:"relative"}},a.createElement("div",{style:{marginBottom:"12px",display:"flex",alignItems:"center",justifyContent:"space-between"}},a.createElement("h3",{style:{fontSize:"14px",fontWeight:"500",color:"#475569",margin:"0",display:"flex",alignItems:"center",gap:"6px"}},(r=n.title,{TaskDecompositionAgent:"Decomposed task into steps",TaskAnalyzerAgent:"Analyzed available applications",PlanControllerAgent:"Controlled task execution",SuggestHumanActions:a.createElement("span",{style:{display:"flex",alignItems:"center",gap:"8px"}},a.createElement("div",{className:"w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin"}),a.createElement("span",null,"Waiting for your input")),APIPlannerAgent:"Planned API actions",APICodePlannerAgent:"Planned steps for coding agent",CodeAgent:"Generated code solution",ShortlisterAgent:"Shortlisted relevant APIs",QaAgent:"Answered question",FinalAnswerAgent:"Completed final answer",Answer:"Answer"}[r]||r))),a.createElement("div",{style:{marginBottom:"12px"}},a.createElement("p",{style:{margin:"0",fontSize:"13px",color:"#64748b",lineHeight:"1.4"},dangerouslySetInnerHTML:{__html:G(n.title,t)}})),o&&a.createElement("div",null,o),a.createElement("button",{onClick:()=>B(n.id),style:{position:"absolute",right:"8px",top:"8px",display:"flex",alignItems:"center",gap:"6px",background:"transparent",border:"1px solid #e5e7eb",borderRadius:"12px",padding:"4px 8px",fontSize:"11px",color:c[n.id]?"#3b82f6":"#64748b",cursor:"pointer"},onMouseOver:n=>{n.currentTarget.style.backgroundColor="#f8fafc"},onMouseOut:n=>{n.currentTarget.style.backgroundColor="transparent"}},a.createElement("span",{style:{display:"inline-block",transform:c[n.id]?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease",fontSize:"12px"}},"▼"),a.createElement("span",null,"details")));var r};return a.createElement("div",{className:"components-container",ref:H},!u&&a.createElement("div",{style:{display:"flex",justifyContent:"flex-end",marginBottom:"6px"}},a.createElement("div",{style:{display:"flex",alignItems:"center",gap:"6px"}},a.createElement("span",{style:{fontSize:"11px",color:"#64748b"}},"View:"),a.createElement("button",{onClick:()=>y("inplace"),style:{padding:"2px 6px",backgroundColor:"inplace"===w?"#2563eb":"transparent",color:"inplace"===w?"#ffffff":"#64748b",border:"1px solid #e5e7eb",borderRadius:"3px",fontSize:"10px",fontWeight:500,cursor:"pointer"}},"In-place"),a.createElement("button",{onClick:()=>y("append"),style:{padding:"2px 6px",backgroundColor:"append"===w?"#2563eb":"transparent",color:"append"===w?"#ffffff":"#64748b",border:"1px solid #e5e7eb",borderRadius:"3px",fontSize:"10px",fontWeight:500,cursor:"pointer"}},"Append"))),!u&&"append"===w&&e.length>0&&(g?a.createElement("div",null,K.length>0&&a.createElement("div",{style:{marginBottom:"16px",padding:"12px",backgroundColor:"#f8fafc",borderRadius:"8px",border:"1px solid #e2e8f0",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.05)"}},a.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer",userSelect:"none"},onClick:O},a.createElement("h3",{style:{fontSize:"16px",fontWeight:"600",color:"#374151",margin:"0",display:"flex",alignItems:"center",gap:"8px"}},a.createElement("span",{style:{transform:d?"rotate(-90deg)":"rotate(0deg)",transition:"transform 0.3s ease",fontSize:"14px"}},"▼"),"Reasoning Process",a.createElement("span",{style:{fontSize:"12px",fontWeight:"400",color:"#6b7280",backgroundColor:"#e5e7eb",padding:"2px 8px",borderRadius:"12px"}},K.length," steps")),a.createElement("div",{style:{fontSize:"12px",color:"#6b7280",fontStyle:"italic"}},d?"Click to expand":"Click to collapse")),a.createElement("div",{style:{maxHeight:d?"0":"10000px",overflow:"hidden",transition:"max-height 0.5s ease-in-out, opacity 0.3s ease-in-out",opacity:d?0:1}},a.createElement("div",{style:{marginTop:"12px"}},K.map(n=>nn(n,!1))))),X.map(n=>nn(n,!1))):a.createElement("div",null,e.map(n=>a.createElement("div",{key:n.id},nn(n,!1))))),u&&e.length>0&&a.createElement("div",{style:{marginBottom:"16px",padding:"12px",backgroundColor:"#f8fafc",borderRadius:"8px",border:"1px solid #e2e8f0",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.05)"}},a.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer",userSelect:"none"},onClick:O},a.createElement("h3",{style:{fontSize:"16px",fontWeight:"600",color:"#374151",margin:"0",display:"flex",alignItems:"center",gap:"8px"}},a.createElement("span",{style:{transform:d?"rotate(-90deg)":"rotate(0deg)",transition:"transform 0.3s ease",fontSize:"14px"}},"▼"),"Reasoning Process",a.createElement("span",{style:{fontSize:"12px",fontWeight:"400",color:"#6b7280",backgroundColor:"#e5e7eb",padding:"2px 8px",borderRadius:"12px"}},e.length," steps")),a.createElement("div",{style:{fontSize:"12px",color:"#6b7280",fontStyle:"italic"}},d?"Click to expand":"Click to collapse")),a.createElement("div",{style:{maxHeight:d?"0":"10000px",overflow:"hidden",transition:"max-height 0.5s ease-in-out, opacity 0.3s ease-in-out",opacity:d?0:1}},a.createElement("div",{style:{marginTop:"12px"}},e.map(n=>nn(n,!1))))),u&&a.createElement("div",{style:{marginTop:"8px"}},a.createElement("div",{style:{marginBottom:"16px",padding:"12px",backgroundColor:"#ffffff",borderRadius:"6px",border:"1px solid #e2e8f0",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.05)"}},a.createElement("div",{style:{marginBottom:"12px",display:"flex",alignItems:"center",justifyContent:"space-between"}},a.createElement("h3",{style:{fontSize:"14px",fontWeight:"500",color:"#475569",margin:"0",display:"flex",alignItems:"center",gap:"6px"}},"Task Interrupted")),a.createElement("div",null,a.createElement("p",{style:{margin:"0",fontSize:"13px",color:"#64748b",lineHeight:"1.4"}},"The task was stopped by the user.")))),!u&&"inplace"===w&&(g||V.length>0)&&K.length>0&&a.createElement("div",{style:{marginBottom:"16px",padding:"12px",backgroundColor:"#f8fafc",borderRadius:"8px",border:"1px solid #e2e8f0",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.05)"}},a.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer",userSelect:"none"},onClick:O},a.createElement("h3",{style:{fontSize:"16px",fontWeight:"600",color:"#374151",margin:"0",display:"flex",alignItems:"center",gap:"8px"}},a.createElement("span",{style:{transform:d?"rotate(-90deg)":"rotate(0deg)",transition:"transform 0.3s ease",fontSize:"14px"}},"▼"),"Reasoning Process",a.createElement("span",{style:{fontSize:"12px",fontWeight:"400",color:"#6b7280",backgroundColor:"#e5e7eb",padding:"2px 8px",borderRadius:"12px"}},K.length," steps")),a.createElement("div",{style:{fontSize:"12px",color:"#6b7280",fontStyle:"italic"}},d?"Click to expand":"Click to collapse")),a.createElement("div",{style:{maxHeight:d?"0":"10000px",overflow:"hidden",transition:"max-height 0.5s ease-in-out, opacity 0.3s ease-in-out",opacity:d?0:1}},a.createElement("div",{style:{marginTop:"12px"}},K.map(n=>nn(n,!1))))),!u&&"inplace"===w&&Z&&a.createElement("div",{className:"current-step-container "+(Q?"loading-border":""),style:{position:"relative",minHeight:"200px"}},nn(J,!0)),!u&&"inplace"===w&&X.map(n=>nn(n,!1)),!u&&"inplace"===w&&V.map(n=>nn(n,!1)),!u&&"inplace"===w&&e.length>0&&!s&&!g&&0===V.length&&!q&&!Z&&a.createElement("div",{style:{marginTop:"8px",marginBottom:"2px"}},a.createElement("div",{style:{fontSize:"10px",color:"#94a3b8",display:"flex",alignItems:"center",justifyContent:"center",marginBottom:"4px",userSelect:"none"}},a.createElement("span",null,"CUGA is thinking..")),a.createElement("div",{style:{height:"4px",position:"relative",overflow:"hidden",background:"#eef2ff",borderRadius:"9999px",boxShadow:"inset 0 0 0 1px #e5e7eb"}},a.createElement("div",{style:{position:"absolute",left:0,top:0,bottom:0,width:"28%",background:"linear-gradient(90deg, #a78bfa 0%, #6366f1 100%)",borderRadius:"9999px",animation:"cugaShimmer 1.7s infinite",boxShadow:"0 0 6px rgba(99,102,241,0.25)"}})),a.createElement("style",null,"\n @keyframes cugaShimmer {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(300%); }\n }\n ")))},D=t(71426),R=t(17933),Y=t(49397),$=t(43905),H=t(24920),W={};W.styleTagTransform=u(),W.setAttributes=g(),W.insert=d().bind(null,"head"),W.domAPI=c(),W.insertStyleElement=x();s()(H.A,W),H.A&&H.A.locals&&H.A.locals;function F({onVariablesUpdate:n,onFileAutocompleteOpen:e,onFileHover:r,onMessageSent:i,onChatStarted:s,onThreadIdChange:l,initialChatStarted:c=!1}){const[p,d]=(0,a.useState)([]),[m,g]=(0,a.useState)(""),[f,x]=(0,a.useState)(!1),b=(0,a.useRef)(null),u=(0,a.useRef)(null),h=(0,a.useRef)(null),[w,y]=(0,a.useState)(!1),[v,k]=(0,a.useState)(""),[E,z]=(0,a.useState)([]),[N,A]=(0,a.useState)([]),[C,S]=(0,a.useState)(0),[I,T]=(0,a.useState)([]),[_,j]=(0,a.useState)(""),P=(0,a.useRef)(""),[H,W]=(0,a.useState)(!0),[F,G]=(0,a.useState)(c),[L,B]=(0,a.useState)([]),[O,q]=(0,a.useState)(""),[X,V]=(0,a.useState)(new Set(["contacts.txt"]));(0,a.useEffect)(()=>{s&&s(F)},[F,s]),(0,a.useEffect)(()=>{const n=crypto.randomUUID();j(n),P.current=n,l&&l(n)},[l]);const K=(0,a.useCallback)(()=>({messaging:{addMessage:async()=>{}}}),[]);(0,a.useEffect)(()=>{h.current||(h.current=K())},[K]),(0,a.useEffect)(()=>{const e=e=>{const{variables:t,history:a}=e.detail;n&&n(t,a)};if("undefined"!=typeof window)return window.addEventListener("variablesUpdate",e),()=>{window.removeEventListener("variablesUpdate",e)}},[]),(0,a.useEffect)(()=>{const n=()=>{if(O){const n=J(O);B(n)}};if("undefined"!=typeof window)return window.addEventListener("finalAnswerComplete",n),()=>{window.removeEventListener("finalAnswerComplete",n)}},[O]);const J=n=>{const e=n.toLowerCase();return e.includes("from contacts.txt show me which users belong to the crm system")?["show me details of first one","Show me details of Sarah"]:e.includes("show me details of")||e.includes("details of sarah")||e.includes("details of first one")?["How many employees work at her company's account","Which percentile is her account's revenue across all accounts?"]:[]};(0,a.useEffect)(()=>{b.current?.scrollIntoView({behavior:"smooth"})},[p]),(0,a.useEffect)(()=>{const n=async()=>{try{const{workspaceService:n}=await t.e(9135).then(t.bind(t,39135)),e=await n.getWorkspaceTree(),a=Z(e.tree||[]);z(a)}catch(n){}};n();const e=setInterval(n,15e3);return()=>clearInterval(e)},[]),(0,a.useEffect)(()=>{if(w){if(""===v)A(E.slice(0,10));else{const n=v.toLowerCase(),e=E.filter(e=>{const t=e.name.toLowerCase().includes(n),a=e.path.toLowerCase().includes(n);return t||a}).slice(0,10);A(e)}S(0)}else A([])},[w,v,E]),(0,a.useEffect)(()=>{w&&N.length>0&&C>=0&&C<N.length?r?.(N[C].path):w||r?.(null)},[C,w,N,r]);const Z=n=>{const e=[];for(const t of n)"file"===t.type?e.push({name:t.name,path:t.path}):t.children&&e.push(...Z(t.children));return e},Q=async()=>{if(!u.current)return;const n=u.current.textContent?.trim()||"";if(!n||f)return;let e=n;u.current.querySelectorAll(".inline-file-reference").forEach(n=>{const t=n.getAttribute("data-file-path"),a=n.getAttribute("data-file-name");t&&a&&(e=e.replace(n.textContent||"",`./${t}`))});const t=u.current.innerHTML,a={id:`msg-${Date.now()}`,text:t,isUser:!0,timestamp:Date.now()};d(n=>[...n,a]),G(!0),q(e),B([]),i&&i(e),u.current.innerHTML="",g(""),T([]),W(!1),x(!0);const o=K();h.current=o;const r={id:`bot-${Date.now()}`,text:"",isUser:!1,timestamp:Date.now(),isCardResponse:!0,chatInstance:o};d(n=>[...n,r]);try{if(!(P.current||_)){const n=crypto.randomUUID();j(n),P.current=n,l&&l(n)}const n=P.current||_;await(0,M.BI)(o,e,void 0,n)}catch(n){}finally{x(!1)}},nn=n=>{const t=n.currentTarget,a=t.textContent||"";g(a),a.trim().length>0?W(!1):W(!0);const o=a.lastIndexOf("@");if(-1!==o){const n=o>0?a[o-1]:" ";if(0===o||/\s/.test(n)){const n=a.substring(o+1).split(/\s/)[0];k(n),y(!0),e?.()}else y(!1)}else y(!1);const r=[];t.querySelectorAll(".inline-file-reference").forEach(n=>{const e=n.getAttribute("data-file-path"),t=n.getAttribute("data-file-name");if(e&&t){const n=I.find(n=>n.path===e),a=n?.id||`file-${Date.now()}-${Math.random().toString(36).substr(2,9)}`;r.push({name:t,path:e,id:a})}}),T(r),t.style.height="auto",t.style.height=`${Math.min(t.scrollHeight,120)}px`},en=n=>{const e=n.target;if(e.classList.contains("file-chip-remove")){n.preventDefault(),n.stopPropagation();const t=e.closest(".inline-file-reference");return void(t&&u.current&&(t.remove(),nn({currentTarget:u.current}),u.current.focus()))}const t=e.closest(".inline-file-reference");if(t&&(n.preventDefault(),n.stopPropagation(),u.current)){u.current.focus();const n=document.createRange(),e=window.getSelection();let a=t.nextSibling;if(a&&a.nodeType===Node.TEXT_NODE)n.setStart(a,0),n.setEnd(a,0);else{const e=document.createTextNode("");t.parentNode?.insertBefore(e,a),n.setStart(e,0),n.setEnd(e,0)}e?.removeAllRanges(),e?.addRange(n)}},tn=n=>{if(!u.current)return;const e=E.find(e=>e.path===n);if(!e)return;const t=window.getSelection(),a=t?.getRangeAt(0);if(!a)return;const o=document.createElement("span");o.className="inline-file-reference",o.setAttribute("data-file-path",n),o.setAttribute("data-file-name",e.name),o.setAttribute("contentEditable","false"),o.innerHTML=`<svg class="file-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14,2 14,8 20,8"></polyline></svg><span class="file-name">${e.name}</span><button class="file-chip-remove" type="button" aria-label="Remove file">×</button>`;const r=u.current.textContent||"",i=r.lastIndexOf("@");if(-1===i)return;const s=r.substring(i+1).split(/\s/)[0],l=document.createTreeWalker(u.current,NodeFilter.SHOW_TEXT,null);let c,p=null,d=-1;for(;c=l.nextNode();){const n=(c.textContent||"").indexOf("@");if(-1!==n){p=c,d=n;break}}if(p&&-1!==d){const n=d+1+s.length,e=document.createRange();e.setStart(p,d),e.setEnd(p,Math.min(n,p.length)),e.deleteContents(),e.insertNode(o);const a=document.createTextNode(" ");e.setStartAfter(o),e.insertNode(a),e.setStartAfter(a),e.setEndAfter(a),t?.removeAllRanges(),t?.addRange(e)}y(!1),nn({currentTarget:u.current}),u.current.focus()},an=n=>{n.preventDefault();const e=n.clipboardData.getData("text/plain"),t=window.getSelection(),a=t?.getRangeAt(0);if(a&&u.current){a.deleteContents();const n=document.createTextNode(e);a.insertNode(n),a.setStartAfter(n),a.setEndAfter(n),t?.removeAllRanges(),t?.addRange(a),nn({currentTarget:u.current})}},on=()=>{m.trim()||W(!0)},rn=()=>{},sn=n=>{const e=window.getSelection(),t=e?.getRangeAt(0);let a=!1;if(t){let e=t.commonAncestorContainer;for(e.nodeType===Node.TEXT_NODE&&(e=e.parentNode);e&&e!==n.currentTarget;){if(e instanceof HTMLElement&&e.classList.contains("inline-file-reference")){a=!0;break}e=e.parentNode}}if(a){const e=["Backspace","Delete"];if(!(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(n.key)||e.includes(n.key)||n.ctrlKey||n.metaKey))return void n.preventDefault();if("Backspace"===n.key||"Delete"===n.key){n.preventDefault();let e=null;return t?.commonAncestorContainer?.parentNode instanceof HTMLElement&&(e=t.commonAncestorContainer.parentNode.closest(".inline-file-reference")),!e&&t?.startContainer?.parentNode instanceof HTMLElement&&(e=t.startContainer.parentNode.closest(".inline-file-reference")),void(e&&u.current&&(e.remove(),nn({currentTarget:u.current}),u.current.focus()))}}if(w&&N.length>0){if("ArrowDown"===n.key)return n.preventDefault(),void S(n=>(n+1)%N.length);if("ArrowUp"===n.key)return n.preventDefault(),void S(n=>(n-1+N.length)%N.length);if("Enter"===n.key||"Tab"===n.key)return n.preventDefault(),void tn(N[C].path);if("Escape"===n.key)return n.preventDefault(),void y(!1)}if("Enter"===n.key){if(n.shiftKey)return;n.preventDefault(),Q()}};return a.createElement("div",{className:"custom-chat-container"},F&&a.createElement("div",{className:"custom-chat-header"},a.createElement("div",{className:"chat-header-left"},a.createElement(o.cC5,{size:20}),a.createElement("span",{className:"chat-header-title"},"CUGA Agent")),a.createElement("button",{className:"chat-restart-btn",onClick:async()=>{const n=crypto.randomUUID();j(n),P.current=n,l&&l(n);try{await fetch("/reset",{method:"POST",headers:{"Content-Type":"application/json","X-Thread-ID":n}})}catch(n){}d([]),G(!1),x(!1),g(""),W(!0),B([]),q(""),h.current=K()},title:"Restart conversation"},a.createElement(o.Hbd,{size:16}),a.createElement("span",null,"Restart"))),F?a.createElement("div",{className:"custom-chat-messages"},p.map(n=>a.createElement("div",{key:n.id,className:"message "+(n.isUser?"message-user":"message-bot")},a.createElement("div",{className:"message-avatar"},n.isUser?a.createElement(o.KJW,{size:18}):a.createElement("img",{src:"https://avatars.githubusercontent.com/u/230847519?s=48&v=4",alt:"Bot Avatar",className:"bot-avatar-image"})),n.isCardResponse&&n.chatInstance?a.createElement("div",{className:"message-content message-card-content"},a.createElement(U,{chatInstance:n.chatInstance})):a.createElement("div",{className:"message-content",dangerouslySetInnerHTML:{__html:n.text}}))),a.createElement("div",{ref:b})):a.createElement("div",{className:"welcome-screen"},a.createElement("header",{className:"main-nav-header"},a.createElement("div",{className:"nav-container"},a.createElement("div",{className:"nav-brand"},a.createElement("img",{src:"https://avatars.githubusercontent.com/u/230847519?s=100&v=4",alt:"CUGA",className:"nav-logo"}),a.createElement("span",{className:"nav-brand-text"},"CUGA Agent")),a.createElement("nav",{className:"nav-links"},a.createElement("a",{href:"https://docs.cuga.dev",target:"_blank",rel:"noopener noreferrer",className:"nav-link"},"Docs"),a.createElement("a",{href:"https://cuga.dev",target:"_blank",rel:"noopener noreferrer",className:"nav-link"},"Site"),a.createElement("a",{href:"https://github.com/cuga-project/cuga-agent",target:"_blank",rel:"noopener noreferrer",className:"nav-link"},"GitHub"),a.createElement("a",{href:"https://discord.gg/UhNVTggG",target:"_blank",rel:"noopener noreferrer",className:"nav-link"},"Community"),a.createElement("a",{href:"https://github.com/cuga-project/cuga-agent/issues/new",target:"_blank",rel:"noopener noreferrer",className:"nav-link nav-link-feedback"},"Give Feedback")))),a.createElement("div",{className:"welcome-top-section"},a.createElement("div",{className:"welcome-left-column"},a.createElement("div",{className:"welcome-content"},a.createElement("div",{className:"welcome-header"},a.createElement("h1",{className:"welcome-title"},"Experience CUGA Agent"),a.createElement("p",{className:"mission-text"},"Intelligent task automation through multi-agent orchestration, API integration, and code generation on enterprise demo applications.")),a.createElement("div",{className:"demo-apps-section"},a.createElement("div",{className:"section-header"},a.createElement("h2",{className:"section-title"},"Connected Apps and Tools for This Demo")),a.createElement("div",{className:"demo-apps-grid"},a.createElement("div",{className:"demo-app-card crm-card"},a.createElement("div",{className:"demo-app-icon"},a.createElement(o.WmV,{size:32})),a.createElement("div",{className:"demo-app-card-content"},a.createElement("h3",{className:"demo-app-name"},"CRM System"),a.createElement("p",{className:"demo-app-tools"},"20 Tools Available"),a.createElement("div",{className:"demo-app-examples"},a.createElement("span",{className:"demo-app-tag"},"Get Accounts"),a.createElement("span",{className:"demo-app-tag"},"Get Contacts"),a.createElement("span",{className:"demo-app-tag"},"Get Leads"),a.createElement("span",{className:"demo-app-tag"},"+17 more")),a.createElement("p",{className:"demo-app-description"},"Manage customers, accounts, contacts, and deals with full CRUD operations"))),a.createElement("div",{className:"demo-app-card filesystem-card filesystem-card-expanded"},a.createElement("div",{className:"demo-app-icon"},a.createElement(o.iUU,{size:32})),a.createElement("div",{className:"demo-app-card-content"},a.createElement("h3",{className:"demo-app-name"},"Workspace Files"),a.createElement("p",{className:"demo-app-tools"},"File Management"),a.createElement("div",{className:"demo-app-examples"},a.createElement("span",{className:"demo-app-tag"},"Read File")),a.createElement("p",{className:"demo-app-description"},"Read files from the cuga_workspace directory"),a.createElement("div",{className:"workspace-files-preview"},a.createElement("div",{className:"workspace-file-item"},a.createElement("div",{className:"workspace-file-header clickable",onClick:()=>{return n="contacts.txt",void V(e=>{const t=new Set(e);return t.has(n)?t.delete(n):t.add(n),t});var n}},a.createElement(o.c_$,{size:14,className:"workspace-file-chevron "+(X.has("contacts.txt")?"expanded":"")}),a.createElement(o.iUU,{size:14}),a.createElement("span",{className:"workspace-file-name"},"contacts.txt"),a.createElement("span",{className:"workspace-file-badge"},"7 contacts")),X.has("contacts.txt")&&a.createElement("div",{className:"workspace-file-content"},a.createElement("code",null,"[email protected]"),a.createElement("code",null,"[email protected]"),a.createElement("code",null,"[email protected]"),a.createElement("span",{className:"workspace-file-more"},"+4 more..."))),a.createElement("div",{className:"workspace-files-more"},"and 3 more files...")))))))),a.createElement("div",{className:"welcome-right-column"},a.createElement("div",{className:"get-started-container"},a.createElement("div",{className:"github-section-right"},a.createElement("a",{href:"https://github.com/cuga-project/cuga-agent",target:"_blank",rel:"noopener noreferrer",className:"github-button-sidebar"},"🌟 Star us on GitHub")),a.createElement("div",{className:"get-started-section"},a.createElement("div",{className:"section-header"},a.createElement("h2",{className:"section-title"},"Get Started"),a.createElement("p",{className:"section-subtitle"},"Try one of these examples or type your own request")),H&&!m.trim()&&a.createElement("div",{className:"example-utterances-widget"},a.createElement("div",{className:"example-utterances-list"},$.d.map((n,e)=>a.createElement("button",{key:e,className:"example-utterance-chip",onMouseDown:e=>{e.preventDefault(),(n=>{u.current&&(u.current.textContent=n,g(n),W(!1),u.current.focus(),u.current.scrollIntoView({behavior:"smooth",block:"center"}),nn({currentTarget:u.current}),setTimeout(()=>{u.current?.scrollIntoView({behavior:"smooth",block:"center"})},100))})(n.text)},type:"button"},a.createElement("div",{className:"example-utterance-text"},n.text),a.createElement("div",{className:"example-utterance-reason"},n.reason)))))),a.createElement("div",{className:"welcome-input-wrapper"},!F&&a.createElement("div",{className:"welcome-logo input-logo"},a.createElement("img",{src:"https://avatars.githubusercontent.com/u/230847519?s=100&v=4",alt:"CUGA Logo",className:"welcome-logo-image"})),a.createElement("div",{className:"chat-input-container-welcome"},a.createElement("div",{className:"textarea-wrapper"},a.createElement("div",{ref:u,id:"main-input_field",className:"chat-input",contentEditable:!f,onInput:nn,onClick:en,onKeyDown:sn,onPaste:an,onFocus:on,onBlur:rn,"data-placeholder":"Type your message... (@ for files, Shift+Enter for new line)",style:{minHeight:"44px",maxHeight:"120px",overflowY:"auto"}})),a.createElement(D.Z,{location:"inline"}),a.createElement("button",{className:"chat-send-btn",onClick:Q,disabled:!m.trim()||f,title:"Send message"},a.createElement(o.Vnp,{size:18}))))))),a.createElement("div",{className:"welcome-features-section"},a.createElement("div",{className:"section-header"},a.createElement("h2",{className:"section-title"},"Key Capabilities"),a.createElement("p",{className:"section-subtitle"},"Powerful features that make CUGA an intelligent automation platform")),a.createElement("div",{className:"welcome-features"},a.createElement("div",{className:"feature-card"},a.createElement("div",{className:"feature-icon multi-agent-icon"},a.createElement(o.cC5,{size:32})),a.createElement("h3",{className:"feature-title"},"Multi-Agent System"),a.createElement("p",{className:"feature-description"},"CUGA orchestrates specialized agents for planning, coding & execution")),a.createElement("div",{className:"feature-card"},a.createElement("div",{className:"feature-icon code-exec-icon"},a.createElement(o.BKt,{size:32})),a.createElement("h3",{className:"feature-title"},"Code Execution"),a.createElement("p",{className:"feature-description"},"CUGA writes and runs Python code in secure sandbox")),a.createElement("div",{className:"feature-card"},a.createElement("div",{className:"feature-icon api-icon"},a.createElement(o.CyN,{size:32})),a.createElement("h3",{className:"feature-title"},"API Integration"),a.createElement("p",{className:"feature-description"},"Users can connect any OpenAPI or MCP server instantly")),a.createElement("div",{className:"feature-card"},a.createElement("div",{className:"feature-icon memory-icon"},a.createElement(o.WmV,{size:32})),a.createElement("h3",{className:"feature-title"},"Human in the Loop"),a.createElement("p",{className:"feature-description"},"Users can ask followup questions on variables in memory and previous conversations")),a.createElement("div",{className:"feature-card"},a.createElement("div",{className:"feature-icon model-flex-icon"},a.createElement(o.fX,{size:32})),a.createElement("h3",{className:"feature-title"},"Model Flexibility"),a.createElement("p",{className:"feature-description"},"CUGA works with small models and open source models like GPT OSS 120B and Llama 4")),a.createElement("div",{className:"feature-card"},a.createElement("div",{className:"feature-icon web-api-icon"},a.createElement(o.qzq,{size:32})),a.createElement("h3",{className:"feature-title"},"Web & API Tasks"),a.createElement("p",{className:"feature-description"},"CUGA executes both web and API tasks seamlessly")),a.createElement("div",{className:"feature-card"},a.createElement("div",{className:"feature-icon reasoning-icon"},a.createElement(o.wB_,{size:32})),a.createElement("h3",{className:"feature-title"},"Reasoning Modes"),a.createElement("p",{className:"feature-description"},"Users can configure reasoning modes: lite, balanced"))))),F&&a.createElement("div",{className:"custom-chat-input-area"},L.length>0&&!f&&a.createElement(Y.a,{suggestions:L,onSuggestionClick:n=>{u.current&&(u.current.textContent=n,g(n),B([]),u.current.focus(),nn({currentTarget:u.current}),setTimeout(()=>{Q()},100))}}),a.createElement("div",{className:"chat-input-wrapper"},!F&&a.createElement("div",{className:"welcome-logo input-logo"},a.createElement("img",{src:"https://avatars.githubusercontent.com/u/230847519?s=100&v=4",alt:"CUGA Logo",className:"welcome-logo-image"})),a.createElement("div",{className:"chat-input-container-chat"},a.createElement("div",{className:"textarea-wrapper"},a.createElement("div",{ref:u,id:"main-input_field",className:"chat-input",contentEditable:!f,onInput:nn,onClick:en,onKeyDown:sn,onPaste:an,onFocus:on,onBlur:rn,"data-placeholder":"Type your message... (@ for files, Shift+Enter for new line)",style:{minHeight:"44px",maxHeight:"120px",overflowY:"auto"}})),a.createElement(D.Z,{location:"inline"}),a.createElement("button",{className:"chat-send-btn",onClick:Q,disabled:!m.trim()||f,title:"Send message"},a.createElement(o.Vnp,{size:18})))),w&&N.length>0&&a.createElement("div",{className:"simple-file-autocomplete"},a.createElement("div",{className:"simple-file-autocomplete-header"},a.createElement("span",null,"Workspace Files"),a.createElement("span",{className:"file-count"},N.length)),a.createElement("div",{className:"simple-file-autocomplete-list"},N.map((n,e)=>a.createElement("div",{key:n.path,className:"simple-file-autocomplete-item "+(e===C?"selected":""),onClick:()=>tn(n.path),onMouseEnter:()=>{S(e),r?.(N[e].path)},onMouseLeave:()=>r?.(null)},a.createElement(o.iUU,{size:16,className:"file-icon"}),a.createElement("div",{className:"file-info"},a.createElement("span",{className:"file-name"},n.name),a.createElement("span",{className:"file-path"},"./",n.path))))),a.createElement("div",{className:"simple-file-autocomplete-footer"},a.createElement("span",{className:"hint"},"↑↓ navigate • Enter/Tab select • Esc close"))),!F&&a.createElement("div",{className:"welcome-features-section"},a.createElement("div",{className:"section-header"},a.createElement("h2",{className:"section-title"},"Key Capabilities"),a.createElement("p",{className:"section-subtitle"},"Powerful features that make CUGA an intelligent automation platform")),a.createElement("div",{className:"welcome-features"},a.createElement("div",{className:"feature-card"},a.createElement("div",{className:"feature-icon multi-agent-icon"},a.createElement(o.cC5,{size:32})),a.createElement("h3",{className:"feature-title"},"Multi-Agent System"),a.createElement("p",{className:"feature-description"},"CUGA orchestrates specialized agents for planning, coding & execution")),a.createElement("div",{className:"feature-card"},a.createElement("div",{className:"feature-icon code-exec-icon"},a.createElement(o.BKt,{size:32})),a.createElement("h3",{className:"feature-title"},"Code Execution"),a.createElement("p",{className:"feature-description"},"CUGA writes and runs Python code in secure sandbox")),a.createElement("div",{className:"feature-card"},a.createElement("div",{className:"feature-icon api-icon"},a.createElement(o.CyN,{size:32})),a.createElement("h3",{className:"feature-title"},"API Integration"),a.createElement("p",{className:"feature-description"},"Users can connect any OpenAPI or MCP server instantly")),a.createElement("div",{className:"feature-card"},a.createElement("div",{className:"feature-icon memory-icon"},a.createElement(o.WmV,{size:32})),a.createElement("h3",{className:"feature-title"},"Smart Memory"),a.createElement("p",{className:"feature-description"},"CUGA tracks variables and data across conversations"))))),a.createElement(R.Y,{threadId:P.current||_||""}))}},24920:function(n,e,t){var a=t(21598),o=t.n(a),r=t(2607),i=t.n(r)()(o());i.push([n.id,"/* Main Navigation Header - Welcome Mode Only */\n.main-nav-header {\n position: sticky;\n top: 0;\n z-index: 100;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(20px);\n border-bottom: 1px solid rgba(102, 126, 234, 0.2);\n margin-bottom: 10px;\n}\n\n.nav-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 24px;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.nav-brand {\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 700;\n font-size: 18px;\n color: #1e293b;\n}\n\n.nav-logo {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);\n}\n\n.nav-brand-text {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.nav-links {\n display: flex;\n align-items: center;\n gap: 24px;\n}\n\n.nav-link {\n color: #64748b;\n text-decoration: none;\n font-weight: 500;\n font-size: 14px;\n transition: all 0.3s ease;\n padding: 8px 12px;\n border-radius: 6px;\n position: relative;\n}\n\n.nav-link:hover {\n color: #667eea;\n background: rgba(102, 126, 234, 0.05);\n transform: translateY(-1px);\n}\n\n.nav-link:active {\n transform: translateY(0);\n}\n\n.nav-link-feedback {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white !important;\n font-weight: 600;\n}\n\n.nav-link-feedback:hover {\n background: linear-gradient(135deg, #5568d3 0%, #6b428f 100%);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n}\n\n@media (max-width: 768px) {\n .nav-container {\n padding: 12px 16px;\n }\n\n .nav-links {\n gap: 16px;\n }\n\n .nav-link {\n font-size: 13px;\n padding: 6px 8px;\n }\n\n .nav-brand-text {\n display: none;\n }\n}\n\n.custom-chat-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n max-width: 100%;\n background: transparent;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n/* Ensure welcome mode has consistent background and proper scroll */\n.custom-chat-container:has(.welcome-screen) {\n background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 20%, #f3e8ff 40%, #e9d5ff 60%, #dbeafe 80%, #f0f9ff 100%);\n background-size: 400% 400%;\n animation: gradientShift 12s ease infinite;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n.custom-chat-container:has(.welcome-screen)::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background:\n radial-gradient(circle at 20% 50%, rgba(224, 242, 254, 0.5) 0%, transparent 50%),\n radial-gradient(circle at 80% 80%, rgba(243, 232, 255, 0.6) 0%, transparent 50%),\n radial-gradient(circle at 40% 20%, rgba(233, 213, 255, 0.5) 0%, transparent 50%);\n pointer-events: none;\n z-index: 0;\n}\n\n@keyframes gradientShift {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n\n/* Welcome Screen Styles */\n.welcome-screen {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n gap: 40px;\n padding: 24px 32px 16px;\n background: transparent;\n animation: welcomeFadeIn 0.6s ease;\n width: 100%;\n max-width: 1400px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n}\n\n.welcome-top-section {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n align-items: stretch;\n min-height: 600px;\n}\n\n.welcome-left-column {\n display: flex;\n flex-direction: column;\n gap: 24px;\n height: 100%;\n}\n\n.welcome-right-column {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n position: sticky;\n top: 0;\n align-self: flex-start;\n height: 100%;\n}\n\n.get-started-container {\n display: flex;\n flex-direction: column;\n gap: 0px;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-radius: 24px;\n padding: 32px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);\n position: sticky;\n top: 24px;\n flex: 1;\n}\n\n@keyframes welcomeFadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.welcome-content {\n width: 100%;\n text-align: left;\n flex: 1;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-radius: 24px;\n padding: 32px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n gap: 24px;\n position: sticky;\n top: 24px;\n}\n\n.welcome-header {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n margin-bottom: 0;\n animation: slideDown 0.6s ease 0.2s both;\n gap: 12px;\n}\n\n.welcome-logo {\n animation: floatAnimation 2.5s ease-in-out infinite, pulseGlow 3s ease-in-out infinite;\n}\n\n/* Logo floating to the left of input in welcome mode */\n.welcome-logo.input-logo {\n flex-shrink: 0;\n animation: floatAnimation 2.5s ease-in-out infinite, pulseGlow 3s ease-in-out infinite;\n z-index: 10;\n}\n\n.welcome-logo.input-logo .welcome-logo-image {\n width: 52px;\n height: 52px;\n border-width: 3px;\n box-shadow: 0 6px 24px rgba(102, 126, 234, 0.4);\n background: white;\n}\n\n@keyframes floatAnimation {\n 0%, 100% {\n transform: translateY(0px) rotate(0deg) scale(1);\n }\n 25% {\n transform: translateY(-15px) rotate(-3deg) scale(1.05);\n }\n 50% {\n transform: translateY(-20px) rotate(0deg) scale(1.08);\n }\n 75% {\n transform: translateY(-15px) rotate(3deg) scale(1.05);\n }\n}\n\n@keyframes pulseGlow {\n 0%, 100% {\n filter: drop-shadow(0 8px 32px rgba(102, 126, 234, 0.3));\n }\n 50% {\n filter: drop-shadow(0 12px 48px rgba(102, 126, 234, 0.6));\n }\n}\n\n.welcome-logo-image {\n width: 72px;\n height: 72px;\n border-radius: 50%;\n box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);\n border: 4px solid white;\n background: white;\n object-fit: cover;\n transition: all 0.3s ease;\n}\n\n.welcome-logo-image:hover {\n transform: scale(1.1) rotate(360deg);\n box-shadow: 0 12px 48px rgba(102, 126, 234, 0.6);\n transition: transform 0.8s ease, box-shadow 0.3s ease;\n}\n\n.welcome-title {\n font-size: 42px;\n font-weight: 800;\n margin: 0;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n letter-spacing: -1px;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.mission-text {\n font-size: 16px;\n color: #64748b;\n line-height: 1.6;\n margin: 0;\n text-align: left;\n}\n\n.github-section-right {\n margin-bottom: 20px;\n display: flex;\n justify-content: center;\n}\n\n.github-button-sidebar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 14px 28px;\n background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);\n color: #92400e;\n text-decoration: none;\n border-radius: 28px;\n font-size: 15px;\n font-weight: 600;\n letter-spacing: 0.2px;\n text-transform: none;\n transition: all 0.3s ease;\n box-shadow: 0 4px 16px rgba(252, 211, 77, 0.3);\n border: 2px solid rgba(255, 255, 255, 0.8);\n min-width: 200px;\n position: relative;\n overflow: hidden;\n}\n\n.github-button-sidebar::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n transition: left 0.6s ease;\n}\n\n.github-button-sidebar:hover::before {\n left: 100%;\n}\n\n.github-button-sidebar:hover {\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 8px 24px rgba(252, 211, 77, 0.4);\n background: linear-gradient(135deg, #fde68a 0%, #fcd34d 50%, #f59e0b 100%);\n color: #78350f;\n}\n\n.github-button-sidebar:active {\n transform: translateY(-1px) scale(1.01);\n}\n\n.demo-apps-section {\n margin-top: 0;\n width: 100%;\n animation: slideDown 0.6s ease 0.4s both;\n}\n\n.section-header {\n margin-bottom: 20px;\n}\n\n.section-title {\n font-size: 24px;\n font-weight: 700;\n color: #1e293b;\n margin: 0 0 6px 0;\n text-align: left;\n}\n\n.section-subtitle {\n font-size: 14px;\n color: #64748b;\n margin: 0;\n text-align: left;\n}\n\n.demo-apps-grid {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 0;\n}\n\n@media (max-width: 1024px) {\n .welcome-top-section {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n\n .welcome-left-column {\n order: 2; /* Move left column below right column on mobile */\n }\n\n .welcome-right-column {\n order: 1; /* Move right column above left column on mobile */\n justify-content: flex-start;\n }\n\n .get-started-container {\n position: static;\n }\n\n .welcome-content {\n position: static;\n }\n\n .welcome-features-section {\n margin-top: 24px;\n }\n\n .custom-chat-container:has(.welcome-screen) .custom-chat-input-area {\n position: static;\n }\n}\n\n@media (max-width: 768px) {\n .demo-apps-grid {\n gap: 12px;\n }\n}\n\n.demo-app-card {\n background: white;\n border: 2px solid #e2e8f0;\n border-radius: 20px;\n padding: 16px 20px;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n text-align: left;\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.demo-app-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, transparent, currentColor, transparent);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.demo-app-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);\n border-color: currentColor;\n}\n\n.demo-app-card:hover::before {\n opacity: 1;\n}\n\n.crm-card {\n color: #3b82f6;\n}\n\n.filesystem-card {\n color: #10b981;\n}\n\n.email-card {\n color: #f59e0b;\n}\n\n.demo-app-icon {\n width: 56px;\n height: 56px;\n margin: 0;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 16px;\n transition: all 0.3s ease;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.crm-card .demo-app-icon {\n background: #3b82f6;\n color: white;\n}\n\n.filesystem-card .demo-app-icon {\n background: #10b981;\n color: white;\n}\n\n.email-card .demo-app-icon {\n background: #f59e0b;\n color: white;\n}\n\n.demo-app-card:hover .demo-app-icon {\n transform: scale(1.1) rotate(5deg);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);\n}\n\n.demo-app-card-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.demo-app-name {\n font-size: 16px;\n font-weight: 700;\n color: #1e293b;\n margin: 0;\n}\n\n.demo-app-tools {\n font-size: 12px;\n font-weight: 600;\n margin: 0;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.crm-card .demo-app-tools {\n color: #3b82f6;\n}\n\n.filesystem-card .demo-app-tools {\n color: #10b981;\n}\n\n.email-card .demo-app-tools {\n color: #f59e0b;\n}\n\n.demo-app-examples {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n justify-content: flex-start;\n margin-bottom: 8px;\n align-items: flex-start;\n}\n\n.demo-app-tag {\n display: inline-block;\n background: rgba(0, 0, 0, 0.05);\n color: #64748b;\n padding: 4px 10px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n border: 1px solid rgba(0, 0, 0, 0.08);\n transition: all 0.2s ease;\n}\n\n.crm-card:hover .demo-app-tag {\n background: #3b82f6;\n color: white;\n border-color: #3b82f6;\n transform: scale(1.05);\n}\n\n.filesystem-card:hover .demo-app-tag {\n background: #10b981;\n color: white;\n border-color: #10b981;\n transform: scale(1.05);\n}\n\n.email-card:hover .demo-app-tag {\n background: #f59e0b;\n color: white;\n border-color: #f59e0b;\n transform: scale(1.05);\n}\n\n.demo-app-description {\n font-size: 12px;\n color: #64748b;\n line-height: 1.5;\n margin: 0;\n}\n\n/* Workspace Files Preview */\n.filesystem-card-expanded {\n flex-direction: row;\n align-items: flex-start;\n padding: 20px;\n flex-wrap: wrap;\n}\n\n.filesystem-card-expanded .demo-app-icon {\n flex-shrink: 0;\n margin-bottom: 0;\n}\n\n.filesystem-card-expanded .demo-app-card-content {\n flex: 1;\n min-width: 0;\n}\n\n.workspace-files-preview {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid rgba(16, 185, 129, 0.15);\n width: 100%;\n flex-basis: 100%;\n}\n\n.workspace-file-item {\n background: rgba(16, 185, 129, 0.05);\n border: 1px solid rgba(16, 185, 129, 0.15);\n border-radius: 8px;\n padding: 10px 12px;\n transition: all 0.2s ease;\n}\n\n.workspace-file-item:hover {\n background: rgba(16, 185, 129, 0.08);\n border-color: rgba(16, 185, 129, 0.25);\n transform: translateX(2px);\n}\n\n.workspace-file-header {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.workspace-file-header.clickable {\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n}\n\n.workspace-file-header.clickable:hover {\n opacity: 0.8;\n}\n\n.workspace-file-header svg {\n color: #10b981;\n flex-shrink: 0;\n}\n\n.workspace-file-chevron {\n color: #64748b !important;\n transition: transform 0.2s ease;\n}\n\n.workspace-file-chevron.expanded {\n transform: rotate(90deg);\n}\n\n.workspace-file-name {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;\n font-size: 12px;\n font-weight: 600;\n color: #047857;\n flex: 1;\n}\n\n.workspace-file-badge {\n font-size: 10px;\n font-weight: 500;\n color: #10b981;\n background: rgba(16, 185, 129, 0.1);\n padding: 2px 8px;\n border-radius: 10px;\n border: 1px solid rgba(16, 185, 129, 0.2);\n}\n\n.workspace-file-content {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding-left: 30px;\n margin-top: 8px;\n animation: expandDown 0.2s ease;\n}\n\n@keyframes expandDown {\n from {\n opacity: 0;\n max-height: 0;\n }\n to {\n opacity: 1;\n max-height: 200px;\n }\n}\n\n.workspace-file-content code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;\n font-size: 11px;\n color: #475569;\n background: white;\n padding: 4px 8px;\n border-radius: 4px;\n border: 1px solid rgba(16, 185, 129, 0.1);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.workspace-file-more {\n font-size: 11px;\n color: #64748b;\n font-style: italic;\n padding-left: 8px;\n margin-top: 2px;\n}\n\n.workspace-files-more {\n font-size: 12px;\n color: #64748b;\n font-style: italic;\n padding: 8px 12px;\n text-align: center;\n background: rgba(16, 185, 129, 0.03);\n border-radius: 6px;\n border: 1px dashed rgba(16, 185, 129, 0.2);\n}\n\n.filesystem-card:hover .workspace-files-preview {\n border-top-color: rgba(16, 185, 129, 0.3);\n}\n\n.filesystem-card:hover .workspace-file-item {\n background: rgba(16, 185, 129, 0.08);\n border-color: rgba(16, 185, 129, 0.25);\n}\n\n.filesystem-card:hover .workspace-file-badge {\n background: #10b981;\n color: white;\n border-color: #10b981;\n}\n\n@media (max-width: 640px) {\n .demo-apps-title {\n font-size: 18px;\n }\n\n .demo-apps-subtitle {\n font-size: 13px;\n }\n\n .demo-app-card {\n padding: 20px 16px;\n }\n\n .demo-app-icon {\n width: 56px;\n height: 56px;\n }\n\n .demo-app-icon svg {\n width: 28px;\n height: 28px;\n }\n\n .demo-app-name {\n font-size: 16px;\n }\n\n .demo-app-examples {\n min-height: auto;\n }\n\n .demo-app-tag {\n font-size: 10px;\n padding: 3px 8px;\n }\n\n .demo-app-description {\n font-size: 12px;\n }\n}\n\n\n.welcome-features-section {\n width: 100%;\n margin-top: 0;\n margin-bottom: 32px;\n animation: slideUp 0.6s ease 0.6s both;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-radius: 24px;\n padding: 28px 32px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);\n}\n\n.welcome-features {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n width: 100%;\n margin: 0;\n}\n\n@keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (max-width: 1024px) {\n .welcome-features {\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n }\n}\n\n@media (max-width: 640px) {\n .welcome-features {\n grid-template-columns: 1fr;\n gap: 12px;\n }\n}\n\n.feature-card {\n background: white;\n border: 2px solid #e2e8f0;\n border-radius: 20px;\n padding: 20px 16px;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n animation: scaleIn 0.5s ease backwards;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\n.feature-card:nth-child(1) {\n animation-delay: 0.4s;\n}\n\n.feature-card:nth-child(2) {\n animation-delay: 0.5s;\n}\n\n.feature-card:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.feature-card:nth-child(4) {\n animation-delay: 0.7s;\n}\n\n@keyframes scaleIn {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.feature-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, transparent, currentColor, transparent);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.feature-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);\n}\n\n.feature-card:hover::before {\n opacity: 1;\n}\n\n.feature-icon {\n width: 64px;\n height: 64px;\n margin: 0 auto 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n border-radius: 16px;\n transition: all 0.3s ease;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.multi-agent-icon {\n background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);\n}\n\n.code-exec-icon {\n background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);\n}\n\n.api-icon {\n background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n}\n\n.memory-icon {\n background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);\n}\n\n.model-flex-icon {\n background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\n}\n\n.web-api-icon {\n background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);\n}\n\n.reasoning-icon {\n background: linear-gradient(135deg, #f59e0b 0%, #8b5cf6 100%);\n}\n\n.feature-card:hover .feature-icon {\n transform: scale(1.1) rotate(5deg);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);\n}\n\n.feature-card:nth-child(1):hover {\n border-color: #8b5cf6;\n}\n\n.feature-card:nth-child(1):hover::before {\n background: linear-gradient(90deg, transparent, #8b5cf6, transparent);\n}\n\n.feature-card:nth-child(2):hover {\n border-color: #06b6d4;\n}\n\n.feature-card:nth-child(2):hover::before {\n background: linear-gradient(90deg, transparent, #06b6d4, transparent);\n}\n\n.feature-card:nth-child(3):hover {\n border-color: #10b981;\n}\n\n.feature-card:nth-child(3):hover::before {\n background: linear-gradient(90deg, transparent, #10b981, transparent);\n}\n\n.feature-card:nth-child(4):hover {\n border-color: #f59e0b;\n}\n\n.feature-card:nth-child(4):hover::before {\n background: linear-gradient(90deg, transparent, #f59e0b, transparent);\n}\n\n.feature-title {\n font-size: 16px;\n font-weight: 700;\n color: #1e293b;\n margin: 0 0 8px 0;\n}\n\n.feature-description {\n font-size: 14px;\n color: #64748b;\n margin: 0;\n line-height: 1.6;\n}\n\n@media (max-width: 640px) {\n .welcome-screen {\n padding: 24px 16px 16px;\n gap: 20px;\n }\n\n .welcome-top-section {\n gap: 20px;\n }\n\n .welcome-content {\n padding: 24px 20px;\n border-radius: 20px;\n text-align: left;\n }\n\n .section-title,\n .section-subtitle {\n text-align: left;\n }\n\n .welcome-features-section {\n padding: 32px 24px;\n border-radius: 20px;\n margin-top: 20px;\n margin-bottom: 32px;\n }\n \n .get-started-section {\n padding: 20px 24px 16px;\n border-radius: 20px 20px 0 0;\n margin-bottom: 0;\n }\n \n .welcome-input-wrapper {\n padding: 16px 20px 20px;\n border-radius: 0 0 20px 20px;\n margin-top: -1px;\n }\n \n .welcome-header {\n gap: 12px;\n margin-bottom: 32px;\n }\n \n .welcome-logo-image {\n width: 56px;\n height: 56px;\n }\n \n .welcome-title {\n font-size: 28px;\n }\n\n .mission-text {\n font-size: 14px;\n }\n\n .section-title {\n font-size: 20px;\n }\n\n .section-subtitle {\n font-size: 12px;\n }\n \n .section-header {\n margin-bottom: 20px;\n }\n \n .custom-chat-container:has(.welcome-screen) .custom-chat-input-area {\n padding: 0 16px 40px;\n gap: 16px;\n }\n \n .example-utterances-list {\n grid-template-columns: 1fr;\n gap: 10px;\n }\n \n .example-utterance-chip {\n padding: 12px 16px;\n font-size: 13px;\n }\n}\n\n.custom-chat-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n border-bottom: 1px solid #e2e8f0;\n background: #ffffff;\n z-index: 10;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n.chat-header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #475569;\n font-weight: 600;\n font-size: 14px;\n}\n\n.chat-header-title {\n font-size: 14px;\n font-weight: 600;\n}\n\n.chat-restart-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: transparent;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n color: #64748b;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.chat-restart-btn:hover {\n background: #f8fafc;\n border-color: #cbd5e1;\n color: #475569;\n}\n\n.custom-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 100%;\n}\n\n@media (max-width: 640px) {\n .custom-chat-messages {\n padding: 12px 8px;\n gap: 12px;\n }\n}\n\n.message {\n display: flex;\n gap: 12px;\n align-items: flex-start;\n animation: fadeIn 0.3s ease-in;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.message-user {\n flex-direction: row-reverse;\n}\n\n.message-avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: #f1f5f9;\n color: #64748b;\n overflow: hidden;\n}\n\n.bot-avatar-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.message-user .message-avatar {\n background: #3b82f6;\n color: white;\n}\n\n.message-content {\n flex: 1;\n padding: 12px 16px;\n border-radius: 12px;\n /* background: #f8fafc; */\n color: #1e293b;\n font-size: 14px;\n line-height: 1.6;\n max-width: min(70%, 800px);\n word-wrap: break-word;\n box-sizing: border-box;\n}\n\n@media (max-width: 640px) {\n .message-content {\n padding: 10px 12px;\n font-size: 13px;\n max-width: 85%;\n }\n}\n\n.message-user .message-content {\n flex: 0 1 auto;\n background: #e5e7eb;\n color: #1e293b;\n max-width: min(60%, 650px);\n width: fit-content;\n border: 1px solid #d1d5db;\n}\n\n@media (max-width: 640px) {\n .message-user .message-content {\n max-width: 80%;\n }\n}\n\n.message-content p {\n margin: 0;\n}\n\n.message-content h1,\n.message-content h2,\n.message-content h3 {\n margin: 0 0 8px 0;\n}\n\n.message-content code {\n background: rgba(0, 0, 0, 0.1);\n padding: 2px 6px;\n border-radius: 4px;\n font-family: 'Courier New', monospace;\n font-size: 0.9em;\n}\n\n.message-user .message-content code {\n background: rgba(0, 0, 0, 0.08);\n color: #1e293b;\n}\n\n.message-content pre {\n background: rgba(0, 0, 0, 0.05);\n padding: 12px;\n border-radius: 6px;\n overflow-x: auto;\n margin: 8px 0;\n}\n\n.message-user .message-content pre {\n background: rgba(0, 0, 0, 0.06);\n border: 1px solid #d1d5db;\n}\n\n.card-manager-wrapper {\n margin-top: 8px;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n.message-card-content {\n background: transparent;\n padding: 0;\n max-width: min(85%, 1000px);\n}\n\n.custom-chat-input-area {\n padding: 12px 16px;\n border-top: 1px solid #e2e8f0;\n max-width: 100%;\n box-sizing: border-box;\n position: relative;\n}\n\n.custom-chat-container:has(.welcome-screen) .custom-chat-input-area {\n border-top: none;\n padding: 0;\n background: transparent;\n position: relative;\n width: 100%;\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n flex-shrink: 0;\n gap: 0;\n height: fit-content;\n position: sticky;\n top: 24px;\n}\n\n/* Welcome Mode Input Wrapper */\n.welcome-input-wrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 16px;\n width: 100%;\n position: relative;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-radius: 0 0 24px 24px;\n padding: 20px 24px 24px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);\n margin-top: -1px;\n}\n\n/* Advanced Chat Mode Input Wrapper */\n.chat-input-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n width: 100%;\n position: relative;\n}\n\n\n@media (max-width: 640px) {\n .custom-chat-container:has(.welcome-screen) .custom-chat-input-area {\n padding: 16px 16px 24px;\n }\n \n .welcome-input-wrapper {\n flex-direction: column;\n gap: 12px;\n }\n \n .custom-chat-container:has(.welcome-screen) .welcome-logo.input-logo {\n position: relative;\n left: auto;\n top: auto;\n transform: none;\n }\n}\n\n/* Enhanced placeholder for welcome screen */\n.custom-chat-container:has(.welcome-screen) .chat-input:empty::before {\n content: \"Ask me anything...\";\n color: #94a3b8;\n font-size: 15px;\n}\n\n@media (max-width: 640px) {\n .custom-chat-input-area {\n padding: 8px 12px;\n }\n}\n\n/* Welcome Mode Chat Input */\n.chat-input-container-welcome {\n display: flex;\n align-items: center;\n gap: 8px;\n background: white;\n border: 3px solid #e2e8f0;\n border-radius: 20px;\n padding: 16px 20px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n max-width: 100%;\n width: 100%;\n min-width: 300px;\n position: relative;\n transition: all 0.3s ease;\n}\n\n/* Main input field styling in welcome mode */\n.chat-input-container-welcome #main-input_field {\n min-width: 200px;\n}\n\n.chat-input-container-welcome:focus-within {\n border-color: #667eea;\n box-shadow: 0 12px 48px rgba(102, 126, 234, 0.3);\n}\n\n/* Advanced Chat Mode Input */\n.chat-input-container-chat {\n display: flex;\n align-items: center;\n gap: 8px;\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n padding: 8px 12px;\n transition: all 0.3s ease;\n min-width: 600px;\n}\n\n@media (max-width: 640px) {\n .chat-input-container-welcome {\n padding: 12px 16px;\n gap: 6px;\n }\n\n .chat-input-container-chat {\n padding: 6px 8px;\n gap: 6px;\n }\n}\n\n.textarea-wrapper {\n position: relative;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-width: 0; /* Allow flex shrinking but prevent complete collapse */\n}\n\n.chat-input {\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: 14px;\n line-height: 1.5;\n color: #1e293b;\n font-family: inherit;\n padding: 8px 0;\n min-width: 200px;\n}\n\n.chat-input::placeholder {\n color: #94a3b8;\n}\n\n.chat-input:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.chat-send-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: none;\n background: #3b82f6;\n color: white;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n flex-shrink: 0;\n}\n\n.chat-send-btn:hover:not(:disabled) {\n background: #2563eb;\n transform: scale(1.05);\n}\n\n.chat-send-btn:disabled {\n background: #cbd5e1;\n cursor: not-allowed;\n transform: none;\n}\n\n.chat-send-btn:active:not(:disabled) {\n transform: scale(0.95);\n}\n\n.simple-file-autocomplete {\n position: absolute;\n bottom: 100%;\n left: 0;\n right: 0;\n margin-bottom: 8px;\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);\n z-index: 1000;\n max-height: 400px;\n overflow: hidden;\n animation: slideUpFade 0.2s ease;\n}\n\n@keyframes slideUpFade {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.simple-file-autocomplete-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n font-size: 11px;\n font-weight: 600;\n border-radius: 8px 8px 0 0;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.simple-file-autocomplete-header .file-count {\n background: rgba(255, 255, 255, 0.2);\n padding: 2px 6px;\n border-radius: 10px;\n font-size: 10px;\n}\n\n.simple-file-autocomplete-list {\n max-height: 350px;\n overflow-y: auto;\n padding: 4px;\n}\n\n.simple-file-autocomplete-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 10px;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n margin-bottom: 2px;\n}\n\n.simple-file-autocomplete-item:hover,\n.simple-file-autocomplete-item.selected {\n background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);\n}\n\n.simple-file-autocomplete-item.selected {\n border-left: 3px solid #667eea;\n padding-left: 7px;\n}\n\n.simple-file-autocomplete-item .file-icon {\n flex-shrink: 0;\n color: #667eea;\n}\n\n.simple-file-autocomplete-item .file-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.simple-file-autocomplete-item .file-name {\n font-size: 13px;\n font-weight: 500;\n color: #1f2937;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.simple-file-autocomplete-item .file-path {\n font-size: 11px;\n color: #6b7280;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.simple-file-autocomplete-footer {\n padding: 6px 12px;\n background: #f9fafb;\n border-top: 1px solid #e5e7eb;\n border-radius: 0 0 8px 8px;\n}\n\n.simple-file-autocomplete-footer .hint {\n font-size: 10px;\n color: #9ca3af;\n font-style: italic;\n}\n\n.simple-file-autocomplete-list::-webkit-scrollbar {\n width: 6px;\n}\n\n.simple-file-autocomplete-list::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.simple-file-autocomplete-list::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 3px;\n}\n\n.simple-file-autocomplete-list::-webkit-scrollbar-thumb:hover {\n background: #94a3b8;\n}\n\n.custom-chat-input-area {\n position: relative;\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n/* StopButton positioning */\n.floating-controls-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.get-started-section {\n width: 100%;\n animation: slideDown 0.6s ease 0.5s both;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-radius: 24px 24px 0 0;\n padding: 24px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);\n margin-bottom: 0;\n border-bottom: 1px solid rgba(226, 232, 240, 0.5);\n}\n\n.example-utterances-widget {\n margin-top: 0;\n background: transparent;\n border: none;\n border-radius: 0;\n padding: 0;\n box-shadow: none;\n animation: slideUpFadeIn 0.3s ease;\n}\n\n.custom-chat-container:has(.welcome-screen) .example-utterances-widget {\n background: transparent;\n border: none;\n border-radius: 0;\n padding: 0;\n margin: 0;\n box-shadow: none;\n max-width: 100%;\n width: 100%;\n}\n\n@keyframes slideUpFadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.example-utterances-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n width: 100%;\n}\n\n.example-utterance-chip {\n padding: 14px 20px;\n background: white;\n border: 2px solid #e2e8f0;\n border-radius: 12px;\n font-size: 14px;\n color: #475569;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n font-family: inherit;\n white-space: normal;\n text-align: left;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n font-weight: 500;\n line-height: 1.5;\n}\n\n.example-utterance-chip:hover {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border-color: #667eea;\n transform: translateY(-3px);\n box-shadow: 0 8px 20px rgba(102, 126, 234, 0.35);\n}\n\n.example-utterance-chip:active {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);\n}\n\n.example-utterance-text {\n font-size: 14px;\n font-weight: 500;\n line-height: 1.5;\n margin-bottom: 8px;\n color: inherit;\n}\n\n.example-utterance-reason {\n font-size: 12px;\n font-weight: 400;\n line-height: 1.4;\n opacity: 0.7;\n font-style: italic;\n color: inherit;\n}\n\n.example-utterance-chip:hover .example-utterance-text,\n.example-utterance-chip:hover .example-utterance-reason {\n color: white;\n}\n\n.file-badges-overlay {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 0;\n min-height: 0;\n}\n\n.file-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border-radius: 6px;\n font-size: 12px;\n font-weight: 500;\n cursor: default;\n transition: all 0.2s;\n box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);\n position: relative;\n}\n\n.file-badge:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);\n}\n\n.file-badge::after {\n content: attr(title);\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(-8px);\n padding: 6px 10px;\n background: #1e293b;\n color: white;\n font-size: 11px;\n border-radius: 6px;\n white-space: nowrap;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s, transform 0.2s;\n z-index: 1000;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;\n}\n\n.file-badge:hover::after {\n opacity: 1;\n transform: translateX(-50%) translateY(-4px);\n}\n\n.file-badge svg {\n flex-shrink: 0;\n}\n\n.file-badge-name {\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@media (max-width: 640px) {\n .file-badge-name {\n max-width: 80px;\n }\n \n .file-badge {\n padding: 3px 6px;\n font-size: 11px;\n gap: 3px;\n }\n \n .file-badge svg {\n width: 10px;\n height: 10px;\n }\n}\n\n.file-badge-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: none;\n background: rgba(255, 255, 255, 0.2);\n color: white;\n border-radius: 50%;\n cursor: pointer;\n font-size: 14px;\n line-height: 1;\n padding: 0;\n transition: all 0.2s;\n flex-shrink: 0;\n}\n\n.file-badge-remove:hover {\n background: rgba(255, 255, 255, 0.3);\n transform: scale(1.1);\n}\n\n/* Inline file references in contentEditable */\n.inline-file-reference {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);\n color: #ffffff !important;\n border-radius: 18px;\n font-size: 13px;\n font-weight: 500;\n margin: 2px 3px;\n box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);\n border: 1px solid rgba(255, 255, 255, 0.25);\n transition: all 0.2s ease;\n cursor: default;\n user-select: none;\n position: relative;\n overflow: hidden;\n pointer-events: auto;\n}\n\n.inline-file-reference::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n transition: left 0.5s ease;\n}\n\n.inline-file-reference:hover::before {\n left: 100%;\n}\n\n.inline-file-reference:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5);\n border-color: rgba(255, 255, 255, 0.4);\n background: linear-gradient(135deg, #5855eb 0%, #7c3aed 50%, #9333ea 100%);\n}\n\n.inline-file-reference .file-icon {\n flex-shrink: 0;\n opacity: 0.95;\n filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));\n}\n\n.inline-file-reference .file-name {\n font-weight: 500;\n letter-spacing: 0.01em;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n color: #ffffff !important;\n}\n\n.inline-file-reference .file-chip-remove {\n display: none;\n background: rgba(255, 255, 255, 0.2);\n color: #ffffff;\n border: none;\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 14px;\n line-height: 1;\n cursor: pointer !important;\n margin-left: 6px;\n padding: 0;\n transition: all 0.15s ease;\n flex-shrink: 0;\n position: relative;\n z-index: 2;\n}\n\n.inline-file-reference:hover .file-chip-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.inline-file-reference .file-chip-remove:hover {\n background: rgba(255, 255, 255, 0.3);\n transform: scale(1.1);\n cursor: pointer !important;\n}\n\n/* ContentEditable input styling */\n.chat-input {\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: 14px;\n line-height: 1.5;\n color: #1e293b;\n font-family: inherit;\n padding: 8px 0;\n word-wrap: break-word;\n overflow-wrap: break-word;\n cursor: text;\n}\n\n.chat-input:empty::before {\n content: attr(data-placeholder);\n color: #94a3b8;\n pointer-events: none;\n}\n\n.chat-input:focus {\n outline: none;\n cursor: text !important;\n}\n\n/* ContentEditable specific styles */\n.chat-input br {\n display: block;\n content: \"\";\n margin: 0;\n}\n\n.chat-input * {\n display: inline;\n vertical-align: baseline;\n}\n\n.chat-input div {\n display: block;\n}\n\n.chat-input .inline-file-reference {\n display: inline-flex !important;\n vertical-align: baseline !important;\n margin: 0 2px;\n}\n\n.chat-input p {\n margin: 0;\n display: inline;\n}\n\n/* Ensure file chips display properly in chat messages */\n.message-content .inline-file-reference {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);\n color: #ffffff !important;\n border-radius: 16px;\n font-size: 12px;\n font-weight: 500;\n margin: 0 2px;\n box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);\n border: 1px solid rgba(255, 255, 255, 0.2);\n vertical-align: baseline;\n cursor: default;\n user-select: none;\n}\n\n.message-content .inline-file-reference .file-icon {\n flex-shrink: 0;\n opacity: 0.9;\n}\n\n.message-content .inline-file-reference .file-name {\n font-weight: 500;\n color: #ffffff !important;\n}\n\n.message-content .inline-file-reference .file-chip-remove {\n display: none; /* Hide remove button in message display */\n}\n\n/* Compact collapsible example utterances for advanced mode */\n.example-utterances-widget-compact {\n width: 100%;\n margin-bottom: 12px;\n animation: slideUpFadeIn 0.3s ease;\n}\n\n.examples-toggle-button {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n font-size: 13px;\n color: #64748b;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n width: 100%;\n font-weight: 500;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.examples-toggle-button:hover {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border-color: #667eea;\n box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);\n}\n\n.examples-toggle-button svg:first-child {\n flex-shrink: 0;\n}\n\n.examples-toggle-button svg:last-child {\n flex-shrink: 0;\n margin-left: auto;\n}\n\n.examples-toggle-button span {\n flex: 1;\n text-align: left;\n}\n\n.example-utterances-list-compact {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 8px;\n padding: 12px;\n background: #fafbfc;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n animation: expandDown 0.2s ease;\n}\n\n@keyframes expandDown {\n from {\n opacity: 0;\n max-height: 0;\n padding: 0 12px;\n }\n to {\n opacity: 1;\n max-height: 500px;\n padding: 12px;\n }\n}\n\n.example-utterance-chip-compact {\n padding: 10px 14px;\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n font-size: 13px;\n color: #475569;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n white-space: normal;\n text-align: left;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n font-weight: 500;\n line-height: 1.4;\n}\n\n.example-utterance-chip-compact:hover {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border-color: #667eea;\n transform: translateX(4px);\n box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);\n}\n\n.example-utterance-chip-compact:active {\n transform: translateX(2px);\n box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);\n}\n\n",""]),e.A=i},33802:function(n,e,t){var a=t(67733),o=t.n(a),r=t(48034),i=t.n(r),s=t(62562),l=t.n(s),c=t(39805),p=t.n(c),d=t(57577),m=t.n(d),g=t(79062),f=t.n(g),x=t(7958),b={};b.styleTagTransform=f(),b.setAttributes=p(),b.insert=l().bind(null,"head"),b.domAPI=i(),b.insertStyleElement=m();o()(x.A,b),x.A&&x.A.locals&&x.A.locals},71576:function(n,e,t){var a=t(21598),o=t.n(a),r=t(2607),i=t.n(r)()(o());i.push([n.id,"/* Card Manager Styles */\n.card-manager {\n background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\n border-radius: 12px;\n border: 1px solid #cbd5e1;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n margin: 16px 0;\n overflow: hidden;\n transition: all 0.3s ease;\n position: relative;\n}\n\n.card-manager.animating {\n transform: scale(1.02);\n box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n}\n\n.card-header {\n background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\n color: white;\n padding: 16px 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n overflow: hidden;\n}\n\n.card-header::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 100%;\n height: 200%;\n background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);\n transform: rotate(45deg);\n animation: shimmer 3s infinite;\n}\n\n@keyframes shimmer {\n 0% { transform: translateX(-100%) rotate(45deg); }\n 100% { transform: translateX(100%) rotate(45deg); }\n}\n\n.card-title h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.card-title h3::before {\n content: '🤖';\n font-size: 20px;\n}\n\n.step-counter {\n font-size: 12px;\n opacity: 0.9;\n margin-top: 2px;\n font-weight: 400;\n}\n\n.card-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.history-button {\n background: rgba(255, 255, 255, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.3);\n color: white;\n padding: 6px 12px;\n border-radius: 6px;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n backdrop-filter: blur(10px);\n}\n\n.history-button:hover {\n background: rgba(255, 255, 255, 0.3);\n transform: translateY(-1px);\n}\n\n.card-content {\n padding: 20px;\n background: white;\n min-height: 100px;\n}\n\n.step-item {\n margin-bottom: 16px;\n opacity: 0;\n transform: translateY(20px);\n animation: slideInUp 0.5s ease forwards;\n}\n\n.step-item.new-step {\n animation: slideInUp 0.5s ease forwards, highlightPulse 2s ease 0.5s;\n}\n\n@keyframes slideInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes highlightPulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);\n }\n 50% {\n box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1);\n }\n}\n\n.card-footer {\n background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n color: white;\n padding: 16px 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-top: 1px solid #d1fae5;\n}\n\n.completion-message {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n font-size: 14px;\n}\n\n.new-query-button {\n background: rgba(255, 255, 255, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.3);\n color: white;\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n backdrop-filter: blur(10px);\n}\n\n.new-query-button:hover {\n background: rgba(255, 255, 255, 0.3);\n transform: translateY(-1px);\n}\n\n/* History Modal Styles */\n.history-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n backdrop-filter: blur(4px);\n animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.history-modal {\n background: white;\n border-radius: 12px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n max-width: 600px;\n width: 90%;\n max-height: 80vh;\n overflow: hidden;\n animation: slideInModal 0.3s ease;\n}\n\n@keyframes slideInModal {\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.history-header {\n background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n color: white;\n padding: 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.history-header h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n}\n\n.history-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.clear-history-button,\n.close-history-button {\n background: rgba(255, 255, 255, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.3);\n color: white;\n padding: 6px 12px;\n border-radius: 6px;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n backdrop-filter: blur(10px);\n}\n\n.clear-history-button:hover,\n.close-history-button:hover {\n background: rgba(255, 255, 255, 0.3);\n}\n\n.close-history-button {\n padding: 6px;\n font-size: 16px;\n line-height: 1;\n}\n\n.history-content {\n padding: 20px;\n max-height: 60vh;\n overflow-y: auto;\n}\n\n.no-history {\n text-align: center;\n color: #6b7280;\n font-style: italic;\n padding: 40px 20px;\n}\n\n.history-card {\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 12px;\n background: #f9fafb;\n transition: all 0.2s ease;\n}\n\n.history-card:hover {\n border-color: #3b82f6;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n transform: translateY(-1px);\n}\n\n.history-card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.history-card-title {\n font-weight: 600;\n color: #374151;\n font-size: 14px;\n}\n\n.history-card-meta {\n font-size: 12px;\n color: #6b7280;\n}\n\n.history-card-preview {\n margin-bottom: 12px;\n}\n\n.history-step-preview {\n font-size: 12px;\n color: #4b5563;\n margin-bottom: 4px;\n padding-left: 8px;\n border-left: 2px solid #e5e7eb;\n}\n\n.history-step-more {\n font-size: 11px;\n color: #9ca3af;\n font-style: italic;\n padding-left: 8px;\n border-left: 2px solid #e5e7eb;\n}\n\n.restore-card-button {\n background: #3b82f6;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 6px;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.restore-card-button:hover {\n background: #2563eb;\n transform: translateY(-1px);\n}\n\n/* In-Place Card Transitions */\n.current-step-container {\n position: relative;\n overflow: hidden;\n min-height: 200px;\n transition: min-height 0.3s ease-in-out;\n}\n\n/* No container animation – instant switch */\n\n.component-container.current-step {\n box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n border-color: #3b82f6;\n position: relative;\n overflow: hidden;\n}\n\n/* Loading step with sliding border animation */\n/* Shared loading border lives on the persistent container so it continues across swaps */\n.current-step-container.loading-border::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, #3b82f6, #06b6d4, transparent);\n animation: borderSlide 2.5s ease-in-out infinite;\n z-index: 1;\n}\n\n@keyframes borderSlide {\n 0% {\n left: -100%;\n }\n 100% {\n left: 100%;\n }\n}\n\n@keyframes borderSlideReverse {\n 0% {\n right: -100%;\n }\n 100% {\n right: 100%;\n }\n}\n\n/* No appear animation */\n\n/* Non-current steps rendered only in reasoning list; no fade */\n.component-container:not(.current-step) {}\n\n/* Reasoning Process Collapse Animation */\n.reasoning-section {\n transition: all 0.5s ease-in-out;\n}\n\n.reasoning-content {\n transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;\n overflow: hidden;\n}\n\n.reasoning-content.collapsed {\n max-height: 0;\n opacity: 0;\n}\n\n.reasoning-content.expanded {\n max-height: 2000px;\n opacity: 1;\n}\n\n/* Step Fade Transitions */\n.step-fade-enter {\n opacity: 0;\n transform: translateY(20px);\n}\n\n.step-fade-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;\n}\n\n.step-fade-exit {\n opacity: 1;\n transform: translateY(0);\n}\n\n.step-fade-exit-active {\n opacity: 0;\n transform: translateY(-20px);\n transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;\n}\n\n/* Enhanced Card Hover Effects */\n.component-container:hover {\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\n transition: box-shadow 0.2s ease;\n}\n\n.component-container.current-step:hover {\n box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);\n}\n\n/* Smooth Loading Animation */\n.loading-shimmer {\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n/* Responsive Design */\n@media (max-width: 640px) {\n .card-header {\n flex-direction: column;\n gap: 8px;\n align-items: flex-start;\n }\n \n .card-actions {\n width: 100%;\n justify-content: flex-end;\n }\n \n .history-modal {\n width: 95%;\n margin: 20px;\n }\n \n .card-footer {\n flex-direction: column;\n gap: 12px;\n align-items: stretch;\n }\n \n .new-query-button {\n width: 100%;\n }\n \n .current-step-container.loading-border::before,\n .current-step-container.loading-border::after {\n display: none;\n }\n \n .current-step-container {\n min-height: 150px;\n }\n}\n",""]),e.A=i}}]); |