#sia-chat {
	--sia-accent: #a57254;
	--sia-ink: #30221d;
	--sia-muted: #65534a;
	--sia-line: #e2d4c9;
	--sia-paper: #fffdf9;
	--sia-left: auto;
	--sia-right: max(1rem, env(safe-area-inset-right));
	--sia-bottom: max(1rem, env(safe-area-inset-bottom));
	--sia-launcher-size: 112px;
	--sia-dialog-offset: var(--sia-bottom);
	--sia-viewport-height: 100dvh;
	--sia-panel-height: min(46rem, calc(var(--sia-viewport-height) - var(--sia-dialog-offset) - 1rem));
	color: var(--sia-ink);
	font: 400 1rem/1.45 system-ui, sans-serif;
}
#sia-chat[data-position="left"] {
	--sia-left: max(1rem, env(safe-area-inset-left));
	--sia-right: auto;
}
#sia-chat [hidden] { display: none !important; }
#sia-chat button {
	font: 600 .875rem/1.25 system-ui, sans-serif;
	min-height: 44px;
	padding: .55rem .9rem;
	border: 1px solid var(--sia-line);
	border-radius: .75rem;
	background: var(--sia-paper);
	color: var(--sia-ink);
	cursor: pointer;
}
#sia-chat button:disabled { opacity: .65; cursor: default; }
#sia-chat :focus-visible { outline: 3px solid #175a9c; outline-offset: 2px; }

#sia-chat .sia-launcher {
	position: fixed;
	z-index: 1000;
	inset: auto var(--sia-right) var(--sia-bottom) var(--sia-left);
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--sia-launcher-size);
	height: var(--sia-launcher-size);
	padding: 3px;
	border-radius: 50%;
	box-shadow: 0 .4rem 1.3rem #30221d45;
}
#sia-chat .sia-launcher-avatar {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid #ead0b5;
	border-radius: 50%;
	background: #fff0de;
	overflow: hidden;
}
#sia-chat .sia-launcher-ai {
	position: absolute;
	right: -6px;
	bottom: -2px;
	padding: .16rem .44rem .21rem;
	border: 1px solid #f8e5d1;
	border-radius: .48rem;
	background: #ddb590;
	color: #39251f;
	box-shadow: 0 .14rem .4rem #30221d38;
	font: 700 1.25rem/1 Georgia, serif;
}
#sia-chat .sia-launcher-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
	#sia-chat .sia-launcher:not([aria-expanded="true"]) .sia-launcher-avatar img {
		animation: sia-avatar-greet 750ms ease-in-out 650ms 2;
		transition: transform 180ms ease-out;
	}
	#sia-chat .sia-launcher:hover .sia-launcher-avatar img,
	#sia-chat .sia-launcher:focus-visible .sia-launcher-avatar img {
		transform: translateY(-2px) rotate(-8deg);
	}
}
@keyframes sia-avatar-greet {
	0%, 100% { transform: none; }
	45% { transform: translateY(-2px) rotate(-10deg); }
	72% { transform: rotate(5deg); }
}
#sia-chat .sia-launcher,
#sia-chat .sia-send { background: #482d24; border-color: #482d24; color: #fff; }

#sia-dialog {
	position: fixed;
	z-index: 1001;
	inset: auto var(--sia-right) calc(var(--sia-dialog-offset) + var(--sia-viewport-inset, 0px)) var(--sia-left);
	margin: 0;
	box-sizing: border-box;
	padding: 0;
	border: 1px solid var(--sia-line);
	border-radius: 1.4rem;
	width: min(32rem, calc(100% - 2rem));
	max-width: none;
	max-height: var(--sia-panel-height);
	overflow: hidden;
	background: var(--sia-paper);
	color: inherit;
	box-shadow: 0 1rem 3.5rem #30221d50;
}
#sia-dialog::backdrop { background: #2e211c85; }
#sia-chat .sia-panel {
	display: flex;
	flex-direction: column;
	height: calc(var(--sia-panel-height) - 2px);
	min-height: 0;
	padding: clamp(.65rem, 3vw, 1.25rem);
	gap: .65rem;
	box-sizing: border-box;
	overflow: hidden;
	border-block-start: .25rem solid var(--sia-accent);
}
#sia-chat .sia-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: .65rem;
	padding-block-end: .45rem;
	border-block-end: 1px solid var(--sia-line);
}
#sia-chat .sia-brand {
	display: grid;
	gap: .18rem;
}
#sia-chat .sia-logo {
	display: block;
	width: min(8rem, 100%);
	height: auto;
	margin-block-end: .28rem;
}
#sia-chat h2 { margin: 0; color: inherit; font: 600 1.2rem/1.2 Georgia, serif; overflow-wrap: anywhere; }
#sia-chat .sia-subtitle { color: var(--sia-muted); font-size: .8rem; }
#sia-chat .sia-header-actions { display: flex; gap: .3rem; }
#sia-chat .sia-close, #sia-chat .sia-expand { min-width: 44px; padding: .45rem; border-radius: 50%; font-size: 1.25rem; }
#sia-chat .sia-header, #sia-chat #sia-privacy, #sia-chat .sia-form { flex-shrink: 0; }
#sia-chat p { margin: 0; overflow-wrap: anywhere; }
#sia-chat #sia-privacy {
	padding: .5rem .65rem;
	border-radius: .65rem;
	background: #f7efe7;
	color: var(--sia-muted);
	font-size: .78rem;
}
#sia-chat .sia-log {
	flex: 1 1 auto;
	min-height: 0;
	scrollbar-gutter: stable;
	overflow: auto;
	overscroll-behavior: contain;
	padding: .65rem;
	background: #f8f2ec;
	border: 1px solid var(--sia-line);
	border-radius: 1rem;
}
#sia-chat .sia-turn {
	max-width: 100%;
	width: fit-content;
	box-sizing: border-box;
	margin-block: .25rem .55rem;
	padding: .55rem .7rem;
	background: #fffdf9;
	border: 1px solid var(--sia-line);
	border-radius: .25rem .9rem .9rem .9rem;
}
#sia-chat .sia-turn strong { display: block; color: var(--sia-muted); font-size: .78rem; }
#sia-chat .sia-turn > p { line-height: 1.55; white-space: pre-line; }
#sia-chat .sia-user {
	max-width: 90%;
	margin-inline-start: auto;
	background: #f1e0d3;
	border-radius: .9rem .25rem .9rem .9rem;
}
#sia-chat .sia-card {
	margin-block-start: .55rem;
	padding: .65rem;
	background: #fff;
	border: 1px solid var(--sia-line);
	border-inline-start: .2rem solid var(--sia-accent);
	border-radius: .65rem;
}
#sia-chat .sia-card img { display: block; width: 64px; height: 64px; object-fit: contain; }
#sia-chat .sia-card a { font-weight: 650; }
#sia-chat .sia-price { color: #482d24; font-size: 1.12rem; font-weight: 700; }
#sia-chat .sia-stock { color: #36573b; font-size: .84rem; }
#sia-chat a { color: #6b3b27; text-decoration: underline; overflow-wrap: anywhere; }
#sia-chat .sia-error { color: #8b2621; max-height: 25%; overflow: auto; flex-shrink: 0; }
#sia-chat .sia-status:empty, #sia-chat .sia-error:empty { position: absolute; }
#sia-chat .sia-form { display: grid; gap: .35rem; margin: 0; }
#sia-chat .sia-form label { font-size: .88rem; font-weight: 650; }
#sia-chat .sia-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
#sia-chat textarea {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	min-height: 48px;
	max-height: 5rem;
	padding: .5rem .65rem;
	font: inherit;
	font-size: max(1rem, 16px);
	background: #fff;
	color: var(--sia-ink);
	border: 1px solid #a79283;
	border-radius: .75rem;
	resize: vertical;
}

@media (max-width: 640px) {
	#sia-chat { --sia-panel-height: calc(var(--sia-viewport-height) - var(--sia-bottom) - .5rem); }
	#sia-chat .sia-expand { display: none; }
	#sia-dialog {
		inset: auto max(.5rem, env(safe-area-inset-right)) calc(var(--sia-bottom) + var(--sia-viewport-inset, 0px)) max(.5rem, env(safe-area-inset-left));
		width: auto;
	}
}

@media (min-width: 641px) {
	#sia-chat.sia-expanded {
		--sia-dialog-offset: var(--sia-bottom);
		--sia-panel-height: min(56rem, calc(var(--sia-viewport-height) - var(--sia-bottom) - 1rem));
	}
	#sia-chat.sia-expanded #sia-dialog { width: min(52rem, calc(100% - 2rem)); }
}

#sia-chat.sia-viewport-short .sia-panel { gap: .4rem; padding: .5rem; }
#sia-chat.sia-viewport-short .sia-logo, #sia-chat.sia-viewport-short .sia-subtitle { display: none; }
#sia-chat.sia-viewport-short #sia-privacy { padding: .35rem .5rem; font-size: .72rem; }
#sia-chat.sia-viewport-tiny .sia-panel { overflow: auto; }
#sia-chat.sia-viewport-tiny .sia-log { flex: none; height: 10rem; }

/* Consultation experience: the welcome screen uses the same reading area. */
#sia-chat .sia-welcome {
	flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
	padding: .7rem; border: 1px solid var(--sia-line); border-radius: 1rem;
	background: linear-gradient(145deg, #fffdf9, #f6ebe1);
}
#sia-chat .sia-welcome-hero { display: flex; align-items: center; gap: .85rem; margin-block-end: .65rem; }
#sia-chat .sia-welcome-avatar { width: 64px; height: 64px; flex: 0 0 64px; object-fit: cover; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 .2rem .8rem #482d2420; }
#sia-chat h3 { margin: 0; color: var(--sia-ink); font: 600 1.35rem/1.2 Georgia, serif; overflow-wrap: anywhere; }
#sia-chat .sia-welcome-copy { font-size: .9rem; color: var(--sia-muted); margin-block-end: .75rem; }
#sia-chat .sia-starts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
#sia-chat .sia-start { display: flex; flex-direction: column; justify-content: center; gap: .3rem; min-height: 88px; text-align: start; padding: .65rem; border-color: #ddc6b4; background: #fffdf9; box-shadow: 0 .15rem .35rem #482d2408; }
#sia-chat .sia-start strong { font-size: .9rem; color: #482d24; }
#sia-chat .sia-start p, #sia-chat .sia-start span { font-weight: 400; font-size: .75rem; line-height: 1.35; color: var(--sia-muted); }
#sia-chat .sia-start:hover, #sia-chat .sia-choices button:hover { background: #f6e9dd; border-color: var(--sia-accent); }
#sia-chat .sia-preferences { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
#sia-chat .sia-preferences p { flex: 1 1 auto; min-width: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: .78rem; color: var(--sia-muted); }
#sia-chat .sia-preferences button { font-size: .75rem; padding: .35rem .45rem; }
#sia-chat .sia-step, #sia-chat .sia-hint, #sia-chat .sia-guidance { margin-block-start: .45rem; color: var(--sia-muted); font-size: .78rem; }
#sia-chat .sia-choices { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .65rem; }
#sia-chat .sia-choices button { background: #fff; border-color: #cdb6a3; text-align: start; }
#sia-chat .sia-choices button:disabled { opacity: .6; }
#sia-chat .sia-products { min-width: 0; margin-block: .6rem; }
#sia-chat .sia-card-track { display: flex; width: 100%; box-sizing: border-box; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: .1rem .1rem .45rem; scrollbar-width: thin; }
#sia-chat .sia-card-track > .sia-card { flex: 0 0 calc(100% - 1rem); box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; padding: .8rem; border-inline-start: 1px solid var(--sia-line); border-radius: .9rem; }
#sia-chat .sia-card-track .sia-card img { width: 96px; height: 96px; align-self: center; margin-block-end: .6rem; }
#sia-chat .sia-card-title { display: block; font-size: .95rem; line-height: 1.45; }
#sia-chat .sia-card .sia-price { margin-block-start: .4rem; }
#sia-chat .sia-reason { margin-block-start: .45rem; font-size: .86rem; }
#sia-chat .sia-usage { margin-block-start: .45rem; font-size: .75rem; color: var(--sia-muted); }
#sia-chat a.sia-product-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .75rem; box-sizing: border-box; margin-block-start: .7rem; border-radius: .6rem; background: #482d24; color: white; text-decoration: none; font-size: .85rem; }
#sia-chat .sia-card-controls { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-block-start: .3rem; font-size: .8rem; }
#sia-chat .sia-card-controls button { padding: .25rem .6rem; min-width: 44px; }
#sia-chat .sia-turn:has(.sia-products) { width: 100%; }
@media (min-width: 641px) {
	#sia-chat.sia-expanded .sia-card-track > .sia-card { flex-basis: calc(50% - 6px); }
}
#sia-chat.sia-viewport-short .sia-welcome-hero { gap: .5rem; }
#sia-chat.sia-viewport-short .sia-welcome-avatar { width: 44px; height: 44px; flex-basis: 44px; }
#sia-chat.sia-viewport-short h3 { font-size: 1.15rem; }
#sia-chat.sia-viewport-tiny .sia-welcome { flex: none; height: 14rem; }

@media (max-width: 400px) {
	#sia-chat .sia-start { min-height: 72px; }
	#sia-chat .sia-start p, #sia-chat .sia-start span { display: none; }
	#sia-chat .sia-welcome-avatar { width: 48px; height: 48px; flex-basis: 48px; }
	#sia-chat .sia-welcome h3 { font-size: 1.2rem; }
	#sia-chat .sia-welcome-copy { font-size: .85rem; line-height: 1.4; }
}

#sia-chat .sia-preferences { flex-wrap: wrap; }
#sia-chat .sia-preferences p { flex-basis: 40%; }

/* Identity-led welcome: airy portrait, real product fan, clear starting actions. */
#sia-dialog { width: min(39rem, calc(100% - 2rem)); background: #fffdfa; border-radius: 1.65rem; }
#sia-chat .sia-panel { padding: 1rem; gap: .55rem; }
#sia-chat .sia-brand { position: relative; padding-left: 3.5rem; min-height: 48px; align-content: center; }
#sia-chat .sia-header-avatar { position: absolute; left: 0; top: 0; width: 46px; height: 46px; object-fit: cover; border-radius: 50%; border: 1px solid #e6cdb8; }
#sia-chat .sia-logo { width: 5.3rem; margin: 0 0 .2rem; }
#sia-chat h2 { font-family: system-ui, sans-serif; font-size: 1rem; font-weight: 700; }
#sia-chat .sia-subtitle { font-size: .72rem; }
#sia-chat .sia-welcome { border: 0; border-radius: 1rem; padding: .8rem .6rem; background: radial-gradient(ellipse at top, #f3e2cf60, transparent 65%); text-align: center; }
#sia-chat .sia-welcome-hero { flex-direction: column; justify-content: center; gap: .55rem; margin-bottom: .8rem; }
#sia-chat .sia-welcome-avatar { width: 90px; height: 90px; flex-basis: 90px; border: 4px solid #fff; box-shadow: 0 0 0 1px #d7b99a, 0 .5rem 1.5rem #6b3b2728; }
#sia-chat .sia-welcome h3 { font: 750 1.5rem/1.2 system-ui, sans-serif; max-width: 95%; }
#sia-chat .sia-welcome-copy { max-width: 30rem; margin: 0 auto .8rem; font-size: .94rem; line-height: 1.55; }
#sia-chat .sia-showcase-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #8d6247; margin-bottom: .6rem; }
#sia-chat .sia-product-fan { display: flex; justify-content: center; align-items: center; padding: .3rem .4rem 1rem; margin: 0 auto .5rem; }
#sia-chat .sia-product-fan a { display: flex; flex-direction: column; flex: 0 1 110px; min-width: 0; padding: .35rem; background: #fff; border: 1px solid #eee5db; border-radius: .8rem; text-decoration: none; box-shadow: 0 .3rem .8rem #40241924; transform: rotate(-8deg); transition: transform .15s ease; }
#sia-chat .sia-product-fan a + a { margin-left: -14px; }
#sia-chat .sia-product-fan a:nth-child(2) { transform: rotate(3deg); }
#sia-chat .sia-product-fan a:nth-child(3) { transform: rotate(-4deg); }
#sia-chat .sia-product-fan a:nth-child(4) { transform: rotate(9deg); }
#sia-chat .sia-product-fan a:hover, #sia-chat .sia-product-fan a:focus-visible { transform: translateY(-6px); z-index: 2; }
#sia-chat .sia-product-fan img { width: 100%; height: 86px; object-fit: contain; }
#sia-chat .sia-product-fan span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .68rem; line-height: 1.5; padding-top: .3rem; }
#sia-chat .sia-starts { gap: .5rem; }
#sia-chat .sia-start { min-height: 48px; text-align: center; align-items: center; border-radius: 1.4rem; padding: .6rem .7rem; border: 1px solid #dec6af; box-shadow: 0 .15rem .4rem #482d240a; }
#sia-chat .sia-start strong { font-size: .84rem; }
#sia-chat .sia-start p, #sia-chat .sia-start span { display: none; }
#sia-chat .sia-start:first-child { background: #53382b; color: #fff; border-color: #53382b; }
#sia-chat .sia-start:first-child strong { color: #fff; }
#sia-chat .sia-form label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
#sia-chat textarea { border-radius: 1rem; min-height: 112px; height: 112px; max-height: 12rem; overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; white-space: pre-wrap; background: #fff; }
#sia-chat.sia-viewport-short textarea { min-height: 88px; height: 88px; }
@media (max-width: 640px) {
 #sia-dialog { width: auto; }
 #sia-chat .sia-welcome-avatar { width: 64px; height: 64px; flex-basis: 64px; }
 #sia-chat .sia-welcome h3 { font-size: 1.2rem; }
 #sia-chat .sia-welcome-copy { font-size: .84rem; line-height: 1.4; }
 #sia-chat .sia-product-fan img { height: 66px; }
 #sia-chat .sia-product-fan { padding-bottom: .7rem; }
 #sia-chat .sia-panel { padding: .65rem; }
}
@media (prefers-reduced-motion: reduce) { #sia-chat .sia-product-fan a { transition: none; } }

#sia-chat .sia-welcome-hero { margin-bottom: .55rem; }
#sia-chat .sia-welcome-avatar { width: 100px; height: 100px; flex-basis: 100px; }
#sia-chat .sia-product-fan img { height: 70px; }
#sia-chat .sia-product-fan { padding-bottom: .7rem; }
#sia-chat a.sia-start { text-decoration: none; font: 600 .84rem/1.25 system-ui, sans-serif; box-sizing: border-box; color: #482d24; }
@media (max-width: 640px) {
 #sia-chat .sia-welcome-avatar { width: 60px; height: 60px; flex-basis: 60px; }
 #sia-chat .sia-product-fan img { height: 60px; }
 #sia-chat .sia-welcome { padding-top: .4rem; }
}

#sia-chat .sia-start.sia-context { grid-column: 1 / -1; min-height: 44px; padding: .4rem; }

/* Normal flow prevents action buttons from covering product cards. */
#sia-chat .sia-starts { position: static; padding: .45rem .15rem .2rem; background: #fffdf9; }
/* Compact spacing follows the bounded panel at every viewport height. */
 #sia-chat .sia-welcome { padding-top: .3rem; padding-bottom: .25rem; }
 #sia-chat .sia-welcome-hero { gap: .25rem; margin-bottom: .3rem; }
 #sia-chat .sia-welcome-avatar { width: 62px; height: 62px; flex-basis: 62px; }
 #sia-chat .sia-welcome h3 { font-size: 1.2rem; }
 #sia-chat .sia-welcome-copy { margin-bottom: .3rem; font-size: .85rem; line-height: 1.35; }
 #sia-chat .sia-showcase-label { margin-bottom: .2rem; }
 #sia-chat .sia-product-fan { padding: .1rem .4rem .35rem; margin-bottom: .15rem; }
 #sia-chat .sia-product-fan img { height: 48px; }
#sia-chat .sia-product-fan { padding-bottom: .7rem; }
@media (max-width: 640px) {
 #sia-chat .sia-welcome-avatar { width: 50px; height: 50px; flex-basis: 50px; }
 #sia-chat .sia-welcome-hero { gap: .15rem; margin-bottom: .15rem; }
 #sia-chat .sia-welcome h3 { font-size: 1.1rem; line-height: 1.15; }
 #sia-chat .sia-welcome-copy { font-size: .82rem; line-height: 1.3; margin-bottom: .15rem; }
}