/**
 * Avatar Advisor — Frontend-Widget-Styles.
 *
 * Das Floating-Widget selbst rendert das D-ID Embed-SDK; hier liegen nur
 * Position/Abstände (CSS-Variablen, gesetzt von widget.js), Puls-Ring,
 * Begrüßungs-Sprechblase und das Mobil-Vollbild-Verhalten. Farben kommen
 * zur Laufzeit aus den Elementor Global Colors bzw. den Fallback-Settings.
 */

:root {
	--avatar-advisor-offset-x: 24px;
	--avatar-advisor-offset-y: 24px;
	--avatar-advisor-primary: #1a6e8e;
	--avatar-advisor-accent: #1a6e8e;
	--avatar-advisor-bubble: 72px;
}

/* ── SDK-Widget positionieren (Klasse setzt widget.js) ─────────────────── */

.avatar-advisor-host {
	position: fixed !important;
	right: var(--avatar-advisor-offset-x) !important;
	bottom: var(--avatar-advisor-offset-y) !important;
	left: auto !important;
	z-index: 99990 !important;
}

body.avatar-advisor-left .avatar-advisor-host {
	right: auto !important;
	left: var(--avatar-advisor-offset-x) !important;
}

/* ── Puls-Ring an der Bubble-Position (dekorativ) ───────────────────────── */

.avatar-advisor-pulse {
	position: fixed;
	right: var(--avatar-advisor-offset-x);
	bottom: var(--avatar-advisor-offset-y);
	width: var(--avatar-advisor-bubble);
	height: var(--avatar-advisor-bubble);
	border-radius: 50%;
	pointer-events: none;
	z-index: 99989;
	animation: avatar-advisor-pulse 2.4s ease-out 1s 6;
}

body.avatar-advisor-left .avatar-advisor-pulse {
	right: auto;
	left: var(--avatar-advisor-offset-x);
}

@keyframes avatar-advisor-pulse {
	0% {
		box-shadow: 0 0 0 0 var(--avatar-advisor-accent);
		opacity: 0.45;
	}
	70% {
		box-shadow: 0 0 0 16px var(--avatar-advisor-accent);
		opacity: 0;
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
		opacity: 0;
	}
}

/* ── Begrüßungs-Sprechblase ─────────────────────────────────────────────── */

.avatar-advisor-greeting {
	position: fixed;
	right: calc(var(--avatar-advisor-offset-x) + var(--avatar-advisor-bubble) + 16px);
	bottom: calc(var(--avatar-advisor-offset-y) + 8px);
	max-width: 280px;
	padding: 12px 36px 12px 16px;
	background: #fff;
	color: #1f2933;
	border-radius: 14px;
	border-bottom-right-radius: 4px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
	border-left: 3px solid var(--avatar-advisor-accent);
	font-size: 14px;
	line-height: 1.45;
	z-index: 99991;
	animation: avatar-advisor-fade-in 0.3s ease-out;
}

body.avatar-advisor-left .avatar-advisor-greeting {
	right: auto;
	left: calc(var(--avatar-advisor-offset-x) + var(--avatar-advisor-bubble) + 16px);
	border-bottom-right-radius: 14px;
	border-bottom-left-radius: 4px;
}

.avatar-advisor-greeting p {
	margin: 0;
}

.avatar-advisor-greeting-close {
	position: absolute;
	top: 4px;
	right: 6px;
	border: 0;
	padding: 2px 6px;
	background: transparent;
	color: #6b7280;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.avatar-advisor-greeting-close:hover {
	color: #1f2933;
}

@keyframes avatar-advisor-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Mobil: kleinere Bubble, expandiert als Vollbild-Overlay ────────────── */

@media (max-width: 600px) {
	:root {
		--avatar-advisor-bubble: 56px;
	}

	.avatar-advisor-greeting {
		right: var(--avatar-advisor-offset-x);
		bottom: calc(var(--avatar-advisor-offset-y) + var(--avatar-advisor-bubble) + 16px);
		max-width: calc(100vw - 2 * var(--avatar-advisor-offset-x));
	}

	body.avatar-advisor-left .avatar-advisor-greeting {
		left: var(--avatar-advisor-offset-x);
	}

	.avatar-advisor-host.avatar-advisor-expanded,
	body.avatar-advisor-left .avatar-advisor-host.avatar-advisor-expanded {
		inset: 0 !important;
		width: 100vw !important;
		height: 100dvh !important;
		max-height: none !important;
		border-radius: 0 !important;
	}
}

/* ── Reduzierte Bewegung respektieren ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.avatar-advisor-pulse,
	.avatar-advisor-greeting {
		animation: none;
	}
}