@vanira/sdk 0.0.14 → 0.0.16

package/dist/core/DraggableController.d.ts

@@ -0,0 +1,20 @@
+export declare class DraggableController {
+    private target;
+    private onDrag;
+    private onDragEnd;
+    private isDragging;
+    private startX;
+    private startY;
+    private initialX;
+    private initialY;
+    private dragThreshold;
+    constructor(target: HTMLElement, onDrag: (x: number, y: number) => void, onDragEnd: () => void);
+    private init;
+    private onMouseDown;
+    private onTouchStart;
+    private startDrag;
+    private onMouseMove;
+    private onTouchMove;
+    private moveDrag;
+    private onMouseUp;
+}

package/dist/ui/VaniraWidget.d.ts

@@ -8,6 +8,7 @@ export declare class VaniraWidget extends HTMLElement {
     private primaryColor;
     private secondaryColor;
     private gradient;
+    private positionType;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;

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

@@ -1,17 +1,22 @@
 export declare class FloatingButton {
     private onClick;
+    private onMove?;
+    private onMoveEnd?;
     private element;
     private iconContainer;
+    private posX;
+    private posY;
     private isDragging;
     private startX;
     private startY;
     private currentX;
     private currentY;
     private hasMoved;
-    constructor(onClick: () => void, initialIcon?: string);
+    constructor(onClick: () => void, onMove?: ((x: number, y: number) => void) | undefined, onMoveEnd?: ((x: number, y: number) => void) | undefined, initialIcon?: string);
     private dragStart;
     getElement(): HTMLButtonElement;
     setIcon(iconHtml: string): void;
     setPosition(positionStyle: string): void;
+    updateCoordinates(x: number, y: number): void;
     static get styles(): string;
 }

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

@@ -10,6 +10,7 @@ export declare class FloatingWelcomeChips {
     setChips(chips: WelcomeChip[]): void;
     getElement(): HTMLElement;
     setPosition(positionStyle: string): void;
+    updateCoordinates(x: number, y: number, isBottom?: boolean): void;
     private render;
     static get styles(): string;
 }

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

@@ -19,6 +19,12 @@ export declare class Panel {
         top?: string;
         left?: string;
     }): void;
+    updatePosition(position: {
+        bottom?: string;
+        right?: string;
+        top?: string;
+        left?: string;
+    }): void;
     close(): void;
     toggleMaximize(): void;
     static get styles(): string;

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

@@ -24,6 +24,7 @@ export declare class VaniraInternalProvider extends AbstractWidgetProvider {
     private primaryColor;
     private secondaryColor;
     private gradient;
+    private positionType;
     private position;
     private widgetIcon;
     private chatWelcomeMessage;

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

@@ -1 +1 @@
-export declare const widgetStyles = "\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    overflow: visible !important;\n    contain: none !important;\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: 9999;\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: 10000; /* Higher than FAB */\n    background: rgba(255, 255, 255, 0.98);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1px solid #d1d5db; /* Solid light gray border for better differentiation */\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-panel.maximized {\n    width: 800px;\n    max-width: calc(100vw - 40px);\n    height: 80vh;\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;\n    transform: translateY(20px) scale(0.95);\n  }\n/* ... rest of the content is redundant if I use replace or overwrite, but I will overwrite to include everything properly */\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  .widget-body {\n    padding: 0;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\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; /* Crucial for scrolling in flex column */\n    overflow-y: auto;\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    background: #f9fafb; \n    \n    /* Scrollbar Styling */\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-messages::-webkit-scrollbar-thumb:hover {\n    background-color: rgba(107, 114, 128, 0.8);\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  .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  .avatar-video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  /* Voice Button (Simple) in Chat */\n  .voice-btn-simple {\n    position: relative;\n    width: 44px; /* Matching send-btn size for symmetry */\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-simple:active {\n    animation: clickBounce 0.4s ease-out;\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  /* Utility Classes */\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    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\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 !important;\n    background: rgba(255, 255, 255, 0.98);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1px solid #d1d5db; /* Solid light gray border for better differentiation */\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-panel.maximized {\n    width: 800px;\n    max-width: calc(100vw - 40px);\n    height: 80vh;\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;\n    transform: translateY(20px) scale(0.95);\n  }\n/* ... rest of the content is redundant if I use replace or overwrite, but I will overwrite to include everything properly */\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  .widget-body {\n    padding: 0;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\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; /* Crucial for scrolling in flex column */\n    overflow-y: auto;\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    background: #f9fafb; \n    \n    /* Scrollbar Styling */\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-messages::-webkit-scrollbar-thumb:hover {\n    background-color: rgba(107, 114, 128, 0.8);\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  .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  .avatar-video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  /* Voice Button (Simple) in Chat */\n  .voice-btn-simple {\n    position: relative;\n    width: 44px; /* Matching send-btn size for symmetry */\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-simple:active {\n    animation: clickBounce 0.4s ease-out;\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  /* Utility Classes */\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";