@courseecho/ai-widget-react 1.0.23 → 1.0.24

package/dist/core/src/state-manager.js

@@ -0,0 +1,368 @@
+/**
+ * AI Widget SDK - Core Chat State Manager
+ * Manage chat messages, loading state, errors - framework-agnostic
+ */
+/**
+ * Core Chat State - manages messages and loading states
+ */
+export class ChatStateManager {
+    constructor(maxChatHistory = 100) {
+        this.messages = [];
+        this.maxChatHistory = 100;
+        this.isLoading = false;
+        this.error = null;
+        this.messageListeners = [];
+        this.loadingListeners = [];
+        this.errorListeners = [];
+        this.maxChatHistory = maxChatHistory;
+    }
+    /**
+     * Add a new message
+     */
+    addMessage(message) {
+        this.messages.push(message);
+        // Trim old messages if exceeding max history
+        if (this.messages.length > this.maxChatHistory) {
+            this.messages = this.messages.slice(-this.maxChatHistory);
+        }
+        this.notifyMessageListeners();
+    }
+    /**
+     * Get all messages
+     */
+    getMessages() {
+        return [...this.messages];
+    }
+    /**
+     * Clear all messages
+     */
+    clearMessages() {
+        this.messages = [];
+        this.error = null;
+        this.notifyMessageListeners();
+        this.notifyErrorListeners();
+    }
+    /**
+     * Set loading state
+     */
+    setLoading(isLoading) {
+        this.isLoading = isLoading;
+        this.notifyLoadingListeners();
+    }
+    /**
+     * Get loading state
+     */
+    isLoadingState() {
+        return this.isLoading;
+    }
+    /**
+     * Set error
+     */
+    setError(error) {
+        this.error = error;
+        this.notifyErrorListeners();
+    }
+    /**
+     * Get current error
+     */
+    getError() {
+        return this.error;
+    }
+    /**
+     * Get last message
+     */
+    getLastMessage() {
+        return this.messages[this.messages.length - 1];
+    }
+    /**
+     * Get message count
+     */
+    getMessageCount() {
+        return this.messages.length;
+    }
+    /**
+     * Subscribe to message changes
+     */
+    onMessagesChange(listener) {
+        this.messageListeners.push(listener);
+        return () => {
+            this.messageListeners = this.messageListeners.filter((l) => l !== listener);
+        };
+    }
+    /**
+     * Subscribe to loading changes
+     */
+    onLoadingChange(listener) {
+        this.loadingListeners.push(listener);
+        return () => {
+            this.loadingListeners = this.loadingListeners.filter((l) => l !== listener);
+        };
+    }
+    /**
+     * Subscribe to error changes
+     */
+    onErrorChange(listener) {
+        this.errorListeners.push(listener);
+        return () => {
+            this.errorListeners = this.errorListeners.filter((l) => l !== listener);
+        };
+    }
+    notifyMessageListeners() {
+        this.messageListeners.forEach((listener) => listener(this.getMessages()));
+    }
+    notifyLoadingListeners() {
+        this.loadingListeners.forEach((listener) => listener(this.isLoading));
+    }
+    notifyErrorListeners() {
+        this.errorListeners.forEach((listener) => listener(this.error));
+    }
+}
+/**
+ * Core Context State - manages page context
+ */
+export class ContextStateManager {
+    constructor(initialContext) {
+        this.contextHistory = [];
+        this.contextListeners = [];
+        this.context = { ...initialContext };
+        this.contextHistory.push({ ...initialContext });
+    }
+    /**
+     * Update entire context
+     */
+    setContext(context) {
+        this.context = { ...context };
+        this.contextHistory.push({ ...context });
+        this.notifyContextListeners();
+    }
+    /**
+     * Update single context property
+     */
+    updateProperty(key, value) {
+        this.context = {
+            ...this.context,
+            [key]: value,
+        };
+        this.contextHistory.push({ ...this.context });
+        this.notifyContextListeners();
+    }
+    /**
+     * Get current context
+     */
+    getContext() {
+        return { ...this.context };
+    }
+    /**
+     * Get context history
+     */
+    getHistory() {
+        return this.contextHistory.map((c) => ({ ...c }));
+    }
+    /**
+     * Get single context property
+     */
+    getProperty(key) {
+        return this.context[key];
+    }
+    /**
+     * Subscribe to context changes
+     */
+    onContextChange(listener) {
+        this.contextListeners.push(listener);
+        return () => {
+            this.contextListeners = this.contextListeners.filter((l) => l !== listener);
+        };
+    }
+    /**
+     * Serialize context
+     */
+    serialize() {
+        return JSON.stringify(this.context);
+    }
+    notifyContextListeners() {
+        this.contextListeners.forEach((listener) => listener(this.getContext()));
+    }
+}
+/**
+ * Chart Manager - manage charts caching and export
+ */
+export class ChartManager {
+    constructor() {
+        this.charts = new Map();
+    }
+    /**
+     * Cache a chart
+     */
+    cacheChart(id, chart) {
+        this.charts.set(id, { ...chart });
+    }
+    /**
+     * Get cached chart
+     */
+    getChart(id) {
+        const chart = this.charts.get(id);
+        return chart ? { ...chart } : undefined;
+    }
+    /**
+     * Get all cached charts
+     */
+    getAllCharts() {
+        return Array.from(this.charts.values()).map((c) => ({ ...c }));
+    }
+    /**
+     * Clear cache
+     */
+    clearCache() {
+        this.charts.clear();
+    }
+    /**
+     * Export charts to CSV
+     */
+    exportToCSV(filename = 'charts.csv') {
+        const charts = this.getAllCharts();
+        if (charts.length === 0) {
+            return '';
+        }
+        const headers = ['Chart Title', 'Chart Type', 'Labels', 'Data'];
+        const rows = [headers.join(',')];
+        charts.forEach((chart) => {
+            chart.datasets.forEach((dataset) => {
+                const row = [
+                    `"${chart.title}"`,
+                    chart.type,
+                    `"${chart.labels.join(';')}"`,
+                    `"${dataset.data.join(';')}"`,
+                ];
+                rows.push(row.join(','));
+            });
+        });
+        return rows.join('\n');
+    }
+    /**
+     * Export charts to JSON
+     */
+    exportToJSON() {
+        return JSON.stringify(this.getAllCharts(), null, 2);
+    }
+}
+/**
+ * Suggestion Manager - manage suggestions for chat queries
+ */
+export class SuggestionManager {
+    constructor(config) {
+        this.suggestions = [];
+        this.suggestionListeners = [];
+        this.config = config || {
+            enabled: true,
+            maxVisibleSuggestions: 5,
+            showOnFocus: true,
+            showOnClick: true,
+        };
+        // Initialize with default suggestions if provided
+        if (this.config.suggestions) {
+            this.suggestions = [...this.config.suggestions];
+        }
+    }
+    /**
+     * Get all suggestions
+     */
+    getSuggestions() {
+        return [...this.suggestions];
+    }
+    /**
+     * Filter suggestions based on query
+     */
+    filterSuggestions(query) {
+        if (!query.trim()) {
+            return this.suggestions.slice(0, this.config.maxVisibleSuggestions);
+        }
+        const lowerQuery = query.toLowerCase();
+        return this.suggestions
+            .filter((s) => s.text.toLowerCase().includes(lowerQuery) ||
+            s.category?.toLowerCase().includes(lowerQuery) ||
+            s.description?.toLowerCase().includes(lowerQuery))
+            .slice(0, this.config.maxVisibleSuggestions);
+    }
+    /**
+     * Get suggestions by category
+     */
+    getSuggestionsByCategory(category) {
+        return this.suggestions.filter((s) => s.category === category);
+    }
+    /**
+     * Add a suggestion
+     */
+    addSuggestion(suggestion) {
+        this.suggestions.push(suggestion);
+        this.notifySuggestionListeners();
+    }
+    /**
+     * Add multiple suggestions
+     */
+    addSuggestions(suggestions) {
+        this.suggestions.push(...suggestions);
+        this.notifySuggestionListeners();
+    }
+    /**
+     * Remove a suggestion by id
+     */
+    removeSuggestion(id) {
+        this.suggestions = this.suggestions.filter((s) => s.id !== id);
+        this.notifySuggestionListeners();
+    }
+    /**
+     * Clear all suggestions
+     */
+    clearSuggestions() {
+        this.suggestions = [];
+        this.notifySuggestionListeners();
+    }
+    /**
+     * Update suggestion
+     */
+    updateSuggestion(id, updates) {
+        const suggestion = this.suggestions.find((s) => s.id === id);
+        if (suggestion) {
+            Object.assign(suggestion, updates);
+            this.notifySuggestionListeners();
+        }
+    }
+    /**
+     * Check if suggestions are enabled
+     */
+    isEnabled() {
+        return this.config.enabled;
+    }
+    /**
+     * Toggle suggestions on/off
+     */
+    toggleEnabled() {
+        if (this.config) {
+            this.config.enabled = !this.config.enabled;
+        }
+    }
+    /**
+     * Subscribe to suggestion changes
+     */
+    onSuggestionsChange(listener) {
+        this.suggestionListeners.push(listener);
+        return () => {
+            this.suggestionListeners = this.suggestionListeners.filter((l) => l !== listener);
+        };
+    }
+    /**
+     * Get config
+     */
+    getConfig() {
+        return { ...this.config };
+    }
+    /**
+     * Update config
+     */
+    updateConfig(config) {
+        this.config = { ...this.config, ...config };
+    }
+    notifySuggestionListeners() {
+        this.suggestionListeners.forEach((listener) => listener(this.getSuggestions()));
+    }
+}

package/dist/core/src/widget-css.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Canonical widget CSS — single source of truth for all framework packages.
+ *
+ * Isolation strategy:
+ *   - React  : injected into a Shadow DOM via ShadowWrapper (createPortal).
+ *              :host { all: initial } resets inherited properties at the boundary.
+ *   - jQuery : injected into attachShadow() root. Same :host reset applies.
+ *   - Angular: ViewEncapsulation.ShadowDom — Angular handles the shadow root.
+ *
+ * NOTE: `@import` for Google Fonts does NOT work inside shadow-DOM <style> tags.
+ * Each package is responsible for loading the Inter font into document <head>
+ * separately (React: ensureFont(), jQuery: injectFontLink()).
+ */
+export declare const WIDGET_CSS = "\n/* \u2500\u2500 Shadow-DOM host isolation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host {\n  all: initial !important;\n  display: block !important;\n}\n\n/* Scoped box-model reset \u2014 only touches widget elements, not all of shadow DOM */\n.aiwg-root *, .aiwg-root *::before, .aiwg-root *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n/* \u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-root {\n  --aiwg-primary:      #6366f1;\n  --aiwg-primary-dark: #8b5cf6;\n  --aiwg-fg-color:     #ffffff;\n  --aiwg-bg-color:     #ffffff;\n  --aiwg-chat-bg:      #f1f5f9;\n\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a2e;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: 16px;\n  background: var(--aiwg-bg-color);\n  position: fixed !important;\n  bottom: 24px;\n  right: 24px;\n  width: 380px !important;\n  max-width: calc(100vw - 48px) !important;\n  z-index: 99999;\n  transition: height 0.25s ease;\n  box-shadow: 0 24px 64px rgba(0,0,0,0.18);\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-header {\n  background: linear-gradient(135deg, var(--aiwg-primary) 0%, var(--aiwg-primary-dark) 100%);\n  padding: 16px 20px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  position: relative;\n  overflow: hidden;\n}\n.aiwg-header::before {\n  content: '';\n  position: absolute;\n  width: 140px; height: 140px;\n  background: rgba(255,255,255,0.08);\n  border-radius: 50%;\n  top: -50px; right: -30px;\n}\n.aiwg-avatar {\n  width: 40px; height: 40px;\n  background: rgba(255,255,255,0.25);\n  border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 18px;\n  flex-shrink: 0;\n  border: 2px solid rgba(255,255,255,0.4);\n}\n.aiwg-header-info { flex: 1; }\n.aiwg-title { color: #fff; font-weight: 600; font-size: 15px; }\n.aiwg-subtitle {\n  color: rgba(255,255,255,0.75);\n  font-size: 12px;\n  display: flex; align-items: center; gap: 5px;\n}\n.aiwg-online-dot {\n  width: 7px; height: 7px;\n  background: #4ade80;\n  border-radius: 50%;\n  display: inline-block;\n  animation: aiwg-pulse 2s ease-in-out infinite;\n}\n@keyframes aiwg-pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50%       { opacity: 0.6; transform: scale(0.85); }\n}\n.aiwg-minimize-btn {\n  width: 36px; height: 36px;\n  background: rgba(255,255,255,0.18);\n  border: 1.5px solid rgba(255,255,255,0.3);\n  border-radius: 50%;\n  color: #fff; cursor: pointer;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 18px; line-height: 1;\n  transition: background 0.15s, transform 0.15s;\n  flex-shrink: 0;\n  position: relative; z-index: 2;\n}\n.aiwg-minimize-btn * { cursor: pointer !important; pointer-events: none; }\n.aiwg-minimize-btn:hover { background: rgba(255,255,255,0.32); transform: scale(1.08); }\n\n/* \u2500\u2500 Messages area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px 16px 8px;\n  scroll-behavior: smooth;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.aiwg-messages::-webkit-scrollbar { width: 4px; }\n.aiwg-messages::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }\n\n/* \u2500\u2500 Welcome card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-welcome {\n  text-align: center;\n  padding: 24px 16px;\n  display: flex; flex-direction: column; align-items: center; gap: 8px;\n}\n.aiwg-welcome-icon { font-size: 36px; margin-bottom: 4px; }\n.aiwg-welcome h4 { font-size: 15px; font-weight: 600; color: #1a1a2e; }\n.aiwg-welcome p  { font-size: 13px; color: #64748b; }\n\n/* \u2500\u2500 Message bubbles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-msg {\n  display: flex;\n  gap: 8px;\n  align-items: flex-end;\n  animation: aiwg-fade-up 0.2s ease both;\n}\n@keyframes aiwg-fade-up {\n  from { opacity: 0; transform: translateY(8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n.aiwg-msg--user { flex-direction: row-reverse; }\n.aiwg-msg-avatar {\n  width: 28px; height: 28px; border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 13px; flex-shrink: 0;\n  margin-bottom: 2px;\n}\n.aiwg-msg--bot  .aiwg-msg-avatar { background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark)); color: var(--aiwg-fg-color); }\n.aiwg-msg--user .aiwg-msg-avatar { background: #e2e8f0; color: #64748b; }\n.aiwg-msg-body { max-width: 78%; }\n.aiwg-msg-bubble {\n  padding: 10px 14px;\n  border-radius: 18px;\n  font-size: 14px;\n  line-height: 1.55;\n  word-break: break-word;\n}\n.aiwg-msg--bot  .aiwg-msg-bubble { background: var(--aiwg-chat-bg); color: #1a1a2e; border-bottom-left-radius: 4px; }\n.aiwg-msg--user .aiwg-msg-bubble { background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark)); color: var(--aiwg-fg-color); border-bottom-right-radius: 4px; }\n.aiwg-msg-time { font-size: 10px; color: #94a3b8; margin-top: 4px; text-align: right; padding: 0 4px; }\n.aiwg-msg--bot .aiwg-msg-time { text-align: left; }\n\n/* \u2500\u2500 Typing indicator \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-typing { padding: 10px 14px; }\n.aiwg-typing-dots { display: flex; gap: 4px; align-items: center; }\n.aiwg-typing-dots span {\n  width: 7px; height: 7px;\n  background: #94a3b8; border-radius: 50%;\n  animation: aiwg-bounce 1.2s ease-in-out infinite;\n}\n.aiwg-typing-dots span:nth-child(2) { animation-delay: 0.2s; }\n.aiwg-typing-dots span:nth-child(3) { animation-delay: 0.4s; }\n@keyframes aiwg-bounce {\n  0%, 80%, 100% { transform: translateY(0); }\n  40%           { transform: translateY(-6px); }\n}\n\n/* \u2500\u2500 Quick-reply chips \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-chip-row {\n  padding: 6px 16px 2px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.aiwg-chip {\n  background: #f1f5f9;\n  border: 1px solid #e2e8f0;\n  border-radius: 99px;\n  padding: 4px 12px;\n  font-size: 12px;\n  color: #4f46e5;\n  cursor: pointer;\n  transition: all 0.15s;\n  white-space: nowrap;\n  font-weight: 500;\n}\n.aiwg-chip:hover { background: #ede9fe; border-color: #a5b4fc; }\n.aiwg-chip-shimmer {\n  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n  background-size: 200% 100%;\n  border: 1px solid transparent;\n  border-radius: 99px;\n  padding: 4px 34px;\n  animation: aiwg-shimmer 1.4s ease-in-out infinite;\n  cursor: default;\n  pointer-events: none;\n}\n.aiwg-chip-ai-badge {\n  display: inline-block;\n  font-size: 9px; font-weight: 700;\n  background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark));\n  color: #fff;\n  padding: 1px 5px;\n  border-radius: 99px;\n  margin-left: 5px;\n  vertical-align: middle;\n  letter-spacing: 0.04em;\n}\n@keyframes aiwg-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* \u2500\u2500 Input area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-input-area {\n  padding: 12px 16px 16px;\n  flex-shrink: 0;\n  background: #fff;\n  border-top: 1px solid #f1f5f9;\n  position: relative;\n}\n.aiwg-input-row { display: flex; gap: 8px; align-items: flex-end; }\n.aiwg-input {\n  flex: 1;\n  border: 1.5px solid #e2e8f0;\n  border-radius: 12px;\n  padding: 10px 14px;\n  font-size: 14px;\n  font-family: inherit;\n  outline: none;\n  resize: none;\n  background: #f8fafc;\n  color: #1a1a2e;\n  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;\n  line-height: 1.4;\n  max-height: 120px;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.aiwg-input::-webkit-scrollbar { display: none; }\n.aiwg-input::placeholder { color: #94a3b8; }\n.aiwg-input:focus {\n  border-color: var(--aiwg-primary-dark);\n  background: #fff;\n  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);\n}\n.aiwg-send-btn {\n  width: 42px; height: 42px;\n  background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark));\n  border: none; border-radius: 12px;\n  color: var(--aiwg-fg-color); cursor: pointer;\n  display: flex; align-items: center; justify-content: center;\n  flex-shrink: 0;\n  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;\n  box-shadow: 0 4px 12px rgba(99,102,241,0.35);\n}\n.aiwg-send-btn svg { width: 18px; height: 18px; }\n.aiwg-send-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.4); }\n.aiwg-send-btn:active { transform: translateY(0); }\n.aiwg-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }\n\n/* \u2500\u2500 Autocomplete suggestions dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-suggestions {\n  position: absolute;\n  bottom: calc(100% + 4px);\n  left: 16px; right: 16px;\n  background: #fff;\n  border: 1px solid #e2e8f0;\n  border-radius: 12px;\n  box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n  overflow: hidden;\n  z-index: 100;\n  animation: aiwg-fade-up 0.15s ease both;\n}\n.aiwg-suggestions-header {\n  padding: 8px 14px 4px;\n  font-size: 11px; font-weight: 600;\n  color: #94a3b8;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  border-bottom: 1px solid #f1f5f9;\n}\n.aiwg-suggestion-item {\n  display: flex; align-items: center; gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  transition: background 0.1s;\n  border-bottom: 1px solid #f8fafc;\n}\n.aiwg-suggestion-item:last-child { border-bottom: none; }\n.aiwg-suggestion-item:hover,\n.aiwg-suggestion-item.aiwg-active { background: #f5f3ff; }\n.aiwg-suggestion-icon  { font-size: 16px; flex-shrink: 0; }\n.aiwg-suggestion-main  { flex: 1; min-width: 0; }\n.aiwg-suggestion-text  { font-size: 13px; font-weight: 500; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.aiwg-suggestion-text mark { background: none; color: #6366f1; font-weight: 600; }\n.aiwg-suggestion-desc  { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.aiwg-suggestion-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: #ede9fe; color: #6366f1; flex-shrink: 0; }\n.aiwg-kbd-hint {\n  padding: 6px 14px;\n  font-size: 11px; color: #cbd5e1; background: #f8fafc;\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n.aiwg-kbd-hint kbd { font-family: inherit; background: #e2e8f0; border-radius: 4px; padding: 1px 5px; font-size: 10px; color: #64748b; }\n\n/* \u2500\u2500 Error toast \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-error {\n  margin: 0 16px 8px;\n  padding: 8px 12px;\n  background: #fef2f2;\n  border: 1px solid #fecaca;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #dc2626;\n}\n\n/* \u2500\u2500 Minimized state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-root.aiwg-minimized .aiwg-messages,\n.aiwg-root.aiwg-minimized .aiwg-chip-row,\n.aiwg-root.aiwg-minimized .aiwg-error,\n.aiwg-root.aiwg-minimized .aiwg-input-area,\n.aiwg-root.aiwg-minimized .aiwg-powered   { display: none !important; }\n.aiwg-root.aiwg-minimized .aiwg-minimize-btn { display: none !important; }\n.aiwg-root.aiwg-minimized { cursor: pointer; box-shadow: 0 8px 32px rgba(0,0,0,0.28); }\n.aiwg-root.aiwg-minimized .aiwg-header   { cursor: pointer !important; }\n\n/* \u2500\u2500 Powered-by footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-powered {\n  text-align: center;\n  padding: 6px 16px 10px;\n  font-size: 11px; color: #94a3b8;\n  flex-shrink: 0;\n  border-top: 1px solid #f1f5f9;\n  background: #fff;\n}\n.aiwg-powered a { color: #6366f1; text-decoration: none; font-weight: 500; }\n.aiwg-powered a:hover { text-decoration: underline; }\n\n/* \u2500\u2500 Markdown rendering \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-msg-bubble strong { font-weight: 600; }\n.aiwg-msg-bubble em     { font-style: italic; }\n.aiwg-msg-bubble code   { background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 4px; font-family: 'Fira Code','Consolas',monospace; font-size: 0.9em; }\n.aiwg-msg--user .aiwg-msg-bubble code { background: rgba(255,255,255,0.2); }\n.aiwg-msg-bubble ol, .aiwg-msg-bubble ul { padding-left: 18px; margin: 6px 0; display: flex; flex-direction: column; gap: 3px; }\n.aiwg-msg-bubble ol  { list-style: decimal; }\n.aiwg-msg-bubble ul  { list-style: disc; }\n.aiwg-msg-bubble li  { line-height: 1.5; }\n.aiwg-msg-bubble h3, .aiwg-msg-bubble h4 { font-weight: 600; margin: 8px 0 4px; }\n.aiwg-msg-bubble p   { margin: 2px 0; }\n\n/* \u2500\u2500 Dark theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-root.aiwg-dark { background: #0f172a; color: #e2e8f0; }\n.aiwg-dark .aiwg-msg--bot .aiwg-msg-bubble { background: #1e293b; color: #e2e8f0; }\n.aiwg-dark .aiwg-input-area { background: #0f172a; border-top-color: #1e293b; }\n.aiwg-dark .aiwg-input { background: #1e293b; border-color: #334155; color: #e2e8f0; }\n.aiwg-dark .aiwg-input:focus { border-color: #8b5cf6; background: #1e293b; box-shadow: 0 0 0 3px rgba(139,92,246,0.2); }\n.aiwg-dark .aiwg-suggestions { background: #1e293b; border-color: #334155; }\n.aiwg-dark .aiwg-suggestions-header { color: #64748b; border-bottom-color: #334155; }\n.aiwg-dark .aiwg-suggestion-item { border-bottom-color: #0f172a; }\n.aiwg-dark .aiwg-suggestion-item:hover,\n.aiwg-dark .aiwg-suggestion-item.aiwg-active { background: #2d1b69; }\n.aiwg-dark .aiwg-suggestion-text { color: #e2e8f0; }\n.aiwg-dark .aiwg-chip { background: #1e293b; border-color: #334155; }\n.aiwg-dark .aiwg-chip:hover { background: #2d1b69; }\n.aiwg-dark .aiwg-chip-shimmer { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; }\n.aiwg-dark .aiwg-kbd-hint { background: #1e293b; }\n.aiwg-dark .aiwg-welcome h4 { color: #e2e8f0; }\n.aiwg-dark .aiwg-powered { background: #0f172a; border-top-color: #1e293b; }\n";