@courseecho/ai-core-sdk 1.0.25 → 1.0.27

package/dist/communication-service.d.ts

@@ -2,12 +2,35 @@
  * AI Widget SDK - Core Communication Service
  * Handle HTTP requests to backend API
  */
-import { AiQueryRequest, AiQueryResponse } from './models';
+import { AiQueryRequest, AiQueryResponse, QuotaInfo } from './models';
 export declare class AiCommunicationService {
     private apiEndpoint;
     private apiKey?;
     private jwtToken?;
-    constructor(apiEndpoint: string, apiKey?: string);
+    private lastQuotaInfo;
+    /** Unique identifier for this widget session — sent as X-Session-Id header */
+    private readonly sessionId;
+    /** Lightweight browser fingerprint — sent as X-Client-Fingerprint header */
+    private readonly clientFingerprint;
+    /** Timestamp of the last outgoing AI query (ms) */
+    private lastRequestAt;
+    /** Minimum ms between requests (default 1 500 — human typing speed floor) */
+    private minRequestIntervalMs;
+    constructor(apiEndpoint: string, apiKey?: string, minRequestIntervalMs?: number);
+    /** Override the minimum request interval at runtime. */
+    setMinRequestInterval(ms: number): void;
+    /**
+     * Generate a random session identifier (UUID v4-like) that persists for the
+     * lifetime of the communication-service instance (= one widget mount).
+     */
+    private static generateSessionId;
+    /**
+     * Build a stable, non-PII browser fingerprint string.
+     * This is NOT a tracking fingerprint — it only helps the backend distinguish
+     * a scripted headless browser from a real user session.
+     * Encoded as Base64 to avoid special-character issues in headers.
+     */
+    private static generateFingerprint;
     /**
      * Set JWT token for authentication
      */
@@ -24,6 +47,22 @@ export declare class AiCommunicationService {
      * Send query to backend API
      */
     sendQuery(request: AiQueryRequest): Promise<AiQueryResponse>;
+    /**
+     * Returns the last quota info extracted from a 429 response, or null.
+     */
+    getLastQuotaInfo(): QuotaInfo | null;
+    /**
+     * Stream an AI response word-by-word as an async generator.
+     *
+     * Internally fetches the complete response from the backend and then
+     * reveals it one word at a time with a configurable delay, giving a
+     * natural typewriter feel without requiring SSE support from the server.
+     *
+     * @param request   - The same AiQueryRequest used with sendQuery()
+     * @param wordDelayMs - Delay between each word in ms (default: 30)
+     * @yields  string  - One word (or punctuation token) at a time
+     */
+    sendQueryStream(request: AiQueryRequest, wordDelayMs?: number): AsyncGenerator<string, AiQueryResponse, undefined>;
     /**
      * Exchange an API key for a short-lived JWT via POST /api/auth/token.
      * Returns the JWT string on success; throws ApiError on failure.

package/dist/communication-service.js

@@ -15,12 +15,66 @@ async function safeJson(res) {
     }
 }
 export class AiCommunicationService {
-    constructor(apiEndpoint, apiKey) {
+    constructor(apiEndpoint, apiKey, minRequestIntervalMs = 1500) {
+        this.lastQuotaInfo = null;
+        /** Timestamp of the last outgoing AI query (ms) */
+        this.lastRequestAt = 0;
         if (!apiEndpoint) {
             throw new Error('apiEndpoint is required');
         }
-        this.apiEndpoint = apiEndpoint.replace(/\/$/, ''); // Remove trailing slash
+        this.apiEndpoint = apiEndpoint.replace(/\/$/, '');
         this.apiKey = apiKey;
+        this.minRequestIntervalMs = minRequestIntervalMs;
+        this.sessionId = AiCommunicationService.generateSessionId();
+        this.clientFingerprint = AiCommunicationService.generateFingerprint();
+    }
+    /** Override the minimum request interval at runtime. */
+    setMinRequestInterval(ms) {
+        this.minRequestIntervalMs = ms;
+    }
+    // ── Session / fingerprint helpers ─────────────────────────────────────
+    /**
+     * Generate a random session identifier (UUID v4-like) that persists for the
+     * lifetime of the communication-service instance (= one widget mount).
+     */
+    static generateSessionId() {
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            return crypto.randomUUID();
+        }
+        // Fallback for environments where crypto.randomUUID is missing
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            const r = (Math.random() * 16) | 0;
+            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+        });
+    }
+    /**
+     * Build a stable, non-PII browser fingerprint string.
+     * This is NOT a tracking fingerprint — it only helps the backend distinguish
+     * a scripted headless browser from a real user session.
+     * Encoded as Base64 to avoid special-character issues in headers.
+     */
+    static generateFingerprint() {
+        try {
+            const parts = [];
+            if (typeof navigator !== 'undefined') {
+                parts.push(navigator.userAgent || '');
+                parts.push(navigator.language || '');
+                parts.push(String(navigator.hardwareConcurrency ?? ''));
+            }
+            if (typeof screen !== 'undefined') {
+                parts.push(`${screen.width}x${screen.height}`);
+                parts.push(String(screen.colorDepth ?? ''));
+            }
+            if (typeof window !== 'undefined') {
+                parts.push(Intl.DateTimeFormat().resolvedOptions().timeZone || '');
+            }
+            const raw = parts.join('|');
+            // btoa is available in browsers; fall back to plain string in Node/test envs
+            return typeof btoa !== 'undefined' ? btoa(raw).slice(0, 64) : raw.slice(0, 64);
+        }
+        catch {
+            return 'unknown';
+        }
     }
     /**
      * Set JWT token for authentication
@@ -47,8 +101,21 @@ export class AiCommunicationService {
         if (!this.jwtToken && !this.apiKey) {
             throw new Error('Authentication required: Set JWT token or API key. Call setJwtToken() first.');
         }
+        // ── Client-side rate guard ──────────────────────────────────────────
+        // Reject requests that arrive faster than a human could realistically type
+        // (after reading the previous AI response).  This immediately drops any
+        // scripted flood at the SDK layer before it ever reaches the network.
+        if (this.minRequestIntervalMs > 0) {
+            const elapsed = Date.now() - this.lastRequestAt;
+            if (this.lastRequestAt > 0 && elapsed < this.minRequestIntervalMs) {
+                throw new ApiError(`Please wait ${((this.minRequestIntervalMs - elapsed) / 1000).toFixed(1)} seconds before sending another message.`, 429);
+            }
+        }
+        this.lastRequestAt = Date.now();
         const headers = {
             'Content-Type': 'application/json',
+            'X-Session-Id': this.sessionId,
+            'X-Client-Fingerprint': this.clientFingerprint,
         };
         if (this.jwtToken) {
             headers['Authorization'] = `Bearer ${this.jwtToken}`;
@@ -64,6 +131,17 @@ export class AiCommunicationService {
             });
             if (!response.ok) {
                 const errorData = await safeJson(response);
+                // Parse quota headers from 429 responses
+                if (response.status === 429) {
+                    const used = parseInt(response.headers.get('X-Daily-Used') || response.headers.get('x-daily-used') || '0', 10);
+                    const limit = parseInt(response.headers.get('X-Daily-Limit') || response.headers.get('x-daily-limit') || '0', 10);
+                    const resetAt = response.headers.get('X-Rate-Limit-Reset') || response.headers.get('x-rate-limit-reset');
+                    this.lastQuotaInfo = {
+                        used: isNaN(used) ? (errorData?.queriesUsedToday ?? 0) : used,
+                        limit: isNaN(limit) ? (errorData?.dailyLimit ?? 0) : limit,
+                        resetAt: resetAt ? new Date(resetAt) : undefined,
+                    };
+                }
                 throw new ApiError(errorData?.message || `HTTP ${response.status}`, response.status, errorData);
             }
             const data = (await safeJson(response));
@@ -80,6 +158,40 @@ export class AiCommunicationService {
             throw new ApiError(`Failed to send query: ${String(error)}`, 500);
         }
     }
+    /**
+     * Returns the last quota info extracted from a 429 response, or null.
+     */
+    getLastQuotaInfo() {
+        return this.lastQuotaInfo;
+    }
+    /**
+     * Stream an AI response word-by-word as an async generator.
+     *
+     * Internally fetches the complete response from the backend and then
+     * reveals it one word at a time with a configurable delay, giving a
+     * natural typewriter feel without requiring SSE support from the server.
+     *
+     * @param request   - The same AiQueryRequest used with sendQuery()
+     * @param wordDelayMs - Delay between each word in ms (default: 30)
+     * @yields  string  - One word (or punctuation token) at a time
+     */
+    async *sendQueryStream(request, wordDelayMs = 30) {
+        // Fetch the full response first
+        const data = await this.sendQuery(request);
+        // Stream the response text word-by-word
+        const words = data.response.split(/(\s+)/);
+        for (let i = 0; i < words.length; i++) {
+            yield words[i];
+            // Tiny pause every word; slightly longer after sentence-ending punctuation.
+            const delay = /[.!?]$/.test(words[i].trimEnd()) && wordDelayMs > 0
+                ? wordDelayMs * 4
+                : wordDelayMs;
+            if (delay > 0) {
+                await new Promise((r) => setTimeout(r, delay));
+            }
+        }
+        return data;
+    }
     /**
      * Exchange an API key for a short-lived JWT via POST /api/auth/token.
      * Returns the JWT string on success; throws ApiError on failure.

package/dist/models.d.ts

@@ -48,6 +48,78 @@ export interface AiContext {
     userId?: string;
     customData?: Record<string, any>;
 }
+/**
+ * Controls the word-by-word typewriter streaming effect for AI responses.
+ */
+export interface StreamingConfig {
+    /** Enable typewriter reveal effect. Default: true */
+    enabled?: boolean;
+    /** Delay in ms between each word. Default: 30 */
+    wordDelayMs?: number;
+    /** Show blinking cursor while streaming. Default: true */
+    showCursor?: boolean;
+}
+/** A single field in the offline contact form */
+export interface OfflineFormField {
+    name: string;
+    label: string;
+    type: 'text' | 'email' | 'tel' | 'textarea' | 'select';
+    placeholder?: string;
+    required?: boolean;
+    /** Only for type='select' */
+    options?: string[];
+}
+/**
+ * Configuration for what users see when their daily AI query quota is exhausted.
+ * Set this on AiContextConfig.limitExpiredConfig.
+ */
+export interface LimitExpiredConfig {
+    /**
+     * 'soft' (default) — show a banner warning; user can still type but gets no AI suggestions.
+     * 'hard' — hide input completely; show only offline form / booking.
+     */
+    mode?: 'soft' | 'hard';
+    /** Title shown in the limit-exceeded banner. Default: 'Daily limit reached' */
+    bannerTitle?: string;
+    /** Body text in the banner. Default: 'You've used all your AI queries for today.' */
+    bannerMessage?: string;
+    /** Label for the "Go Offline" / "Leave a message" toggle button. Default: 'Leave a message' */
+    offlineButtonLabel?: string;
+    /** URL to an upgrade / pricing page. If set, shows an upgrade CTA button. */
+    upgradeUrl?: string;
+    /** Label for the upgrade button. Default: 'Upgrade' */
+    upgradeLabel?: string;
+    /** Offline enquiry form configuration */
+    offlineForm?: {
+        title?: string;
+        subtitle?: string;
+        fields?: OfflineFormField[];
+        submitLabel?: string;
+        successTitle?: string;
+        successMessage?: string;
+        /** POST endpoint that receives { name, email, message, extra } as JSON */
+        submitEndpoint?: string;
+        /** Custom async submit handler — overrides submitEndpoint */
+        onSubmit?: (data: Record<string, string>) => Promise<void>;
+    };
+    /** Booking / calendar configuration */
+    booking?: {
+        title?: string;
+        description?: string;
+        buttonLabel?: string;
+        /** Calendly, Cal.com, or any bookings URL */
+        calendarUrl?: string;
+        /** true = open in a new browser tab, false = embed inline (default: true) */
+        openInNewTab?: boolean;
+        /** Optional custom click handler */
+        onBookingClick?: () => void;
+    };
+    /**
+     * Which tab to show first when the offline panel opens.
+     * 'form' | 'booking'. Default: 'form' if offlineForm defined, else 'booking'.
+     */
+    defaultOfflineTab?: 'form' | 'booking';
+}
 export interface AiContextConfig {
     context: AiContext;
     apiEndpoint?: string;
@@ -58,6 +130,35 @@ export interface AiContextConfig {
     enableCharts?: boolean;
     enableExport?: boolean;
     suggestionConfig?: SuggestionConfig;
+    /**
+     * Typewriter streaming effect for AI responses.
+     * Defaults to enabled with 30 ms word delay.
+     */
+    streamingConfig?: StreamingConfig;
+    /**
+     * Configuration for the limit-expired softwall / offline panel.
+     * If not provided a sensible default banner is shown.
+     */
+    limitExpiredConfig?: LimitExpiredConfig;
+    /**
+     * Show a live X/Y query usage badge in the widget header.
+     * Default: false
+     */
+    showUsageCounter?: boolean;
+    /**
+     * Client-side abuse prevention settings.
+     * These defend against scripted quota-exhaustion attacks on behalf of your
+     * paying customer — e.g. a competitor visiting the site and rapid-firing
+     * requests to drain the daily limit.
+     */
+    abuseProtection?: {
+        /**
+         * Minimum milliseconds that must elapse between consecutive AI query
+         * submissions.  Prevents sub-human-speed scripted requests.
+         * Default: 1500 ms.  Set 0 to disable.
+         */
+        minRequestIntervalMs?: number;
+    };
 }
 export interface AiQueryRequest {
     userQuery: string;
@@ -73,6 +174,16 @@ export interface AiQueryResponse {
     tokensUsed: number;
     cost: number;
     timestamp: Date;
+    /** Number of AI queries consumed today (may be sent by backend) */
+    queriesUsedToday?: number;
+    /** Daily query limit for this API key */
+    dailyLimit?: number;
+}
+/** Quota info extracted from 429 response headers or body */
+export interface QuotaInfo {
+    used: number;
+    limit: number;
+    resetAt?: Date;
 }
 export interface AiErrorResponse {
     error: string;

package/dist/sdk.d.ts

@@ -40,6 +40,8 @@ export declare class AiWidgetSDK {
      * Set JWT token for authentication
      */
     setJwtToken(token: string): void;
+    /** Get the currently stored JWT token (if any). */
+    getJwtToken(): string | undefined;
     /**
      * Send a query to the AI backend
      */

package/dist/sdk.js

@@ -111,6 +111,10 @@ export class AiWidgetSDK {
     setJwtToken(token) {
         this.communicationService.setJwtToken(token);
     }
+    /** Get the currently stored JWT token (if any). */
+    getJwtToken() {
+        return this.communicationService.getJwtToken();
+    }
     /**
      * Send a query to the AI backend
      */

package/dist/widget-css.d.ts

@@ -11,4 +11,4 @@
  * 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";
+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\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   STREAMING  \u2014  Typewriter / word-reveal effect\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* Blinking text cursor shown while AI response is streaming */\n.aiwg-stream-cursor {\n  display: inline-block;\n  width: 2px;\n  height: 1em;\n  background: #6366f1;\n  margin-left: 2px;\n  vertical-align: text-bottom;\n  border-radius: 1px;\n  animation: aiwg-cursor-blink 0.65s step-end infinite;\n}\n@keyframes aiwg-cursor-blink {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: 0; }\n}\n\n/* Streaming bubble gets a subtle shimmer border while words are appearing */\n.aiwg-msg-bubble--streaming {\n  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;\n  border: 1.5px solid #e2e8f0 !important;\n  position: relative;\n  overflow: hidden;\n}\n.aiwg-msg-bubble--streaming::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(90deg, transparent 0%, rgba(99,102,241,0.06) 50%, transparent 100%);\n  background-size: 200% 100%;\n  animation: aiwg-bubble-shimmer 1.4s ease infinite;\n  pointer-events: none;\n}\n@keyframes aiwg-bubble-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   USAGE / QUOTA  \u2014  Header badge + progress bar\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* 3-px progress bar immediately under the header */\n.aiwg-usage-bar {\n  height: 3px;\n  background: rgba(255,255,255,0.18);\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.aiwg-usage-bar-fill {\n  height: 100%;\n  border-radius: 0 2px 2px 0;\n  transition: width 0.5s cubic-bezier(0.4,0,0.2,1), background 0.5s ease;\n}\n.aiwg-usage-bar-fill--ok        { background: linear-gradient(90deg, #4ade80, #22c55e); }\n.aiwg-usage-bar-fill--warn      { background: linear-gradient(90deg, #fbbf24, #f59e0b); }\n.aiwg-usage-bar-fill--exhausted { background: linear-gradient(90deg, #f87171, #ef4444); }\n\n/* Compact X/Y badge in header */\n.aiwg-quota-badge {\n  background: rgba(255,255,255,0.15);\n  border: 1px solid rgba(255,255,255,0.25);\n  border-radius: 99px;\n  padding: 2px 8px;\n  font-size: 10px;\n  font-weight: 600;\n  color: rgba(255,255,255,0.9);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.aiwg-quota-badge--warn       { background: rgba(251,191,36,0.2); border-color: rgba(251,191,36,0.4); color: #fde68a; }\n.aiwg-quota-badge--exhausted  { background: rgba(239,68,68,0.2);  border-color: rgba(239,68,68,0.4);  color: #fca5a5; }\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   LIMIT EXPIRED  \u2014  Softwall banner\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.aiwg-limit-banner {\n  margin: 8px 12px 0;\n  padding: 10px 14px;\n  background: linear-gradient(135deg, #fefce8, #fef3c7);\n  border: 1px solid #fde68a;\n  border-radius: 10px;\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  flex-shrink: 0;\n  animation: aiwg-fade-up 0.3s ease both;\n}\n.aiwg-limit-banner-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; line-height: 1; }\n.aiwg-limit-banner-body { flex: 1; min-width: 0; }\n.aiwg-limit-banner-title { font-size: 12px; font-weight: 700; color: #78350f; margin-bottom: 2px; }\n.aiwg-limit-banner-text  { font-size: 11px; color: #92400e; line-height: 1.5; }\n.aiwg-limit-banner-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }\n\n.aiwg-limit-btn {\n  padding: 4px 12px;\n  border-radius: 99px;\n  font-size: 11px;\n  font-weight: 600;\n  border: none;\n  cursor: pointer;\n  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s;\n  line-height: 1.5;\n}\n.aiwg-limit-btn--primary {\n  background: linear-gradient(135deg, #6366f1, #8b5cf6);\n  color: #fff;\n  box-shadow: 0 2px 8px rgba(99,102,241,0.3);\n}\n.aiwg-limit-btn--secondary {\n  background: rgba(99,102,241,0.08);\n  color: #6366f1;\n  border: 1px solid rgba(99,102,241,0.2);\n}\n.aiwg-limit-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }\n.aiwg-limit-btn:active { transform: translateY(0); }\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   OFFLINE PANEL  \u2014  Slide-up overlay: Form + Booking tabs\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.aiwg-offline-overlay {\n  position: absolute;\n  inset: 0;\n  background: #fff;\n  border-radius: 16px;\n  display: flex;\n  flex-direction: column;\n  z-index: 20;\n  animation: aiwg-slide-up 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;\n  overflow: hidden;\n}\n@keyframes aiwg-slide-up {\n  from { transform: translateY(100%); opacity: 0; }\n  to   { transform: translateY(0);    opacity: 1; }\n}\n.aiwg-offline-header {\n  padding: 16px 16px 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n}\n.aiwg-offline-header-left h4 { font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 2px; }\n.aiwg-offline-header-left p  { font-size: 12px; color: #64748b; line-height: 1.4; }\n.aiwg-offline-close-btn {\n  background: #f1f5f9;\n  border: none;\n  border-radius: 50%;\n  width: 30px; height: 30px;\n  display: flex; align-items: center; justify-content: center;\n  cursor: pointer;\n  font-size: 14px; color: #64748b;\n  transition: background 0.15s;\n  flex-shrink: 0;\n}\n.aiwg-offline-close-btn:hover { background: #e2e8f0; }\n\n/* Tab switcher */\n.aiwg-mode-tabs {\n  display: flex;\n  gap: 0;\n  background: #f1f5f9;\n  border-radius: 10px;\n  padding: 3px;\n  margin: 12px 16px 0;\n  flex-shrink: 0;\n}\n.aiwg-mode-tab {\n  flex: 1;\n  padding: 7px 6px;\n  border: none;\n  background: transparent;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  color: #64748b;\n  transition: all 0.15s;\n  display: flex; align-items: center; justify-content: center; gap: 5px;\n}\n.aiwg-mode-tab.aiwg-active {\n  background: #fff;\n  color: #6366f1;\n  font-weight: 700;\n  box-shadow: 0 1px 4px rgba(0,0,0,0.08);\n}\n\n/* Scrollable body */\n.aiwg-offline-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 14px 16px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n/* \u2500\u2500 Offline Form \u2500\u2500 */\n.aiwg-offline-form { display: flex; flex-direction: column; gap: 10px; }\n.aiwg-offline-field { display: flex; flex-direction: column; gap: 4px; }\n.aiwg-offline-label { font-size: 12px; font-weight: 600; color: #475569; }\n.aiwg-offline-label .aiwg-required { color: #ef4444; }\n.aiwg-offline-control,\n.aiwg-offline-textarea {\n  padding: 9px 12px;\n  border: 1.5px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 13px;\n  font-family: inherit;\n  outline: none;\n  background: #f8fafc;\n  color: #1a1a2e;\n  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;\n  width: 100%;\n  box-sizing: border-box;\n}\n.aiwg-offline-control:focus,\n.aiwg-offline-textarea:focus {\n  border-color: #6366f1;\n  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);\n  background: #fff;\n}\n.aiwg-offline-textarea { resize: none; min-height: 75px; }\n.aiwg-offline-submit {\n  padding: 11px;\n  background: linear-gradient(135deg, #6366f1, #8b5cf6);\n  color: #fff;\n  border: none;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 700;\n  cursor: pointer;\n  transition: transform 0.15s, box-shadow 0.15s;\n  box-shadow: 0 4px 12px rgba(99,102,241,0.3);\n  letter-spacing: 0.01em;\n}\n.aiwg-offline-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.4); }\n.aiwg-offline-submit:active:not(:disabled) { transform: translateY(0); }\n.aiwg-offline-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }\n\n/* Success state */\n.aiwg-offline-success {\n  text-align: center;\n  padding: 20px 12px;\n  background: #f0fdf4;\n  border: 1px solid #86efac;\n  border-radius: 12px;\n  animation: aiwg-fade-up 0.3s ease both;\n}\n.aiwg-offline-success-icon { font-size: 36px; margin-bottom: 8px; }\n.aiwg-offline-success h4 { font-size: 15px; font-weight: 700; color: #166534; margin-bottom: 4px; }\n.aiwg-offline-success p  { font-size: 12px; color: #4ade80; line-height: 1.5; }\n\n/* \u2500\u2500 Booking card \u2500\u2500 */\n.aiwg-booking-card {\n  background: linear-gradient(135deg, #f5f3ff, #ede9fe);\n  border: 1px solid #ddd6fe;\n  border-radius: 14px;\n  padding: 20px 16px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n}\n.aiwg-booking-icon { font-size: 40px; line-height: 1.1; }\n.aiwg-booking-title { font-size: 15px; font-weight: 700; color: #4c1d95; }\n.aiwg-booking-desc  { font-size: 12px; color: #6d28d9; line-height: 1.5; }\n.aiwg-booking-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 22px;\n  background: linear-gradient(135deg, #6366f1, #8b5cf6);\n  color: #fff;\n  border: none;\n  border-radius: 99px;\n  font-size: 13px;\n  font-weight: 700;\n  cursor: pointer;\n  transition: transform 0.15s, box-shadow 0.15s;\n  box-shadow: 0 4px 14px rgba(99,102,241,0.35);\n  text-decoration: none;\n  letter-spacing: 0.01em;\n}\n.aiwg-booking-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99,102,241,0.45); }\n.aiwg-booking-btn:active { transform: translateY(0); }\n\n/* \u2500\u2500 Shared fade-up used by banner + success \u2500\u2500 */\n@keyframes aiwg-fade-up {\n  from { opacity: 0; transform: translateY(8px); }\n  to   { opacity: 1; transform: translateY(0);   }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   DARK THEME  \u2014  overrides for new elements\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.aiwg-dark .aiwg-stream-cursor { background: #a78bfa; }\n.aiwg-dark .aiwg-msg-bubble--streaming { background: linear-gradient(135deg, #1e293b, #0f172a) !important; border-color: #334155 !important; color: #e2e8f0; }\n.aiwg-dark .aiwg-limit-banner { background: linear-gradient(135deg, #292202, #261e01); border-color: #a16207; }\n.aiwg-dark .aiwg-limit-banner-title { color: #fde68a; }\n.aiwg-dark .aiwg-limit-banner-text  { color: #fcd34d; }\n.aiwg-dark .aiwg-limit-btn--secondary { background: rgba(139,92,246,0.15); color: #a78bfa; border-color: rgba(139,92,246,0.3); }\n.aiwg-dark .aiwg-offline-overlay { background: #0f172a; }\n.aiwg-dark .aiwg-offline-header-left h4 { color: #e2e8f0; }\n.aiwg-dark .aiwg-offline-header-left p  { color: #64748b; }\n.aiwg-dark .aiwg-offline-close-btn { background: #1e293b; color: #94a3b8; }\n.aiwg-dark .aiwg-offline-close-btn:hover { background: #334155; }\n.aiwg-dark .aiwg-mode-tabs { background: #1e293b; }\n.aiwg-dark .aiwg-mode-tab { color: #94a3b8; }\n.aiwg-dark .aiwg-mode-tab.aiwg-active { background: #0f172a; color: #a78bfa; }\n.aiwg-dark .aiwg-offline-label { color: #94a3b8; }\n.aiwg-dark .aiwg-offline-control,\n.aiwg-dark .aiwg-offline-textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }\n.aiwg-dark .aiwg-offline-control:focus,\n.aiwg-dark .aiwg-offline-textarea:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,0.2); background: #1e293b; }\n.aiwg-dark .aiwg-booking-card { background: linear-gradient(135deg, #2d1b69, #1a0f3c); border-color: #4c1d95; }\n.aiwg-dark .aiwg-booking-title { color: #c4b5fd; }\n.aiwg-dark .aiwg-booking-desc  { color: #a78bfa; }\n.aiwg-dark .aiwg-quota-badge { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }\n";

package/dist/widget-css.js

@@ -386,4 +386,331 @@ export const WIDGET_CSS = `
 .aiwg-dark .aiwg-kbd-hint { background: #1e293b; }
 .aiwg-dark .aiwg-welcome h4 { color: #e2e8f0; }
 .aiwg-dark .aiwg-powered { background: #0f172a; border-top-color: #1e293b; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   STREAMING  —  Typewriter / word-reveal effect
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Blinking text cursor shown while AI response is streaming */
+.aiwg-stream-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: #6366f1;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  border-radius: 1px;
+  animation: aiwg-cursor-blink 0.65s step-end infinite;
+}
+@keyframes aiwg-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0; }
+}
+
+/* Streaming bubble gets a subtle shimmer border while words are appearing */
+.aiwg-msg-bubble--streaming {
+  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
+  border: 1.5px solid #e2e8f0 !important;
+  position: relative;
+  overflow: hidden;
+}
+.aiwg-msg-bubble--streaming::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent 0%, rgba(99,102,241,0.06) 50%, transparent 100%);
+  background-size: 200% 100%;
+  animation: aiwg-bubble-shimmer 1.4s ease infinite;
+  pointer-events: none;
+}
+@keyframes aiwg-bubble-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   USAGE / QUOTA  —  Header badge + progress bar
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* 3-px progress bar immediately under the header */
+.aiwg-usage-bar {
+  height: 3px;
+  background: rgba(255,255,255,0.18);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.aiwg-usage-bar-fill {
+  height: 100%;
+  border-radius: 0 2px 2px 0;
+  transition: width 0.5s cubic-bezier(0.4,0,0.2,1), background 0.5s ease;
+}
+.aiwg-usage-bar-fill--ok        { background: linear-gradient(90deg, #4ade80, #22c55e); }
+.aiwg-usage-bar-fill--warn      { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
+.aiwg-usage-bar-fill--exhausted { background: linear-gradient(90deg, #f87171, #ef4444); }
+
+/* Compact X/Y badge in header */
+.aiwg-quota-badge {
+  background: rgba(255,255,255,0.15);
+  border: 1px solid rgba(255,255,255,0.25);
+  border-radius: 99px;
+  padding: 2px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  color: rgba(255,255,255,0.9);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.aiwg-quota-badge--warn       { background: rgba(251,191,36,0.2); border-color: rgba(251,191,36,0.4); color: #fde68a; }
+.aiwg-quota-badge--exhausted  { background: rgba(239,68,68,0.2);  border-color: rgba(239,68,68,0.4);  color: #fca5a5; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   LIMIT EXPIRED  —  Softwall banner
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.aiwg-limit-banner {
+  margin: 8px 12px 0;
+  padding: 10px 14px;
+  background: linear-gradient(135deg, #fefce8, #fef3c7);
+  border: 1px solid #fde68a;
+  border-radius: 10px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  flex-shrink: 0;
+  animation: aiwg-fade-up 0.3s ease both;
+}
+.aiwg-limit-banner-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; line-height: 1; }
+.aiwg-limit-banner-body { flex: 1; min-width: 0; }
+.aiwg-limit-banner-title { font-size: 12px; font-weight: 700; color: #78350f; margin-bottom: 2px; }
+.aiwg-limit-banner-text  { font-size: 11px; color: #92400e; line-height: 1.5; }
+.aiwg-limit-banner-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
+
+.aiwg-limit-btn {
+  padding: 4px 12px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s;
+  line-height: 1.5;
+}
+.aiwg-limit-btn--primary {
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
+}
+.aiwg-limit-btn--secondary {
+  background: rgba(99,102,241,0.08);
+  color: #6366f1;
+  border: 1px solid rgba(99,102,241,0.2);
+}
+.aiwg-limit-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
+.aiwg-limit-btn:active { transform: translateY(0); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   OFFLINE PANEL  —  Slide-up overlay: Form + Booking tabs
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.aiwg-offline-overlay {
+  position: absolute;
+  inset: 0;
+  background: #fff;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  z-index: 20;
+  animation: aiwg-slide-up 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
+  overflow: hidden;
+}
+@keyframes aiwg-slide-up {
+  from { transform: translateY(100%); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+}
+.aiwg-offline-header {
+  padding: 16px 16px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+.aiwg-offline-header-left h4 { font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 2px; }
+.aiwg-offline-header-left p  { font-size: 12px; color: #64748b; line-height: 1.4; }
+.aiwg-offline-close-btn {
+  background: #f1f5f9;
+  border: none;
+  border-radius: 50%;
+  width: 30px; height: 30px;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  font-size: 14px; color: #64748b;
+  transition: background 0.15s;
+  flex-shrink: 0;
+}
+.aiwg-offline-close-btn:hover { background: #e2e8f0; }
+
+/* Tab switcher */
+.aiwg-mode-tabs {
+  display: flex;
+  gap: 0;
+  background: #f1f5f9;
+  border-radius: 10px;
+  padding: 3px;
+  margin: 12px 16px 0;
+  flex-shrink: 0;
+}
+.aiwg-mode-tab {
+  flex: 1;
+  padding: 7px 6px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  color: #64748b;
+  transition: all 0.15s;
+  display: flex; align-items: center; justify-content: center; gap: 5px;
+}
+.aiwg-mode-tab.aiwg-active {
+  background: #fff;
+  color: #6366f1;
+  font-weight: 700;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+}
+
+/* Scrollable body */
+.aiwg-offline-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* ── Offline Form ── */
+.aiwg-offline-form { display: flex; flex-direction: column; gap: 10px; }
+.aiwg-offline-field { display: flex; flex-direction: column; gap: 4px; }
+.aiwg-offline-label { font-size: 12px; font-weight: 600; color: #475569; }
+.aiwg-offline-label .aiwg-required { color: #ef4444; }
+.aiwg-offline-control,
+.aiwg-offline-textarea {
+  padding: 9px 12px;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  background: #f8fafc;
+  color: #1a1a2e;
+  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
+  width: 100%;
+  box-sizing: border-box;
+}
+.aiwg-offline-control:focus,
+.aiwg-offline-textarea:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
+  background: #fff;
+}
+.aiwg-offline-textarea { resize: none; min-height: 75px; }
+.aiwg-offline-submit {
+  padding: 11px;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s;
+  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
+  letter-spacing: 0.01em;
+}
+.aiwg-offline-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.4); }
+.aiwg-offline-submit:active:not(:disabled) { transform: translateY(0); }
+.aiwg-offline-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
+
+/* Success state */
+.aiwg-offline-success {
+  text-align: center;
+  padding: 20px 12px;
+  background: #f0fdf4;
+  border: 1px solid #86efac;
+  border-radius: 12px;
+  animation: aiwg-fade-up 0.3s ease both;
+}
+.aiwg-offline-success-icon { font-size: 36px; margin-bottom: 8px; }
+.aiwg-offline-success h4 { font-size: 15px; font-weight: 700; color: #166534; margin-bottom: 4px; }
+.aiwg-offline-success p  { font-size: 12px; color: #4ade80; line-height: 1.5; }
+
+/* ── Booking card ── */
+.aiwg-booking-card {
+  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
+  border: 1px solid #ddd6fe;
+  border-radius: 14px;
+  padding: 20px 16px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.aiwg-booking-icon { font-size: 40px; line-height: 1.1; }
+.aiwg-booking-title { font-size: 15px; font-weight: 700; color: #4c1d95; }
+.aiwg-booking-desc  { font-size: 12px; color: #6d28d9; line-height: 1.5; }
+.aiwg-booking-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 22px;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: #fff;
+  border: none;
+  border-radius: 99px;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s;
+  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
+  text-decoration: none;
+  letter-spacing: 0.01em;
+}
+.aiwg-booking-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99,102,241,0.45); }
+.aiwg-booking-btn:active { transform: translateY(0); }
+
+/* ── Shared fade-up used by banner + success ── */
+@keyframes aiwg-fade-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0);   }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   DARK THEME  —  overrides for new elements
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.aiwg-dark .aiwg-stream-cursor { background: #a78bfa; }
+.aiwg-dark .aiwg-msg-bubble--streaming { background: linear-gradient(135deg, #1e293b, #0f172a) !important; border-color: #334155 !important; color: #e2e8f0; }
+.aiwg-dark .aiwg-limit-banner { background: linear-gradient(135deg, #292202, #261e01); border-color: #a16207; }
+.aiwg-dark .aiwg-limit-banner-title { color: #fde68a; }
+.aiwg-dark .aiwg-limit-banner-text  { color: #fcd34d; }
+.aiwg-dark .aiwg-limit-btn--secondary { background: rgba(139,92,246,0.15); color: #a78bfa; border-color: rgba(139,92,246,0.3); }
+.aiwg-dark .aiwg-offline-overlay { background: #0f172a; }
+.aiwg-dark .aiwg-offline-header-left h4 { color: #e2e8f0; }
+.aiwg-dark .aiwg-offline-header-left p  { color: #64748b; }
+.aiwg-dark .aiwg-offline-close-btn { background: #1e293b; color: #94a3b8; }
+.aiwg-dark .aiwg-offline-close-btn:hover { background: #334155; }
+.aiwg-dark .aiwg-mode-tabs { background: #1e293b; }
+.aiwg-dark .aiwg-mode-tab { color: #94a3b8; }
+.aiwg-dark .aiwg-mode-tab.aiwg-active { background: #0f172a; color: #a78bfa; }
+.aiwg-dark .aiwg-offline-label { color: #94a3b8; }
+.aiwg-dark .aiwg-offline-control,
+.aiwg-dark .aiwg-offline-textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }
+.aiwg-dark .aiwg-offline-control:focus,
+.aiwg-dark .aiwg-offline-textarea:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,0.2); background: #1e293b; }
+.aiwg-dark .aiwg-booking-card { background: linear-gradient(135deg, #2d1b69, #1a0f3c); border-color: #4c1d95; }
+.aiwg-dark .aiwg-booking-title { color: #c4b5fd; }
+.aiwg-dark .aiwg-booking-desc  { color: #a78bfa; }
+.aiwg-dark .aiwg-quota-badge { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@courseecho/ai-core-sdk",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "Framework-agnostic core AI chat SDK. Shared logic for all framework wrappers.",
   "license": "MIT",
   "author": "CourseEcho",