/* =========================================================
   Yuniq.ai — public widget
   Author: Yegane Norouzi <https://github.com/Yeganenorouzi>

   Architecture notes
   ------------------
   1. Every rule is scoped under #yuniq-ai-root. The ID gives each
      selector enough specificity to beat almost any host theme rule
      without `!important`. `@layer` is deliberately NOT used: unlayered
      styles win over layered ones, and theme CSS is unlayered, so a
      layer would make theme bleed worse rather than better.
   2. Design tokens live on .yuniq-ai-root, not :root, so the widget
      never leaks variables into the host page.
   3. Colors resolve light -> dark via data-theme, with the system
      preference as the default.
   ========================================================= */

/* ---------- Vazirmatn, served from this plugin ----------
   No Google Fonts request: that host is slow or blocked in Iran, and
   an external font call is a privacy problem for the site owner.
   If the woff2 files are absent the stack simply falls through to the
   next family, so the widget still renders correctly.
   -------------------------------------------------------- */
@font-face {
	font-family: "Vazirmatn Local";
	src: url("../fonts/vazirmatn-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Vazirmatn Local";
	src: url("../fonts/vazirmatn-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Vazirmatn Local";
	src: url("../fonts/vazirmatn-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Vazirmatn Local";
	src: url("../fonts/vazirmatn-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* =========================================================
   TOKENS
   ========================================================= */
.yuniq-ai-root {
	/* Brand — overridden inline from the settings screen. */
	--yuniq-ai-primary: #263dff;
	--yuniq-ai-secondary: #111b55;
	--yuniq-ai-radius: 20px;

	/* Layout — overridden inline from the settings screen. */
	--yuniq-ai-panel-w: 420px;
	--yuniq-ai-panel-h: 720px;
	--yuniq-ai-off-x: 24px;
	--yuniq-ai-off-y: 24px;
	--yuniq-ai-launcher-size: 62px;
	--yuniq-ai-fs: 14px;
	--yuniq-ai-greet-delay: 2s;

	/* Derived brand tints. */
	--yuniq-ai-primary-soft: color-mix(in srgb, var(--yuniq-ai-primary) 10%, transparent);
	--yuniq-ai-primary-ring: color-mix(in srgb, var(--yuniq-ai-primary) 22%, transparent);
	--yuniq-ai-on-primary: #ffffff;

	/* Neutrals — light. */
	--yuniq-ai-bg: #ffffff;
	--yuniq-ai-bg-subtle: #f7f8fb;
	--yuniq-ai-surface: #ffffff;
	--yuniq-ai-surface-alt: #f2f4f8;
	--yuniq-ai-border: #e4e7ee;
	--yuniq-ai-border-strong: #d3d8e3;
	--yuniq-ai-text: #14161c;
	--yuniq-ai-text-muted: #61697c;
	--yuniq-ai-text-faint: #8e96a8;

	--yuniq-ai-danger-bg: #fef2f2;
	--yuniq-ai-danger-border: #fecaca;
	--yuniq-ai-danger-text: #b42318;
	--yuniq-ai-online: #16a34a;

	/* Depth — restrained, Clean SaaS. */
	--yuniq-ai-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--yuniq-ai-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
	--yuniq-ai-shadow-lg: 0 16px 48px -12px rgba(16, 24, 40, 0.28);
	--yuniq-ai-shadow-launcher: 0 6px 20px -4px color-mix(in srgb, var(--yuniq-ai-primary) 45%, transparent);

	--yuniq-ai-font: "Vazirmatn Local", "Vazirmatn", "IRANSans", "IRANYekan",
		-apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;

	/* Motion — zeroed out under prefers-reduced-motion. */
	--yuniq-ai-dur-fast: 120ms;
	--yuniq-ai-dur: 200ms;
	--yuniq-ai-dur-slow: 320ms;
	--yuniq-ai-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark, from the system preference — unless light was forced. */
@media (prefers-color-scheme: dark) {
	.yuniq-ai-root:not([data-theme="light"]) {
		--yuniq-ai-bg: #12141a;
		--yuniq-ai-bg-subtle: #0d0f14;
		--yuniq-ai-surface: #1a1d25;
		--yuniq-ai-surface-alt: #232732;
		--yuniq-ai-border: #2b303c;
		--yuniq-ai-border-strong: #3a4150;
		--yuniq-ai-text: #eceef3;
		--yuniq-ai-text-muted: #a2aab9;
		--yuniq-ai-text-faint: #767f91;
		--yuniq-ai-danger-bg: #2a1616;
		--yuniq-ai-danger-border: #5c2626;
		--yuniq-ai-danger-text: #fca5a5;
		--yuniq-ai-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--yuniq-ai-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
		--yuniq-ai-shadow-lg: 0 16px 48px -12px rgba(0, 0, 0, 0.7);
	}
}

/* Dark, forced from the settings screen. */
.yuniq-ai-root[data-theme="dark"] {
	--yuniq-ai-bg: #12141a;
	--yuniq-ai-bg-subtle: #0d0f14;
	--yuniq-ai-surface: #1a1d25;
	--yuniq-ai-surface-alt: #232732;
	--yuniq-ai-border: #2b303c;
	--yuniq-ai-border-strong: #3a4150;
	--yuniq-ai-text: #eceef3;
	--yuniq-ai-text-muted: #a2aab9;
	--yuniq-ai-text-faint: #767f91;
	--yuniq-ai-danger-bg: #2a1616;
	--yuniq-ai-danger-border: #5c2626;
	--yuniq-ai-danger-text: #fca5a5;
	--yuniq-ai-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--yuniq-ai-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
	--yuniq-ai-shadow-lg: 0 16px 48px -12px rgba(0, 0, 0, 0.7);
}

/* =========================================================
   ROOT + RESET
   ========================================================= */
#yuniq-ai-root.yuniq-ai-root {
	position: fixed;
	z-index: 2147483000;
	font-family: var(--yuniq-ai-font);
	font-size: var(--yuniq-ai-fs);
	line-height: 1.6;
	color: var(--yuniq-ai-text);
	direction: rtl;
	text-align: right;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

#yuniq-ai-root *,
#yuniq-ai-root *::before,
#yuniq-ai-root *::after {
	box-sizing: border-box;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* Themes love to restyle bare buttons and inputs. */
#yuniq-ai-root button,
#yuniq-ai-root input,
#yuniq-ai-root textarea {
	margin: 0;
	font: inherit;
	color: inherit;
	border-radius: 0;
	text-decoration: none;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

#yuniq-ai-root button {
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

/* One visible, consistent focus ring everywhere. */
#yuniq-ai-root :focus-visible {
	outline: 2px solid var(--yuniq-ai-primary);
	outline-offset: 2px;
	border-radius: 6px;
}
#yuniq-ai-root :focus:not(:focus-visible) {
	outline: none;
}

/* Position — desktop. */
/* Position. --yuniq-ai-off-* come inline from the settings; the mobile
   block sets --yuniq-ai-edge-* instead, because an inline value would
   always beat a stylesheet override of the same variable. */
#yuniq-ai-root.yuniq-ai-pos-bottom-right { bottom: var(--yuniq-ai-edge-y, var(--yuniq-ai-off-y)); right: var(--yuniq-ai-edge-x, var(--yuniq-ai-off-x)); }
#yuniq-ai-root.yuniq-ai-pos-bottom-left  { bottom: var(--yuniq-ai-edge-y, var(--yuniq-ai-off-y)); left: var(--yuniq-ai-edge-x, var(--yuniq-ai-off-x)); }
#yuniq-ai-root.yuniq-ai-pos-top-right    { top: var(--yuniq-ai-edge-y, var(--yuniq-ai-off-y)); right: var(--yuniq-ai-edge-x, var(--yuniq-ai-off-x)); }
#yuniq-ai-root.yuniq-ai-pos-top-left     { top: var(--yuniq-ai-edge-y, var(--yuniq-ai-off-y)); left: var(--yuniq-ai-edge-x, var(--yuniq-ai-off-x)); }

/* The site's own font instead of the bundled Vazirmatn. */
#yuniq-ai-root.yuniq-ai-root.yuniq-ai-font-inherit {
	font-family: inherit;
}

/* Visibility per device. */
@media (max-width: 640px) {
	#yuniq-ai-root.yuniq-ai-hide-mobile { display: none !important; }
}
@media (min-width: 641px) {
	#yuniq-ai-root.yuniq-ai-hide-desktop { display: none !important; }
}

/* =========================================================
   LAUNCHER
   ========================================================= */
#yuniq-ai-root .yuniq-ai-launcher-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	transition: opacity var(--yuniq-ai-dur) var(--yuniq-ai-ease);
}

#yuniq-ai-root .yuniq-ai-launcher {
	position: relative;
	width: var(--yuniq-ai-launcher-size);
	height: var(--yuniq-ai-launcher-size);
	border-radius: calc(var(--yuniq-ai-launcher-size) * 0.35);
	background:
		radial-gradient(120% 90% at 30% 15%, color-mix(in srgb, #fff 22%, transparent) 0%, transparent 55%),
		linear-gradient(145deg, var(--yuniq-ai-primary) 0%, var(--yuniq-ai-secondary) 100%);
	color: var(--yuniq-ai-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--yuniq-ai-shadow-launcher),
		inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
	transition: transform var(--yuniq-ai-dur) var(--yuniq-ai-ease),
		box-shadow var(--yuniq-ai-dur) var(--yuniq-ai-ease),
		border-radius var(--yuniq-ai-dur-slow) var(--yuniq-ai-ease);
}

#yuniq-ai-root .yuniq-ai-launcher:hover {
	transform: translateY(-3px) rotate(-4deg);
	box-shadow: 0 12px 30px -6px color-mix(in srgb, var(--yuniq-ai-primary) 60%, transparent),
		inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
}
#yuniq-ai-root .yuniq-ai-launcher:active {
	transform: translateY(0) scale(0.95);
}
#yuniq-ai-root.is-open .yuniq-ai-launcher,
#yuniq-ai-root .yuniq-ai-launcher.yuniq-ai-shape-circle {
	border-radius: 50%;
}

/* Flat fill instead of the two-color gradient. */
#yuniq-ai-root .yuniq-ai-launcher.yuniq-ai-launcher-solid {
	background: var(--yuniq-ai-primary);
}

/* Pill: icon plus a text label. Collapses back to a circle while open. */
#yuniq-ai-root .yuniq-ai-launcher.yuniq-ai-shape-pill {
	width: auto;
	gap: 8px;
	padding-inline: calc(var(--yuniq-ai-launcher-size) * 0.18) calc(var(--yuniq-ai-launcher-size) * 0.32);
	border-radius: 999px;
}
#yuniq-ai-root .yuniq-ai-launcher-label {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1;
}
#yuniq-ai-root.is-open .yuniq-ai-launcher.yuniq-ai-shape-pill {
	width: var(--yuniq-ai-launcher-size);
	padding: 0;
}
#yuniq-ai-root.is-open .yuniq-ai-launcher-label {
	display: none;
}
#yuniq-ai-root.is-open .yuniq-ai-shape-pill .yuniq-ai-launcher-icon {
	position: absolute;
}

/* Custom avatar from the settings screen fills the launcher. */
#yuniq-ai-root .yuniq-ai-launcher-avatar {
	width: var(--yuniq-ai-launcher-size);
	height: var(--yuniq-ai-launcher-size);
	border-radius: inherit;
	object-fit: cover;
	display: block;
}
#yuniq-ai-root .yuniq-ai-shape-pill .yuniq-ai-launcher-avatar {
	width: calc(var(--yuniq-ai-launcher-size) * 0.72);
	height: calc(var(--yuniq-ai-launcher-size) * 0.72);
	border-radius: 50%;
}
#yuniq-ai-root .yuniq-ai-launcher-icon {
	border-radius: inherit;
}
#yuniq-ai-root .yuniq-ai-glyph {
	width: calc(var(--yuniq-ai-launcher-size) * 0.42);
	height: calc(var(--yuniq-ai-launcher-size) * 0.42);
	display: block;
}

/* Built-in robot. */
#yuniq-ai-root .yuniq-ai-bot {
	width: calc(var(--yuniq-ai-launcher-size) * 0.68);
	height: calc(var(--yuniq-ai-launcher-size) * 0.68);
	display: block;
	overflow: visible;
	animation: yuniq-ai-bob 3.2s ease-in-out infinite;
}
#yuniq-ai-root .yuniq-ai-bot-visor {
	fill: var(--yuniq-ai-secondary);
}
#yuniq-ai-root .yuniq-ai-bot-eyes {
	fill: #6ff3ff;
	filter: drop-shadow(0 0 2px #6ff3ff);
	transform-box: fill-box;
	transform-origin: center;
	transition: transform var(--yuniq-ai-dur) var(--yuniq-ai-ease);
	animation: yuniq-ai-blink 4.5s infinite;
}
#yuniq-ai-root .yuniq-ai-bot-mouth {
	stroke: var(--yuniq-ai-secondary);
	opacity: 0.55;
}
#yuniq-ai-root .yuniq-ai-bot-antenna {
	fill: #ffd54a;
	animation: yuniq-ai-antenna 1.8s ease-in-out infinite;
}
/* Eyes glance toward the page (inline-start in RTL = right side of the bot). */
#yuniq-ai-root .yuniq-ai-launcher:hover .yuniq-ai-bot-eyes {
	translate: -1.5px -0.5px;
}
@keyframes yuniq-ai-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-2px); }
}
@keyframes yuniq-ai-blink {
	0%, 90%, 100% { transform: scaleY(1); }
	94%           { transform: scaleY(0.1); }
}
@keyframes yuniq-ai-antenna {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}

#yuniq-ai-root .yuniq-ai-online-badge {
	position: absolute;
	z-index: 1;
	top: -3px;
	inset-inline-end: -3px;
	width: 12px;
	height: 12px;
	background: var(--yuniq-ai-online);
	border: 2px solid var(--yuniq-ai-bg);
	border-radius: 50%;
	transition: opacity var(--yuniq-ai-dur-fast) linear;
}

#yuniq-ai-root .yuniq-ai-launcher-icon,
#yuniq-ai-root .yuniq-ai-launcher-close {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--yuniq-ai-dur) var(--yuniq-ai-ease),
		transform var(--yuniq-ai-dur) var(--yuniq-ai-ease);
}
#yuniq-ai-root .yuniq-ai-launcher-close {
	position: absolute;
	opacity: 0;
	transform: rotate(-90deg) scale(0.4);
}
#yuniq-ai-root.is-open .yuniq-ai-launcher-icon {
	opacity: 0;
	transform: rotate(90deg) scale(0.4);
}
#yuniq-ai-root.is-open .yuniq-ai-launcher-close {
	opacity: 1;
	transform: rotate(0) scale(1);
}
#yuniq-ai-root.is-open .yuniq-ai-online-badge {
	opacity: 0;
}

/* Greeting bubble — beside the launcher, on the side facing the page, so
   it can never run off the screen edge. Pops up once after load, then on
   hover and keyboard focus; never while open.
   Physical left/right on purpose: which side is safe depends on the
   widget's screen corner, not on the text direction. */
#yuniq-ai-root .yuniq-ai-launcher-tooltip {
	position: absolute;
	top: 50%;
	right: calc(100% + 14px);
	display: flex;
	flex-direction: column;
	gap: 1px;
	/* max-content keeps the bubble from being squeezed by the narrow
	   launcher it is positioned against; the cap makes long text wrap
	   instead of running past the screen edge on small phones. */
	width: max-content;
	max-width: min(260px, calc(100vw - var(--yuniq-ai-launcher-size) - 64px));
	white-space: normal;
	text-align: right;
	margin: 0;
	background: var(--yuniq-ai-surface);
	color: var(--yuniq-ai-text);
	border: 1px solid var(--yuniq-ai-border);
	font-size: 13px;
	line-height: 1.5;
	padding: 9px 14px;
	border-radius: 14px;
	box-shadow: var(--yuniq-ai-shadow-lg);
	opacity: 0;
	transform: translate(6px, -50%) scale(0.96);
	transform-origin: right center;
	pointer-events: none;
	transition: opacity var(--yuniq-ai-dur) var(--yuniq-ai-ease),
		transform var(--yuniq-ai-dur) var(--yuniq-ai-ease);
}
#yuniq-ai-root .yuniq-ai-greet-auto .yuniq-ai-launcher-tooltip {
	animation: yuniq-ai-greet 6s var(--yuniq-ai-ease) var(--yuniq-ai-greet-delay);
}
/* Explicit display/margins: some themes restyle bare strong/span. */
#yuniq-ai-root .yuniq-ai-launcher-tooltip strong {
	display: block;
	margin: 0;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--yuniq-ai-text);
}
#yuniq-ai-root .yuniq-ai-launcher-tooltip span {
	display: block;
	margin: 0;
	color: var(--yuniq-ai-text-muted);
	font-size: 12.5px;
}
/* Tail pointing at the launcher. */
#yuniq-ai-root .yuniq-ai-launcher-tooltip::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -6px;
	width: 10px;
	height: 10px;
	background: inherit;
	border: 1px solid var(--yuniq-ai-border);
	border-left: 0;
	border-bottom: 0;
	transform: translateY(-50%) rotate(45deg);
}

#yuniq-ai-root.yuniq-ai-pos-bottom-left .yuniq-ai-launcher-tooltip,
#yuniq-ai-root.yuniq-ai-pos-top-left .yuniq-ai-launcher-tooltip {
	right: auto;
	left: calc(100% + 14px);
	transform: translate(-6px, -50%) scale(0.96);
	transform-origin: left center;
}
#yuniq-ai-root.yuniq-ai-pos-bottom-left .yuniq-ai-launcher-tooltip::after,
#yuniq-ai-root.yuniq-ai-pos-top-left .yuniq-ai-launcher-tooltip::after {
	right: auto;
	left: -6px;
	transform: translateY(-50%) rotate(-135deg);
}

#yuniq-ai-root .yuniq-ai-launcher-wrap:hover .yuniq-ai-launcher-tooltip,
#yuniq-ai-root .yuniq-ai-launcher:focus-visible + .yuniq-ai-launcher-tooltip,
#yuniq-ai-root .yuniq-ai-launcher-wrap:focus-within .yuniq-ai-launcher-tooltip {
	opacity: 1;
	transform: translate(0, -50%) scale(1);
}
@keyframes yuniq-ai-greet {
	0%       { opacity: 0; }
	8%, 88%  { opacity: 1; transform: translate(0, -50%) scale(1); }
	100%     { opacity: 0; }
}
#yuniq-ai-root.is-open .yuniq-ai-launcher-tooltip {
	display: none;
}

/* =========================================================
   PANEL
   ========================================================= */
#yuniq-ai-root .yuniq-ai-panel {
	position: absolute;
	width: min(var(--yuniq-ai-panel-w), calc(100vw - 32px));
	height: min(var(--yuniq-ai-panel-h), calc(100vh - 120px));
	max-height: calc(100vh - 120px);
	background: var(--yuniq-ai-bg);
	border: 1px solid var(--yuniq-ai-border);
	border-radius: var(--yuniq-ai-radius);
	box-shadow: var(--yuniq-ai-shadow-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.98);
	transform-origin: bottom var(--yuniq-ai-origin-x, right);
	transition: opacity var(--yuniq-ai-dur-slow) var(--yuniq-ai-ease),
		transform var(--yuniq-ai-dur-slow) var(--yuniq-ai-ease),
		visibility var(--yuniq-ai-dur-slow);
}

#yuniq-ai-root.yuniq-ai-pos-bottom-right .yuniq-ai-panel,
#yuniq-ai-root.yuniq-ai-pos-bottom-left .yuniq-ai-panel { bottom: calc(100% + 14px); }
#yuniq-ai-root.yuniq-ai-pos-top-right .yuniq-ai-panel,
#yuniq-ai-root.yuniq-ai-pos-top-left .yuniq-ai-panel { top: calc(100% + 14px); transform-origin: top var(--yuniq-ai-origin-x, right); }
#yuniq-ai-root.yuniq-ai-pos-bottom-right .yuniq-ai-panel,
#yuniq-ai-root.yuniq-ai-pos-top-right .yuniq-ai-panel { right: 0; }
#yuniq-ai-root.yuniq-ai-pos-bottom-left .yuniq-ai-panel,
#yuniq-ai-root.yuniq-ai-pos-top-left .yuniq-ai-panel { left: 0; --yuniq-ai-origin-x: left; }

#yuniq-ai-root.is-open .yuniq-ai-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* GSAP takes over the open/close tween once it has loaded; this flag
   hands the property back so the two never fight over transform. */
#yuniq-ai-root.yuniq-ai-gsap .yuniq-ai-panel {
	transition: none;
}

/* =========================================================
   HEADER
   Two variants, chosen in the settings screen: a gradient built from
   the site's own primary/secondary brand colors (default — the single
   biggest thing that makes this look like *this* site's assistant
   rather than a generic chat-widget template), or a flat solid header
   for brands that want something quieter.
   ========================================================= */
#yuniq-ai-root .yuniq-ai-panel-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 16px;
	flex-shrink: 0;
	overflow: hidden;
	z-index: 1;
}

#yuniq-ai-root .yuniq-ai-header-solid {
	background: var(--yuniq-ai-surface);
	border-bottom: 1px solid var(--yuniq-ai-border);
}

#yuniq-ai-root .yuniq-ai-header-gradient {
	background: linear-gradient(135deg, var(--yuniq-ai-primary) 0%, var(--yuniq-ai-secondary) 100%);
}
#yuniq-ai-root .yuniq-ai-header-gradient.yuniq-ai-header-flat {
	background: var(--yuniq-ai-primary);
}

/* A soft blurred glow behind the brand mark — purely decorative, and the
   reason the header carries `overflow:hidden` above. */
#yuniq-ai-root .yuniq-ai-header-glow {
	position: absolute;
	inset-inline-start: -30px;
	top: -60px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}
#yuniq-ai-root .yuniq-ai-header-solid .yuniq-ai-header-glow {
	display: none;
}

#yuniq-ai-root .yuniq-ai-header-brand {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	flex: 1;
	z-index: 1;
}

#yuniq-ai-root .yuniq-ai-header-logo,
#yuniq-ai-root .yuniq-ai-header-logo-fallback {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	flex-shrink: 0;
	object-fit: cover;
	background: var(--yuniq-ai-surface-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--yuniq-ai-primary);
	box-shadow: var(--yuniq-ai-shadow-sm);
}
#yuniq-ai-root .yuniq-ai-header-gradient .yuniq-ai-header-logo,
#yuniq-ai-root .yuniq-ai-header-gradient .yuniq-ai-header-logo-fallback {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	box-shadow: none;
}

#yuniq-ai-root .yuniq-ai-header-titles {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

#yuniq-ai-root .yuniq-ai-header-name {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--yuniq-ai-text);
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#yuniq-ai-root .yuniq-ai-header-gradient .yuniq-ai-header-name {
	color: #fff;
}

#yuniq-ai-root .yuniq-ai-header-sub {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--yuniq-ai-text-muted);
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#yuniq-ai-root .yuniq-ai-header-gradient .yuniq-ai-header-sub {
	color: rgba(255, 255, 255, 0.85);
}
#yuniq-ai-root .yuniq-ai-header-sub::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yuniq-ai-online);
	flex-shrink: 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yuniq-ai-online) 25%, transparent);
}

#yuniq-ai-root .yuniq-ai-header-controls {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

#yuniq-ai-root .yuniq-ai-ctrl-btn {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--yuniq-ai-text-muted);
	transition: background var(--yuniq-ai-dur-fast) linear,
		color var(--yuniq-ai-dur-fast) linear;
}
#yuniq-ai-root .yuniq-ai-ctrl-btn:hover {
	background: var(--yuniq-ai-surface-alt);
	color: var(--yuniq-ai-text);
}
#yuniq-ai-root .yuniq-ai-header-gradient .yuniq-ai-ctrl-btn {
	color: rgba(255, 255, 255, 0.9);
}
#yuniq-ai-root .yuniq-ai-header-gradient .yuniq-ai-ctrl-btn:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

/* =========================================================
   BODY
   ========================================================= */
#yuniq-ai-root .yuniq-ai-panel-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--yuniq-ai-bg-subtle);
	padding: 14px 14px 4px;
}

#yuniq-ai-root .yuniq-ai-intro {
	flex-shrink: 0;
	text-align: center;
	padding: 18px 4px 16px;
}
#yuniq-ai-root .yuniq-ai-intro-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 12px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--yuniq-ai-on-primary);
	background: linear-gradient(135deg, var(--yuniq-ai-primary) 0%, var(--yuniq-ai-secondary) 100%);
	box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--yuniq-ai-primary) 55%, transparent);
}
#yuniq-ai-root .yuniq-ai-intro-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	color: var(--yuniq-ai-text);
	line-height: 1.4;
}
#yuniq-ai-root .yuniq-ai-intro-sub {
	margin: 0;
	font-size: 12.5px;
	color: var(--yuniq-ai-text-muted);
	line-height: 1.6;
}

/* =========================================================
   MESSAGES
   ========================================================= */
#yuniq-ai-root .yuniq-ai-messages {
	display: none;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding-bottom: 8px;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--yuniq-ai-border-strong) transparent;
}
#yuniq-ai-root .yuniq-ai-messages.is-active,
#yuniq-ai-root .yuniq-ai-messages.yuniq-ai-visible {
	display: flex;
}
#yuniq-ai-root .yuniq-ai-messages::-webkit-scrollbar { width: 6px; }
#yuniq-ai-root .yuniq-ai-messages::-webkit-scrollbar-track { background: transparent; }
#yuniq-ai-root .yuniq-ai-messages::-webkit-scrollbar-thumb {
	background: var(--yuniq-ai-border-strong);
	border-radius: 3px;
}

#yuniq-ai-root .yuniq-ai-msg {
	max-width: 85%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: calc(var(--yuniq-ai-fs) - 0.5px);
	line-height: 1.65;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	animation: yuniq-ai-msg-in var(--yuniq-ai-dur) var(--yuniq-ai-ease);
}
@keyframes yuniq-ai-msg-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

#yuniq-ai-root .yuniq-ai-msg-user {
	align-self: flex-start;
	background: var(--yuniq-ai-user-bg, linear-gradient(135deg, var(--yuniq-ai-primary) 0%, var(--yuniq-ai-secondary) 100%));
	color: var(--yuniq-ai-user-text, var(--yuniq-ai-on-primary));
	border-end-start-radius: 4px;
}
#yuniq-ai-root .yuniq-ai-msg-assistant {
	align-self: flex-end;
	background: var(--yuniq-ai-bot-bg, var(--yuniq-ai-surface));
	color: var(--yuniq-ai-bot-text, var(--yuniq-ai-text));
	border: 1px solid var(--yuniq-ai-border);
	border-end-end-radius: 4px;
	box-shadow: var(--yuniq-ai-shadow-sm);
}
#yuniq-ai-root .yuniq-ai-msg-assistant a {
	color: var(--yuniq-ai-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}
#yuniq-ai-root .yuniq-ai-msg-assistant strong {
	font-weight: 600;
}
#yuniq-ai-root .yuniq-ai-msg-error {
	align-self: center;
	max-width: 94%;
	background: var(--yuniq-ai-danger-bg);
	border: 1px solid var(--yuniq-ai-danger-border);
	color: var(--yuniq-ai-danger-text);
	font-size: 12.5px;
	text-align: center;
}

/* Typing indicator */
#yuniq-ai-root .yuniq-ai-typing {
	align-self: flex-end;
	display: flex;
	gap: 4px;
	padding: 13px 15px;
	background: var(--yuniq-ai-surface);
	border: 1px solid var(--yuniq-ai-border);
	border-radius: 14px;
	border-end-end-radius: 4px;
	box-shadow: var(--yuniq-ai-shadow-sm);
}
#yuniq-ai-root .yuniq-ai-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yuniq-ai-text-faint);
	animation: yuniq-ai-bounce 1.2s infinite ease-in-out;
}
#yuniq-ai-root .yuniq-ai-typing span:nth-child(2) { animation-delay: 0.15s; }
#yuniq-ai-root .yuniq-ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes yuniq-ai-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
	30%           { transform: translateY(-4px); opacity: 1; }
}

/* Streaming caret */
#yuniq-ai-root .yuniq-ai-caret {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-inline-start: 2px;
	background: var(--yuniq-ai-primary);
	vertical-align: text-bottom;
	animation: yuniq-ai-blink 0.9s step-end infinite;
}
@keyframes yuniq-ai-blink {
	50% { opacity: 0; }
}

/* Jump-to-latest — appears only when the reader has scrolled up. */
#yuniq-ai-root .yuniq-ai-jump {
	position: absolute;
	bottom: 12px;
	inset-inline-start: 50%;
	transform: translateX(50%) translateY(6px);
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--yuniq-ai-text);
	background: var(--yuniq-ai-surface);
	border: 1px solid var(--yuniq-ai-border-strong);
	border-radius: 999px;
	box-shadow: var(--yuniq-ai-shadow-md);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--yuniq-ai-dur) var(--yuniq-ai-ease),
		transform var(--yuniq-ai-dur) var(--yuniq-ai-ease);
	z-index: 4;
}
#yuniq-ai-root .yuniq-ai-jump.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(50%) translateY(0);
}

/* =========================================================
   INPUT AREA
   ========================================================= */
#yuniq-ai-root .yuniq-ai-input-area {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	padding: 10px 12px;
	background: var(--yuniq-ai-surface);
	border-top: 1px solid var(--yuniq-ai-border);
}

/* Composer */
#yuniq-ai-root #yuniq-ai-chat-form {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	padding: 4px;
	background: var(--yuniq-ai-surface-alt);
	border: 1.5px solid transparent;
	border-radius: 24px;
	transition: border-color var(--yuniq-ai-dur-fast) linear,
		background var(--yuniq-ai-dur-fast) linear,
		box-shadow var(--yuniq-ai-dur-fast) linear;
}
#yuniq-ai-root #yuniq-ai-chat-form:focus-within {
	background: var(--yuniq-ai-surface);
	border-color: var(--yuniq-ai-primary);
	box-shadow: 0 0 0 3px var(--yuniq-ai-primary-ring);
}
/* The form owns the focus ring, so the field inside must not draw one. */
#yuniq-ai-root #yuniq-ai-chat-form:focus-within #yuniq-ai-input:focus-visible {
	outline: none;
}

#yuniq-ai-root #yuniq-ai-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 8px 6px;
	font-size: var(--yuniq-ai-fs);
	line-height: 1.5;
	color: var(--yuniq-ai-text);
	text-align: right;
	resize: none;
	max-height: 108px;
	overflow-y: auto;
	scrollbar-width: none;
}
#yuniq-ai-root #yuniq-ai-input::-webkit-scrollbar { display: none; }
#yuniq-ai-root #yuniq-ai-input::placeholder {
	color: var(--yuniq-ai-text-faint);
	opacity: 1;
}

#yuniq-ai-root #yuniq-ai-send {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--yuniq-ai-primary) 0%, var(--yuniq-ai-secondary) 100%);
	color: var(--yuniq-ai-on-primary);
	transition: transform var(--yuniq-ai-dur-fast) var(--yuniq-ai-ease),
		opacity var(--yuniq-ai-dur-fast) linear;
}
#yuniq-ai-root #yuniq-ai-send:hover:not(:disabled) { transform: scale(1.06); }
#yuniq-ai-root #yuniq-ai-send:active:not(:disabled) { transform: scale(0.94); }
#yuniq-ai-root #yuniq-ai-send:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

#yuniq-ai-root .yuniq-ai-powered {
	margin-top: 8px;
	text-align: center;
	font-size: 10.5px;
	color: var(--yuniq-ai-text-faint);
	line-height: 1.4;
}
#yuniq-ai-root .yuniq-ai-powered a { color: inherit; }

/* Visually hidden, still announced by screen readers. */
#yuniq-ai-root .yuniq-ai-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================
   MOBILE — full-screen sheet
   ========================================================= */
@media (max-width: 640px) {
	/* Same corner as on desktop, only tighter to the edge. */
	#yuniq-ai-root.yuniq-ai-root {
		--yuniq-ai-edge-x: min(var(--yuniq-ai-off-x), 16px);
		--yuniq-ai-edge-y: min(var(--yuniq-ai-off-y), 16px);
	}

	#yuniq-ai-root .yuniq-ai-panel {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		border: 0;
		border-radius: 0;
		transform: translateY(100%);
		transition: transform var(--yuniq-ai-dur-slow) var(--yuniq-ai-ease),
			opacity var(--yuniq-ai-dur-slow) var(--yuniq-ai-ease),
			visibility var(--yuniq-ai-dur-slow);
	}
	#yuniq-ai-root.is-open .yuniq-ai-panel {
		transform: translateY(0);
	}

	#yuniq-ai-root.is-open .yuniq-ai-launcher-wrap {
		opacity: 0;
		pointer-events: none;
	}

	#yuniq-ai-root .yuniq-ai-panel-header {
		padding-top: max(12px, env(safe-area-inset-top));
	}
	#yuniq-ai-root .yuniq-ai-input-area {
		padding-bottom: max(10px, env(safe-area-inset-bottom));
	}

	/* 16px keeps iOS Safari from zooming the page on focus. */
	#yuniq-ai-root #yuniq-ai-input {
		font-size: 16px;
	}
}

/* Page scroll lock while the sheet is open.
   `touch-action: none` is deliberately not used here: it also killed
   scrolling *inside* the panel on several mobile browsers. */
/* Only the full-screen mobile sheet locks the page. On desktop the
   panel is a small corner popup: locking there froze the whole site and
   made it jump sideways as the scrollbar disappeared. */
@media (max-width: 640px) {
	body.yuniq-ai-open {
		overflow: hidden;
	}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	#yuniq-ai-root,
	#yuniq-ai-root * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	#yuniq-ai-root .yuniq-ai-messages {
		scroll-behavior: auto;
	}
}

/* =========================================================
   HIGH CONTRAST
   ========================================================= */
@media (forced-colors: active) {
	#yuniq-ai-root .yuniq-ai-panel,
	#yuniq-ai-root .yuniq-ai-msg,
	#yuniq-ai-root .yuniq-ai-option,
	#yuniq-ai-root .yuniq-ai-reply {
		border: 1px solid CanvasText;
	}
}

/* =========================================================
   TALK TO A HUMAN
   ========================================================= */
#yuniq-ai-root .yuniq-ai-human-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 8px 10px;
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--yuniq-ai-text-muted);
	background: var(--yuniq-ai-surface-alt);
	border: 1px dashed var(--yuniq-ai-border-strong);
	border-radius: 12px;
	transition: color var(--yuniq-ai-dur-fast) linear,
		border-color var(--yuniq-ai-dur-fast) linear,
		background var(--yuniq-ai-dur-fast) linear;
}
#yuniq-ai-root .yuniq-ai-human-btn:hover {
	color: var(--yuniq-ai-primary);
	border-color: var(--yuniq-ai-primary);
	background: var(--yuniq-ai-primary-soft);
}

/* System notices (escalation status) and the "need a human?" prompt */
#yuniq-ai-root .yuniq-ai-msg-system {
	align-self: center;
	max-width: 94%;
	background: transparent;
	color: var(--yuniq-ai-text-faint);
	font-size: 11.5px;
	text-align: center;
	padding: 4px 10px;
	animation: none;
}
#yuniq-ai-root .yuniq-ai-need-human {
	padding: 0;
}
#yuniq-ai-root .yuniq-ai-need-human button {
	padding: 7px 16px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--yuniq-ai-primary);
	background: var(--yuniq-ai-primary-soft);
	border: 1px solid var(--yuniq-ai-primary);
	border-radius: 999px;
	transition: background var(--yuniq-ai-dur-fast) linear;
}
#yuniq-ai-root .yuniq-ai-need-human button:hover {
	background: var(--yuniq-ai-primary-ring);
}

/* Agent reply — same bubble language as the assistant, distinguished by a
   secondary-color accent so a visitor can tell a human answered. */
#yuniq-ai-root .yuniq-ai-msg-agent {
	border-inline-start: 3px solid var(--yuniq-ai-secondary);
}

/* =========================================================
   PRODUCT CARD
   ========================================================= */
#yuniq-ai-root .yuniq-ai-product-card {
	max-width: 92%;
	padding: 0;
	overflow: hidden;
}
#yuniq-ai-root .yuniq-ai-product-image {
	display: block;
	width: 100%;
	max-height: 140px;
	object-fit: cover;
	background: var(--yuniq-ai-surface-alt);
}
#yuniq-ai-root .yuniq-ai-product-body {
	padding: 10px 12px;
}
#yuniq-ai-root .yuniq-ai-product-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--yuniq-ai-text);
	margin-bottom: 4px;
}
#yuniq-ai-root .yuniq-ai-product-price {
	font-size: 13px;
	color: var(--yuniq-ai-primary);
	font-weight: 600;
	margin-bottom: 6px;
}
#yuniq-ai-root .yuniq-ai-product-price s {
	color: var(--yuniq-ai-text-faint);
	font-weight: 400;
	margin-inline-end: 4px;
}
#yuniq-ai-root .yuniq-ai-product-stock {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 999px;
	margin-bottom: 8px;
}
#yuniq-ai-root .yuniq-ai-product-stock.is-in-stock {
	color: var(--yuniq-ai-online);
	background: color-mix(in srgb, var(--yuniq-ai-online) 14%, transparent);
}
#yuniq-ai-root .yuniq-ai-product-stock.is-out-of-stock {
	color: var(--yuniq-ai-danger-text);
	background: var(--yuniq-ai-danger-bg);
}
#yuniq-ai-root .yuniq-ai-product-actions {
	display: flex;
	gap: 6px;
}
#yuniq-ai-root .yuniq-ai-product-btn {
	flex: 1 1 auto;
	text-align: center;
	padding: 7px 8px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 8px;
	color: var(--yuniq-ai-text);
	background: var(--yuniq-ai-surface-alt);
	border: 1px solid var(--yuniq-ai-border);
}
#yuniq-ai-root .yuniq-ai-product-btn-primary {
	color: var(--yuniq-ai-on-primary);
	background: var(--yuniq-ai-primary);
	border-color: var(--yuniq-ai-primary);
}

/* =========================================================
   INLINE LEAD FORM
   ========================================================= */
#yuniq-ai-root .yuniq-ai-inline-form {
	max-width: 94%;
	width: 100%;
}
#yuniq-ai-root .yuniq-ai-inline-form-title {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
}
#yuniq-ai-root .yuniq-ai-inline-form-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 8px;
	font-size: 12px;
	color: var(--yuniq-ai-text-muted);
}
#yuniq-ai-root .yuniq-ai-inline-form-row input,
#yuniq-ai-root .yuniq-ai-inline-form-row textarea {
	padding: 8px 10px;
	font-size: 13px;
	color: var(--yuniq-ai-text);
	background: var(--yuniq-ai-surface-alt);
	border: 1px solid var(--yuniq-ai-border);
	border-radius: 8px;
}
#yuniq-ai-root .yuniq-ai-inline-form-row input:focus-visible,
#yuniq-ai-root .yuniq-ai-inline-form-row textarea:focus-visible {
	border-color: var(--yuniq-ai-primary);
}
#yuniq-ai-root .yuniq-ai-inline-form button.yuniq-ai-product-btn-primary {
	width: 100%;
}

/* =========================================================
   FULL-PAGE MODE — the [yuniq_ai_page] shortcode
   Same widget, embedded in the page flow instead of floating: the launcher
   is hidden (public.js opens the panel on load automatically) and the
   panel fills its container rather than a fixed-size floating box.
   ========================================================= */
#yuniq-ai-root.yuniq-ai-page-mode {
	position: relative;
	inset: auto;
	width: 100%;
	max-width: 720px;
	height: 78vh;
	min-height: 480px;
	margin: 0 auto;
}
#yuniq-ai-root.yuniq-ai-page-mode .yuniq-ai-launcher-wrap {
	display: none;
}
#yuniq-ai-root.yuniq-ai-page-mode .yuniq-ai-panel {
	position: static;
	width: 100%;
	height: 100%;
	max-height: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}
#yuniq-ai-root.yuniq-ai-page-mode .yuniq-ai-ctrl-btn#yuniq-ai-panel-close {
	display: none;
}

/* =========================================================
   1.3 — starter options, follow-up replies, small fixes
   ========================================================= */

/* `hidden` must win over the display values set on these elements. */
#yuniq-ai-root [hidden] {
	display: none !important;
}

/* The intro scrolls on short screens instead of pushing the composer out. */
#yuniq-ai-root .yuniq-ai-intro {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
}

/* Starter options: the admin's quick actions as pickable cards. */
#yuniq-ai-root .yuniq-ai-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 16px;
	text-align: right;
}
#yuniq-ai-root .yuniq-ai-option {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 54px;
	padding: 10px 12px;
	text-align: right;
	text-decoration: none;
	line-height: 1.5;
	color: var(--yuniq-ai-text);
	background: var(--yuniq-ai-surface);
	border: 1px solid var(--yuniq-ai-border);
	border-radius: 12px;
	box-shadow: var(--yuniq-ai-shadow-sm);
	cursor: pointer;
	transition: border-color var(--yuniq-ai-dur-fast) linear,
		background var(--yuniq-ai-dur-fast) linear,
		transform var(--yuniq-ai-dur-fast) var(--yuniq-ai-ease);
}
#yuniq-ai-root .yuniq-ai-option:hover {
	border-color: var(--yuniq-ai-primary);
	background: var(--yuniq-ai-primary-soft);
	transform: translateY(-1px);
}
#yuniq-ai-root .yuniq-ai-option:active {
	transform: translateY(0);
}
#yuniq-ai-root .yuniq-ai-option-title {
	font-size: 13px;
	font-weight: 600;
}
#yuniq-ai-root .yuniq-ai-option-desc {
	font-size: 11.5px;
	color: var(--yuniq-ai-text-muted);
}
/* A lone last card spans the row instead of leaving a hole. */
#yuniq-ai-root .yuniq-ai-option:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
#yuniq-ai-root .yuniq-ai-intro-hint {
	margin: 12px 0 0;
	font-size: 11.5px;
	color: var(--yuniq-ai-text-faint);
	line-height: 1.6;
}

/* Follow-up options the assistant offers under its reply. */
#yuniq-ai-root .yuniq-ai-replies {
	align-self: flex-end;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	max-width: 94%;
}
#yuniq-ai-root .yuniq-ai-reply {
	padding: 7px 13px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--yuniq-ai-primary);
	background: var(--yuniq-ai-surface);
	border: 1px solid var(--yuniq-ai-primary-ring);
	border-radius: 999px;
	transition: background var(--yuniq-ai-dur-fast) linear,
		border-color var(--yuniq-ai-dur-fast) linear;
}
#yuniq-ai-root .yuniq-ai-reply:hover {
	background: var(--yuniq-ai-primary-soft);
	border-color: var(--yuniq-ai-primary);
}

/* A conversation with a human cannot be reset from under the agent. */
#yuniq-ai-root.is-with-agent #yuniq-ai-reset {
	display: none;
}
#yuniq-ai-root .yuniq-ai-human-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Lead form feedback stays inside the form. */
#yuniq-ai-root .yuniq-ai-inline-form-error:empty {
	display: none;
}
#yuniq-ai-root .yuniq-ai-inline-form-error {
	margin-bottom: 8px;
	font-size: 12px;
	color: var(--yuniq-ai-danger-text);
}
#yuniq-ai-root .yuniq-ai-inline-form-done {
	font-size: 13px;
	font-weight: 500;
	color: var(--yuniq-ai-online);
}

@media (max-width: 640px) {
	/* 16px keeps iOS Safari from zooming the page on focus. */
	#yuniq-ai-root .yuniq-ai-inline-form-row input,
	#yuniq-ai-root .yuniq-ai-inline-form-row textarea {
		font-size: 16px;
	}
}
@media (max-width: 340px) {
	#yuniq-ai-root .yuniq-ai-options {
		grid-template-columns: 1fr;
	}
}

/* The widget is right-to-left: "send" travels toward the left, so the
   paper plane is mirrored to point the way the message goes. */
#yuniq-ai-root #yuniq-ai-send svg {
	transform: scaleX(-1);
}

/* The field follows the language being typed (dir="auto"), which makes an
   empty field left-to-right and put the placeholder's «...» on the wrong
   side. While only the placeholder shows, it is laid out right-to-left. */
#yuniq-ai-root #yuniq-ai-input:placeholder-shown {
	direction: rtl;
	text-align: right;
}