@chatwidgetai/chat-widget 0.1.4 → 0.1.5

package/dist/index.esm.js

@@ -21365,6 +21365,10 @@ function defaultUrlTransform(value) {
   return ''
 }
 
+// SVG Icon components
+const ThumbsUpIcon = () => (jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }) }));
+const ThumbsDownIcon = () => (jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" }) }));
+const CheckIcon = () => (jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "20 6 9 17 4 12" }) }));
 const FeedbackButtons = ({ messageId, currentFeedback, onFeedback, }) => {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [submitted, setSubmitted] = useState(false);
@@ -21385,9 +21389,9 @@ const FeedbackButtons = ({ messageId, currentFeedback, onFeedback, }) => {
         }
     };
     if (submitted) {
-        return (jsxs("div", { className: "ai-chat-feedback ai-chat-feedback-submitted", children: [jsx("span", { className: "ai-chat-feedback-checkmark", children: "\u2713" }), jsx("span", { className: "ai-chat-feedback-text", children: "Feedback submitted" })] }));
+        return (jsxs("div", { className: "ai-chat-feedback ai-chat-feedback-submitted", children: [jsx("span", { className: "ai-chat-feedback-checkmark", children: jsx(CheckIcon, {}) }), jsx("span", { className: "ai-chat-feedback-text", children: "Thanks for feedback" })] }));
     }
-    return (jsxs("div", { className: "ai-chat-feedback", children: [jsx("button", { className: `ai-chat-feedback-button ${currentFeedback === 'positive' ? 'active' : ''}`, onClick: () => handleFeedback('positive'), disabled: isSubmitting || !!currentFeedback, "aria-label": "Helpful", title: "This was helpful", children: "\uD83D\uDC4D" }), jsx("button", { className: `ai-chat-feedback-button ${currentFeedback === 'negative' ? 'active' : ''}`, onClick: () => handleFeedback('negative'), disabled: isSubmitting || !!currentFeedback, "aria-label": "Not helpful", title: "This was not helpful", children: "\uD83D\uDC4E" })] }));
+    return (jsxs("div", { className: "ai-chat-feedback", children: [jsx("button", { className: `ai-chat-feedback-button ${currentFeedback === 'positive' ? 'active' : ''}`, onClick: () => handleFeedback('positive'), disabled: isSubmitting || !!currentFeedback, "aria-label": "Helpful", title: "This was helpful", children: jsx(ThumbsUpIcon, {}) }), jsx("button", { className: `ai-chat-feedback-button ${currentFeedback === 'negative' ? 'active' : ''}`, onClick: () => handleFeedback('negative'), disabled: isSubmitting || !!currentFeedback, "aria-label": "Not helpful", title: "This was not helpful", children: jsx(ThumbsDownIcon, {}) })] }));
 };
 
 const Sources = ({ sources, displayMode = 'with-score' }) => {
@@ -21421,10 +21425,21 @@ const Message = ({ message, showTimestamp = true, enableFeedback = true, showSou
         // Only render assistant bubble if there's textual content
         return jsx(Markdown, { children: aiContent });
     };
+    const formatToolName = (name) => {
+        // Remove common prefixes like "action_" or "tool_"
+        let formatted = name.replace(/^(action_|tool_)/, '');
+        // Convert snake_case to Title Case
+        formatted = formatted
+            .split('_')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+            .join(' ');
+        return formatted;
+    };
     const renderTool = () => {
         const tool = message.message;
-        const toolName = (toolCallNameById && toolCallNameById[tool.tool_call_id]) || 'Tool';
-        return (jsxs("div", { className: "ai-chat-tool-message", title: toolName, children: [jsxs("span", { className: "tool-finished", children: [jsx("span", { className: "tool-icon", children: "\uD83D\uDD27" }), jsx("span", { className: "tool-check", children: "\u2713" })] }), jsx("span", { className: "tool-name", children: toolName })] }));
+        const rawToolName = (toolCallNameById && toolCallNameById[tool.tool_call_id]) || 'Tool';
+        const displayName = formatToolName(rawToolName);
+        return (jsxs("div", { className: "ai-chat-tool-message", title: rawToolName, children: [jsx("span", { className: "tool-finished", children: jsx("span", { className: "tool-check", children: "\u2713" }) }), jsx("span", { className: "tool-name", children: displayName })] }));
     };
     // If assistant message has no content (e.g., only started a tool), render nothing at all
     if (isAssistant && !aiHasContent) {
@@ -21551,6 +21566,8 @@ const MessageInput = ({ onSend, placeholder = 'Type your message...', disabled =
                 }) })), jsxs("div", { className: "ai-chat-input-wrapper", children: [enableFileUpload && (jsxs(Fragment, { children: [jsx("input", { ref: fileInputRef, type: "file", onChange: handleFileSelect, style: { display: 'none' }, multiple: true, accept: ALLOWED_EXTENSIONS.join(','), "aria-label": "File input" }), jsx("button", { className: "ai-chat-file-button", onClick: () => fileInputRef.current?.click(), disabled: disabled, "aria-label": "Attach file", children: jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) })] })), jsx("textarea", { ref: textareaRef, className: "ai-chat-input", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": "Message input" }), jsx("button", { className: "ai-chat-send-button", onClick: handleSend, disabled: disabled || (!value.trim() && selectedFiles.length === 0), "aria-label": "Send message", children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }) })] })] }));
 };
 
+// SVG Icon component
+const LightbulbIcon = () => (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M9 18h6" }), jsx("path", { d: "M10 22h4" }), jsx("path", { d: "M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14" })] }));
 const SuggestedQuestions = ({ questions, onQuestionClick, }) => {
     if (!questions || questions.length === 0) {
         return null;
@@ -21560,7 +21577,7 @@ const SuggestedQuestions = ({ questions, onQuestionClick, }) => {
     if (validQuestions.length === 0) {
         return null;
     }
-    return (jsxs("div", { className: "ai-chat-suggested-questions", children: [jsx("div", { className: "ai-chat-suggested-questions-label", children: "Suggested questions:" }), jsx("div", { className: "ai-chat-suggested-questions-list", children: validQuestions.map((question, index) => (jsxs("button", { className: "ai-chat-suggested-question", onClick: () => onQuestionClick(question), type: "button", children: [jsx("span", { className: "ai-chat-suggested-question-icon", children: "\uD83D\uDCA1" }), jsx("span", { className: "ai-chat-suggested-question-text", children: question })] }, index))) })] }));
+    return (jsxs("div", { className: "ai-chat-suggested-questions", children: [jsx("div", { className: "ai-chat-suggested-questions-label", children: "Suggested questions:" }), jsx("div", { className: "ai-chat-suggested-questions-list", children: validQuestions.map((question, index) => (jsxs("button", { className: "ai-chat-suggested-question", onClick: () => onQuestionClick(question), type: "button", children: [jsx("span", { className: "ai-chat-suggested-question-icon", children: jsx(LightbulbIcon, {}) }), jsx("span", { className: "ai-chat-suggested-question-text", children: question })] }, index))) })] }));
 };
 
 const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessage, onClose, onFeedback, }) => {
@@ -21599,7 +21616,7 @@ const ChatWindow = ({ messages, isLoading, isTyping, error, config, onSendMessag
         setShowSuggestedQuestions(false);
         onSendMessage(question);
     };
-    return (jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxs("div", { className: "ai-chat-header", children: [jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsx("div", { className: "ai-chat-title", children: headerTitle })] }), jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "Close chat", children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), error && (jsx("div", { className: "ai-chat-error", role: "alert", children: error })), maxMessages && userMessageCount >= maxMessages - 2 && !isLimitReached && (jsxs("div", { className: "ai-chat-warning", role: "alert", children: [maxMessages - userMessageCount, " message", maxMessages - userMessageCount !== 1 ? 's' : '', " remaining in this session"] })), isLimitReached && (jsxs("div", { className: "ai-chat-error", role: "alert", children: ["Message limit reached (", maxMessages, " messages per session). Please start a new conversation."] })), jsx(MessageList, { messages: messages, isTyping: isTyping, showTypingIndicator: behavior?.showTypingIndicator, showTimestamps: behavior?.showTimestamps, enableFeedback: behavior?.enableFeedback, showSources: behavior?.showSources, sourceDisplayMode: behavior?.sourceDisplayMode, welcomeTitle: welcomeTitle, welcomeMessage: welcomeMessage, onFeedback: onFeedback }), showSuggestedQuestions && behavior?.suggestedQuestions && behavior.suggestedQuestions.length > 0 && (jsx(SuggestedQuestions, { questions: behavior.suggestedQuestions, onQuestionClick: handleQuestionClick })), jsx(MessageInput, { onSend: onSendMessage, placeholder: isLimitReached ? 'Message limit reached' : inputPlaceholder, disabled: isLoading || isLimitReached, enableFileUpload: behavior?.enableFileUpload, separateFromChat: themeConfig?.footer?.separateFromChat })] }));
+    return (jsxs("div", { className: `ai-chat-window size-${size}`, role: "dialog", "aria-label": "Chat window", children: [jsxs("div", { className: "ai-chat-header", children: [jsxs("div", { className: "ai-chat-header-content", children: [appearance?.logo && (jsx("img", { src: appearance.logo, alt: "Logo", className: "ai-chat-logo" })), jsx("div", { className: "ai-chat-title", children: headerTitle })] }), jsx("button", { className: "ai-chat-close-button", onClick: onClose, "aria-label": "Minimize chat", children: jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "6 9 12 15 18 9" }) }) })] }), error && (jsx("div", { className: "ai-chat-error", role: "alert", children: error })), maxMessages && userMessageCount >= maxMessages - 2 && !isLimitReached && (jsxs("div", { className: "ai-chat-warning", role: "alert", children: [maxMessages - userMessageCount, " message", maxMessages - userMessageCount !== 1 ? 's' : '', " remaining in this session"] })), isLimitReached && (jsxs("div", { className: "ai-chat-error", role: "alert", children: ["Message limit reached (", maxMessages, " messages per session). Please start a new conversation."] })), jsx(MessageList, { messages: messages, isTyping: isTyping, showTypingIndicator: behavior?.showTypingIndicator, showTimestamps: behavior?.showTimestamps, enableFeedback: behavior?.enableFeedback, showSources: behavior?.showSources, sourceDisplayMode: behavior?.sourceDisplayMode, welcomeTitle: welcomeTitle, welcomeMessage: welcomeMessage, onFeedback: onFeedback }), showSuggestedQuestions && behavior?.suggestedQuestions && behavior.suggestedQuestions.length > 0 && (jsx(SuggestedQuestions, { questions: behavior.suggestedQuestions, onQuestionClick: handleQuestionClick })), jsx(MessageInput, { onSend: onSendMessage, placeholder: isLimitReached ? 'Message limit reached' : inputPlaceholder, disabled: isLoading || isLimitReached, enableFileUpload: behavior?.enableFileUpload, separateFromChat: themeConfig?.footer?.separateFromChat })] }));
 };
 
 /**
@@ -21837,11 +21854,386 @@ function applyAppearanceStyles(appearance, theme = 'light') {
     return styles;
 }
 
+/**
+ * Color Utilities for Widget Theme System
+ * Handles color manipulation and auto light/dark detection
+ */
+/**
+ * Parse hex color to RGB values
+ */
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+/**
+ * Convert RGB to hex
+ */
+function rgbToHex(r, g, b) {
+    return '#' + [r, g, b].map(x => {
+        const hex = Math.max(0, Math.min(255, Math.round(x))).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    }).join('');
+}
+/**
+ * Calculate relative luminance of a color (0-1)
+ * Used to determine if a color is light or dark
+ */
+function getLuminance(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return 0.5;
+    const { r, g, b } = rgb;
+    const [rs, gs, bs] = [r, g, b].map(c => {
+        c = c / 255;
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+/**
+ * Determine if a color is considered "light" (luminance > 0.5)
+ */
+function isLightColor(hex) {
+    return getLuminance(hex) > 0.5;
+}
+/**
+ * Lighten a color by a percentage
+ */
+function lighten(hex, percent) {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return hex;
+    const { r, g, b } = rgb;
+    const amount = 255 * (percent / 100);
+    return rgbToHex(r + amount, g + amount, b + amount);
+}
+/**
+ * Darken a color by a percentage
+ */
+function darken(hex, percent) {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return hex;
+    const { r, g, b } = rgb;
+    const factor = 1 - (percent / 100);
+    return rgbToHex(r * factor, g * factor, b * factor);
+}
+/**
+ * Create a color with alpha transparency
+ */
+function withAlpha(hex, alpha) {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return hex;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+}
+/**
+ * Get contrasting text color (black or white) for a background
+ */
+function getContrastText(backgroundColor) {
+    return isLightColor(backgroundColor) ? '#1f2937' : '#ffffff';
+}
+/**
+ * Generate a complete color palette from an accent color for light mode
+ */
+function generateLightPalette(accentColor) {
+    return {
+        // Accent variations
+        accent: accentColor,
+        accentHover: darken(accentColor, 10),
+        accentSubtle: withAlpha(accentColor, 0.1),
+        // Backgrounds
+        background: '#ffffff',
+        backgroundSubtle: '#f9fafb',
+        backgroundMuted: '#f3f4f6',
+        // Text
+        text: '#1f2937',
+        textMuted: '#6b7280',
+        textSubtle: '#9ca3af',
+        // Borders
+        border: '#e5e7eb',
+        borderSubtle: '#f3f4f6',
+        // Message bubbles
+        userBubble: accentColor,
+        userBubbleText: getContrastText(accentColor),
+        assistantBubble: '#f3f4f6',
+        assistantBubbleText: '#1f2937',
+        // Input
+        inputBackground: '#ffffff',
+        inputBorder: '#d1d5db',
+        inputBorderFocus: accentColor,
+        // Shadow
+        shadow: 'rgba(0, 0, 0, 0.1)',
+    };
+}
+/**
+ * Generate a complete color palette from an accent color for dark mode
+ */
+function generateDarkPalette(accentColor) {
+    // Lighten accent for better visibility on dark backgrounds
+    const adjustedAccent = isLightColor(accentColor) ? accentColor : lighten(accentColor, 15);
+    return {
+        // Accent variations
+        accent: adjustedAccent,
+        accentHover: lighten(adjustedAccent, 10),
+        accentSubtle: withAlpha(adjustedAccent, 0.15),
+        // Backgrounds
+        background: '#1a1a2e',
+        backgroundSubtle: '#16213e',
+        backgroundMuted: '#0f3460',
+        // Text
+        text: '#f9fafb',
+        textMuted: '#d1d5db',
+        textSubtle: '#9ca3af',
+        // Borders
+        border: '#374151',
+        borderSubtle: '#1f2937',
+        // Message bubbles
+        userBubble: adjustedAccent,
+        userBubbleText: getContrastText(adjustedAccent),
+        assistantBubble: '#0f3460',
+        assistantBubbleText: '#f9fafb',
+        // Input
+        inputBackground: '#16213e',
+        inputBorder: '#374151',
+        inputBorderFocus: adjustedAccent,
+        // Shadow
+        shadow: 'rgba(0, 0, 0, 0.3)',
+    };
+}
+
+/**
+ * Generate Theme Styles
+ * Creates CSS custom properties from accent color and theme mode
+ */
+/**
+ * Generate all CSS custom properties for the widget
+ */
+function generateThemeStyles(appearance, theme) {
+    const palette = theme === 'dark'
+        ? generateDarkPalette(appearance.accentColor)
+        : generateLightPalette(appearance.accentColor);
+    // Liquid glass design - frosted glass with transparency
+    const isLight = theme === 'light';
+    return {
+        // ========================================================================
+        // BUTTON (FAB) - Liquid Glass Style
+        // ========================================================================
+        '--button-color': palette.accent,
+        '--button-opacity': '1',
+        '--button-size': '56px',
+        '--button-icon-color': palette.userBubbleText,
+        '--button-border-radius': '50%',
+        '--button-border-width': '0px',
+        '--button-border-color': palette.accent,
+        '--button-border-opacity': '1',
+        '--button-backdrop-blur': '20px',
+        '--button-shadow': `0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1)`,
+        // ========================================================================
+        // CARD/WINDOW - Frosted Glass
+        // ========================================================================
+        '--card-background': isLight ? 'rgba(255, 255, 255, 0.88)' : 'rgba(15, 20, 25, 0.92)',
+        '--card-opacity': '1',
+        '--card-border-radius': '28px',
+        '--card-border-width': '1px',
+        '--card-border-color': isLight ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.06)',
+        '--card-border-color-rgba': isLight ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.06)',
+        '--card-border-opacity': '1',
+        '--card-backdrop-blur': '24px',
+        '--card-shadow': isLight
+            ? '0 25px 50px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05)'
+            : '0 25px 50px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1)',
+        // ========================================================================
+        // HEADER - Transparent with pure blur (no color)
+        // ========================================================================
+        '--header-background': 'transparent',
+        '--header-opacity': '1',
+        '--header-text-color': palette.accent,
+        '--header-border-bottom-width': '0px',
+        '--header-border-bottom-color': 'transparent',
+        '--header-border-bottom-opacity': '0',
+        '--header-backdrop-blur': '16px',
+        // ========================================================================
+        // CHAT AREA - Transparent
+        // ========================================================================
+        '--chat-background': 'transparent',
+        '--chat-opacity': '1',
+        '--welcome-color': palette.text,
+        '--message-text-color': palette.text,
+        // ========================================================================
+        // MESSAGE BUBBLES - Glass style
+        // ========================================================================
+        '--bubble-user-color': palette.userBubble,
+        '--bubble-user-opacity': '1',
+        '--user-message-text': palette.userBubbleText,
+        '--bubble-assistant-color': isLight ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.1)',
+        '--bubble-assistant-opacity': '1',
+        '--assistant-message-text': isLight ? palette.text : '#f0f0f0',
+        '--bubble-border-radius': '20px',
+        '--bubble-border-width': isLight ? '1px' : '1px',
+        '--bubble-border-color': isLight ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.08)',
+        '--bubble-border-opacity': '1',
+        '--bubble-opacity': '1',
+        // ========================================================================
+        // FOOTER/INPUT - Glass style
+        // ========================================================================
+        '--footer-background': isLight ? 'rgba(255, 255, 255, 0.85)' : 'rgba(30, 30, 40, 0.8)',
+        '--footer-opacity': '1',
+        '--footer-border-top-width': '1px',
+        '--footer-border-top-color': isLight ? 'rgba(255, 255, 255, 0.5)' : 'rgba(255, 255, 255, 0.08)',
+        '--footer-border-top-opacity': '1',
+        '--footer-backdrop-blur': '20px',
+        '--input-background': isLight ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 255, 255, 0.08)',
+        '--input-background-opacity': '1',
+        '--input-border-radius': '28px',
+        '--input-border-width': '1.5px',
+        '--input-border-color': isLight ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.1)',
+        '--input-border-opacity': '1',
+        '--input-shadow': `inset 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04)`,
+        '--send-button-background': palette.accent,
+        '--send-button-opacity': '1',
+        '--send-button-border-radius': '50%',
+        '--send-button-border-width': '0px',
+        '--send-button-border-color': palette.accent,
+        '--send-button-border-opacity': '1',
+        // ========================================================================
+        // HOVER STATES
+        // ========================================================================
+        '--hover-button-scale': '1.08',
+        '--hover-button-opacity': '1',
+        '--hover-input-border-color': palette.accent,
+        '--hover-send-button-opacity': '1',
+        '--hover-close-button-opacity': '1',
+        // ========================================================================
+        // ACTIVE STATES
+        // ========================================================================
+        '--active-input-border-color': palette.accent,
+        '--active-input-shadow': `0 0 0 4px ${withAlpha(palette.accent, 0.15)}`,
+        // ========================================================================
+        // GENERAL
+        // ========================================================================
+        '--primary-color': palette.accent,
+        '--background-color': palette.background,
+        '--text-color': palette.text,
+        '--border-color': palette.border,
+        // ========================================================================
+        // GLASS EFFECTS
+        // ========================================================================
+        '--glass-blur': '20px',
+        '--glass-saturation': '180%',
+    };
+}
+
+/**
+ * Auto Theme Detector
+ * Detects whether the widget should use light or dark mode
+ * based on the background behind it
+ */
+/**
+ * Sample the background color behind an element
+ * Uses multiple sampling points for accuracy
+ */
+function sampleBackgroundColor(element) {
+    const rect = element.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    // Try to get the element behind our widget
+    // Temporarily hide the element to sample what's behind
+    const originalVisibility = element.style.visibility;
+    element.style.visibility = 'hidden';
+    // Sample the center point
+    const elementBehind = document.elementFromPoint(centerX, centerY);
+    // Restore visibility
+    element.style.visibility = originalVisibility;
+    if (!elementBehind) {
+        return '#ffffff'; // Default to white
+    }
+    // Get computed background color
+    const computedStyle = window.getComputedStyle(elementBehind);
+    let bgColor = computedStyle.backgroundColor;
+    // If transparent, walk up the DOM tree
+    if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
+        let parent = elementBehind.parentElement;
+        while (parent) {
+            const parentStyle = window.getComputedStyle(parent);
+            bgColor = parentStyle.backgroundColor;
+            if (bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
+                break;
+            }
+            parent = parent.parentElement;
+        }
+    }
+    // If still transparent, check body/html
+    if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
+        const bodyStyle = window.getComputedStyle(document.body);
+        bgColor = bodyStyle.backgroundColor;
+        if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
+            return '#ffffff'; // Default to white
+        }
+    }
+    return rgbaToHex(bgColor);
+}
+/**
+ * Convert rgba/rgb string to hex
+ */
+function rgbaToHex(rgba) {
+    // Handle rgb(r, g, b) or rgba(r, g, b, a)
+    const match = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (!match)
+        return '#ffffff';
+    const r = parseInt(match[1]);
+    const g = parseInt(match[2]);
+    const b = parseInt(match[3]);
+    return '#' + [r, g, b].map(x => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    }).join('');
+}
+/**
+ * Determine if the background is dark
+ */
+function isBackgroundDark(backgroundColor) {
+    const luminance = getLuminance(backgroundColor);
+    return luminance < 0.5;
+}
+/**
+ * Auto-detect theme based on background
+ */
+function detectTheme(element) {
+    const bgColor = sampleBackgroundColor(element);
+    return isBackgroundDark(bgColor) ? 'dark' : 'light';
+}
+/**
+ * Create a MutationObserver to watch for theme changes
+ */
+function createThemeObserver(element, callback) {
+    const observer = new MutationObserver(() => {
+        const theme = detectTheme(element);
+        callback(theme);
+    });
+    // Observe body for class/style changes (common for theme switching)
+    observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['class', 'style', 'data-theme'],
+    });
+    // Also observe html element
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['class', 'style', 'data-theme'],
+    });
+    return observer;
+}
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
-  if (typeof document === 'undefined') { return; }
+  if (!css || typeof document === 'undefined') { return; }
 
   var head = document.head || document.getElementsByTagName('head')[0];
   var style = document.createElement('style');
@@ -21864,7 +22256,10 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".ai-chat-widget{--primary-color:#07f;--background-color:#fff;--text-color:#1f2937;--border-color:#e5e7eb;--user-message-bg:var(--primary-color);--user-message-text:#fff;--assistant-message-bg:#f3f4f6;--assistant-message-text:#374151;--input-bg:#fff;--input-border:#d1d5db;--shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--button-color:#07f;--button-size:56px;--button-border-radius:28px;--button-border-width:0px;--button-border-color:#07f;--button-opacity:1;--button-backdrop-blur:0px;--button-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--card-background:#fff;--card-border-radius:16px;--card-border-width:0px;--card-border-color:#e5e7eb;--card-opacity:1;--card-backdrop-blur:0px;--card-shadow:0 25px 50px -12px rgba(0,0,0,.25);--header-background:#07f;--header-text-color:#fff;--header-font-size:18px;--header-border-bottom-width:0px;--header-border-bottom-color:#e5e7eb;--header-opacity:1;--header-backdrop-blur:0px;--chat-background:#fff;--chat-opacity:1;--chat-backdrop-blur:0px;--welcome-font-size:16px;--welcome-color:#1f2937;--welcome-opacity:1;--bubble-user-color:#07f;--bubble-assistant-color:#f3f4f6;--bubble-border-radius:16px;--bubble-border-width:0px;--bubble-border-color:#e5e7eb;--bubble-opacity:1;--typing-animation-color:#f3f4f6;--typing-animation-opacity:1;--typing-animation-border-width:0px;--typing-animation-border-color:#e5e7eb;--typing-animation-border-radius:16px;--footer-background:#fff;--footer-border-top-width:1px;--footer-border-top-color:#e5e7eb;--footer-opacity:1;--footer-backdrop-blur:0px;--input-background:#fff;--input-border-radius:24px;--input-border-width:1.5px;--input-border-color:#d1d5db;--input-opacity:1;--input-shadow:0 1px 2px 0 rgba(0,0,0,.05);--send-button-background:#07f;--send-button-border-radius:20px;--send-button-border-width:0px;--send-button-border-color:#07f;--send-button-opacity:1;--hover-button-scale:1.05;--hover-button-opacity:0.9;--hover-input-border-color:#9ca3af;--hover-send-button-opacity:0.85;--hover-close-button-opacity:1;--active-input-border-color:#07f;--active-input-shadow:0 0 0 3px rgba(0,119,255,.1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.ai-chat-widget.dark{--background-color:#001d3d;--text-color:#f9fafb;--border-color:#374151;--assistant-message-bg:#036;--assistant-message-text:#e5e7eb;--input-bg:#002855;--input-border:#374151}.ai-chat-widget.dark .ai-chat-message.system .ai-chat-message-content{background-color:#78350f;color:#fef3c7}.ai-chat-widget.dark .ai-chat-message.tool .ai-chat-message-content{background-color:#1e3a8a;color:#dbeafe}.ai-chat-widget-container{font-size:14px;line-height:1.5;position:fixed;z-index:9999}.ai-chat-widget-container.bottom-right{bottom:20px;right:20px}.ai-chat-widget-container.bottom-left{bottom:20px;left:20px}.ai-chat-widget-container.top-right{right:20px;top:20px}.ai-chat-widget-container.top-left{left:20px;top:20px}.ai-chat-button{align-items:center;backdrop-filter:blur(var(--button-backdrop-blur));-webkit-backdrop-filter:blur(var(--button-backdrop-blur));background-color:var(--button-color);border:var(--button-border-width) solid var(--button-border-color);border-radius:var(--button-border-radius);box-shadow:var(--button-shadow);color:#fff;cursor:pointer;display:flex;height:var(--button-size);justify-content:center;opacity:var(--button-opacity);transition:all .3s cubic-bezier(.4,0,.2,1);width:var(--button-size)}.ai-chat-button:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);opacity:var(--hover-button-opacity);transform:scale(var(--hover-button-scale))}.ai-chat-button:active{transform:scale(.95)}.ai-chat-button-svg{height:50%;min-height:24px;min-width:24px;width:50%}.ai-chat-button-icon{font-size:1.5em;line-height:1}.ai-chat-window{border-radius:var(--card-border-radius);box-shadow:0 0 0 var(--card-border-width) var(--card-border-color-rgba,var(--card-border-color)),var(--card-shadow);display:flex;flex-direction:column;overflow:hidden;position:absolute}.ai-chat-window>*{position:relative;z-index:1}.ai-chat-window:before{backdrop-filter:blur(var(--card-backdrop-blur));-webkit-backdrop-filter:blur(var(--card-backdrop-blur));background-color:var(--card-background);border-radius:var(--card-border-radius);content:\"\";inset:0;opacity:var(--card-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-widget-container.bottom-right .ai-chat-window{bottom:0;right:0}.ai-chat-widget-container.bottom-left .ai-chat-window{bottom:0;left:0}.ai-chat-widget-container.top-right .ai-chat-window{right:0;top:0}.ai-chat-widget-container.top-left .ai-chat-window{left:0;top:0}.ai-chat-window.size-small{height:500px;width:380px}.ai-chat-window.size-medium{height:650px;width:440px}.ai-chat-window.size-large{height:750px;width:520px}.ai-chat-header{align-items:center;border-bottom:var(--header-border-bottom-width) solid var(--header-border-bottom-color);box-shadow:0 2px 8px rgba(0,0,0,.1);color:var(--header-text-color);display:flex;justify-content:space-between;padding:20px;position:relative}.ai-chat-header:before{backdrop-filter:blur(var(--header-backdrop-blur));-webkit-backdrop-filter:blur(var(--header-backdrop-blur));background-color:var(--header-background);content:\"\";inset:0;opacity:var(--header-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-header>*{position:relative;z-index:1}.ai-chat-header-content{align-items:center;display:flex;flex:1;gap:12px}.ai-chat-logo{border-radius:50%;height:32px;object-fit:cover;width:32px}.ai-chat-title{color:var(--header-text-color);font-size:var(--header-font-size);font-weight:600;letter-spacing:-.01em}.ai-chat-close-button{align-items:center;background:none;border:none;border-radius:8px;color:var(--header-text-color);cursor:pointer;display:flex;justify-content:center;opacity:.9;padding:8px;transition:all .2s ease}.ai-chat-close-button:hover{background-color:hsla(0,0%,100%,.15);opacity:var(--hover-close-button-opacity);transform:scale(1.05)}.ai-chat-messages{background-color:var(--chat-background);display:flex;flex:1;flex-direction:column;gap:16px;overflow-x:hidden;overflow-y:auto;padding:20px;position:relative}.ai-chat-window:has(.ai-chat-input-container.integrated) .ai-chat-messages{padding-bottom:100px}.ai-chat-messages:before{backdrop-filter:blur(var(--chat-backdrop-blur));-webkit-backdrop-filter:blur(var(--chat-backdrop-blur));background-color:var(--chat-background);bottom:0;content:\"\";left:0;opacity:var(--chat-opacity);pointer-events:none;position:absolute;right:0;top:0;z-index:0}.ai-chat-messages>*{position:relative;z-index:1}.ai-chat-messages::-webkit-scrollbar{width:6px}.ai-chat-messages::-webkit-scrollbar-track{background:transparent}.ai-chat-messages::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--input-border)}.ai-chat-message{animation:slideIn .2s ease-out;display:flex;flex-direction:column;gap:4px}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ai-chat-message.user{align-items:flex-end}.ai-chat-message.assistant{align-items:flex-start}.ai-chat-message.system{align-items:center}.ai-chat-message.tool{align-items:flex-start}.ai-chat-message-content{word-wrap:break-word;border:var(--bubble-border-width) solid var(--bubble-border-color);border-radius:var(--bubble-border-radius);font-size:15px;line-height:1.6;max-width:80%;opacity:var(--bubble-opacity);padding:12px 16px}.ai-chat-message.user .ai-chat-message-content{background-color:var(--bubble-user-color);border-bottom-right-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--user-message-text)}.ai-chat-message.assistant .ai-chat-message-content{background-color:var(--bubble-assistant-color);border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.05);color:var(--assistant-message-text)}.ai-chat-message.system .ai-chat-message-content{background-color:#fef3c7;border-radius:8px;color:#92400e;font-size:12px;font-style:italic;max-width:90%;text-align:center}.ai-chat-message.tool .ai-chat-message-content{background-color:#dbeafe;border-bottom-left-radius:4px;color:#1e40af;font-family:Courier New,monospace;font-size:13px}.ai-chat-tool-indicators{display:flex;gap:6px;margin-top:6px}.tool-indicator{align-items:center;background:#dbeafe;border-radius:50%;color:#1e40af;display:inline-flex;height:18px;justify-content:center;overflow:hidden;position:relative;width:18px}.tool-indicator .icon{font-size:12px;line-height:1;z-index:1}.tool-indicator.started:after{animation:ai-spin 1s linear infinite;border:2px solid rgba(30,64,175,.25);border-radius:50%;border-top-color:#1e40af;content:\"\";inset:0;position:absolute}@keyframes ai-spin{to{transform:rotate(1turn)}}.ai-chat-tool-message{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #a7f3d0;border-radius:9999px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 1px 8px rgba(16,185,129,.08);color:#065f46;gap:10px;padding:6px 12px}.ai-chat-tool-message,.tool-finished{align-items:center;display:inline-flex}.tool-finished{background:rgba(16,185,129,.12);border-radius:50%;color:#059669;height:22px;justify-content:center;position:relative;width:22px}.tool-finished .tool-icon{font-size:14px}.tool-finished .tool-check{align-items:center;background:#10b981;border-radius:50%;bottom:-3px;box-shadow:0 1px 2px rgba(0,0,0,.12);color:#fff;display:inline-flex;font-size:10px;height:14px;justify-content:center;position:absolute;right:-3px;width:14px}.tool-name{font-size:12px;font-weight:600}.ai-chat-message-timestamp{color:rgba(0,0,0,.6);filter:invert(1) grayscale(1) contrast(1.2);font-size:11px;mix-blend-mode:difference;padding:0 4px}.ai-chat-welcome{color:var(--welcome-color);opacity:var(--welcome-opacity);padding:48px 24px;text-align:center}.ai-chat-welcome-title{color:var(--welcome-color);font-size:calc(var(--welcome-font-size)*1.5);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}.ai-chat-welcome-text{color:var(--welcome-color);font-size:var(--welcome-font-size);line-height:1.6}.ai-chat-typing{align-items:center;background-color:var(--assistant-message-bg);border-radius:12px;border-bottom-left-radius:4px;display:flex;gap:4px;max-width:80px;padding:10px 14px}.ai-chat-typing-dot{animation:typingBounce 1.4s infinite;background-color:#9ca3af;border-radius:50%;height:8px;width:8px}.ai-chat-typing-dot:nth-child(2){animation-delay:.2s}.ai-chat-typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.ai-chat-input-container{padding:20px;position:relative}.ai-chat-input-container.separate{border-top:var(--footer-border-top-width) solid var(--footer-border-top-color)}.ai-chat-input-container.integrated{bottom:0;left:0;padding-bottom:calc(20px + var(--card-border-width));position:absolute;right:0;z-index:10}.ai-chat-input-container.separate:before{backdrop-filter:blur(var(--footer-backdrop-blur));-webkit-backdrop-filter:blur(var(--footer-backdrop-blur));background-color:var(--footer-background);content:\"\";inset:0;opacity:var(--footer-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-input-container>*{position:relative;z-index:1}.ai-chat-input-wrapper{align-items:center;background-color:var(--input-background);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-border-radius);display:flex;gap:0;opacity:var(--input-opacity);padding:6px 6px 6px 16px;transition:all .2s ease}.ai-chat-input-wrapper:hover{border-color:var(--hover-input-border-color)}.ai-chat-input-wrapper:focus-within{border-color:var(--active-input-border-color);box-shadow:var(--active-input-shadow)}.ai-chat-input{background-color:transparent;border:none;border-radius:0;color:var(--text-color);flex:1;font-family:inherit;font-size:15px;max-height:120px;min-height:40px;outline:none;padding:10px 0;resize:none}.ai-chat-input::placeholder{color:#9ca3af}.ai-chat-send-button{align-items:center;background-color:var(--send-button-background);border:var(--send-button-border-width) solid var(--send-button-border-color);border-radius:var(--send-button-border-radius);color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-weight:500;height:40px;justify-content:center;min-width:40px;opacity:var(--send-button-opacity);padding:0;transition:all .2s ease;width:40px}.ai-chat-send-button:hover:not(:disabled){opacity:var(--hover-send-button-opacity);transform:scale(1.05)}.ai-chat-send-button:active:not(:disabled){transform:scale(.98)}.ai-chat-send-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-file-button{align-items:center;background:none;border:none;border-radius:6px;color:var(--text-color);cursor:pointer;display:flex;justify-content:center;padding:8px;transition:background-color .2s}.ai-chat-file-button:hover:not(:disabled){background-color:rgba(0,0,0,.05)}.ai-chat-file-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-file-list{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px}.ai-chat-file-item{align-items:center;background-color:rgba(0,0,0,.05);border-radius:6px;display:flex;font-size:12px;gap:8px;padding:6px 10px}.ai-chat-file-extension{background-color:var(--primary-color);border-radius:3px;color:#fff;display:inline-block;font-size:10px;font-weight:600;min-width:40px;padding:2px 6px;text-align:center;text-transform:uppercase}.ai-chat-file-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ai-chat-file-name{font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-file-size{color:var(--text-muted);font-size:10px;opacity:.7}.ai-chat-file-remove{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;opacity:.6;padding:0 4px;transition:opacity .2s}.ai-chat-file-remove:hover{opacity:1}.ai-chat-message-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.ai-chat-message-attachment{align-items:center;background-color:rgba(0,0,0,.08);border-radius:4px;display:inline-flex;font-size:11px;gap:4px;padding:3px 8px}.ai-chat-attachment-icon{font-size:12px}.ai-chat-attachment-ext{background-color:var(--primary-color);border-radius:2px;color:#fff;display:inline-block;font-size:9px;font-weight:600;padding:1px 4px;text-transform:uppercase}.ai-chat-attachment-name{max-width:120px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-sources{background-color:rgba(0,0,0,.02);border-radius:6px;font-size:12px;margin-top:8px;overflow:hidden}.ai-chat-sources-toggle{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:6px;padding:8px 10px;text-align:left;transition:background-color .2s;width:100%}.ai-chat-sources-toggle:hover{background-color:rgba(0,0,0,.03)}.ai-chat-sources-icon{color:var(--text-muted);font-size:10px;transition:transform .2s}.ai-chat-sources-title{color:var(--text-color);flex:1;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.ai-chat-source-item{border-top:1px solid rgba(0,0,0,.05);color:#6b7280;display:flex;gap:8px;padding:8px 10px}.ai-chat-source-item:last-child{border-bottom:none}.ai-chat-source-number{color:var(--primary-color);flex-shrink:0;font-weight:600}.ai-chat-source-details{display:flex;flex:1;flex-direction:column;gap:4px}.ai-chat-source-score{color:#9ca3af;font-size:11px}.ai-chat-source-content{color:#6b7280;font-size:11px;font-style:italic;line-height:1.4}.ai-chat-source-metadata{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.ai-chat-source-meta-item{background-color:rgba(0,0,0,.05);border-radius:3px;color:#6b7280;font-size:10px;padding:2px 6px}.ai-chat-feedback{align-items:center;display:flex;gap:8px;margin-top:8px;min-height:32px}.ai-chat-feedback-button{align-items:center;background:none;border:none;border-radius:6px;cursor:pointer;display:flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));font-size:16px;gap:4px;overflow:hidden;padding:6px 10px;position:relative;transition:all .2s ease}.ai-chat-feedback-button:hover:not(:disabled){background-color:rgba(0,0,0,.05);transform:scale(1.2)}.ai-chat-feedback-button:active:not(:disabled){transform:scale(.95)}.ai-chat-feedback-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-feedback-button.active{background-color:rgba(0,119,255,.1)}.ai-chat-feedback-submitted{align-items:center;animation:feedbackMorph .3s cubic-bezier(.34,1.56,.64,1);display:flex;gap:6px}.ai-chat-feedback-checkmark{animation:checkmarkPop .3s cubic-bezier(.34,1.56,.64,1);color:#10b981;font-size:16px;font-weight:700}.ai-chat-feedback-text{animation:textSlideIn .3s ease;color:#10b981;font-size:13px;font-weight:500}@keyframes feedbackMorph{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes checkmarkPop{0%{opacity:0;transform:scale(0) rotate(-45deg)}50%{transform:scale(1.3) rotate(0deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}@keyframes textSlideIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.ai-chat-error{align-items:flex-start;background-color:#fee2e2;border-left:4px solid #dc2626;border-radius:8px;color:#991b1b;display:flex;font-size:14px;font-weight:500;gap:8px;line-height:1.5;margin:8px 16px;padding:12px 16px}.ai-chat-error:before{content:\"⚠️\";flex-shrink:0;font-size:16px}.ai-chat-warning{background-color:#fef3c7;border-radius:8px;color:#92400e;font-size:13px;margin:8px 16px;padding:12px}.ai-chat-suggested-questions{margin-bottom:8px;padding:12px 16px}.ai-chat-suggested-questions-label{color:#6b7280;font-size:12px;font-weight:500;margin-bottom:8px}.ai-chat-suggested-questions-list{display:flex;flex-direction:column;gap:8px}.ai-chat-suggested-question{align-items:center;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;color:#374151;cursor:pointer;display:flex;font-size:14px;gap:8px;padding:10px 12px;text-align:left;transition:all .2s ease;width:100%}.ai-chat-suggested-question:hover{background-color:#f3f4f6;border-color:var(--ai-chat-primary-color,#6366f1);box-shadow:0 2px 4px rgba(0,0,0,.05);transform:translateY(-1px)}.ai-chat-suggested-question:active{transform:translateY(0)}.ai-chat-suggested-question-icon{flex-shrink:0;font-size:16px}.ai-chat-suggested-question-text{flex:1;line-height:1.4}@media (max-width:480px){.ai-chat-window{border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}.ai-chat-widget-container{bottom:20px!important;right:20px!important}.ai-chat-suggested-question{font-size:13px;padding:9px 10px}}.ai-chat-action-approval{background:linear-gradient(135deg,#07f,#001d3d);border-radius:16px;box-shadow:0 4px 12px rgba(0,119,255,.3);color:#fff;margin:16px;padding:16px}.ai-chat-action-approval-content{align-items:flex-start;display:flex;gap:12px;margin-bottom:16px}.ai-chat-action-approval-icon{align-items:center;background:hsla(0,0%,100%,.2);border-radius:8px;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.ai-chat-action-approval-text{flex:1}.ai-chat-action-approval-title{font-size:15px;font-weight:600;margin-bottom:4px}.ai-chat-action-approval-description{font-size:13px;line-height:1.4;opacity:.95}.ai-chat-action-approval-buttons{display:flex;gap:8px;justify-content:flex-end}.ai-chat-action-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:inherit;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;transition:all .2s ease}.ai-chat-action-button:disabled{cursor:not-allowed;opacity:.6}.ai-chat-action-button-reject{background:hsla(0,0%,100%,.2);color:#fff}.ai-chat-action-button-reject:hover:not(:disabled){background:hsla(0,0%,100%,.3)}.ai-chat-action-button-approve{background:#fff;color:#07f}.ai-chat-action-button-approve:hover:not(:disabled){background:#f0f0f0;box-shadow:0 2px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.ai-chat-action-spinner{animation:ai-chat-spin .6s linear infinite;border:2px solid rgba(0,119,255,.3);border-radius:50%;border-top-color:#07f;display:inline-block;height:14px;width:14px}@keyframes ai-chat-spin{to{transform:rotate(1turn)}}";
+var css_248z$1 = ".ai-chat-widget{--primary-color:#07f;--background-color:#fff;--text-color:#1f2937;--border-color:#e5e7eb;--user-message-bg:var(--primary-color);--user-message-text:#fff;--assistant-message-bg:#f3f4f6;--assistant-message-text:#374151;--input-bg:#fff;--input-border:#d1d5db;--shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--button-color:#07f;--button-size:56px;--button-border-radius:28px;--button-border-width:0px;--button-border-color:#07f;--button-opacity:1;--button-backdrop-blur:0px;--button-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--card-background:#fff;--card-border-radius:16px;--card-border-width:0px;--card-border-color:#e5e7eb;--card-opacity:1;--card-backdrop-blur:0px;--card-shadow:0 25px 50px -12px rgba(0,0,0,.25);--header-background:#07f;--header-text-color:#fff;--header-font-size:18px;--header-border-bottom-width:0px;--header-border-bottom-color:#e5e7eb;--header-opacity:1;--header-backdrop-blur:0px;--chat-background:#fff;--chat-opacity:1;--chat-backdrop-blur:0px;--welcome-font-size:16px;--welcome-color:#1f2937;--welcome-opacity:1;--bubble-user-color:#07f;--bubble-assistant-color:#f3f4f6;--bubble-border-radius:16px;--bubble-border-width:0px;--bubble-border-color:#e5e7eb;--bubble-opacity:1;--typing-animation-color:#f3f4f6;--typing-animation-opacity:1;--typing-animation-border-width:0px;--typing-animation-border-color:#e5e7eb;--typing-animation-border-radius:16px;--footer-background:#fff;--footer-border-top-width:1px;--footer-border-top-color:#e5e7eb;--footer-opacity:1;--footer-backdrop-blur:0px;--input-background:#fff;--input-border-radius:24px;--input-border-width:1.5px;--input-border-color:#d1d5db;--input-opacity:1;--input-shadow:0 1px 2px 0 rgba(0,0,0,.05);--send-button-background:#07f;--send-button-border-radius:20px;--send-button-border-width:0px;--send-button-border-color:#07f;--send-button-opacity:1;--hover-button-scale:1.05;--hover-button-opacity:0.9;--hover-input-border-color:#9ca3af;--hover-send-button-opacity:0.85;--hover-close-button-opacity:1;--active-input-border-color:#07f;--active-input-shadow:0 0 0 3px rgba(0,119,255,.1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.ai-chat-widget.dark{--background-color:#001d3d;--text-color:#f9fafb;--border-color:#374151;--assistant-message-bg:#036;--assistant-message-text:#e5e7eb;--input-bg:#002855;--input-border:#374151}.ai-chat-widget.dark .ai-chat-message.system .ai-chat-message-content{background-color:#78350f;color:#fef3c7}.ai-chat-widget.dark .ai-chat-message.tool .ai-chat-message-content{background-color:#1e3a8a;color:#dbeafe}.ai-chat-widget-container{font-size:14px;line-height:1.5;position:fixed;z-index:9999}.ai-chat-widget-container.bottom-right{bottom:20px;right:20px}.ai-chat-widget-container.bottom-left{bottom:20px;left:20px}.ai-chat-widget-container.top-right{right:20px;top:20px}.ai-chat-widget-container.top-left{left:20px;top:20px}.ai-chat-button{align-items:center;backdrop-filter:blur(var(--button-backdrop-blur));-webkit-backdrop-filter:blur(var(--button-backdrop-blur));background-color:var(--button-color);border:var(--button-border-width) solid var(--button-border-color);border-radius:var(--button-border-radius);box-shadow:var(--button-shadow);color:#fff;cursor:pointer;display:flex;height:var(--button-size);justify-content:center;opacity:var(--button-opacity);transition:all .3s cubic-bezier(.4,0,.2,1);width:var(--button-size)}.ai-chat-button:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);opacity:var(--hover-button-opacity);transform:scale(var(--hover-button-scale))}.ai-chat-button:active{transform:scale(.95)}.ai-chat-button-svg{height:50%;min-height:24px;min-width:24px;width:50%}.ai-chat-button-icon{font-size:1.5em;line-height:1}.ai-chat-window{border-radius:var(--card-border-radius);box-shadow:0 0 0 var(--card-border-width) var(--card-border-color-rgba,var(--card-border-color)),var(--card-shadow);display:flex;flex-direction:column;overflow:hidden;position:absolute}.ai-chat-window>*{position:relative;z-index:1}.ai-chat-window:before{backdrop-filter:blur(var(--card-backdrop-blur));-webkit-backdrop-filter:blur(var(--card-backdrop-blur));background-color:var(--card-background);border-radius:var(--card-border-radius);content:\"\";inset:0;opacity:var(--card-opacity);pointer-events:none;position:absolute;z-index:0}.ai-chat-widget-container.bottom-right .ai-chat-window{bottom:calc(var(--button-size, 60px) + 16px);right:0}.ai-chat-widget-container.bottom-left .ai-chat-window{bottom:calc(var(--button-size, 60px) + 16px);left:0}.ai-chat-widget-container.top-right .ai-chat-window{right:0;top:calc(var(--button-size, 60px) + 16px)}.ai-chat-widget-container.top-left .ai-chat-window{left:0;top:calc(var(--button-size, 60px) + 16px)}.ai-chat-button{z-index:1}.ai-chat-window{z-index:2}.ai-chat-window.size-small{height:500px;width:380px}.ai-chat-window.size-medium{height:650px;width:440px}.ai-chat-window.size-large{height:750px;width:520px}.ai-chat-logo{border-radius:50%;height:32px;object-fit:cover;width:32px}.ai-chat-messages::-webkit-scrollbar{width:6px}.ai-chat-messages::-webkit-scrollbar-track{background:transparent}.ai-chat-messages::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--input-border)}.ai-chat-message{display:flex;flex-direction:column;gap:4px}.ai-chat-message.user{align-items:flex-end}.ai-chat-message.assistant{align-items:flex-start}.ai-chat-message.system{align-items:center}.ai-chat-message.tool{align-items:flex-start}.ai-chat-message-content{word-wrap:break-word;border:var(--bubble-border-width) solid var(--bubble-border-color);border-radius:var(--bubble-border-radius);font-size:15px;line-height:1.6;max-width:80%;opacity:var(--bubble-opacity);padding:12px 16px}.ai-chat-message.user .ai-chat-message-content{background-color:var(--bubble-user-color);border-bottom-right-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--user-message-text)}.ai-chat-message.assistant .ai-chat-message-content{background-color:var(--bubble-assistant-color,#f3f4f6);border:1px solid var(--bubble-border-color,rgba(0,0,0,.08));border-radius:var(--bubble-border-radius,16px);border-bottom-left-radius:4px;box-shadow:none;color:var(--assistant-message-text);max-width:85%;padding:12px 16px}.ai-chat-message.assistant .ai-chat-message-content p{margin:0 0 12px}.ai-chat-message.assistant .ai-chat-message-content p:last-child{margin-bottom:0}.ai-chat-message.assistant .ai-chat-message-content ol,.ai-chat-message.assistant .ai-chat-message-content ul{margin:8px 0 12px;padding-left:24px}.ai-chat-message.assistant .ai-chat-message-content li{line-height:1.5;margin:6px 0}.ai-chat-message.assistant .ai-chat-message-content li::marker{color:var(--primary-color,#07f)}.ai-chat-message.assistant .ai-chat-message-content ol li::marker{font-weight:600}.ai-chat-message.assistant .ai-chat-message-content strong{font-weight:600}.ai-chat-message.assistant .ai-chat-message-content em{font-style:italic}.ai-chat-message.assistant .ai-chat-message-content code{background-color:rgba(0,0,0,.06);border-radius:4px;font-family:SF Mono,Consolas,Monaco,monospace;font-size:.9em;padding:2px 6px}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content code{background-color:hsla(0,0%,100%,.1)}.ai-chat-message.assistant .ai-chat-message-content pre{background-color:rgba(0,0,0,.06);border-radius:8px;margin:8px 0 12px;overflow-x:auto;padding:12px}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content pre{background-color:hsla(0,0%,100%,.08)}.ai-chat-message.assistant .ai-chat-message-content pre code{background-color:transparent;border-radius:0;padding:0}.ai-chat-message.assistant .ai-chat-message-content blockquote{border-left:3px solid var(--primary-color,#07f);color:var(--text-muted,#6b7280);margin:8px 0 12px;padding:4px 0 4px 12px}.ai-chat-message.assistant .ai-chat-message-content a{color:var(--primary-color,#07f);text-decoration:underline}.ai-chat-message.assistant .ai-chat-message-content a:hover{opacity:.8}.ai-chat-message.assistant .ai-chat-message-content h1,.ai-chat-message.assistant .ai-chat-message-content h2,.ai-chat-message.assistant .ai-chat-message-content h3,.ai-chat-message.assistant .ai-chat-message-content h4,.ai-chat-message.assistant .ai-chat-message-content h5,.ai-chat-message.assistant .ai-chat-message-content h6{font-weight:600;line-height:1.3;margin:16px 0 8px}.ai-chat-message.assistant .ai-chat-message-content h1:first-child,.ai-chat-message.assistant .ai-chat-message-content h2:first-child,.ai-chat-message.assistant .ai-chat-message-content h3:first-child{margin-top:0}.ai-chat-message.assistant .ai-chat-message-content hr{border:none;border-top:1px solid var(--border-color,#e5e7eb);margin:12px 0}.ai-chat-message.system .ai-chat-message-content{background-color:#fef3c7;border-radius:8px;color:#92400e;font-size:12px;font-style:italic;max-width:90%;text-align:center}.ai-chat-message.tool .ai-chat-message-content{background-color:#dbeafe;border-bottom-left-radius:4px;color:#1e40af;font-family:Courier New,monospace;font-size:13px}.ai-chat-tool-indicators{display:flex;gap:6px;margin-top:6px}.tool-indicator{align-items:center;background:#dbeafe;border-radius:50%;color:#1e40af;display:inline-flex;height:18px;justify-content:center;overflow:hidden;position:relative;width:18px}.tool-indicator .icon{font-size:12px;line-height:1;z-index:1}.tool-indicator.started:after{animation:ai-spin 1s linear infinite;border:2px solid rgba(30,64,175,.25);border-radius:50%;border-top-color:#1e40af;content:\"\";inset:0;position:absolute}@keyframes ai-spin{to{transform:rotate(1turn)}}.ai-chat-tool-message{align-items:center;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);border-radius:20px;color:#059669;display:inline-flex;gap:8px;padding:8px 14px}.ai-chat-widget.dark .ai-chat-tool-message{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.25);color:#34d399}.tool-finished{align-items:center;display:inline-flex;font-size:14px;justify-content:center}.tool-finished .tool-icon{display:none}.tool-finished .tool-check{font-size:14px;font-weight:700}.tool-name{font-size:13px;font-weight:500}.ai-chat-message-timestamp{color:rgba(0,0,0,.6);filter:invert(1) grayscale(1) contrast(1.2);font-size:11px;mix-blend-mode:difference;padding:0 4px}.ai-chat-welcome{color:var(--welcome-color);opacity:var(--welcome-opacity);padding:16px 0;text-align:left}.ai-chat-welcome-title{color:var(--primary-color);font-size:calc(var(--welcome-font-size)*1.25);font-weight:600;letter-spacing:-.01em;margin-bottom:8px}.ai-chat-welcome-text{color:var(--assistant-message-text);font-size:var(--welcome-font-size);line-height:1.6}.ai-chat-typing{align-items:center;background-color:var(--assistant-message-bg);border-radius:12px;border-bottom-left-radius:4px;display:flex;gap:4px;max-width:80px;padding:10px 14px}.ai-chat-typing-dot{animation:typingBounce 1.4s infinite;background-color:#9ca3af;border-radius:50%;height:8px;width:8px}.ai-chat-typing-dot:nth-child(2){animation-delay:.2s}.ai-chat-typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.ai-chat-file-button{align-items:center;background:none;border:none;border-radius:6px;color:var(--text-color);cursor:pointer;display:flex;justify-content:center;padding:8px;transition:background-color .2s}.ai-chat-file-button:hover:not(:disabled){background-color:rgba(0,0,0,.05)}.ai-chat-file-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-file-list{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px}.ai-chat-file-item{align-items:center;background-color:rgba(0,0,0,.05);border-radius:6px;display:flex;font-size:12px;gap:8px;padding:6px 10px}.ai-chat-file-extension{background-color:var(--primary-color);border-radius:3px;color:#fff;display:inline-block;font-size:10px;font-weight:600;min-width:40px;padding:2px 6px;text-align:center;text-transform:uppercase}.ai-chat-file-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ai-chat-file-name{font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-file-size{color:var(--text-muted);font-size:10px;opacity:.7}.ai-chat-file-remove{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;opacity:.6;padding:0 4px;transition:opacity .2s}.ai-chat-file-remove:hover{opacity:1}.ai-chat-message-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.ai-chat-message-attachment{align-items:center;background-color:rgba(0,0,0,.08);border-radius:4px;display:inline-flex;font-size:11px;gap:4px;padding:3px 8px}.ai-chat-attachment-icon{font-size:12px}.ai-chat-attachment-ext{background-color:var(--primary-color);border-radius:2px;color:#fff;display:inline-block;font-size:9px;font-weight:600;padding:1px 4px;text-transform:uppercase}.ai-chat-attachment-name{max-width:120px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-chat-sources{background-color:rgba(0,0,0,.02);border-radius:6px;font-size:12px;margin-top:8px;overflow:hidden}.ai-chat-sources-toggle{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:6px;padding:8px 10px;text-align:left;transition:background-color .2s;width:100%}.ai-chat-sources-toggle:hover{background-color:rgba(0,0,0,.03)}.ai-chat-sources-icon{color:var(--text-muted);font-size:10px;transition:transform .2s}.ai-chat-sources-title{color:var(--text-color);flex:1;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.ai-chat-source-item{border-top:1px solid rgba(0,0,0,.05);color:#6b7280;display:flex;gap:8px;padding:8px 10px}.ai-chat-source-item:last-child{border-bottom:none}.ai-chat-source-number{color:var(--primary-color);flex-shrink:0;font-weight:600}.ai-chat-source-details{display:flex;flex:1;flex-direction:column;gap:4px}.ai-chat-source-score{color:#9ca3af;font-size:11px}.ai-chat-source-content{color:#6b7280;font-size:11px;font-style:italic;line-height:1.4}.ai-chat-source-metadata{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.ai-chat-source-meta-item{background-color:rgba(0,0,0,.05);border-radius:3px;color:#6b7280;font-size:10px;padding:2px 6px}.ai-chat-feedback{align-items:center;display:flex;gap:8px;margin-top:8px;min-height:32px}.ai-chat-feedback-button{align-items:center;background:none;border:none;border-radius:6px;cursor:pointer;display:flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));font-size:16px;gap:4px;overflow:hidden;padding:6px 10px;position:relative;transition:all .2s ease}.ai-chat-feedback-button:hover:not(:disabled){background-color:rgba(0,0,0,.05);transform:scale(1.2)}.ai-chat-feedback-button:active:not(:disabled){transform:scale(.95)}.ai-chat-feedback-button:disabled{cursor:not-allowed;opacity:.5}.ai-chat-feedback-button.active{background-color:rgba(0,119,255,.1)}.ai-chat-feedback-submitted{align-items:center;animation:feedbackMorph .3s cubic-bezier(.34,1.56,.64,1);display:flex;gap:6px}.ai-chat-feedback-checkmark{animation:checkmarkPop .3s cubic-bezier(.34,1.56,.64,1);color:#10b981;font-size:16px;font-weight:700}.ai-chat-feedback-text{animation:textSlideIn .3s ease;color:#10b981;font-size:13px;font-weight:500}@keyframes feedbackMorph{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes checkmarkPop{0%{opacity:0;transform:scale(0) rotate(-45deg)}50%{transform:scale(1.3) rotate(0deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}@keyframes textSlideIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.ai-chat-error{align-items:flex-start;background-color:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:12px;color:#ef4444;display:flex;font-size:14px;font-weight:500;gap:10px;line-height:1.5;margin:8px 16px;padding:12px 16px}.ai-chat-widget.dark .ai-chat-error{background-color:rgba(239,68,68,.15);border-color:rgba(239,68,68,.25);color:#fca5a5}.ai-chat-error:before{align-items:center;background:rgba(239,68,68,.2);border-radius:50%;content:\"⚠\";display:flex;flex-shrink:0;font-size:14px;font-weight:700;height:20px;justify-content:center;width:20px}.ai-chat-widget.dark .ai-chat-error:before{background:rgba(239,68,68,.25)}.ai-chat-warning{background-color:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);border-radius:12px;color:#d97706;font-size:13px;margin:8px 16px;padding:12px 16px}.ai-chat-widget.dark .ai-chat-warning{background-color:rgba(245,158,11,.15);border-color:rgba(245,158,11,.25);color:#fbbf24}.ai-chat-suggested-questions{margin-bottom:8px;padding:12px 16px}.ai-chat-suggested-questions-label{color:#6b7280;font-size:12px;font-weight:500;margin-bottom:8px}.ai-chat-suggested-questions-list{display:flex;flex-direction:column;gap:8px}.ai-chat-suggested-question{align-items:center;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;color:#374151;cursor:pointer;display:flex;font-size:14px;gap:8px;padding:10px 12px;text-align:left;transition:all .2s ease;width:100%}.ai-chat-suggested-question:hover{background-color:#f3f4f6;border-color:var(--ai-chat-primary-color,#6366f1);box-shadow:0 2px 4px rgba(0,0,0,.05);transform:translateY(-1px)}.ai-chat-suggested-question:active{transform:translateY(0)}.ai-chat-suggested-question-icon{flex-shrink:0;font-size:16px}.ai-chat-suggested-question-text{flex:1;line-height:1.4}@media (max-width:480px){.ai-chat-window{border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}.ai-chat-widget-container{bottom:20px!important;right:20px!important}.ai-chat-suggested-question{font-size:13px;padding:9px 10px}}.ai-chat-action-approval{background:linear-gradient(135deg,#07f,#001d3d);border-radius:16px;box-shadow:0 4px 12px rgba(0,119,255,.3);color:#fff;margin:16px;padding:16px}.ai-chat-action-approval-content{align-items:flex-start;display:flex;gap:12px;margin-bottom:16px}.ai-chat-action-approval-icon{align-items:center;background:hsla(0,0%,100%,.2);border-radius:8px;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.ai-chat-action-approval-text{flex:1}.ai-chat-action-approval-title{font-size:15px;font-weight:600;margin-bottom:4px}.ai-chat-action-approval-description{font-size:13px;line-height:1.4;opacity:.95}.ai-chat-action-approval-buttons{display:flex;gap:8px;justify-content:flex-end}.ai-chat-action-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:inherit;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;transition:all .2s ease}.ai-chat-action-button:disabled{cursor:not-allowed;opacity:.6}.ai-chat-action-button-reject{background:hsla(0,0%,100%,.2);color:#fff}.ai-chat-action-button-reject:hover:not(:disabled){background:hsla(0,0%,100%,.3)}.ai-chat-action-button-approve{background:#fff;color:#07f}.ai-chat-action-button-approve:hover:not(:disabled){background:#f0f0f0;box-shadow:0 2px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.ai-chat-action-spinner{animation:ai-chat-spin .6s linear infinite;border:2px solid rgba(0,119,255,.3);border-radius:50%;border-top-color:#07f;display:inline-block;height:14px;width:14px}@keyframes ai-chat-spin{to{transform:rotate(1turn)}}";
+styleInject(css_248z$1);
+
+var css_248z = ".ai-chat-widget{--glass-blur:20px;--glass-saturation:180%;--glass-opacity-light:0.72;--glass-opacity-dark:0.65;--glass-border-opacity:0.18;--shadow-glass:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08),inset 0 1px 0 hsla(0,0%,100%,.1);--shadow-button:0 4px 24px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.1);--shadow-elevated:0 24px 80px rgba(0,0,0,.2),0 8px 32px rgba(0,0,0,.12);--spring-bounce:cubic-bezier(0.34,1.56,0.64,1);--spring-smooth:cubic-bezier(0.4,0,0.2,1);--spring-snappy:cubic-bezier(0.2,0,0,1);--duration-fast:0.2s;--duration-normal:0.35s;--duration-slow:0.5s}.ai-chat-button{align-items:center;backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));background:linear-gradient(135deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,.1));background-color:var(--button-color);border:none;border-radius:50%;box-shadow:var(--shadow-button),inset 0 1px 1px hsla(0,0%,100%,.3),inset 0 -1px 1px rgba(0,0,0,.1);cursor:pointer;display:flex;height:var(--button-size,60px);justify-content:center;overflow:hidden;position:relative;transition:transform var(--duration-normal) var(--spring-bounce),box-shadow var(--duration-normal) var(--spring-smooth);width:var(--button-size,60px)}.ai-chat-button:before{background:linear-gradient(135deg,hsla(0,0%,100%,.4),transparent 50%,transparent);inset:0;opacity:.6;pointer-events:none}.ai-chat-button:after,.ai-chat-button:before{border-radius:50%;content:\"\";position:absolute}.ai-chat-button:after{background:radial-gradient(circle at center,hsla(0,0%,100%,.3) 0,transparent 70%);inset:-2px;opacity:0;transform:scale(.8);transition:opacity var(--duration-normal) var(--spring-smooth),transform var(--duration-normal) var(--spring-bounce)}.ai-chat-button:hover{box-shadow:0 8px 40px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.15),inset 0 1px 1px hsla(0,0%,100%,.4),inset 0 -1px 1px rgba(0,0,0,.1);transform:scale(1.08) translateY(-2px)}.ai-chat-button:hover:after{opacity:1;transform:scale(1)}.ai-chat-button:active{transform:scale(.95);transition-duration:.1s}.ai-chat-button-svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));height:26px;transition:transform var(--duration-normal) var(--spring-bounce);width:26px}.ai-chat-button:hover .ai-chat-button-svg{transform:scale(1.1)}.ai-chat-button.is-open .ai-chat-button-svg{transform:rotate(180deg)}.ai-chat-window{animation:windowOpen var(--duration-slow) var(--spring-bounce);backdrop-filter:blur(var(--card-backdrop-blur,24px)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--card-backdrop-blur,24px)) saturate(var(--glass-saturation));background:var(--card-background,hsla(0,0%,100%,.88));border:var(--card-border-width,1px) solid var(--card-border-color,rgba(0,0,0,.06));border-radius:var(--card-border-radius,28px);box-shadow:var(--card-shadow,0 25px 50px -12px rgba(0,0,0,.25));display:flex;flex-direction:column;overflow:hidden;position:absolute;transform-origin:bottom right}.ai-chat-widget.dark .ai-chat-window{background:var(--card-background,rgba(15,20,25,.92));border-color:var(--card-border-color,hsla(0,0%,100%,.06))}@keyframes windowOpen{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.ai-chat-window.closing{animation:windowClose var(--duration-normal) var(--spring-smooth) forwards}@keyframes windowClose{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(20px)}}.ai-chat-header{align-items:center;background:transparent;border-bottom:none;box-shadow:none;display:flex;justify-content:space-between;left:0;padding:16px 20px 12px;position:absolute;right:0;top:0;z-index:10}.ai-chat-header:before{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);content:\"\";height:70px;left:0;mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent);pointer-events:none;position:absolute;right:0;top:0;z-index:-1}.ai-chat-header-content{align-items:center;display:flex;flex:1;gap:12px}.ai-chat-title{font-size:18px;font-weight:700;letter-spacing:-.02em}.ai-chat-title,.ai-chat-widget.dark .ai-chat-title{color:var(--header-text-color,var(--primary-color,#07f))}.ai-chat-close-button{align-items:center;background:rgba(0,0,0,.05);border:none;border-radius:50%;color:#6b7280;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;transition:all .2s ease;width:32px}.ai-chat-widget.dark .ai-chat-close-button{background:hsla(0,0%,100%,.08);color:#9ca3af}.ai-chat-close-button:hover{background:rgba(0,0,0,.08);transform:scale(1.05)}.ai-chat-widget.dark .ai-chat-close-button:hover{background:hsla(0,0%,100%,.12)}.ai-chat-close-button:active{transform:scale(.95)}.ai-chat-messages{-webkit-overflow-scrolling:touch;background:transparent;display:flex;flex:1;flex-direction:column;gap:12px;overflow-x:hidden;overflow-y:auto;padding:60px 20px 80px;position:relative;scroll-behavior:smooth}.ai-chat-messages::-webkit-scrollbar{width:4px}.ai-chat-messages::-webkit-scrollbar-track{background:transparent}.ai-chat-messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25)}.ai-chat-message{animation:messageSlideIn var(--duration-normal) var(--spring-bounce);display:flex;flex-direction:column;gap:4px}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.ai-chat-message-content{word-wrap:break-word;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.06),inset 0 1px 0 hsla(0,0%,100%,.1);font-size:15px;line-height:1.5;max-width:85%;padding:12px 16px}.ai-chat-message.user .ai-chat-message-content{background:linear-gradient(135deg,var(--bubble-user-color) 0,color-mix(in srgb,var(--bubble-user-color) 85%,#000) 100%);border-bottom-right-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.12),inset 0 1px 0 hsla(0,0%,100%,.2);color:var(--user-message-text,#fff);margin-left:auto}.ai-chat-message.assistant .ai-chat-message-content{background:hsla(0,0%,100%,.7);border:1px solid rgba(0,0,0,.05);border-bottom-left-radius:6px;color:var(--assistant-message-text,#1f2937)}.ai-chat-widget.dark .ai-chat-message.assistant .ai-chat-message-content{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.08);color:#f0f0f0}.ai-chat-typing{align-items:center;animation:messageSlideIn var(--duration-normal) var(--spring-bounce);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:hsla(0,0%,100%,.7);border:1px solid rgba(0,0,0,.05);border-radius:20px;border-bottom-left-radius:6px;display:flex;gap:5px;max-width:70px;padding:14px 18px}.ai-chat-widget.dark .ai-chat-typing{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.08)}.ai-chat-typing-dot{animation:typingPulse 1.4s ease-in-out infinite;background:linear-gradient(135deg,var(--primary-color) 0,color-mix(in srgb,var(--primary-color) 70%,#000) 100%);border-radius:50%;height:8px;width:8px}.ai-chat-typing-dot:nth-child(2){animation-delay:.15s}.ai-chat-typing-dot:nth-child(3){animation-delay:.3s}@keyframes typingPulse{0%,60%,to{opacity:.4;transform:translateY(0) scale(1)}30%{opacity:1;transform:translateY(-6px) scale(1.1)}}.ai-chat-input-container{background:transparent;bottom:0;left:0;padding:0 20px 20px;position:absolute;right:0;z-index:10}.ai-chat-input-container:before{background:var(--card-background,#fff);bottom:0;content:\"\";height:calc(100% - 24px);left:0;position:absolute;right:0;z-index:-1}.ai-chat-widget.dark .ai-chat-input-container:before{background:var(--card-background,#1a1a2e)}.ai-chat-input-wrapper{align-items:center;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:20px;box-shadow:0 1px 4px rgba(0,0,0,.04);display:flex;gap:0;padding:4px 4px 4px 16px;position:relative;z-index:5}.ai-chat-widget.dark .ai-chat-input-wrapper{background:#1a1f25;border-color:hsla(0,0%,100%,.15)}.ai-chat-input-wrapper:focus-within{border-color:var(--primary-color);box-shadow:inset 0 1px 3px rgba(0,0,0,.04),0 0 0 4px rgba(var(--primary-color-rgb,0,119,255),.15)}.ai-chat-input{background:transparent;border:none;color:var(--text-color);flex:1;font-family:inherit;font-size:14px;line-height:1.4;max-height:120px;min-height:20px;outline:none;padding:8px 0;resize:none}.ai-chat-input::placeholder{color:rgba(0,0,0,.4)}.ai-chat-widget.dark .ai-chat-input::placeholder{color:hsla(0,0%,100%,.4)}.ai-chat-send-button{align-items:center;background:linear-gradient(135deg,var(--send-button-background,var(--primary-color)) 0,color-mix(in srgb,var(--send-button-background,var(--primary-color)) 80%,#000) 100%);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.12);color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;padding:0;transition:all var(--duration-fast) var(--spring-bounce);width:32px}.ai-chat-send-button:hover:not(:disabled){box-shadow:0 6px 20px rgba(0,0,0,.2),inset 0 1px 0 hsla(0,0%,100%,.3);transform:scale(1.08)}.ai-chat-send-button:active:not(:disabled){transform:scale(.95)}.ai-chat-send-button:disabled{cursor:not-allowed;opacity:.4;transform:none}.ai-chat-tool-message{align-items:center;animation:toolPulse 2s ease-in-out infinite;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(16,185,129,.08));border:1px solid rgba(16,185,129,.2);border-radius:16px;display:inline-flex;gap:10px;padding:10px 16px}@keyframes toolPulse{0%,to{box-shadow:0 0 0 0 rgba(16,185,129,.2)}50%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}.tool-finished{align-items:center;animation:toolComplete .5s var(--spring-bounce);background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;color:#fff;display:inline-flex;height:28px;justify-content:center;position:relative;width:28px}@keyframes toolComplete{0%{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0deg)}}.tool-indicator{align-items:center;background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(59,130,246,.1));border-radius:50%;color:#3b82f6;display:inline-flex;height:24px;justify-content:center;position:relative;width:24px}.tool-indicator.started:after{animation:toolSpin .8s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:#3b82f6;content:\"\";inset:-2px;position:absolute}@keyframes toolSpin{to{transform:rotate(1turn)}}.ai-chat-welcome{animation:welcomeFadeIn var(--duration-slow) var(--spring-smooth);padding:40px 24px;text-align:center}@keyframes welcomeFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ai-chat-welcome-title{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--primary-color) 0,color-mix(in srgb,var(--primary-color) 70%,#000) 100%);-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:700;letter-spacing:-.03em;margin-bottom:8px}.ai-chat-welcome-text{color:var(--text-color);font-size:15px;line-height:1.5;opacity:.7}.ai-chat-suggested-question{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:hsla(0,0%,100%,.6);border:1px solid rgba(0,0,0,.06);border-radius:16px;color:var(--text-color);cursor:pointer;display:flex;font-size:14px;gap:10px;padding:12px 16px;text-align:left;transition:all var(--duration-fast) var(--spring-bounce);width:100%}.ai-chat-widget.dark .ai-chat-suggested-question{background:hsla(0,0%,100%,.08);border-color:hsla(0,0%,100%,.1)}.ai-chat-suggested-question:hover{background:rgba(var(--primary-color-rgb,0,119,255),.1);border-color:rgba(var(--primary-color-rgb,0,119,255),.3);transform:translateX(4px)}.ai-chat-suggested-question:active{transform:scale(.98)}.ai-chat-feedback-button{align-items:center;background:rgba(0,0,0,.04);border:none;border-radius:8px;cursor:pointer;display:flex;font-size:16px;gap:4px;padding:6px 10px;transition:all var(--duration-fast) var(--spring-bounce)}.ai-chat-feedback-button:hover:not(:disabled){background:rgba(0,0,0,.08);transform:scale(1.15)}.ai-chat-feedback-button:active:not(:disabled){transform:scale(.9)}.ai-chat-feedback-button.active{background:rgba(var(--primary-color-rgb,0,119,255),.15)}@media (max-width:480px){.ai-chat-window{animation:mobileSlideUp var(--duration-normal) var(--spring-smooth);border-radius:0!important;bottom:0!important;height:100%!important;left:0!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}@keyframes mobileSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.ai-chat-header{padding-top:max(16px,env(safe-area-inset-top))}.ai-chat-input-container{padding-bottom:max(20px,env(safe-area-inset-bottom))}}";
 styleInject(css_248z);
 
 // Icon components mapping
@@ -21880,10 +22275,13 @@ const iconComponents = {
     FiUsers: () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }), jsx("circle", { cx: "9", cy: "7", r: "4" }), jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }), jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] })),
     FiHeadphones: () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }), jsx("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })] })),
     FiCpu: () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", ry: "2" }), jsx("rect", { x: "9", y: "9", width: "6", height: "6" }), jsx("line", { x1: "9", y1: "1", x2: "9", y2: "4" }), jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4" }), jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23" }), jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23" }), jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9" }), jsx("line", { x1: "20", y1: "14", x2: "23", y2: "14" }), jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9" }), jsx("line", { x1: "1", y1: "14", x2: "4", y2: "14" })] })),
+    FiChevronDown: () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "6 9 12 15 18 9" }) })),
 };
 const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, position = 'bottom-right', theme: themeOverride, primaryColor, onOpen, onClose, onMessage, onError, }) => {
     const [isOpen, setIsOpen] = useState(false);
+    const [autoDetectedTheme, setAutoDetectedTheme] = useState('light');
     const widgetRef = useRef(null);
+    const containerRef = useRef(null);
     const { messages, isLoading, isTyping, error, config, sendMessage, submitFeedback, } = useChat({
         widgetId,
         apiKey,
@@ -21891,21 +22289,42 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
         onMessage,
         onError,
     });
+    // Auto-detect theme from background
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        // Initial detection
+        const detected = detectTheme(containerRef.current);
+        setAutoDetectedTheme(detected);
+        // Watch for theme changes on the page
+        const observer = createThemeObserver(containerRef.current, (newTheme) => {
+            setAutoDetectedTheme(newTheme);
+        });
+        // Also listen for system preference changes
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleMediaChange = () => {
+            if (containerRef.current) {
+                const detected = detectTheme(containerRef.current);
+                setAutoDetectedTheme(detected);
+            }
+        };
+        mediaQuery.addEventListener('change', handleMediaChange);
+        return () => {
+            observer.disconnect();
+            mediaQuery.removeEventListener('change', handleMediaChange);
+        };
+    }, [config]);
     // Debug logging
     useEffect(() => {
         console.log('[ChatWidget] Config loaded:', config ? 'YES' : 'NO');
         if (config) {
             console.log('[ChatWidget] Config details:', {
                 theme: config.appearance?.theme,
-                darkModeEnabled: config.appearance?.darkModeEnabled,
-                hasLightMode: !!config.appearance?.lightMode,
-                hasDarkMode: !!config.appearance?.darkMode,
+                accentColor: config.appearance?.primaryColor,
+                autoDetectedTheme,
             });
         }
-    }, [config]);
-    useEffect(() => {
-        console.log('[ChatWidget] isOpen changed:', isOpen);
-    }, [isOpen]);
+    }, [config, autoDetectedTheme]);
     // Handle auto-open
     useEffect(() => {
         if (config?.behavior.autoOpen) {
@@ -21918,26 +22337,26 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
         }
         return undefined;
     }, [config, onOpen]);
-    // Handle close on outside click
+    // Handle close on outside click - always enabled for better UX
     useEffect(() => {
-        if (!isOpen || !config?.appearance.closeOnOutsideClick)
+        if (!isOpen)
             return;
         const handleClickOutside = (event) => {
+            // Check if click is outside the widget container
             if (widgetRef.current && !widgetRef.current.contains(event.target)) {
-                console.log('[ChatWidget] Closing due to outside click');
                 setIsOpen(false);
                 onClose?.();
             }
         };
-        // Add slight delay to avoid immediate close on open
+        // Small delay to prevent immediate close on open
         const timer = setTimeout(() => {
             document.addEventListener('mousedown', handleClickOutside);
-        }, 100);
+        }, 150);
         return () => {
             clearTimeout(timer);
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [isOpen, config, onClose]);
+    }, [isOpen, onClose]);
     // Handle close on Escape key
     useEffect(() => {
         if (!isOpen || !config?.appearance.closeOnEscape)
@@ -21951,48 +22370,49 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
         document.addEventListener('keydown', handleEscapeKey);
         return () => document.removeEventListener('keydown', handleEscapeKey);
     }, [isOpen, config, onClose]);
-    // Determine theme
+    // Determine theme - simplified: always auto-detect unless explicitly overridden
     const appearanceConfig = config?.appearance;
-    const themeSetting = themeOverride || appearanceConfig?.theme || 'light';
-    const canUseDarkMode = appearanceConfig?.darkModeEnabled !== false;
-    // Only check system preference if dark mode is enabled
-    const systemPrefersDark = canUseDarkMode && typeof window !== "undefined"
-        ? window.matchMedia('(prefers-color-scheme: dark)').matches
-        : false;
-    const effectiveTheme = !canUseDarkMode
-        ? 'light' // Force light mode if dark mode is disabled
-        : themeSetting === 'auto'
-            ? (systemPrefersDark ? 'dark' : 'light')
-            : themeSetting === 'dark'
-                ? 'dark'
-                : 'light';
+    const themeSetting = themeOverride || appearanceConfig?.theme || 'auto';
+    // Use auto-detected theme, or explicit override
+    const effectiveTheme = themeSetting === 'auto'
+        ? autoDetectedTheme
+        : themeSetting === 'dark'
+            ? 'dark'
+            : 'light';
     // Determine position (config takes priority over prop)
     const effectivePosition = config?.appearance.position || position;
-    // Apply custom styles from appearance configuration
-    // Use the correct theme configuration (lightMode or darkMode)
-    const customStyles = appearanceConfig
+    // Get accent color from config or prop
+    const accentColor = primaryColor || appearanceConfig?.primaryColor || '#0077FF';
+    // Generate styles using simplified theme system
+    const simpleAppearance = {
+        accentColor,
+        size: appearanceConfig?.size || 'small',
+        welcomeTitle: appearanceConfig?.lightMode?.chat?.welcomeTitle,
+        welcomeMessage: appearanceConfig?.welcomeMessage || appearanceConfig?.lightMode?.chat?.welcomeMessage,
+        placeholder: appearanceConfig?.placeholder || appearanceConfig?.lightMode?.footer?.inputPlaceholder,
+        headerTitle: appearanceConfig?.lightMode?.header?.title,
+        buttonIcon: appearanceConfig?.buttonIcon || appearanceConfig?.lightMode?.button?.icon,
+    };
+    // Generate theme styles from accent color
+    const generatedStyles = generateThemeStyles(simpleAppearance, effectiveTheme);
+    // Also apply legacy styles for backward compatibility
+    const legacyStyles = appearanceConfig
         ? applyAppearanceStyles(appearanceConfig, effectiveTheme)
         : {};
-    // Override with prop values if provided
-    if (primaryColor) {
-        customStyles['--primary-color'] = primaryColor;
-    }
+    // Merge styles (generated takes priority for new simplified system)
+    const customStyles = {
+        ...legacyStyles,
+        ...generatedStyles,
+    };
     // Debug logging for theme and styles
     useEffect(() => {
         console.log('[ChatWidget] Theme info:', {
             effectiveTheme,
-            canUseDarkMode,
+            autoDetectedTheme,
             themeSetting,
-            systemPrefersDark,
-            hasCustomStyles: Object.keys(customStyles).length > 0,
-            buttonColor: customStyles['--button-color'],
-            buttonSize: customStyles['--button-size'],
-            cardBackground: customStyles['--card-background'],
-            cardOpacity: customStyles['--card-opacity'],
-            cardBorderRadius: customStyles['--card-border-radius'],
+            accentColor,
         });
-        console.log('[ChatWidget] All CSS variables:', customStyles);
-    }, [effectiveTheme, customStyles]);
+    }, [effectiveTheme, autoDetectedTheme, themeSetting, accentColor]);
     const handleToggle = () => {
         const newState = !isOpen;
         console.log('[ChatWidget] handleToggle called, setting isOpen to:', newState);
@@ -22013,16 +22433,25 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
         return null;
     }
     console.log('[ChatWidget] Rendering widget', { isOpen, hasConfig: !!config });
-    return (jsx("div", { className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxs("div", { ref: widgetRef, className: `ai-chat-widget-container ${effectivePosition}`, children: [isOpen && (jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })), !isOpen && (() => {
-                    // Get icon from theme config
-                    const themeConfig = effectiveTheme === 'dark'
-                        ? appearanceConfig?.darkMode
-                        : appearanceConfig?.lightMode;
-                    const buttonIcon = themeConfig?.button?.icon || 'FiMessageCircle';
-                    const buttonIconColor = themeConfig?.button?.iconColor || customStyles['--button-icon-color'] || '#ffffff';
-                    const IconComponent = iconComponents[buttonIcon] || iconComponents.FiMessageCircle;
-                    return (jsx("button", { className: "ai-chat-button", onClick: handleToggle, "aria-label": "Open chat", style: { color: buttonIconColor }, children: jsx("div", { className: "ai-chat-button-svg", children: jsx(IconComponent, {}) }) }));
-                })()] }) }));
+    // Get button icon based on state
+    const getButtonIcon = () => {
+        if (isOpen) {
+            return iconComponents.FiChevronDown;
+        }
+        const themeConfig = effectiveTheme === 'dark'
+            ? appearanceConfig?.darkMode
+            : appearanceConfig?.lightMode;
+        const buttonIcon = themeConfig?.button?.icon || 'FiMessageCircle';
+        return iconComponents[buttonIcon] || iconComponents.FiMessageCircle;
+    };
+    const buttonIconColor = (() => {
+        const themeConfig = effectiveTheme === 'dark'
+            ? appearanceConfig?.darkMode
+            : appearanceConfig?.lightMode;
+        return themeConfig?.button?.iconColor || customStyles['--button-icon-color'] || '#ffffff';
+    })();
+    const IconComponent = getButtonIcon();
+    return (jsx("div", { ref: containerRef, className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxs("div", { ref: widgetRef, className: `ai-chat-widget-container ${effectivePosition}`, children: [isOpen && (jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })), jsx("button", { className: `ai-chat-button ${isOpen ? 'is-open' : ''}`, onClick: handleToggle, "aria-label": isOpen ? "Minimize chat" : "Open chat", style: { color: buttonIconColor }, children: jsx("div", { className: "ai-chat-button-svg", children: jsx(IconComponent, {}) }) })] }) }));
 };
 
 export { ApiError, ChatWidget, useChat };