/* Voice Nimble — AI Assistant (floating chat) widget * * Matches the Voice Nimble design system: Inter, deep ink (#0f1024), header * surface (#171a30), amber accent (#FF7A1A), glass surfaces, and the same * cubic-bezier(.22,1,.36,1) motion used across the other VN widgets. * * THEMING — the panel follows the site theme, like every other VN widget. * Dark is the base (written unprefixed so it also covers the pre-paint window * before navigation.js stamps the class on ), and the `html.vn-light` * block near the bottom of this file repaints the chrome for light mode. Note * the widget's panel-colour controls deliberately ship with no default — an * Elementor control default outranks `html.vn-light` here, so a default would * pin the panel dark. See the note in widgets/ai-chat.php. * * State is driven by [data-open="true"] on the root, set by the JS. */ .vn-ai-chat { --vn-ai-accent: #FF7A1A; --vn-ai-accent-rgb: 255, 122, 26; --vn-ai-offset-bottom: 28px; --vn-ai-offset-side: 28px; --vn-ai-panel-gap: 18px; --vn-ai-ease: cubic-bezier(0.22, 1, 0.36, 1); position: fixed; bottom: var(--vn-ai-offset-bottom); z-index: 99997; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; /* Slides up smoothly when the Scroll-to-Top button appears (see below). */ transition: transform 0.4s var(--vn-ai-ease); } .vn-ai-chat--bottom-right { right: var(--vn-ai-offset-side); } .vn-ai-chat--bottom-left { left: var(--vn-ai-offset-side); } /* ========================================================================= * Launcher * ====================================================================== */ .vn-ai-chat__launcher { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0; padding: 0; border: 0; border-radius: 50%; /* Solid brand fill — dark ink for text/icon contrast, matching the same convention as every other solid-amber fill on the site (e.g. hero's play-icon: light text reads poorly against this hue at this luminance). */ color: #12060C; background-color: var(--vn-ai-accent, #FF7A1A); background-image: linear-gradient(160deg, #FF7A1A 0%, var(--vn-ai-accent, #FF7A1A) 100%); box-shadow: 0 16px 36px rgba(var(--vn-ai-accent-rgb), 0.35); cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform 0.25s ease, box-shadow 0.25s ease; } .vn-ai-chat__launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 24px 48px rgba(var(--vn-ai-accent-rgb), 0.5); } .vn-ai-chat__launcher:active { transform: translateY(0) scale(0.98); } .vn-ai-chat__launcher:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } .vn-ai-chat__launcher-icon { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 26px; /* sizes Font Awesome () icons */ line-height: 1; transition: opacity 0.25s ease, transform 0.3s var(--vn-ai-ease); } .vn-ai-chat__launcher-icon svg { width: 100%; height: 100%; } .vn-ai-chat__launcher-icon i { font-size: inherit; line-height: 1; color: inherit; } .vn-ai-chat__launcher-icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); } .vn-ai-chat[data-open="true"] .vn-ai-chat__launcher-icon--chat { opacity: 0; transform: rotate(90deg) scale(0.6); } .vn-ai-chat[data-open="true"] .vn-ai-chat__launcher-icon--close { opacity: 1; transform: rotate(0) scale(1); } /* Attention pulse — disabled once opened. */ .vn-ai-chat__launcher::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: rgba(var(--vn-ai-accent-rgb), 0.4); z-index: -1; animation: vn-ai-pulse 2.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; } .vn-ai-chat[data-open="true"] .vn-ai-chat__launcher::after { animation: none; } @keyframes vn-ai-pulse { 0% { transform: scale(1); opacity: 0.6; } 75%, 100% { transform: scale(1.8); opacity: 0; } } /* ========================================================================= * Tooltip * ====================================================================== */ .vn-ai-chat__tooltip { position: absolute; bottom: 50%; transform: translateY(50%) translateX(8px); padding: 9px 13px; border-radius: 12px; border: 1px solid rgba(var(--vn-ai-accent-rgb), 0.25); background-color: #171a30; color: #ffffff; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 12px 30px rgba(6, 8, 24, 0.4); transition: opacity 0.25s ease, transform 0.25s ease; } .vn-ai-chat--bottom-right .vn-ai-chat__tooltip { right: calc(100% + 14px); } .vn-ai-chat--bottom-left .vn-ai-chat__tooltip { left: calc(100% + 14px); transform: translateY(50%) translateX(-8px); } .vn-ai-chat:hover .vn-ai-chat__tooltip, .vn-ai-chat.is-tip-visible .vn-ai-chat__tooltip { opacity: 1; transform: translateY(50%) translateX(0); } .vn-ai-chat[data-open="true"] .vn-ai-chat__tooltip { opacity: 0 !important; } /* ========================================================================= * Panel * ====================================================================== */ .vn-ai-chat__panel { position: absolute; bottom: calc(100% + var(--vn-ai-panel-gap)); width: 384px; max-width: calc(100vw - 32px); max-height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); background-color: #0f1024; box-shadow: 0 28px 70px rgba(6, 8, 24, 0.55); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px) scale(0.97); transform-origin: bottom right; transition: opacity 0.28s ease, transform 0.28s var(--vn-ai-ease), visibility 0s linear 0.28s; } .vn-ai-chat--bottom-right .vn-ai-chat__panel { right: 0; transform-origin: bottom right; } .vn-ai-chat--bottom-left .vn-ai-chat__panel { left: 0; transform-origin: bottom left; } .vn-ai-chat[data-open="true"] .vn-ai-chat__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity 0.28s ease, transform 0.28s var(--vn-ai-ease); } /* ----- Header ----- */ .vn-ai-chat__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 18px; background-color: #171a30; /* Top-left gold wash; a matching accent glow lives in the body top-right. */ background-image: radial-gradient(80% 120% at 0% 0%, rgba(var(--vn-ai-accent-rgb), 0.16) 0%, transparent 60%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex: 0 0 auto; } .vn-ai-chat__identity { display: flex; align-items: center; gap: 12px; min-width: 0; } .vn-ai-chat__avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; color: #ffffff; background: linear-gradient(135deg, var(--vn-ai-accent, #C47F01) 0%, #E4A93C 100%); box-shadow: 0 0 0 2px var(--vn-ai-accent, #C47F01); overflow: visible; } .vn-ai-chat__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .vn-ai-chat__avatar svg { width: 30px; height: 30px; } .vn-ai-chat__online-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background-color: #34d399; box-shadow: 0 0 0 2px #171a30; } .vn-ai-chat__meta { min-width: 0; } .vn-ai-chat__name { color: #ffffff; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vn-ai-chat__subtitle { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: #9aa3b8; font-size: 12px; font-weight: 500; line-height: 1.3; } .vn-ai-chat__subtitle::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: #34d399; box-shadow: 0 0 8px #34d399; } .vn-ai-chat__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 10px; color: #9aa3b8; background-color: rgba(255, 255, 255, 0.05); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .vn-ai-chat__close svg { width: 18px; height: 18px; } .vn-ai-chat__close:hover { background-color: rgba(255, 255, 255, 0.1); color: #ffffff; } /* ----- Messages ----- */ .vn-ai-chat__body { flex: 1 1 auto; min-height: 220px; overflow-y: auto; overflow-x: hidden; padding: 18px 16px 6px; display: flex; flex-direction: column; gap: 12px; /* Accent glow anchored at the chat box's top-right (translucent). */ background-image: radial-gradient(90% 50% at 100% 0%, rgba(var(--vn-ai-accent-rgb), 0.12) 0%, transparent 60%); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; } .vn-ai-chat__body::-webkit-scrollbar { width: 8px; } .vn-ai-chat__body::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.16); border-radius: 8px; } .vn-ai-chat__msg { display: flex; max-width: 86%; animation: vn-ai-msg-in 0.32s var(--vn-ai-ease) both; } .vn-ai-chat__msg--bot { align-self: flex-start; } .vn-ai-chat__msg--user { align-self: flex-end; } @keyframes vn-ai-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .vn-ai-chat__bubble { padding: 11px 14px; font-size: 14px; font-weight: 500; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; } .vn-ai-chat__msg--bot .vn-ai-chat__bubble { color: #e6eaf2; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px 16px 16px 16px; } .vn-ai-chat__msg--user .vn-ai-chat__bubble { color: #ffffff; background-color: var(--vn-ai-accent, #C47F01); border-radius: 16px 16px 4px 16px; font-weight: 600; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); } .vn-ai-chat__bubble a { color: inherit; text-decoration: underline; font-weight: 700; } .vn-ai-chat__bubble p { margin: 0 0 8px; } .vn-ai-chat__bubble p:last-child { margin-bottom: 0; } .vn-ai-chat__bubble ul { margin: 6px 0; padding-left: 18px; } .vn-ai-chat__bubble li { margin: 2px 0; } .vn-ai-chat__bubble code { padding: 1px 5px; border-radius: 6px; background-color: rgba(0, 0, 0, 0.28); font-size: 0.9em; } /* Typing indicator */ .vn-ai-chat__typing .vn-ai-chat__bubble { display: inline-flex; gap: 5px; padding: 14px 16px; } .vn-ai-chat__typing-dot { width: 7px; height: 7px; border-radius: 50%; background-color: #9aa3b8; animation: vn-ai-typing 1.2s infinite ease-in-out; } .vn-ai-chat__typing-dot:nth-child(2) { animation-delay: 0.18s; } .vn-ai-chat__typing-dot:nth-child(3) { animation-delay: 0.36s; } @keyframes vn-ai-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } } /* Escalation block (WhatsApp hand-off inside a bot message) */ .vn-ai-chat__escalate { margin-top: 8px; align-self: flex-start; max-width: 86%; display: flex; flex-direction: column; gap: 8px; animation: vn-ai-msg-in 0.32s var(--vn-ai-ease) both; } .vn-ai-chat__escalate-note { color: #9aa3b8; font-size: 12.5px; font-weight: 500; line-height: 1.45; } .vn-ai-chat__wa-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 12px; background-color: #25D366; color: #ffffff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35); transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease; } .vn-ai-chat__wa-cta:hover { background-color: #1ebe5d; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45); color: #ffffff; } .vn-ai-chat__wa-cta svg { width: 18px; height: 18px; fill: currentColor; } /* ----- Suggested questions ----- */ .vn-ai-chat__suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 12px; flex: 0 0 auto; } .vn-ai-chat__suggestions[hidden] { display: none; } .vn-ai-chat__chip { padding: 8px 13px; border-radius: 9999px; border: 1px solid rgba(var(--vn-ai-accent-rgb), 0.35); background-color: rgba(var(--vn-ai-accent-rgb), 0.10); color: #f0dcb8; font-size: 12.5px; font-weight: 600; line-height: 1.2; cursor: pointer; font-family: inherit; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .vn-ai-chat__chip:hover { background-color: rgba(var(--vn-ai-accent-rgb), 0.18); border-color: rgba(var(--vn-ai-accent-rgb), 0.6); transform: translateY(-1px); } /* ----- Input ----- */ .vn-ai-chat__inputbar { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); background-color: rgba(255, 255, 255, 0.02); flex: 0 0 auto; } .vn-ai-chat__input { flex: 1 1 auto; min-height: 44px; max-height: 120px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.04); color: #e6eaf2; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.45; resize: none; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .vn-ai-chat__input::placeholder { color: #6b7280; } .vn-ai-chat__input:focus { border-color: rgba(var(--vn-ai-accent-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--vn-ai-accent-rgb), 0.14); } .vn-ai-chat__send { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 12px; color: #ffffff; background-color: var(--vn-ai-accent, #C47F01); box-shadow: 0 6px 18px rgba(var(--vn-ai-accent-rgb), 0.35); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .vn-ai-chat__send svg { width: 20px; height: 20px; } .vn-ai-chat__send:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--vn-ai-accent-rgb), 0.45); } .vn-ai-chat__send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .vn-ai-chat__disclaimer { /* Shares the composer background so input + send + this note read as one connected block. Top padding is 0 because the inputbar already contributes ~12px above the text — matching the 12px below it. */ padding: 0 14px 12px; color: #5d6678; font-size: 11px; font-weight: 500; text-align: center; background-color: rgba(255, 255, 255, 0.02); flex: 0 0 auto; } /* ========================================================================= * Light theme * --------------------------------------------------------------------------- * Repaints the chrome only — layout, motion, radii and the gold accent are * shared with dark mode and stay untouched above. * * Palette is the project's existing light set (features/pricing/live-demo): * surface #ffffff inset surface #f7f7fb * border rgba(0,0,0,.07) bot bubble #eceef4 on #23243a * heading #1a1a2e muted text rgba(15,16,36,.6) * shadow 0 1px 0 rgba(255,255,255,.9) inset, 0 20px 55px -20px rgba(15,16,36,.2) * * Gold-on-white *text* darkens to #8a5a00 — the project's contrast convention * (features.php, pricing.php, faq.php …). Gold as a *fill* (launcher, send, * user bubble, avatar) keeps #C47F01, since those carry white text. * ====================================================================== */ /* Launcher — the white focus ring vanishes against a light page. */ html.vn-light .vn-ai-chat__launcher:focus-visible { outline-color: #1a1a2e; } html.vn-light .vn-ai-chat__tooltip { border-color: rgba(0, 0, 0, 0.07); background-color: #ffffff; color: #1a1a2e; box-shadow: 0 8px 24px rgba(15, 16, 36, 0.14); } /* ----- Panel ----- */ html.vn-light .vn-ai-chat__panel { border-color: rgba(0, 0, 0, 0.07); background-color: #ffffff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 55px -20px rgba(15, 16, 36, 0.2); } /* Header stays pure white; the body below it is the tinted surface, which is what separates the two (dark mode does it the other way round). */ html.vn-light .vn-ai-chat__header { background-color: #ffffff; background-image: radial-gradient(80% 120% at 0% 0%, rgba(var(--vn-ai-accent-rgb), 0.10) 0%, transparent 60%); border-bottom-color: rgba(0, 0, 0, 0.07); } html.vn-light .vn-ai-chat__online-dot { box-shadow: 0 0 0 2px #ffffff; } html.vn-light .vn-ai-chat__name { color: #1a1a2e; } html.vn-light .vn-ai-chat__subtitle { color: rgba(15, 16, 36, 0.6); } html.vn-light .vn-ai-chat__close { color: rgba(15, 16, 36, 0.55); background-color: rgba(0, 0, 0, 0.04); } html.vn-light .vn-ai-chat__close:hover { background-color: rgba(0, 0, 0, 0.08); color: #1a1a2e; } /* ----- Messages ----- */ html.vn-light .vn-ai-chat__body { background-color: #f7f7fb; background-image: radial-gradient(90% 50% at 100% 0%, rgba(var(--vn-ai-accent-rgb), 0.07) 0%, transparent 60%); scrollbar-color: rgba(15, 16, 36, 0.18) transparent; } html.vn-light .vn-ai-chat__body::-webkit-scrollbar-thumb { background-color: rgba(15, 16, 36, 0.16); } /* Surface borrowed from the demo-suite segmented switcher (`html.vn-light .vn-ds__switch`, demo-suite.php:706) so the assistant bubble reads as the same neutral chip. Translucent rather than a flat hex, so it keeps that relationship over the tinted body. Dark mode already uses the switcher's rgba(255,255,255,0.05) counterpart above. */ html.vn-light .vn-ai-chat__msg--bot .vn-ai-chat__bubble { color: #23243a; background-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.07); } /* Only the assistant bubble sits on a light surface — the visitor bubble keeps its gold fill, so its inline code stays on the dark tint set above. */ html.vn-light .vn-ai-chat__msg--bot .vn-ai-chat__bubble code { background-color: rgba(15, 16, 36, 0.08); } html.vn-light .vn-ai-chat__typing-dot { background-color: rgba(15, 16, 36, 0.35); } html.vn-light .vn-ai-chat__escalate-note { color: rgba(15, 16, 36, 0.6); } /* ----- Suggested questions ----- */ html.vn-light .vn-ai-chat__chip { border-color: rgba(var(--vn-ai-accent-rgb), 0.20); background-color: rgba(var(--vn-ai-accent-rgb), 0.08); color: #8a5a00; } html.vn-light .vn-ai-chat__chip:hover { background-color: rgba(var(--vn-ai-accent-rgb), 0.14); border-color: rgba(var(--vn-ai-accent-rgb), 0.35); } /* ----- Composer ----- */ html.vn-light .vn-ai-chat__inputbar { border-top-color: rgba(0, 0, 0, 0.07); background-color: #ffffff; } html.vn-light .vn-ai-chat__input { border-color: rgba(15, 16, 36, 0.12); background-color: #ffffff; color: #0f1024; } html.vn-light .vn-ai-chat__input::placeholder { color: rgba(15, 16, 36, 0.4); } /* Keeps the disclaimer visually welded to the composer (see the note there). */ html.vn-light .vn-ai-chat__disclaimer { background-color: #ffffff; color: rgba(15, 16, 36, 0.45); } /* ========================================================================= * Coordinate with the VN Scroll-to-Top button * --------------------------------------------------------------------------- * Both floating buttons are anchored to the same corner slot. The scroll-to-top * button owns that slot; when it becomes visible the chat launcher slides UP to * sit above it, and drops straight back into the corner when it hides — so * there is never a dead gap under the launcher on an unscrolled page. * * The scroll-to-top widget's JS toggles `body.vn-scrolltop-active` on scroll and * publishes its own rendered height + gap as --vn-ai-shift, so this self-adjusts * to the button's per-breakpoint size rather than hard-coding an offset. Gated on * the launcher's own opt-in class, set by the widget's "Stack Above * Scroll-to-Top" option. * ====================================================================== */ body.vn-scrolltop-active .vn-ai-chat--stack-above-scrolltop { transform: translateY(calc(-1 * var(--vn-ai-shift, 68px))); } /* ========================================================================= * Visibility helpers * ====================================================================== */ @media (min-width: 1025px) { .vn-ai-chat--hide-desktop { display: none !important; } } @media (max-width: 1024px) { .vn-ai-chat--hide-tablet { display: none !important; } } @media (max-width: 767px) { .vn-ai-chat--hide-mobile { display: none !important; } } /* ========================================================================= * Mobile * ====================================================================== */ @media (max-width: 480px) { .vn-ai-chat__panel { position: fixed; right: 0 !important; left: 0 !important; bottom: 0; width: 100vw; max-width: 100vw; max-height: 86vh; border-radius: 18px 18px 0 0; } .vn-ai-chat__tooltip { display: none; } /* At this width the panel becomes a viewport-anchored bottom sheet (position:fixed above). A transform on the root would turn the launcher into that sheet's containing block and mis-place it, so drop the lift while the panel is open — the launcher sits behind the sheet anyway, so this is invisible. The lift still applies while the panel is closed. */ body.vn-scrolltop-active .vn-ai-chat--stack-above-scrolltop[data-open="true"] { transform: none; } } /* ========================================================================= * Reduced motion * ====================================================================== */ @media (prefers-reduced-motion: reduce) { .vn-ai-chat, .vn-ai-chat *, .vn-ai-chat *::after, .vn-ai-chat *::before { animation: none !important; transition: none !important; } }