@vanira/sdk 0.0.40 → 0.0.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/ui/styles/widget.css.d.ts +1 -1
  2. package/dist/vanira-sdk.es.js +87 -28
  3. package/dist/vanira-sdk.js +75 -16
  4. package/dist/vanira-sdk.js.map +1 -1
  5. package/package.json +2 -2
package/dist/ui/styles/widget.css.d.ts CHANGED
@@ -1 +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: #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";
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: #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: 75vw !important;\n height: 50vh !important;\n max-width: 75vw !important;\n max-height: 50vh !important;\n top: auto !important;\n left: auto !important;\n right: 16px !important;\n bottom: 16px !important;\n border-radius: 20px !important;\n margin: 0 !important;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;\n }\n\n .widget-panel.maximized {\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: flex !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 /* Voice overlay mobile default view adjustments */\n .widget-panel:not(.maximized) .voice-content-container {\n padding: 12px 16px 8px !important;\n min-height: 0 !important;\n flex: 1 !important;\n }\n\n .widget-panel:not(.maximized) .voice-orb-wrapper {\n width: 140px !important;\n height: 140px !important;\n transform: scale(0.65) !important;\n transform-origin: center !important;\n margin: 4px 0 !important;\n }\n\n .widget-panel:not(.maximized) .voice-video-container {\n max-width: 140px !important;\n margin-bottom: 8px !important;\n }\n\n .widget-panel:not(.maximized) .voice-status-area {\n margin-top: 4px !important;\n gap: 4px !important;\n }\n\n .widget-panel:not(.maximized) .voice-status-area p {\n margin: 0 !important;\n }\n\n .widget-panel:not(.maximized) .voice-transcription {\n margin-top: 4px !important;\n font-size: 11px !important;\n min-height: 24px !important;\n max-height: 40px !important;\n }\n\n .widget-panel:not(.maximized) .voice-footer {\n padding: 0 12px 12px !important;\n }\n\n .widget-panel:not(.maximized) .voice-hangup-btn {\n padding: 8px 20px !important;\n font-size: 12px !important;\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";