@vanira/sdk 0.0.2 → 0.0.3
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.
- package/dist/ui/styles/theme.d.ts +1 -0
- package/dist/ui/styles/widget.css.d.ts +1 -1
- package/dist/vanira-sdk.es.js +29 -24
- package/dist/vanira-sdk.js +30 -25
- package/dist/vanira-sdk.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +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 \n /* Default Theme Variables */\n --primary: #6366f1;\n --primary-hover: #4f46e5;\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(99, 102, 241, 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(99, 102, 241, 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 }\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";
|
|
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 \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 }\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";
|