@vanira/sdk 0.0.33 → 0.0.35

package/dist/api/services/ChatService.d.ts

@@ -11,8 +11,9 @@ export declare class ChatService {
     static createChatProspect(prospectGroupId: string): Promise<string>;
     static fetchWelcomeMessage(agentId: string, prospectId: string, widgetId?: string, _pkKey?: string): Promise<ChatMessage & {
         chatId?: string;
+        conversationId?: string;
     }>;
-    static sendChatMessage(agentId: string, prospectId: string, message: string, chatId: string | null, onChunk: (text: string) => void, onWidget: (widget: any) => void, onDone: (newChatId: string | null) => void, widgetId?: string, _pkKey?: string): Promise<void>;
+    static sendChatMessage(agentId: string, prospectId: string, message: string, chatId: string | null, onChunk: (text: string) => void, onWidget: (widget: any) => void, onDone: (newChatId: string | null, newConversationId: string | null) => void, widgetId?: string, _pkKey?: string): Promise<void>;
     static listenForAdminReplies(inboxId: string, sender: string, onMessage: (content: string) => void): {
         close: () => void;
     };
@@ -20,4 +21,5 @@ export declare class ChatService {
         callId: string;
         workerUrl: string;
     }>;
+    static resolveConversation(conversationId: string): Promise<void>;
 }

package/dist/core/SessionManager.d.ts

@@ -23,6 +23,7 @@ export interface SessionData {
     tabId: string;
     prospectId: string;
     chatId: string | null;
+    conversationId: string | null;
     messages: StoredMessage[];
     lastActive: number;
 }
@@ -53,7 +54,7 @@ export declare class SessionManager {
      */
     forceClaimSession(): void;
     /** Save / update the prospect and chat IDs for this session. */
-    saveIds(prospectId: string, chatId: string | null): void;
+    saveIds(prospectId: string, chatId: string | null, conversationId?: string | null): void;
     /** Append a message to the persisted history. */
     pushMessage(role: 'user' | 'assistant', content: string): void;
     /** Update the content of the last assistant message (streaming). */
@@ -62,6 +63,8 @@ export declare class SessionManager {
     getSession(): SessionData | null;
     /** Clears ALL session data (prospect_id, chat_id, messages). */
     clearSession(): void;
+    /** Clears chat-specific session data (chatId, conversationId, messages) but keeps the prospectId. */
+    clearChatKeepProspect(): void;
     /** Stop the heartbeat and release resources. Call on widget destroy. */
     destroy(): void;
     on(event: SessionEvent, cb: Function): this;

package/dist/core/VaniraAI.d.ts

@@ -20,6 +20,14 @@ export type VaniraAIStatus = 'idle' | 'connecting' | 'connected' | 'disconnected
 export interface VaniraAIConfig {
     /** Your Vanira agent ID from the dashboard */
     agentId: string;
+    /** Optional prospect ID. If supplied, the SDK resumes the prospect context. */
+    prospectId?: string;
+    /**
+     * Determines the lifecycle behavior when starting a connection:
+     * - 'continue': Reconnects/resumes the call using the provided `callId` or the stored sessionStorage call session.
+     * - 'new' (default): Ignores any previous call state and provisions a brand-new call.
+     */
+    sessionBehavior?: 'continue' | 'new';
     /** Bearer token for authentication. Required for ICE server fetching. */
     token?: string;
     /** Override the WebRTC server URL. Auto-detected if omitted. */
@@ -30,6 +38,10 @@ export interface VaniraAIConfig {
     iceServers?: RTCIceServer[];
     /** Optional call ID override. Auto-generated if omitted. */
     callId?: string;
+    /** Your sk_live_* or pk_live_* API key. Required for client-side call creation. */
+    apiKey?: string;
+    /** Override the default backend URL (e.g. http://localhost:8000). */
+    backendUrl?: string;
 }
 export interface ClientToolCall {
     /** The ref_code of the triggered action */
@@ -40,6 +52,8 @@ export interface ClientToolCall {
     tool_call_id: string;
     /** Whether the AI is paused waiting for result ('blocking') or keeps talking ('fire_and_forget') */
     execution_mode: 'blocking' | 'fire_and_forget';
+    /** Dynamic UI configuration parameters for zero-code presets */
+    client_fields?: Record<string, any>;
 }
 export interface TranscriptionEvent {
     text: string;
@@ -61,6 +75,12 @@ type EventMap = {
         track: MediaStreamTrack;
         stream: MediaStream;
     };
+    /** Fired when the prospect and call session are successfully generated/retrieved */
+    session_started: {
+        prospectId: string;
+        callId: string;
+        serverUrl: string;
+    };
 };
 type EventCallback<T> = T extends void ? () => void : (payload: T) => void;
 export declare class VaniraAI {
@@ -69,6 +89,12 @@ export declare class VaniraAI {
     private client;
     private listeners;
     constructor(config: VaniraAIConfig);
+    /** Returns the active WebRTC worker/server URL */
+    get serverUrl(): string | undefined;
+    /** Returns the active call ID */
+    get callId(): string | undefined;
+    /** Returns the active prospect ID associated with this session */
+    get prospectId(): string | undefined;
     /** Current connection status */
     get status(): VaniraAIStatus;
     /** Shorthand: true when status is 'connected' */
@@ -91,7 +117,11 @@ export declare class VaniraAI {
      * Connect to the Voice AI agent and start the call.
      * Requests microphone permission, establishes WebRTC, and opens the data channel.
      */
-    start(): Promise<void>;
+    start(): Promise<{
+        callId: string;
+        prospectId: string;
+        serverUrl: string;
+    }>;
     /**
      * Disconnect the call and release all resources (microphone, WebRTC connection).
      */
@@ -127,6 +157,10 @@ export declare class VaniraAI {
      * Force the AI to stop speaking and immediately react to a UI event.
      * Use when the user performs a significant action (e.g., clicks a button, opens a page).
      *
+     * Do NOT call this after `uploadMedia()` — `uploadMedia()` already sends
+     * `client_media_update` which is the only notification the backend needs.
+     * Calling `triggerInterrupt` after an upload causes double-TTS.
+     *
      * @param actionName - A descriptive name for the action (e.g., 'user_clicked_cart')
      * @param data - Optional context about the action
      *
@@ -134,19 +168,40 @@ export declare class VaniraAI {
      * client.triggerInterrupt('user_opened_checkout', { cart_value: 299 });
      */
     triggerInterrupt(actionName: string, data?: Record<string, any>): void;
+    /**
+     * Cut the AI's current audio mid-sentence WITHOUT sending a client_action_trigger.
+     * Use this when you want to interrupt the agent but the next notification will be
+     * sent by the SDK itself (e.g. right before `uploadMedia()`).
+     */
+    interruptAudioOnly(): void;
     /**
      * Upload a file (photo, document, screenshot) to the AI agent during a live call.
      * Handles the HTTP upload and DataChannel notification automatically.
      *
-     * @param file     - File or Blob to upload (JPEG, PNG, GIF, WebP, PDF — max 50 MB)
-     * @param reason   - Routing key: 'general' | 'kyc_photo' | 'damage_photo' | 'selfie' | 'document' | 'screenshot'
-     * @param message  - Optional text the user wants to say about the file
-     * @returns        `{ media_id, url }` on success
+     * ⚠️  This method is SELF-CONTAINED:
+     *   1. POSTs the file to /media/upload
+     *   2. Sends `client_media_update` via the DataChannel
+     *
+     * The backend LLM receives `client_media_update` and calls `process_media` — NO
+     * additional `triggerInterrupt()` or `sendActionTrigger()` is needed.
+     * Calling those after `uploadMedia()` will cause a SECOND LLM response (double TTS).
+     *
+     * @param file            - File or Blob to upload (JPEG, PNG, GIF, WebP, PDF — max 50 MB)
+     * @param reason          - Routing key: 'general' | 'kyc_photo' | 'damage_photo' | 'selfie' | 'document' | 'screenshot'
+     * @param message         - Optional text the user wants to say about the file
+     * @param interruptFirst  - Pass `true` to cut the AI's current audio before uploading
+     *                          (sends `action_interrupt` only — NOT `client_action_trigger`)
+     * @returns               `{ media_id, url }` on success
      *
      * @example
-     * const { media_id, url } = await client.uploadMedia(file, 'damage_photo', 'Photo of the damage');
+     * // Correct — one event, full context, LLM gets everything:
+     * const result = await client.uploadMedia(file, 'person_verification', 'Here is my ID', true);
+     *
+     * // ❌ Wrong — causes double TTS:
+     * const result = await client.uploadMedia(file, 'person_verification');
+     * client.triggerInterrupt('media_uploaded', { url: result.url }); // don't do this
      */
-    uploadMedia(file: File | Blob, reason?: string, message?: string): Promise<{
+    uploadMedia(file: File | Blob, reason?: string, message?: string, interruptFirst?: boolean): Promise<{
         media_id: string;
         url: string;
     }>;

package/dist/core/WebRTCClient.d.ts

@@ -1,20 +1,26 @@
 import { WebRTCClientConfig } from '../types';
 
 export declare class WebRTCClient {
-    private serverUrl;
-    private agentId;
-    private callId;
-    private apiKey;
+    serverUrl: string;
+    agentId: string;
+    callId: string | undefined;
+    prospectId: string | undefined;
+    apiKey: string | undefined;
     private backendUrl;
+    token: string | undefined;
     private onConnected;
     private onDisconnected;
     private onError;
     private onTranscription;
+    private onLocalStream;
     private onRemoteTrack;
     private onClientToolCall;
+    private onSessionStarted;
+    private sessionStartedEmitted;
     private pc;
     private dataChannel;
     private audioElement;
+    private localStream;
     connected: boolean;
     constructor(config: WebRTCClientConfig);
     /**

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export { ChatService } from './api/services/ChatService';
 export { SessionManager } from './core/SessionManager';
 export type { SessionData, StoredMessage, SessionEvent } from './core/SessionManager';
 export * from './types';
+export * from './react';

package/dist/react/PresetRenderer.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { VaniraPresetRegistry } from './types';
+
+export interface BaseClient {
+    sendToolResult: (toolCallId: string, result: any) => void;
+    sendToolError: (toolCallId: string, error: string) => void;
+    sendContextUpdate?: (data: any) => void;
+    triggerActionInterrupt?: () => void;
+    sendActionTrigger?: (actionName: string, data: Record<string, any>) => void;
+}
+export interface PresetRendererProps {
+    client: BaseClient | null;
+    toolCall: any | null;
+    registry?: VaniraPresetRegistry;
+    /** Fired immediately if the toolCall is NOT a preset */
+    onCustomTool?: (toolCall: any) => void;
+}
+export declare const PresetRenderer: React.FC<PresetRendererProps>;

package/dist/react/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './PresetRenderer';
+export * from './registry';
+export * from './presets/FormPreset';
+export * from './presets/CalendarPreset';

package/dist/react/presets/CalendarPreset.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { VaniraPresetProps } from '../types';
+
+export declare const CalendarPreset: React.FC<VaniraPresetProps>;

package/dist/react/presets/CameraPreset.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { VaniraPresetProps } from '../types';
+
+/**
+ * Built-in Camera Preset — vanira_camera
+ *
+ * Opens the device camera mid-call so the user can capture a photo and send it
+ * to the agent via client.uploadMedia() (same pipeline as file uploads).
+ *
+ * client_fields / arguments:
+ *   - title: string (default: "Take a Photo")
+ *   - description: string
+ *   - reason: string (upload reason, default: "camera_capture")
+ *   - facing_mode: "environment" | "user" (default: environment — rear camera on mobile)
+ */
+export declare const CameraPreset: React.FC<VaniraPresetProps>;

package/dist/react/presets/FormPreset.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { VaniraPresetProps } from '../types';
+
+export declare const FormPreset: React.FC<VaniraPresetProps>;

package/dist/react/presets/NavigatePreset.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { VaniraPresetProps } from '../types';
+
+/**
+ * Built-in Navigate Preset — headless, zero-code navigation.
+ *
+ * Framework-agnostic: uses a custom 'vanira:navigate' event that the host
+ * router (React Router, Next.js, TanStack, etc.) can listen to without
+ * a global popstate which would tear down the React Router context.
+ *
+ * The PresetRenderer skips the overlay wrapper for this preset.
+ *
+ * Agent tool arguments:
+ *   - target_url: string  (e.g. "/docs", "/pricing", "https://external.com")
+ */
+export declare const NavigatePreset: React.FC<VaniraPresetProps>;

package/dist/react/presets/UploadPreset.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { VaniraPresetProps } from '../types';
+
+/**
+ * Built-in Upload Preset — vanira_upload
+ *
+ * Renders a drag-and-drop file uploader. On submit, calls client.uploadMedia()
+ * which POSTs the file to /media/upload and sends client_media_update over the DataChannel.
+ * onComplete is called with { file_name, file_type, file_size, media_id, url }.
+ *
+ * Supported agent tool arguments / client_fields:
+ *   - title: string          (default: "Upload a File")
+ *   - description: string    (default: "Drop or select any file up to 3 MB")
+ *   - reason: string         (forwarded to uploadMedia, default: "upload")
+ *   - accept: string         (MIME types override)
+ */
+export declare const UploadPreset: React.FC<VaniraPresetProps>;

package/dist/react/registry.d.ts

@@ -0,0 +1,3 @@
+import { VaniraPresetRegistry } from './types';
+
+export declare const defaultRegistry: VaniraPresetRegistry;

package/dist/react/types.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export interface VaniraPresetProps {
+    /** The unique tool call execution ID from the AI */
+    toolCallId: string;
+    /** The dynamic configuration fields mapped from the Dashboard */
+    clientFields: Record<string, any>;
+    /** The parameters the AI extracted from the conversation */
+    arguments: Record<string, any>;
+    /** Called when the preset successfully gathers data to send back to the AI */
+    onComplete: (result: Record<string, any> | string) => void;
+    /** Called if the preset is cancelled or closed without data */
+    onCancel: (reason?: string) => void;
+    /** The live WebRTC client — available for presets that need to call SDK methods (e.g. uploadMedia) */
+    client?: any;
+}
+export type VaniraPresetComponent = React.ComponentType<VaniraPresetProps>;
+export type VaniraPresetRegistry = Record<string, VaniraPresetComponent>;
+export interface ActivePresetState {
+    presetId: string;
+    toolCall: any;
+}

package/dist/types.d.ts

@@ -34,10 +34,21 @@ export interface WebRTCClientConfig {
     serverUrl?: string;
     /** Call ID. Set automatically by createCall(); supply manually if managing the session yourself. */
     callId?: string;
+    /** Optional prospect ID. If supplied, the SDK resumes the prospect context. */
+    prospectId?: string;
+    /** Lifecycle behavior when starting a connection ('continue' or 'new') */
+    sessionBehavior?: 'continue' | 'new';
+    /** Callback when session starts or resumes with resolved IDs and server URL */
+    onSessionStarted?: (payload: {
+        prospectId: string;
+        callId: string;
+        serverUrl: string;
+    }) => void;
     onConnected?: () => void;
     onDisconnected?: () => void;
     onError?: (error: any) => void;
     onTranscription?: (text: string, isFinal: boolean) => void;
+    onLocalStream?: (stream: MediaStream) => void;
     onRemoteTrack?: (track: MediaStreamTrack, stream: MediaStream) => void;
     onClientToolCall?: (toolCall: any) => void;
     iceServers?: RTCIceServer[];

package/dist/ui/adapters/VaniraChatAdapter.d.ts

@@ -1,7 +1,7 @@
 import { IChatAdapter } from '../abstraction/interfaces';
 
 export declare class VaniraChatAdapter implements IChatAdapter {
-    sendMessage(text: string, agentId: string, prospectId: string, chatId: string | null, onResponse: (response: any) => void, onStream?: (text: string) => void, onChatIdUpdate?: (newId: string) => void, widgetId?: string, pkKey?: string): Promise<void>;
+    sendMessage(text: string, agentId: string, prospectId: string, chatId: string | null, onResponse: (response: any) => void, onStream?: (text: string) => void, onChatIdUpdate?: (newId: string, newConversationId?: string) => void, widgetId?: string, pkKey?: string): Promise<void>;
     sendFile(file: File): Promise<void>;
     likeDislike(messageId: string, action: 'like' | 'dislike'): Promise<void>;
 }

package/dist/ui/components/ChatWindow.d.ts

@@ -10,6 +10,7 @@ export declare class ChatWindow {
     private input;
     private sendBtn;
     private typingIndicator;
+    private resolveBar;
     constructor(onSend: (message: string) => void);
     getElement(): HTMLDivElement;
     private formatTime;
@@ -28,5 +29,6 @@ export declare class ChatWindow {
      */
     addCallRecord(durationMs: number, timestamp?: number): void;
     clearMessages(): void;
+    setResolveCallback(onResolve: () => void): void;
     private scrollToBottom;
 }

package/dist/ui/components/VoiceOrb.d.ts

@@ -1,6 +1,8 @@
 export declare class VoiceOrb {
     private onClick;
     private element;
+    private selectedBehavior;
     constructor(onClick: () => void);
+    getSessionBehavior(): 'continue' | 'new';
     getElement(): HTMLDivElement;
 }

package/dist/ui/components/VoiceOverlay.d.ts

@@ -35,7 +35,7 @@ export declare class VoiceOverlay {
     getElement(): HTMLDivElement;
     setMode(mode: 'voice' | 'avatar'): void;
     setVideoTrack(track: MediaStreamTrack): void;
-    setStatus(status: 'connecting' | 'connected' | 'disconnected' | 'error'): void;
+    setStatus(status: 'connecting' | 'connected' | 'disconnected' | 'error', errorMsg?: string): void;
     setTranscription(text: string, isFinal: boolean): void;
     show(): void;
     hide(): void;

package/dist/ui/presets/WidgetPresetRenderer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * WidgetPresetRenderer
+ * Vanilla-JS equivalent of the React PresetRenderer.
+ * Renders Calendar and Form presets as DOM overlays inside the widget shadow root.
+ */
+type OnComplete = (result: Record<string, any>) => void;
+type OnCancel = (reason?: string) => void;
+export declare class WidgetPresetRenderer {
+    private overlay;
+    private styleInjected;
+    private calViewYear;
+    private calViewMonth;
+    private calSelectedTs;
+    private calSelectedTime;
+    constructor(_root: ShadowRoot);
+    /** Returns true if this tool call contains a known preset_id and was handled */
+    handle(toolCall: any, onComplete: OnComplete, onCancel: OnCancel): boolean;
+    /** Force-dismiss the active preset (call on disconnect) */
+    dismiss(): void;
+    private injectStyles;
+    private createOverlay;
+    private createModal;
+    private renderCalendar;
+    private loadSlots;
+    private renderSlots;
+    private renderForm;
+}
+export {};

package/dist/ui/presets/types.d.ts

@@ -0,0 +1,14 @@
+export interface VaniraPresetProps {
+    /** The unique tool call execution ID from the AI */
+    toolCallId: string;
+    /** The dynamic configuration fields mapped from the Dashboard */
+    clientFields: Record<string, any>;
+    /** The parameters the AI extracted from the conversation */
+    arguments: Record<string, any>;
+    /** Called when the preset successfully gathers data to send back to the AI */
+    onComplete: (result: Record<string, any> | string) => void;
+    /** Called if the preset is cancelled or closed without data */
+    onCancel: (reason?: string) => void;
+}
+export type VaniraPresetComponent = React.ComponentType<VaniraPresetProps>;
+export type VaniraPresetRegistry = Record<string, VaniraPresetComponent>;

package/dist/ui/providers/VaniraInternalProvider.d.ts

@@ -3,6 +3,7 @@ import { AbstractWidgetProvider } from '../abstraction/AbstractWidgetProvider';
 export declare class VaniraInternalProvider extends AbstractWidgetProvider {
     private vaniraClient;
     private currentView;
+    private presetRenderer;
     private isPanelOpen;
     private callActive;
     private eventSource;
@@ -20,6 +21,7 @@ export declare class VaniraInternalProvider extends AbstractWidgetProvider {
     private chatServerUrl;
     private prospectId;
     private chatId;
+    private conversationId;
     private widgetId;
     private pkKey;
     private chatInitialized;
@@ -55,7 +57,7 @@ export declare class VaniraInternalProvider extends AbstractWidgetProvider {
     private initializeChatSession;
     initialize(config: any): Promise<void>;
     private processConfig;
-    create_call(): Promise<void>;
+    create_call(behavior?: 'continue' | 'new'): Promise<void>;
     end_call(): void;
     private updateViewCallState;
     private updateViewStatus;
@@ -70,4 +72,5 @@ export declare class VaniraInternalProvider extends AbstractWidgetProvider {
     private closePanel;
     private updateWelcomeChipsVisibility;
     private handleFloatingChipClick;
+    private resolveActiveConversation;
 }

package/dist/ui/styles/index.d.ts

@@ -1,6 +1,7 @@
 export declare const icons: {
     phone: string;
     close: string;
+    refresh: string;
     mic: string;
     micOff: string;
     waves: string;

package/dist/ui/styles/widget.css.d.ts

@@ -1 +1 @@
-export declare const widgetStyles = "\n  :host(.vanira-portal) {\n    position: fixed !important;\n    bottom: 0 !important;\n    right: 0 !important;\n    top: auto !important;\n    left: auto !important;\n    width: 0 !important;\n    height: 0 !important;\n    pointer-events: none !important;\n    z-index: 2147483647;\n    overflow: visible !important;\n    contain: none !important;\n  }\n\n  :host {\n    display: block;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    box-sizing: border-box;\n\n    /* Default Theme Variables */\n    --primary: #6366f1;\n    --primary-hover: #4f46e5;\n    --primary-rgb: 99, 102, 241;\n    --secondary: #4f46e5;\n    --secondary-rgb: 79, 70, 229;\n    --bg: #ffffff;\n    --text: #1f2937;\n    --text-muted: #6b7280;\n    --border: #e5e7eb;\n    --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);\n  }\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n  \n  @keyframes fadeInScale {\n    from { opacity: 0; transform: scale(0.8); }\n    to { opacity: 1; transform: scale(1); }\n  }\n\n  @keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.5; }\n  }\n\n  @keyframes wave {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-4px); }\n  }\n\n  @keyframes wave-rotate-1 {\n    0% { transform: rotate(0deg) scale(1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }\n    25% { transform: rotate(90deg) scale(1.02); border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }\n    50% { transform: rotate(180deg) scale(1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }\n    75% { transform: rotate(270deg) scale(0.98); border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; }\n    100% { transform: rotate(360deg) scale(1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }\n  }\n\n  @keyframes wave-rotate-2 {\n    0% { transform: rotate(60deg) scale(1.02); border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }\n    33% { transform: rotate(180deg) scale(0.98); border-radius: 60% 40% 40% 60% / 40% 60% 40% 60%; }\n    66% { transform: rotate(300deg) scale(1.02); border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%; }\n    100% { transform: rotate(420deg) scale(1.02); border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }\n  }\n\n  @keyframes wave-rotate-3 {\n    0% { transform: rotate(120deg) scale(1); border-radius: 50% 50% 50% 50%; }\n    50% { transform: rotate(300deg) scale(1.05); border-radius: 40% 60% 50% 50% / 50% 50% 60% 40%; }\n    100% { transform: rotate(480deg) scale(1); border-radius: 50% 50% 50% 50%; }\n  }\n\n  @keyframes clickBounce {\n    0% { transform: scale(1); }\n    25% { transform: scale(0.9) rotate(-5deg); }\n    50% { transform: scale(1.15) rotate(5deg); }\n    75% { transform: scale(0.95) rotate(-2deg); }\n    100% { transform: scale(1) rotate(0deg); }\n  }\n\n  @keyframes pulseGlow {\n    0%, 100% { box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4); }\n    50% { box-shadow: 0 4px 24px rgba(239, 68, 68, 0.6), 0 0 32px rgba(239, 68, 68, 0.3); }\n  }\n\n  @keyframes typingBounce {\n    0%, 80%, 100% { transform: translateY(0); }\n    40% { transform: translateY(-6px); }\n  }\n\n  @keyframes floatOrb {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-10px); }\n  }\n\n  @keyframes pulseGlowIdle {\n    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }\n    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; }\n  }\n\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n\n  @keyframes voice-bars-orb {\n    0%, 100% { transform: scaleY(1); opacity: 0.7; }\n    50% { transform: scaleY(1.8); opacity: 1; }\n  }\n\n\n  .widget-fab {\n    position: fixed;\n    z-index: 2147483647;\n    pointer-events: auto !important;\n    width: 64px;\n    height: 64px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);\n    border: none;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: var(--shadow);\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: fadeInScale 0.4s ease-out;\n  }\n\n  .widget-fab:hover {\n    transform: scale(1.1);\n    box-shadow: var(--shadow-lg);\n  }\n\n  .widget-fab:active {\n    transform: scale(0.95);\n  }\n\n  .widget-fab svg {\n    width: 28px;\n    height: 28px;\n    color: white;\n  }\n\n  .widget-panel {\n    position: fixed;\n    z-index: 2147483647;\n    pointer-events: auto;\n    background: rgba(255, 255, 255, 0.98);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1px solid #d1d5db;\n    border-radius: 28px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    \n    /* Default Dimensions */\n    width: 400px;\n    height: 600px;\n    max-height: 90vh;\n    max-width: 95vw;\n  }\n\n  .widget-panel.maximized {\n    width: 90vw !important;\n    height: 90vh !important;\n    top: 5vh !important;\n    left: 5vw !important;\n    right: 5vw !important;\n    bottom: 5vh !important;\n    margin: auto;\n  }\n\n  .widget-body {\n    padding: 0;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  .widget-panel.hidden {\n    opacity: 0;\n    pointer-events: none !important;\n    transform: translateY(20px) scale(0.95);\n  }\n\n  .widget-header {\n    background: #1f2937;\n    color: white;\n    padding: 14px 20px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  }\n\n  .widget-title {\n    font-size: 18px;\n    font-weight: 600;\n    margin: 0;\n    letter-spacing: 0.3px;\n  }\n\n  .close-btn {\n    background: rgba(255, 255, 255, 0.15);\n    border: none;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.2s;\n    backdrop-filter: blur(10px);\n  }\n\n  .close-btn:hover {\n    background: rgba(255, 255, 255, 0.25);\n    transform: scale(1.1);\n  }\n\n  .close-btn.maximize-btn {\n    display: flex;\n  }\n\n  .close-btn svg {\n    width: 18px;\n    height: 18px;\n    color: white;\n    flex-shrink: 0;\n  }\n\n  .status-indicator {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    background: #f9fafb;\n    border-radius: 12px;\n    margin-bottom: 20px;\n  }\n\n  .status-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #10b981;\n    animation: pulse 2s infinite;\n  }\n\n  .status-text {\n    font-size: 14px;\n    color: var(--text-muted);\n    margin: 0;\n  }\n\n  .controls {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n  }\n\n  .control-btn {\n    flex: 1;\n    padding: 14px 20px;\n    border: none;\n    border-radius: 12px;\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .control-btn svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  .control-btn.primary {\n    background: #1f2937;\n    color: white;\n  }\n\n  .control-btn.primary:hover {\n    background: #374151;\n  }\n\n  .control-btn.danger {\n    background: #ef4444;\n    color: white;\n  }\n\n  .control-btn.danger:hover {\n    background: #dc2626;\n  }\n\n  .voice-mode-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding-bottom: 0;\n  }\n\n  .central-orb-container {\n    position: relative;\n    width: 120px;\n    height: 120px;\n    margin-bottom: 32px;\n    cursor: pointer;\n  }\n\n  .central-orb {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    position: relative;\n    z-index: 10;\n    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.3);\n    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n\n  .central-orb.active {\n    animation: pulse 2s infinite;\n  }\n  \n  .central-orb.idle {\n    animation: floatOrb 4s ease-in-out infinite;\n    cursor: pointer;\n  }\n\n  .central-orb.idle:hover {\n    transform: scale(1.05);\n  }\n\n  .central-orb-glow {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 140%;\n    height: 140%;\n    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.2) 0%, transparent 70%);\n    animation: pulseGlowIdle 4s ease-in-out infinite;\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  .central-orb svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  .voice-status-text {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--text);\n    margin-bottom: 8px;\n    text-align: center;\n  }\n\n  .voice-status-subtext {\n    font-size: 14px;\n    color: var(--text-muted);\n    text-align: center;\n  }\n\n  /* Chat Mode Styles */\n  .chat-messages {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    background: #f9fafb; \n    \n    scrollbar-width: thin;\n    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;\n  }\n\n  .chat-messages::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .chat-messages::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .chat-messages::-webkit-scrollbar-thumb {\n    background-color: rgba(156, 163, 175, 0.5);\n    border-radius: 3px;\n  }\n\n  .chat-message {\n    max-width: 85%;\n    padding: 12px 16px;\n    border-radius: 16px;\n    font-size: 14px;\n    line-height: 1.5;\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  }\n\n  .chat-message.user {\n    align-self: flex-end;\n    background: #000000;\n    color: white;\n    border-bottom-right-radius: 4px;\n  }\n\n  .chat-message.assistant {\n    align-self: flex-start;\n    background: #ffffff;\n    border: 1px solid #e5e7eb;\n    color: var(--text);\n    border-bottom-left-radius: 4px;\n    box-shadow: 0 1px 2px rgba(0,0,0,0.05);\n  }\n\n  .chat-input-area {\n    padding: 20px;\n    border-top: 1px solid rgba(0, 0, 0, 0.05);\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    background: white;\n    z-index: 30;\n    position: relative;\n    border-bottom-left-radius: 28px;\n    border-bottom-right-radius: 28px;\n  }\n\n  .chat-input {\n    flex: 1;\n    padding: 14px 20px;\n    border: 1px solid #e5e7eb;\n    border-radius: 28px;\n    font-size: 15px;\n    outline: none;\n    transition: all 0.3s;\n    background: #f3f4f6;\n    color: #1f2937;\n  }\n\n  .chat-input:focus {\n    border-color: var(--primary);\n    background: white;\n    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);\n  }\n\n  .chat-send-btn {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background: var(--primary);\n    border: none;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n    flex-shrink: 0;\n  }\n\n  .chat-send-btn:hover {\n    transform: scale(1.05) rotate(-10deg);\n    background: var(--primary-hover);\n    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);\n  }\n\n  .chat-send-btn:active {\n    transform: scale(0.95);\n  }\n\n  .chat-send-btn svg {\n    width: 22px;\n    height: 22px;\n    color: white;\n    margin-left: 2px;\n  }\n\n  .avatar-container {\n    background: transparent;\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n  }\n  \n  .avatar-video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .voice-btn-simple {\n    position: relative;\n    width: 44px;\n    height: 44px;\n    border-radius: 50%;\n    border: 1.5px solid #e5e7eb;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s;\n    overflow: visible;\n    background: white;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  }\n\n  .voice-btn-simple:hover {\n    transform: scale(1.05);\n    background: #f9fafb;\n    border-color: #9ca3af;\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);\n  }\n\n  .voice-btn-icon {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #4b5563;\n  }\n\n  .voice-btn-icon svg {\n    width: 20px;\n    height: 20px;\n    stroke-width: 2px;\n  }\n\n  .absolute { position: absolute; }\n  .relative { position: relative; }\n  .rounded-full { border-radius: 9999px; }\n  .flex { display: flex; }\n  .items-center { align-items: center; }\n  .justify-center { justify-content: center; }\n  .w-full { width: 100%; }\n  .h-full { height: 100%; }\n  .z-50 { z-index: 50; }\n\n  .branding-footer {\n    display: flex;\n    justify-content: center;\n    padding: 4px 0 8px 0;\n    background-color: #f9fafb;\n    font-size: 10px;\n    color: #9ca3af;\n    font-weight: 500;\n    letter-spacing: 0.025em;\n  }\n\n  .branding-footer b {\n    color: #3b82f6;\n    font-weight: 700;\n    margin-left: 4px;\n  }\n\n  @media (max-width: 640px) {\n    .widget-panel {\n      width: 100vw !important;\n      height: 100vh !important;\n      max-width: 100vw !important;\n      max-height: 100vh !important;\n      top: 0 !important;\n      left: 0 !important;\n      right: 0 !important;\n      bottom: 0 !important;\n      border-radius: 0 !important;\n      margin: 0 !important;\n    }\n\n    .widget-fab {\n       width: 56px;\n       height: 56px;\n       bottom: 16px !important;\n       right: 16px !important;\n    }\n\n    :host(.vanira-panel-open) .widget-fab {\n      display: none !important;\n    }\n\n    .close-btn.maximize-btn {\n      display: none !important;\n    }\n\n    .widget-header {\n      padding: 12px 16px;\n    }\n\n    .widget-title {\n      font-size: 16px;\n    }\n\n    .chat-input-area {\n      padding: 12px;\n      padding-bottom: env(safe-area-inset-bottom, 12px);\n    }\n  }\n";
+export declare const widgetStyles = "\n  :host(.vanira-portal) {\n    position: fixed !important;\n    bottom: 0 !important;\n    right: 0 !important;\n    top: auto !important;\n    left: auto !important;\n    width: 0 !important;\n    height: 0 !important;\n    pointer-events: none !important;\n    z-index: 2147483647;\n    overflow: visible !important;\n    contain: none !important;\n  }\n\n  :host {\n    display: block;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    box-sizing: border-box;\n\n    /* Default Theme Variables */\n    --primary: #000000;\n    --primary-hover: #111111;\n    --primary-rgb: 0, 0, 0;\n    --secondary: #111111;\n    --secondary-rgb: 17, 17, 17;\n    --bg: #ffffff;\n    --text: #1f2937;\n    --text-muted: #6b7280;\n    --border: #e5e7eb;\n    --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);\n  }\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n  \n  @keyframes fadeInScale {\n    from { opacity: 0; transform: scale(0.8); }\n    to { opacity: 1; transform: scale(1); }\n  }\n\n  @keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.5; }\n  }\n\n  @keyframes wave {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-4px); }\n  }\n\n  @keyframes wave-rotate-1 {\n    0% { transform: rotate(0deg) scale(1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }\n    25% { transform: rotate(90deg) scale(1.02); border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }\n    50% { transform: rotate(180deg) scale(1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }\n    75% { transform: rotate(270deg) scale(0.98); border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; }\n    100% { transform: rotate(360deg) scale(1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }\n  }\n\n  @keyframes wave-rotate-2 {\n    0% { transform: rotate(60deg) scale(1.02); border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }\n    33% { transform: rotate(180deg) scale(0.98); border-radius: 60% 40% 40% 60% / 40% 60% 40% 60%; }\n    66% { transform: rotate(300deg) scale(1.02); border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%; }\n    100% { transform: rotate(420deg) scale(1.02); border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }\n  }\n\n  @keyframes wave-rotate-3 {\n    0% { transform: rotate(120deg) scale(1); border-radius: 50% 50% 50% 50%; }\n    50% { transform: rotate(300deg) scale(1.05); border-radius: 40% 60% 50% 50% / 50% 50% 60% 40%; }\n    100% { transform: rotate(480deg) scale(1); border-radius: 50% 50% 50% 50%; }\n  }\n\n  @keyframes clickBounce {\n    0% { transform: scale(1); }\n    25% { transform: scale(0.9) rotate(-5deg); }\n    50% { transform: scale(1.15) rotate(5deg); }\n    75% { transform: scale(0.95) rotate(-2deg); }\n    100% { transform: scale(1) rotate(0deg); }\n  }\n\n  @keyframes pulseGlow {\n    0%, 100% { box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4); }\n    50% { box-shadow: 0 4px 24px rgba(239, 68, 68, 0.6), 0 0 32px rgba(239, 68, 68, 0.3); }\n  }\n\n  @keyframes typingBounce {\n    0%, 80%, 100% { transform: translateY(0); }\n    40% { transform: translateY(-6px); }\n  }\n\n  @keyframes floatOrb {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-10px); }\n  }\n\n  @keyframes pulseGlowIdle {\n    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }\n    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; }\n  }\n\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n\n  @keyframes voice-bars-orb {\n    0%, 100% { transform: scaleY(1); opacity: 0.7; }\n    50% { transform: scaleY(1.8); opacity: 1; }\n  }\n\n\n  .widget-fab {\n    position: fixed;\n    z-index: 2147483647;\n    pointer-events: auto !important;\n    width: 64px;\n    height: 64px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);\n    border: none;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: var(--shadow);\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: fadeInScale 0.4s ease-out;\n  }\n\n  .widget-fab:hover {\n    transform: scale(1.1);\n    box-shadow: var(--shadow-lg);\n  }\n\n  .widget-fab:active {\n    transform: scale(0.95);\n  }\n\n  .widget-fab svg {\n    width: 28px;\n    height: 28px;\n    color: white;\n  }\n\n  .widget-panel {\n    position: fixed;\n    z-index: 2147483647;\n    pointer-events: auto;\n    background: rgba(255, 255, 255, 0.98);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1px solid #d1d5db;\n    border-radius: 28px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    \n    /* Default Dimensions */\n    width: 400px;\n    height: 600px;\n    max-height: 90vh;\n    max-width: 95vw;\n  }\n\n  .widget-panel.maximized {\n    width: 90vw !important;\n    height: 90vh !important;\n    top: 5vh !important;\n    left: 5vw !important;\n    right: 5vw !important;\n    bottom: 5vh !important;\n    margin: auto;\n  }\n\n  .widget-body {\n    padding: 0;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  .widget-panel.hidden {\n    opacity: 0;\n    pointer-events: none !important;\n    transform: translateY(20px) scale(0.95);\n  }\n\n  .widget-header {\n    background: #1f2937;\n    color: white;\n    padding: 14px 20px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  }\n\n  .widget-title {\n    font-size: 18px;\n    font-weight: 600;\n    margin: 0;\n    letter-spacing: 0.3px;\n  }\n\n  .close-btn {\n    background: rgba(255, 255, 255, 0.15);\n    border: none;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.2s;\n    backdrop-filter: blur(10px);\n  }\n\n  .close-btn:hover {\n    background: rgba(255, 255, 255, 0.25);\n    transform: scale(1.1);\n  }\n\n  .close-btn.maximize-btn {\n    display: flex;\n  }\n\n  .close-btn svg {\n    width: 18px;\n    height: 18px;\n    color: white;\n    flex-shrink: 0;\n  }\n\n  .status-indicator {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    background: #f9fafb;\n    border-radius: 12px;\n    margin-bottom: 20px;\n  }\n\n  .status-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #10b981;\n    animation: pulse 2s infinite;\n  }\n\n  .status-text {\n    font-size: 14px;\n    color: var(--text-muted);\n    margin: 0;\n  }\n\n  .controls {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n  }\n\n  .control-btn {\n    flex: 1;\n    padding: 14px 20px;\n    border: none;\n    border-radius: 12px;\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .control-btn svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  .control-btn.primary {\n    background: #1f2937;\n    color: white;\n  }\n\n  .control-btn.primary:hover {\n    background: #374151;\n  }\n\n  .control-btn.danger {\n    background: #ef4444;\n    color: white;\n  }\n\n  .control-btn.danger:hover {\n    background: #dc2626;\n  }\n\n  .voice-mode-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding-bottom: 0;\n  }\n\n  .central-orb-container {\n    position: relative;\n    width: 120px;\n    height: 120px;\n    margin-bottom: 32px;\n    cursor: pointer;\n  }\n\n  .central-orb {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    position: relative;\n    z-index: 10;\n    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.3);\n    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n\n  .central-orb.active {\n    animation: pulse 2s infinite;\n  }\n  \n  .central-orb.idle {\n    animation: floatOrb 4s ease-in-out infinite;\n    cursor: pointer;\n  }\n\n  .central-orb.idle:hover {\n    transform: scale(1.05);\n  }\n\n  .central-orb-glow {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 140%;\n    height: 140%;\n    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.2) 0%, transparent 70%);\n    animation: pulseGlowIdle 4s ease-in-out infinite;\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  .central-orb svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  .voice-status-text {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--text);\n    margin-bottom: 8px;\n    text-align: center;\n  }\n\n  .voice-status-subtext {\n    font-size: 14px;\n    color: var(--text-muted);\n    text-align: center;\n  }\n\n  /* Chat Mode Styles */\n  .chat-messages {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    background: #f9fafb; \n    \n    scrollbar-width: thin;\n    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;\n  }\n\n  .chat-messages::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .chat-messages::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .chat-messages::-webkit-scrollbar-thumb {\n    background-color: rgba(156, 163, 175, 0.5);\n    border-radius: 3px;\n  }\n\n  .chat-message {\n    max-width: 85%;\n    padding: 12px 16px;\n    border-radius: 16px;\n    font-size: 14px;\n    line-height: 1.5;\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  }\n\n  .chat-message.user {\n    align-self: flex-end;\n    background: #000000;\n    color: white;\n    border-bottom-right-radius: 4px;\n  }\n\n  .chat-message.assistant {\n    align-self: flex-start;\n    background: #ffffff;\n    border: 1px solid #e5e7eb;\n    color: var(--text);\n    border-bottom-left-radius: 4px;\n    box-shadow: 0 1px 2px rgba(0,0,0,0.05);\n  }\n\n  .chat-input-area {\n    padding: 20px;\n    border-top: 1px solid rgba(0, 0, 0, 0.05);\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    background: white;\n    z-index: 30;\n    position: relative;\n    border-bottom-left-radius: 28px;\n    border-bottom-right-radius: 28px;\n  }\n\n  .chat-input {\n    flex: 1;\n    padding: 14px 20px;\n    border: 1px solid #e5e7eb;\n    border-radius: 28px;\n    font-size: 15px;\n    outline: none;\n    transition: all 0.3s;\n    background: #f3f4f6;\n    color: #1f2937;\n  }\n\n  .chat-input:focus {\n    border-color: var(--primary);\n    background: white;\n    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);\n  }\n\n  .chat-send-btn {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background: var(--primary);\n    border: none;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n    flex-shrink: 0;\n  }\n\n  .chat-send-btn:hover {\n    transform: scale(1.05) rotate(-10deg);\n    background: var(--primary-hover);\n    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);\n  }\n\n  .chat-send-btn:active {\n    transform: scale(0.95);\n  }\n\n  .chat-send-btn svg {\n    width: 22px;\n    height: 22px;\n    color: white;\n    margin-left: 2px;\n  }\n\n  .avatar-container {\n    background: transparent;\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n  }\n  \n  .avatar-video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .voice-btn-simple {\n    position: relative;\n    width: 44px;\n    height: 44px;\n    border-radius: 50%;\n    border: 1.5px solid #e5e7eb;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s;\n    overflow: visible;\n    background: white;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  }\n\n  .voice-btn-simple:hover {\n    transform: scale(1.05);\n    background: #f9fafb;\n    border-color: #9ca3af;\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);\n  }\n\n  .voice-btn-icon {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #4b5563;\n  }\n\n  .voice-btn-icon svg {\n    width: 20px;\n    height: 20px;\n    stroke-width: 2px;\n  }\n\n  .absolute { position: absolute; }\n  .relative { position: relative; }\n  .rounded-full { border-radius: 9999px; }\n  .flex { display: flex; }\n  .items-center { align-items: center; }\n  .justify-center { justify-content: center; }\n  .w-full { width: 100%; }\n  .h-full { height: 100%; }\n  .z-50 { z-index: 50; }\n\n  .branding-footer {\n    display: flex;\n    justify-content: center;\n    padding: 4px 0 8px 0;\n    background-color: #f9fafb;\n    font-size: 10px;\n    color: #9ca3af;\n    font-weight: 500;\n    letter-spacing: 0.025em;\n  }\n\n  .branding-footer b {\n    color: #3b82f6;\n    font-weight: 700;\n    margin-left: 4px;\n  }\n\n  @media (max-width: 640px) {\n    .widget-panel {\n      width: 100vw !important;\n      height: 100vh !important;\n      max-width: 100vw !important;\n      max-height: 100vh !important;\n      top: 0 !important;\n      left: 0 !important;\n      right: 0 !important;\n      bottom: 0 !important;\n      border-radius: 0 !important;\n      margin: 0 !important;\n    }\n\n    .widget-fab {\n       width: 56px;\n       height: 56px;\n       bottom: 16px !important;\n       right: 16px !important;\n    }\n\n    :host(.vanira-panel-open) .widget-fab {\n      display: none !important;\n    }\n\n    .close-btn.maximize-btn {\n      display: none !important;\n    }\n\n    .widget-header {\n      padding: 12px 16px;\n    }\n\n    .widget-title {\n      font-size: 16px;\n    }\n\n    .chat-input-area {\n      padding: 12px;\n      padding-bottom: env(safe-area-inset-bottom, 12px);\n    }\n  }\n\n  /* Premium Session Behavior Selector */\n  .session-selector-container {\n    display: flex;\n    gap: 8px;\n    background: #f1f5f9;\n    padding: 4px;\n    border-radius: 12px;\n    margin-top: 24px;\n    width: 280px;\n    box-sizing: border-box;\n    border: 1px solid #e2e8f0;\n    pointer-events: auto !important;\n  }\n\n  .session-option {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px 10px;\n    background: transparent;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    border: 1.5px solid transparent;\n  }\n\n  .session-option:hover {\n    background: rgba(255, 255, 255, 0.5);\n  }\n\n  .session-option.active {\n    background: #ffffff;\n    border-color: var(--primary);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n  }\n\n  .session-option .session-title {\n    font-size: 11px;\n    font-weight: 700;\n    color: #1e293b;\n    margin-bottom: 2px;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n  }\n\n  .session-option .session-desc {\n    font-size: 8.5px;\n    font-weight: 500;\n    color: #64748b;\n    text-align: center;\n    line-height: 1.2;\n  }\n\n  /* Selector styling for clean card launcher */\n  .clean-card-launcher .session-selector-container {\n    width: 100%;\n    margin-top: 10px;\n    margin-bottom: 6px;\n    gap: 4px;\n    padding: 3px;\n    border-radius: 8px;\n  }\n\n  .clean-card-launcher .session-option {\n    padding: 5px 6px;\n    border-radius: 6px;\n  }\n\n  .clean-card-launcher .session-option .session-title {\n    font-size: 9px;\n    margin-bottom: 0;\n  }\n\n  .clean-card-launcher .session-option .session-desc {\n    display: none;\n  }\n\n  /* Thin Resolve Bar & Link above text input */\n  .chat-resolve-bar {\n    padding: 8px 16px;\n    border-top: 1px solid rgba(0, 0, 0, 0.05);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.03);\n    background: #ffffff;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 25;\n  }\n\n  .chat-resolve-link {\n    background: none;\n    border: none;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--primary);\n    cursor: pointer;\n    transition: all 0.2s;\n    text-decoration: underline;\n    opacity: 0.8;\n  }\n\n  .chat-resolve-link:hover {\n    opacity: 1;\n    color: var(--primary-hover);\n  }\n";

package/dist/ui/views/AbstractChatView.d.ts

@@ -17,7 +17,7 @@ export declare abstract class AbstractChatView {
     getElement(): HTMLDivElement;
     getChatWindow(): ChatWindow;
     setCallActive(active: boolean): void;
-    setStatus(status: 'connecting' | 'connected' | 'disconnected' | 'error'): void;
+    setStatus(status: 'connecting' | 'connected' | 'disconnected' | 'error', errorMsg?: string): void;
     setTranscription(text: string, isFinal: boolean): void;
     setVideoTrack(track: MediaStreamTrack): void;
 }

package/dist/ui/views/AbstractVoiceView.d.ts

@@ -3,16 +3,16 @@ import { VoiceOverlay } from '../components';
 export declare abstract class AbstractVoiceView {
     protected element: HTMLDivElement;
     protected overlay: VoiceOverlay;
-    protected onStartCall: () => void;
+    protected onStartCall: (behavior?: 'continue' | 'new') => void;
     protected onHangup: () => void;
     protected primaryColor: string;
     protected secondaryColor: string;
     protected onCallEnded?: (durationMs: number, startedAt: number) => void;
-    constructor(onStartCall: () => void, onHangup: () => void, primaryColor?: string, secondaryColor?: string, onCallEnded?: (durationMs: number, startedAt: number) => void);
+    constructor(onStartCall: (behavior?: 'continue' | 'new') => void, onHangup: () => void, primaryColor?: string, secondaryColor?: string, onCallEnded?: (durationMs: number, startedAt: number) => void);
     protected initOverlay(): void;
     getElement(): HTMLDivElement;
     setCallActive(active: boolean): void;
-    setStatus(status: 'connecting' | 'connected' | 'disconnected' | 'error'): void;
+    setStatus(status: 'connecting' | 'connected' | 'disconnected' | 'error', errorMsg?: string): void;
     setTranscription(text: string, isFinal: boolean): void;
     setVideoTrack(track: MediaStreamTrack): void;
 }

package/dist/ui/views/VoiceOnlyView.d.ts

@@ -2,5 +2,5 @@ import { AbstractVoiceView } from './AbstractVoiceView';
 
 export declare class VoiceOnlyView extends AbstractVoiceView {
     private voiceOrb;
-    constructor(onStartCall: () => void, onHangup: () => void, primaryColor?: string, secondaryColor?: string, onCallEnded?: (durationMs: number, startedAt: number) => void);
+    constructor(onStartCall: (behavior?: 'continue' | 'new') => void, onHangup: () => void, primaryColor?: string, secondaryColor?: string, onCallEnded?: (durationMs: number, startedAt: number) => void);
 }