andy-widget-react 2.0.5

package/dist/index.cjs

@@ -0,0 +1,4688 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ReactDOM = require('react-dom');
+
+/**
+ * Design tokens for AndyChat
+ * Centralized styling constants and design values
+ */
+
+// Color tokens
+const colors = {
+	// Primary brand colors
+	primary: '#3B82F6',
+	primaryHover: '#2563EB',
+	primaryLight: '#EBF4FF',
+
+	// Basic colors
+	white: '#FFFFFF',
+	black: '#000000',
+
+	// Neutral grays
+	gray100: '#F7FAFC',
+	gray200: '#EDF2F7',
+	gray300: '#E2E8F0',
+	gray400: '#CBD5E0',
+	gray500: '#A0ADB8',
+	gray600: '#718096',
+	gray700: '#4A5568',
+	gray800: '#2D3748',
+	gray900: '#1A202C',
+
+	// Semantic colors
+	success: '#48BB78',
+	warning: '#ED8936',
+	error: '#F56565',
+	info: '#4299E1',
+
+	// UI semantic colors (mapped to grays for consistency)
+	background: '#F9FAFC',
+	text: '#2D3748',
+	textSecondary: '#4A5568',
+	textMuted: '#718096',
+	border: '#E2E8F0',
+	hover: '#F7FAFC',
+
+	// Input specific colors
+	inputBackground: '#F5F5F5',
+	inputButton: '#F0F0F0',
+	inputButtonHover: '#E0E0E0',
+
+	// Chat specific colors
+	userMessage: '#3B82F6',
+	botMessage: '#FFFFFF',
+	userMessageText: '#FFFFFF',
+	botMessageText: '#2D3748',
+
+	// Dark theme colors
+	backgroundDark: '#1A1A1A',
+	backgroundSecondaryDark: '#2C2C2C',
+	backgroundTertiaryDark: '#383838',
+	textDark: '#E0E0E0',
+	textMutedDark: '#A0A0A0',
+	borderDark: '#444444',
+	hoverDark: '#4A4A4A'
+};
+
+// Typography tokens
+const typography = {
+	fontFamily: {
+		primary: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+		mono: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+	},
+	fontSize: {
+		xs: '0.75rem', // 12px
+		sm: '0.875rem', // 14px
+		base: '1rem', // 16px
+		lg: '1.125rem', // 18px
+		xl: '1.25rem', // 20px
+		'2xl': '1.5rem', // 24px
+		'3xl': '1.875rem' // 30px
+	},
+	fontWeight: {
+		normal: '400',
+		medium: '500',
+		semibold: '600',
+		bold: '700'
+	},
+	lineHeight: {
+		tight: '1.25',
+		normal: '1.5',
+		relaxed: '1.625'
+	}
+};
+
+// Spacing tokens
+const spacing = {
+	0: '0',
+	1: '0.25rem', // 4px
+	2: '0.5rem', // 8px
+	3: '0.75rem', // 12px
+	4: '1rem', // 16px
+	5: '1.25rem', // 20px
+	6: '1.5rem', // 24px
+	8: '2rem', // 32px
+	10: '2.5rem', // 40px
+	12: '3rem', // 48px
+	16: '4rem', // 64px
+	20: '5rem', // 80px
+	24: '6rem', // 96px
+	32: '8rem' // 128px
+};
+
+// Border radius tokens
+const borderRadius = {
+	none: '0',
+	sm: '0.125rem', // 2px
+	base: '0.25rem', // 4px
+	md: '0.375rem', // 6px
+	lg: '0.5rem', // 8px
+	xl: '0.75rem', // 12px
+	'2xl': '1rem', // 16px
+	full: '9999px'
+};
+
+// Shadow tokens
+const shadows = {
+	sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+	base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+	md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+	lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+	xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+	inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)'
+};
+
+// Z-index tokens
+const zIndex = {
+	dropdown: 1000,
+	sticky: 1020,
+	fixed: 1030,
+	modalBackdrop: 1040,
+	modal: 1050,
+	popover: 1060,
+	tooltip: 1070,
+	toast: 1080
+};
+
+// Breakpoints for responsive design
+const breakpoints = {
+	sm: '640px',
+	md: '768px',
+	lg: '1024px',
+	xl: '1280px',
+	'2xl': '1536px'
+};
+
+// Animation tokens
+const animation = {
+	duration: {
+		fast: '150ms',
+		normal: '300ms',
+		slow: '500ms'
+	},
+	easing: {
+		linear: 'linear',
+		easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+		easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
+		easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)'
+	}
+};
+
+// Chat specific design tokens
+const chat = {
+	// Chat bubble dimensions
+	bubbleSize: '60px',
+
+	// Chat window dimensions
+	windowWidth: '480px',
+	windowHeight: '680px',
+	windowMinWidth: '320px',
+	windowMinHeight: '400px',
+
+	// Message styling
+	messageMaxWidth: '80%',
+	messagePadding: spacing[3],
+	messageGap: spacing[2],
+
+	// Avatar sizing
+	avatarSize: '32px',
+	avatarSizeSmall: '24px'
+};
+
+/**
+ * Comprehensive theme object for React packages
+ * Provides all design tokens in a structured format ideal for CSS-in-JS solutions
+ */
+const theme = {
+	colors,
+	typography,
+	spacing,
+	borderRadius,
+	shadows,
+	zIndex,
+	breakpoints,
+	animation,
+
+	// Convenience getters for common patterns
+	get primaryColor() {
+		return this.colors.primary
+	},
+
+	get fontFamily() {
+		return this.typography.fontFamily.primary
+	},
+
+	get baseFontSize() {
+		return this.typography.fontSize.base
+	},
+
+	get borderRadiusBase() {
+		return this.borderRadius.base
+	},
+
+	get shadowBase() {
+		return this.shadows.base
+	},
+
+	// Helper methods for React styling
+	spacingValue: value => spacing[value] || value,
+	fontSize: size => typography.fontSize[size] || size,
+	fontWeight: weight => typography.fontWeight[weight] || weight,
+	color: colorName => colors[colorName] || colorName,
+	shadow: shadowName => shadows[shadowName] || shadowName,
+	radius: radiusName => borderRadius[radiusName] || radiusName,
+
+	// Responsive breakpoint utilities for CSS-in-JS
+	breakpoint: {
+		up: size => `@media (min-width: ${breakpoints[size]})`,
+		down: size => {
+			const breakpointValues = Object.values(breakpoints);
+			const breakpointKeys = Object.keys(breakpoints);
+			const index = breakpointKeys.indexOf(size);
+			if (index > 0) {
+				const prevValue = parseInt(breakpointValues[index - 1]) - 1;
+				return `@media (max-width: ${prevValue}px)`
+			}
+			return '@media (max-width: 639px)'
+		},
+		only: size => {
+			const breakpointValues = Object.values(breakpoints);
+			const breakpointKeys = Object.keys(breakpoints);
+			const index = breakpointKeys.indexOf(size);
+			const minWidth = breakpoints[size];
+			if (index < breakpointKeys.length - 1) {
+				const maxValue = parseInt(breakpointValues[index + 1]) - 1;
+				return `@media (min-width: ${minWidth}) and (max-width: ${maxValue}px)`
+			}
+			return `@media (min-width: ${minWidth})`
+		}
+	}
+};
+
+/**
+ * AndyChat Configuration Management
+ * Centralized configuration logic, validation, and embed ID detection
+ */
+
+/**
+ * Configuration constants and defaults
+ */
+const CONFIG = {
+	// Delay in milliseconds before showing the user info form
+	FORM_DISPLAY_DELAY_MS: 1000,
+
+	// Whether to persist session in localStorage
+	PERSIST_SESSION: false,
+
+	// Session storage key
+	SESSION_STORAGE_KEY: 'andy-chat-session-id',
+
+	// API configuration
+	DEFAULT_API_BASE_URL: 'http://localhost:3000/api',
+	PRODUCTION_API_BASE_URL: 'https://app.andypartner.com/api',
+
+	// Embed ID detection methods (in order of priority)
+	EMBED_ID_SOURCES: [
+		'ANDY_CHATBOT_ID', // Global variable
+		'data-andy-embed-id', // Script tag attribute
+		'data-embed-id', // Alternative script tag attribute
+		'andy-embed-id' // URL parameter or meta tag
+	],
+
+	// Default timeouts and limits
+	API_TIMEOUT_MS: 10000,
+	MAX_MESSAGE_LENGTH: 2000,
+	MAX_RETRIES: 3,
+	RETRY_DELAY_MS: 1000,
+
+	// UI behavior defaults
+	WELCOME_POPUP_DEFAULT_DELAY: 3000,
+	TYPING_INDICATOR_DELAY: 500,
+	MESSAGE_ANIMATION_DURATION: 300,
+
+	// Environment detection
+	ENVIRONMENTS: {
+		DEVELOPMENT: 'development',
+		PRODUCTION: 'production'
+	}
+};
+
+let apiBaseUrlOverride = null;
+let warnedNonLocalHostUsingLocalApi = false;
+
+const isLocalhostLikeHostname = hostname => {
+	if (!hostname) return false
+	return (
+		hostname === 'localhost' ||
+		hostname === '127.0.0.1' ||
+		hostname === '::1' ||
+		hostname === '0.0.0.0' ||
+		hostname.startsWith('192.168.')
+	)
+};
+
+const isLocalhostLikeUrl = url => {
+	return /:\/\/(localhost|127\.0\.0\.1|\[::1\]|0\.0\.0\.0|192\.168\.)/i.test(url)
+};
+
+const normalizeApiBaseUrlOrNull = url => {
+	if (url == null) return null
+	if (typeof url !== 'string') return null
+	const raw = url.trim();
+	if (!raw) return null
+
+	// Allow same-origin overrides like "/api".
+	if (raw.startsWith('/')) return raw.replace(/\/+$/, '')
+
+	let parsed;
+	try {
+		parsed = new URL(raw);
+	} catch {
+		return null
+	}
+
+	if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return null
+
+	// Normalize trailing slash.
+	return raw.replace(/\/+$/, '')
+};
+
+const getApiUrlFromScriptTag = () => {
+	if (typeof document === 'undefined') return null
+
+	const scripts = document.querySelectorAll('script');
+	for (const script of scripts) {
+		const src = script.src || '';
+		if (!src.includes('andychat') && !src.includes('andy-chat') && !src.includes('bundle')) continue
+
+		const v = script.getAttribute('data-andy-api-url') || script.getAttribute('data-api-url');
+		if (v && v.trim()) return v.trim()
+	}
+
+	// Fallback: check any script tag that has the attribute (covers renamed bundles).
+	for (const script of scripts) {
+		const v = script.getAttribute('data-andy-api-url') || script.getAttribute('data-api-url');
+		if (v && v.trim()) return v.trim()
+	}
+
+	return null
+};
+
+const setApiBaseUrl = url => {
+	apiBaseUrlOverride = normalizeApiBaseUrlOrNull(url);
+};
+
+/**
+ * Detects the current environment based on various indicators
+ * @returns {string} The detected environment
+ */
+const detectEnvironment = () => {
+	// Explicit env wins. Only accept our known values.
+	if (typeof window !== 'undefined' && window.ANDY_CHAT_ENV) {
+		const env = String(window.ANDY_CHAT_ENV).trim().toLowerCase();
+		if (env === CONFIG.ENVIRONMENTS.DEVELOPMENT) return CONFIG.ENVIRONMENTS.DEVELOPMENT
+		if (env === CONFIG.ENVIRONMENTS.PRODUCTION) return CONFIG.ENVIRONMENTS.PRODUCTION
+	}
+
+	// Hostname-based default.
+	if (typeof window !== 'undefined' && window.location) {
+		const hostname = window.location.hostname || '';
+		if (isLocalhostLikeHostname(hostname)) {
+			return CONFIG.ENVIRONMENTS.DEVELOPMENT
+		}
+	}
+
+	// Default to production
+	return CONFIG.ENVIRONMENTS.PRODUCTION
+};
+
+/**
+ * Gets the appropriate API base URL based on environment and configuration
+ * @returns {string} The API base URL to use
+ */
+const getApiBaseUrl = () => {
+	if (apiBaseUrlOverride) return apiBaseUrlOverride
+
+	// Check for explicit API URL override
+	if (typeof window !== 'undefined' && window.ANDY_CHAT_API_URL) {
+		const normalized = normalizeApiBaseUrlOrNull(window.ANDY_CHAT_API_URL);
+		if (normalized) return normalized
+	}
+
+	// Script tag override (for CDN embeds w/o global vars)
+	const scriptOverride = getApiUrlFromScriptTag();
+	if (scriptOverride) {
+		const normalized = normalizeApiBaseUrlOrNull(scriptOverride);
+		if (normalized) return normalized
+	}
+
+	// Use environment-specific defaults
+	const environment = detectEnvironment();
+	const baseUrl = environment === CONFIG.ENVIRONMENTS.DEVELOPMENT ? CONFIG.DEFAULT_API_BASE_URL : CONFIG.PRODUCTION_API_BASE_URL;
+
+	// Catch misconfig: non-local site trying to call local API.
+	if (
+		!warnedNonLocalHostUsingLocalApi &&
+		typeof window !== 'undefined' &&
+		window.location &&
+		!isLocalhostLikeHostname(window.location.hostname || '') &&
+		isLocalhostLikeUrl(baseUrl)
+	) {
+		warnedNonLocalHostUsingLocalApi = true;
+		console.warn('AndyChat: resolved a localhost API URL on a non-local hostname. Set window.ANDY_CHAT_API_URL or data-andy-api-url to fix.');
+	}
+
+	return baseUrl
+};
+
+/**
+ * Extracts embed ID from script tag attributes
+ * @param {HTMLScriptElement} scriptTag - The script tag to check
+ * @returns {string|null} The embed ID if found
+ */
+const getEmbedIdFromScriptTag = scriptTag => {
+	if (!scriptTag) return null
+
+	// Check various attribute names
+	const attributes = ['data-andy-embed-id', 'data-embed-id', 'data-chatbot-id', 'andy-embed-id', 'embed-id'];
+
+	for (const attr of attributes) {
+		const value = scriptTag.getAttribute(attr);
+		if (value && value.trim()) {
+			return value.trim()
+		}
+	}
+
+	return null
+};
+
+/**
+ * Extracts embed ID from URL parameters
+ * @returns {string|null} The embed ID if found in URL
+ */
+const getEmbedIdFromUrl = () => {
+	if (typeof window === 'undefined' || !window.location) return null
+
+	const urlParams = new URLSearchParams(window.location.search);
+	const paramNames = ['andy-embed-id', 'embed-id', 'chatbot-id', 'andy_embed_id'];
+
+	for (const param of paramNames) {
+		const value = urlParams.get(param);
+		if (value && value.trim()) {
+			return value.trim()
+		}
+	}
+
+	return null
+};
+
+/**
+ * Extracts embed ID from meta tags
+ * @returns {string|null} The embed ID if found in meta tags
+ */
+const getEmbedIdFromMetaTags = () => {
+	if (typeof document === 'undefined') return null
+
+	const metaNames = ['andy:embed-id', 'andy-embed-id', 'chatbot-embed-id', 'andy:chatbot-id'];
+
+	for (const name of metaNames) {
+		const meta = document.querySelector(`meta[name="${name}"], meta[property="${name}"]`);
+		if (meta) {
+			const value = meta.getAttribute('content');
+			if (value && value.trim()) {
+				return value.trim()
+			}
+		}
+	}
+
+	return null
+};
+
+/**
+ * Comprehensive embed ID detection with multiple fallback methods
+ * @returns {string|null} The detected embed ID or null if not found
+ */
+const getEmbedId = () => {
+	// Method 1: Check global variable (highest priority)
+	if (typeof window !== 'undefined' && window.ANDY_CHATBOT_ID) {
+		const id = window.ANDY_CHATBOT_ID;
+		if (typeof id === 'string' && id.trim()) {
+			return id.trim()
+		}
+	}
+
+	// Method 2: Check script tag attributes
+	if (typeof document !== 'undefined') {
+		// Find the AndyChat script tag
+		const scripts = document.querySelectorAll('script');
+		for (const script of scripts) {
+			// Check if this is likely the AndyChat script
+			const src = script.src || '';
+			if (src.includes('andychat') || src.includes('andy-chat')) {
+				const embedId = getEmbedIdFromScriptTag(script);
+				if (embedId) return embedId
+			}
+		}
+
+		// Check all script tags as fallback
+		for (const script of scripts) {
+			const embedId = getEmbedIdFromScriptTag(script);
+			if (embedId) return embedId
+		}
+	}
+
+	// Method 3: Check URL parameters
+	const urlEmbedId = getEmbedIdFromUrl();
+	if (urlEmbedId) return urlEmbedId
+
+	// Method 4: Check meta tags
+	const metaEmbedId = getEmbedIdFromMetaTags();
+	if (metaEmbedId) return metaEmbedId
+
+	// Method 5: Check for data attributes on body or html
+	if (typeof document !== 'undefined') {
+		const body = document.body;
+		const html = document.documentElement;
+
+		for (const element of [body, html]) {
+			if (element) {
+				const embedId = getEmbedIdFromScriptTag(element);
+				if (embedId) return embedId
+			}
+		}
+	}
+
+	console.warn('AndyChat: No embed ID found. Please ensure ANDY_CHATBOT_ID is set or use data-andy-embed-id attribute.');
+	return null
+};
+
+/**
+ * Validates an embed ID format
+ * @param {string} embedId - The embed ID to validate
+ * @returns {boolean} Whether the embed ID is valid
+ */
+const isValidEmbedId = embedId => {
+	if (!embedId || typeof embedId !== 'string') {
+		return false
+	}
+
+	const trimmed = embedId.trim();
+
+	// Check minimum length
+	if (trimmed.length < 3) {
+		return false
+	}
+
+	// Check maximum length (reasonable limit)
+	if (trimmed.length > 100) {
+		return false
+	}
+
+	// Check for valid characters (alphanumeric, hyphens, underscores)
+	const validPattern = /^[a-zA-Z0-9\-_]+$/;
+	if (!validPattern.test(trimmed)) {
+		return false
+	}
+
+	return true
+};
+
+/**
+ * Validates a chatbot configuration object
+ * @param {Object} config - The configuration object to validate
+ * @returns {Object} Validation result with isValid boolean and errors array
+ */
+const validateChatbotConfig = config => {
+	const errors = [];
+
+	if (!config || typeof config !== 'object') {
+		return {
+			isValid: false,
+			errors: ['Configuration must be an object']
+		}
+	}
+
+	// Validate required fields
+	if (!config.name || typeof config.name !== 'string' || config.name.trim().length === 0) {
+		errors.push('Configuration must have a valid name');
+	}
+
+	// Validate optional but important fields
+	if (config.brandColor && typeof config.brandColor === 'string') {
+		const hexPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+		if (!hexPattern.test(config.brandColor)) {
+			errors.push('Brand color must be a valid hex color (e.g., #3B82F6)');
+		}
+	}
+
+	if (config.logoUrl && typeof config.logoUrl === 'string') {
+		try {
+			new URL(config.logoUrl);
+		} catch {
+			errors.push('Logo URL must be a valid URL');
+		}
+	}
+
+	if (config.orientation && !['left', 'right'].includes(config.orientation)) {
+		errors.push('Orientation must be either "left" or "right"');
+	}
+
+	if (config.faqs && !Array.isArray(config.faqs)) {
+		errors.push('FAQs must be an array');
+	} else if (config.faqs) {
+		config.faqs.forEach((faq, index) => {
+			if (!faq.question || !faq.answer) {
+				errors.push(`FAQ item ${index + 1} must have both question and answer`);
+			}
+		});
+	}
+
+	// Validate welcome popup configuration
+	if (config.showWelcomePopup && typeof config.showWelcomePopup === 'object') {
+		if (typeof config.showWelcomePopup.enabled !== 'boolean') {
+			errors.push('Welcome popup "enabled" must be a boolean');
+		}
+		if (config.showWelcomePopup.seconds && typeof config.showWelcomePopup.seconds !== 'number') {
+			errors.push('Welcome popup "seconds" must be a number');
+		}
+	}
+
+	// Validate user info collection configuration
+	if (config.collectUserInfo && typeof config.collectUserInfo === 'object') {
+		if (typeof config.collectUserInfo.enabled !== 'boolean') {
+			errors.push('User info collection "enabled" must be a boolean');
+		}
+	}
+
+	return {
+		isValid: errors.length === 0,
+		errors
+	}
+};
+
+/**
+ * Normalizes and sanitizes a chatbot configuration
+ * @param {Object} config - The raw configuration object
+ * @returns {Object} The normalized configuration
+ */
+const normalizeConfig = config => {
+	if (!config || typeof config !== 'object') {
+		return {}
+	}
+
+	const normalized = { ...config };
+
+	// Normalize strings
+	if (normalized.name && typeof normalized.name === 'string') {
+		normalized.name = normalized.name.trim();
+	}
+
+	if (normalized.headline && typeof normalized.headline === 'string') {
+		normalized.headline = normalized.headline.trim();
+	}
+
+	if (normalized.description && typeof normalized.description === 'string') {
+		normalized.description = normalized.description.trim();
+	}
+
+	if (normalized.welcomeMessage && typeof normalized.welcomeMessage === 'string') {
+		normalized.welcomeMessage = normalized.welcomeMessage.trim();
+	}
+
+	// Normalize brand color
+	if (normalized.brandColor && typeof normalized.brandColor === 'string') {
+		normalized.brandColor = normalized.brandColor.trim().toUpperCase();
+		// Ensure it starts with #
+		if (normalized.brandColor && !normalized.brandColor.startsWith('#')) {
+			normalized.brandColor = '#' + normalized.brandColor;
+		}
+	}
+
+	// Normalize orientation
+	if (normalized.orientation && typeof normalized.orientation === 'string') {
+		normalized.orientation = normalized.orientation.toLowerCase();
+		if (!['left', 'right'].includes(normalized.orientation)) {
+			normalized.orientation = 'right'; // Default fallback
+		}
+	}
+
+	// Normalize URLs
+	if (normalized.logoUrl && typeof normalized.logoUrl === 'string') {
+		normalized.logoUrl = normalized.logoUrl.trim();
+	}
+
+	return normalized
+};
+
+/**
+ * Creates a configuration initialization function for packages
+ * @param {string} packageName - Name of the package initializing
+ * @returns {Object} Configuration initialization result
+ */
+const initializeConfig = (packageName = 'unknown') => {
+	// console.log(`AndyChat ${packageName}: Initializing configuration...`)
+
+	const embedId = getEmbedId();
+
+	if (!embedId) {
+		console.error(`AndyChat ${packageName}: No embed ID found`);
+		return {
+			success: false,
+			error: 'No embed ID found',
+			embedId: null,
+			environment: detectEnvironment(),
+			apiBaseUrl: getApiBaseUrl()
+		}
+	}
+
+	if (!isValidEmbedId(embedId)) {
+		console.error(`AndyChat ${packageName}: Invalid embed ID format: ${embedId}`);
+		return {
+			success: false,
+			error: 'Invalid embed ID format',
+			embedId,
+			environment: detectEnvironment(),
+			apiBaseUrl: getApiBaseUrl()
+		}
+	}
+
+	// console.log(`AndyChat ${packageName}: Found valid embed ID: ${embedId}`)
+
+	return {
+		success: true,
+		embedId,
+		environment: detectEnvironment(),
+		apiBaseUrl: getApiBaseUrl(),
+		config: CONFIG
+	}
+};
+
+/**
+ * AndyChat API client
+ * Handles all communication with the AndyChat backend API
+ */
+
+
+// Default configuration for the chatbot.
+// This serves as the base structure and default values.
+const DEFAULT_CHATBOT_CONFIG = {
+	id: null,
+	name: 'AndyChat',
+	theme: 'light',
+	logoUrl: '',
+	headline: 'Chat with our AI',
+	brandColor: '#3B82F6',
+	description: 'Ask any question and our AI will answer!',
+	orientation: 'right',
+	bubbleStyle: 'icon', // 'icon' = circle only, 'pill' = with label
+	bubbleLabel: null, // Custom label text (null = use default based on defaultLang)
+	useBrandColor: true, // Whether to apply brand color to bubble/messages (default: true)
+	defaultLang: 'en', // Default language for the chatbot
+	showBranding: true, // Whether to show "Powered by Andy" footer (default: true)
+	showWelcomePopup: {
+		enabled: false,
+		seconds: 3,
+		message: 'Welcome! How can I help you today?' // Default welcome popup message
+	},
+	collectUserInfo: {
+		enabled: false,
+		message: "Let's get your name and email so we can follow up with you later."
+	},
+	welcomeMessage: 'Hi there! I am the AI Assistant. How can I help you today?',
+	predefinedQuestions: [],
+	faqs: []
+};
+
+/**
+ * Get default bubble label based on language
+ * @param {string} lang - Language code ('en' or 'es')
+ * @returns {string} Default bubble label
+ */
+const getDefaultBubbleLabel = lang => {
+	return lang === 'es' ? 'Pregunta IA' : 'Ask AI'
+};
+
+/**
+ * @typedef {Object} FAQItem
+ * @property {string} question - The FAQ question
+ * @property {string} answer - The answer to the FAQ question
+ */
+
+/**
+ * @typedef {Object} ChatbotConfigWelcomePopup
+ * @property {boolean} enabled - Whether the welcome popup is enabled.
+ * @property {number} seconds - Delay in seconds before showing the popup.
+ * @property {string} [message] - Custom message for the welcome popup.
+ */
+
+/**
+ * @typedef {Object} ChatbotConfigCollectUserInfo
+ * @property {boolean} enabled - Whether user info collection is enabled.
+ * @property {string} [message] - Custom message for the user info collection prompt.
+ */
+
+/**
+ * @typedef {Object} ChatbotConfig
+ * @property {string | null} id - The chatbot ID from the server.
+ * @property {string} name - The name of the chatbot or organization.
+ * @property {string} theme - UI theme (e.g., 'light', 'dark').
+ * @property {string} logoUrl - URL for the chatbot logo.
+ * @property {string} headline - Headline text for the chatbot.
+ * @property {string} brandColor - Theme color in hex format.
+ * @property {string} description - Description or subtitle for the chatbot.
+ * @property {string} orientation - Chat widget orientation (e.g., 'right', 'left').
+ * @property {boolean} showBranding - Whether to show "Powered by Andy" footer.
+ * @property {ChatbotConfigWelcomePopup} showWelcomePopup - Settings for the welcome popup.
+ * @property {ChatbotConfigCollectUserInfo} collectUserInfo - Settings for user info collection.
+ * @property {string} welcomeMessage - The main welcome message text for the chat window.
+ * @property {Array<{order: number, question: string}>} predefinedQuestions - Array of predefined questions.
+ * @property {FAQItem[]} faqs - Array of mapped FAQ items.
+ */
+
+/**
+ * @typedef {Object} MessageResponse
+ * @property {string} id - Unique message ID
+ * @property {string} text - The bot's response text
+ * @property {string} type - Message type (usually "text")
+ * @property {string} createdAt - Timestamp of when the message was created
+ */
+
+/**
+ * Maps raw API data to the internal ChatbotConfig structure.
+ * This function centralizes the logic for interpreting API responses and applying defaults.
+ * @param {object} apiData - The raw data object from the API response.
+ * @param {ChatbotConfig} defaultConfig - The default configuration object.
+ * @returns {ChatbotConfig} The fully processed chatbot configuration.
+ * @private
+ */
+const _mapApiDataToChatbotConfig = (apiData, defaultConfig) => {
+	if (
+		!apiData ||
+		typeof apiData !== 'object' ||
+		Array.isArray(apiData) ||
+		!apiData.chatbot ||
+		typeof apiData.chatbot !== 'object' ||
+		Array.isArray(apiData.chatbot) ||
+		!isValidEmbedId(apiData.chatbot.id)
+	) {
+		throw new Error('Invalid chatbot configuration response.')
+	}
+
+	const { chatbot, faqs: rawFaqs } = apiData;
+	const appearance = chatbot.appearance || {};
+	const behavior = chatbot.behavior || {};
+
+	// Start with a clone of the default config
+	const config = { ...defaultConfig };
+
+	// Override with server values, using nullish coalescing for safety
+	config.id = chatbot.id ?? defaultConfig.id;
+	config.name = chatbot.name ?? defaultConfig.name;
+	config.defaultLang = chatbot.defaultLang ?? defaultConfig.defaultLang;
+	config.theme = appearance.theme ?? defaultConfig.theme;
+	config.logoUrl = appearance.logoUrl ?? defaultConfig.logoUrl;
+	config.headline = appearance.headline ?? defaultConfig.headline;
+	config.brandColor = appearance.brandColor ?? defaultConfig.brandColor;
+	config.description = appearance.description ?? defaultConfig.description;
+	config.orientation = appearance.orientation ?? defaultConfig.orientation;
+	config.welcomeMessage = appearance.welcomeMessage ?? defaultConfig.welcomeMessage;
+	config.bubbleStyle = appearance.bubbleStyle ?? defaultConfig.bubbleStyle;
+	config.bubbleLabel = appearance.bubbleLabel ?? defaultConfig.bubbleLabel;
+	config.useBrandColor = appearance.useBrandColor ?? defaultConfig.useBrandColor;
+	config.showBranding = chatbot.showBranding ?? defaultConfig.showBranding;
+
+	// Handle showWelcomePopup (expected to be an object from API)
+	if (typeof behavior.showWelcomePopup === 'object' && behavior.showWelcomePopup !== null) {
+		config.showWelcomePopup = {
+			...defaultConfig.showWelcomePopup, // Start with defaults
+			...behavior.showWelcomePopup // Spread API object, overriding defaults
+		};
+	} else {
+		// If not a valid object, use the default object entirely
+		config.showWelcomePopup = { ...defaultConfig.showWelcomePopup };
+	}
+	// Ensure 'message' field for popup has a default if not provided by API and popup is enabled
+	if (config.showWelcomePopup.enabled && typeof config.showWelcomePopup.message === 'undefined') {
+		config.showWelcomePopup.message = defaultConfig.showWelcomePopup.message;
+	}
+
+	// The public Widget has no durable visitor-information submission contract yet.
+	// Keep collection disabled instead of presenting a form whose data cannot be persisted.
+	config.collectUserInfo = {
+		enabled: false,
+		message: behavior.collectUserInfo?.message ?? defaultConfig.collectUserInfo.message
+	};
+
+	// Process predefinedQuestions
+	config.predefinedQuestions = []; // Initialize/reset array
+	if (behavior.predefinedQuestions && Array.isArray(behavior.predefinedQuestions)) {
+		config.predefinedQuestions = behavior.predefinedQuestions
+			.filter(q => q && typeof q.question === 'string') // Ensure valid questions
+			.sort((a, b) => (a.order || 0) - (b.order || 0)); // Sort by order
+	}
+
+	// Process and map FAQs
+	config.faqs = []; // Initialize/reset faqs array from default
+	if (rawFaqs && Array.isArray(rawFaqs)) {
+		config.faqs = rawFaqs
+			.map(faq => ({
+				question: faq.question ?? faq.title,
+				answer: faq.answer ?? faq.content
+			}))
+			.filter(
+				faq =>
+					typeof faq.question === 'string' &&
+					faq.question.trim().length > 0 &&
+					typeof faq.answer === 'string' &&
+					faq.answer.trim().length > 0
+			)
+			.map(faq => ({ question: faq.question.trim(), answer: faq.answer.trim() }));
+	}
+
+	return config
+};
+
+/**
+ * Fetches chatbot configuration from the API
+ * @param {string} embedId - The chatbot embed ID
+ * @returns {Promise<ChatbotConfig>} The chatbot configuration
+ */
+const fetchChatbotConfig = async embedId => {
+	try {
+		const apiBaseUrl = getApiBaseUrl();
+		const response = await fetch(`${apiBaseUrl}/chatbot/${embedId}`);
+		if (!response.ok) {
+			// If response is not OK, but we get JSON, try to parse it for an error message
+			let apiErrorMsg = `Failed to load chatbot config: ${response.status}`;
+			try {
+				const errorData = await response.json();
+				if (errorData && errorData.error) {
+					apiErrorMsg = errorData.error;
+				} else if (errorData && errorData.message) {
+					apiErrorMsg = errorData.message;
+				}
+			} catch (e) {
+				// Ignore if parsing errorData fails, use original status-based message
+			}
+			throw new Error(apiErrorMsg)
+		}
+		const apiData = await response.json();
+		// console.log('API data22:', apiData)
+
+		// Use the mapper to process the API data and apply defaults
+		const config = _mapApiDataToChatbotConfig(apiData, DEFAULT_CHATBOT_CONFIG);
+
+		// console.log('Chatbot config:', config)
+		return config
+	} catch (error) {
+		console.error('AndyChat: Failed to load configuration.');
+		throw error
+	}
+};
+
+/**
+ * Sends a user message to the API
+ * @param {string} embedId - The chatbot embed ID
+ * @param {string} sessionId - The current session ID
+ * @param {string} message - The user's message
+ * @returns {Promise<string>} The bot's response text
+ */
+const sendMessage = async (embedId, sessionId, message) => {
+	try {
+		const apiBaseUrl = getApiBaseUrl();
+		const response = await fetch(`${apiBaseUrl}/messages`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({
+				chatbotId: embedId,
+				sessionId: sessionId,
+				currentUserMessage: {
+					role: 'user',
+					content: message
+				}
+			})
+		});
+
+		if (response.ok) {
+			const data = await response.json();
+			if (data.error || data.limitStatus) {
+				throw new Error(data.error || 'Chat is temporarily unavailable.')
+			}
+			if (typeof data.botResponse !== 'string' || !data.botResponse.trim()) {
+				throw new Error('Unexpected response format from server.')
+			}
+			return data.botResponse
+		} else {
+			// Handle HTTP errors (e.g., 500, 404)
+			let errorData;
+			try {
+				errorData = await response.json();
+			} catch (e) {
+				// If parsing error JSON fails, use status text
+				// Also, if response.text() is available and gives more info, consider using it.
+				const responseText = response.text ? await response.text() : '';
+				throw new Error(response.statusText || `Server returned an error. ${responseText}`.trim())
+			}
+			throw new Error(errorData.error || errorData.message || response.statusText || 'Server returned an error.')
+		}
+	} catch (error) {
+		console.error('AndyChat: Message request failed.');
+		throw error
+	}
+};
+
+/**
+ * Visitor information collection is disabled until Andy exposes a durable public submission
+ * contract. This explicit failure prevents a Widget from reporting a mocked success.
+ * @param {string} embedId - The chatbot embed ID.
+ * @param {string} sessionId - The current session ID.
+ * @param {object} userInfo - User information.
+ * @param {string} userInfo.name - User's name.
+ * @param {string} userInfo.email - User's email.
+ * @returns {Promise<never>}
+ */
+const submitUserInfo = async (embedId, sessionId, userInfo) => {
+	throw new Error('Visitor information collection is not supported by this Widget release.')
+};
+
+/**
+ * AndyChat utility functions
+ * Common utility functions used across the AndyChat system
+ */
+
+/**
+ * Generate a unique session ID
+ * @returns {string} A unique session ID
+ */
+const generateSessionId = () => {
+	if (crypto && crypto.randomUUID) {
+		return crypto.randomUUID()
+	} else {
+		// Fallback for environments without crypto.randomUUID
+		return `andy-${Date.now()}-${Math.random().toString(36).substring(2, 15)}`
+	}
+};
+
+/**
+ * Sanitize URL to prevent XSS attacks
+ * @param {string} url - The URL to sanitize
+ * @returns {string} The sanitized URL
+ */
+const sanitizeUrl = url => {
+	if (!url) return '#'
+
+	// Remove any potential javascript: or data: schemes
+	const trimmedUrl = url.trim();
+	const lowerUrl = trimmedUrl.toLowerCase();
+
+	// Allow http, https, mailto, and tel protocols
+	if (
+		lowerUrl.startsWith('http://') ||
+		lowerUrl.startsWith('https://') ||
+		lowerUrl.startsWith('mailto:') ||
+		lowerUrl.startsWith('tel:')
+	) {
+		return trimmedUrl
+	}
+
+	// If no protocol specified, assume https for regular URLs
+	if (!lowerUrl.includes(':') && !lowerUrl.startsWith('//')) {
+		return 'https://' + trimmedUrl
+	}
+
+	// For any other protocol, return a safe fallback
+	return '#'
+};
+
+/**
+ * Parse markdown text to HTML
+ * @param {string} text - The markdown text to parse
+ * @returns {string} The parsed HTML
+ */
+const parseMarkdown = text => {
+	if (!text) return ''
+
+	let html = text;
+
+	// Handle links first (before bold/italic to avoid conflicts)
+	// Match [text](url) format
+	html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, linkText, url) => {
+		const sanitizedUrl = sanitizeUrl(url);
+		const isExternal = sanitizedUrl.startsWith('http://') || sanitizedUrl.startsWith('https://');
+		const targetAttr = isExternal ? ' target="_blank" rel="noopener noreferrer"' : '';
+		return `<a href="${sanitizedUrl}" class="andy-message-link"${targetAttr}>${linkText}</a>`
+	});
+
+	// Handle bold text (**text** or __text__)
+	html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+	html = html.replace(/__(.*?)__/g, '<strong>$1</strong>');
+
+	// Handle italic text (*text* or _text_) - be careful not to match list asterisks
+	html = html.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
+	html = html.replace(/_([^_\n]+)_/g, '<em>$1</em>');
+
+	// Split into sections by double newlines for paragraphs
+	const sections = html.split('\n\n');
+	const processedSections = [];
+
+	for (let section of sections) {
+		section = section.trim();
+		if (!section) continue
+
+		const lines = section.split('\n');
+		let inList = false;
+		let listType = null;
+		let listItems = [];
+		let paragraphLines = [];
+
+		for (let line of lines) {
+			line = line.trim();
+
+			// Check if it's a heading (# ## ### #### ##### ######)
+			if (/^#{1,6}\s+/.test(line)) {
+				// If we were in a list or paragraph, close it
+				if (paragraphLines.length > 0) {
+					processedSections.push('<p>' + paragraphLines.join('<br>') + '</p>');
+					paragraphLines = [];
+				}
+				if (inList) {
+					if (listType === 'ol') {
+						processedSections.push(`<ol>${listItems.join('')}</ol>`);
+					} else {
+						processedSections.push(`<ul>${listItems.join('')}</ul>`);
+					}
+					inList = false;
+					listType = null;
+					listItems = [];
+				}
+
+				// Determine heading level and extract content
+				const match = line.match(/^(#{1,6})\s+(.+)$/);
+				if (match) {
+					const level = match[1].length; // Number of # characters
+					const content = match[2].trim();
+					processedSections.push(`<h${level}>${content}</h${level}>`);
+				}
+			}
+			// Check if it's a numbered list item
+			else if (/^\d+\.\s+/.test(line)) {
+				// If we were in a different list type or paragraph, close it
+				if (paragraphLines.length > 0) {
+					processedSections.push('<p>' + paragraphLines.join('<br>') + '</p>');
+					paragraphLines = [];
+				}
+				if (inList && listType !== 'ol') {
+					processedSections.push(`<ul>${listItems.join('')}</ul>`);
+					listItems = [];
+				}
+
+				inList = true;
+				listType = 'ol';
+				const content = line.replace(/^\d+\.\s+/, '');
+				listItems.push(`<li>${content}</li>`);
+			}
+			// Check if it's a bullet point
+			else if (/^\*\s+/.test(line)) {
+				// If we were in a different list type or paragraph, close it
+				if (paragraphLines.length > 0) {
+					processedSections.push('<p>' + paragraphLines.join('<br>') + '</p>');
+					paragraphLines = [];
+				}
+				if (inList && listType !== 'ul') {
+					processedSections.push(`<ol>${listItems.join('')}</ol>`);
+					listItems = [];
+				}
+
+				inList = true;
+				listType = 'ul';
+				const content = line.replace(/^\*\s+/, '');
+				listItems.push(`<li>${content}</li>`);
+			}
+			// Regular paragraph line
+			else {
+				// If we were in a list, close it
+				if (inList) {
+					if (listType === 'ol') {
+						processedSections.push(`<ol>${listItems.join('')}</ol>`);
+					} else {
+						processedSections.push(`<ul>${listItems.join('')}</ul>`);
+					}
+					inList = false;
+					listType = null;
+					listItems = [];
+				}
+
+				if (line) {
+					paragraphLines.push(line);
+				}
+			}
+		}
+
+		// Close any remaining open elements
+		if (inList) {
+			if (listType === 'ol') {
+				processedSections.push(`<ol>${listItems.join('')}</ol>`);
+			} else {
+				processedSections.push(`<ul>${listItems.join('')}</ul>`);
+			}
+		} else if (paragraphLines.length > 0) {
+			processedSections.push('<p>' + paragraphLines.join('<br>') + '</p>');
+		}
+	}
+
+	return processedSections.join('')
+};
+
+/**
+ * Create greeting message from config
+ * @param {Object} config - The chatbot configuration
+ * @returns {string|null} The greeting message or null if no config
+ */
+const createGreetingMessage = config => {
+	if (!config) return null
+
+	// Prioritize using config.welcomeMessage if it is a non-empty string
+	if (typeof config.welcomeMessage === 'string' && config.welcomeMessage.trim() !== '') {
+		return config.welcomeMessage
+	}
+
+	// Fallback to name-based message if config.name exists and welcomeMessage wasn't a usable string
+	// This also covers the case where config.welcomeMessage might be boolean `true`
+	// and we want to show a default greeting based on name.
+	if (config.name) {
+		return `Hi there 👋\nI'm the AI Assistant created by ${config.name}!\n\nIs there anything I can help you with?`
+	}
+
+	return null // Return null if no suitable message can be generated
+};
+
+/**
+ * AndyChat styles helper functions
+ * Utilities for generating complete stylesheets from the new CSS architecture
+ * Implements the new CSS file structure from packages/core/src/styles/
+ */
+
+/**
+ * Calculates the relative luminance of a hex color
+ * @param {string} hexColor - Hex color string (e.g., '#FFFFFF' or '#FFF')
+ * @returns {number} Relative luminance value between 0 and 1
+ */
+const getLuminance = (hexColor) => {
+	// Remove # if present
+	const hex = hexColor.replace('#', '');
+
+	// Handle both 3-digit and 6-digit hex
+	const fullHex = hex.length === 3
+		? hex.split('').map(c => c + c).join('')
+		: hex;
+
+	const r = parseInt(fullHex.slice(0, 2), 16) / 255;
+	const g = parseInt(fullHex.slice(2, 4), 16) / 255;
+	const b = parseInt(fullHex.slice(4, 6), 16) / 255;
+
+	// Apply gamma correction
+	const [rLin, gLin, bLin] = [r, g, b].map(c =>
+		c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+	);
+
+	// Calculate luminance using WCAG formula
+	return 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin
+};
+
+/**
+ * Determines if a color is light (needs dark text) or dark (needs light text)
+ * @param {string} hexColor - Hex color string
+ * @returns {boolean} True if the color is light
+ */
+const isLightColor = (hexColor) => {
+	return getLuminance(hexColor) > 0.5
+};
+
+/**
+ * Gets the appropriate contrast text color for a given background
+ * @param {string} bgColor - Background hex color
+ * @returns {string} Either '#000000' for light backgrounds or '#FFFFFF' for dark backgrounds
+ */
+const getContrastTextColor = (bgColor) => {
+	return isLightColor(bgColor) ? '#000000' : '#FFFFFF'
+};
+
+/**
+ * Generates CSS variables string from _variables.css
+ * @returns {string} CSS variables content
+ */
+const generateDesignTokenVariablesString = () => {
+	// For now, using the content we created in _variables.css
+	// In a production build process, this would read the file directly
+	return `
+/* AndyChat Design Tokens as CSS Custom Properties */
+:host {
+	/* === COLOR TOKENS === */
+
+	/* Primary brand colors */
+	--andy-color-primary: #3b82f6;
+	--andy-color-primary-hover: #2563eb;
+	--andy-color-primary-light: #ebf4ff;
+
+	/* Basic colors */
+	--andy-color-white: #ffffff;
+	--andy-color-black: #000000;
+
+	/* Neutral grays */
+	--andy-color-gray-100: #f7fafc;
+	--andy-color-gray-200: #edf2f7;
+	--andy-color-gray-300: #e2e8f0;
+	--andy-color-gray-400: #cbd5e0;
+	--andy-color-gray-500: #a0adb8;
+	--andy-color-gray-600: #718096;
+	--andy-color-gray-700: #4a5568;
+	--andy-color-gray-800: #2d3748;
+	--andy-color-gray-900: #1a202c;
+
+	/* Semantic colors */
+	--andy-color-success: #48bb78;
+	--andy-color-warning: #ed8936;
+	--andy-color-error: #f56565;
+	--andy-color-error-light: #fed7d7;
+	--andy-color-info: #4299e1;
+
+	/* UI semantic colors */
+	--andy-color-background: #f9fafc;
+	--andy-color-text: #2d3748;
+	--andy-color-text-secondary: #4a5568;
+	--andy-color-text-muted: #718096;
+	--andy-color-border: #e2e8f0;
+	--andy-color-hover: #f7fafc;
+
+	/* Input specific colors */
+	--andy-color-input-background: #f5f5f5;
+	--andy-color-input-button: #f0f0f0;
+	--andy-color-input-button-hover: #e0e0e0;
+
+	/* Chat specific colors */
+	--andy-color-user-message: #3b82f6;
+	--andy-color-bot-message: #f5f5f5;
+	--andy-color-user-message-text: #ffffff;
+	--andy-color-bot-message-text: #2d3748;
+
+	/* Dark theme colors */
+	--andy-color-background-dark: #1a1a1a;
+	--andy-color-background-secondary-dark: #2c2c2c;
+	--andy-color-background-tertiary-dark: #383838;
+	--andy-color-text-dark: #e0e0e0;
+	--andy-color-text-muted-dark: #a0a0a0;
+	--andy-color-border-dark: #444444;
+	--andy-color-hover-dark: #4a4a4a;
+
+	/* === TYPOGRAPHY TOKENS === */
+	--andy-font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	--andy-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	--andy-font-size-xs: 0.75rem;
+	--andy-font-size-sm: 0.875rem;
+	--andy-font-size-base: 1rem;
+	--andy-font-size-lg: 1.125rem;
+	--andy-font-size-xl: 1.25rem;
+	--andy-font-size-2xl: 1.5rem;
+	--andy-font-size-3xl: 1.875rem;
+	--andy-font-weight-normal: 400;
+	--andy-font-weight-medium: 500;
+	--andy-font-weight-semibold: 600;
+	--andy-font-weight-bold: 700;
+	--andy-line-height-tight: 1.25;
+	--andy-line-height-normal: 1.4;
+	--andy-line-height-relaxed: 1.625;
+
+	/* === SPACING TOKENS === */
+	--andy-spacing-0: 0;
+	--andy-spacing-1: 0.25rem;
+	--andy-spacing-2: 0.5rem;
+	--andy-spacing-3: 0.75rem;
+	--andy-spacing-4: 1rem;
+	--andy-spacing-5: 1.25rem;
+	--andy-spacing-6: 1.5rem;
+	--andy-spacing-8: 2rem;
+	--andy-spacing-10: 2.5rem;
+	--andy-spacing-12: 3rem;
+	--andy-spacing-16: 4rem;
+	--andy-spacing-20: 5rem;
+	--andy-spacing-24: 6rem;
+	--andy-spacing-32: 8rem;
+
+	/* === BORDER RADIUS TOKENS === */
+	--andy-radius-none: 0;
+	--andy-radius-sm: 0.125rem;
+	--andy-radius-base: 0.25rem;
+	--andy-radius-md: 0.375rem;
+	--andy-radius-lg: 0.5rem;
+	--andy-radius-xl: 1rem;
+	--andy-radius-2xl: 1rem;
+	--andy-radius-full: 9999px;
+
+	/* === SHADOW TOKENS === */
+	--andy-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+	--andy-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+	--andy-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	--andy-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	--andy-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+	--andy-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+
+	/* === Z-INDEX TOKENS === */
+	--andy-z-dropdown: 1000;
+	--andy-z-sticky: 1020;
+	--andy-z-fixed: 1030;
+	--andy-z-modal-backdrop: 1040;
+	--andy-z-modal: 1050;
+	--andy-z-popover: 1060;
+	--andy-z-tooltip: 1070;
+	--andy-z-toast: 1080;
+
+	/* === BREAKPOINT TOKENS === */
+	--andy-breakpoint-sm: 640px;
+	--andy-breakpoint-md: 768px;
+	--andy-breakpoint-lg: 1024px;
+	--andy-breakpoint-xl: 1280px;
+	--andy-breakpoint-2xl: 1536px;
+
+	/* === ANIMATION TOKENS === */
+	--andy-duration-fast: 150ms;
+	--andy-duration-normal: 300ms;
+	--andy-duration-slow: 500ms;
+	--andy-easing-linear: linear;
+	--andy-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+	--andy-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+	--andy-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+	/* === CHAT SPECIFIC TOKENS === */
+	--andy-chat-bubble-size: 50px;
+	--andy-chat-window-width: 400px;
+	--andy-chat-window-height: min(664px, 100% - 104px);
+	--andy-chat-window-min-width: 320px;
+	--andy-chat-window-min-height: 400px;
+	--andy-chat-message-max-width: 80%;
+	--andy-chat-message-padding: var(--andy-spacing-2);
+	--andy-chat-message-gap: var(--andy-spacing-3);
+	--andy-chat-avatar-size: 32px;
+	--andy-chat-avatar-size-small: 24px;
+
+	/* Keyboard handling */
+	--andy-keyboard-height: 0px;
+
+	/* === THEMABLE VARIABLES (Default Light Theme) === */
+	--andy-themable-background: var(--andy-color-background);
+	--andy-themable-background-secondary: var(--andy-color-white);
+	--andy-themable-background-tertiary: var(--andy-color-gray-100);
+	--andy-themable-text: var(--andy-color-text);
+	--andy-themable-text-secondary: var(--andy-color-text-secondary);
+	--andy-themable-text-muted: var(--andy-color-text-muted);
+	--andy-themable-border: var(--andy-color-border);
+	--andy-themable-hover: var(--andy-color-hover);
+	--andy-themable-shadow: rgba(0, 0, 0, 0.1);
+	--andy-themable-shadow-light: rgba(0, 0, 0, 0.08);
+	--andy-themable-button-primary-bg: var(--andy-color-primary);
+	--andy-themable-button-primary-text: var(--andy-color-white);
+	--andy-themable-button-primary-hover: var(--andy-color-primary-hover);
+	--andy-themable-button-secondary-bg: var(--andy-color-gray-200);
+	--andy-themable-button-secondary-text: var(--andy-color-text);
+	--andy-themable-button-secondary-hover: var(--andy-color-gray-300);
+	--andy-themable-input-bg: var(--andy-color-input-background);
+	--andy-themable-input-border: var(--andy-color-border);
+	--andy-themable-input-text: var(--andy-color-text);
+	--andy-themable-input-placeholder: var(--andy-color-text-muted);
+	--andy-themable-message-user-bg: var(--andy-color-user-message);
+	--andy-themable-message-user-text: var(--andy-color-user-message-text);
+	--andy-themable-message-bot-bg: var(--andy-color-bot-message);
+	--andy-themable-message-bot-text: var(--andy-color-bot-message-text);
+	--andy-themable-message-bot-border: transparent;
+	--andy-themable-avatar-bg: var(--andy-color-primary);
+	--andy-themable-avatar-text: var(--andy-color-white);
+	--andy-themable-tooltip-bg: var(--andy-color-gray-800);
+	--andy-themable-tooltip-text: var(--andy-color-white);
+}
+`
+};
+
+/**
+ * Gets the core structural CSS from base, layout, animations, and component files
+ * TODO: In production, this should read from actual CSS files
+ * @returns {string} Combined structural CSS
+ */
+const getCoreStructuralCssString = () => {
+	// For now, returning a condensed version of the key styles
+	// In production, this would read and concatenate all CSS files
+	return `
+/* Base Styles */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host {
+	font-family: var(--andy-font-family-primary);
+	font-size: var(--andy-font-size-base);
+	line-height: var(--andy-line-height-normal);
+	color: var(--andy-themable-text);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* Keyframes */
+@keyframes andy-loader {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
+
+@keyframes andy-dot-pulse {
+	0%, 100% { transform: scale(1); opacity: 0.7; }
+	50% { transform: scale(1.1); opacity: 1; }
+}
+
+@keyframes andy-fade-in-slide-up {
+	from { opacity: 0; transform: translateY(20px); }
+	to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes andy-message-slide-in {
+	from { opacity: 0; transform: translateY(10px); }
+	to { opacity: 1; transform: translateY(0); }
+}
+
+/* Chat Bubble */
+.andy-chat-bubble {
+	position: fixed;
+	bottom: 30px;
+	right: 30px;
+	width: var(--andy-chat-bubble-size);
+	height: var(--andy-chat-bubble-size);
+	z-index: var(--andy-z-fixed);
+	background: var(--andy-themable-button-primary-bg);
+	border: none;
+	border-radius: var(--andy-radius-full);
+	box-shadow: var(--andy-shadow-lg);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	color: var(--andy-themable-button-primary-text);
+	outline: none;
+	transition: all var(--andy-duration-normal) var(--andy-easing-ease-out);
+	/* Hidden until config loads */
+	opacity: 0;
+	pointer-events: none;
+}
+
+/* Show bubble once config is loaded */
+.andy-chat-bubble--loaded {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.andy-chat-bubble:hover {
+	background: var(--andy-themable-button-primary-hover);
+	transform: scale(1.05);
+}
+
+.andy-chat-bubble__icon {
+	width: 28px;
+	height: 28px;
+	flex-shrink: 0;
+	color: currentColor;
+	fill: currentColor;
+	/* Filter to convert black image to white */
+	filter: brightness(0) invert(1);
+}
+
+.andy-chat-bubble__logo {
+	width: 50px;
+	height: 50px;
+	border-radius: var(--andy-radius-full);
+	object-fit: cover;
+	flex-shrink: 0;
+}
+
+/* === PILL STYLE VARIANT === */
+
+/* Pill-shaped bubble with label */
+.andy-chat-bubble--pill {
+	width: auto;
+	height: auto;
+	padding: 12px 16px 12px 20px;
+	border-radius: 9999px;
+	gap: 8px;
+	background: var(--andy-themable-button-primary-bg);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	transition: all 0.2s ease;
+}
+
+.andy-chat-bubble--pill:hover {
+	background: var(--andy-themable-button-primary-hover);
+	transform: scale(1.05);
+}
+
+.andy-chat-bubble--pill:active {
+	transform: translateY(0) scale(0.98);
+}
+
+/* Label text styling */
+.andy-chat-bubble__label {
+	color: var(--andy-themable-button-primary-text);
+	font-size: 14px;
+	font-weight: 500;
+	white-space: nowrap;
+	line-height: 1;
+}
+
+/* Icon styling for pill variant */
+.andy-chat-bubble__icon--pill {
+	width: 26px !important;
+	height: 26px !important;
+	flex-shrink: 0;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+/* Ensure pill icon sizing is enforced */
+.andy-chat-bubble--pill .andy-chat-bubble__icon--pill {
+	width: 26px !important;
+	height: 26px !important;
+	max-width: 26px;
+	max-height: 26px;
+	filter: none;
+}
+
+/* When open, pill collapses to icon only */
+.andy-chat-bubble--pill.andy-chat-bubble--open {
+	width: var(--andy-chat-bubble-size);
+	height: var(--andy-chat-bubble-size);
+	padding: 0;
+	justify-content: center;
+}
+
+.andy-chat-bubble--pill.andy-chat-bubble--open .andy-chat-bubble__label {
+	display: none;
+}
+
+/* Chat Bubble Tooltip */
+.andy-chat-bubble__tooltip {
+	position: absolute;
+	bottom: calc(100% + 10px);
+	right: 50%;
+	transform: translateX(50%);
+	background: var(--andy-themable-tooltip-bg);
+	color: var(--andy-themable-tooltip-text);
+	padding: var(--andy-spacing-2) var(--andy-spacing-3);
+	border-radius: var(--andy-radius-md);
+	font-size: var(--andy-font-size-sm);
+	white-space: nowrap;
+	pointer-events: none;
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity var(--andy-duration-fast) var(--andy-easing-ease-out),
+		visibility var(--andy-duration-fast) var(--andy-easing-ease-out);
+	box-shadow: var(--andy-shadow-md);
+	z-index: calc(var(--andy-z-fixed) + 10);
+}
+
+/* Tooltip arrow */
+.andy-chat-bubble__tooltip::after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 50%;
+	transform: translateX(50%);
+	border: 6px solid transparent;
+	border-top-color: var(--andy-themable-tooltip-bg);
+}
+
+/* Show tooltip on hover */
+.andy-chat-bubble:hover .andy-chat-bubble__tooltip {
+	opacity: 1;
+	visibility: visible;
+}
+
+/* Adjust tooltip position for left orientation */
+:host(.andy-orientation-left) .andy-chat-bubble__tooltip {
+	right: auto;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+:host(.andy-orientation-left) .andy-chat-bubble__tooltip::after {
+	right: auto;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+/* Chat Window */
+.andy-chat-window {
+	position: fixed;
+	bottom: calc(var(--andy-chat-bubble-size) + 40px + var(--andy-spacing-2));
+	right: 25px;
+	width: var(--andy-chat-window-width);
+	min-width: var(--andy-chat-window-min-width);
+	height: var(--andy-chat-window-height);
+	min-height: var(--andy-chat-window-min-height);
+	background: var(--andy-themable-background-secondary);
+	border-radius: var(--andy-radius-xl);
+	box-shadow: var(--andy-shadow-xl);
+	z-index: 9999;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	opacity: 0;
+	transform: translateY(20px);
+	pointer-events: none;
+	transition: all var(--andy-duration-normal) var(--andy-easing-ease-out);
+}
+
+.andy-chat-window--open {
+	opacity: 1;
+	transform: translateY(0);
+	pointer-events: all;
+}
+
+/* Header */
+.andy-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 16px 20px;
+	background: var(--andy-themable-background-secondary);
+	color: var(--andy-themable-text);
+	border-bottom: 1px solid var(--andy-themable-border);
+	height: 60px;
+	position: relative;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
+}
+
+.andy-header__back {
+	display: none; /* Hide back arrow as requested */
+}
+
+.andy-header__back:hover {
+	background: var(--andy-themable-hover);
+}
+
+.andy-header__bot-info {
+	display: flex;
+	align-items: center;
+	gap: var(--andy-spacing-3);
+	flex: 1;
+	min-width: 0; /* Allow it to shrink */
+	margin-right: var(--andy-spacing-2); /* Add some space before close button */
+}
+
+.andy-header__avatar {
+	width: 36px;
+	height: 36px;
+	border-radius: 10px;
+	background: var(--andy-themable-button-primary-bg);
+	color: var(--andy-themable-button-primary-text);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.andy-header__avatar-icon {
+	width: 20px;
+	height: 20px;
+	display: block;
+	object-fit: contain;
+}
+
+.andy-header__avatar-icon--default {
+	filter: brightness(0) invert(1);
+}
+
+.andy-header__avatar-image {
+	width: 36px;
+	height: 36px;
+	object-fit: cover;
+	border-radius: 10px;
+}
+
+/* Remove background when custom logo is used in header */
+.andy-header__avatar:has(.andy-header__avatar-image) {
+	background: transparent;
+	box-shadow: none;
+}
+
+.andy-header__text {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-align: left;
+	align-items: flex-start;
+}
+
+.andy-header__name {
+	font-size: 16px;
+	font-weight: 600;
+	color: var(--andy-themable-text);
+	margin: 0;
+	line-height: 1.2;
+	letter-spacing: -0.01em;
+	text-align: left;
+}
+
+.andy-header__subtitle {
+	display: block;
+	font-size: 13px;
+	color: var(--andy-themable-text-muted);
+	font-weight: 400;
+	margin: 0;
+	margin-top: 2px;
+	line-height: 1.2;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 280px; /* Increased from 200px to allow more text */
+	text-align: left;
+}
+
+.andy-header__faq {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	background: transparent;
+	border: none;
+	border-radius: var(--andy-radius-full);
+	color: var(--andy-themable-text-muted);
+	cursor: pointer;
+	transition: all var(--andy-duration-fast) var(--andy-easing-ease-out);
+	position: relative;
+}
+
+.andy-header__faq:hover {
+	background: rgba(0, 0, 0, 0.04);
+	color: var(--andy-themable-button-primary-bg);
+}
+
+.andy-header__faq-icon {
+	width: 20px;
+	height: 20px;
+	color: currentColor;
+}
+
+.andy-header__close {
+	display: flex; /* Always visible now that FAQ is disabled */
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	background: transparent;
+	border: none;
+	border-radius: var(--andy-radius-full);
+	color: var(--andy-themable-text-muted);
+	cursor: pointer;
+	transition: all var(--andy-duration-fast) var(--andy-easing-ease-out);
+	position: relative;
+	z-index: 1000; /* Ensure it's on top */
+	flex-shrink: 0; /* Prevent it from shrinking */
+}
+
+.andy-header__close:hover {
+	background: rgba(0, 0, 0, 0.04);
+	color: var(--andy-themable-text);
+}
+
+.andy-header__close-icon {
+	width: 20px;
+	height: 20px;
+	color: currentColor;
+}
+
+.andy-header__dropdown {
+	position: absolute;
+	top: 100%;
+	right: 0;
+	margin-top: var(--andy-spacing-2);
+	background: var(--andy-themable-background-secondary);
+	border: 1px solid var(--andy-themable-border);
+	border-radius: var(--andy-radius-base);
+	box-shadow: var(--andy-shadow-lg);
+	min-width: 160px;
+	padding: var(--andy-spacing-2);
+	z-index: 10;
+	display: none;
+}
+
+.andy-header__dropdown--open {
+	display: block;
+}
+
+.andy-dropdown__item {
+	display: flex;
+	align-items: center;
+	gap: var(--andy-spacing-2);
+	width: 100%;
+	padding: var(--andy-spacing-2) var(--andy-spacing-3);
+	background: transparent;
+	border: none;
+	border-radius: var(--andy-radius-sm);
+	color: var(--andy-themable-text);
+	font-size: var(--andy-font-size-sm);
+	cursor: pointer;
+	transition: all var(--andy-duration-fast) var(--andy-easing-ease-out);
+	text-align: left;
+}
+
+.andy-dropdown__item:hover {
+	background: var(--andy-themable-hover);
+}
+
+/* Base Button Styles */
+.andy-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--andy-spacing-2);
+	padding: var(--andy-spacing-2) var(--andy-spacing-4);
+	border: none;
+	border-radius: var(--andy-radius-base);
+	font-family: var(--andy-font-family-primary);
+	font-size: var(--andy-font-size-sm);
+	font-weight: var(--andy-font-weight-medium);
+	cursor: pointer;
+	transition: all var(--andy-duration-fast) var(--andy-easing-ease-out);
+	text-decoration: none;
+	outline: none;
+}
+
+.andy-button:focus-visible {
+	outline: 2px solid var(--andy-themable-button-primary-bg);
+	outline-offset: 2px;
+}
+
+.andy-button--primary {
+	background: var(--andy-themable-button-primary-bg);
+	color: var(--andy-themable-button-primary-text);
+}
+
+.andy-button--primary:hover {
+	background: var(--andy-themable-button-primary-hover);
+}
+
+.andy-button--secondary {
+	background: var(--andy-themable-button-secondary-bg);
+	color: var(--andy-themable-button-secondary-text);
+}
+
+.andy-button--secondary:hover {
+	background: var(--andy-themable-button-secondary-hover);
+}
+
+/* Messages */
+.andy-chat-window__messages {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 0;
+	padding: var(--andy-spacing-5) var(--andy-spacing-6);
+	overflow-y: auto;
+	background: var(--andy-themable-background-secondary);
+	min-height: 0;
+	padding: 24px 20px 0px;
+}
+
+/* Subtitle section at top of messages */
+.andy-chat-subtitle {
+	font-size: 14px;
+	color: var(--andy-themable-text-secondary);
+	text-align: center;
+	line-height: 21px;
+	margin-bottom: var(--andy-spacing-5);
+}
+
+.andy-chat-subtitle__text {
+	padding: 0;
+	margin: 0;
+	text-wrap: balance;
+}
+
+
+
+.andy-message-container {
+	display: flex;
+	margin-bottom: 8px;
+	max-width: 75%;
+	align-items: flex-start;
+	gap: var(--andy-spacing-3);
+	animation: andy-message-slide-in var(--andy-duration-normal) var(--andy-easing-ease-out);
+}
+
+.andy-message-container--user {
+	margin-left: auto;
+	flex-direction: row-reverse;
+}
+
+.andy-message-container--bot {
+	margin-right: auto;
+	flex-direction: row;
+	align-items: flex-start;
+}
+
+/* Bot message header with icon + name */
+.andy-bot-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-bottom: 8px;
+}
+
+.andy-bot-header__icon {
+	width: 24px;
+	height: 24px;
+	background: var(--andy-themable-button-primary-bg);
+	color: var(--andy-themable-button-primary-text);
+	border-radius: 6px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.andy-bot-header__icon svg {
+	width: 14px;
+	height: 14px;
+	display: block;
+}
+
+.andy-bot-header__icon-image {
+	width: 24px;
+	height: 24px;
+	object-fit: cover;
+	border-radius: 6px;
+	display: block;
+}
+
+.andy-bot-header__icon-image--default {
+	width: 14px;
+	height: 14px;
+	object-fit: contain;
+	filter: brightness(0) invert(1);
+}
+
+/* Remove background when custom logo is used (not default icon) */
+.andy-bot-header__icon:has(.andy-bot-header__icon-image:not(.andy-bot-header__icon-image--default)) {
+	background: transparent;
+	box-shadow: none;
+}
+
+.andy-bot-header__name {
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--andy-themable-text);
+	line-height: 1.2;
+	letter-spacing: -0.01em;
+}
+
+.andy-avatar {
+	display: none; /* Hide regular avatar, using new bot header */
+}
+
+.andy-message {
+	border-radius: var(--andy-radius-lg);
+	font-size: var(--andy-font-size-sm);
+	line-height: var(--andy-line-height-normal);
+	word-wrap: break-word;
+	position: relative;
+}
+
+.andy-message--user {
+	background: var(--andy-themable-button-primary-bg);
+	color: var(--andy-themable-message-user-text);
+	border-radius: 20px;
+	padding: 8px 12px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	min-height: 36px;
+	font-weight: 500;
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+	line-height: 1.4;
+}
+
+.andy-message--bot {
+	background: var(--andy-themable-message-bot-bg);
+	color: var(--andy-themable-message-bot-text);
+	border-radius: 20px;
+	border: 1px solid var(--andy-themable-message-bot-border);
+	padding: 12px 16px;
+	box-shadow: none;
+	line-height: 1.5;
+	text-align: left;
+}
+
+/* Message Sub-Components */
+.andy-message__content {
+	line-height: 1.4;
+	margin: 0;
+	overflow-wrap: break-word;
+	word-break: break-word;
+	text-align: left;
+}
+
+/* User message content centering */
+.andy-message--user .andy-message__content {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.andy-message--user .andy-message__content p {
+	margin: 0;
+}
+
+/* Bot message content left alignment */
+.andy-message--bot .andy-message__content {
+	text-align: left;
+}
+
+.andy-message__content p {
+	margin: 0;
+	margin-bottom: var(--andy-spacing-1);
+}
+
+.andy-message__content p:last-child {
+	margin-bottom: 0;
+}
+
+.andy-message__content h1,
+.andy-message__content h2,
+.andy-message__content h3,
+.andy-message__content h4,
+.andy-message__content h5,
+.andy-message__content h6 {
+	margin: 0 0 var(--andy-spacing-1) 0;
+	font-weight: var(--andy-font-weight-bold);
+}
+
+.andy-message__content ul,
+.andy-message__content ol {
+	margin: var(--andy-spacing-2) 0;
+	padding-left: var(--andy-spacing-4);
+}
+
+.andy-message__content li {
+	margin-bottom: var(--andy-spacing-1);
+}
+
+.andy-message__content code {
+	background: rgba(0, 0, 0, 0.1);
+	padding: var(--andy-spacing-1) var(--andy-spacing-2);
+	border-radius: var(--andy-radius-sm);
+	font-family: monospace;
+	font-size: 0.875em;
+}
+
+.andy-message__content strong {
+	font-weight: var(--andy-font-weight-bold);
+}
+
+.andy-message__content em {
+	font-style: italic;
+}
+
+.andy-message__link {
+	color: var(--andy-themable-button-primary-bg);
+	text-decoration: none;
+}
+
+.andy-message__link:hover {
+	text-decoration: underline;
+}
+
+/* Avatar Sub-Components */
+.andy-avatar__icon {
+	width: 18px;
+	height: 18px;
+	flex-shrink: 0;
+	display: block;
+	object-fit: contain;
+}
+
+.andy-avatar__icon--default {
+	filter: brightness(0) invert(1);
+}
+
+.andy-avatar__image {
+	width: 100%;
+	height: 100%;
+	border-radius: var(--andy-radius-full);
+	object-fit: cover;
+}
+
+/* Typing Indicator Component */
+.andy-typing-indicator {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--andy-spacing-2) var(--andy-spacing-3);
+	min-height: 32px;
+}
+
+.andy-typing-indicator__dot {
+	width: 6px;
+	height: 6px;
+	border-radius: var(--andy-radius-full);
+	background-color: var(--andy-themable-text-secondary);
+	margin: 0 2px;
+	opacity: 0.7;
+	animation: andy-dot-pulse var(--andy-duration-slow) infinite var(--andy-easing-ease-in-out);
+}
+
+.andy-typing-indicator__dot:nth-child(1) {
+	animation-delay: 0s;
+}
+
+.andy-typing-indicator__dot:nth-child(2) {
+	animation-delay: 0.2s;
+}
+
+.andy-typing-indicator__dot:nth-child(3) {
+	animation-delay: 0.4s;
+}
+
+
+.andy-message__greeting-title {
+	font-size: var(--andy-font-size-lg);
+	font-weight: var(--andy-font-weight-bold);
+	margin-bottom: var(--andy-spacing-1);
+}
+
+.andy-message__greeting-content {
+	font-size: var(--andy-font-size-sm);
+	opacity: 0.9;
+}
+
+.andy-message--loading .andy-message__content {
+	padding: var(--andy-spacing-2) 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.andy-message--error {
+	border-color: var(--andy-color-error);
+	background: var(--andy-color-error-light);
+}
+
+/* Input */
+.andy-input-container {
+	display: flex;
+	flex-direction: column;
+	padding: var(--andy-spacing-5) var(--andy-spacing-6);
+	border-top: 1px solid var(--andy-themable-border);
+	background: var(--andy-themable-background-secondary);
+	border-radius: 0 0 var(--andy-radius-xl) var(--andy-radius-xl);
+}
+
+.andy-input {
+	display: flex;
+	position: relative;
+	width: 100%;
+	align-items: center;
+	gap: var(--andy-spacing-2);
+}
+
+.andy-input__field {
+	flex: 1;
+	padding: 12px var(--andy-spacing-4);
+	padding-left: var(--andy-spacing-4);
+	padding-right: 50px;
+	border: 1px solid var(--andy-themable-border);
+	border-radius: 24px;
+	font-family: var(--andy-font-family-primary);
+	font-size: var(--andy-font-size-sm);
+	line-height: var(--andy-line-height-normal);
+	background: var(--andy-themable-input-bg);
+	color: var(--andy-themable-input-text);
+	min-height: 48px;
+	outline: none;
+	resize: none;
+	transition: all var(--andy-duration-normal) var(--andy-easing-ease-out);
+	box-shadow: none;
+}
+
+.andy-input__field:focus {
+	border-color: var(--andy-themable-text-muted);
+	background: var(--andy-themable-background-secondary);
+	box-shadow: none;
+}
+
+.andy-input__button {
+	position: absolute;
+	right: 5px;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 30px;
+	height: 30px;
+	border: none;
+	border-radius: var(--andy-radius-full);
+	background: var(--andy-themable-button-primary-bg);
+	color: var(--andy-themable-button-primary-text);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all var(--andy-duration-normal) var(--andy-easing-ease-out);
+	outline: none;
+	z-index: 1;
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+}
+
+.andy-input__button:hover {
+	background: var(--andy-themable-button-primary-hover);
+	transform: translateY(-50%) scale(1.05);
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+}
+
+.andy-input__button:disabled {
+	background: #cccccc;
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.andy-input__button svg,
+.andy-input__button-icon {
+	pointer-events: none;
+}
+
+.andy-input__button:disabled:hover {
+	background: #cccccc;
+	transform: translateY(-50%);
+}
+
+/* Bottom Section */
+.andy-chat-window__bottom {
+	display: flex;
+	flex-direction: column;
+	background: var(--andy-themable-background-secondary);
+	border-top: none;
+	border-radius: 0 0 var(--andy-radius-xl) var(--andy-radius-xl);
+	overflow: visible;
+}
+
+/* Predefined Questions */
+.andy-predefined-questions {
+	padding: 20px 24px 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	overflow: visible;
+}
+
+.andy-predefined-questions__header {
+	display: none; /* Hide header as requested */
+}
+
+.andy-predefined-questions__title {
+	display: none; /* Hide title as requested */
+}
+
+.andy-predefined-questions__list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	overflow: visible;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.andy-predefined-questions__list::-webkit-scrollbar {
+	display: none;
+}
+
+.andy-predefined-question {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--andy-spacing-1);
+	padding: 8px 16px;
+	background: var(--andy-themable-background-secondary);
+	border: 1px solid var(--andy-themable-border);
+	border-radius: var(--andy-radius-full);
+	color: var(--andy-themable-text);
+	font-size: 13px;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all var(--andy-duration-normal) var(--andy-easing-ease-out);
+	white-space: normal;
+	text-align: left;
+	flex-shrink: 1;
+	width: 100%;
+	max-width: 100%;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+	min-height: 36px;
+	position: relative;
+	overflow: visible;
+}
+
+.andy-predefined-question:hover {
+	background: var(--andy-themable-hover);
+	border-color: var(--andy-themable-text-muted);
+	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	transform: translateY(-1px);
+	z-index: 10;
+}
+
+.andy-predefined-question:active {
+	transform: translateY(0);
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+.andy-predefined-question:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+	transform: none;
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+}
+
+.andy-predefined-question__icon {
+	font-size: 12px;
+}
+
+.andy-predefined-question__text {
+	flex: 1 1 auto;
+	line-height: 1.4;
+	overflow-wrap: anywhere;
+}
+
+/* Updated Input Container */
+.andy-chat-window__input {
+	padding: var(--andy-spacing-3) var(--andy-spacing-5);
+}
+
+.andy-input-container {
+	display: flex;
+	flex-direction: column;
+	padding: 0;
+	border-top: none;
+	background: transparent;
+	border-radius: 0;
+}
+
+/* Footer */
+.andy-chat-window__footer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--andy-spacing-1) var(--andy-spacing-3);
+	background: transparent;
+	border-radius: 0 0 var(--andy-radius-xl) var(--andy-radius-xl);
+}
+
+.andy-chat-window__footer-link {
+	text-decoration: none;
+	display: inline-flex;
+	align-items: center;
+	gap: 3px;
+	padding: 4px 10px;
+	background: var(--andy-themable-hover);
+	border-radius: 10px;
+	transition: all 0.2s ease;
+	font-size: 10px;
+	opacity: 0.8;
+	position: relative;
+	/* Ensure reasonable touch target size for mobile */
+	min-height: 28px;
+}
+
+.andy-chat-window__footer-link:hover {
+	opacity: 1;
+	transform: translateY(-1px) scale(1.02);
+	box-shadow: 0 2px 8px var(--andy-themable-shadow);
+	background: var(--andy-themable-hover);
+}
+
+.andy-chat-window__footer-link:active {
+	transform: translateY(0) scale(1);
+	box-shadow: 0 1px 4px var(--andy-themable-shadow-light);
+}
+
+.andy-chat-window__footer-link:focus-visible {
+	outline: 2px solid var(--andy-themable-button-primary-bg);
+	outline-offset: 2px;
+	opacity: 1;
+}
+
+/* External link icon - using ::after instead of ::before */
+.andy-chat-window__footer-link::after {
+	content: '↗';
+	font-size: 9px;
+	margin-left: 1px;
+	transition: transform 0.2s ease;
+	display: inline-block;
+	color: var(--andy-themable-text-secondary);
+	opacity: 0.8;
+}
+
+.andy-chat-window__footer-link:hover::after {
+	transform: translate(1px, -1px);
+	opacity: 1;
+}
+
+.andy-chat-window__footer-text {
+	color: var(--andy-themable-text-secondary);
+	font-size: 10px;
+	font-weight: var(--andy-font-weight-medium);
+	letter-spacing: 0.01em;
+	line-height: 1.4;
+}
+
+/* FAQ */
+.andy-chat-window__faq {
+	display: none;
+	flex: 1;
+	flex-direction: column;
+	background: var(--andy-themable-background);
+	overflow-y: auto;
+}
+
+.andy-faq {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.andy-faq__header {
+	display: flex;
+	flex-direction: column;
+	padding: var(--andy-spacing-5) var(--andy-spacing-6) var(--andy-spacing-4);
+	border-bottom: 1px solid var(--andy-themable-border);
+	background: var(--andy-themable-background-secondary);
+}
+
+.andy-faq__back-button {
+	display: flex;
+	align-items: center;
+	gap: var(--andy-spacing-2);
+	margin-bottom: var(--andy-spacing-4);
+	padding: var(--andy-spacing-2) 0;
+	background: none;
+	border: none;
+	color: var(--andy-themable-button-primary-bg);
+	font-size: var(--andy-font-size-sm);
+	cursor: pointer;
+	transition: color var(--andy-duration-fast) var(--andy-easing-ease-out);
+	outline: none;
+}
+
+.andy-faq__back-button:hover {
+	color: var(--andy-themable-button-primary-hover);
+}
+
+.andy-faq__back-icon {
+	width: 20px;
+	height: 20px;
+	flex-shrink: 0;
+}
+
+.andy-faq__title {
+	font-size: var(--andy-font-size-xl);
+	font-weight: var(--andy-font-weight-bold);
+	color: var(--andy-themable-text);
+	margin: 0;
+	text-align: center;
+}
+
+.andy-faq__list {
+	flex: 1;
+	padding: var(--andy-spacing-4) var(--andy-spacing-6);
+	overflow-y: auto;
+}
+
+.andy-faq-item {
+	margin-bottom: var(--andy-spacing-4);
+	border: 1px solid var(--andy-themable-border);
+	border-radius: var(--andy-radius-lg);
+	background: var(--andy-themable-background-secondary);
+	overflow: hidden;
+	transition: all var(--andy-duration-fast) var(--andy-easing-ease-out);
+}
+
+.andy-faq-item:hover {
+	border-color: var(--andy-themable-button-primary-bg);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.andy-faq-item__question {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	padding: var(--andy-spacing-4) var(--andy-spacing-5);
+	background: none;
+	border: none;
+	text-align: left;
+	font-size: var(--andy-font-size-base);
+	font-weight: var(--andy-font-weight-medium);
+	color: var(--andy-themable-text);
+	cursor: pointer;
+	transition: all var(--andy-duration-fast) var(--andy-easing-ease-out);
+	outline: none;
+}
+
+.andy-faq-item__question:hover {
+	background: var(--andy-themable-hover);
+}
+
+.andy-faq-item__chevron {
+	width: 16px;
+	height: 16px;
+	flex-shrink: 0;
+	transition: transform var(--andy-duration-fast) var(--andy-easing-ease-out);
+	color: var(--andy-themable-text-secondary);
+}
+
+.andy-faq-item--open .andy-faq-item__chevron {
+	transform: rotate(180deg);
+}
+
+.andy-faq-item__answer {
+	display: grid;
+	grid-template-rows: 0fr;
+	overflow: hidden;
+	transition: grid-template-rows var(--andy-duration-normal) var(--andy-easing-ease-out);
+	background: var(--andy-themable-background);
+}
+
+.andy-faq-item--open .andy-faq-item__answer {
+	grid-template-rows: 1fr;
+}
+
+.andy-faq-item__answer-content {
+	min-height: 0;
+	padding: 0 var(--andy-spacing-5);
+}
+
+.andy-faq-item--open .andy-faq-item__answer-content {
+	padding: 0 var(--andy-spacing-5) var(--andy-spacing-4);
+}
+
+.andy-faq-item__answer p {
+	margin: 0 0 var(--andy-spacing-2) 0;
+	color: var(--andy-themable-text-secondary);
+	line-height: var(--andy-line-height-normal);
+}
+
+.andy-faq-item__answer p:last-child {
+	margin-bottom: 0;
+}
+
+.andy-faq-item__answer ul,
+.andy-faq-item__answer ol {
+	margin: var(--andy-spacing-2) 0;
+	padding-left: var(--andy-spacing-4);
+	color: var(--andy-themable-text-secondary);
+}
+
+.andy-faq-item__answer li {
+	margin-bottom: var(--andy-spacing-1);
+}
+
+/* Welcome Popup */
+.andy-welcome-popup {
+	position: fixed;
+	bottom: 100px;
+	right: 20px;
+	z-index: 9998;
+	display: none;
+	max-width: 280px;
+	animation: andy-fade-in-slide-up 0.3s ease-out;
+}
+
+/* Left orientation */
+.andy-welcome-popup.andychat-popup-left,
+:host(.andy-orientation-left) .andy-welcome-popup {
+	right: auto;
+	left: 20px;
+}
+
+.andy-welcome-popup__content {
+	background: var(--andy-themable-background-secondary);
+	border-radius: var(--andy-radius-lg);
+	padding: 16px;
+	box-shadow: var(--andy-shadow-lg);
+	position: relative;
+	border: 1px solid var(--andy-themable-border);
+}
+
+.andy-welcome-popup__message {
+	font-size: 14px;
+	line-height: 1.5;
+	color: var(--andy-themable-text);
+	padding-right: 24px;
+}
+
+.andy-welcome-popup__close {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	width: 24px;
+	height: 24px;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 4px;
+	color: var(--andy-themable-text-muted);
+	transition: all 0.15s ease;
+}
+
+.andy-welcome-popup__close:hover {
+	background: var(--andy-themable-hover);
+	color: var(--andy-themable-text);
+}
+
+.andy-welcome-popup__close-icon {
+	width: 16px;
+	height: 16px;
+}
+
+.andy-welcome-popup__arrow {
+	position: absolute;
+	bottom: -8px;
+	right: 30px;
+	width: 16px;
+	height: 16px;
+	background: var(--andy-themable-background-secondary);
+	border-right: 1px solid var(--andy-themable-border);
+	border-bottom: 1px solid var(--andy-themable-border);
+	transform: rotate(45deg);
+}
+
+/* Left orientation arrow */
+.andy-welcome-popup.andychat-popup-left .andy-welcome-popup__arrow,
+:host(.andy-orientation-left) .andy-welcome-popup .andy-welcome-popup__arrow {
+	right: auto;
+	left: 30px;
+}
+
+/* Loading States */
+.andy-loading__dots {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--andy-spacing-2);
+	padding: var(--andy-spacing-4);
+	min-height: 60px;
+}
+
+.andy-loading__dot {
+	width: 12px;
+	height: 12px;
+	border-radius: var(--andy-radius-full);
+	background-color: var(--andy-themable-text-muted);
+	opacity: 0.6;
+}
+
+.andy-loading__dot:nth-child(1) {
+	animation: andy-dot-pulse var(--andy-duration-slow) infinite var(--andy-easing-ease-in-out) 0s;
+}
+
+.andy-loading__dot:nth-child(2) {
+	animation: andy-dot-pulse var(--andy-duration-slow) infinite var(--andy-easing-ease-in-out) 0.2s;
+}
+
+.andy-loading__dot:nth-child(3) {
+	animation: andy-dot-pulse var(--andy-duration-slow) infinite var(--andy-easing-ease-in-out) 0.4s;
+}
+
+/* Responsive */
+@media (max-width: 520px) {
+	.andy-chat-window {
+		position: fixed !important;
+		bottom: 1rem !important;
+		left: 1rem !important;
+		right: 1rem !important;
+		top: 1rem !important;
+		width: calc(100% - 2rem) !important;
+		height: calc(100% - 2rem) !important;
+		max-width: 500px !important;
+		max-height: calc(100vh - 2rem) !important;
+		max-height: calc(100dvh - 2rem) !important;
+		margin: 0 auto !important;
+		border-radius: var(--andy-radius-xl) !important;
+		box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) !important;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		background: var(--andy-themable-background-secondary) !important;
+		/* Card-like floating design */
+		/* Add smooth scale animation on mobile */
+		transform: scale(0.95);
+		opacity: 0;
+	}
+
+	.andy-chat-window--open {
+		transform: scale(1);
+		opacity: 1;
+	}
+
+	/* Adjust for very small screens */
+	@media (max-height: 600px) {
+		.andy-chat-window {
+			bottom: 0.5rem !important;
+			top: 0.5rem !important;
+			left: 0.5rem !important;
+			right: 0.5rem !important;
+			width: calc(100% - 1rem) !important;
+			height: calc(100% - 1rem) !important;
+		}
+	}
+
+	/* No special handling for keyboard - let browser handle it naturally */
+	.andy-chat-window--keyboard-open {
+		/* Browser handles positioning automatically with our margin-based approach */
+	}
+
+	/* Ensure the window content is properly laid out */
+	.andy-chat-window__messages {
+		flex: 1 1 auto;
+		min-height: 0;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.andy-chat-window__bottom {
+		flex: 0 0 auto;
+		position: relative;
+		z-index: 10;
+	}
+
+	/* Fix input font size to prevent iOS zoom */
+	.andy-input__field {
+		font-size: 16px !important; /* Prevents iOS zoom on focus */
+		line-height: 1.5 !important;
+		padding-right: 60px !important; /* More space for larger button */
+	}
+
+	/* Larger send button on mobile for better touch targets */
+	.andy-input__button {
+		width: 40px !important;
+		height: 40px !important;
+		right: 8px !important;
+	}
+
+	/* Add expanded touch target for submit button on mobile only */
+	.andy-input__button::before {
+		content: '';
+		position: absolute;
+		top: -15px;
+		right: -15px;
+		bottom: -15px;
+		left: -15px;
+		border-radius: var(--andy-radius-full);
+		/* Invisible expanded touch target */
+	}
+
+	/* Ensure proper header spacing on mobile */
+	.andy-header {
+		min-height: 60px;
+		flex-shrink: 0;
+		position: sticky;
+		top: 0;
+		z-index: 100;
+		background: var(--andy-themable-background-secondary);
+	}
+
+	/* Ensure messages don't go under header */
+	.andy-chat-window__messages {
+		padding-top: var(--andy-spacing-3);
+	}
+
+	.andy-chat-bubble {
+		width: 56px;
+		height: 56px;
+		bottom: 30px;
+		/* Ensure bubble is tappable on mobile */
+		cursor: pointer;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+		touch-action: manipulation;
+	}
+
+	.andy-chat-bubble__icon {
+		width: 20px;
+		height: 20px;
+	}
+
+	/* Pill style on mobile - override fixed dimensions */
+	.andy-chat-bubble--pill {
+		width: auto !important;
+		height: auto !important;
+		padding: 10px 16px 10px 12px;
+		gap: 6px;
+	}
+
+	.andy-chat-bubble--pill .andy-chat-bubble__label {
+		font-size: 13px;
+	}
+
+	.andy-chat-bubble--pill .andy-chat-bubble__icon--pill {
+		width: 22px !important;
+		height: 22px !important;
+	}
+
+	/* When open on mobile, pill collapses to icon only */
+	.andy-chat-bubble--pill.andy-chat-bubble--open {
+		width: 56px !important;
+		height: 56px !important;
+		padding: 0;
+	}
+
+	/* Show close button on mobile */
+	.andy-header__close {
+		display: flex;
+	}
+
+	/* Add expanded touch target for close button on mobile only */
+	.andy-header__close::before {
+		content: '';
+		position: absolute;
+		top: -12px;
+		right: -12px;
+		bottom: -12px;
+		left: -12px;
+		border-radius: var(--andy-radius-full);
+		/* Invisible expanded touch target */
+	}
+
+	/* Hide FAQ button on mobile to make room for close button */
+	.andy-header__faq {
+		display: none;
+	}
+}
+
+/* Desktop keyboard handling (for testing) */
+@media (min-width: 521px) {
+	/* Desktop retains original positioning behavior */
+	.andy-chat-window {
+		transition: transform 0.3s ease-out;
+	}
+
+	/* Optional: Add keyboard handling for desktop if needed */
+	.andy-chat-window--keyboard-open {
+		/* No transform on desktop - keyboard doesn't affect viewport */
+	}
+}
+
+/* Orientation */
+:host(.andy-orientation-right) .andy-chat-bubble {
+	right: 30px;
+	left: auto;
+}
+
+:host(.andy-orientation-left) .andy-chat-bubble {
+	left: 30px;
+	right: auto;
+}
+
+:host(.andy-orientation-right) .andy-chat-window {
+	right: 30px;
+	left: auto;
+}
+
+:host(.andy-orientation-left) .andy-chat-window {
+	left: 30px;
+	right: auto;
+}
+`
+};
+
+/**
+ * Gets theme definitions CSS string
+ * @returns {string} Theme CSS content
+ */
+const getThemeDefinitionsCssString = () => {
+	return `
+/* Light Theme (Default) */
+:host(.andy-theme-light) {
+	--andy-themable-background: var(--andy-color-background);
+	--andy-themable-background-secondary: var(--andy-color-white);
+	--andy-themable-background-tertiary: var(--andy-color-gray-100);
+	--andy-themable-text: var(--andy-color-text);
+	--andy-themable-text-secondary: var(--andy-color-text-secondary);
+	--andy-themable-text-muted: var(--andy-color-text-muted);
+	--andy-themable-border: var(--andy-color-border);
+	--andy-themable-hover: var(--andy-color-hover);
+	--andy-themable-button-primary-bg: var(--andy-color-primary);
+	--andy-themable-button-primary-text: var(--andy-color-white);
+	--andy-themable-button-primary-hover: var(--andy-color-primary-hover);
+	--andy-themable-button-secondary-bg: var(--andy-color-gray-200);
+	--andy-themable-button-secondary-text: var(--andy-color-text);
+	--andy-themable-button-secondary-hover: var(--andy-color-gray-300);
+	--andy-themable-input-bg: var(--andy-color-input-background);
+	--andy-themable-input-border: var(--andy-color-border);
+	--andy-themable-input-text: var(--andy-color-text);
+	--andy-themable-input-placeholder: var(--andy-color-text-muted);
+	--andy-themable-message-user-bg: var(--andy-color-user-message);
+	--andy-themable-message-user-text: var(--andy-color-user-message-text);
+	--andy-themable-message-bot-bg: var(--andy-color-bot-message);
+	--andy-themable-message-bot-text: var(--andy-color-bot-message-text);
+	--andy-themable-avatar-bg: var(--andy-color-primary);
+	--andy-themable-avatar-text: var(--andy-color-white);
+	--andy-themable-tooltip-bg: var(--andy-color-gray-800);
+	--andy-themable-tooltip-text: var(--andy-color-white);
+}
+
+/* Dark Theme */
+:host(.andy-theme-dark) {
+	--andy-themable-background: var(--andy-color-background-dark);
+	--andy-themable-background-secondary: var(--andy-color-background-secondary-dark);
+	--andy-themable-background-tertiary: var(--andy-color-background-tertiary-dark);
+	--andy-themable-text: var(--andy-color-text-dark);
+	--andy-themable-text-secondary: var(--andy-color-text-dark);
+	--andy-themable-text-muted: var(--andy-color-text-muted-dark);
+	--andy-themable-border: var(--andy-color-border-dark);
+	--andy-themable-hover: var(--andy-color-hover-dark);
+	--andy-themable-shadow: rgba(0, 0, 0, 0.3);
+	--andy-themable-shadow-light: rgba(0, 0, 0, 0.2);
+	--andy-themable-button-primary-bg: var(--andy-color-primary);
+	--andy-themable-button-primary-text: var(--andy-color-white);
+	--andy-themable-button-primary-hover: var(--andy-color-primary-hover);
+	--andy-themable-button-secondary-bg: var(--andy-color-background-tertiary-dark);
+	--andy-themable-button-secondary-text: var(--andy-color-text-dark);
+	--andy-themable-button-secondary-hover: var(--andy-color-hover-dark);
+	--andy-themable-input-bg: var(--andy-color-background-tertiary-dark);
+	--andy-themable-input-border: var(--andy-color-border-dark);
+	--andy-themable-input-text: var(--andy-color-text-dark);
+	--andy-themable-input-placeholder: var(--andy-color-text-muted-dark);
+	--andy-themable-message-user-bg: var(--andy-color-user-message);
+	--andy-themable-message-user-text: var(--andy-color-user-message-text);
+	--andy-themable-message-bot-bg: #353535;
+	--andy-themable-message-bot-text: var(--andy-color-text-dark);
+	--andy-themable-message-bot-border: rgba(255, 255, 255, 0.08);
+	--andy-themable-avatar-bg: var(--andy-color-primary);
+	--andy-themable-avatar-text: var(--andy-color-white);
+	--andy-themable-tooltip-bg: var(--andy-color-background-secondary-dark);
+	--andy-themable-tooltip-text: var(--andy-color-text-dark);
+}
+
+/* Auto Theme */
+:host(.andy-theme-auto) {
+	--andy-themable-background: var(--andy-color-background);
+	--andy-themable-background-secondary: var(--andy-color-white);
+	--andy-themable-background-tertiary: var(--andy-color-gray-100);
+	--andy-themable-text: var(--andy-color-text);
+	--andy-themable-text-secondary: var(--andy-color-text-secondary);
+	--andy-themable-text-muted: var(--andy-color-text-muted);
+	--andy-themable-border: var(--andy-color-border);
+	--andy-themable-hover: var(--andy-color-hover);
+	--andy-themable-button-primary-bg: var(--andy-color-primary);
+	--andy-themable-button-primary-text: var(--andy-color-white);
+	--andy-themable-button-primary-hover: var(--andy-color-primary-hover);
+	--andy-themable-button-secondary-bg: var(--andy-color-gray-200);
+	--andy-themable-button-secondary-text: var(--andy-color-text);
+	--andy-themable-button-secondary-hover: var(--andy-color-gray-300);
+	--andy-themable-input-bg: var(--andy-color-input-background);
+	--andy-themable-input-border: var(--andy-color-border);
+	--andy-themable-input-text: var(--andy-color-text);
+	--andy-themable-input-placeholder: var(--andy-color-text-muted);
+	--andy-themable-message-user-bg: var(--andy-color-user-message);
+	--andy-themable-message-user-text: var(--andy-color-user-message-text);
+	--andy-themable-message-bot-bg: var(--andy-color-bot-message);
+	--andy-themable-message-bot-text: var(--andy-color-bot-message-text);
+	--andy-themable-avatar-bg: var(--andy-color-primary);
+	--andy-themable-avatar-text: var(--andy-color-white);
+	--andy-themable-tooltip-bg: var(--andy-color-gray-800);
+	--andy-themable-tooltip-text: var(--andy-color-white);
+}
+
+@media (prefers-color-scheme: dark) {
+	:host(.andy-theme-auto) {
+		--andy-themable-background: var(--andy-color-background-dark);
+		--andy-themable-background-secondary: var(--andy-color-background-secondary-dark);
+		--andy-themable-background-tertiary: var(--andy-color-background-tertiary-dark);
+		--andy-themable-text: var(--andy-color-text-dark);
+		--andy-themable-text-secondary: var(--andy-color-text-dark);
+		--andy-themable-text-muted: var(--andy-color-text-muted-dark);
+		--andy-themable-border: var(--andy-color-border-dark);
+		--andy-themable-hover: var(--andy-color-hover-dark);
+		--andy-themable-shadow: rgba(0, 0, 0, 0.3);
+		--andy-themable-shadow-light: rgba(0, 0, 0, 0.2);
+		--andy-themable-button-secondary-bg: var(--andy-color-background-tertiary-dark);
+		--andy-themable-button-secondary-text: var(--andy-color-text-dark);
+		--andy-themable-button-secondary-hover: var(--andy-color-hover-dark);
+		--andy-themable-input-bg: var(--andy-color-background-tertiary-dark);
+		--andy-themable-input-border: var(--andy-color-border-dark);
+		--andy-themable-input-text: var(--andy-color-text-dark);
+		--andy-themable-input-placeholder: var(--andy-color-text-muted-dark);
+		--andy-themable-message-bot-bg: #353535;
+		--andy-themable-message-bot-text: var(--andy-color-text-dark);
+		--andy-themable-message-bot-border: rgba(255, 255, 255, 0.08);
+		--andy-themable-tooltip-bg: var(--andy-color-background-secondary-dark);
+		--andy-themable-tooltip-text: var(--andy-color-text-dark);
+	}
+}
+`
+};
+
+/**
+ * Generates brand color override CSS
+ * @param {string} brandColor - The brand color to apply
+ * @param {boolean} useBrandColor - Whether to apply brand color (default: true)
+ * @returns {string} CSS with brand color overrides
+ */
+const getBrandColorOverrideCssString = (brandColor, useBrandColor = true) => {
+	if (!useBrandColor) {
+		// Brand color disabled - use theme-aware neutral colors
+		return `
+/* Bubble: neutral background based on theme */
+.andy-chat-bubble,
+.andy-chat-bubble--pill {
+	background: var(--andy-themable-background-tertiary) !important;
+	color: var(--andy-themable-text) !important;
+}
+.andy-chat-bubble:hover,
+.andy-chat-bubble--pill:hover {
+	background: var(--andy-themable-hover) !important;
+}
+
+/* Bubble icon: use theme text color for contrast */
+.andy-chat-bubble__icon {
+	color: var(--andy-themable-text) !important;
+	stroke: var(--andy-themable-text) !important;
+	fill: var(--andy-themable-text) !important;
+	filter: none !important; /* Reset the brightness filter */
+}
+.andy-chat-bubble__icon path {
+	stroke: inherit !important;
+	fill: inherit !important;
+}
+
+/* Dark mode: use filter to make icon white */
+.andy-chat-bubble--theme-dark .andy-chat-bubble__icon {
+	filter: brightness(0) invert(1) !important;
+}
+.andy-chat-bubble--theme-dark .andy-chat-bubble__icon path {
+	fill: currentColor !important;
+}
+.andy-chat-bubble__label {
+	color: var(--andy-themable-text) !important;
+}
+
+/* User messages: subtle neutral background */
+.andy-message--user {
+	background: var(--andy-themable-background-tertiary) !important;
+	color: var(--andy-themable-text) !important;
+}
+
+/* Send button: neutral with proper icon contrast */
+.andy-input__button {
+	background: var(--andy-themable-background-tertiary) !important;
+	color: var(--andy-themable-text) !important;
+}
+.andy-input__button:hover {
+	background: var(--andy-themable-hover) !important;
+}
+.andy-input__button-icon {
+	color: var(--andy-themable-text) !important;
+	fill: var(--andy-themable-text) !important;
+}
+
+/* Avatar: neutral */
+.andy-bot-header__icon {
+	background: var(--andy-themable-background-tertiary) !important;
+	color: var(--andy-themable-text) !important;
+}
+
+/* Header avatar: neutral */
+.andy-header__avatar {
+	background: var(--andy-themable-background-tertiary) !important;
+	color: var(--andy-themable-text) !important;
+}
+.andy-header__avatar-icon--default {
+	filter: none !important;
+}
+/* Dark mode: make header avatar icon white */
+:host(.andy-theme-dark) .andy-header__avatar-icon--default {
+	filter: brightness(0) invert(1) !important;
+}
+
+/* Remove welcome popup accent border */
+.andy-welcome-popup__content {
+	border-left: none !important;
+}
+
+/* Predefined questions and links: neutral text color */
+.andy-predefined-question,
+.andy-message__link,
+.andy-chat-faq__back {
+	color: var(--andy-themable-text-secondary) !important;
+}
+.andy-predefined-question:hover,
+.andy-message__link:hover,
+.andy-chat-faq__back:hover {
+	color: var(--andy-themable-text) !important;
+}
+`
+	}
+
+	// Use default blue if no brand color provided
+	const effectiveBrandColor = brandColor || '#3B82F6';
+
+	// Calculate a hover variant (darker by default)
+	const hoverColor = effectiveBrandColor; // For now, using same color. Could implement color manipulation
+
+	// Calculate contrast text color for accessibility
+	const textColor = getContrastTextColor(effectiveBrandColor);
+
+	return `
+:host {
+	--andy-color-primary: ${effectiveBrandColor};
+	--andy-color-primary-hover: ${hoverColor};
+	--andy-themable-button-primary-bg: ${effectiveBrandColor};
+	--andy-themable-button-primary-hover: ${hoverColor};
+	--andy-themable-button-primary-text: ${textColor};
+	--andy-themable-message-user-bg: ${effectiveBrandColor};
+	--andy-themable-message-user-text: ${textColor};
+	--andy-themable-avatar-bg: ${effectiveBrandColor};
+}
+
+/* Override theme-specific button text with contrast color */
+:host(.andy-theme-light),
+:host(.andy-theme-dark),
+:host(.andy-theme-auto) {
+	--andy-themable-button-primary-text: ${textColor};
+	--andy-themable-message-user-text: ${textColor};
+}
+
+/* Chat bubble icon contrast color - use !important to override theme defaults */
+.andy-chat-bubble {
+	color: ${textColor} !important;
+}
+.andy-chat-bubble__icon {
+	color: ${textColor} !important;
+	stroke: ${textColor} !important;
+	fill: ${textColor} !important;
+}
+.andy-chat-bubble__icon path {
+	stroke: inherit !important;
+	fill: inherit !important;
+}
+.andy-chat-bubble__label {
+	color: ${textColor} !important;
+}
+
+/* Send button contrast color */
+.andy-input__button {
+	color: ${textColor} !important;
+}
+.andy-input__button-icon {
+	color: ${textColor} !important;
+	fill: ${textColor} !important;
+}
+
+/* User message text contrast */
+.andy-message--user {
+	color: ${textColor} !important;
+}
+
+/* Welcome popup accent border when brand color is enabled */
+.andy-welcome-popup__content {
+	border-left: 3px solid ${effectiveBrandColor};
+}
+`
+};
+
+/**
+ * Master function: Gets complete stylesheet for the chatbot
+ * @param {Object} customizationProps - Customization options
+ * @param {string} [customizationProps.color] - Brand color
+ * @param {boolean} [customizationProps.useBrandColor] - Whether to apply brand color (default: true)
+ * @param {string} [customizationProps.theme] - Theme (light, dark, auto)
+ * @param {string} [customizationProps.orientation] - Orientation (left, right)
+ * @param {string} [customizationProps.fontFamily] - Custom font family
+ * @param {string} [customizationProps.borderRadius] - Custom border radius
+ * @returns {string} Complete CSS stylesheet
+ */
+const getFullStylesheet = (customizationProps = {}) => {
+	let finalCss = '';
+
+	// Add design token variables
+	finalCss += generateDesignTokenVariablesString();
+
+	// Add core structural CSS
+	finalCss += getCoreStructuralCssString();
+
+	// Add theme definitions
+	finalCss += getThemeDefinitionsCssString();
+
+	// Apply brand color overrides (or neutral colors if useBrandColor is false)
+	// Always call this function - it handles defaults internally
+	finalCss += getBrandColorOverrideCssString(
+		customizationProps.color,
+		customizationProps.useBrandColor ?? true
+	);
+
+	// Apply font family overrides
+	if (customizationProps.fontFamily) {
+		finalCss += `
+:host {
+	--andy-font-family-primary: "${customizationProps.fontFamily.replace(/"/g, '\\"')}";
+}
+`;
+	}
+
+	// Apply border radius overrides
+	if (customizationProps.borderRadius) {
+		finalCss += `
+:host {
+	--andy-radius-base: ${customizationProps.borderRadius};
+	--andy-radius-lg: ${customizationProps.borderRadius};
+}
+`;
+	}
+
+	return finalCss
+};
+
+/**
+ * Gets host element classes for theme and orientation
+ * @param {Object} props - Customization properties
+ * @param {string} [props.theme='light'] - Theme (light, dark, auto)
+ * @param {string} [props.orientation='right'] - Orientation (left, right)
+ * @returns {string} Space-separated class names
+ */
+const getHostClasses = (props = {}) => {
+	const theme = props.theme || 'light';
+	const orientation = props.orientation || 'right';
+	return `andy-theme-${theme} andy-orientation-${orientation}`
+};
+
+/**
+ * AndyChat UI Constants
+ * Single source of truth for all UI elements (SVGs, images, etc.)
+ * Both vanilla and React implementations MUST use these constants
+ */
+
+// Chat Bubble Icons and Images
+// Embed the bot icon as a data URI so every bundler (React & vanilla) renders the same SVG.
+const chatBubbleIconUrl =
+	'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvdC1pY29uIGx1Y2lkZS1ib3QiPjxwYXRoIGQ9Ik0xMiA4VjRIOCIvPjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxMiIgeD0iNCIgeT0iOCIgcng9IjIiLz48cGF0aCBkPSJNMiAxNGgyIi8+PHBhdGggZD0iTTIwIDE0aDIiLz48cGF0aCBkPSJNMTUgMTN2MiIvPjxwYXRoIGQ9Ik05IDEzdjIiLz48L3N2Zz4K';
+
+const CHAT_BUBBLE_DEFAULT_ICON_URL = chatBubbleIconUrl;
+const CHAT_BUBBLE_DEFAULT_ICON = `<img src="${CHAT_BUBBLE_DEFAULT_ICON_URL}" alt="Chat" class="andy-chat-bubble__icon" />`;
+
+// Footer Constants
+const FOOTER_TEXT = 'Powered by Andy';
+const FOOTER_URL = 'https://andypartner.com/';
+
+/**
+ * Get footer URL with tracking parameter based on current hostname
+ * @returns {string} Footer URL with ref parameter
+ */
+const getFooterUrl = () => {
+	try {
+		// Check if we're in a browser environment
+		if (typeof window === 'undefined' || !window.location) {
+			return FOOTER_URL
+		}
+
+		// Get hostname, handling various edge cases
+		let hostname = window.location.hostname || 'direct';
+
+		// Handle localhost and IP addresses
+		if (
+			hostname === 'localhost' ||
+			hostname === '127.0.0.1' ||
+			hostname.match(/^\d+\.\d+\.\d+\.\d+$/)
+		) {
+			hostname = 'localhost';
+		} else {
+			// Clean the hostname - remove www prefix
+			hostname = hostname.replace(/^www\./, '').toLowerCase();
+		}
+
+		// URL encode the hostname to handle international domains
+		const encodedHost = encodeURIComponent(hostname);
+
+		// Build the URL with ref parameter
+		return `${FOOTER_URL}?ref=${encodedHost}`
+	} catch (error) {
+		// Fallback for any errors (SSR, restricted environments, etc.)
+		// Silently fall back to base URL without tracking
+		return FOOTER_URL
+	}
+};
+
+// SVG Icons - extracted from vanilla implementation
+const SVG_ICONS = {
+	// Chevron down (for close state) - same filled icon as Vanilla for parity
+	chevronDown: `<svg class="andy-chat-bubble__icon" width="28" height="28" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+  </svg>`};
+
+/**
+ * Keyboard detection utility for handling mobile virtual keyboards
+ * Provides cross-browser support for detecting keyboard open/close events
+ */
+
+class KeyboardDetector {
+	constructor() {
+		this.isKeyboardOpen = false;
+		this.keyboardHeight = 0;
+		this.listeners = new Set();
+		this.inputElement = null;
+		this.viewportHeight = window.innerHeight;
+		this.visualViewport = window.visualViewport;
+		
+		this.initializeDetection();
+	}
+
+	/**
+	 * Initialize keyboard detection
+	 */
+	initializeDetection() {
+		// Use Visual Viewport API if available (most modern browsers)
+		if (this.visualViewport) {
+			this.visualViewport.addEventListener('resize', this.handleViewportResize.bind(this));
+			this.visualViewport.addEventListener('scroll', this.handleViewportScroll.bind(this));
+		} else {
+			// Fallback for older browsers
+			window.addEventListener('resize', this.handleWindowResize.bind(this));
+		}
+
+		// Additional detection via focus/blur events
+		document.addEventListener('focusin', this.handleFocusIn.bind(this), true);
+		document.addEventListener('focusout', this.handleFocusOut.bind(this), true);
+
+		// Orientation change handler
+		window.addEventListener('orientationchange', this.handleOrientationChange.bind(this));
+	}
+
+	/**
+	 * Handle visual viewport resize (modern browsers)
+	 */
+	handleViewportResize() {
+		const currentHeight = this.visualViewport.height;
+		const heightDifference = window.innerHeight - currentHeight;
+
+		// If viewport shrunk by more than 100px, keyboard is likely open
+		if (heightDifference > 100) {
+			this.setKeyboardOpen(true, heightDifference);
+		} else if (heightDifference < 50) {
+			this.setKeyboardOpen(false, 0);
+		}
+	}
+
+	/**
+	 * Handle visual viewport scroll
+	 */
+	handleViewportScroll() {
+		// On iOS, viewport scrolls when keyboard opens
+		if (this.visualViewport.offsetTop > 0) {
+			this.setKeyboardOpen(true, this.visualViewport.offsetTop);
+		}
+	}
+
+	/**
+	 * Handle window resize (fallback for older browsers)
+	 */
+	handleWindowResize() {
+		const currentHeight = window.innerHeight;
+		const heightDifference = this.viewportHeight - currentHeight;
+
+		// Significant height reduction likely means keyboard opened
+		if (heightDifference > 100) {
+			this.setKeyboardOpen(true, heightDifference);
+		} else if (Math.abs(heightDifference) < 50) {
+			this.setKeyboardOpen(false, 0);
+			this.viewportHeight = currentHeight;
+		}
+	}
+
+	/**
+	 * Handle input focus
+	 */
+	handleFocusIn(e) {
+		const isInput = ['input', 'textarea'].includes(e.target.tagName.toLowerCase());
+		if (isInput) {
+			this.inputElement = e.target;
+			// Delay to allow keyboard animation
+			setTimeout(() => {
+				if (this.inputElement === e.target) {
+					this.checkKeyboardStatus();
+				}
+			}, 300);
+		}
+	}
+
+	/**
+	 * Handle input blur
+	 */
+	handleFocusOut(e) {
+		const isInput = ['input', 'textarea'].includes(e.target.tagName.toLowerCase());
+		if (isInput && this.inputElement === e.target) {
+			this.inputElement = null;
+			// Delay to allow keyboard animation
+			setTimeout(() => {
+				if (!this.inputElement) {
+					this.setKeyboardOpen(false, 0);
+				}
+			}, 300);
+		}
+	}
+
+	/**
+	 * Handle orientation change
+	 */
+	handleOrientationChange() {
+		// Reset viewport height after orientation change
+		setTimeout(() => {
+			this.viewportHeight = window.innerHeight;
+			this.checkKeyboardStatus();
+		}, 500);
+	}
+
+	/**
+	 * Check keyboard status (for browsers without Visual Viewport API)
+	 */
+	checkKeyboardStatus() {
+		if (!this.visualViewport) {
+			const currentHeight = window.innerHeight;
+			const heightDifference = this.viewportHeight - currentHeight;
+			
+			if (this.inputElement && heightDifference > 100) {
+				this.setKeyboardOpen(true, heightDifference);
+			}
+		}
+	}
+
+	/**
+	 * Set keyboard state and notify listeners
+	 */
+	setKeyboardOpen(isOpen, height) {
+		const changed = this.isKeyboardOpen !== isOpen || this.keyboardHeight !== height;
+		
+		this.isKeyboardOpen = isOpen;
+		this.keyboardHeight = height;
+
+		if (changed) {
+			this.notifyListeners();
+		}
+	}
+
+	/**
+	 * Add listener for keyboard state changes
+	 */
+	addListener(callback) {
+		this.listeners.add(callback);
+		// Immediately notify with current state
+		callback({
+			isOpen: this.isKeyboardOpen,
+			height: this.keyboardHeight
+		});
+	}
+
+	/**
+	 * Remove listener
+	 */
+	removeListener(callback) {
+		this.listeners.delete(callback);
+	}
+
+	/**
+	 * Notify all listeners of state change
+	 */
+	notifyListeners() {
+		const state = {
+			isOpen: this.isKeyboardOpen,
+			height: this.keyboardHeight
+		};
+		
+		this.listeners.forEach(callback => {
+			try {
+				callback(state);
+			} catch (error) {
+				console.error('Error in keyboard detector listener:', error);
+			}
+		});
+	}
+
+	/**
+	 * Get current keyboard state
+	 */
+	getState() {
+		return {
+			isOpen: this.isKeyboardOpen,
+			height: this.keyboardHeight
+		}
+	}
+
+	/**
+	 * Cleanup
+	 */
+	destroy() {
+		if (this.visualViewport) {
+			this.visualViewport.removeEventListener('resize', this.handleViewportResize.bind(this));
+			this.visualViewport.removeEventListener('scroll', this.handleViewportScroll.bind(this));
+		} else {
+			window.removeEventListener('resize', this.handleWindowResize.bind(this));
+		}
+		
+		document.removeEventListener('focusin', this.handleFocusIn.bind(this), true);
+		document.removeEventListener('focusout', this.handleFocusOut.bind(this), true);
+		window.removeEventListener('orientationchange', this.handleOrientationChange.bind(this));
+		
+		this.listeners.clear();
+	}
+}
+
+// Create singleton instance
+let keyboardDetectorInstance = null;
+
+/**
+ * Get or create keyboard detector instance
+ */
+function getKeyboardDetector() {
+	if (!keyboardDetectorInstance) {
+		keyboardDetectorInstance = new KeyboardDetector();
+	}
+	return keyboardDetectorInstance
+}
+
+/**
+ * Update CSS custom property on host element
+ */
+function updateKeyboardHeight(hostElement, height) {
+	if (hostElement) {
+		hostElement.style.setProperty('--andy-keyboard-height', `${height}px`);
+	}
+}
+
+/**
+ * Mobile detection utility for AndyChat
+ * Provides reliable mobile device detection with multiple methods
+ */
+
+/**
+ * Check if the current device is mobile
+ * Uses multiple detection methods for reliability
+ * @returns {boolean} True if device is mobile, false otherwise
+ */
+const isMobileDevice = () => {
+	// Method 1: Check for touch capability and screen size
+	const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+	const isSmallScreen = window.innerWidth <= 768;
+	
+	// Method 2: Check user agent for mobile patterns
+	const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+	const isMobileUserAgent = mobileRegex.test(navigator.userAgent);
+	
+	// Method 4: Check CSS media query
+	const isMobileMediaQuery = window.matchMedia('(max-width: 768px) and (hover: none)').matches;
+	
+	// Return true if any strong mobile indicators are present
+	// Prioritize touch + small screen or explicit mobile user agent
+	return (hasTouch && isSmallScreen) || isMobileUserAgent || isMobileMediaQuery
+};
+
+const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessage, bubbleLabel, theme, orientation, brandColor, bubbleStyle, useBrandColor, logoUrl, previewMode = false, initialOpen = false }) => {
+    const [config, setConfig] = react.useState(null);
+    const [isOpen, setIsOpen] = react.useState(initialOpen);
+    const [messages, setMessages] = react.useState([]);
+    const [isLoading, setIsLoading] = react.useState(false);
+    const [sessionId, setSessionId] = react.useState(() => generateSessionId());
+    const [shadowReady, setShadowReady] = react.useState(false);
+    const [showPredefinedQuestions, setShowPredefinedQuestions] = react.useState(true);
+    const [userInfoCollected, setUserInfoCollected] = react.useState(false);
+    const [isCollectingUserInfo, setIsCollectingUserInfo] = react.useState(false);
+    const [pendingMessage, setPendingMessage] = react.useState(null);
+    const [showWelcomePopup, setShowWelcomePopup] = react.useState(false);
+    const containerRef = react.useRef(null);
+    const shadowRef = react.useRef(null);
+    const portalRef = react.useRef(null);
+    const hasOpenedRef = react.useRef(false);
+    const messagesContainerRef = react.useRef(null);
+    const welcomePopupShownRef = react.useRef(false);
+    const welcomePopupTimeoutRef = react.useRef(null);
+    // Create shadow DOM container on mount
+    react.useEffect(() => {
+        if (!containerRef.current)
+            return;
+        let shadow = shadowRef.current;
+        if (!shadow) {
+            if (containerRef.current.shadowRoot) {
+                shadow = containerRef.current.shadowRoot;
+            }
+            else {
+                shadow = containerRef.current.attachShadow({ mode: 'open' });
+            }
+            shadowRef.current = shadow;
+        }
+        let styleElement = shadow.querySelector('style');
+        if (!styleElement) {
+            styleElement = document.createElement('style');
+            shadow.appendChild(styleElement);
+        }
+        styleElement.textContent = getFullStylesheet({
+            color: config?.brandColor,
+            useBrandColor: config?.useBrandColor ?? true,
+            theme: config?.theme || 'light',
+            orientation: config?.orientation || 'right'
+        });
+        if (containerRef.current) {
+            const hostClasses = getHostClasses({
+                theme: config?.theme || 'light',
+                orientation: config?.orientation || 'right'
+            });
+            containerRef.current.className = hostClasses;
+        }
+        if (!portalRef.current) {
+            let portalTarget = shadow.querySelector('.andy-react-portal');
+            if (!portalTarget) {
+                portalTarget = document.createElement('div');
+                portalTarget.className = 'andy-react-portal';
+                shadow.appendChild(portalTarget);
+            }
+            portalRef.current = portalTarget;
+        }
+        setShadowReady(true);
+        const keyboardDetector = getKeyboardDetector();
+        const keyboardListener = ({ isOpen: kbOpen, height }) => {
+            updateKeyboardHeight(containerRef.current, height);
+            const chatWindow = shadowRef.current?.querySelector('.andy-chat-window');
+            if (chatWindow) {
+                if (kbOpen && height > 0) {
+                    chatWindow.classList.add('andy-chat-window--keyboard-open');
+                }
+                else {
+                    chatWindow.classList.remove('andy-chat-window--keyboard-open');
+                }
+            }
+        };
+        keyboardDetector.addListener(keyboardListener);
+        return () => {
+            keyboardDetector.removeListener(keyboardListener);
+            shadowRef.current = null;
+            portalRef.current = null;
+            setShadowReady(false);
+        };
+    }, []);
+    // Update styles when config changes
+    react.useEffect(() => {
+        if (!shadowRef.current || !config)
+            return;
+        const styleElement = shadowRef.current.querySelector('style');
+        if (styleElement) {
+            styleElement.textContent = getFullStylesheet({
+                color: config.brandColor,
+                useBrandColor: config.useBrandColor ?? true,
+                theme: config.theme || 'light',
+                orientation: config.orientation || 'right'
+            });
+        }
+        if (containerRef.current) {
+            const hostClasses = getHostClasses({
+                theme: config.theme || 'light',
+                orientation: config.orientation || 'right'
+            });
+            containerRef.current.className = hostClasses;
+        }
+    }, [config]);
+    // Close button handler
+    react.useEffect(() => {
+        if (!shadowReady || !shadowRef.current || !isOpen)
+            return;
+        const timer = setTimeout(() => {
+            const closeButton = shadowRef.current?.querySelector('#andy-close-button');
+            if (closeButton) {
+                const handleCloseClick = () => {
+                    setIsOpen(false);
+                };
+                closeButton.addEventListener('click', handleCloseClick);
+                closeButton._closeHandler = handleCloseClick;
+            }
+        }, 100);
+        return () => {
+            clearTimeout(timer);
+            if (shadowRef.current) {
+                const closeButton = shadowRef.current.querySelector('#andy-close-button');
+                if (closeButton && closeButton._closeHandler) {
+                    closeButton.removeEventListener('click', closeButton._closeHandler);
+                    delete closeButton._closeHandler;
+                }
+            }
+        };
+    }, [isOpen, shadowReady]);
+    // Click outside to close
+    react.useEffect(() => {
+        if (!shadowReady || !shadowRef.current)
+            return;
+        if (previewMode)
+            return;
+        const handleDocumentClick = (event) => {
+            if (isMobileDevice())
+                return;
+            if (!isOpen)
+                return;
+            const selection = window.getSelection();
+            if (selection && selection.toString().length > 0) {
+                return;
+            }
+            const chatbotContainer = containerRef.current;
+            let isClickInsideChatbot = false;
+            if (chatbotContainer && chatbotContainer.contains(event.target)) {
+                isClickInsideChatbot = true;
+            }
+            if (event.composedPath) {
+                const path = event.composedPath();
+                if (chatbotContainer && path.includes(chatbotContainer)) {
+                    isClickInsideChatbot = true;
+                }
+            }
+            if (event.target === chatbotContainer) {
+                isClickInsideChatbot = true;
+            }
+            if (!isClickInsideChatbot) {
+                setIsOpen(false);
+            }
+        };
+        const handleShadowClick = (event) => {
+            const target = event.target;
+            if (target.closest('#andy-close-button') ||
+                target.closest('#andy-send-button') ||
+                target.closest('.andy-predefined-question')) {
+                return;
+            }
+            if (target.closest('.andy-chat-window')) {
+                event.stopPropagation();
+            }
+        };
+        document.addEventListener('click', handleDocumentClick);
+        shadowRef.current.addEventListener('click', handleShadowClick, true);
+        return () => {
+            document.removeEventListener('click', handleDocumentClick);
+            if (shadowRef.current) {
+                shadowRef.current.removeEventListener('click', handleShadowClick, true);
+            }
+        };
+    }, [isOpen, shadowReady, previewMode]);
+    // Initialize config
+    react.useEffect(() => {
+        if (previewMode) {
+            const previewConfig = {
+                id: embedId || 'preview',
+                name: name || 'Andy Bot',
+                theme: theme || 'light',
+                logoUrl: logoUrl || '',
+                headline: headline || '',
+                brandColor: brandColor || '#3B82F6',
+                description: description || '',
+                orientation: orientation || 'right',
+                bubbleStyle: bubbleStyle || 'icon',
+                bubbleLabel: bubbleLabel || null,
+                useBrandColor: useBrandColor !== undefined ? useBrandColor : true,
+                defaultLang: 'en',
+                showBranding: true,
+                showWelcomePopup: { enabled: false, seconds: 3, message: '' },
+                collectUserInfo: { enabled: false, message: '' },
+                welcomeMessage: welcomeMessage || 'Hi there! How can I help you today?',
+                predefinedQuestions: [],
+                faqs: []
+            };
+            setConfig(previewConfig);
+            return;
+        }
+        if (!embedId || !isValidEmbedId(embedId)) {
+            setConfig(null);
+            console.warn('AndyChat: Invalid or missing embedId');
+            return;
+        }
+        let cancelled = false;
+        const loadConfig = async () => {
+            try {
+                setConfig(null);
+                const rawConfig = await fetchChatbotConfig(embedId);
+                const configWithOverrides = {
+                    ...rawConfig,
+                    ...(name && { name }),
+                    ...(headline && { headline }),
+                    ...(description && { description }),
+                    ...(welcomeMessage && { welcomeMessage }),
+                    ...(theme && { theme }),
+                    ...(orientation && { orientation }),
+                    ...(brandColor && { brandColor }),
+                    ...(bubbleStyle && { bubbleStyle }),
+                    ...(bubbleLabel && { bubbleLabel }),
+                    ...(useBrandColor !== undefined && { useBrandColor }),
+                    ...(logoUrl && { logoUrl })
+                };
+                if (!cancelled)
+                    setConfig(configWithOverrides);
+            }
+            catch {
+                if (!cancelled) {
+                    setConfig(null);
+                    console.error('AndyChat: Failed to load configuration.');
+                }
+            }
+        };
+        loadConfig();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        embedId,
+        name,
+        headline,
+        description,
+        welcomeMessage,
+        previewMode,
+        theme,
+        orientation,
+        brandColor,
+        bubbleStyle,
+        bubbleLabel,
+        useBrandColor,
+        logoUrl
+    ]);
+    // Welcome popup timer
+    react.useEffect(() => {
+        if (welcomePopupTimeoutRef.current) {
+            clearTimeout(welcomePopupTimeoutRef.current);
+            welcomePopupTimeoutRef.current = null;
+        }
+        if (config?.showWelcomePopup?.enabled && !welcomePopupShownRef.current && !isOpen) {
+            const delaySeconds = config.showWelcomePopup.seconds ?? 3;
+            welcomePopupTimeoutRef.current = setTimeout(() => {
+                if (!isOpen) {
+                    setShowWelcomePopup(true);
+                    welcomePopupShownRef.current = true;
+                }
+            }, delaySeconds * 1000);
+        }
+        if (isOpen && showWelcomePopup) {
+            setShowWelcomePopup(false);
+        }
+        return () => {
+            if (welcomePopupTimeoutRef.current) {
+                clearTimeout(welcomePopupTimeoutRef.current);
+            }
+        };
+    }, [config, isOpen, showWelcomePopup]);
+    // Add welcome message on first open
+    react.useEffect(() => {
+        if (isOpen && !hasOpenedRef.current && config?.welcomeMessage) {
+            hasOpenedRef.current = true;
+            const greeting = createGreetingMessage(config);
+            if (greeting) {
+                setMessages([
+                    {
+                        id: Date.now(),
+                        content: greeting,
+                        sender: 'bot',
+                        timestamp: new Date().toISOString()
+                    }
+                ]);
+            }
+        }
+    }, [isOpen, config]);
+    // Auto-scroll
+    react.useEffect(() => {
+        if (messagesContainerRef.current) {
+            messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+        }
+    }, [messages, isLoading]);
+    // Form submit handler
+    react.useEffect(() => {
+        if (isCollectingUserInfo && shadowRef.current) {
+            const timer = setTimeout(() => {
+                const form = shadowRef.current?.querySelector('#andy-user-info-form');
+                if (form) {
+                    const handleSubmit = (e) => {
+                        handleUserInfoSubmit(e);
+                    };
+                    form.addEventListener('submit', handleSubmit);
+                    form._submitHandler = handleSubmit;
+                }
+            }, 100);
+            return () => {
+                clearTimeout(timer);
+                if (shadowRef.current) {
+                    const form = shadowRef.current.querySelector('#andy-user-info-form');
+                    if (form && form._submitHandler) {
+                        form.removeEventListener('submit', form._submitHandler);
+                        delete form._submitHandler;
+                    }
+                }
+            };
+        }
+    }, [isCollectingUserInfo, messages]);
+    const sendUserMessage = react.useCallback(async (rawMessageText, options = {}) => {
+        const messageText = typeof rawMessageText === 'string' ? rawMessageText.trim() : '';
+        if (!messageText) {
+            return;
+        }
+        const { hidePredefined = true } = options;
+        const timestamp = Date.now();
+        const userMessage = {
+            id: timestamp,
+            content: messageText,
+            sender: 'user',
+            timestamp: new Date().toISOString()
+        };
+        setMessages(prev => [...prev, userMessage]);
+        if (hidePredefined) {
+            setShowPredefinedQuestions(false);
+        }
+        try {
+            setIsLoading(true);
+            const response = await sendMessage(embedId, sessionId, messageText);
+            const botMessage = {
+                id: timestamp + 1,
+                content: response,
+                sender: 'bot',
+                timestamp: new Date().toISOString()
+            };
+            setMessages(prev => [...prev, botMessage]);
+            if (config?.collectUserInfo?.enabled && !userInfoCollected && !isCollectingUserInfo) {
+                setPendingMessage(messageText);
+                setIsCollectingUserInfo(true);
+                const formMessage = {
+                    id: timestamp + 2,
+                    content: 'USER_INFO_FORM',
+                    sender: 'bot',
+                    isForm: true,
+                    timestamp: new Date().toISOString()
+                };
+                setMessages(prev => [...prev, formMessage]);
+            }
+        }
+        catch {
+            console.error('AndyChat: Message request failed.');
+            const errorMessage = {
+                id: timestamp + 3,
+                content: config?.defaultLang === 'es'
+                    ? 'Lo siento, no pude responder. Inténtalo de nuevo.'
+                    : 'Sorry, I could not answer. Please try again.',
+                sender: 'bot',
+                timestamp: new Date().toISOString(),
+                isError: true
+            };
+            setMessages(prev => [...prev, errorMessage]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [config, embedId, sessionId, userInfoCollected, isCollectingUserInfo]);
+    const handleSendMessage = react.useCallback((messageText) => {
+        return sendUserMessage(messageText);
+    }, [sendUserMessage]);
+    const handlePredefinedQuestion = react.useCallback((question) => {
+        if (isCollectingUserInfo || isLoading) {
+            return;
+        }
+        const trimmedQuestion = typeof question === 'string' ? question.trim() : '';
+        if (!trimmedQuestion) {
+            return;
+        }
+        const input = shadowRef.current?.getElementById('andy-message-input');
+        if (input) {
+            input.value = '';
+        }
+        sendUserMessage(trimmedQuestion);
+    }, [isCollectingUserInfo, isLoading, sendUserMessage]);
+    // Predefined questions click handler
+    react.useEffect(() => {
+        if (!shadowRef.current) {
+            return;
+        }
+        const shadowRoot = shadowRef.current;
+        const captureClick = (event) => {
+            const composedTarget = event.composedPath ? event.composedPath()[0] : event.target;
+            const elementTarget = composedTarget instanceof Element ? composedTarget : null;
+            const button = elementTarget?.closest?.('.andy-predefined-question') ||
+                shadowRoot.querySelector('.andy-predefined-question:focus');
+            if (!button) {
+                return;
+            }
+            if (button.disabled) {
+                return;
+            }
+            const question = button.getAttribute('data-question') || button.textContent || '';
+            handlePredefinedQuestion(question);
+        };
+        shadowRoot.addEventListener('click', captureClick);
+        return () => {
+            shadowRoot.removeEventListener('click', captureClick);
+        };
+    }, [handlePredefinedQuestion, shadowReady]);
+    const handleUserInfoSubmit = async (e) => {
+        e.preventDefault();
+        const form = e.target;
+        const nameInput = form.querySelector('#andy-user-name');
+        const emailInput = form.querySelector('#andy-user-email');
+        const userName = nameInput?.value;
+        const email = emailInput?.value;
+        if (!userName || !email)
+            return;
+        setMessages(prev => prev.filter(msg => !msg.isForm));
+        const loadingMessage = {
+            id: Date.now(),
+            content: 'LOADING',
+            sender: 'bot',
+            isLoading: true,
+            timestamp: new Date().toISOString()
+        };
+        setMessages(prev => [...prev, loadingMessage]);
+        try {
+            await submitUserInfo(embedId, sessionId, { name: userName, email });
+            setUserInfoCollected(true);
+            setIsCollectingUserInfo(false);
+            setMessages(prev => prev.filter(msg => !msg.isLoading));
+            setPendingMessage(null);
+        }
+        catch (error) {
+            console.error('Error submitting user info:', error);
+            setMessages(prev => prev.filter(msg => !msg.isLoading));
+            const errorMessage = {
+                id: Date.now() + 1,
+                content: 'Sorry, there was an error submitting your information. Please try again.',
+                sender: 'bot',
+                timestamp: new Date().toISOString()
+            };
+            setMessages(prev => [...prev, errorMessage]);
+            setIsCollectingUserInfo(false);
+        }
+    };
+    if (!previewMode && (!embedId || !isValidEmbedId(embedId))) {
+        return null;
+    }
+    // Render bubble
+    react.useEffect(() => {
+        if (!shadowRef.current || !shadowReady)
+            return;
+        if (!config) {
+            shadowRef.current.querySelector('.andy-chat-bubble')?.remove();
+            return;
+        }
+        let bubble = shadowRef.current.querySelector('.andy-chat-bubble');
+        if (!bubble) {
+            bubble = document.createElement('button');
+            bubble.type = 'button';
+            bubble.className = 'andy-chat-bubble';
+            bubble.setAttribute('aria-label', 'Open chat');
+            const tooltipHTML = tooltip
+                ? `<span class="andy-chat-bubble__tooltip" role="tooltip">${tooltip}</span>`
+                : '';
+            bubble.innerHTML = `${CHAT_BUBBLE_DEFAULT_ICON}${tooltipHTML}`;
+            shadowRef.current.appendChild(bubble);
+            bubble.addEventListener('click', () => setIsOpen(prev => !prev));
+        }
+        const isPillStyle = config?.bubbleStyle === 'pill';
+        const displayLabel = bubbleLabel || config?.bubbleLabel || (isPillStyle ? getDefaultBubbleLabel(config?.defaultLang || 'en') : null);
+        const bubbleLogoUrl = config?.logoUrl || CHAT_BUBBLE_DEFAULT_ICON_URL;
+        if (bubble) {
+            bubble.className = 'andy-chat-bubble';
+            if (isPillStyle) {
+                bubble.classList.add('andy-chat-bubble--pill');
+            }
+            if (isOpen) {
+                bubble.classList.add('andy-chat-bubble--open');
+            }
+            if (config?.theme === 'dark') {
+                bubble.classList.add('andy-chat-bubble--theme-dark');
+            }
+            if (config) {
+                bubble.classList.add('andy-chat-bubble--loaded');
+            }
+            const tooltipHTML = !isOpen && tooltip && !isPillStyle
+                ? `<span class="andy-chat-bubble__tooltip" role="tooltip">${tooltip}</span>`
+                : '';
+            const configUseBrandColor = config?.useBrandColor ?? true;
+            const isDarkTheme = config?.theme === 'dark';
+            const needsWhiteIcon = configUseBrandColor || isDarkTheme;
+            const iconFilterStyle = needsWhiteIcon ? '' : 'filter: none;';
+            const darkModeIconStyle = !configUseBrandColor && isDarkTheme ? 'filter: brightness(0) invert(1);' : iconFilterStyle;
+            if (isOpen) {
+                const chevronWithStyle = SVG_ICONS.chevronDown.replace('class="andy-chat-bubble__icon"', `class="andy-chat-bubble__icon" style="${darkModeIconStyle}"`);
+                bubble.innerHTML = chevronWithStyle;
+            }
+            else if (isPillStyle && displayLabel) {
+                bubble.innerHTML = `
+					<span class="andy-chat-bubble__label">${displayLabel}</span>
+					<img src="${bubbleLogoUrl}" alt="Chat" class="andy-chat-bubble__icon--pill" style="${darkModeIconStyle}" />
+				`;
+            }
+            else {
+                if (config?.logoUrl) {
+                    bubble.innerHTML = `<img src="${config.logoUrl}" alt="Chatbot Logo" class="andy-chat-bubble__logo" style="${darkModeIconStyle}" />${tooltipHTML}`;
+                }
+                else {
+                    const defaultIconWithStyle = CHAT_BUBBLE_DEFAULT_ICON.replace('class="andy-chat-bubble__icon"', `class="andy-chat-bubble__icon" style="${darkModeIconStyle}"`);
+                    bubble.innerHTML = `${defaultIconWithStyle}${tooltipHTML}`;
+                }
+            }
+        }
+    }, [shadowReady, config, isOpen, tooltip, bubbleLabel]);
+    return (jsxRuntime.jsx("div", { ref: containerRef, id: 'andy-chatbot-container', children: portalRef.current && shadowReady && config && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ReactDOM.createPortal(jsxRuntime.jsxs("div", { className: `andy-chat-window ${isOpen ? 'andy-chat-window--open' : ''}`, children: [jsxRuntime.jsxs("header", { className: 'andy-header', children: [jsxRuntime.jsx("button", { type: 'button', className: 'andy-header__back', id: 'andy-back-button', "aria-label": 'Go back', onClick: () => setIsOpen(false), children: jsxRuntime.jsx("svg", { className: 'andy-header__back-icon', width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', children: jsxRuntime.jsx("path", { d: 'M15 18l-6-6 6-6', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) }), jsxRuntime.jsxs("div", { className: 'andy-header__bot-info', children: [jsxRuntime.jsx("div", { className: 'andy-header__avatar', children: config?.logoUrl ? (jsxRuntime.jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-header__avatar-image' })) : (jsxRuntime.jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-header__avatar-icon andy-header__avatar-icon--default' })) }), jsxRuntime.jsxs("div", { className: 'andy-header__text', children: [jsxRuntime.jsx("h1", { className: 'andy-header__name', children: config?.name || 'Andy bot' }), config?.headline && (jsxRuntime.jsx("p", { className: 'andy-header__subtitle', title: config.headline, children: config.headline }))] })] }), jsxRuntime.jsx("button", { type: 'button', className: 'andy-header__close', id: 'andy-close-button', "aria-label": 'Close chat', onClick: () => setIsOpen(false), children: jsxRuntime.jsx("svg", { className: 'andy-header__close-icon', width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', children: jsxRuntime.jsx("path", { d: 'M18 6L6 18M6 6l12 12', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) })] }), jsxRuntime.jsxs("div", { className: 'andy-chat-window__messages', id: 'andy-messages', ref: messagesContainerRef, children: [config?.description && (jsxRuntime.jsx("div", { className: 'andy-chat-subtitle', children: jsxRuntime.jsx("p", { className: 'andy-chat-subtitle__text', children: config.description }) })), messages.map(message => {
+                                    if (message.isForm) {
+                                        return (jsxRuntime.jsxs("div", { className: 'andy-message-container andy-message-container--form', children: [jsxRuntime.jsx("div", { className: 'andy-avatar', children: jsxRuntime.jsx("svg", { className: 'andy-avatar__icon', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z', fill: 'currentColor' }) }) }), jsxRuntime.jsx("div", { className: 'andy-message andy-message--bot andy-message--form', children: jsxRuntime.jsx("div", { className: 'andy-user-info-form', children: jsxRuntime.jsxs("div", { className: 'andy-user-info-form__content', children: [jsxRuntime.jsx("h3", { className: 'andy-user-info-form__title', children: config?.collectUserInfo?.message ||
+                                                                        'Please provide your information to continue:' }), jsxRuntime.jsxs("form", { className: 'andy-user-info-form__form', id: 'andy-user-info-form', children: [jsxRuntime.jsxs("div", { className: 'andy-form-group', children: [jsxRuntime.jsx("label", { htmlFor: 'andy-user-name', className: 'andy-form-group__label', children: "Name" }), jsxRuntime.jsx("input", { type: 'text', id: 'andy-user-name', className: 'andy-form-group__input', placeholder: 'Your Name', required: true })] }), jsxRuntime.jsxs("div", { className: 'andy-form-group', children: [jsxRuntime.jsx("label", { htmlFor: 'andy-user-email', className: 'andy-form-group__label', children: "Email" }), jsxRuntime.jsx("input", { type: 'email', id: 'andy-user-email', className: 'andy-form-group__input', placeholder: 'Your Email', required: true })] }), jsxRuntime.jsx("button", { type: 'submit', className: 'andy-button andy-button--primary andy-user-info-form__submit', children: "Submit" })] })] }) }) })] }, message.id));
+                                    }
+                                    if (message.isLoading) {
+                                        return (jsxRuntime.jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--loading', children: jsxRuntime.jsx("div", { className: 'andy-message andy-message--bot', children: jsxRuntime.jsxs("div", { className: 'andy-typing-indicator', children: [jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }, message.id));
+                                    }
+                                    return (jsxRuntime.jsxs("div", { className: `andy-message-container andy-message-container--${message.sender}`, children: [message.sender === 'bot' && (jsxRuntime.jsxs("div", { className: `andy-message andy-message--bot ${message.isError ? 'andy-message--error' : ''}`, children: [jsxRuntime.jsxs("div", { className: 'andy-bot-header', children: [jsxRuntime.jsx("div", { className: 'andy-bot-header__icon', children: config?.logoUrl ? (jsxRuntime.jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image' })) : (jsxRuntime.jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image andy-bot-header__icon-image--default' })) }), jsxRuntime.jsx("span", { className: 'andy-bot-header__name', children: config?.name || 'Andy bot' })] }), jsxRuntime.jsx("div", { className: 'andy-message__content', children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: parseMarkdown(message.content) } }) })] })), message.sender === 'user' && (jsxRuntime.jsx("div", { className: 'andy-message andy-message--user', children: jsxRuntime.jsx("div", { className: 'andy-message__content', children: jsxRuntime.jsx("p", { children: message.content }) }) }))] }, message.id));
+                                }), isLoading && (jsxRuntime.jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--typing', children: jsxRuntime.jsx("div", { className: 'andy-message andy-message--bot andy-message--typing', children: jsxRuntime.jsxs("div", { className: 'andy-typing-indicator', children: [jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }))] }), jsxRuntime.jsxs("div", { className: 'andy-chat-window__bottom', children: [config?.predefinedQuestions &&
+                                    config.predefinedQuestions.length > 0 &&
+                                    showPredefinedQuestions && (jsxRuntime.jsxs("div", { className: 'andy-predefined-questions', id: 'andy-predefined-questions', children: [jsxRuntime.jsx("div", { className: 'andy-predefined-questions__header', children: jsxRuntime.jsx("p", { className: 'andy-predefined-questions__title', children: "What would you like to know?" }) }), jsxRuntime.jsx("div", { className: 'andy-predefined-questions__list', children: config.predefinedQuestions.map((q, index) => (jsxRuntime.jsxs("button", { type: 'button', className: 'andy-predefined-question', "data-question": q.question, disabled: isCollectingUserInfo || isLoading || !config, children: [jsxRuntime.jsx("span", { className: 'andy-predefined-question__icon', children: "\uD83D\uDCAC" }), jsxRuntime.jsx("span", { className: 'andy-predefined-question__text', children: q.question })] }, index))) })] })), jsxRuntime.jsx("div", { className: 'andy-chat-window__input', children: jsxRuntime.jsx("div", { className: 'andy-input-container', children: jsxRuntime.jsxs("div", { className: 'andy-input', children: [jsxRuntime.jsx("input", { type: 'text', className: 'andy-input__field', id: 'andy-message-input', placeholder: config ? 'Type your message...' : '...', "aria-label": 'Message input', onKeyDown: e => {
+                                                        if (e.key === 'Enter' && e.target.value.trim()) {
+                                                            handleSendMessage(e.target.value);
+                                                            e.target.value = '';
+                                                        }
+                                                    }, disabled: isCollectingUserInfo || !config }), jsxRuntime.jsx("button", { type: 'button', className: 'andy-input__button', id: 'andy-send-button', "aria-label": 'Send message', onClick: () => {
+                                                        const input = shadowRef.current?.getElementById('andy-message-input');
+                                                        if (input && input.value.trim()) {
+                                                            handleSendMessage(input.value);
+                                                            input.value = '';
+                                                        }
+                                                    }, disabled: isCollectingUserInfo || !config, children: jsxRuntime.jsx("svg", { className: 'andy-input__button-icon', width: '18', height: '18', viewBox: '0 0 24 24', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z' }) }) })] }) }) }), config?.showBranding !== false && (jsxRuntime.jsx("footer", { className: 'andy-chat-window__footer', children: jsxRuntime.jsx("a", { href: getFooterUrl(), target: '_blank', rel: 'noopener noreferrer', className: 'andy-chat-window__footer-link', children: jsxRuntime.jsx("span", { className: 'andy-chat-window__footer-text', children: FOOTER_TEXT }) }) }))] })] }), portalRef.current), showWelcomePopup &&
+                    !isOpen &&
+                    ReactDOM.createPortal(jsxRuntime.jsxs("div", { className: `andy-welcome-popup ${config?.orientation === 'left' ? 'andychat-popup-left' : ''}`, style: { display: 'block' }, role: 'dialog', "aria-label": 'Welcome message', children: [jsxRuntime.jsxs("div", { className: 'andy-welcome-popup__content', children: [jsxRuntime.jsx("div", { className: 'andy-welcome-popup__message', children: config?.showWelcomePopup?.message ||
+                                            config?.welcomeMessage ||
+                                            'Welcome! How can I help you today?' }), jsxRuntime.jsx("button", { type: 'button', className: 'andy-welcome-popup__close', "aria-label": 'Close welcome message', onClick: () => setShowWelcomePopup(false), children: jsxRuntime.jsx("svg", { className: 'andy-welcome-popup__close-icon', width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M18 6L6 18M6 6l12 12', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) })] }), jsxRuntime.jsx("div", { className: 'andy-welcome-popup__arrow' })] }), portalRef.current)] })) }));
+};
+
+const { SESSION_STORAGE_KEY, FORM_DISPLAY_DELAY_MS, PERSIST_SESSION } = CONFIG;
+const useAndyChat = (embedId) => {
+    initializeConfig('andy-widget-react');
+    const [config, setConfig] = react.useState({});
+    const [isLoading, setIsLoading] = react.useState(true);
+    const [isOpen, setIsOpen] = react.useState(false);
+    const [error, setError] = react.useState(null);
+    const [messages, setMessages] = react.useState([]);
+    const [showingFaq, setShowingFaq] = react.useState(false);
+    const [sessionId, setSessionId] = react.useState(() => generateSessionId());
+    const [userInfoCollected, setUserInfoCollected] = react.useState(false);
+    const [showingWelcomePopup, setShowingWelcomePopup] = react.useState(false);
+    const [showingUserInfoForm, setShowingUserInfoForm] = react.useState(false);
+    const [welcomePopupShown, setWelcomePopupShown] = react.useState(false);
+    const welcomeTimeoutRef = react.useRef(null);
+    const userInfoTimeoutRef = react.useRef(null);
+    const initializeChatbot = react.useCallback(async () => {
+        if (!embedId) {
+            throw new Error('Embed ID is required');
+        }
+        try {
+            setIsLoading(true);
+            setError(null);
+            const rawConfig = await fetchChatbotConfig(embedId);
+            const validationResult = validateChatbotConfig(rawConfig);
+            if (!validationResult.isValid) {
+                throw new Error(`Invalid configuration: ${validationResult.errors.join(', ')}`);
+            }
+            const normalizedConfig = normalizeConfig(rawConfig);
+            setConfig(normalizedConfig);
+            if (PERSIST_SESSION) ;
+            if (normalizedConfig.welcomeMessage) {
+                const greeting = createGreetingMessage(normalizedConfig);
+                if (greeting) {
+                    const greetingMessage = {
+                        id: Date.now(),
+                        content: greeting,
+                        sender: 'bot',
+                        timestamp: new Date().toISOString()
+                    };
+                    setMessages([greetingMessage]);
+                }
+            }
+            setIsLoading(false);
+        }
+        catch (err) {
+            console.error('Failed to initialize chatbot:', err);
+            setError(err instanceof Error ? err.message : 'Unknown error');
+            setIsLoading(false);
+            throw err;
+        }
+    }, [embedId]);
+    const toggleChat = react.useCallback(() => {
+        setIsOpen(prev => {
+            const newIsOpen = !prev;
+            if (newIsOpen) {
+                setShowingFaq(false);
+                const typedConfig = config;
+                if (typedConfig?.showWelcomePopup?.enabled && !welcomePopupShown) {
+                    setShowingWelcomePopup(true);
+                    setWelcomePopupShown(true);
+                }
+                if (typedConfig?.collectUserInfo?.enabled && !userInfoCollected) {
+                    if (userInfoTimeoutRef.current) {
+                        clearTimeout(userInfoTimeoutRef.current);
+                    }
+                    userInfoTimeoutRef.current = setTimeout(() => {
+                        setShowingUserInfoForm(true);
+                    }, FORM_DISPLAY_DELAY_MS);
+                }
+            }
+            else {
+                setShowingWelcomePopup(false);
+                setShowingUserInfoForm(false);
+                if (welcomeTimeoutRef.current) {
+                    clearTimeout(welcomeTimeoutRef.current);
+                }
+                if (userInfoTimeoutRef.current) {
+                    clearTimeout(userInfoTimeoutRef.current);
+                }
+            }
+            return newIsOpen;
+        });
+    }, [config, welcomePopupShown, userInfoCollected]);
+    const sendMessage$1 = react.useCallback(async (messageText) => {
+        if (!messageText.trim() || !config || !sessionId) {
+            return;
+        }
+        const userMessage = {
+            id: Date.now(),
+            content: messageText,
+            sender: 'user',
+            timestamp: new Date().toISOString()
+        };
+        setMessages(prev => [...prev, userMessage]);
+        try {
+            const response = await sendMessage(embedId, sessionId, messageText);
+            const botMessage = {
+                id: Date.now() + 1,
+                content: response || 'I apologize, but I encountered an error processing your request.',
+                sender: 'bot',
+                timestamp: new Date().toISOString()
+            };
+            setMessages(prev => [...prev, botMessage]);
+            return response;
+        }
+        catch (err) {
+            console.error('Error sending message:', err);
+            const errorMessage = {
+                id: Date.now() + 1,
+                content: 'Sorry, I encountered an error. Please try again.',
+                sender: 'bot',
+                timestamp: new Date().toISOString(),
+                isError: true
+            };
+            setMessages(prev => [...prev, errorMessage]);
+            throw err;
+        }
+    }, [embedId, sessionId, config]);
+    const showFaq = react.useCallback(() => {
+        setShowingFaq(true);
+    }, []);
+    const hideFaq = react.useCallback(() => {
+        setShowingFaq(false);
+    }, []);
+    const showWelcomePopup = react.useCallback(() => {
+        setShowingWelcomePopup(true);
+    }, []);
+    const hideWelcomePopup = react.useCallback(() => {
+        setShowingWelcomePopup(false);
+    }, []);
+    const showUserInfoForm = react.useCallback(() => {
+        setShowingUserInfoForm(true);
+    }, []);
+    const hideUserInfoForm = react.useCallback(() => {
+        setShowingUserInfoForm(false);
+    }, []);
+    const submitUserInfo$1 = react.useCallback(async (userInfo) => {
+        try {
+            await submitUserInfo(embedId, sessionId, userInfo);
+            setUserInfoCollected(true);
+            setShowingUserInfoForm(false);
+            const confirmMessage = {
+                id: Date.now(),
+                content: 'Thank you for providing your information! How can I help you today?',
+                sender: 'bot',
+                timestamp: new Date().toISOString()
+            };
+            setMessages(prev => [...prev, confirmMessage]);
+        }
+        catch (err) {
+            console.error('Error submitting user info:', err);
+            throw err;
+        }
+    }, [embedId, sessionId]);
+    const startNewSession = react.useCallback(() => {
+        const newSessionId = generateSessionId();
+        setSessionId(newSessionId);
+        {
+            localStorage.removeItem(SESSION_STORAGE_KEY);
+        }
+        setMessages([]);
+        setUserInfoCollected(false);
+        setShowingFaq(false);
+        setShowingUserInfoForm(false);
+        setWelcomePopupShown(false);
+        const typedConfig = config;
+        if (typedConfig?.welcomeMessage) {
+            const greeting = createGreetingMessage(typedConfig);
+            if (greeting) {
+                const greetingMessage = {
+                    id: Date.now(),
+                    content: greeting,
+                    sender: 'bot',
+                    timestamp: new Date().toISOString()
+                };
+                setMessages([greetingMessage]);
+            }
+        }
+    }, [config]);
+    const addMessage = react.useCallback((message) => {
+        setMessages(prev => [...prev, message]);
+    }, []);
+    return {
+        config,
+        isLoading,
+        isOpen,
+        showingFaq,
+        showingWelcomePopup,
+        showingUserInfoForm,
+        messages,
+        userInfoCollected,
+        sessionId,
+        error,
+        initializeChatbot,
+        toggleChat,
+        sendMessage: sendMessage$1,
+        showFaq,
+        hideFaq,
+        showWelcomePopup,
+        hideWelcomePopup,
+        showUserInfoForm,
+        hideUserInfoForm,
+        submitUserInfo: submitUserInfo$1,
+        startNewSession,
+        addMessage
+    };
+};
+
+const ChatBubble = ({ isOpen, config, onClick }) => {
+    const bubbleClasses = ['andy-bubble', isOpen && 'andy-bubble--open'].filter(Boolean).join(' ');
+    return (jsxRuntime.jsx("div", { className: bubbleClasses, onClick: onClick, role: 'button', tabIndex: 0, "aria-label": isOpen ? 'Close chat' : 'Open chat', onKeyDown: e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick();
+            }
+        }, children: isOpen ? (jsxRuntime.jsx("svg", { className: 'andy-chat-bubble__icon', width: '28', height: '28', viewBox: '0 0 24 24', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' }) })) : config?.logoUrl ? (jsxRuntime.jsx("img", { src: config.logoUrl, alt: 'Chatbot Logo', className: 'andy-chat-bubble__logo' })) : (jsxRuntime.jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Chat', className: 'andy-chat-bubble__icon' })) }));
+};
+
+const MessageComponent = ({ message, botName }) => {
+    const isBot = message.sender === 'bot';
+    const containerClasses = ['andy-message-container', `andy-message-container--${message.sender}`]
+        .filter(Boolean)
+        .join(' ');
+    const messageClasses = ['andy-message', `andy-message--${message.sender}`].filter(Boolean).join(' ');
+    const messageContent = isBot ? parseMarkdown(message.content) : message.content;
+    if (isBot) {
+        return (jsxRuntime.jsxs("div", { className: containerClasses, children: [jsxRuntime.jsxs("div", { className: 'andy-bot-header', children: [jsxRuntime.jsx("div", { className: 'andy-bot-header__icon', children: jsxRuntime.jsxs("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', children: [jsxRuntime.jsx("path", { d: 'M12 6V2H8' }), jsxRuntime.jsx("path", { d: 'm8 18-4 4V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z' }), jsxRuntime.jsx("path", { d: 'M2 12h2' }), jsxRuntime.jsx("path", { d: 'M9 11v2' }), jsxRuntime.jsx("path", { d: 'M15 11v2' }), jsxRuntime.jsx("path", { d: 'M20 12h2' })] }) }), jsxRuntime.jsx("span", { className: 'andy-bot-header__name', children: botName || 'Andy bot' })] }), jsxRuntime.jsx("div", { className: messageClasses, children: jsxRuntime.jsx("div", { className: 'andy-message__content', dangerouslySetInnerHTML: { __html: messageContent } }) })] }));
+    }
+    return (jsxRuntime.jsx("div", { className: containerClasses, children: jsxRuntime.jsx("div", { className: messageClasses, children: jsxRuntime.jsx("div", { className: 'andy-message__content', children: jsxRuntime.jsx("p", { children: messageContent }) }) }) }));
+};
+const TypingIndicator = () => (jsxRuntime.jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--typing', children: jsxRuntime.jsx("div", { className: 'andy-message andy-message--bot andy-message--typing', children: jsxRuntime.jsxs("div", { className: 'andy-typing-indicator', children: [jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }));
+const MessageList = ({ messages, isLoading, logoUrl, botName }) => {
+    const messagesEndRef = react.useRef(null);
+    react.useEffect(() => {
+        if (messagesEndRef.current) {
+            messagesEndRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'end'
+            });
+        }
+    }, [messages, isLoading]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [messages.map(message => (jsxRuntime.jsx(MessageComponent, { message: message, logoUrl: logoUrl, botName: botName }, message.id || message.timestamp))), isLoading && jsxRuntime.jsx(TypingIndicator, {}), messages.length === 0 && !isLoading && (jsxRuntime.jsxs("div", { className: 'andy-empty-state', children: [jsxRuntime.jsx("div", { className: 'andy-empty-state__icon', children: "\uD83D\uDCAC" }), jsxRuntime.jsx("div", { className: 'andy-empty-state__text', children: "Start a conversation by typing a message below" })] })), jsxRuntime.jsx("div", { ref: messagesEndRef })] }));
+};
+
+const MessageInput = ({ onSendMessage, disabled = false, placeholder = 'Type your message here...' }) => {
+    const [message, setMessage] = react.useState('');
+    const [isSubmitting, setIsSubmitting] = react.useState(false);
+    const inputRef = react.useRef(null);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        const trimmedMessage = message.trim();
+        if (!trimmedMessage || disabled || isSubmitting) {
+            return;
+        }
+        try {
+            setIsSubmitting(true);
+            await onSendMessage(trimmedMessage);
+            setMessage('');
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+        }
+        catch (error) {
+            console.error('Error sending message:', error);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const handleInputChange = (e) => {
+        setMessage(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e);
+        }
+    };
+    const isInputDisabled = disabled || isSubmitting;
+    const canSend = message.trim().length > 0 && !isInputDisabled;
+    return (jsxRuntime.jsxs("div", { className: 'andy-input', children: [jsxRuntime.jsx("input", { ref: inputRef, type: 'text', value: message, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isInputDisabled, maxLength: 1000, autoComplete: 'off', id: 'andy-input' }), jsxRuntime.jsx("button", { type: 'button', onClick: () => handleSubmit({ preventDefault: () => { } }), disabled: !canSend, id: 'andy-send', children: isSubmitting ? ('...') : (jsxRuntime.jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z', fill: 'white' }) })) })] }));
+};
+
+const ChatWindow = ({ config, messages, isLoading, onClose, onSendMessage }) => {
+    const windowClasses = ['andy-chatbot', 'open'].filter(Boolean).join(' ');
+    return (jsxRuntime.jsxs("div", { className: windowClasses, children: [jsxRuntime.jsxs("div", { className: 'andy-header', children: [jsxRuntime.jsx("div", { className: 'andy-title', children: config?.headline || 'Chat with our AI ✨' }), jsxRuntime.jsx("div", { className: 'andy-subtitle', children: config?.description || 'Ask any question and our AI will answer' }), jsxRuntime.jsx("div", { className: 'andy-close', onClick: onClose, role: 'button', tabIndex: 0, children: "\u2715" })] }), jsxRuntime.jsx("div", { className: 'andy-messages', id: 'andy-messages', children: jsxRuntime.jsx(MessageList, { messages: messages, isLoading: isLoading, logoUrl: config?.logoUrl, botName: config?.name }) }), jsxRuntime.jsx("div", { className: 'andy-input-container', children: jsxRuntime.jsx(MessageInput, { onSendMessage: onSendMessage, disabled: isLoading, placeholder: 'Type your message here...' }) }), config?.showBranding !== false && (jsxRuntime.jsx("div", { className: 'andy-footer', children: jsxRuntime.jsx("a", { href: FOOTER_URL, target: '_blank', rel: 'noopener noreferrer', children: FOOTER_TEXT }) }))] }));
+};
+
+const FAQ = ({ faqs = [], onBack }) => {
+    return (jsxRuntime.jsxs("div", { className: 'andy-chat-faq', children: [jsxRuntime.jsxs("button", { className: 'andy-chat-faq__back', onClick: onBack, type: 'button', "aria-label": 'Back to chat', children: [jsxRuntime.jsx("svg", { viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', children: jsxRuntime.jsx("path", { d: 'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z', fill: 'currentColor' }) }), "Back to chat"] }), jsxRuntime.jsx("div", { className: 'andy-chat-faq__title', children: "Frequently Asked Questions" }), jsxRuntime.jsx("div", { className: 'andy-chat-faq__list', children: faqs.length > 0 ? (faqs.map((faq, index) => (jsxRuntime.jsxs("div", { className: 'andy-chat-faq__item', children: [jsxRuntime.jsx("div", { className: 'andy-chat-faq__question', children: faq.question }), jsxRuntime.jsx("div", { className: 'andy-chat-faq__answer', children: faq.answer })] }, index)))) : (jsxRuntime.jsxs("div", { className: 'andy-chat-faq__empty', children: [jsxRuntime.jsx("div", { className: 'andy-chat-faq__empty-icon', children: jsxRuntime.jsx("svg", { width: '48', height: '48', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z', fill: 'currentColor', opacity: '0.3' }) }) }), jsxRuntime.jsx("div", { className: 'andy-chat-faq__empty-text', children: "No frequently asked questions available at this time." })] })) })] }));
+};
+
+const WelcomePopup = ({ message, onClose }) => {
+    react.useEffect(() => {
+        const timer = setTimeout(() => {
+            onClose();
+        }, 5000);
+        return () => clearTimeout(timer);
+    }, [onClose]);
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    react.useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [onClose]);
+    return (jsxRuntime.jsx("div", { className: 'andy-chat-welcome-popup__backdrop', onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { className: 'andy-chat-welcome-popup', children: [jsxRuntime.jsx("button", { className: 'andy-chat-welcome-popup__close', onClick: onClose, "aria-label": 'Close welcome message', type: 'button', children: "\u2715" }), jsxRuntime.jsx("div", { className: 'andy-chat-welcome-popup__icon', children: jsxRuntime.jsx("svg", { width: '32', height: '32', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z', fill: 'currentColor' }) }) }), jsxRuntime.jsx("div", { className: 'andy-chat-welcome-popup__message', children: message }), jsxRuntime.jsx("button", { className: 'andy-chat-welcome-popup__button', onClick: onClose, type: 'button', children: "Get Started" }), jsxRuntime.jsx("div", { className: 'andy-chat-welcome-popup__timer', children: jsxRuntime.jsx("div", { className: 'andy-chat-welcome-popup__timer-bar' }) })] }) }));
+};
+
+const UserInfoForm = ({ headerText, onSubmit, onClose }) => {
+    const [formData, setFormData] = react.useState({
+        name: '',
+        email: ''
+    });
+    const [errors, setErrors] = react.useState({});
+    const [isSubmitting, setIsSubmitting] = react.useState(false);
+    const validateForm = () => {
+        const newErrors = {};
+        if (!formData.name.trim()) {
+            newErrors.name = 'Name is required';
+        }
+        else if (formData.name.trim().length < 2) {
+            newErrors.name = 'Name must be at least 2 characters';
+        }
+        if (!formData.email.trim()) {
+            newErrors.email = 'Email is required';
+        }
+        else {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(formData.email)) {
+                newErrors.email = 'Please enter a valid email address';
+            }
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!validateForm() || isSubmitting) {
+            return;
+        }
+        try {
+            setIsSubmitting(true);
+            await onSubmit(formData);
+        }
+        catch (error) {
+            console.error('Error submitting user info:', error);
+            setErrors({
+                submit: 'Failed to save your information. Please try again.'
+            });
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const handleInputChange = (field) => (e) => {
+        setFormData(prev => ({
+            ...prev,
+            [field]: e.target.value
+        }));
+        if (errors[field]) {
+            setErrors(prev => ({
+                ...prev,
+                [field]: undefined
+            }));
+        }
+    };
+    react.useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [onClose]);
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    return (jsxRuntime.jsx("div", { className: 'andy-chat-user-form__backdrop', onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { className: 'andy-chat-user-form', children: [jsxRuntime.jsx("button", { className: 'andy-chat-user-form__close', onClick: onClose, "aria-label": 'Close form', type: 'button', children: "\u2715" }), jsxRuntime.jsxs("div", { className: 'andy-chat-user-form__header', children: [jsxRuntime.jsx("div", { className: 'andy-chat-user-form__icon', children: jsxRuntime.jsx("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z', fill: 'currentColor' }) }) }), jsxRuntime.jsx("div", { className: 'andy-chat-user-form__title', children: headerText || "Let's get to know you better" }), jsxRuntime.jsx("div", { className: 'andy-chat-user-form__subtitle', children: "Please provide your information to continue" })] }), jsxRuntime.jsxs("form", { className: 'andy-chat-user-form__form', onSubmit: handleSubmit, children: [jsxRuntime.jsxs("div", { className: 'andy-chat-user-form__field', children: [jsxRuntime.jsx("label", { htmlFor: 'andy-user-name', className: 'andy-chat-user-form__label', children: "Name *" }), jsxRuntime.jsx("input", { id: 'andy-user-name', type: 'text', className: `andy-chat-user-form__input ${errors.name ? 'andy-chat-user-form__input--error' : ''}`, value: formData.name, onChange: handleInputChange('name'), placeholder: 'Enter your name', disabled: isSubmitting, maxLength: 100 }), errors.name && jsxRuntime.jsx("div", { className: 'andy-chat-user-form__error', children: errors.name })] }), jsxRuntime.jsxs("div", { className: 'andy-chat-user-form__field', children: [jsxRuntime.jsx("label", { htmlFor: 'andy-user-email', className: 'andy-chat-user-form__label', children: "Email *" }), jsxRuntime.jsx("input", { id: 'andy-user-email', type: 'email', className: `andy-chat-user-form__input ${errors.email ? 'andy-chat-user-form__input--error' : ''}`, value: formData.email, onChange: handleInputChange('email'), placeholder: 'Enter your email', disabled: isSubmitting, maxLength: 100 }), errors.email && jsxRuntime.jsx("div", { className: 'andy-chat-user-form__error', children: errors.email })] }), errors.submit && jsxRuntime.jsx("div", { className: 'andy-chat-user-form__submit-error', children: errors.submit }), jsxRuntime.jsxs("div", { className: 'andy-chat-user-form__actions', children: [jsxRuntime.jsx("button", { type: 'button', className: 'andy-chat-user-form__button andy-chat-user-form__button--secondary', onClick: onClose, disabled: isSubmitting, children: "Skip for now" }), jsxRuntime.jsx("button", { type: 'submit', className: 'andy-chat-user-form__button andy-chat-user-form__button--primary', disabled: isSubmitting, children: isSubmitting ? (jsxRuntime.jsxs("span", { className: 'andy-chat-user-form__loading', children: [jsxRuntime.jsx("span", { className: 'andy-chat-user-form__loading-dot' }), jsxRuntime.jsx("span", { className: 'andy-chat-user-form__loading-dot' }), jsxRuntime.jsx("span", { className: 'andy-chat-user-form__loading-dot' })] })) : ('Continue') })] })] })] }) }));
+};
+
+exports.Andy = AndyChat;
+exports.AndyChat = AndyChat;
+exports.ChatBubble = ChatBubble;
+exports.ChatWindow = ChatWindow;
+exports.FAQ = FAQ;
+exports.MessageInput = MessageInput;
+exports.MessageList = MessageList;
+exports.UserInfoForm = UserInfoForm;
+exports.WelcomePopup = WelcomePopup;
+exports.animation = animation;
+exports.borderRadius = borderRadius;
+exports.chat = chat;
+exports.colors = colors;
+exports.default = AndyChat;
+exports.generateSessionId = generateSessionId;
+exports.getApiBaseUrl = getApiBaseUrl;
+exports.getEmbedId = getEmbedId;
+exports.isValidEmbedId = isValidEmbedId;
+exports.parseMarkdown = parseMarkdown;
+exports.sanitizeUrl = sanitizeUrl;
+exports.setApiBaseUrl = setApiBaseUrl;
+exports.shadows = shadows;
+exports.spacing = spacing;
+exports.theme = theme;
+exports.typography = typography;
+exports.useAndyChat = useAndyChat;
+exports.zIndex = zIndex;
+//# sourceMappingURL=index.cjs.map