/**
 * AL Homes AI Chat Widget — v2.0.0
 *
 * Redesign notes:
 *   • Closed bubble: frosted-glass outer ring (stone-400/30 + 5px backdrop-blur)
 *     wrapping a Complimentary-4 (#C9A876) inner circle with the ALAI.svg icon.
 *   • Focused state: panel messages area goes pure white when input is focused.
 *   • New "clear conversation" icon button in the panel header.
 *   • Inline links (.alh-ai-link) styled in accent gold.
 *
 * High-specificity selectors + !important on critical props remain — these fight
 * theme/Elementor/LiteSpeed CSS conflicts that we've debugged in the wild.
 */

:root {
	--alh-ai-primary: #47614D;
	--alh-ai-primary-dark: #324839;
	--alh-ai-primary-light: #6B8573;
	--alh-ai-accent: #C9A876;          /* Complimentary-4 — used for bubble inner circle */
	--alh-ai-accent-soft: #E8D7B8;
	--alh-ai-bg: #FAFAF7;
	--alh-ai-surface: #FFFFFF;
	--alh-ai-border: #E8E4DC;
	--alh-ai-text: #2B2520;
	--alh-ai-text-muted: #7A7369;
	--alh-ai-user-bubble: #47614D;
	--alh-ai-assistant-bubble: #F2EEE6;
	--alh-ai-frost: rgba(120, 113, 108, 0.30); /* stone-400/30 */
	--alh-ai-shadow: 0 10px 40px -10px rgba(50, 72, 57, 0.25);
	--alh-ai-shadow-hover: 0 20px 60px -12px rgba(50, 72, 57, 0.35);
	--alh-ai-font: 'Afacad Flux', 'Sofia Pro', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--alh-ai-z: 2147483647;
}

/* Reset within widget scope */
#alh-ai-widget,
#alh-ai-widget *,
#alh-ai-widget *::before,
#alh-ai-widget *::after {
	box-sizing: border-box !important;
	font-family: var(--alh-ai-font) !important;
	margin: 0;
	padding: 0;
}

#alh-ai-widget {
	position: fixed !important;
	bottom: 24px !important;
	right: 24px !important;
	left: auto !important;
	top: auto !important;
	z-index: var(--alh-ai-z) !important;
	font-size: 15px;
	line-height: 1.5;
	color: var(--alh-ai-text);
	width: auto !important;
	height: auto !important;
	pointer-events: auto !important;
	isolation: isolate;
}

#alh-ai-widget .alh-ai-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ──────────────────────────────────────────────────────────
 * Floating Bubble — frosted ring + Complimentary-4 inner
 * (with v1-style ambient aura behind it)
 * ────────────────────────────────────────────────────────── */
#alh-ai-widget .alh-ai-bubble {
	position: relative !important;
	width: 64px !important;
	height: 64px !important;
	min-width: 64px !important;
	min-height: 64px !important;
	max-width: 64px !important;
	max-height: 64px !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	background-color: transparent !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
				filter 0.28s ease !important;
	outline: none;
	text-decoration: none;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
	overflow: visible;
	pointer-events: auto !important;
	z-index: 2147483647 !important;
	border-radius: 35px !important;
	filter: drop-shadow(0 8px 22px rgba(50, 72, 57, 0.22));
}

/* Ambient aura — soft pulsing halo behind the bubble (v1 vibe). */
#alh-ai-widget .alh-ai-bubble::before {
	content: '';
	position: absolute !important;
	inset: -14px !important;
	border-radius: 50% !important;
	background: radial-gradient(circle at center,
		rgba(201, 168, 118, 0.45) 0%,
		rgba(201, 168, 118, 0.18) 40%,
		rgba(201, 168, 118, 0) 70%) !important;
	z-index: -1 !important;
	pointer-events: none !important;
	animation: alh-ai-bubble-aura 3.6s ease-in-out infinite !important;
	will-change: transform, opacity;
}

@keyframes alh-ai-bubble-aura {
	0%, 100% { transform: scale(1);    opacity: 0.55; }
	50%      { transform: scale(1.18); opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
	#alh-ai-widget .alh-ai-bubble::before {
		animation: none !important;
		opacity: 0.55 !important;
	}
}

#alh-ai-widget .alh-ai-bubble:hover {
	transform: translateY(-2px) scale(1.04) !important;
	filter: drop-shadow(0 14px 32px rgba(50, 72, 57, 0.32));
}

#alh-ai-widget .alh-ai-bubble:active {
	transform: translateY(0) scale(0.97) !important;
}

#alh-ai-widget .alh-ai-bubble:focus,
#alh-ai-widget .alh-ai-bubble:focus-visible {
	outline: 2px solid var(--alh-ai-accent);
	outline-offset: 4px;
}

/* Frosted glass outer ring — w-16 h-16 p-2.5 bg-stone-400/30 backdrop-blur-[5px] */
#alh-ai-widget .alh-ai-bubble__ring {
	width: 64px !important;
	height: 64px !important;
	padding: 10px !important;
	border-radius: 35px !important;
	background: var(--alh-ai-frost) !important;
	-webkit-backdrop-filter: blur(5px) !important;
	backdrop-filter: blur(5px) !important;
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: background-color 0.25s ease !important;
}

#alh-ai-widget .alh-ai-bubble:hover .alh-ai-bubble__ring {
	background: rgba(120, 113, 108, 0.40) !important;
}

/* Inner solid circle — w-12 h-12 bg-Complimentary-4 rounded-3xl */
#alh-ai-widget .alh-ai-bubble__inner {
	width: 44px !important;
	height: 44px !important;
	border-radius: 24px !important;
	background: var(--alh-ai-accent) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--alh-ai-bg);
	box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.08),
				inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: background-color 0.2s ease !important;
}

#alh-ai-widget .alh-ai-bubble:hover .alh-ai-bubble__inner {
	background: #B9956A !important;
}

#alh-ai-widget .alh-ai-bubble__icon {
	width: 25px !important;
	height: 25px !important;
	display: block !important;
	pointer-events: none;
}

#alh-ai-widget .alh-ai-bubble__icon path {
	transition: fill 180ms ease;
}

/* Hide bubble when panel is open */
#alh-ai-widget[data-open="true"] .alh-ai-bubble {
	transform: scale(0) !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ──────────────────────────────────────────────────────────
 * Chat Panel
 * ────────────────────────────────────────────────────────── */
#alh-ai-widget .alh-ai-panel {
	position: absolute !important;
	bottom: 0 !important;
	right: 0 !important;
	width: 380px !important;
	height: 560px !important;
	max-height: calc(100vh - 48px) !important;
	background: #FFFFFF !important;
	border-radius: 20px !important;
	box-shadow: 0 10px 40px -10px rgba(50, 72, 57, 0.25) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	transform-origin: bottom right;
	animation: alh-ai-panel-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
	border: 1px solid var(--alh-ai-border) !important;
}

@keyframes alh-ai-panel-in {
	from { opacity: 0; transform: scale(0.9) translateY(20px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

#alh-ai-widget .alh-ai-panel[hidden] {
	display: none !important;
}

/* Panel Header — white surface with subtle bottom border (per Figma) */
#alh-ai-widget .alh-ai-panel__header {
	background: #FFFFFF !important;
	color: var(--alh-ai-text) !important;
	padding: 14px 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	border-bottom: 1px solid var(--alh-ai-border) !important;
}

#alh-ai-widget .alh-ai-panel__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	z-index: 1;
	min-width: 0;
}

#alh-ai-widget .alh-ai-panel__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #57534E; /* stone-600 — dark mark on light header */
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FAF9F7;
	border: none;
	flex-shrink: 0;
	overflow: hidden;
}

#alh-ai-widget .alh-ai-panel__avatar-img {
	width: 32px !important;
	height: 32px !important;
	display: block !important;
}

#alh-ai-widget .alh-ai-panel__avatar-img.is-failed {
	display: none !important;
}

#alh-ai-widget .alh-ai-panel__avatar-fallback {
	display: none;
	align-items: center;
	justify-content: center;
	color: #FAF9F7;
}

#alh-ai-widget .alh-ai-panel__avatar-fallback.is-shown {
	display: inline-flex !important;
}

#alh-ai-widget .alh-ai-panel__avatar-fallback svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
}

#alh-ai-widget .alh-ai-panel__title {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--alh-ai-text);
}

#alh-ai-widget .alh-ai-panel__subtitle {
	margin: 2px 0 0;
	font-size: 13px;
	opacity: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--alh-ai-text-muted);
}

#alh-ai-widget .alh-ai-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #34C77B; /* green dot stays green per Figma "Ready to help" indicator */
	box-shadow: 0 0 8px rgba(52, 199, 123, 0.45);
	animation: alh-ai-dot-pulse 2s ease-in-out infinite;
	display: inline-block;
}

@keyframes alh-ai-dot-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}

#alh-ai-widget .alh-ai-panel__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

#alh-ai-widget .alh-ai-panel__icon-btn,
#alh-ai-widget .alh-ai-panel__close {
	background: transparent !important;
	border: none !important;
	color: var(--alh-ai-text-muted) !important;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
	flex-shrink: 0;
}

#alh-ai-widget .alh-ai-panel__icon-btn:hover {
	background: var(--alh-ai-bg) !important;
	color: var(--alh-ai-text) !important;
}

#alh-ai-widget .alh-ai-panel__close:hover {
	background: var(--alh-ai-bg) !important;
	color: var(--alh-ai-text) !important;
	transform: rotate(90deg) !important;
}

#alh-ai-widget .alh-ai-panel__close svg,
#alh-ai-widget .alh-ai-panel__icon-btn svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
}

/* ──────────────────────────────────────────────────────────
 * Messages Area
 * ────────────────────────────────────────────────────────── */
#alh-ai-widget .alh-ai-panel__messages {
	flex: 1 !important;
	overflow-y: auto !important;
	padding: 18px 18px 14px !important;
	background: var(--alh-ai-bg) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	scroll-behavior: smooth;
	min-height: 0;
	transition: background-color 0.25s ease !important;
}

/* Focused state — input is focused → panel goes pure white */
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-panel__messages {
	background: #FFFFFF !important;
}

#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-panel__suggestions {
	background: #FFFFFF !important;
}

#alh-ai-widget .alh-ai-panel__messages::-webkit-scrollbar {
	width: 6px;
}

#alh-ai-widget .alh-ai-panel__messages::-webkit-scrollbar-thumb {
	background: var(--alh-ai-border);
	border-radius: 3px;
}

#alh-ai-widget .alh-ai-message {
	display: flex !important;
	max-width: 88% !important;
	animation: alh-ai-msg-in 0.3s ease-out;
}

@keyframes alh-ai-msg-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

#alh-ai-widget .alh-ai-message--user {
	align-self: flex-end !important;
	justify-content: flex-end !important;
}

#alh-ai-widget .alh-ai-message--assistant {
	align-self: flex-start !important;
}

#alh-ai-widget .alh-ai-message__bubble {
	padding: 11px 15px !important;
	border-radius: 16px !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	word-wrap: break-word;
	word-break: break-word;
	white-space: normal;
}

#alh-ai-widget .alh-ai-message--user .alh-ai-message__bubble {
	background: var(--alh-ai-primary) !important;
	color: #fff !important;
	border-bottom-right-radius: 4px !important;
}

#alh-ai-widget .alh-ai-message--assistant .alh-ai-message__bubble {
	background: var(--alh-ai-assistant-bubble) !important;
	color: var(--alh-ai-text) !important;
	border-bottom-left-radius: 4px !important;
}

#alh-ai-widget .alh-ai-message--error .alh-ai-message__bubble {
	background: #FDEEEA !important;
	color: #B3340F !important;
	border: 1px solid #F5C2B7 !important;
}

/* Inline links inside assistant bubbles */
#alh-ai-widget .alh-ai-link {
	color: var(--alh-ai-primary-dark) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--alh-ai-accent) !important;
	text-decoration-thickness: 1.5px !important;
	text-underline-offset: 2px !important;
	font-weight: 500 !important;
	transition: color 0.15s ease, text-decoration-color 0.15s ease !important;
}

#alh-ai-widget .alh-ai-link:hover {
	color: var(--alh-ai-primary) !important;
	text-decoration-color: var(--alh-ai-primary) !important;
}

#alh-ai-widget .alh-ai-message__bubble strong {
	font-weight: 600;
}

#alh-ai-widget .alh-ai-message__bubble em {
	font-style: italic;
}

/* Typing Indicator */
#alh-ai-widget .alh-ai-typing {
	display: flex;
	gap: 4px;
	padding: 4px 0;
}

#alh-ai-widget .alh-ai-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--alh-ai-primary-light);
	animation: alh-ai-typing 1.4s infinite ease-in-out;
}

#alh-ai-widget .alh-ai-typing span:nth-child(2) { animation-delay: 0.16s; }
#alh-ai-widget .alh-ai-typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes alh-ai-typing {
	0%, 60%, 100% { transform: translateY(0);   opacity: 0.5; }
	30%           { transform: translateY(-6px); opacity: 1;   }
}

/* ──────────────────────────────────────────────────────────
 * Suggestion Chips
 * ────────────────────────────────────────────────────────── */
#alh-ai-widget .alh-ai-panel__suggestions {
	display: flex !important;
	gap: 6px !important;
	padding: 8px 18px 0 !important;
	flex-wrap: wrap !important;
	background: var(--alh-ai-bg) !important;
	flex-shrink: 0;
	transition: background-color 0.25s ease !important;
}

#alh-ai-widget .alh-ai-panel__suggestions:empty {
	display: none !important;
}

#alh-ai-widget .alh-ai-chip {
	background: #FFFFFF !important;
	border: 1px solid var(--alh-ai-border) !important;
	color: var(--alh-ai-text) !important;
	padding: 7px 12px !important;
	border-radius: 100px !important;
	font-size: 12px !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	white-space: nowrap;
	line-height: 1.3;
}

#alh-ai-widget .alh-ai-chip:hover {
	background: var(--alh-ai-primary) !important;
	color: #fff !important;
	border-color: var(--alh-ai-primary) !important;
	transform: translateY(-1px) !important;
}

/* ──────────────────────────────────────────────────────────
 * Composer
 * ────────────────────────────────────────────────────────── */
#alh-ai-widget .alh-ai-panel__composer {
	display: flex !important;
	align-items: flex-end !important;
	gap: 8px !important;
	padding: 12px 14px !important;
	background: #FFFFFF !important;
	border-top: 1px solid var(--alh-ai-border) !important;
	flex-shrink: 0;
	margin: 0 !important;
}

#alh-ai-widget .alh-ai-input {
	flex: 1 !important;
	border: 1px solid var(--alh-ai-border) !important;
	background: var(--alh-ai-bg) !important;
	border-radius: 20px !important;
	padding: 10px 16px !important;
	font-size: 14px !important;
	font-family: inherit !important;
	color: var(--alh-ai-text) !important;
	resize: none !important;
	outline: none !important;
	max-height: 100px !important;
	min-height: auto !important;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

#alh-ai-widget .alh-ai-input:focus {
	border-color: var(--alh-ai-primary) !important;
	background: #FFFFFF !important;
	box-shadow: 0 0 0 3px rgba(71, 97, 77, 0.10) !important;
}

#alh-ai-widget .alh-ai-input::placeholder {
	color: var(--alh-ai-text-muted) !important;
	opacity: 1;
}

#alh-ai-widget .alh-ai-send {
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: none !important;
	background: var(--alh-ai-primary) !important;
	color: #fff !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	transition: transform 0.15s ease, background-color 0.2s ease, opacity 0.2s ease !important;
	-webkit-appearance: none;
	appearance: none;
}

#alh-ai-widget .alh-ai-send svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
}

#alh-ai-widget .alh-ai-send:hover:not(:disabled) {
	background: var(--alh-ai-primary-dark) !important;
	transform: scale(1.05) !important;
}

#alh-ai-widget .alh-ai-send:active:not(:disabled) {
	transform: scale(0.95) !important;
}

#alh-ai-widget .alh-ai-send:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

/* Footer */
#alh-ai-widget .alh-ai-panel__footer {
	padding: 6px 16px 10px !important;
	background: #FFFFFF !important;
	text-align: center !important;
	flex-shrink: 0;
}

#alh-ai-widget .alh-ai-panel__powered {
	font-size: 10px !important;
	color: var(--alh-ai-text-muted) !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
}

/* ──────────────────────────────────────────────────────────
 * Mobile
 * ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	#alh-ai-widget {
		bottom: 16px !important;
		right: 16px !important;
	}

	#alh-ai-widget .alh-ai-panel {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		max-height: 100vh !important;
		border-radius: 0 !important;
	}

	#alh-ai-widget .alh-ai-bubble,
	#alh-ai-widget .alh-ai-bubble__ring {
		width: 60px !important;
		height: 60px !important;
		min-width: 60px !important;
		min-height: 60px !important;
		max-width: 60px !important;
		max-height: 60px !important;
	}

	#alh-ai-widget .alh-ai-bubble__ring {
		padding: 9px !important;
	}

	#alh-ai-widget .alh-ai-bubble__inner {
		width: 42px !important;
		height: 42px !important;
	}
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	#alh-ai-widget .alh-ai-bubble,
	#alh-ai-widget .alh-ai-panel,
	#alh-ai-widget .alh-ai-message,
	#alh-ai-widget .alh-ai-status-dot,
	#alh-ai-widget .alh-ai-typing span,
	#alh-ai-widget .alh-ai-bubble__ring,
	#alh-ai-widget .alh-ai-bubble__inner {
		animation: none !important;
		transition: none !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.9 — Figma alignment overrides (additive)
 *
 * Source of truth: Paul's Figma frames "Live Chat - Icon", "Live Chat - Open Chat",
 * "User Typing", "Loading", "Message - Long" (node IDs 7688-12376, 7749-12618 etc.)
 *
 * Changes vs v2.0.8:
 *   • Closed bubble shrunk 64px → 56px (less aggressive presence per Figma)
 *   • Bubble icon swapped to chevron-down (matches the "close" affordance the
 *     in-panel button uses — opening and closing share the same icon language)
 *   • Panel grew 560px → 600px taller per "Message - Long" frame
 *   • User message bubble: Primary brown bg (#5A4F42), pure white text
 *   • Composer: textarea + send button now share ONE rounded pill (send floats
 *     inside the input on the right). Send button color shifts to Primary brown
 *     when input has content (matches "User Typing" frame).
 *   • Scroll-to-bottom indicator: floats bottom-right of messages area,
 *     auto-shown on long replies via JS, dismisses on click + auto-scroll.
 *
 * Specificity rule: every override uses `#alh-ai-widget .selector` (matches
 * existing pattern). No !important removed from upstream rules — additive only.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Closed bubble — smaller per Figma (50px inner / 64px ring → 44px inner / 56px ring) ─── */
#alh-ai-widget .alh-ai-bubble {
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	max-width: 56px !important;
	max-height: 56px !important;
}

#alh-ai-widget .alh-ai-bubble__ring {
	width: 56px !important;
	height: 56px !important;
	padding: 8px !important;
}

#alh-ai-widget .alh-ai-bubble__inner {
	width: 40px !important;
	height: 40px !important;
	border-radius: 22px !important;
}

#alh-ai-widget .alh-ai-bubble__icon {
	width: 22px !important;
	height: 22px !important;
}

/* Slightly tighter aura halo to match smaller bubble */
#alh-ai-widget .alh-ai-bubble::before {
	inset: -12px !important;
}

/* ─── Panel — taller per Figma "Message - Long" frame ─── */
#alh-ai-widget .alh-ai-panel {
	height: 600px !important;
}

/* ─── User message bubble — Primary brown bg + white text per Figma ─── */
#alh-ai-widget .alh-ai-message--user .alh-ai-message__bubble {
	background: #5A4F42 !important;   /* --Primary */
	color: #FFFFFF !important;          /* --White */
}

/* Links inside user bubble — keep readable on brown bg */
#alh-ai-widget .alh-ai-message--user .alh-ai-message__bubble .alh-ai-link {
	color: #FAF9F7 !important;
	text-decoration-color: rgba(250, 249, 247, 0.6) !important;
}

#alh-ai-widget .alh-ai-message--user .alh-ai-message__bubble .alh-ai-link:hover {
	color: #FFFFFF !important;
	text-decoration-color: #FFFFFF !important;
}

/* ─── Composer pill — unified textarea + send button (Figma spec) ─── */
#alh-ai-widget .alh-ai-panel__composer {
	padding: 12px 14px 8px !important;
}

#alh-ai-widget .alh-ai-composer-pill {
	flex: 1 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #FFFFFF !important;
	border: 1px solid var(--alh-ai-border) !important;
	border-radius: 22px !important;
	padding: 6px 6px 6px 14px !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
	width: 100% !important;
}

/* Focused state — pill grows a subtle outline ring + brighter white bg */
#alh-ai-widget .alh-ai-composer-pill:focus-within {
	border-color: #5A4F42 !important;
	background: #FFFFFF !important;
	box-shadow: 0 0 0 3px rgba(90, 79, 66, 0.10) !important;
}

/* Textarea inside the pill — no border of its own, transparent bg */
#alh-ai-widget .alh-ai-composer-pill .alh-ai-input {
	border: none !important;
	background: transparent !important;
	padding: 6px 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	flex: 1 !important;
	min-width: 0 !important;
}

#alh-ai-widget .alh-ai-composer-pill .alh-ai-input:focus {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Send button inside the pill — smaller (28px), Primary brown when active */
#alh-ai-widget .alh-ai-composer-pill .alh-ai-send {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	border-radius: 50% !important;
	background: #5A4F42 !important;   /* --Primary brown (active) */
	color: #FFFFFF !important;
	flex-shrink: 0 !important;
}

#alh-ai-widget .alh-ai-composer-pill .alh-ai-send svg {
	width: 14px !important;
	height: 14px !important;
	stroke: currentColor;
}

#alh-ai-widget .alh-ai-composer-pill .alh-ai-send:hover:not(:disabled) {
	background: #43392E !important;    /* slightly darker */
	transform: scale(1.05) !important;
}

/* Disabled state — neutral grey (no text typed yet) */
#alh-ai-widget .alh-ai-composer-pill .alh-ai-send:disabled {
	background: #D6D3CE !important;
	color: #FFFFFF !important;
	opacity: 1 !important;
	cursor: default !important;
}

/* ─── Scroll-to-bottom floating indicator (per Figma "Message - Long" frame) ─── */
#alh-ai-widget .alh-ai-scroll-to-bottom {
	position: absolute !important;
	right: 16px !important;
	/* Floats above the composer, anchored to messages area bottom.
	   Composer pill is ~64px + footer ~28px = ~92px, plus breathing room. */
	bottom: 108px !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba(168, 154, 138, 0.55) !important;   /* stone-400/55 */
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
	color: #FAF9F7 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 6px 18px -4px rgba(50, 50, 50, 0.25) !important;
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease !important;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	z-index: 5;
	padding: 0 !important;
	-webkit-appearance: none;
	appearance: none;
}

#alh-ai-widget .alh-ai-scroll-to-bottom[hidden] {
	/* Override HTML hidden attr with our own animated state */
	display: flex !important;
}

#alh-ai-widget .alh-ai-scroll-to-bottom.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

#alh-ai-widget .alh-ai-scroll-to-bottom:hover {
	background: rgba(140, 128, 113, 0.75) !important;
	transform: translateY(-1px);
}

#alh-ai-widget .alh-ai-scroll-to-bottom:active {
	transform: translateY(0) scale(0.95);
}

@media (prefers-reduced-motion: reduce) {
	#alh-ai-widget .alh-ai-scroll-to-bottom {
		transition: opacity 0.15s linear !important;
	}
	#alh-ai-widget .alh-ai-scroll-to-bottom,
	#alh-ai-widget .alh-ai-scroll-to-bottom.is-visible {
		transform: none !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.10 — Bubble stays visible + icon swap + focused white background
 *
 * Three Figma-driven changes (additive over v2.0.9):
 *
 * 1) ICON SWAP on open/close
 *    The bubble template ships TWO SVG icons:
 *      .alh-ai-bubble__icon--closed → chat-bubble-with-3-dots (Figma node 7749_12619)
 *      .alh-ai-bubble__icon--open   → chevron-down            (Figma node 7749_12701)
 *    CSS reveals exactly one based on the widget's [data-open] attribute.
 *    No JS swap needed — flag flip on the wrapper does it.
 *
 * 2) BUBBLE STAYS VISIBLE when panel is open
 *    Override v2.0.9's `transform: scale(0)` that collapsed the bubble.
 *    Now the bubble sits below the panel with 25px breathing room
 *    (per Figma "Live Chat - Open Chat" layout — image #2).
 *    Clicking it again collapses the panel and restores the chat-bubble icon.
 *
 * 3) FOCUSED WHITE BACKGROUND BOX
 *    When the input is focused / user is typing, the messages area + composer
 *    gets a slightly elevated pure-white surface so the typing context "lifts"
 *    out of the soft beige base. Removed on blur if the textarea is empty.
 *    JS toggles `.is-focused` on the .alh-ai-panel via input focus/blur events
 *    (already wired in v2.0.0 — these styles just give it Figma treatment).
 * ══════════════════════════════════════════════════════════════════ */

/* ─── ICON SWAP ─── */

/* Both icons live inside .alh-ai-bubble__inner; default state hides --open */
#alh-ai-widget .alh-ai-bubble__icon--closed,
#alh-ai-widget .alh-ai-bubble__icon--open {
	display: none !important;
	width: 22px !important;
	height: 22px !important;
	pointer-events: none;
}

/* When CLOSED (default), show chat-bubble */
#alh-ai-widget:not([data-open="true"]) .alh-ai-bubble__icon--closed {
	display: block !important;
}

/* When OPEN, show chevron-down */
#alh-ai-widget[data-open="true"] .alh-ai-bubble__icon--open {
	display: block !important;
}

/* ─── BUBBLE STAYS VISIBLE WHEN OPEN ─── */

/* v2.0.9 collapsed the bubble. We override that here — the bubble persists
   below the panel with 25px breathing room per Figma. */
#alh-ai-widget[data-open="true"] .alh-ai-bubble {
	transform: none !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* ─── PANEL POSITIONING ───
   The panel anchors at the same bottom-right as the bubble. We shift it up by
   (bubble height 56px + 25px gap = 81px) so the bubble sits visibly below.
   bottom: 81px → panel floats above the bubble. */
#alh-ai-widget[data-open="true"] .alh-ai-panel {
	bottom: 81px !important;
}

/* When closed, panel sits on the bubble's spot (hidden anyway). */

/* ─── FOCUSED WHITE BACKGROUND BOX ───
   The widget's existing .is-focused class (set by input focus event) gets a
   light-elevation white surface treatment. The messages area + composer share
   a single white "card" that visually highlights the typing context.

   We don't want this on the welcome state — only when there's text or a focused
   input. Compound selectors handle both signals. */

/* Pure white background behind the messages flow when focused. */
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-panel__messages {
	background: #FFFFFF !important;
}

/* And the composer area too — they share one continuous white surface. */
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-panel__composer {
	background: #FFFFFF !important;
}

/* Composer pill gets a slightly more prominent outline when the panel-wide
   focused state is active — works on top of the existing :focus-within rule. */
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-composer-pill {
	background: #FFFFFF !important;
}

/* Optional: subtle border between messages and composer when focused, so the
   white "card" reads as one coherent surface rather than two stacked blocks. */
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-panel__composer {
	border-top-color: rgba(232, 228, 220, 0.6) !important;
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.11 — Suggestion chip hover → Primary brown
 *
 * Earlier hover used the green --alh-ai-primary (#47614D) from the legacy
 * palette. Updated to match the brown brand color used by the user message
 * bubble and active send button (#5A4F42 / --Primary).
 * ══════════════════════════════════════════════════════════════════ */

#alh-ai-widget .alh-ai-chip:hover,
#alh-ai-widget .alh-ai-chip:focus-visible {
	background: #5A4F42 !important;       /* --Primary brown */
	color: #FFFFFF !important;
	border-color: #5A4F42 !important;
}

#alh-ai-widget .alh-ai-chip:active {
	background: #43392E !important;       /* slightly darker brown on press */
	border-color: #43392E !important;
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.12 — Placeholder visibility + iPhone SE responsiveness
 *
 * Two issues fixed:
 *
 * 1) PLACEHOLDER WAS CUTTING OFF
 *    Root cause: native browser <textarea> ships with a corner resize handle
 *    (the ⇅ arrows visible in the user's screenshot — these are NOT my CSS,
 *    they're Chrome/Brave's default UA-styled resize grip). It steals visual
 *    space and confuses the "Ask a question" placeholder layout.
 *    Fix: `resize: none` + `overflow-y: hidden` (until autoResize bumps height),
 *    and we also force `text-overflow: ellipsis` + `white-space: nowrap` on
 *    the textarea PLACEHOLDER specifically so single-line state never wraps
 *    or clips. Some browsers (Safari, mobile WebKit) don't truncate textarea
 *    placeholders unless you tell them to.
 *
 * 2) iPhone SE RESPONSIVENESS (375×667)
 *    The existing @media (max-width: 480px) goes fullscreen but doesn't tighten
 *    spacing — at 375px, the panel header had 18px side padding eating into the
 *    AL Homes title + close/clear buttons, AND the input pill had 14px left
 *    padding + 8px gap + 28px send button = 50px of chrome before the placeholder
 *    even renders. On 375px wide screen minus margins, you lose half the width.
 *
 *    Compounded fixes at ≤480px AND ≤380px (iPhone SE-tier):
 *      • Tighter header padding (14px → 10px)
 *      • Tighter composer pill internal padding (14px left → 12px)
 *      • Slightly smaller chip/message text only at ≤380px
 *      • Suggestion chips: allow wrapping (currently white-space: nowrap which
 *        forces a horizontal scroll on narrow screens — kept narrow chips
 *        but `flex-wrap: wrap` on the container)
 *
 * Specificity: maintains the `#alh-ai-widget` prefix, additive over v2.0.11.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── 1. Placeholder always-visible: kill native resize handle + ellipsis ─── */
#alh-ai-widget .alh-ai-input,
#alh-ai-widget .alh-ai-composer-pill .alh-ai-input {
	resize: none !important;
	overflow-y: auto !important;   /* only scrolls AFTER autoResize hits its max */
	overflow-x: hidden !important;
	scrollbar-width: thin;
	/* WebKit textarea sometimes lets a hidden resize handle leak through */
	-webkit-resize: none !important;
}

#alh-ai-widget .alh-ai-input::-webkit-resizer {
	display: none !important;
}

#alh-ai-widget .alh-ai-input::-webkit-scrollbar {
	width: 4px;
}

#alh-ai-widget .alh-ai-input::-webkit-scrollbar-thumb {
	background: rgba(90, 79, 66, 0.2);
	border-radius: 4px;
}

/* Placeholder — never wrap or clip awkwardly. Truncate gracefully with ellipsis. */
#alh-ai-widget .alh-ai-input::placeholder {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	color: var(--alh-ai-text-muted) !important;
	opacity: 1 !important;
}

/* ─── 2. Mobile responsiveness ≤480px (iPhone 12 Pro Max down to small tablets) ─── */
@media (max-width: 480px) {
	/* Header: tighter padding so brand + actions fit cleanly */
	#alh-ai-widget .alh-ai-panel__header {
		padding: 12px 14px !important;
	}

	#alh-ai-widget .alh-ai-panel__title {
		font-size: 16px !important;
	}

	/* Composer: tighten internal pill padding so placeholder has more room */
	#alh-ai-widget .alh-ai-panel__composer {
		padding: 10px 12px 8px !important;
	}

	#alh-ai-widget .alh-ai-composer-pill {
		padding: 5px 5px 5px 12px !important;
		gap: 6px !important;
	}

	#alh-ai-widget .alh-ai-composer-pill .alh-ai-input {
		font-size: 14px !important;
	}

	/* Suggestion chips: allow wrap so they don't overflow horizontally */
	#alh-ai-widget [data-alh-ai-suggestions] {
		flex-wrap: wrap !important;
		gap: 6px !important;
	}

	#alh-ai-widget .alh-ai-chip {
		font-size: 11px !important;
		padding: 6px 10px !important;
	}

	/* Scroll-to-bottom indicator — move closer to edge on narrow screens */
	#alh-ai-widget .alh-ai-scroll-to-bottom {
		right: 12px !important;
		bottom: 96px !important;
		width: 36px !important;
		height: 36px !important;
	}
}

/* ─── 3. iPhone SE tier (≤380px width — 1st gen SE is 320px, 2nd/3rd gen 375px) ─── */
@media (max-width: 380px) {
	/* Header: even tighter, smaller avatar to make sure title doesn't truncate */
	#alh-ai-widget .alh-ai-panel__header {
		padding: 10px 12px !important;
		gap: 8px !important;
	}

	#alh-ai-widget .alh-ai-panel__avatar {
		width: 38px !important;
		height: 38px !important;
	}

	#alh-ai-widget .alh-ai-panel__avatar-img {
		width: 28px !important;
		height: 28px !important;
	}

	#alh-ai-widget .alh-ai-panel__title {
		font-size: 15px !important;
	}

	#alh-ai-widget .alh-ai-panel__subtitle {
		font-size: 12px !important;
	}

	/* Message bubbles: a little tighter spacing */
	#alh-ai-widget .alh-ai-message__bubble {
		font-size: 13px !important;
		padding: 9px 12px !important;
	}

	/* Composer: max room for placeholder */
	#alh-ai-widget .alh-ai-panel__composer {
		padding: 8px 10px 6px !important;
	}

	#alh-ai-widget .alh-ai-composer-pill {
		padding: 4px 4px 4px 11px !important;
		border-radius: 20px !important;
	}

	#alh-ai-widget .alh-ai-composer-pill .alh-ai-input {
		font-size: 13.5px !important;
	}

	#alh-ai-widget .alh-ai-composer-pill .alh-ai-send {
		width: 26px !important;
		height: 26px !important;
		min-width: 26px !important;
	}

	#alh-ai-widget .alh-ai-composer-pill .alh-ai-send svg {
		width: 12px !important;
		height: 12px !important;
	}

	/* Powered by AI — tinier */
	#alh-ai-widget .alh-ai-panel__powered {
		font-size: 9px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.13 — Pronounced composer pill outline on focus / typing
 *
 * The Figma "Focused" frame shows a clearly delineated white pill with a
 * visible Primary-brown outline — not just a subtle border-color tweak.
 * Previous v2.0.10 added `is-focused` background lift to the panel itself,
 * but the pill outline was the same hairline grey at rest as when focused.
 * Now the pill itself "lifts" with:
 *   • Stronger ring shadow (3px → 4px Primary-brown at 14% alpha)
 *   • Darker visible outline (border-color → solid #5A4F42)
 *   • Slight upward translate (1px) for tactile feel
 *
 * Triggers (any of these activates the lifted state):
 *   • `:focus-within` on the pill (input active)
 *   • `.is-focused` on the panel (JS class — survives blur while text typed)
 *
 * Both selectors point to the same rule via a single comma list so the visual
 * stays consistent regardless of which signal kicks it in.
 * ══════════════════════════════════════════════════════════════════ */

#alh-ai-widget .alh-ai-composer-pill:focus-within,
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-composer-pill {
	background: #FFFFFF !important;
	border-color: #5A4F42 !important;
	border-width: 1.5px !important;
	box-shadow: 0 0 0 4px rgba(90, 79, 66, 0.14),
	            0 2px 8px -2px rgba(90, 79, 66, 0.18) !important;
	transform: translateY(-1px) !important;
}

/* Smooth transitions for the lift in/out — overrides the v2.0.9 transition
   to include `transform` so the translateY animates rather than snapping. */
#alh-ai-widget .alh-ai-composer-pill {
	transition: border-color 0.2s ease,
	            border-width 0.2s ease,
	            box-shadow 0.22s ease,
	            background-color 0.2s ease,
	            transform 0.18s ease !important;
}

/* Honor reduced-motion preferences — keep the visual lift but skip the move. */
@media (prefers-reduced-motion: reduce) {
	#alh-ai-widget .alh-ai-composer-pill:focus-within,
	#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-composer-pill {
		transform: none !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.14 — Adaptive panel height + bulletproof textarea chrome hide
 *           + pronounced focused white card
 *
 * Three corrections driven by the user's localhost screenshot:
 *
 * 1) ADAPTIVE PANEL HEIGHT on desktop
 *    v2.0.9 set a hard `height: 600px`. On laptop screens (e.g. 720p with
 *    browser chrome) the panel + bubble + bottom margin overflows. The
 *    panel got an internal scrollbar, hiding the composer behind the fold.
 *
 *    Math: viewport - widget.bottom(24) - panel.bottom(81) - top breathing(24)
 *        = 100vh - 129px
 *    Take the min of the desired 600px and that calc → fits everywhere.
 *
 * 2) TEXTAREA SCROLL CHROME — those ⇕ arrows next to "Ask a question..."
 *    Chromium/Blink renders scrollbar buttons on textareas with overflow-y:auto
 *    even when content fits. The fix is to hide ALL scrollbar parts (track,
 *    thumb, button corner) AND the resizer pseudo-element with brute-force
 *    `display: none` + zero dimensions. Cross-browser:
 *      • WebKit (Chrome, Safari, Brave, Edge):    ::-webkit-scrollbar-*
 *      • Firefox:                                  scrollbar-width: none
 *      • Old IE/Edge:                              -ms-overflow-style: none
 *
 *    We still allow scrolling — the auto-resize JS bumps the textarea to a
 *    max of 100px; beyond that, scrolling silently works but no scrollbar UI.
 *
 * 3) FOCUSED STATE = "WHITE CARD WITH BROWN OUTLINE"
 *    Per Paul: "kapag mag ttype nako wala padin yun background white image
 *    na lalabas na square". v2.0.13's outline was too subtle.
 *    Now (additive, replacing v2.0.13 with stronger values):
 *      • 2px solid Primary-brown border (was 1.5px)
 *      • 5px shadow ring at 18% alpha (was 4px @ 14%)
 *      • Inner subtle inset shadow for "card depth"
 *      • Slight scale to 1.005 + 1.5px translateY (more tactile)
 *
 *    The base composer area also gets a soft elevation shadow at the TOP edge
 *    when .is-focused, so the visual "card lifts out" of the messages area.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── 1. ADAPTIVE PANEL HEIGHT ─── */

/* Override v2.0.9's hard 600px. Cap by viewport so the panel never overflows.
   `min(...)` accepts the smaller of the two, so on tall screens we still hit
   600px, on shorter screens we shrink gracefully. */
#alh-ai-widget .alh-ai-panel {
	height: min(600px, calc(100vh - 129px)) !important;
	max-height: calc(100vh - 129px) !important;
}

/* Mobile fullscreen mode (≤480px) already overrides this with 100vh — leave it. */

/* ─── 2. BULLETPROOF TEXTAREA SCROLL/RESIZE CHROME HIDE ─── */

#alh-ai-widget .alh-ai-input,
#alh-ai-widget .alh-ai-composer-pill .alh-ai-input {
	scrollbar-width: none !important;       /* Firefox */
	-ms-overflow-style: none !important;    /* IE/old Edge */
	resize: none !important;
}

/* WebKit family — Chrome, Safari, Brave, modern Edge, Opera */
#alh-ai-widget .alh-ai-input::-webkit-scrollbar,
#alh-ai-widget .alh-ai-composer-pill .alh-ai-input::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	display: none !important;
	-webkit-appearance: none !important;
}

#alh-ai-widget .alh-ai-input::-webkit-scrollbar-button,
#alh-ai-widget .alh-ai-input::-webkit-scrollbar-track,
#alh-ai-widget .alh-ai-input::-webkit-scrollbar-track-piece,
#alh-ai-widget .alh-ai-input::-webkit-scrollbar-thumb,
#alh-ai-widget .alh-ai-input::-webkit-scrollbar-corner,
#alh-ai-widget .alh-ai-input::-webkit-resizer,
#alh-ai-widget .alh-ai-composer-pill .alh-ai-input::-webkit-scrollbar-button,
#alh-ai-widget .alh-ai-composer-pill .alh-ai-input::-webkit-scrollbar-track,
#alh-ai-widget .alh-ai-composer-pill .alh-ai-input::-webkit-scrollbar-thumb,
#alh-ai-widget .alh-ai-composer-pill .alh-ai-input::-webkit-resizer {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
}

/* ─── 3. PRONOUNCED FOCUSED WHITE CARD ─── */

/* Stronger pill outline + shadow ring when focused or typing */
#alh-ai-widget .alh-ai-composer-pill:focus-within,
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-composer-pill {
	background: #FFFFFF !important;
	border-color: #5A4F42 !important;
	border-width: 2px !important;
	box-shadow:
		0 0 0 5px rgba(90, 79, 66, 0.18),         /* outer brown ring */
		0 4px 14px -4px rgba(90, 79, 66, 0.24),   /* drop shadow */
		inset 0 0 0 1px rgba(255, 255, 255, 1) !important;  /* inner crisp edge */
	transform: translateY(-1.5px) !important;
}

/* Composer area gets a soft top-edge elevation when focused so the whole
   typing zone "lifts" out of the messages flow visually. */
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-panel__composer {
	background: #FFFFFF !important;
	box-shadow: 0 -10px 24px -16px rgba(90, 79, 66, 0.12) !important;
	border-top-color: rgba(90, 79, 66, 0.08) !important;
}

/* Messages area: very subtle warm tint at rest so the .is-focused → pure-white
   lift is actually visible. The tint is so light it reads as "white" still. */
#alh-ai-widget .alh-ai-panel__messages {
	background-color: #FAF9F7 !important;       /* very soft warm white at rest */
	transition: background-color 0.22s ease !important;
}

#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-panel__messages {
	background-color: #FFFFFF !important;
}

/* Respect reduced-motion: keep the visual lift but skip the transform animation. */
@media (prefers-reduced-motion: reduce) {
	#alh-ai-widget .alh-ai-composer-pill:focus-within,
	#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-composer-pill {
		transform: none !important;
	}
}

/* ─── ADAPTIVE PANEL — mobile breakpoint preservation ───
   The base @media (max-width: 480px) takes full viewport. v2.0.14's
   `min()` rule above should still respect it. But explicit override for
   clarity: at mobile widths, ignore the desktop height cap. */
@media (max-width: 480px) {
	#alh-ai-widget .alh-ai-panel {
		height: 100vh !important;
		max-height: 100vh !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.15 — MUCH more visible "white card appears on focus" treatment
 *
 * Paul: "kapg naka select nako sa chatbox dapat mag kakaroon ng white
 *        background … kapag inalis ko yun current typing select mawawala
 *        yun background magiigng ganito lang ulit normal"
 *
 * Translation: when focusing the input, a distinct white background card
 * should APPEAR around the typing area. When blurring with no text, the
 * card disappears, panel returns to its plain state.
 *
 * Why earlier attempts (v2.0.10–v2.0.14) didn't read visibly:
 *   The base panel + messages + composer were ALL pure white at rest, so
 *   transitioning the same areas to pure white on focus produced zero
 *   visible color change. The brown pill outline was the only visual cue,
 *   and that didn't satisfy "white background appearing."
 *
 * Strategy in v2.0.15:
 *   • Push the at-rest messages + composer to a clearly different soft warm
 *     tint (#F3EFE7 — visibly beige, but still neutral enough to feel "white-ish")
 *   • On `.is-focused`, transition both surfaces back to pure #FFFFFF
 *     → user perceives a clean white card "popping up" out of the warm base
 *   • Composer area, on focus, additionally gets a more visible top-edge
 *     border + drop-shadow so the white card has a clear silhouette
 *   • The pill outline (v2.0.14: 2px brown + 5px shadow ring) is preserved
 *     and now sits naturally inside the lifted white card
 *
 * The transition is 220ms cross-fade so the appearance is smooth, not jarring.
 *
 * NOTE: this OVERRIDES v2.0.14's #FAF9F7 rest tint (too subtle to read) with
 * a slightly more saturated #F3EFE7. Still reads as "off-white" — not garish
 * beige — but the delta vs pure white is clearly perceptible at chat-widget
 * scale (380×600 panel).
 * ══════════════════════════════════════════════════════════════════ */

/* ─── At-rest: visible soft warm tint on messages + composer surfaces ─── */
#alh-ai-widget .alh-ai-panel__messages {
	background-color: #F3EFE7 !important;       /* clearly off-white at rest */
	transition: background-color 0.22s ease !important;
}

#alh-ai-widget .alh-ai-panel__composer {
	background-color: #F3EFE7 !important;       /* matched to messages — unified rest surface */
	transition: background-color 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

/* Suggestion chips area: also warm at rest so the focused white pops uniformly */
#alh-ai-widget [data-alh-ai-suggestions] {
	background-color: #F3EFE7 !important;
	transition: background-color 0.22s ease !important;
}

/* The footer (Powered by AI) stays warm even on focus — sits below the card */
#alh-ai-widget .alh-ai-panel__footer {
	background-color: #F3EFE7 !important;
}

/* Header stays pure white — visually anchors the top of the panel */
#alh-ai-widget .alh-ai-panel__header {
	background-color: #FFFFFF !important;
}

/* ─── Focused: pure white card emerges out of the warm rest surface ─── */
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-panel__messages {
	background-color: #FFFFFF !important;
}

#alh-ai-widget .alh-ai-panel.is-focused [data-alh-ai-suggestions] {
	background-color: #FFFFFF !important;
}

#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-panel__composer {
	background-color: #FFFFFF !important;
	/* Stronger top-edge separation when card is lifted */
	box-shadow:
		0 -1px 0 0 rgba(90, 79, 66, 0.06),         /* hairline top divider */
		0 -12px 24px -16px rgba(90, 79, 66, 0.14)  /* soft upward elevation */
		!important;
	border-top-color: rgba(90, 79, 66, 0.10) !important;
}

/* Pill at rest sits inside the warm area and uses pure white so it visibly
   "floats" within the warm tray — a subtle but useful cue that this is the
   interactive element even before focusing. */
#alh-ai-widget .alh-ai-composer-pill {
	background-color: #FFFFFF !important;
}

/* When focused, the surrounding area also becomes white → the pill blends
   into the larger white card. Outline + shadow ring (v2.0.14) carry the
   visual distinction. */
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-composer-pill {
	background-color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.16 — REVERT v2.0.15 tinting + OUTER panel aura + simpler pill focus
 *
 * Paul's correction (Taglish translation):
 *   "Wrong — I mean the chatbox should have another layer outside (aura)
 *    including the bubble button below. Your last version was fine. Make
 *    sure the AI chatbox has white background. The 'Ask a question'
 *    should be visible immediately on hover/unhover of the textarea. When
 *    clicked, the pill should match: border-radius: 15px, border: 1px
 *    solid #5A4F42, background: #FFF. And there's an aura/shadow on the
 *    chatbox outside when focused."
 *
 * Four corrections in this version:
 *
 * 1) UNDO v2.0.15's warm-beige base treatment — all internal surfaces
 *    (messages, composer, suggestions, footer) return to pure white.
 *    v2.0.15 was a wrong interpretation; the "white background appears"
 *    that Paul wanted refers to the OUTER PANEL aura, not internal tinting.
 *
 * 2) SIMPLIFY pill focused state to match Paul's exact CSS spec:
 *       border-radius: 15px;
 *       border: 1px solid #5A4F42;
 *       background: #FFFFFF;
 *    Strip v2.0.14's heavy 2px border + 5px shadow ring + translateY —
 *    Paul wants the visual focus distinction to come from the panel-level
 *    aura, not pill chrome.
 *
 * 3) ADD outer aura/glow to the .alh-ai-panel itself when `.is-focused`.
 *    Multi-layer box-shadow creates a soft brown halo around the panel —
 *    the user sees the WHOLE chatbox "light up" on focus, including the
 *    rounded outline of the panel against the page background.
 *
 * 4) "Ask a question…" placeholder reinforcement — opacity 1, ellipsis,
 *    no wrap, always visible regardless of hover/focus/typing state.
 *
 * Source ordering wins: this block sits after v2.0.15 so its rules apply.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── 1. REVERT v2.0.15 — all internal surfaces stay pure white always ─── */

#alh-ai-widget .alh-ai-panel__messages {
	background-color: #FFFFFF !important;
}

#alh-ai-widget .alh-ai-panel__composer {
	background-color: #FFFFFF !important;
	box-shadow: none !important;
	border-top-color: var(--alh-ai-border) !important;
}

#alh-ai-widget [data-alh-ai-suggestions] {
	background-color: #FFFFFF !important;
}

#alh-ai-widget .alh-ai-panel__footer {
	background-color: #FFFFFF !important;
}

#alh-ai-widget .alh-ai-panel__header {
	background-color: #FFFFFF !important;
}

/* `.is-focused` no longer recolors internal surfaces — they stay white.
   The visual focus cue lives on the panel itself (see rule 3 below) and
   on the pill outline (rule 2). */
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-panel__messages,
#alh-ai-widget .alh-ai-panel.is-focused [data-alh-ai-suggestions],
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-panel__composer {
	background-color: #FFFFFF !important;
	box-shadow: none !important;
}

/* ─── 2. SIMPLE PILL FOCUSED STATE (Paul's exact spec) ─── */

/* Override v2.0.14's heavy multi-layer shadow + translate — Paul wants
   clean 1px brown border, 15px radius, white background. Nothing more. */
#alh-ai-widget .alh-ai-composer-pill:focus-within,
#alh-ai-widget .alh-ai-panel.is-focused .alh-ai-composer-pill {
	border-radius: 15px !important;
	border: 1px solid #5A4F42 !important;          /* --Primary brown */
	border-width: 1px !important;
	background: #FFFFFF !important;                 /* --White */
	box-shadow: none !important;
	transform: none !important;
}

/* Pill at rest stays slightly softer — hairline grey border, same radius
   so the only thing that changes on focus is the border color (no shape
   shift). White bg, 15px radius consistent across states. */
#alh-ai-widget .alh-ai-composer-pill {
	border-radius: 15px !important;
	background: #FFFFFF !important;
	transform: none !important;
}

/* ─── 3. OUTER PANEL AURA/GLOW when focused ─── */

/* Existing panel shadow is green-tinted base. We layer a brown aura on top
   when the panel has `.is-focused`. Smooth transition for fade in/out. */
#alh-ai-widget .alh-ai-panel {
	transition: box-shadow 0.30s ease, height 0.20s ease !important;
}

#alh-ai-widget .alh-ai-panel.is-focused {
	box-shadow:
		0 10px 40px -10px rgba(50, 72, 57, 0.25),     /* keep base green-ish shadow */
		0 0 0 1px rgba(90, 79, 66, 0.12),             /* subtle 1px brown outline */
		0 0 32px 6px rgba(90, 79, 66, 0.14),          /* main brown aura — primary visual */
		0 0 64px 12px rgba(90, 79, 66, 0.06),         /* far-reach soft halo */
		0 16px 50px -10px rgba(90, 79, 66, 0.18)      /* downward lift */
		!important;
}

@media (prefers-reduced-motion: reduce) {
	#alh-ai-widget .alh-ai-panel {
		transition: none !important;
	}
}

/* ─── 4. "Ask a question…" — always visible, regardless of state ─── */

#alh-ai-widget .alh-ai-input::placeholder,
#alh-ai-widget .alh-ai-composer-pill .alh-ai-input::placeholder,
#alh-ai-widget textarea.alh-ai-input::placeholder {
	opacity: 1 !important;
	color: var(--alh-ai-text-muted) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	visibility: visible !important;
	font-size: inherit !important;
}

/* Hover state shouldn't change the placeholder either */
#alh-ai-widget .alh-ai-input:hover::placeholder,
#alh-ai-widget .alh-ai-composer-pill:hover .alh-ai-input::placeholder {
	opacity: 1 !important;
	visibility: visible !important;
}

/* When the textarea is focused, the placeholder is normally still visible
   until the user types — but some browsers hide it eagerly. Force it. */
#alh-ai-widget .alh-ai-input:focus::placeholder {
	opacity: 1 !important;
	color: var(--alh-ai-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.17 — Placeholder clip fix + reduced height + stronger aura
 *           + iPhone SE responsiveness reinforcement
 *
 * Four corrections from Paul's localhost screenshot:
 *
 * 1) "Ask a question…" STILL CLIPS at rest. Root cause finally found:
 *    HTML <textarea> defaults to `cols=20` which sets an INTRINSIC width
 *    (~150–200px depending on font), and in some flex layouts the
 *    intrinsic width wins over `flex: 1` because the browser computes
 *    flex-basis from the intrinsic size. The template now sets `cols="1"`
 *    explicitly + CSS forces `width: 100%; flex: 1 1 0%`.
 *
 * 2) AURA on focus needed to be MORE OBVIOUS. v2.0.16's shadow stack
 *    was visible but easy to miss against a dark page background.
 *    Bumped: 2px brown outline (was 1px @ 12% → 2px @ 28%), wider aura
 *    blur (40px+10 spread, was 32px+6), and a more saturated drop shadow.
 *
 * 3) HEIGHT REDUCED: 600px → 540px (cap), respects v2.0.14's adaptive
 *    `min(540px, calc(100vh - 129px))` so it shrinks gracefully on short
 *    screens too. Matches Figma "Live Chat - Open Chat" frame better.
 *
 * 4) iPhone SE: tightening at ≤480px and ≤380px (v2.0.12) preserved.
 *    Added @media (max-height: 600px) so short viewports also shrink the
 *    panel proportionally regardless of width.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── 1. AGGRESSIVE textarea width override ─── */

#alh-ai-widget .alh-ai-composer-pill .alh-ai-input,
#alh-ai-widget textarea.alh-ai-input,
#alh-ai-widget textarea[data-alh-ai-input] {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex: 1 1 0% !important;
	flex-grow: 1 !important;
	flex-shrink: 1 !important;
	flex-basis: 0% !important;
	box-sizing: border-box !important;
}

/* Belt + suspenders for placeholder visibility — multiple browser engines
   honor different selectors and quirks. Cover them all. */
#alh-ai-widget .alh-ai-input::placeholder,
#alh-ai-widget .alh-ai-input::-webkit-input-placeholder,
#alh-ai-widget .alh-ai-input::-moz-placeholder,
#alh-ai-widget .alh-ai-input:-ms-input-placeholder,
#alh-ai-widget .alh-ai-input:-moz-placeholder {
	opacity: 1 !important;
	visibility: visible !important;
	color: var(--alh-ai-text-muted) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	font-size: inherit !important;
}

/* ─── 2. STRONGER aura on focus ─── */

#alh-ai-widget .alh-ai-panel.is-focused {
	box-shadow:
		0 0 0 2px rgba(90, 79, 66, 0.28),             /* visible 2px brown outline */
		0 0 0 10px rgba(90, 79, 66, 0.10),            /* wider soft ring */
		0 0 40px 10px rgba(90, 79, 66, 0.20),         /* prominent main aura */
		0 0 80px 16px rgba(90, 79, 66, 0.08),         /* far halo */
		0 18px 60px -10px rgba(90, 79, 66, 0.28),     /* big drop shadow lift */
		0 10px 40px -10px rgba(50, 72, 57, 0.20)      /* keep base green-ish */
		!important;
}

/* ─── 3. REDUCED panel height ─── */

#alh-ai-widget .alh-ai-panel {
	/* Was 600px in v2.0.9; reduced to 540px per Paul + Figma "Open Chat" frame.
	   Still uses min() so it shrinks gracefully on short viewports. */
	height: min(540px, calc(100vh - 129px)) !important;
	max-height: calc(100vh - 129px) !important;
}

/* ─── 4. iPhone SE + short-screen reinforcement ─── */

/* Mobile fullscreen mode untouched (already at 100vh from v2.0.12). */

/* Short-viewport handling — handles desktops in split-screen or laptops with
   strong browser chrome. Panel scales down further so it never overflows. */
@media (max-height: 700px) and (min-width: 481px) {
	#alh-ai-widget .alh-ai-panel {
		height: min(480px, calc(100vh - 129px)) !important;
	}
}

@media (max-height: 600px) and (min-width: 481px) {
	#alh-ai-widget .alh-ai-panel {
		height: calc(100vh - 129px) !important;
	}
}

/* Re-emphasize the v2.0.12 mobile tightening — explicit override here so
   v2.0.16+ rules don't accidentally clobber it. */
@media (max-width: 480px) {
	#alh-ai-widget .alh-ai-panel {
		height: 100vh !important;
		max-height: 100vh !important;
		border-radius: 0 !important;
	}

	/* Composer pill stays full width minus tighter mobile padding */
	#alh-ai-widget .alh-ai-composer-pill {
		padding: 5px 5px 5px 12px !important;
	}

	#alh-ai-widget .alh-ai-composer-pill .alh-ai-input {
		font-size: 14px !important;
	}
}

@media (max-width: 380px) {
	/* iPhone SE 2/3 (375px) and 1st gen (320px) — extra-tight composer */
	#alh-ai-widget .alh-ai-composer-pill {
		padding: 4px 4px 4px 10px !important;
		gap: 5px !important;
	}

	#alh-ai-widget .alh-ai-composer-pill .alh-ai-input {
		font-size: 13.5px !important;
	}

	#alh-ai-widget .alh-ai-composer-pill .alh-ai-send {
		width: 26px !important;
		height: 26px !important;
		min-width: 26px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.18 — Bulletproof placeholder via overlay span
 *
 * Why this even exists:
 *   Across v2.0.12 → v2.0.17, multiple attempts to make the native
 *   `placeholder` attribute reliably visible failed. Root issue is
 *   that Chromium, WebKit, and Gecko all render textarea placeholders
 *   with subtly different overflow + truncation rules, and none of
 *   them consistently honor `text-overflow: ellipsis` or visibility
 *   forcing rules from CSS. The placeholder kept appearing clipped on
 *   Paul's localhost despite a clean CSS reset.
 *
 * Solution:
 *   • Template sets `placeholder=""` (empty) on the textarea, so no
 *     native placeholder renders at all.
 *   • A `<span data-alh-ai-placeholder>Ask a question…</span>` is
 *     positioned absolutely inside the composer pill, vertically
 *     centered, 14px from left edge.
 *   • JS adds `.is-hidden` to the span whenever the textarea has a
 *     value (any character at all), removing it when the textarea
 *     becomes empty again. Smooth 150ms fade.
 *   • `pointer-events: none` lets all clicks pass through to the
 *     textarea — the user never even knows the overlay exists.
 *   • The native `aria-label="Ask a question"` on the textarea covers
 *     screen-reader accessibility, since the visible span is hidden
 *     from the a11y tree via `aria-hidden="true"`.
 *
 * The overlay's color, font, size, and width are now ENTIRELY under
 * our control — no browser quirks can clip it.
 * ══════════════════════════════════════════════════════════════════ */

/* The pill needs `position: relative` so the absolute overlay anchors to it.
   It already has display:flex from v2.0.9; we just add positioning. */
#alh-ai-widget .alh-ai-composer-pill {
	position: relative !important;
}

#alh-ai-widget .alh-ai-placeholder-overlay {
	position: absolute !important;
	/* Vertically center against the pill's content area */
	top: 50% !important;
	transform: translateY(-50%) !important;
	/* Match the textarea's left padding (14px pill-left + 0 textarea-left) */
	left: 14px !important;
	/* End before the send button starts: pill right padding 6px + send 28px + gap 8px = 42px */
	right: 46px !important;

	/* Typography — matches the textarea so the transition into typed text feels seamless */
	color: var(--alh-ai-text-muted, #7A7369) !important;
	font-family: var(--alh-ai-font, inherit) !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	font-weight: normal !important;

	/* Layout — single line, no wrapping. If the pill is so narrow it can't
	   fit the full text, the overflow gets a clean fade-out gradient mask
	   instead of an abrupt cut. */
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: clip !important;

	/* Behavior */
	pointer-events: none !important;
	user-select: none !important;
	z-index: 1 !important;

	/* Animation */
	opacity: 1;
	transition: opacity 0.15s ease !important;
}

#alh-ai-widget .alh-ai-placeholder-overlay.is-hidden {
	opacity: 0 !important;
}

/* On focus, dim the overlay slightly so the cursor is more visually prominent
   while still hinting at what the field expects. */
#alh-ai-widget .alh-ai-composer-pill:focus-within .alh-ai-placeholder-overlay {
	color: var(--alh-ai-text-muted, #9C958A) !important;
	opacity: 0.7;
}

#alh-ai-widget .alh-ai-composer-pill:focus-within .alh-ai-placeholder-overlay.is-hidden {
	opacity: 0 !important;
}

/* Mobile tightening — match the smaller font size at narrow widths */
@media (max-width: 480px) {
	#alh-ai-widget .alh-ai-placeholder-overlay {
		font-size: 14px !important;
		left: 12px !important;
		right: 42px !important;
	}
}

@media (max-width: 380px) {
	#alh-ai-widget .alh-ai-placeholder-overlay {
		font-size: 13.5px !important;
		left: 10px !important;
		right: 38px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.19 — Mobile viewport units (dvh) + safe-area-inset
 *
 * Issue from Paul's mobile screenshot:
 *   The chat panel went fullscreen on mobile, but the composer pill (input
 *   + send button) was hidden BEHIND the browser's bottom UI (URL bar,
 *   gesture nav, swipe-up handle). User couldn't see where to type.
 *
 * Root cause:
 *   `100vh` (regular viewport-height) sa mobile = the TOTAL screen height
 *   including the browser chrome. The browser doesn't subtract its own
 *   bottom bar from `vh`. So a panel set to `height: 100vh` extends BEHIND
 *   the bottom UI, hiding whatever's at its bottom (the composer).
 *
 * Fix — three-tier viewport unit fallback:
 *   1) `100vh` — base value for old browsers (~2020 and earlier).
 *      Some content WILL be hidden behind browser chrome but at least
 *      the panel renders.
 *   2) `100svh` — "small viewport height". Assumes browser chrome is
 *      ALWAYS visible, so panel sizes to fit within the chrome. Safer
 *      than `vh` but slightly conservative if chrome auto-hides.
 *   3) `100dvh` — "dynamic viewport height". Adjusts in real time as
 *      mobile browser chrome shows/hides during scroll. Best UX.
 *      Supported in iOS Safari 15.4+, Chrome 108+, Firefox 101+.
 *
 *   The order matters: each subsequent rule overrides the previous if
 *   the browser supports it. Browsers ignore unknown units, so old
 *   browsers stop at `vh`, modern browsers reach `dvh`.
 *
 * Additional safety:
 *   • `padding-bottom: env(safe-area-inset-bottom)` — handles iPhone
 *     home-bar gesture area and notched devices. Adds breathing room
 *     below the composer.
 *   • `overscroll-behavior: contain` — prevents scroll chaining to the
 *     page body when the messages area is scrolled to its bounds.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Mobile (≤480px) fullscreen panel with proper viewport handling ─── */

@media (max-width: 480px) {
	#alh-ai-widget .alh-ai-panel {
		/* Three-tier fallback for viewport height */
		height: 100vh !important;     /* legacy fallback */
		height: 100svh !important;     /* safer modern */
		height: 100dvh !important;     /* best — adjusts dynamically */

		max-height: 100vh !important;
		max-height: 100svh !important;
		max-height: 100dvh !important;

		/* Honor safe-area on iPhone home-bar / notch devices.
		   We pad the panel itself so the composer doesn't kiss the home-bar. */
		padding-bottom: env(safe-area-inset-bottom, 0) !important;

		/* Prevent body-scroll bleed when messages area hits its scroll edge */
		overscroll-behavior: contain !important;
	}

	/* The messages area should grow to fill available vertical space —
	   composer naturally pins to bottom of flex column. */
	#alh-ai-widget .alh-ai-panel__messages {
		flex: 1 1 auto !important;
		min-height: 0 !important;     /* allow shrinking inside flex parent */
	}

	/* Composer + footer pin to bottom and never scroll off-screen */
	#alh-ai-widget .alh-ai-panel__composer,
	#alh-ai-widget .alh-ai-panel__footer {
		flex-shrink: 0 !important;
	}

	/* On focus / typing, keep input fully visible above on-screen keyboard.
	   `scroll-margin-bottom` tells the browser to leave breathing room when
	   it auto-scrolls a focused input into view. */
	#alh-ai-widget .alh-ai-input {
		scroll-margin-bottom: 100px !important;
	}
}

/* ─── Apply the same dvh treatment to the desktop adaptive height too ─── */

#alh-ai-widget .alh-ai-panel {
	/* Same three-tier fallback for the desktop adaptive cap.
	   The min() function uses whichever vh-unit is supported. */
	height: min(540px, calc(100vh - 129px)) !important;
	height: min(540px, calc(100svh - 129px)) !important;
	height: min(540px, calc(100dvh - 129px)) !important;
}

/* Re-apply mobile override AFTER desktop rule so it wins at narrow widths */
@media (max-width: 480px) {
	#alh-ai-widget .alh-ai-panel {
		height: 100vh !important;
		height: 100svh !important;
		height: 100dvh !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
 * v2.0.20 — Mobile: preserve 25px bubble-to-panel gap (Figma parity)
 *
 * Paul's iPhone 12 Pro screenshot showed the bubble button visually
 * overlapping the bottom of the panel (where the composer pill sits).
 * On desktop, the 25px gap between bubble and panel is enforced via
 * `bottom: 81px` on the panel (bubble height 56px + 25px gap). On mobile,
 * v2.0.12 made the panel fullscreen with `inset: 0` — which made the
 * bubble sit ON TOP of the panel's bottom edge, not below it.
 *
 * Fix:
 *   • Panel no longer goes truly fullscreen on mobile. It anchors with
 *     `bottom: 105px` so the bubble (56px) + gap (25px) + widget margin
 *     (24px) breathes naturally below.
 *   • Height shrinks accordingly: `100dvh - 105px` (with `vh`/`svh`
 *     fallbacks from v2.0.19).
 *   • The bubble itself stays at its natural bottom-right anchor — no
 *     repositioning needed, the panel just no longer covers it.
 *   • Panel borders restored on mobile (was 0 in v2.0.12 fullscreen mode)
 *     because the panel no longer touches every screen edge.
 *
 * Result: same visual hierarchy as desktop — chat panel floats above
 * a visible bubble with proper 25px breathing room — but adapted to
 * mobile viewport bounds.
 * ══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
	#alh-ai-widget .alh-ai-panel {
		/* OVERRIDE v2.0.12 + v2.0.19 fullscreen — leave room for the bubble.
		   105px breakdown: 24px widget bottom margin + 56px bubble + 25px gap */
		position: fixed !important;
		top: auto !important;
		left: 12px !important;     /* 12px side margin for breathing room */
		right: 12px !important;
		bottom: 105px !important;
		width: auto !important;    /* fill between left/right margins */
		inset: auto 12px 105px 12px !important;

		/* Three-tier viewport height fallback (v2.0.19), now subtracting the
		   bubble + gap + margin reserve. */
		height: calc(100vh - 105px - 24px) !important;
		height: calc(100svh - 105px - 24px) !important;
		height: calc(100dvh - 105px - 24px) !important;

		max-height: calc(100vh - 105px - 24px) !important;
		max-height: calc(100svh - 105px - 24px) !important;
		max-height: calc(100dvh - 105px - 24px) !important;

		/* Restore rounded corners — the panel no longer touches screen edges */
		border-radius: 20px !important;
		border: 1px solid var(--alh-ai-border) !important;
	}

	/* Bubble stays at its natural bottom-right corner — no special handling
	   needed since the widget container already anchors it there.
	   We just make sure it sits ABOVE any z-stacking competition. */
	#alh-ai-widget .alh-ai-bubble {
		z-index: 2 !important;
	}
}

/* iPhone SE (≤380px) — even tighter side margins to maximize panel width */
@media (max-width: 380px) {
	#alh-ai-widget .alh-ai-panel {
		left: 8px !important;
		right: 8px !important;
		inset: auto 8px 105px 8px !important;
	}
}