/* AI Avatar Seller — widget styles. Accent is configurable per store. */

#aiavs-root {
	--aiavs-accent: #0f766e;
	--aiavs-ink: #17212b;
	--aiavs-paper: #ffffff;
	--aiavs-skin: #f2c9a8;
	--aiavs-hair: #2c2a3a;
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99990;
	font-family: inherit;
}

#aiavs-root[data-position="left"] {
	right: auto;
	left: 24px;
}

/* Launcher */
.aiavs-launcher {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 3px solid var(--aiavs-accent);
	background: var(--aiavs-paper);
	cursor: pointer;
	padding: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	transition: transform 0.15s ease;
}

.aiavs-launcher:hover,
.aiavs-launcher:focus-visible {
	transform: scale(1.06);
}

.aiavs-launcher:focus-visible,
.aiavs-icon-btn:focus-visible,
.aiavs-btn:focus-visible,
.aiavs-input:focus-visible {
	outline: 3px solid var(--aiavs-accent);
	outline-offset: 2px;
}

.aiavs-hidden {
	display: none;
}

/* Panel */
.aiavs-panel {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: min(380px, calc(100vw - 32px));
	height: min(620px, calc(100vh - 48px));
	display: flex;
	flex-direction: column;
	background: var(--aiavs-paper);
	color: var(--aiavs-ink);
	border-radius: 18px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

#aiavs-root[data-position="left"] .aiavs-panel {
	right: auto;
	left: 24px;
}

.aiavs-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--aiavs-accent);
	color: #fff;
}

.aiavs-header strong {
	flex: 1;
	font-size: 15px;
}

.aiavs-icon-btn {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	padding: 4px 6px;
	line-height: 1;
}

/* Avatar stage */
.aiavs-stage {
	display: flex;
	justify-content: center;
	background: linear-gradient(180deg, color-mix(in srgb, var(--aiavs-accent) 14%, #fff), var(--aiavs-paper));
	padding: 8px 0 0;
}

.aiavs-avatar {
	width: 128px;
	height: 128px;
}

.aiavs-launcher .aiavs-avatar {
	width: 100%;
	height: 100%;
}

.aiavs-face { fill: var(--aiavs-skin); }
.aiavs-hair { fill: var(--aiavs-hair); }
.aiavs-eye { fill: var(--aiavs-ink); transition: ry 0.08s; }
.aiavs-brow { stroke: var(--aiavs-hair); stroke-width: 4; fill: none; stroke-linecap: round; transition: transform 0.25s; }
.aiavs-brow-up { transform: translateY(-3px); }
.aiavs-mouth { fill: #9a3b30; transition: d 0.09s ease; }

.aiavs-head { transform-origin: 90px 100px; }
.aiavs-talking { animation: aiavs-sway 1.6s ease-in-out infinite; }

@keyframes aiavs-sway {
	0%, 100% { transform: rotate(-1.6deg); }
	50% { transform: rotate(1.6deg) translateY(-2px); }
}

/* Messages */
.aiavs-list {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aiavs-msg { display: flex; }
.aiavs-msg-user { justify-content: flex-end; }

.aiavs-bubble {
	margin: 0;
	max-width: 84%;
	padding: 9px 12px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.45;
	background: #eef1f4;
}

.aiavs-msg-user .aiavs-bubble {
	background: var(--aiavs-accent);
	color: #fff;
}

/* Product cards */
.aiavs-products {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 4px 2px;
}

.aiavs-card {
	min-width: 160px;
	max-width: 160px;
	border: 1px solid #e3e7ec;
	border-radius: 12px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
}

.aiavs-card img {
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: 8px;
}

.aiavs-card-price {
	color: var(--aiavs-accent);
	font-weight: 700;
}

.aiavs-card-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.aiavs-btn {
	background: var(--aiavs-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.aiavs-btn-ghost {
	background: transparent;
	color: var(--aiavs-accent);
	border: 1px solid var(--aiavs-accent);
}

/* Composer */
.aiavs-form {
	display: flex;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid #e3e7ec;
}

.aiavs-input {
	flex: 1;
	border: 1px solid #cfd6dd;
	border-radius: 999px;
	padding: 9px 14px;
	font-size: 14px;
}

/* WhatsApp handoff */
.aiavs-wa {
	margin: 0 10px 8px;
	border: 0;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 10px;
	cursor: pointer;
}

.aiavs-lead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 1px solid #e3e7ec;
	border-radius: 12px;
	padding: 12px;
	background: #f6fbf8;
}

.aiavs-lead-title {
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.aiavs-talking { animation: none; }
	.aiavs-launcher { transition: none; }
}