/*
 * VARIA AI — styled with the VARIALUXE DESIGN.md tokens.
 * Uses the child theme's CSS variables when present, with the same values as fallbacks.
 * Colours: paper, white, blush, line, muted, ink, wine, gold only. No gradients.
 * Type: 16/28 body, 14/24 secondary (Arabic floor 14px). Spacing 8-based. Radii 2 / 8 / full.
 */
.varia-root {
	--v-paper: var(--paper, #FAF6F3);
	--v-white: var(--white, #FFFFFF);
	--v-blush: var(--blush, #F1E3DC);
	--v-line: var(--line, #E7D6D0);
	--v-muted: var(--muted, #78656D);
	--v-ink: var(--ink, #38262C);
	--v-wine: var(--wine, #682F43);
	--v-gold: var(--gold, #BB8B79);
	font-family: inherit;
	color: var(--v-ink);
	z-index: 30;
}
.varia-root *,
.varia-root *::before,
.varia-root *::after { box-sizing: border-box; }

/* Floating position: bottom corner opposite the language switcher */
.varia-floating-root {
	position: fixed;
	bottom: 24px;
	inset-inline-end: 24px;
	z-index: 30;
}

/* Panel */
.varia-panel {
	width: 400px;
	max-width: calc(100vw - 32px);
	height: 600px;
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--v-paper);
	border: 1px solid var(--v-line);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(56, 38, 44, 0.08);
}
.varia-panel[hidden] { display: none; }

.varia-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: var(--v-blush);
	border-bottom: 1px solid var(--v-line);
}
.varia-avatar {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 999px;
	object-fit: cover;
	background: var(--v-white);
	border: 1px solid var(--v-line);
}
.varia-identity { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.varia-identity strong {
	font-family: var(--font-lat, 'Montserrat', sans-serif);
	font-size: 16px;
	line-height: 28px;
	font-weight: 500;
	letter-spacing: .12em;
	color: var(--v-wine);
}
.varia-identity span { font-size: 14px; line-height: 24px; color: var(--v-muted); }
.varia-close {
	width: 44px;
	height: 44px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--v-line);
	border-radius: 999px;
	background: var(--v-white);
	color: var(--v-ink);
	font-size: 18px;
	line-height: 26px;
	cursor: pointer;
}
.varia-close[hidden] { display: none; }

/* Messages */
.varia-messages {
	flex: 1;
	min-height: 144px;
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background: var(--v-paper);
}
.varia-message {
	max-width: 88%;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 16px;
	line-height: 28px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.varia-message.assistant {
	align-self: flex-start;
	background: var(--v-white);
	border: 1px solid var(--v-line);
	color: var(--v-ink);
}
.varia-message.user {
	align-self: flex-end;
	background: var(--v-wine);
	color: var(--v-white);
}
.varia-typing { color: var(--v-muted) !important; }

/* Quick suggestions */
.varia-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: stretch; }
.varia-chip {
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--v-line);
	border-radius: 999px;
	background: var(--v-white);
	color: var(--v-wine);
	font: inherit;
	font-size: 14px;
	line-height: 24px;
	font-weight: 500;
	cursor: pointer;
	text-align: center;
}
.varia-chip:hover { background: var(--v-blush); border-color: var(--v-wine); }
.varia-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.varia-chip svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Product suggestions */
.varia-products { align-self: stretch; padding: 0; background: none; }
.varia-products-heading { margin: 0 0 8px; font-size: 14px; line-height: 24px; font-weight: 500; color: var(--v-wine); }
.varia-products-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.varia-product {
	min-width: 144px;
	max-width: 160px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	background: var(--v-white);
	border: 1px solid var(--v-line);
	border-radius: 8px;
	color: var(--v-ink) !important;
	text-decoration: none !important;
	font-size: 14px;
	line-height: 24px;
}
.varia-product:hover { border-color: var(--v-wine); }
.varia-product strong { font-size: 14px; line-height: 24px; font-weight: 500; }
.varia-product-price { color: var(--v-wine); font-weight: 500; }
.varia-badge {
	align-self: flex-start;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--v-blush);
	color: var(--v-wine);
	font-size: 14px;
	line-height: 16px;
}

/* Input row */
.varia-form {
	display: flex;
	gap: 8px;
	padding: 8px 16px;
	background: var(--v-paper);
	border-top: 1px solid var(--v-line);
}
.varia-input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 8px 16px !important;
	border: 1px solid var(--v-line) !important;
	border-radius: 999px !important;
	background: var(--v-white) !important;
	color: var(--v-ink);
	font: inherit;
	font-size: 16px !important;
	box-shadow: none !important;
}
.varia-input:focus { outline: 2px solid var(--v-wine); outline-offset: 0; }
.varia-send {
	width: 48px;
	height: 48px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--v-wine);
	border-radius: 999px;
	background: var(--v-wine);
	color: var(--v-white);
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}
.varia-send:hover { background: color-mix(in srgb, var(--v-wine) 92%, #000000); }
.varia-send:disabled { opacity: .5; cursor: default; }
.varia-send svg { width: 22px; height: 22px; }
[dir="rtl"] .varia-send svg { transform: scaleX(-1); }

.varia-disclaimer {
	margin: 0;
	padding: 0 16px 8px;
	background: var(--v-paper);
	color: var(--v-muted);
	font-size: 14px;
	line-height: 24px;
	text-align: center;
}

/* Welcome screen (until the first message) */
.varia-hero { display: none; }
.varia-panel.is-welcome { background: var(--v-blush); }
.varia-panel.is-welcome .varia-messages { display: none; }
.varia-panel.is-welcome .varia-header {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 3;
	padding: 0;
	background: none;
	border: 0;
}
.varia-panel.is-welcome .varia-header .varia-avatar,
.varia-panel.is-welcome .varia-header .varia-identity { display: none; }
.varia-panel { position: relative; }
.varia-panel.is-welcome .varia-hero {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	gap: 8px;
	padding: 0 16px 8px;
}
.varia-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 200px;
	margin: 0 -16px;
	overflow: hidden;
	border-bottom: 1px solid var(--v-line);
}
.varia-portrait {
	position: absolute;
	left: -12px;
	bottom: 0;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: contain;
	object-position: bottom left;
	pointer-events: none;
}
.varia-stage-side {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 54%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 2;
}
.varia-brand { display: flex; flex-direction: column; align-items: center; color: var(--v-wine); }
.varia-brand svg { width: 56px; height: 36px; }
.varia-brand span {
	font-family: var(--font-lat, 'Montserrat', sans-serif);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: .14em;
	color: var(--v-ink);
}
.varia-bubble {
	position: relative;
	margin: 0;
	padding: 16px;
	background: var(--v-white);
	border: 1px solid var(--v-line);
	border-radius: 16px;
	color: var(--v-wine);
	font-size: 16px;
	line-height: 28px;
	font-weight: 500;
	text-align: center;
	box-shadow: 0 8px 24px rgba(56, 38, 44, 0.08);
}
.varia-bubble::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 24px;
	width: 14px;
	height: 14px;
	background: var(--v-white);
	border-right: 1px solid var(--v-line);
	border-bottom: 1px solid var(--v-line);
	transform: rotate(45deg);
}
.varia-hero .varia-chips { padding-top: 8px; }
.varia-hero .varia-chip { padding: 8px 12px; white-space: nowrap; }
.varia-panel.is-welcome .varia-disclaimer { padding-bottom: 8px; }
.varia-panel.is-welcome .varia-form,
.varia-panel.is-welcome .varia-disclaimer { background: var(--v-blush); border-top: 0; }

/* Launcher */
.varia-launcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 4px 16px 4px 4px;
	padding-inline: 4px 16px;
	border: 1px solid var(--v-line);
	border-radius: 999px;
	background: var(--v-white);
	color: var(--v-wine);
	font: inherit;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(56, 38, 44, 0.08);
}
.varia-launcher[hidden] { display: none; }
.varia-launcher:hover { background: var(--v-blush); }
.varia-launcher img {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	object-fit: cover;
	background: var(--v-blush);
}
.varia-root :is(button, a, input):focus-visible { outline: 2px solid var(--v-wine); outline-offset: 2px; }

/* Embedded with [varia_advisor] */
.varia-embedded-mode { width: 100%; max-width: 100%; }
.varia-embedded-mode .varia-panel { width: 100%; max-width: 100%; height: 600px; max-height: 75vh; box-shadow: none; }

/* Mobile: sit above the store's bottom dock; launcher shows the avatar only */
@media (max-width: 700px) {
	.varia-floating-root { bottom: 80px; inset-inline-end: 16px; }
	.varia-panel { width: calc(100vw - 32px); height: min(80vh, 620px); max-height: calc(100vh - 104px); }
	.varia-hero .varia-chip { white-space: normal; font-size: 14px; line-height: 20px; min-height: 44px; padding: 8px; }
	.varia-hero .varia-chips { flex: none; }
	.varia-stage { min-height: 150px; }
	.varia-stage-side { top: 8px; right: 12px; width: 56%; gap: 4px; }
	.varia-brand svg { width: 44px; height: 28px; }
	.varia-brand span { font-size: 14px; }
	.varia-bubble { padding: 8px 12px; font-size: 14px; line-height: 24px; }
	.varia-launcher { padding: 4px; min-width: 48px; justify-content: center; }
	.varia-launcher span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	.varia-root * { transition: none !important; }
}

/* ------------------------------------------------------------------
 * Glass look (1.5.0): translucent rose panel, frosted chips and bubble,
 * mauve accent. Colours taken from the approved VARIA mockup.
 * ------------------------------------------------------------------ */
.varia-root {
	--g-plum: #5B2147;
	--g-plum-soft: rgba(91, 33, 71, .72);
	--g-mauve: #A24D7E;
	--g-mauve-deep: #86365F;
	--g-rose: #F7E7EF;
	--g-lilac: #E6C0D5;
	--g-glass: rgba(255, 255, 255, .58);
	--g-glass-strong: rgba(255, 255, 255, .78);
	--g-edge: rgba(255, 255, 255, .85);
}
.varia-panel,
.varia-panel.is-welcome {
	background:
		radial-gradient(120% 60% at 100% 100%, rgba(214, 160, 192, .55), transparent 60%),
		radial-gradient(90% 50% at 0% 0%, rgba(255, 255, 255, .7), transparent 60%),
		linear-gradient(165deg, rgba(249, 235, 242, .9), rgba(234, 199, 218, .88));
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	backdrop-filter: blur(18px) saturate(1.25);
	border: 1px solid var(--g-edge);
	border-radius: 28px;
	box-shadow: 0 24px 60px rgba(91, 33, 71, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
	color: var(--g-plum);
}
/* Soft waves behind the lower half of the welcome screen */
.varia-stage::before {
	content: '';
	position: absolute;
	inset: auto -30% -60% -30%;
	height: 90%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.varia-stage::after {
	content: '';
	position: absolute;
	right: -35%;
	bottom: -28%;
	width: 95%;
	height: 50%;
	border-radius: 50% 50% 0 0;
	border-top: 2px solid rgba(255, 255, 255, .55);
	transform: rotate(-12deg);
	pointer-events: none;
}
.varia-stage { border-bottom: 0; overflow: visible; }
.varia-panel.is-welcome { overflow: hidden; }
.varia-hero .varia-chips { position: relative; z-index: 2; }
.varia-hero .varia-chip { font-size: 14px; font-weight: 600; padding: 8px 10px; gap: 6px; }
.varia-portrait {
	z-index: 1;
	left: -16px;
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.varia-stage-side { z-index: 2; }
.varia-brand { color: var(--g-mauve); }
.varia-brand span { color: var(--g-plum); font-weight: 500; letter-spacing: .12em; }
.varia-bubble {
	background: var(--g-glass-strong);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--g-edge);
	border-radius: 24px;
	color: var(--g-plum);
	font-weight: 700;
	box-shadow: 0 10px 30px rgba(91, 33, 71, .14);
}
.varia-bubble::after { background: var(--g-glass-strong); border-color: var(--g-edge); }

.varia-chip,
.varia-hero .varia-chip {
	background: var(--g-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--g-edge);
	color: var(--g-plum);
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(91, 33, 71, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.varia-chip svg { color: var(--g-mauve); stroke-width: 1.6; }
.varia-chip:hover { background: var(--g-glass-strong); border-color: var(--g-mauve); }

/* Conversation state */
.varia-header {
	background: rgba(255, 255, 255, .38);
	border-bottom: 1px solid rgba(255, 255, 255, .7);
}
.varia-identity strong { color: var(--g-plum); }
.varia-identity span { color: var(--g-plum-soft); }
.varia-close { background: var(--g-glass-strong); border-color: var(--g-edge); color: var(--g-plum); }
.varia-messages { background: transparent; }
.varia-message.assistant {
	background: var(--g-glass-strong);
	border-color: var(--g-edge);
	color: var(--g-plum);
	border-radius: 20px 20px 20px 6px;
}
[dir="rtl"] .varia-message.assistant { border-radius: 20px 20px 6px 20px; }
.varia-message.user {
	background: linear-gradient(160deg, var(--g-mauve), var(--g-mauve-deep));
	color: #FFFFFF;
	border-radius: 20px 20px 6px 20px;
}
[dir="rtl"] .varia-message.user { border-radius: 20px 20px 20px 6px; }
.varia-typing { color: var(--g-plum-soft) !important; }
.varia-products-heading { color: var(--g-plum); }
.varia-product { background: var(--g-glass-strong); border-color: var(--g-edge); border-radius: 16px; color: var(--g-plum) !important; }
.varia-product:hover { border-color: var(--g-mauve); }
.varia-product-price { color: var(--g-mauve-deep); }
.varia-badge { background: rgba(162, 77, 126, .12); color: var(--g-mauve-deep); }

/* Input row */
.varia-form,
.varia-panel.is-welcome .varia-form { background: transparent; border-top: 0; }
.varia-input {
	background: var(--g-glass-strong) !important;
	border: 1px solid var(--g-edge) !important;
	color: var(--g-plum);
	box-shadow: inset 0 1px 2px rgba(91, 33, 71, .06), 0 6px 18px rgba(91, 33, 71, .08) !important;
}
.varia-input::placeholder { color: var(--g-plum-soft); }
.varia-input:focus { outline: 2px solid var(--g-mauve); }
.varia-send {
	background: linear-gradient(160deg, #B5649A, var(--g-mauve-deep));
	border-color: rgba(255, 255, 255, .6);
	box-shadow: 0 8px 18px rgba(134, 54, 95, .35);
}
.varia-send:hover { background: linear-gradient(160deg, var(--g-mauve), #722B51); }
.varia-disclaimer,
.varia-panel.is-welcome .varia-disclaimer { background: transparent; color: var(--g-plum-soft); }
.varia-root :is(button, a, input):focus-visible { outline-color: var(--g-mauve); }

/* Launcher */
.varia-launcher {
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--g-edge);
	color: var(--g-plum);
	box-shadow: 0 12px 30px rgba(91, 33, 71, .2);
}
.varia-launcher:hover { background: var(--g-glass-strong); }
.varia-launcher img { background: var(--g-rose); }
.varia-messages,
.varia-products-row { scrollbar-width: thin; scrollbar-color: rgba(162, 77, 126, .35) transparent; }
@media (max-width: 700px) {
	.varia-portrait { height: 86%; }
	.varia-panel.is-welcome .varia-close { background: rgba(255, 255, 255, .9); }
}


/* ------------------------------------------------------------------
 * 1.6.0 — closer to the mockup: head breaks the frame, send button
 * inside the field, layered light, waves and glints, clearer glass.
 * ------------------------------------------------------------------ */
.varia-stage::before, .varia-stage::after { content: none; }
.varia-panel,
.varia-panel.is-welcome {
	background: linear-gradient(165deg, rgba(251, 238, 245, .66), rgba(236, 200, 221, .6));
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
	backdrop-filter: blur(22px) saturate(1.4);
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 32px;
	box-shadow:
		0 30px 70px rgba(91, 33, 71, .24),
		0 2px 6px rgba(91, 33, 71, .08),
		inset 0 1px 0 rgba(255, 255, 255, .95),
		inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.varia-panel > :not(.varia-fx) { position: relative; z-index: 1; }
.varia-panel.is-welcome > .varia-header { position: absolute; z-index: 3; }
.varia-fx {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
}
.varia-fx span { position: absolute; inset: 0; }
.varia-fx .varia-fx-glow {
	inset: -25%;
	background:
		radial-gradient(30% 24% at 82% 16%, rgba(255, 255, 255, .75), transparent 70%),
		radial-gradient(38% 30% at 8% 88%, rgba(226, 158, 197, .55), transparent 70%),
		radial-gradient(34% 28% at 92% 78%, rgba(193, 112, 163, .38), transparent 70%),
		radial-gradient(26% 22% at 40% 46%, rgba(255, 255, 255, .35), transparent 70%);
	filter: blur(6px);
	animation: varia-drift 16s ease-in-out infinite alternate;
}
.varia-fx-waves { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 600%22 preserveAspectRatio=%22none%22%3E %3Cpath d=%22M0 360 C110 300 250 420 400 330 L400 600 L0 600Z%22 fill=%22%23fff%22 fill-opacity=%22.22%22/%3E %3Cpath d=%22M0 450 C130 395 260 500 400 430 L400 600 L0 600Z%22 fill=%22%23fff%22 fill-opacity=%22.18%22/%3E %3Cpath d=%22M0 520 C150 480 250 560 400 505 L400 600 L0 600Z%22 fill=%22%23E7B9D3%22 fill-opacity=%22.35%22/%3E %3Cpath d=%22M-10 345 C120 280 260 405 410 312%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.75%22 stroke-width=%221.6%22/%3E %3Cpath d=%22M-10 435 C140 378 262 482 410 418%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.5%22 stroke-width=%221.2%22/%3E %3Cpath d=%22M-10 250 C90 215 170 268 260 240 S380 190 410 205%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.35%22 stroke-width=%221%22/%3E %3C/svg%3E") center / 100% 100% no-repeat; }
.varia-fx-glints {
	background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 600%22%3E%3Cpath transform=%22translate%28352 48%29 scale%281.1%29%22 d=%22M0-8 C.8-2 2-.8 8 0 C2 .8 .8 2 0 8 C-.8 2-2 .8-8 0 C-2-.8-.8-2 0-8Z%22 fill=%22%23fff%22 fill-opacity=%220.95%22/%3E%3Cpath transform=%22translate%28300 30%29 scale%280.55%29%22 d=%22M0-8 C.8-2 2-.8 8 0 C2 .8 .8 2 0 8 C-.8 2-2 .8-8 0 C-2-.8-.8-2 0-8Z%22 fill=%22%23fff%22 fill-opacity=%220.8%22/%3E%3Cpath transform=%22translate%28382 170%29 scale%280.6%29%22 d=%22M0-8 C.8-2 2-.8 8 0 C2 .8 .8 2 0 8 C-.8 2-2 .8-8 0 C-2-.8-.8-2 0-8Z%22 fill=%22%23fff%22 fill-opacity=%220.85%22/%3E%3Cpath transform=%22translate%28240 300%29 scale%280.5%29%22 d=%22M0-8 C.8-2 2-.8 8 0 C2 .8 .8 2 0 8 C-.8 2-2 .8-8 0 C-2-.8-.8-2 0-8Z%22 fill=%22%23fff%22 fill-opacity=%220.7%22/%3E%3Cpath transform=%22translate%2858 470%29 scale%280.7%29%22 d=%22M0-8 C.8-2 2-.8 8 0 C2 .8 .8 2 0 8 C-.8 2-2 .8-8 0 C-2-.8-.8-2 0-8Z%22 fill=%22%23fff%22 fill-opacity=%220.8%22/%3E%3Cpath transform=%22translate%28372 440%29 scale%280.9%29%22 d=%22M0-8 C.8-2 2-.8 8 0 C2 .8 .8 2 0 8 C-.8 2-2 .8-8 0 C-2-.8-.8-2 0-8Z%22 fill=%22%23fff%22 fill-opacity=%220.9%22/%3E%3Cpath transform=%22translate%28150 560%29 scale%280.5%29%22 d=%22M0-8 C.8-2 2-.8 8 0 C2 .8 .8 2 0 8 C-.8 2-2 .8-8 0 C-2-.8-.8-2 0-8Z%22 fill=%22%23fff%22 fill-opacity=%220.7%22/%3E%3Cpath transform=%22translate%2822 250%29 scale%280.45%29%22 d=%22M0-8 C.8-2 2-.8 8 0 C2 .8 .8 2 0 8 C-.8 2-2 .8-8 0 C-2-.8-.8-2 0-8Z%22 fill=%22%23fff%22 fill-opacity=%220.6%22/%3E%3Ccircle cx=%22330%22 cy=%2290%22 r=%221.6%22 fill=%22%23fff%22 fill-opacity=%220.8%22/%3E%3Ccircle cx=%22268%22 cy=%2262%22 r=%221.1%22 fill=%22%23fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%22390%22 cy=%22300%22 r=%221.3%22 fill=%22%23fff%22 fill-opacity=%220.6%22/%3E%3Ccircle cx=%22110%22 cy=%22520%22 r=%221.2%22 fill=%22%23fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%22200%22 cy=%22470%22 r=%220.9%22 fill=%22%23fff%22 fill-opacity=%220.6%22/%3E%3Ccircle cx=%2230%22 cy=%22380%22 r=%221.1%22 fill=%22%23fff%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22350%22 cy=%22560%22 r=%221.4%22 fill=%22%23fff%22 fill-opacity=%220.7%22/%3E%3C/svg%3E") center / cover no-repeat;
	animation: varia-twinkle 5s ease-in-out infinite alternate;
}
/* Diagonal sheen across the glass */
.varia-fx::after {
	content: '';
	position: absolute;
	top: -40%;
	left: -60%;
	width: 60%;
	height: 180%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .05) 60%, transparent);
	transform: rotate(18deg);
}
@keyframes varia-drift { to { transform: translate3d(3%, -2%, 0) scale(1.05); } }
@keyframes varia-twinkle { from { opacity: .55; } to { opacity: 1; } }

/* Welcome: the portrait breaks out of the top edge */
.varia-panel.is-welcome { overflow: visible; margin-top: 40px; max-height: calc(100vh - 96px); }
.varia-panel.is-welcome .varia-stage { overflow: visible; }
.varia-portrait,
.varia-panel.is-welcome .varia-portrait {
	left: -22px;
	bottom: 0;
	height: 116%;
	filter: drop-shadow(0 14px 22px rgba(91, 33, 71, .22));
}
/* Close button moves to the top corner opposite the portrait */
.varia-panel.is-welcome .varia-header { left: auto; right: 12px; top: 12px; }
.varia-panel.is-welcome .varia-stage-side { top: 52px; right: 16px; width: 55%; }
.varia-panel.is-welcome .varia-close {
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(91, 33, 71, .12);
}

/* Brand: serif wordmark like the mockup */
.varia-brand svg { width: 64px; height: 42px; filter: drop-shadow(0 2px 4px rgba(162, 77, 126, .25)); }
.varia-brand span {
	font-family: 'Cormorant Garamond', 'Cinzel', Georgia, 'Times New Roman', serif;
	font-size: 26px;
	line-height: 30px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--g-plum);
}

/* Bubble: frosted, tail toward her hand */
.varia-bubble {
	background: rgba(255, 255, 255, .62);
	border-radius: 28px;
	padding: 16px 20px;
	font-size: 17px;
	line-height: 30px;
	box-shadow: 0 14px 34px rgba(91, 33, 71, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.varia-bubble::after {
	left: 30px;
	bottom: -9px;
	width: 18px;
	height: 18px;
	background: rgba(255, 255, 255, .62);
	border-radius: 0 0 6px 0;
}

/* Chips: frosted pills with a light top edge */
.varia-chip,
.varia-hero .varia-chip {
	background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .45));
	border: 1px solid rgba(255, 255, 255, .95);
	min-height: 52px;
	box-shadow: 0 8px 20px rgba(91, 33, 71, .12), inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(162, 77, 126, .08);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.varia-chip:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(91, 33, 71, .16), inset 0 1px 0 #FFFFFF; }
.varia-chip svg { width: 26px; height: 26px; }

/* Input: one frosted pill with the send button inside */
.varia-root .varia-panel .varia-form {
	align-items: center;
	gap: 8px;
	margin: 4px 16px;
	padding: 6px;
	padding-inline-start: 20px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .55));
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(91, 33, 71, .12), inset 0 1px 0 #FFFFFF;
}
.varia-root .varia-panel .varia-form:focus-within { outline: 2px solid var(--g-mauve); outline-offset: 2px; }
.varia-root .varia-input {
	min-height: 44px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.varia-root .varia-input:focus { outline: none; }
.varia-root .varia-send { width: 46px; height: 46px; }
.varia-panel.is-welcome .varia-disclaimer { padding-top: 4px; }

@media (max-width: 700px) {
	.varia-panel.is-welcome { max-height: calc(100vh - 150px); }
	.varia-portrait, .varia-panel.is-welcome .varia-portrait { height: 110%; left: -18px; }
	.varia-brand span { font-size: 22px; line-height: 26px; }
	.varia-brand svg { width: 52px; height: 34px; }
	.varia-bubble { font-size: 15px; line-height: 26px; padding: 12px 14px; }
	.varia-panel.is-welcome .varia-stage-side { top: 48px; width: 57%; }
	.varia-chip, .varia-hero .varia-chip { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	.varia-fx .varia-fx-glow, .varia-fx-glints { animation: none; }
}
/* Keep the bubble above her hand, as in the mockup */
.varia-brand svg { width: 52px; height: 34px; }
.varia-brand span { font-size: 24px; line-height: 28px; }
.varia-bubble { font-size: 16px; line-height: 27px; padding: 12px 16px; }
.varia-panel.is-welcome .varia-stage-side { top: 44px; width: 54%; gap: 6px; }
.varia-root .varia-panel .varia-form:focus-within { outline: 1.5px solid rgba(162, 77, 126, .55); }
/* Size the portrait by width so her raised hand reaches under the bubble */
.varia-portrait,
.varia-panel.is-welcome .varia-portrait {
	width: 80%;
	height: auto;
	max-height: 125%;
	object-fit: contain;
	object-position: bottom left;
}
.varia-panel.is-welcome .varia-stage-side { top: 36px; width: 52%; }

/* 1.6.1: smaller brand, bubble raised so VARIA's hand shows below it */
.varia-panel.is-welcome .varia-stage-side { top: 14px; right: 14px; width: 50%; gap: 6px; }
.varia-panel.is-welcome .varia-brand svg { width: 38px; height: 25px; }
.varia-panel.is-welcome .varia-brand span { font-size: 18px; line-height: 22px; letter-spacing: .06em; }
.varia-panel.is-welcome .varia-bubble { font-size: 15px; line-height: 25px; padding: 10px 14px; border-radius: 22px; }
.varia-panel.is-welcome .varia-bubble::after { width: 14px; height: 14px; bottom: -7px; left: 26px; }
@media (max-width: 700px) {
	.varia-panel.is-welcome .varia-stage-side { top: 10px; right: 10px; width: 54%; gap: 4px; }
	.varia-panel.is-welcome .varia-brand svg { width: 32px; height: 21px; }
	.varia-panel.is-welcome .varia-brand span { font-size: 15px; line-height: 19px; }
	.varia-panel.is-welcome .varia-bubble { font-size: 14px; line-height: 22px; padding: 8px 12px; }
}
@media (min-width: 701px) and (max-height: 760px) {
	.varia-panel.is-welcome .varia-stage-side { width: 44%; top: 10px; }
	.varia-panel.is-welcome .varia-bubble { font-size: 14px; line-height: 22px; padding: 8px 12px; }
	.varia-panel.is-welcome .varia-brand span { font-size: 16px; line-height: 20px; }
}

/* 1.7.0: human support (WhatsApp / email) */
.varia-human {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: var(--g-mauve-deep, #86365F);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.varia-support {
	align-self: stretch;
	display: grid;
	gap: 8px;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .6));
	box-shadow: 0 8px 22px rgba(91, 33, 71, .1), inset 0 1px 0 #FFFFFF;
	animation: varia-support-in .25s ease-out;
}
.varia-support-title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--g-plum, #5B2147); }
.varia-support-note { margin: 0; font-size: 14px; line-height: 22px; color: var(--g-plum-soft, rgba(91, 33, 71, .72)); }
.varia-support-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.varia-support-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 1 140px;
	min-height: 44px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	color: var(--g-plum, #5B2147) !important;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px rgba(194, 127, 164, .45);
	transition: transform .15s ease, box-shadow .15s ease;
}
.varia-support-btn.is-primary {
	color: #FFFFFF !important;
	background: linear-gradient(160deg, #B5649A, var(--g-mauve-deep, #86365F));
	box-shadow: 0 8px 18px rgba(134, 54, 95, .3);
}
.varia-support-btn:hover { transform: translateY(-1px); }
.varia-support-btn.is-wa::before,
.varia-support-btn.is-mail::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.varia-support-btn.is-wa { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19.5l1.1-3.6a7.6 7.6 0 1 1 2.8 2.6L5 19.5Z'/%3E%3Cpath d='M9.4 8.8c.2 2.4 2.6 4.8 5 5l1-1.1 1.5.7c-.1 1-.9 1.7-1.9 1.7-2.9-.2-5.7-3-5.9-5.9 0-1 .7-1.8 1.7-1.9l.7 1.5-1.1 1Z'/%3E%3C/svg%3E"); }
.varia-support-btn.is-mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2.5'/%3E%3Cpath d='m4.5 7.5 7.5 5.5 7.5-5.5'/%3E%3C/svg%3E"); }
.varia-support-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; font-size: 13px; line-height: 20px; }
.varia-support-links a { color: var(--g-mauve-deep, #86365F); text-decoration: underline; text-underline-offset: 3px; }
@keyframes varia-support-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .varia-support { animation: none; } }
.varia-support-btn { white-space: nowrap; }