@courseecho/ai-widget-react 1.0.24 → 1.0.25

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

@@ -1,368 +0,0 @@
-/**
- * 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

@@ -1,14 +0,0 @@
-/**
- * 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";