andy-widget-react 2.0.5

package/dist/index.esm.js

@@ -0,0 +1,4658 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import ReactDOM from '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] = useState(null);
+    const [isOpen, setIsOpen] = useState(initialOpen);
+    const [messages, setMessages] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [sessionId, setSessionId] = useState(() => generateSessionId());
+    const [shadowReady, setShadowReady] = useState(false);
+    const [showPredefinedQuestions, setShowPredefinedQuestions] = useState(true);
+    const [userInfoCollected, setUserInfoCollected] = useState(false);
+    const [isCollectingUserInfo, setIsCollectingUserInfo] = useState(false);
+    const [pendingMessage, setPendingMessage] = useState(null);
+    const [showWelcomePopup, setShowWelcomePopup] = useState(false);
+    const containerRef = useRef(null);
+    const shadowRef = useRef(null);
+    const portalRef = useRef(null);
+    const hasOpenedRef = useRef(false);
+    const messagesContainerRef = useRef(null);
+    const welcomePopupShownRef = useRef(false);
+    const welcomePopupTimeoutRef = useRef(null);
+    // Create shadow DOM container on mount
+    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
+    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
+    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
+    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
+    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
+    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
+    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
+    useEffect(() => {
+        if (messagesContainerRef.current) {
+            messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+        }
+    }, [messages, isLoading]);
+    // Form submit handler
+    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 = 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 = useCallback((messageText) => {
+        return sendUserMessage(messageText);
+    }, [sendUserMessage]);
+    const handlePredefinedQuestion = 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
+    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
+    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 (jsx("div", { ref: containerRef, id: 'andy-chatbot-container', children: portalRef.current && shadowReady && config && (jsxs(Fragment, { children: [ReactDOM.createPortal(jsxs("div", { className: `andy-chat-window ${isOpen ? 'andy-chat-window--open' : ''}`, children: [jsxs("header", { className: 'andy-header', children: [jsx("button", { type: 'button', className: 'andy-header__back', id: 'andy-back-button', "aria-label": 'Go back', onClick: () => setIsOpen(false), children: jsx("svg", { className: 'andy-header__back-icon', width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', children: jsx("path", { d: 'M15 18l-6-6 6-6', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) }), jsxs("div", { className: 'andy-header__bot-info', children: [jsx("div", { className: 'andy-header__avatar', children: config?.logoUrl ? (jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-header__avatar-image' })) : (jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-header__avatar-icon andy-header__avatar-icon--default' })) }), jsxs("div", { className: 'andy-header__text', children: [jsx("h1", { className: 'andy-header__name', children: config?.name || 'Andy bot' }), config?.headline && (jsx("p", { className: 'andy-header__subtitle', title: config.headline, children: config.headline }))] })] }), jsx("button", { type: 'button', className: 'andy-header__close', id: 'andy-close-button', "aria-label": 'Close chat', onClick: () => setIsOpen(false), children: jsx("svg", { className: 'andy-header__close-icon', width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', children: jsx("path", { d: 'M18 6L6 18M6 6l12 12', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) })] }), jsxs("div", { className: 'andy-chat-window__messages', id: 'andy-messages', ref: messagesContainerRef, children: [config?.description && (jsx("div", { className: 'andy-chat-subtitle', children: jsx("p", { className: 'andy-chat-subtitle__text', children: config.description }) })), messages.map(message => {
+                                    if (message.isForm) {
+                                        return (jsxs("div", { className: 'andy-message-container andy-message-container--form', children: [jsx("div", { className: 'andy-avatar', children: 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: 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' }) }) }), jsx("div", { className: 'andy-message andy-message--bot andy-message--form', children: jsx("div", { className: 'andy-user-info-form', children: jsxs("div", { className: 'andy-user-info-form__content', children: [jsx("h3", { className: 'andy-user-info-form__title', children: config?.collectUserInfo?.message ||
+                                                                        'Please provide your information to continue:' }), jsxs("form", { className: 'andy-user-info-form__form', id: 'andy-user-info-form', children: [jsxs("div", { className: 'andy-form-group', children: [jsx("label", { htmlFor: 'andy-user-name', className: 'andy-form-group__label', children: "Name" }), jsx("input", { type: 'text', id: 'andy-user-name', className: 'andy-form-group__input', placeholder: 'Your Name', required: true })] }), jsxs("div", { className: 'andy-form-group', children: [jsx("label", { htmlFor: 'andy-user-email', className: 'andy-form-group__label', children: "Email" }), jsx("input", { type: 'email', id: 'andy-user-email', className: 'andy-form-group__input', placeholder: 'Your Email', required: true })] }), jsx("button", { type: 'submit', className: 'andy-button andy-button--primary andy-user-info-form__submit', children: "Submit" })] })] }) }) })] }, message.id));
+                                    }
+                                    if (message.isLoading) {
+                                        return (jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--loading', children: jsx("div", { className: 'andy-message andy-message--bot', children: jsxs("div", { className: 'andy-typing-indicator', children: [jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }, message.id));
+                                    }
+                                    return (jsxs("div", { className: `andy-message-container andy-message-container--${message.sender}`, children: [message.sender === 'bot' && (jsxs("div", { className: `andy-message andy-message--bot ${message.isError ? 'andy-message--error' : ''}`, children: [jsxs("div", { className: 'andy-bot-header', children: [jsx("div", { className: 'andy-bot-header__icon', children: config?.logoUrl ? (jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image' })) : (jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image andy-bot-header__icon-image--default' })) }), jsx("span", { className: 'andy-bot-header__name', children: config?.name || 'Andy bot' })] }), jsx("div", { className: 'andy-message__content', children: jsx("div", { dangerouslySetInnerHTML: { __html: parseMarkdown(message.content) } }) })] })), message.sender === 'user' && (jsx("div", { className: 'andy-message andy-message--user', children: jsx("div", { className: 'andy-message__content', children: jsx("p", { children: message.content }) }) }))] }, message.id));
+                                }), isLoading && (jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--typing', children: jsx("div", { className: 'andy-message andy-message--bot andy-message--typing', children: jsxs("div", { className: 'andy-typing-indicator', children: [jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }))] }), jsxs("div", { className: 'andy-chat-window__bottom', children: [config?.predefinedQuestions &&
+                                    config.predefinedQuestions.length > 0 &&
+                                    showPredefinedQuestions && (jsxs("div", { className: 'andy-predefined-questions', id: 'andy-predefined-questions', children: [jsx("div", { className: 'andy-predefined-questions__header', children: jsx("p", { className: 'andy-predefined-questions__title', children: "What would you like to know?" }) }), jsx("div", { className: 'andy-predefined-questions__list', children: config.predefinedQuestions.map((q, index) => (jsxs("button", { type: 'button', className: 'andy-predefined-question', "data-question": q.question, disabled: isCollectingUserInfo || isLoading || !config, children: [jsx("span", { className: 'andy-predefined-question__icon', children: "\uD83D\uDCAC" }), jsx("span", { className: 'andy-predefined-question__text', children: q.question })] }, index))) })] })), jsx("div", { className: 'andy-chat-window__input', children: jsx("div", { className: 'andy-input-container', children: jsxs("div", { className: 'andy-input', children: [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 }), 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: 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: jsx("path", { d: 'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z' }) }) })] }) }) }), config?.showBranding !== false && (jsx("footer", { className: 'andy-chat-window__footer', children: jsx("a", { href: getFooterUrl(), target: '_blank', rel: 'noopener noreferrer', className: 'andy-chat-window__footer-link', children: jsx("span", { className: 'andy-chat-window__footer-text', children: FOOTER_TEXT }) }) }))] })] }), portalRef.current), showWelcomePopup &&
+                    !isOpen &&
+                    ReactDOM.createPortal(jsxs("div", { className: `andy-welcome-popup ${config?.orientation === 'left' ? 'andychat-popup-left' : ''}`, style: { display: 'block' }, role: 'dialog', "aria-label": 'Welcome message', children: [jsxs("div", { className: 'andy-welcome-popup__content', children: [jsx("div", { className: 'andy-welcome-popup__message', children: config?.showWelcomePopup?.message ||
+                                            config?.welcomeMessage ||
+                                            'Welcome! How can I help you today?' }), jsx("button", { type: 'button', className: 'andy-welcome-popup__close', "aria-label": 'Close welcome message', onClick: () => setShowWelcomePopup(false), children: 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: jsx("path", { d: 'M18 6L6 18M6 6l12 12', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) })] }), 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] = useState({});
+    const [isLoading, setIsLoading] = useState(true);
+    const [isOpen, setIsOpen] = useState(false);
+    const [error, setError] = useState(null);
+    const [messages, setMessages] = useState([]);
+    const [showingFaq, setShowingFaq] = useState(false);
+    const [sessionId, setSessionId] = useState(() => generateSessionId());
+    const [userInfoCollected, setUserInfoCollected] = useState(false);
+    const [showingWelcomePopup, setShowingWelcomePopup] = useState(false);
+    const [showingUserInfoForm, setShowingUserInfoForm] = useState(false);
+    const [welcomePopupShown, setWelcomePopupShown] = useState(false);
+    const welcomeTimeoutRef = useRef(null);
+    const userInfoTimeoutRef = useRef(null);
+    const initializeChatbot = 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 = 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 = 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 = useCallback(() => {
+        setShowingFaq(true);
+    }, []);
+    const hideFaq = useCallback(() => {
+        setShowingFaq(false);
+    }, []);
+    const showWelcomePopup = useCallback(() => {
+        setShowingWelcomePopup(true);
+    }, []);
+    const hideWelcomePopup = useCallback(() => {
+        setShowingWelcomePopup(false);
+    }, []);
+    const showUserInfoForm = useCallback(() => {
+        setShowingUserInfoForm(true);
+    }, []);
+    const hideUserInfoForm = useCallback(() => {
+        setShowingUserInfoForm(false);
+    }, []);
+    const submitUserInfo$1 = 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 = 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 = 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 (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 ? (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: jsx("path", { d: 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' }) })) : config?.logoUrl ? (jsx("img", { src: config.logoUrl, alt: 'Chatbot Logo', className: 'andy-chat-bubble__logo' })) : (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 (jsxs("div", { className: containerClasses, children: [jsxs("div", { className: 'andy-bot-header', children: [jsx("div", { className: 'andy-bot-header__icon', children: 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: [jsx("path", { d: 'M12 6V2H8' }), 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' }), jsx("path", { d: 'M2 12h2' }), jsx("path", { d: 'M9 11v2' }), jsx("path", { d: 'M15 11v2' }), jsx("path", { d: 'M20 12h2' })] }) }), jsx("span", { className: 'andy-bot-header__name', children: botName || 'Andy bot' })] }), jsx("div", { className: messageClasses, children: jsx("div", { className: 'andy-message__content', dangerouslySetInnerHTML: { __html: messageContent } }) })] }));
+    }
+    return (jsx("div", { className: containerClasses, children: jsx("div", { className: messageClasses, children: jsx("div", { className: 'andy-message__content', children: jsx("p", { children: messageContent }) }) }) }));
+};
+const TypingIndicator = () => (jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--typing', children: jsx("div", { className: 'andy-message andy-message--bot andy-message--typing', children: jsxs("div", { className: 'andy-typing-indicator', children: [jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }));
+const MessageList = ({ messages, isLoading, logoUrl, botName }) => {
+    const messagesEndRef = useRef(null);
+    useEffect(() => {
+        if (messagesEndRef.current) {
+            messagesEndRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'end'
+            });
+        }
+    }, [messages, isLoading]);
+    return (jsxs(Fragment, { children: [messages.map(message => (jsx(MessageComponent, { message: message, logoUrl: logoUrl, botName: botName }, message.id || message.timestamp))), isLoading && jsx(TypingIndicator, {}), messages.length === 0 && !isLoading && (jsxs("div", { className: 'andy-empty-state', children: [jsx("div", { className: 'andy-empty-state__icon', children: "\uD83D\uDCAC" }), jsx("div", { className: 'andy-empty-state__text', children: "Start a conversation by typing a message below" })] })), jsx("div", { ref: messagesEndRef })] }));
+};
+
+const MessageInput = ({ onSendMessage, disabled = false, placeholder = 'Type your message here...' }) => {
+    const [message, setMessage] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const inputRef = 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 (jsxs("div", { className: 'andy-input', children: [jsx("input", { ref: inputRef, type: 'text', value: message, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isInputDisabled, maxLength: 1000, autoComplete: 'off', id: 'andy-input' }), jsx("button", { type: 'button', onClick: () => handleSubmit({ preventDefault: () => { } }), disabled: !canSend, id: 'andy-send', children: isSubmitting ? ('...') : (jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: 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 (jsxs("div", { className: windowClasses, children: [jsxs("div", { className: 'andy-header', children: [jsx("div", { className: 'andy-title', children: config?.headline || 'Chat with our AI ✨' }), jsx("div", { className: 'andy-subtitle', children: config?.description || 'Ask any question and our AI will answer' }), jsx("div", { className: 'andy-close', onClick: onClose, role: 'button', tabIndex: 0, children: "\u2715" })] }), jsx("div", { className: 'andy-messages', id: 'andy-messages', children: jsx(MessageList, { messages: messages, isLoading: isLoading, logoUrl: config?.logoUrl, botName: config?.name }) }), jsx("div", { className: 'andy-input-container', children: jsx(MessageInput, { onSendMessage: onSendMessage, disabled: isLoading, placeholder: 'Type your message here...' }) }), config?.showBranding !== false && (jsx("div", { className: 'andy-footer', children: jsx("a", { href: FOOTER_URL, target: '_blank', rel: 'noopener noreferrer', children: FOOTER_TEXT }) }))] }));
+};
+
+const FAQ = ({ faqs = [], onBack }) => {
+    return (jsxs("div", { className: 'andy-chat-faq', children: [jsxs("button", { className: 'andy-chat-faq__back', onClick: onBack, type: 'button', "aria-label": 'Back to chat', children: [jsx("svg", { viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', children: 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"] }), jsx("div", { className: 'andy-chat-faq__title', children: "Frequently Asked Questions" }), jsx("div", { className: 'andy-chat-faq__list', children: faqs.length > 0 ? (faqs.map((faq, index) => (jsxs("div", { className: 'andy-chat-faq__item', children: [jsx("div", { className: 'andy-chat-faq__question', children: faq.question }), jsx("div", { className: 'andy-chat-faq__answer', children: faq.answer })] }, index)))) : (jsxs("div", { className: 'andy-chat-faq__empty', children: [jsx("div", { className: 'andy-chat-faq__empty-icon', children: jsx("svg", { width: '48', height: '48', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: 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' }) }) }), jsx("div", { className: 'andy-chat-faq__empty-text', children: "No frequently asked questions available at this time." })] })) })] }));
+};
+
+const WelcomePopup = ({ message, onClose }) => {
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            onClose();
+        }, 5000);
+        return () => clearTimeout(timer);
+    }, [onClose]);
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [onClose]);
+    return (jsx("div", { className: 'andy-chat-welcome-popup__backdrop', onClick: handleBackdropClick, children: jsxs("div", { className: 'andy-chat-welcome-popup', children: [jsx("button", { className: 'andy-chat-welcome-popup__close', onClick: onClose, "aria-label": 'Close welcome message', type: 'button', children: "\u2715" }), jsx("div", { className: 'andy-chat-welcome-popup__icon', children: jsx("svg", { width: '32', height: '32', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: 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' }) }) }), jsx("div", { className: 'andy-chat-welcome-popup__message', children: message }), jsx("button", { className: 'andy-chat-welcome-popup__button', onClick: onClose, type: 'button', children: "Get Started" }), jsx("div", { className: 'andy-chat-welcome-popup__timer', children: jsx("div", { className: 'andy-chat-welcome-popup__timer-bar' }) })] }) }));
+};
+
+const UserInfoForm = ({ headerText, onSubmit, onClose }) => {
+    const [formData, setFormData] = useState({
+        name: '',
+        email: ''
+    });
+    const [errors, setErrors] = useState({});
+    const [isSubmitting, setIsSubmitting] = 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
+            }));
+        }
+    };
+    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 (jsx("div", { className: 'andy-chat-user-form__backdrop', onClick: handleBackdropClick, children: jsxs("div", { className: 'andy-chat-user-form', children: [jsx("button", { className: 'andy-chat-user-form__close', onClick: onClose, "aria-label": 'Close form', type: 'button', children: "\u2715" }), jsxs("div", { className: 'andy-chat-user-form__header', children: [jsx("div", { className: 'andy-chat-user-form__icon', children: jsx("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: 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' }) }) }), jsx("div", { className: 'andy-chat-user-form__title', children: headerText || "Let's get to know you better" }), jsx("div", { className: 'andy-chat-user-form__subtitle', children: "Please provide your information to continue" })] }), jsxs("form", { className: 'andy-chat-user-form__form', onSubmit: handleSubmit, children: [jsxs("div", { className: 'andy-chat-user-form__field', children: [jsx("label", { htmlFor: 'andy-user-name', className: 'andy-chat-user-form__label', children: "Name *" }), 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 && jsx("div", { className: 'andy-chat-user-form__error', children: errors.name })] }), jsxs("div", { className: 'andy-chat-user-form__field', children: [jsx("label", { htmlFor: 'andy-user-email', className: 'andy-chat-user-form__label', children: "Email *" }), 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 && jsx("div", { className: 'andy-chat-user-form__error', children: errors.email })] }), errors.submit && jsx("div", { className: 'andy-chat-user-form__submit-error', children: errors.submit }), jsxs("div", { className: 'andy-chat-user-form__actions', children: [jsx("button", { type: 'button', className: 'andy-chat-user-form__button andy-chat-user-form__button--secondary', onClick: onClose, disabled: isSubmitting, children: "Skip for now" }), jsx("button", { type: 'submit', className: 'andy-chat-user-form__button andy-chat-user-form__button--primary', disabled: isSubmitting, children: isSubmitting ? (jsxs("span", { className: 'andy-chat-user-form__loading', children: [jsx("span", { className: 'andy-chat-user-form__loading-dot' }), jsx("span", { className: 'andy-chat-user-form__loading-dot' }), jsx("span", { className: 'andy-chat-user-form__loading-dot' })] })) : ('Continue') })] })] })] }) }));
+};
+
+export { AndyChat as Andy, AndyChat, ChatBubble, ChatWindow, FAQ, MessageInput, MessageList, UserInfoForm, WelcomePopup, animation, borderRadius, chat, colors, AndyChat as default, generateSessionId, getApiBaseUrl, getEmbedId, isValidEmbedId, parseMarkdown, sanitizeUrl, setApiBaseUrl, shadows, spacing, theme, typography, useAndyChat, zIndex };
+//# sourceMappingURL=index.esm.js.map