/*!
 * Autolight Auto Assistant – frontend styles.
 * All colours/sizes come from CSS variables set in WordPress (Auto Assistant → Design).
 */

.auto-root {
	--auto-bg: #0b0f14;
	--auto-card: #151b23;
	--auto-text: #f1f4f7;
	--auto-muted: #94a1af;
	--auto-yellow: #f5b800;
	--auto-blue: #3d9bff;
	--auto-border: #253041;
	--auto-radius: 16px;
	--auto-width: 400px;
	--auto-max-height: 700px;
	--auto-bottom: 20px;
	--auto-side: 20px;
	--auto-bottom-m: 16px;
	--auto-bot-size: 64px;
	--auto-z: 99990;
	--auto-card-2: color-mix(in srgb, var(--auto-card) 82%, #ffffff 4%);
	--auto-ink: #0b0f14;
	--auto-ease: cubic-bezier(.2, .8, .2, 1);

	position: fixed;
	bottom: calc(var(--auto-bottom) + env(safe-area-inset-bottom, 0px));
	z-index: var(--auto-z);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.45;
	color: var(--auto-text);
	-webkit-font-smoothing: antialiased;
	text-align: left;
	letter-spacing: normal;
}
.auto-root.auto-pos-right { right: calc(var(--auto-side) + env(safe-area-inset-right, 0px)); }
.auto-root.auto-pos-left { left: calc(var(--auto-side) + env(safe-area-inset-left, 0px)); }
.auto-root *, .auto-root *::before, .auto-root *::after { box-sizing: border-box; }
.auto-root button, .auto-root input, .auto-root textarea { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; margin: 0; }
.auto-root p { margin: 0 0 .55em; }
.auto-root p:last-child { margin-bottom: 0; }
.auto-root h2, .auto-root h3 { margin: 0; padding: 0; border: 0; font-family: inherit; }
.auto-root a { color: inherit; }
.auto-root :focus { outline: none; }
.auto-root :focus-visible { outline: 2px solid var(--auto-blue); outline-offset: 2px; border-radius: 8px; }
.auto-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.auto-lock, html.auto-lock body { overflow: hidden !important; }

/* ------------------------------------------------------------------ Launcher */
.auto-launcher {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--auto-bot-size);
	height: var(--auto-bot-size);
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--auto-yellow) 35%, var(--auto-border));
	border-radius: 50%;
	background:
		radial-gradient(120% 120% at 30% 20%, #2b3440 0%, #121821 55%, #080b0f 100%);
	box-shadow:
		0 10px 28px rgba(0, 0, 0, .45),
		0 0 0 4px rgba(11, 15, 20, .55),
		inset 0 1px 0 rgba(255, 255, 255, .08);
	cursor: pointer;
	transition: transform .25s var(--auto-ease), box-shadow .25s var(--auto-ease);
	isolation: isolate;
}
.auto-pos-left .auto-launcher { margin-right: auto; }
@media (hover: hover) and (pointer: fine) {
	.auto-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 4px rgba(11, 15, 20, .55), 0 0 22px color-mix(in srgb, var(--auto-yellow) 30%, transparent); }
}
.auto-launcher:focus-visible { outline: 3px solid var(--auto-yellow); outline-offset: 3px; border-radius: 50%; }
.auto-launcher > .auto-bot { width: 82%; height: 82%; border-radius: 50%; }
.auto-launcher > .auto-bot--default { width: 100%; height: 100%; }
.auto-launcher-ring {
	position: absolute; inset: -1px; border-radius: 50%;
	background: conic-gradient(from 210deg, transparent 0 62%, var(--auto-yellow) 70%, transparent 78% 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
	opacity: .9;
	pointer-events: none;
}
.auto-launcher-dot {
	position: absolute; right: 4px; bottom: 5px;
	width: 12px; height: 12px; border-radius: 50%;
	background: #2fd27a;
	border: 2px solid #0b0f14;
	box-shadow: 0 0 8px rgba(47, 210, 122, .7);
}
.auto-root.is-open .auto-launcher { transform: scale(.92); }

.auto-bot-svg-wrap { display: inline-block; line-height: 0; }
.auto-bot-svg-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.auto-eye { transform-box: fill-box; transform-origin: center; animation: auto-blink 7s infinite; }
.auto-launcher:hover .auto-eye { animation-duration: 1.6s; }

@keyframes auto-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }

/* ------------------------------------------------------------------ AUTO mascot – living states (1.1.0)
 * Markup: .auto-bot (state transforms) > .auto-bot-media (idle loop) + .auto-bot-fx (scanner overlay).
 * Animations live on these wrappers, never on the image pixels, so custom uploads work unchanged.
 * Only transform/opacity are animated. */
.auto-bot { position: relative; display: block; overflow: hidden; isolation: isolate; transform-origin: 50% 70%; transition: transform .3s var(--auto-ease); }
.auto-bot--default { background: #0d0e0f; } /* = background colour of the bundled PNG */
.auto-bot-media { display: block; width: 100%; height: 100%; transform-origin: 50% 75%; }
.auto-bot-media > .auto-bot-img, .auto-bot-media > .auto-bot-svg-wrap { display: block; width: 100%; height: 100%; object-fit: contain; }
.auto-bot--default .auto-bot-img { object-fit: cover; }
.auto-bot-fx { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; }
.auto-bot-fx::before {
	content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%;
	background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--auto-yellow) 22%, transparent) 40%, rgba(255, 255, 255, .22) 50%, color-mix(in srgb, var(--auto-yellow) 22%, transparent) 60%, transparent 100%);
	mix-blend-mode: screen;
	transform: translateX(-140%) skewX(-14deg);
}

/* Small avatars: zoom the bundled full-body image to the head so it reads at 20–26 px. */
.auto-row-avatar > .auto-bot--default .auto-bot-img { transform: scale(1.9); transform-origin: 48% 27%; }

/* 1. Idle (closed launcher): slow breathing + soft LED glow, 5 s cycle. */
.auto-launcher > .auto-bot .auto-bot-media { animation: auto-breathe 5s ease-in-out infinite; }
.auto-launcher::before,
.auto-launcher::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none;
	box-shadow: 0 0 16px 2px color-mix(in srgb, var(--auto-yellow) 55%, transparent);
}
.auto-launcher::before { opacity: .3; animation: auto-glow 5s ease-in-out infinite; }
.auto-launcher::after { opacity: 0; box-shadow: 0 0 26px 6px color-mix(in srgb, var(--auto-yellow) 60%, transparent); transition: opacity .25s var(--auto-ease); }
.auto-launcher-ring { z-index: 2; }
.auto-launcher-dot { z-index: 3; }

/* 2. Hover (real pointers only): lift (on the button), tilt towards the user, stronger glow. */
@media (hover: hover) and (pointer: fine) {
	.auto-launcher:hover > .auto-bot { transform: rotate(-4deg); }
	.auto-launcher:hover::after { opacity: .75; }
}

/* 3. Periodic wake while the chat has never been opened (JS adds .auto-is-waking ≈ every 25–40 s, max 6×). */
.auto-launcher.auto-is-waking > .auto-bot { animation: auto-nod 1.4s var(--auto-ease); }
.auto-launcher.auto-is-waking::after { animation: auto-flash 1.4s ease-out; }
.auto-launcher.auto-is-waking .auto-bot-fx { opacity: 1; }
.auto-launcher.auto-is-waking .auto-bot-fx::before { animation: auto-scan 1.1s ease-in-out .15s both; }

/* 4. Open / wake-up (JS adds .auto-wake on .auto-root for ~0.7 s; never delays the panel). */
.auto-root.auto-wake .auto-launcher > .auto-bot { animation: auto-wakeup .7s var(--auto-ease); }
.auto-root.auto-wake .auto-launcher::after { animation: auto-flash .7s ease-out; }
.auto-root.auto-wake .auto-avatar > .auto-bot { animation: auto-avatar-in .6s var(--auto-ease) both; }
.auto-root.auto-wake .auto-avatar .auto-bot-fx { opacity: 1; }
.auto-root.auto-wake .auto-avatar .auto-bot-fx::before { animation: auto-scan .9s ease-in-out .1s both; }

/* 5. Header avatar: even softer breathing + subtle LED glow, no rotation. */
.auto-avatar { position: relative; isolation: isolate; }
.auto-avatar::before {
	content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
	box-shadow: 0 0 14px 1px color-mix(in srgb, var(--auto-yellow) 45%, transparent);
	opacity: .25; animation: auto-glow 6s ease-in-out infinite;
}
.auto-avatar .auto-bot-media { animation: auto-breathe-soft 6s ease-in-out infinite; }

/* 6. Thinking (reuses typing(): .auto-row-avatar--thinking on the typing row, .auto-is-thinking on the root). */
.auto-row-avatar { position: relative; isolation: isolate; box-shadow: 0 0 0 1px color-mix(in srgb, var(--auto-yellow) 10%, transparent); }
.auto-row-avatar--thinking::before {
	content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
	box-shadow: 0 0 10px 2px color-mix(in srgb, var(--auto-yellow) 60%, transparent);
	animation: auto-glow-fast 1.2s ease-in-out infinite;
}
.auto-row-avatar--thinking .auto-bot-media { animation: auto-think 1.2s ease-in-out infinite; }
.auto-row-avatar--thinking .auto-bot-fx,
.auto-root.auto-is-thinking .auto-avatar .auto-bot-fx { opacity: 1; }
.auto-row-avatar--thinking .auto-bot-fx::before,
.auto-root.auto-is-thinking .auto-avatar .auto-bot-fx::before { animation: auto-scan 1.6s ease-in-out infinite; }
.auto-root.auto-is-thinking .auto-avatar::before { animation-duration: 1.2s; }

/* 7. New bot message: short entrance, then static. */
.auto-row-avatar--enter > .auto-bot { animation: auto-avatar-in .45s var(--auto-ease) both; }

@keyframes auto-breathe {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
	50% { transform: translate3d(0, -1.5px, 0) scale(1.02) rotate(.6deg); }
}
@keyframes auto-breathe-soft {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(0, -1px, 0) scale(1.01); }
}
@keyframes auto-glow { 0%, 100% { opacity: .22; } 50% { opacity: .6; } }
@keyframes auto-glow-fast { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes auto-flash { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
@keyframes auto-nod {
	0%, 100% { transform: rotate(0deg) translateY(0); }
	22% { transform: rotate(-5deg) translateY(-1px); }
	48% { transform: rotate(3.5deg) translateY(0); }
	72% { transform: rotate(-1.5deg); }
}
@keyframes auto-wakeup {
	0% { transform: scale(1) rotate(0deg); }
	35% { transform: scale(1.08) rotate(-6deg); }
	70% { transform: scale(.98) rotate(2deg); }
	100% { transform: scale(1) rotate(0deg); }
}
@keyframes auto-avatar-in {
	0% { opacity: 0; transform: scale(.6) rotate(-10deg); }
	70% { opacity: 1; transform: scale(1.06) rotate(2deg); }
	100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes auto-think {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	30% { transform: translate3d(0, -1px, 0) rotate(-3deg); }
	65% { transform: translate3d(0, 0, 0) rotate(3deg); }
}
@keyframes auto-scan {
	0% { transform: translateX(-140%) skewX(-14deg); }
	100% { transform: translateX(260%) skewX(-14deg); }
}

/* ------------------------------------------------------------------ Bubble */
.auto-bubble {
	position: absolute;
	bottom: calc(var(--auto-bot-size) + 12px);
	right: 0;
	display: flex;
	align-items: flex-start;
	gap: 4px;
	width: max-content;
	max-width: min(280px, calc(100vw - 32px));
	padding: 4px 4px 4px 2px;
	background: var(--auto-card);
	border: 1px solid var(--auto-border);
	border-radius: 14px 14px 4px 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s var(--auto-ease), transform .3s var(--auto-ease);
}
.auto-pos-left .auto-bubble { right: auto; left: 0; border-radius: 14px 14px 14px 4px; }
.auto-bubble.is-visible { opacity: 1; transform: none; }
.auto-bubble::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--auto-yellow); }
.auto-bubble-text { background: none; border: 0; padding: 8px 6px 8px 14px; text-align: left; cursor: pointer; font-size: 13.5px; color: var(--auto-text); }
.auto-bubble-close { background: none; border: 0; width: 26px; height: 26px; border-radius: 8px; color: var(--auto-muted); cursor: pointer; font-size: 18px; line-height: 1; }
.auto-bubble-close:hover { color: var(--auto-text); background: rgba(255, 255, 255, .06); }

/* ------------------------------------------------------------------ Panel */
.auto-panel {
	position: absolute;
	bottom: calc(var(--auto-bot-size) + 14px);
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(var(--auto-width), calc(100vw - 2 * var(--auto-side)));
	height: min(var(--auto-max-height), calc(100vh - var(--auto-bot-size) - var(--auto-bottom) - 40px));
	height: min(var(--auto-max-height), calc(100dvh - var(--auto-bot-size) - var(--auto-bottom) - 40px));
	overflow: hidden;
	background:
		radial-gradient(140% 60% at 100% 0%, color-mix(in srgb, var(--auto-blue) 9%, transparent) 0%, transparent 60%),
		var(--auto-bg);
	border: 1px solid var(--auto-border);
	border-radius: calc(var(--auto-radius) + 4px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02) inset;
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transform-origin: bottom right;
	transition: opacity .22s var(--auto-ease), transform .22s var(--auto-ease);
}
.auto-pos-left .auto-panel { right: auto; left: 0; transform-origin: bottom left; }
.auto-panel[hidden] { display: none; }
.auto-panel.is-visible { opacity: 1; transform: none; }
.auto-panel::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px; background: linear-gradient(90deg, transparent, var(--auto-yellow), transparent); opacity: .85; }

.auto-header {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 14px 14px 16px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
	border-bottom: 1px solid var(--auto-border);
	flex: 0 0 auto;
}
.auto-avatar {
	width: 48px; height: 48px; flex: 0 0 48px;
	display: grid; place-items: center;
	border-radius: 14px;
	background: radial-gradient(120% 120% at 30% 20%, #27303b, #0e1319);
	border: 1px solid var(--auto-border);
	box-shadow: 0 0 18px color-mix(in srgb, var(--auto-blue) 18%, transparent);
}
.auto-avatar > .auto-bot { width: 40px; height: 40px; border-radius: 10px; }
.auto-avatar > .auto-bot--default { width: 100%; height: 100%; border-radius: 13px; }
.auto-heading { flex: 1 1 auto; min-width: 0; }
.auto-title { font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--auto-text); line-height: 1.1; }
.auto-subtitle { font-size: 12.5px; color: var(--auto-muted); margin: 2px 0 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: color-mix(in srgb, var(--auto-text) 85%, transparent); margin: 4px 0 0 !important; }
.auto-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #2fd27a; box-shadow: 0 0 0 3px rgba(47, 210, 122, .16); }
.auto-header-actions { display: flex; gap: 4px; align-self: flex-start; }
.auto-icon-btn {
	display: inline-grid; place-items: center;
	width: 36px; height: 36px;
	background: transparent; border: 1px solid transparent; border-radius: 10px;
	color: var(--auto-muted); cursor: pointer; text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}
.auto-icon-btn:hover { background: rgba(255, 255, 255, .06); color: var(--auto-text); border-color: var(--auto-border); }
.auto-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ Log */
.auto-log {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 14px 8px;
	scrollbar-width: thin;
	scrollbar-color: var(--auto-border) transparent;
}
.auto-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-end; animation: auto-in .25s var(--auto-ease) both; }
.auto-row-user { justify-content: flex-end; }
.auto-row-avatar { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; background: #121820; border: 1px solid var(--auto-border); display: grid; place-items: center; align-self: flex-start; }
.auto-row-avatar > .auto-bot { width: 20px; height: 20px; border-radius: 6px; }
.auto-row-avatar > .auto-bot--default { width: 100%; height: 100%; border-radius: 7px; }
.auto-row-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: calc(100% - 34px); flex: 1 1 auto; }
.auto-row-user .auto-row-body { align-items: flex-end; flex: 0 1 auto; max-width: 85%; }
@keyframes auto-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.auto-msg { padding: 10px 13px; border-radius: 14px; word-wrap: break-word; overflow-wrap: anywhere; }
.auto-msg-bot { background: var(--auto-card); border: 1px solid var(--auto-border); border-top-left-radius: 4px; align-self: flex-start; max-width: 100%; }
.auto-msg-bot a { color: var(--auto-yellow); text-decoration: underline; text-underline-offset: 2px; }
.auto-msg-bot ul, .auto-msg-bot ol { margin: 0 0 .5em 1.1em; padding: 0; }
.auto-msg-user { background: var(--auto-yellow); color: var(--auto-ink); font-weight: 600; border-bottom-right-radius: 4px; }
.auto-msg-welcome p:first-child { font-weight: 700; font-size: 15px; }
.auto-msg-typing { display: inline-flex; align-items: center; gap: 8px; color: var(--auto-muted); font-size: 13px; }
.auto-dots { display: inline-flex; gap: 3px; }
.auto-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--auto-blue); animation: auto-dot 1.2s infinite ease-in-out; }
.auto-dots span:nth-child(2) { animation-delay: .15s; }
.auto-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes auto-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ------------------------------------------------------------------ Cards (welcome + personal help) */
.auto-cards { display: grid; gap: 8px; }
.auto-card {
	display: flex; align-items: center; gap: 12px;
	width: 100%;
	padding: 12px 12px 12px 12px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--auto-card) 100%, #fff 2%), var(--auto-card));
	border: 1px solid var(--auto-border);
	border-radius: var(--auto-radius);
	text-align: left; text-decoration: none; color: var(--auto-text);
	cursor: pointer;
	transition: border-color .18s, transform .18s var(--auto-ease), box-shadow .18s;
}
.auto-card:hover { border-color: color-mix(in srgb, var(--auto-yellow) 70%, transparent); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.auto-card-icon {
	flex: 0 0 40px; width: 40px; height: 40px;
	display: grid; place-items: center;
	font-size: 19px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--auto-yellow) 12%, #0b0f14);
	border: 1px solid color-mix(in srgb, var(--auto-yellow) 30%, transparent);
}
.auto-card-bulb .auto-card-icon { box-shadow: 0 0 14px color-mix(in srgb, var(--auto-yellow) 25%, transparent); }
.auto-card-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.auto-card-title { font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--auto-text); }
.auto-card-desc { font-size: 12.5px; color: var(--auto-muted); line-height: 1.35; }
.auto-card-arrow { font-size: 22px; color: var(--auto-yellow); line-height: 1; transition: transform .18s; }
.auto-card:hover .auto-card-arrow { transform: translateX(2px); }

/* ------------------------------------------------------------------ Buttons */
.auto-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.auto-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 40px;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 800; font-size: 13px; letter-spacing: .03em; text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform .15s var(--auto-ease), filter .15s, background .15s, border-color .15s, box-shadow .15s;
}
.auto-btn-primary { background: var(--auto-yellow); color: var(--auto-ink) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--auto-yellow) 22%, transparent); }
.auto-btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.auto-btn-secondary { background: transparent; color: var(--auto-text) !important; border-color: color-mix(in srgb, var(--auto-yellow) 45%, var(--auto-border)); }
.auto-btn-secondary:hover { border-color: var(--auto-yellow); background: color-mix(in srgb, var(--auto-yellow) 8%, transparent); }
.auto-btn-ghost { background: transparent; color: var(--auto-muted) !important; }
.auto-btn-ghost:hover { color: var(--auto-text) !important; }
.auto-btn-sm { min-height: 32px; padding: 6px 12px; font-size: 11.5px; }
.auto-btn-block { width: 100%; }
.auto-btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.auto-chip {
	display: inline-flex; align-items: center;
	padding: 7px 13px;
	background: color-mix(in srgb, var(--auto-card) 80%, transparent);
	border: 1px solid var(--auto-border);
	border-radius: 999px;
	font-size: 12.5px; font-weight: 600;
	color: var(--auto-text); text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.auto-chip:hover { border-color: var(--auto-yellow); color: var(--auto-yellow); }
.auto-actions-chips { gap: 6px; }

.auto-quick {
	display: flex; gap: 6px;
	padding: 8px 14px 2px;
	overflow-x: auto;
	scrollbar-width: none;
	flex: 0 0 auto;
	-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
	mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.auto-quick::-webkit-scrollbar { display: none; }
.auto-quick:empty { display: none; }
.auto-quick .auto-chip { padding: 6px 11px; font-size: 12px; }

/* ------------------------------------------------------------------ Products */
.auto-products-wrap { display: flex; flex-direction: column; gap: 8px; }
.auto-products { display: flex; flex-direction: column; gap: 8px; }
.auto-product {
	display: flex; gap: 12px;
	padding: 10px;
	background: var(--auto-card);
	border: 1px solid var(--auto-border);
	border-radius: var(--auto-radius);
	transition: border-color .18s;
}
.auto-product:hover { border-color: color-mix(in srgb, var(--auto-yellow) 55%, transparent); }
.auto-product-media { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: #fff; display: block; }
.auto-product-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.auto-product-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1 1 auto; }
.auto-product-title { font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.3 !important; text-transform: none !important; letter-spacing: 0 !important; }
.auto-product-title a { color: var(--auto-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auto-product-title a:hover { color: var(--auto-yellow); }
.auto-product-price { font-weight: 800; color: var(--auto-yellow); font-size: 14px; }
.auto-product-price del { color: var(--auto-muted); font-weight: 500; font-size: 12px; margin-right: 4px; opacity: .9; }
.auto-product-price ins { text-decoration: none; }
.auto-product-price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.auto-product-price small { font-size: 11px; color: var(--auto-muted); font-weight: 500; }
.auto-stock { font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; color: var(--auto-muted); }
.auto-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.auto-stock.is-in { color: #3ad48a; }
.auto-stock.is-back { color: #f0b84a; }
.auto-stock.is-out { color: #ff7b7b; }
.auto-product .auto-btn { margin-top: 2px; }

/* ------------------------------------------------------------------ Forms */
.auto-msg-form { width: 100%; padding: 14px; }
.auto-form { display: flex; flex-direction: column; gap: 10px; }
.auto-field { display: flex; flex-direction: column; gap: 4px; }
.auto-field label { font-size: 12.5px; font-weight: 700; color: var(--auto-text); }
.auto-req { color: var(--auto-yellow); }
.auto-opt { color: var(--auto-muted); font-weight: 500; }
.auto-field input, .auto-field textarea {
	width: 100%;
	padding: 10px 12px;
	background: var(--auto-bg) !important;
	border: 1px solid var(--auto-border) !important;
	border-radius: 10px !important;
	color: var(--auto-text) !important;
	font-size: 16px !important; /* Prevents iOS zoom. */
	line-height: 1.35;
	box-shadow: none !important;
	resize: vertical;
}
.auto-field input:focus, .auto-field textarea:focus { border-color: var(--auto-blue) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--auto-blue) 25%, transparent) !important; }
.auto-field [aria-invalid="true"] { border-color: #ff6b6b !important; }
.auto-field-error { font-size: 12px; color: #ff8a8a; min-height: 0; }
.auto-field-error:empty { display: none; }
.auto-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.auto-form-note { font-size: 11.5px; color: var(--auto-muted); }
.auto-form-status { font-size: 12.5px; color: #ff8a8a; }
.auto-form-status:empty { display: none; }
.auto-closed { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--auto-yellow) 9%, transparent); border: 1px solid color-mix(in srgb, var(--auto-yellow) 30%, transparent); font-size: 13px; }
.auto-next-open { font-weight: 700; margin-top: 4px !important; }
.auto-number { color: var(--auto-yellow); letter-spacing: .04em; }
.auto-turnstile:empty { display: none; }

/* ------------------------------------------------------------------ Composer */
.auto-composer {
	display: flex; align-items: flex-end; gap: 8px;
	margin: 8px 12px 0;
	padding: 6px 6px 6px 14px;
	background: var(--auto-card);
	border: 1px solid var(--auto-border);
	border-radius: 18px;
	flex: 0 0 auto;
	transition: border-color .15s, box-shadow .15s;
}
.auto-composer:focus-within { border-color: color-mix(in srgb, var(--auto-blue) 70%, var(--auto-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--auto-blue) 18%, transparent); }
.auto-input {
	flex: 1 1 auto;
	min-height: 40px; max-height: 120px;
	padding: 9px 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	resize: none;
	color: var(--auto-text) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	outline: none !important;
}
.auto-input::placeholder { color: var(--auto-muted); opacity: 1; }
.auto-send {
	flex: 0 0 40px; width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 0; border-radius: 12px;
	background: var(--auto-yellow); color: var(--auto-ink);
	cursor: pointer;
	transition: transform .15s var(--auto-ease), filter .15s;
}
.auto-send:hover { transform: translateY(-1px); filter: brightness(1.07); }
.auto-send .auto-icon { fill: currentColor; stroke: currentColor; stroke-width: 1.4; width: 18px; height: 18px; }

.auto-footer { display: flex; justify-content: center; padding: 6px 12px 10px; flex: 0 0 auto; }
.auto-help-link {
	display: inline-flex; align-items: center; gap: 6px;
	background: none; border: 0; padding: 4px 8px; border-radius: 8px;
	color: var(--auto-muted); font-size: 12px; font-weight: 600;
	cursor: pointer;
}
.auto-help-link .auto-icon { width: 15px; height: 15px; }
.auto-help-link:hover { color: var(--auto-yellow); }

/* ------------------------------------------------------------------ Bulb guide inside Auto */
.auto-frame { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: var(--auto-bg); animation: auto-in .2s var(--auto-ease); }
.auto-frame-bar { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--auto-border); }
.auto-frame-title { flex: 1 1 auto; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
.auto-frame iframe { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
.auto-panel.has-frame { width: min(560px, calc(100vw - 2 * var(--auto-side))); }

/* ------------------------------------------------------------------ Mobile */
@media (max-width: 600px) {
	.auto-root { bottom: calc(var(--auto-bottom-m) + env(safe-area-inset-bottom, 0px)); }
	.auto-root.auto-pos-right { right: calc(12px + env(safe-area-inset-right, 0px)); }
	.auto-root.auto-pos-left { left: calc(12px + env(safe-area-inset-left, 0px)); }
	.auto-panel {
		width: calc(100vw - 24px);
		height: min(var(--auto-max-height), calc(100dvh - var(--auto-bot-size) - var(--auto-bottom-m) - 32px));
	}
	.auto-pos-right .auto-panel { right: 0; }

	.auto-mobile-full .auto-panel {
		position: fixed;
		top: var(--auto-vtop, 0);
		left: 0; right: 0; bottom: auto;
		width: 100vw;
		height: 100vh;
		height: var(--auto-vh, 100dvh);
		max-height: none;
		border-radius: 0;
		border: 0;
		padding-top: env(safe-area-inset-top, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		transform: translateY(16px);
	}
	.auto-mobile-full .auto-panel.is-visible { transform: none; }
	.auto-mobile-full .auto-panel.has-frame { width: 100vw; }
	.auto-mobile-full.is-open .auto-launcher { visibility: hidden; }
	.auto-mobile-full .auto-header { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
	.auto-log { padding: 14px 12px 8px; }
	.auto-bubble { max-width: calc(100vw - 32px); }
	.auto-card { padding: 11px; }
}

/* ------------------------------------------------------------------ Motion & contrast preferences */
@media (prefers-reduced-motion: reduce) {
	.auto-root *, .auto-root *::before, .auto-root *::after { animation: none !important; transition: none !important; }
	/* Mascot: no loops, no scanner, no movement – hover keeps a simple static glow. */
	.auto-bot-fx { display: none !important; }
	.auto-launcher:hover, .auto-launcher:hover > .auto-bot, .auto-bot, .auto-bot-media { transform: none !important; }
	.auto-row-avatar > .auto-bot--default .auto-bot-img { transform: scale(1.9) !important; }
}
@media (forced-colors: active) {
	.auto-btn, .auto-card, .auto-chip, .auto-launcher { border: 1px solid ButtonText; }
}
@media print { .auto-root { display: none !important; } }