/* ASB Smart Guide — front widget. All knobs are CSS vars set on #asb-sg-root.
   Design language: gradient duotone derived from the single primary color
   (relative-color hue shift with safe fallback), soft layered shadows,
   floating pill input, spring-ish entrances. */

#asb-sg-root {
	--asb-sg-primary: #2563eb;
	--asb-sg-on-primary: #fff;
	--asb-sg-bg: #fff;
	--asb-sg-radius: 16px;
	--asb-sg-bottom: 24px;
	--asb-sg-side: 24px;
	/* Derived (overridden below when relative color syntax is supported). */
	--asb-sg-accent: var(--asb-sg-primary);
	--asb-sg-glow: color-mix(in srgb, var(--asb-sg-primary) 38%, transparent);
	--asb-sg-tint: color-mix(in srgb, var(--asb-sg-primary) 7%, #f7f8fc);
	--asb-sg-grad: linear-gradient(135deg, var(--asb-sg-primary), var(--asb-sg-accent));
	position: fixed;
	/* --asb-sg-lift is the fixed-bar dodge offset managed by widget.js; it is
	   additive in every breakpoint (the 640px block below re-declares bottom). */
	bottom: calc(var(--asb-sg-bottom) + var(--asb-sg-lift, 0px));
	/* Chat-widget convention (Intercom-class): above theme fixed footers and
	   cookie bars, which routinely sit at 99999+. Internal stacking is scoped
	   to this root's own context, so only the page-level order changes. */
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
#asb-sg-root,
#asb-sg-root * {
	box-sizing: border-box;
}
html.asb-sg-chat-open,
body.asb-sg-chat-open {
	overflow: hidden !important;
	overscroll-behavior: none;
}
@supports (color: hsl(from red h s l)) {
	#asb-sg-root {
		--asb-sg-accent: hsl(from var(--asb-sg-primary) calc(h + 32) calc(s * 1) calc(l * 1.12));
	}
}
#asb-sg-root.asb-sg-pos-right { right: var(--asb-sg-side); }
#asb-sg-root.asb-sg-pos-left { left: var(--asb-sg-side); align-items: flex-start; }

/* ---------- Theme isolation ----------
   Themes style bare button/textarea/a with compound selectors (".page button"
   beats a single class), so every rule in this file is #asb-sg-root-prefixed —
   that alone beats any theme rule short of !important. The cosmetic-only props
   below are forced with !important as cheap insurance against the rare theme
   that does use !important on bare buttons; they never affect our own layout.
   Box-model props (border/background/padding/box-shadow) are left plain so our
   component rules can still override this baseline. */
#asb-sg-root button,
#asb-sg-root textarea,
#asb-sg-root select {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	outline: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	font: inherit;
	color: inherit;
}
#asb-sg-root button,
#asb-sg-root textarea {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
#asb-sg-root a { text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important; }

/* ---------- Built-in back-to-top (stacks above the launcher) ---------- */
#asb-sg-root .asb-sg-top {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--asb-sg-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(16, 24, 40, .12), 0 8px 24px rgba(16, 24, 40, .16);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
#asb-sg-root .asb-sg-top-visible { opacity: 1; transform: none; pointer-events: auto; }
#asb-sg-root .asb-sg-top:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(16, 24, 40, .16),
0 10px 30px var(--asb-sg-glow); }

/* ---------- Launcher: gradient orb with breathing glow ---------- */
#asb-sg-root .asb-sg-launcher {
	position: relative;
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 50%;
	background: var(--asb-sg-grad);
	color: var(--asb-sg-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow:
		0 4px 12px rgba(16, 24, 40, .18),
		0 10px 36px var(--asb-sg-glow);
	transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, opacity .18s ease;
	animation: asb-sg-breathe 3.2s ease-in-out infinite;
}
#asb-sg-root .asb-sg-launcher:hover {
	transform: translateY(-2px) scale(1.07);
	box-shadow:
		0 8px 18px rgba(16, 24, 40, .22),
		0 14px 44px var(--asb-sg-glow);
}
#asb-sg-root .asb-sg-launcher:active { transform: scale(.96); }
#asb-sg-root .asb-sg-launcher.asb-sg-hidden { opacity: 0; pointer-events: none; }
#asb-sg-root.asb-front-hub-active .asb-sg-launcher,
#asb-sg-root.asb-front-hub-active .asb-sg-cta {
	display: none !important;
}

/* ---------- ASB Front Hub: shared family launcher ---------- */
#asb-sg-root .asb-front-hub[hidden] { display: none !important; }
#asb-sg-root .asb-front-hub {
	position: relative;
	display: flex;
	justify-content: flex-end;
	max-width: min(240px, calc(100vw - 20px));
}
#asb-sg-root.asb-sg-pos-left .asb-front-hub { justify-content: flex-start; }
#asb-sg-root .asb-front-hub-main {
	position: relative;
	width: 54px;
	height: 54px;
	border: 0;
	border-radius: 50%;
	background: var(--asb-sg-grad);
	color: var(--asb-sg-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow:
		0 4px 12px rgba(16, 24, 40, .18),
		0 10px 36px var(--asb-sg-glow);
	transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
	animation: asb-sg-breathe 3.2s ease-in-out infinite;
}
#asb-sg-root .asb-front-hub-main:hover {
	transform: translateY(-2px) scale(1.07);
	box-shadow:
		0 8px 18px rgba(16, 24, 40, .22),
		0 14px 44px var(--asb-sg-glow);
}
#asb-sg-root .asb-front-hub-main:active { transform: scale(.96); }
#asb-sg-root .asb-front-hub.is-open .asb-front-hub-main {
	transform: scale(.98);
	box-shadow: 0 8px 22px rgba(16, 24, 40, .24), 0 18px 48px var(--asb-sg-glow);
}
#asb-sg-root .asb-front-hub-menu {
	position: absolute;
	right: 0;
	bottom: 64px;
	display: grid;
	gap: 6px;
	width: min(224px, calc(100vw - 28px));
	padding: 2px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px) scale(.96);
	transform-origin: bottom right;
	transition: opacity .18s ease, transform .18s ease;
}
#asb-sg-root.asb-sg-pos-left .asb-front-hub-menu {
	right: auto;
	left: 0;
	transform-origin: bottom left;
}
#asb-sg-root .asb-front-hub.is-open .asb-front-hub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}
#asb-sg-root .asb-front-hub-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	padding: 6px 10px 6px 7px;
	border: 1px solid rgba(16, 24, 40, .08);
	border-radius: 999px;
	background: rgba(255, 255, 255, .96);
	color: #1f2937;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
	backdrop-filter: blur(10px);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#asb-sg-root .asb-front-hub-item:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--asb-sg-primary) 30%, rgba(16, 24, 40, .08));
	box-shadow: 0 10px 28px rgba(16, 24, 40, .18);
}
#asb-sg-root .asb-front-hub-icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--asb-sg-tint);
	color: var(--asb-sg-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
}
#asb-sg-root .asb-front-hub-icon svg {
	display: block;
	width: 17px;
	height: 17px;
}
#asb-sg-root .asb-front-hub-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
	font-size: 12px;
}
#asb-sg-root .asb-front-hub-badge {
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

/* ---------- Launcher greeting bubble ("Ask about this site") ---------- */
#asb-sg-root .asb-sg-cta {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 260px;
	padding: 8px 9px;
	background: #fff;
	color: #1f2937;
	border: 1px solid rgba(16, 24, 40, .06);
	border-left: 3px solid var(--asb-sg-primary);
	border-radius: 15px;
	box-shadow: 0 6px 20px rgba(16, 24, 40, .16);
	font-size: 13px;
	line-height: 1.45;
	opacity: 0;
	transform: translateY(8px) scale(.96);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity .28s ease, transform .28s ease;
	position: relative;
}
#asb-sg-root.asb-sg-pos-left .asb-sg-cta { transform-origin: bottom left; }
#asb-sg-root .asb-sg-cta.asb-sg-cta-show { opacity: 1; transform: none; pointer-events: auto; }
#asb-sg-root .asb-sg-cta-inline {
	position: absolute;
	right: 72px;
	bottom: 7px;
	/* The root is only as wide as the launcher orb, so an absolutely
	   positioned box with right:72px has NEGATIVE shrink-to-fit space and
	   collapses to one character per line. A definite max-content width
	   (capped by max-width below) sizes it by its text instead. */
	width: max-content;
	max-width: min(260px, calc(100vw - var(--asb-sg-side) - 96px));
	transform: translateX(8px) scale(.96);
	transform-origin: right center;
}
#asb-sg-root.asb-sg-pos-left .asb-sg-cta-inline {
	right: auto;
	left: 72px;
	transform: translateX(-8px) scale(.96);
	transform-origin: left center;
}
#asb-sg-root .asb-sg-cta-inline.asb-sg-cta-show { transform: none; }
/* Little tail pointing down toward the launcher. */
#asb-sg-root .asb-sg-cta::after {
	content: "";
	position: absolute;
	bottom: -5px;
	right: 22px;
	width: 12px;
	height: 12px;
	background: #fff;
	transform: rotate(45deg);
	box-shadow: 3px 3px 6px rgba(16, 24, 40, .08);
}
#asb-sg-root.asb-sg-pos-left .asb-sg-cta::after { right: auto; left: 22px; }
#asb-sg-root .asb-sg-cta-inline::after {
	bottom: 19px;
	right: -5px;
	box-shadow: 3px -3px 6px rgba(16, 24, 40, .08);
}
#asb-sg-root.asb-sg-pos-left .asb-sg-cta-inline::after {
	right: auto;
	left: -5px;
	box-shadow: -3px 3px 6px rgba(16, 24, 40, .08);
}
#asb-sg-root .asb-sg-cta-main {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	cursor: pointer;
	text-align: left;
}
#asb-sg-root .asb-sg-cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	color: var(--asb-sg-primary);
	background: color-mix(in srgb, var(--asb-sg-primary) 10%, #fff);
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-cta-body {
	display: grid;
	gap: 1px;
	min-width: 0;
}
#asb-sg-root .asb-sg-cta-kicker {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.1;
	color: #667085;
	text-transform: uppercase;
}
#asb-sg-root .asb-sg-cta-text {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	color: inherit;
	overflow-wrap: anywhere;
}
#asb-sg-root .asb-sg-cta-x {
	background: none;
	border: 0;
	padding: 0 2px;
	margin: 0;
	font-size: 16px;
	line-height: 1;
	color: #94a3b8;
	cursor: pointer;
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-cta-x:hover { color: #475569; }
@media (prefers-reduced-motion: reduce) {
	#asb-sg-root .asb-sg-cta { transition: opacity .2s ease; transform: none; }
}
@keyframes asb-sg-breathe {
	0%, 100% { box-shadow: 0 4px 12px rgba(16, 24, 40, .18), 0 10px 36px var(--asb-sg-glow); }
	50% { box-shadow: 0 4px 12px rgba(16, 24, 40, .18), 0 10px 22px var(--asb-sg-glow); }
}

/* ---------- Panel ---------- */
/* The hidden attribute must beat our display:flex (UA styles lose to author styles). */
#asb-sg-root .asb-sg-panel[hidden] { display: none !important; }
#asb-sg-root .asb-sg-panel {
	position: absolute;
	bottom: 0;
	width: 384px;
	max-width: calc(100vw - 32px);
	height: 600px;
	max-height: calc(100vh - 48px - var(--asb-sg-bottom) - var(--asb-sg-lift, 0px));
	background: var(--asb-sg-bg);
	border-radius: clamp(12px, calc(var(--asb-sg-radius) + 6px), 26px);
	box-shadow:
		0 2px 8px rgba(16, 24, 40, .08),
		0 24px 80px rgba(16, 24, 40, .28),
		0 12px 56px var(--asb-sg-glow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: asb-sg-pop .32s cubic-bezier(.21, 1.02, .55, 1);
	transform-origin: bottom right;
}
#asb-sg-root.asb-sg-pos-right .asb-sg-panel { right: 0; }
#asb-sg-root.asb-sg-pos-left .asb-sg-panel { left: 0; transform-origin: bottom left; }
@keyframes asb-sg-pop {
	from { opacity: 0; transform: translateY(16px) scale(.96); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	#asb-sg-root .asb-sg-panel,
	#asb-sg-root .asb-sg-launcher,
	#asb-sg-root .asb-sg-row { animation: none !important; }
	#asb-sg-root .asb-sg-launcher { transition: none; }
}

/* ---------- Header: gradient + aurora highlights ---------- */
#asb-sg-root .asb-sg-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 14px;
	background: var(--asb-sg-primary);
	background: var(--asb-sg-grad);
	color: var(--asb-sg-on-primary);
	flex: 0 0 auto;
	overflow: hidden;
}
#asb-sg-root .asb-sg-header::before,
#asb-sg-root .asb-sg-header::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
#asb-sg-root .asb-sg-header::before {
	width: 180px;
	height: 180px;
	right: -60px;
	top: -110px;
	background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 70%);
}
#asb-sg-root .asb-sg-header::after {
	width: 120px;
	height: 120px;
	left: 30%;
	bottom: -80px;
	background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%);
}
#asb-sg-root .asb-sg-avatar {
	position: relative;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 18px;
	flex: 0 0 auto;
	background-size: cover;
	background-position: center;
	z-index: 1;
}
#asb-sg-root .asb-sg-status {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 2px var(--asb-sg-bg);
	animation: asb-sg-pulse 2.4s ease-in-out infinite;
}
@keyframes asb-sg-pulse {
	0%, 100% { box-shadow: 0 0 0 2px var(--asb-sg-bg), 0 0 0 0 rgba(34, 197, 94, .5); }
	60% { box-shadow: 0 0 0 2px var(--asb-sg-bg), 0 0 0 6px rgba(34, 197, 94, 0); }
}
#asb-sg-root .asb-sg-head-text { min-width: 0; flex: 1; z-index: 1; }
#asb-sg-root .asb-sg-name { font-weight: 700; font-size: 16px; letter-spacing: .01em; }
#asb-sg-root .asb-sg-role { font-size: 11.5px; opacity: .9; }
/* Shared header icon button (reset / expand / close). */
#asb-sg-root .asb-sg-hbtn {
	z-index: 1;
	border: 0;
	width: 30px;
	height: 30px;
	background: none;
	color: inherit;
	opacity: .75;
	font-size: 15px;
	cursor: pointer;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: opacity .15s ease;
}
#asb-sg-root .asb-sg-hbtn:hover { opacity: 1; }

/* ---------- Expanded (PC) ---------- */
#asb-sg-root.asb-sg-expanded .asb-sg-panel {
	width: min(720px, calc(100vw - 32px));
	height: min(85vh, 880px);
}

/* ---------- Messages ---------- */
#asb-sg-root .asb-sg-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px 14px 10px;
	background: var(--asb-sg-tint);
	display: flex;
	flex-direction: column;
	gap: 12px;
	scrollbar-width: thin;
	scrollbar-color: rgba(16, 24, 40, .18) transparent;
}
#asb-sg-root .asb-sg-messages::-webkit-scrollbar { width: 5px; }
#asb-sg-root .asb-sg-messages::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .18); border-radius: 99px; }
#asb-sg-root .asb-sg-row {
	display: flex;
	gap: 8px;
	animation: asb-sg-in .26s cubic-bezier(.21, 1.02, .55, 1);
}
@keyframes asb-sg-in {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to { opacity: 1; transform: none; }
}
#asb-sg-root .asb-sg-row-user { justify-content: flex-end; }
#asb-sg-root .asb-sg-row-bot { justify-content: flex-start; }
#asb-sg-root .asb-sg-mini {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--asb-sg-grad);
	color: var(--asb-sg-on-primary);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: 2px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 2px 6px var(--asb-sg-glow);
}
#asb-sg-root .asb-sg-cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 85%;
	min-width: 0;
}
#asb-sg-root .asb-sg-row-user .asb-sg-cell { align-items: flex-end; }
#asb-sg-root .asb-sg-bubble {
	padding: 10px 14px;
	border-radius: 18px;
	word-break: break-word;
	overflow-wrap: anywhere;
	max-width: 100%;
}
#asb-sg-root .asb-sg-row-user .asb-sg-bubble {
	background: var(--asb-sg-grad);
	color: var(--asb-sg-on-primary);
	border-bottom-right-radius: 6px;
	box-shadow: 0 3px 10px var(--asb-sg-glow);
}
#asb-sg-root .asb-sg-row-bot .asb-sg-bubble {
	background: #fff;
	color: #1f2430;
	border-bottom-left-radius: 6px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .06);
}
#asb-sg-root .asb-sg-bubble a { color: var(--asb-sg-primary); text-decoration: underline; text-underline-offset: 2px; }
#asb-sg-root .asb-sg-row-user .asb-sg-bubble a { color: inherit; }
#asb-sg-root .asb-sg-li { display: block; padding-left: 2px; }
#asb-sg-root .asb-sg-disclaimer { font-size: 12px; color: #667085; }
#asb-sg-root .asb-sg-consent-actions { margin-top: 10px; }
#asb-sg-root .asb-sg-row-bot .asb-sg-guide-bubble {
	border-color: color-mix(in srgb, var(--asb-sg-primary) 18%, transparent);
	background: linear-gradient(180deg, color-mix(in srgb, var(--asb-sg-primary) 7%, #fff), #fff);
	box-shadow: 0 4px 14px rgba(16, 24, 40, .05);
}
#asb-sg-root .asb-sg-guide-card {
	display: grid;
	gap: 4px;
}
#asb-sg-root .asb-sg-guide-card strong {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #1f2937;
	font-size: 13px;
	line-height: 1.45;
}
#asb-sg-root .asb-sg-guide-card strong::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--asb-sg-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--asb-sg-primary) 12%, transparent);
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-guide-card span {
	color: #667085;
	font-size: 12px;
	line-height: 1.5;
}
#asb-sg-root .asb-sg-consent-btn {
	border: 1px solid color-mix(in srgb, var(--asb-sg-primary) 36%, transparent);
	border-radius: 999px;
	background: var(--asb-sg-primary);
	color: var(--asb-sg-on-primary);
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	padding: 7px 14px;
	box-shadow: 0 3px 10px var(--asb-sg-glow);
}
#asb-sg-root .asb-sg-consent-btn:disabled {
	cursor: default;
	opacity: .65;
}

/* ---------- Typing dots ---------- */
#asb-sg-root .asb-sg-typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
#asb-sg-root .asb-sg-typing i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--asb-sg-primary);
	opacity: .5;
	animation: asb-sg-bounce 1.1s ease-in-out infinite;
}
#asb-sg-root .asb-sg-typing i:nth-child(2) { animation-delay: .15s; }
#asb-sg-root .asb-sg-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes asb-sg-bounce {
	0%, 60%, 100% { transform: none; opacity: .4; }
	30% { transform: translateY(-5px); opacity: 1; }
}
/* Live "checking the web" note next to the dots while a web search runs. */
#asb-sg-root .asb-sg-webnote {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	opacity: .75;
	vertical-align: middle;
}

/* ---------- Meta: badges, sources, feedback ---------- */
#asb-sg-root .asb-sg-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	max-width: 100%;
}
#asb-sg-root .asb-sg-badge {
	font-size: 10.5px;
	font-weight: 600;
	color: #475467;
	background: #fff;
	border: 1px solid rgba(16, 24, 40, .08);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	border-radius: 999px;
	padding: 3px 9px;
	white-space: nowrap;
}
#asb-sg-root .asb-sg-badge-web {
	background: linear-gradient(135deg, #ecfdf3, #d1fadf);
	color: #157f3d;
	border-color: rgba(21, 127, 61, .18);
}
#asb-sg-root .asb-sg-speak-btn {
	position: relative;
	height: 24px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--asb-sg-primary) 26%, transparent);
	background: #fff;
	color: var(--asb-sg-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0 9px 0 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#asb-sg-root .asb-sg-speak-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#asb-sg-root .asb-sg-speak-label {
	white-space: nowrap;
}
#asb-sg-root .asb-sg-speak-btn:hover,
#asb-sg-root .asb-sg-speak-btn.asb-sg-speak-on {
	background: var(--asb-sg-grad);
	color: var(--asb-sg-on-primary);
	border-color: transparent;
	box-shadow: 0 3px 10px var(--asb-sg-glow);
	transform: translateY(-1px);
}
#asb-sg-root .asb-sg-speak-btn.asb-sg-speak-paused {
	background: color-mix(in srgb, var(--asb-sg-primary) 8%, #fff);
	border-color: color-mix(in srgb, var(--asb-sg-primary) 42%, transparent);
}
#asb-sg-root .asb-sg-speak-btn.asb-sg-speak-loading,
#asb-sg-root .asb-sg-speak-btn.asb-sg-speak-playing {
	animation: asb-sg-speak-heartbeat 1.25s ease-in-out infinite;
}
#asb-sg-root .asb-sg-speak-btn.asb-sg-speak-loading svg {
	animation: asb-sg-speak-spin .9s linear infinite;
}
#asb-sg-root .asb-sg-speak-btn.asb-sg-speak-loading::after,
#asb-sg-root .asb-sg-speak-btn.asb-sg-speak-playing::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--asb-sg-primary) 34%, transparent);
	animation: asb-sg-speak-ring 1.25s ease-out infinite;
	pointer-events: none;
}
#asb-sg-root .asb-sg-speak-btn.asb-sg-speak-paused {
	animation: none;
}
#asb-sg-root .asb-sg-speak-btn.asb-sg-speak-paused::after {
	display: none;
}
@keyframes asb-sg-speak-heartbeat {
	0%, 100% { transform: translateY(-1px) scale(1); }
	22% { transform: translateY(-1px) scale(1.13); }
	38% { transform: translateY(-1px) scale(.98); }
	56% { transform: translateY(-1px) scale(1.08); }
}
@keyframes asb-sg-speak-ring {
	0% { opacity: .7; transform: scale(.82); }
	80%, 100% { opacity: 0; transform: scale(1.55); }
}
@keyframes asb-sg-speak-spin {
	to { transform: rotate(360deg); }
}
#asb-sg-root .asb-sg-handoff-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0 2px;
	padding: 9px 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #92400e;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 12px;
	max-width: 100%;
}
#asb-sg-root .asb-sg-handoff-ico {
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1.3;
}
#asb-sg-root .asb-sg-handoff-text {
	flex: 1 1 auto;
	word-break: break-word;
}
#asb-sg-root .asb-sg-src {
	font-size: 11px;
	font-weight: 500;
	color: var(--asb-sg-primary);
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--asb-sg-primary) 28%, transparent);
	border-radius: 999px;
	padding: 3px 10px;
	text-decoration: none;
	max-width: 170px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
#asb-sg-root .asb-sg-src:hover {
	background: color-mix(in srgb, var(--asb-sg-primary) 8%, #fff);
	box-shadow: 0 3px 10px var(--asb-sg-glow);
	transform: translateY(-1px);
}
#asb-sg-root .asb-sg-fb { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: #667085; }
#asb-sg-root .asb-sg-fb-btn {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 14px;
	padding: 2px 5px;
	border-radius: 8px;
	opacity: .55;
	transition: opacity .15s ease, background .15s ease, transform .15s ease;
}
#asb-sg-root .asb-sg-fb-btn:hover { opacity: 1; background: rgba(16, 24, 40, .06); transform: scale(1.15); }

/* ---------- Starter chips ---------- */
#asb-sg-root .asb-sg-starter-intro {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	border: 0;
	padding: 8px 14px 6px;
	background: var(--asb-sg-tint);
	color: #667085;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.2;
	flex: 0 0 auto;
	text-align: left;
}
#asb-sg-root .asb-sg-starter-intro::before {
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 5px;
	background: color-mix(in srgb, var(--asb-sg-primary) 14%, #fff);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--asb-sg-primary) 70%, transparent);
}
#asb-sg-root .asb-sg-starter-intro-label {
	flex: 1 1 auto;
	cursor: pointer;
}
#asb-sg-root .asb-sg-starter-stepper {
	margin-left: auto;
	display: inline-flex;
	gap: 5px;
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-starter-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: color-mix(in srgb, var(--asb-sg-primary) 12%, #fff);
	color: var(--asb-sg-primary);
	cursor: pointer;
	font-size: 15px;
	font-weight: 900;
	line-height: 1;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--asb-sg-primary) 40%, transparent);
	transition: background .15s ease, opacity .15s ease, transform .12s ease;
}
#asb-sg-root .asb-sg-starter-step:hover:not(:disabled) {
	background: color-mix(in srgb, var(--asb-sg-primary) 24%, #fff);
	transform: translateY(-1px);
}
#asb-sg-root .asb-sg-starter-step:disabled {
	opacity: .3;
	cursor: default;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--asb-sg-primary) 16%, transparent);
}
#asb-sg-root .asb-sg-starter-less::before { content: "\25BE"; }
#asb-sg-root .asb-sg-starter-more::before { content: "\25B4"; }
#asb-sg-root .asb-sg-starter-intro[hidden] { display: none !important; }
#asb-sg-root .asb-sg-starter-tray {
	display: grid;
	max-height: 0;
	padding: 0 14px;
	background: var(--asb-sg-tint);
	overflow: hidden;
	transform: translateY(-6px);
	opacity: 0;
	pointer-events: none;
	flex: 0 0 auto;
	transition: max-height .26s ease, opacity .18s ease, transform .22s ease, padding-bottom .22s ease;
}
#asb-sg-root .asb-sg-starter-tray.is-open {
	max-height: min(300px, 42vh);
	padding-bottom: 12px;
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
#asb-sg-root .asb-sg-starter-tray-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
#asb-sg-root .asb-sg-starter-choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	border: 1px solid color-mix(in srgb, var(--asb-sg-primary) 24%, transparent);
	border-radius: 12px;
	background: #fff;
	color: var(--asb-sg-primary);
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	padding: 7px 10px;
	text-align: left;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
	transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#asb-sg-root .asb-sg-starter-choice::before {
	content: "?";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--asb-sg-primary) 10%, #fff);
	color: var(--asb-sg-primary);
	font-size: 10px;
	font-weight: 800;
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-starter-choice::after {
	content: none;
}
#asb-sg-root .asb-sg-starter-choice:hover {
	border-color: color-mix(in srgb, var(--asb-sg-primary) 32%, transparent);
	box-shadow: 0 4px 14px rgba(16, 24, 40, .07);
	transform: translateY(-1px);
}
#asb-sg-root .asb-sg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 14px;
	background: var(--asb-sg-tint);
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-chips:not(:empty) { padding-bottom: 12px; }
#asb-sg-root .asb-sg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	border: 1px solid color-mix(in srgb, var(--asb-sg-primary) 32%, transparent);
	color: var(--asb-sg-primary);
	background: #fff;
	border-radius: 12px;
	padding: 7px 10px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	text-align: left;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
	transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#asb-sg-root .asb-sg-chip::before {
	content: "?";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--asb-sg-primary) 11%, #fff);
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-chip::after {
	content: "›";
	margin-left: auto;
	font-weight: 800;
	opacity: .55;
}
#asb-sg-root .asb-sg-chip:hover {
	background: var(--asb-sg-grad);
	border-color: transparent;
	color: var(--asb-sg-on-primary);
	box-shadow: 0 4px 14px var(--asb-sg-glow);
	transform: translateY(-1px);
}
/* Guided tree: a branch chip opens sub-choices — the + badge hints at more
   inside; leaves keep the ? badge. (Back-control styles live at file end so
   they outrank the per-theme chip skins.) */
#asb-sg-root .asb-sg-chip-branch::before {
	content: "+";
	font-size: 12px;
}

/* ---------- Input: floating pill ---------- */
#asb-sg-root .asb-sg-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	background: var(--asb-sg-bg);
	border-top: 1px solid rgba(16, 24, 40, .06);
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-input {
	flex: 1;
	border: 1.5px solid transparent;
	border-radius: 22px;
	padding: 9px 16px;
	font: inherit;
	resize: none;
	max-height: 96px;
	background: #f2f4f8;
	color: #1f2430;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(16, 24, 40, .18) transparent;
}
#asb-sg-root .asb-sg-input::-webkit-scrollbar { width: 4px; }
#asb-sg-root .asb-sg-input::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .18); border-radius: 99px; }
#asb-sg-root .asb-sg-input::-webkit-scrollbar-track { background: transparent; }
#asb-sg-root .asb-sg-input:focus {
	outline: none;
	border-color: var(--asb-sg-primary);
	background: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--asb-sg-primary) 14%, transparent);
}
#asb-sg-root .asb-sg-input:disabled {
	background: #eef1f6;
	color: #667085;
	cursor: not-allowed;
}
#asb-sg-root .asb-sg-send {
	border: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--asb-sg-grad);
	color: var(--asb-sg-on-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-shadow: 0 4px 12px var(--asb-sg-glow);
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease, filter .18s ease;
}
#asb-sg-root .asb-sg-send:hover { transform: scale(1.08); filter: brightness(1.06); box-shadow: 0 6px 18px var(--asb-sg-glow); }
#asb-sg-root .asb-sg-send:active { transform: scale(.94); }
#asb-sg-root .asb-sg-send:disabled {
	cursor: not-allowed;
	filter: grayscale(.35);
	opacity: .55;
	transform: none;
	box-shadow: none;
}
#asb-sg-root .asb-sg-send svg { margin-left: 2px; }

#asb-sg-root .asb-sg-browser-note {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 8px 12px 0;
	background: var(--asb-sg-bg);
	font-size: 12px;
	line-height: 1.45;
	color: #667085;
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-browser-note-text {
	flex: 1 1 150px;
	min-width: 0;
}
#asb-sg-root .asb-sg-browser-note-link {
	flex: 0 0 auto;
	border: 1px solid color-mix(in srgb, var(--asb-sg-primary) 28%, transparent);
	border-radius: 999px;
	padding: 5px 10px;
	color: var(--asb-sg-primary);
	background: color-mix(in srgb, var(--asb-sg-primary) 8%, #fff);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
#asb-sg-root .asb-sg-browser-note-link:hover {
	background: color-mix(in srgb, var(--asb-sg-primary) 13%, #fff);
}

/* ---------- Voice input (mic, inside the input pill) ---------- */
#asb-sg-root .asb-sg-inputwrap {
	position: relative;
	flex: 1;
	display: flex;
	min-width: 0;
}
#asb-sg-root .asb-sg-inputwrap .asb-sg-input { width: 100%; }
#asb-sg-root .asb-sg-has-mic .asb-sg-input { padding-right: 40px; }
#asb-sg-root .asb-sg-mic {
	position: absolute;
	right: 5px;
	bottom: 4px;
	border: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: none;
	color: #98a2b3;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .15s ease;
}
#asb-sg-root .asb-sg-mic:hover { color: #667085; }
#asb-sg-root .asb-sg-mic-on {
	background: #fee4e2;
	color: #d92d20;
	animation: asb-sg-pulse 1.6s ease-out infinite;
}
@keyframes asb-sg-pulse {
	0% { box-shadow: 0 0 0 0 rgba(217, 45, 32, .35); }
	70% { box-shadow: 0 0 0 12px rgba(217, 45, 32, 0); }
	100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); }
}

/* ---------- Prominent visitor controls (optional quick bar) ---------- */
#asb-sg-root .asb-sg-quickopts {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	padding: 5px 8px 0;
	background: var(--asb-sg-bg);
	border-top: 1px solid rgba(16, 24, 40, .06);
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-quickopt {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 30px;
	padding: 4px 6px;
	border: 1px solid rgba(16, 24, 40, .08);
	border-radius: 9px;
	background: color-mix(in srgb, var(--asb-sg-primary) 5%, #fff);
	color: #344054;
	box-shadow: none;
}
#asb-sg-root .asb-sg-quickopt-lang {
	flex: .85 1 82px;
	color: #344054;
}
#asb-sg-root .asb-sg-quickopt-speech { flex: 1 1 86px; cursor: pointer; }
#asb-sg-root .asb-sg-quickopt-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	color: currentColor;
}
#asb-sg-root .asb-sg-quickopt-icon svg { display: block; }
#asb-sg-root .asb-sg-quickopt-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
#asb-sg-root .asb-sg-quick-select {
	flex: 1;
	width: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 2px 3px;
	font-size: 11px;
	font-weight: 700;
}
#asb-sg-root .asb-sg-quickopt-speech input {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	border: 1px solid #d0d5dd;
	border-radius: 4px;
	background: #fff;
	flex: 0 0 auto;
	cursor: pointer;
}
#asb-sg-root .asb-sg-quickopt-speech input:checked {
	background: var(--asb-sg-primary);
	border-color: var(--asb-sg-primary);
	box-shadow: inset 0 0 0 2px #fff;
}
#asb-sg-root .asb-sg-quickopt-text {
	min-width: 0;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
}

/* ---------- Options menu (gear in the brand line) ---------- */
#asb-sg-root .asb-sg-opt {
	position: absolute;
	left: 10px;
	bottom: 3px;
	border: 0;
	background: none;
	padding: 0;
	width: 18px;
	height: 18px;
	color: #98a2b3;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .15s ease;
}
#asb-sg-root .asb-sg-opt:hover { color: #667085; }
#asb-sg-root .asb-sg-options[hidden] { display: none !important; }
#asb-sg-root .asb-sg-options {
	position: absolute;
	left: 10px;
	bottom: 34px;
	width: 216px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 10px rgba(16, 24, 40, .08), 0 16px 48px rgba(16, 24, 40, .22);
	padding: 12px 14px;
	z-index: 5;
	text-align: left;
	color: #1f2430;
	font-size: 13px;
}
#asb-sg-root .asb-sg-opt-group + .asb-sg-opt-group { margin-top: 10px; }
#asb-sg-root .asb-sg-opt-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #667085;
	margin-bottom: 5px;
}
#asb-sg-root .asb-sg-opt-select {
	width: 100%;
	font: inherit;
	font-size: 13px;
	padding: 6px 8px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background: #fff;
	color: inherit;
}
#asb-sg-root .asb-sg-size-row { display: flex; gap: 6px; }
#asb-sg-root .asb-sg-size-btn {
	flex: 1;
	border: 1px solid #e4e7ec;
	background: #fff;
	color: #475467;
	font: inherit;
	font-size: 12.5px;
	padding: 6px 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#asb-sg-root .asb-sg-size-btn.asb-sg-on {
	background: var(--asb-sg-grad);
	border-color: transparent;
	color: var(--asb-sg-on-primary);
}
#asb-sg-root .asb-sg-check {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #475467;
	font-size: 12.5px;
	cursor: pointer;
}
#asb-sg-root .asb-sg-check input {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border: 1px solid #d0d5dd;
	border-radius: 4px;
	background: #fff;
	flex: 0 0 auto;
	cursor: pointer;
}
#asb-sg-root .asb-sg-check input:checked {
	background: var(--asb-sg-primary);
	border-color: var(--asb-sg-primary);
	box-shadow: inset 0 0 0 3px #fff;
}
#asb-sg-root .asb-sg-check-text {
	flex: 1 1 auto;
	line-height: 1.35;
}

/* ---------- Large text (visitor option) ---------- */
#asb-sg-root .asb-sg-large .asb-sg-bubble,
#asb-sg-root .asb-sg-large .asb-sg-input { font-size: 16px; }
#asb-sg-root .asb-sg-large .asb-sg-chip { font-size: 14px; }

/* ---------- Brand footer ---------- */
#asb-sg-root .asb-sg-brandline {
	position: relative; /* Anchor for the options gear + popover. */
	flex: 0 0 auto;
	text-align: center;
	font-size: 9.5px;
	letter-spacing: .04em;
	color: #98a2b3;
	background: var(--asb-sg-bg);
	padding: 0 0 6px;
}
#asb-sg-root .asb-sg-brandline a { color: inherit; text-decoration: none; }
#asb-sg-root .asb-sg-brandline a:hover { color: var(--asb-sg-primary); }

/* ---------- Goal guidance ---------- */
#asb-sg-root .asb-sg-goal {
	margin-top: 8px;
	padding: 10px 11px;
	border: 1px solid #dbe4f0;
	border-left: 3px solid var(--asb-sg-primary);
	border-radius: 13px;
	background: linear-gradient(180deg, #fff, #f8fafc);
	box-shadow: 0 1px 4px rgba(16, 24, 40, .05);
}
#asb-sg-root .asb-sg-goal-head {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
}
#asb-sg-root .asb-sg-goal-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 9px;
	color: var(--asb-sg-primary);
	background: color-mix(in srgb, var(--asb-sg-primary) 10%, #fff);
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-goal-copy {
	min-width: 0;
}
#asb-sg-root .asb-sg-goal-title {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	color: #344054;
}
#asb-sg-root .asb-sg-goal-subtitle {
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.35;
	color: #667085;
}
#asb-sg-root .asb-sg-goal-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#asb-sg-root .asb-sg-goal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 32px;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--asb-sg-grad);
	color: var(--asb-sg-on-primary);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}
#asb-sg-root .asb-sg-goal-btn::before {
	content: "↗";
	font-size: 12px;
	line-height: 1;
}
#asb-sg-root .asb-sg-goal-phone::before { content: "☎"; }
#asb-sg-root .asb-sg-goal-email::before { content: "✉"; }
#asb-sg-root .asb-sg-goal-btn:hover { filter: brightness(.96); color: var(--asb-sg-on-primary); }

/* ---------- Mobile: full-height sheet ---------- */
@media (max-width: 640px) {
	#asb-sg-root .asb-sg-panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		width: 100dvw;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		overscroll-behavior: contain;
		animation: asb-sg-slide .3s cubic-bezier(.21, 1.02, .55, 1);
	}
	#asb-sg-root,
	#asb-sg-root.asb-sg-pos-right,
	#asb-sg-root.asb-sg-pos-left {
		left: max(10px, env(safe-area-inset-left, 0px));
		right: max(10px, env(safe-area-inset-right, 0px));
		bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + var(--asb-sg-lift, 0px));
		width: auto;
		max-width: none;
	}
	#asb-sg-root.asb-sg-pos-right { align-items: flex-end; }
	#asb-sg-root.asb-sg-pos-left { align-items: flex-start; }
	#asb-sg-root .asb-sg-cta,
	#asb-sg-root .asb-sg-cta-inline,
	#asb-sg-root.asb-sg-pos-left .asb-sg-cta-inline {
		position: relative;
		right: auto;
		left: auto;
		bottom: auto;
		max-width: min(260px, 100%);
		transform: translateY(8px) scale(.96);
		transform-origin: bottom right;
	}
	#asb-sg-root.asb-sg-pos-left .asb-sg-cta,
	#asb-sg-root.asb-sg-pos-left .asb-sg-cta-inline {
		transform-origin: bottom left;
	}
	#asb-sg-root .asb-sg-cta-inline::after,
	#asb-sg-root.asb-sg-pos-left .asb-sg-cta-inline::after {
		right: 22px;
		left: auto;
		bottom: -5px;
		box-shadow: 3px 3px 6px rgba(16, 24, 40, .08);
	}
	#asb-sg-root.asb-sg-pos-left .asb-sg-cta-inline::after {
		right: auto;
		left: 22px;
	}
	#asb-sg-root .asb-front-hub {
		width: auto;
		max-width: min(224px, calc(100vw - 20px));
		justify-content: flex-end;
	}
	#asb-sg-root.asb-sg-pos-left .asb-front-hub { justify-content: flex-start; }
	#asb-sg-root .asb-front-hub-menu,
	#asb-sg-root.asb-sg-pos-left .asb-front-hub-menu {
		position: absolute;
		left: auto;
		right: 0;
		bottom: 60px;
		width: min(214px, calc(100vw - 20px));
		max-height: min(48dvh, 320px);
		overflow: auto;
		padding: 2px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		transform-origin: bottom right;
	}
	#asb-sg-root.asb-sg-pos-left .asb-front-hub-menu {
		left: 0;
		right: auto;
		transform-origin: bottom left;
	}
	#asb-sg-root .asb-front-hub-item {
		min-height: 38px;
		padding: 5px 9px 5px 6px;
		border-radius: 999px;
		box-shadow: 0 8px 20px rgba(16, 24, 40, .14);
		background: rgba(255, 255, 255, .97);
		backdrop-filter: blur(10px);
	}
	#asb-sg-root .asb-front-hub-icon {
		width: 26px;
		height: 26px;
	}
	#asb-sg-root .asb-front-hub-label {
		font-size: 11.5px;
	}
	#asb-sg-root .asb-sg-messages {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	/* iOS Safari auto-zooms the page when a focused field is under 16px, and
	   that zoom survives app-switching — the fixed sheet then overflows the
	   screen. 16px keeps Safari from zooming in the first place. */
	#asb-sg-root .asb-sg-input,
	#asb-sg-root .asb-sg-opt-select {
		font-size: 16px;
	}
	#asb-sg-root .asb-sg-header { padding-top: calc(16px + env(safe-area-inset-top,
	0px)); }
	#asb-sg-root .asb-sg-form { padding-bottom: calc(10px + env(safe-area-inset-bottom,
	0px)); }
	#asb-sg-root .asb-sg-brandline { padding-bottom: calc(6px + env(safe-area-inset-bottom,
	0px)); }
	/* Already a full-screen sheet on mobile — expanding makes no sense. */
	#asb-sg-root .asb-sg-expand { display: none; }
	@keyframes asb-sg-slide {
		from { opacity: 0; transform: translateY(36px); }
		to { opacity: 1; transform: none; }
	}
}

/* ---------- LINE friend-add guidance (Pro) ---------- */
#asb-sg-root .asb-sg-line-cta { margin: 8px 0 2px; padding: 0 2px; }
#asb-sg-root .asb-sg-line-bar { margin: 4px 12px 8px; }
#asb-sg-root .asb-sg-line-text { font-size: 12.5px; color: #475569; margin-bottom: 6px; }
#asb-sg-root .asb-sg-line-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: #06C755; color: #fff; text-decoration: none;
	border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 13.5px;
	box-shadow: 0 1px 2px rgba(6,199,85,.35);
}
#asb-sg-root .asb-sg-line-btn:hover { background: #05b54d; color: #fff; }
#asb-sg-root .asb-sg-line-ico {
	font-weight: 800; font-size: 11px; letter-spacing: .04em;
	background: rgba(255,255,255,.22); border-radius: 5px; padding: 2px 5px;
}
#asb-sg-root .asb-sg-line-qr { display: block; width: 120px; height: 120px; margin: 8px 0 2px; border-radius: 8px; }

/* ============================================================
   Launcher pill variant + widget frame themes (admin-selectable)
   ============================================================ */

/* Launcher: pill (wide icon + label) instead of the round orb. */
#asb-sg-root .asb-sg-launcher.asb-sg-launcher-pill {
	width: auto;
	min-width: 0;
	height: 56px;
	padding: 0 20px 0 15px;
	border-radius: 999px;
	gap: 9px;
}
#asb-sg-root .asb-sg-launcher-pill .asb-sg-launcher-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
#asb-sg-root .asb-sg-launcher-label {
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* --- Theme: floating --- no enclosing card; the header, the starter block and
   the composer each read as their own light, rounded panels and the message
   bubbles float over the page. Everything is kept airy and translucent so the
   pared-down look does not feel heavy. */
#asb-sg-root.asb-sg-theme-floating .asb-sg-panel {
	background: transparent;
	box-shadow: none;
	overflow: visible;
	gap: 6px;
}
/* Hug the content instead of holding a fixed 600px frame: with a transparent
   panel the unused height reads as a large empty void, so the floating widget
   grows only as tall as its messages (still capped by the panel max-height,
   past which the message list scrolls). Expanded (PC) mode keeps its size. */
#asb-sg-root.asb-sg-theme-floating:not(.asb-sg-expanded) .asb-sg-panel {
	height: auto;
}
#asb-sg-root.asb-sg-theme-floating .asb-sg-header {
	padding: 9px 14px 9px;
	border-radius: 18px;
	background: color-mix(in srgb, var(--asb-sg-primary) 90%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 3px 10px rgba(16, 24, 40, .16);
}
/* Calm the aurora highlights so the shorter header stays clean. */
#asb-sg-root.asb-sg-theme-floating .asb-sg-header::before,
#asb-sg-root.asb-sg-theme-floating .asb-sg-header::after { opacity: .5; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-avatar { width: 36px; height: 36px; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-messages {
	background: transparent;
	overflow-x: hidden;
	min-height: 0; /* allow the list to scroll once the panel hits max-height */
	padding: 12px 14px 4px;
	gap: 10px;
}
/* Tighter, slightly stronger shadow so bubbles read clearly against the page
   instead of the wide, faint halo that bled onto neighbours. */
#asb-sg-root.asb-sg-theme-floating .asb-sg-row-bot .asb-sg-bubble,
#asb-sg-root.asb-sg-theme-floating .asb-sg-row-bot .asb-sg-guide-bubble {
	box-shadow: 0 2px 7px rgba(16, 24, 40, .2);
}
#asb-sg-root.asb-sg-theme-floating .asb-sg-row-user .asb-sg-bubble {
	box-shadow: 0 2px 8px var(--asb-sg-glow);
}
/* Starter block ("質問例") — both the initial chips and the expandable tray —
   become rounded, translucent frosted cards instead of squared tinted strips. */
#asb-sg-root.asb-sg-theme-floating .asb-sg-starter-intro {
	padding: 7px 12px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--asb-sg-tint) 72%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 3px 12px rgba(16, 24, 40, .07);
}
#asb-sg-root.asb-sg-theme-floating .asb-sg-chips,
#asb-sg-root.asb-sg-theme-floating .asb-sg-starter-tray {
	background: color-mix(in srgb, var(--asb-sg-tint) 72%, transparent);
	border-radius: 16px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
#asb-sg-root.asb-sg-theme-floating .asb-sg-chips:not(:empty) {
	padding: 10px 12px;
	box-shadow: 0 3px 12px rgba(16, 24, 40, .07);
}
#asb-sg-root.asb-sg-theme-floating .asb-sg-starter-tray.is-open {
	padding-top: 10px;
	box-shadow: 0 3px 12px rgba(16, 24, 40, .07);
}
#asb-sg-root.asb-sg-theme-floating .asb-sg-form {
	border-radius: 20px;
	border-top: 0;
	background: color-mix(in srgb, var(--asb-sg-bg) 82%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 3px 12px rgba(16, 24, 40, .1);
}

/* --- Theme: glass --- a frosted, translucent panel: the page shows softly
   through a blurred pane, bubbles sit as lighter frosted cards. Distinct from
   the opaque classic card and the frameless floating look. */
#asb-sg-root.asb-sg-theme-glass .asb-sg-panel {
	background: color-mix(in srgb, var(--asb-sg-bg) 72%, transparent);
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
	backdrop-filter: blur(22px) saturate(1.4);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 24px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .12), 0 30px 70px rgba(16, 24, 40, .22);
}
#asb-sg-root.asb-sg-theme-glass .asb-sg-header {
	background: color-mix(in srgb, var(--asb-sg-primary) 82%, transparent);
}
#asb-sg-root.asb-sg-theme-glass .asb-sg-messages {
	background: transparent;
	gap: 14px;
	padding: 16px 16px 12px;
}
#asb-sg-root.asb-sg-theme-glass .asb-sg-row-bot .asb-sg-bubble,
#asb-sg-root.asb-sg-theme-glass .asb-sg-row-bot .asb-sg-guide-bubble {
	background: color-mix(in srgb, #fff 78%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .6);
	box-shadow: 0 2px 12px rgba(16, 24, 40, .08);
}
#asb-sg-root.asb-sg-theme-glass .asb-sg-starter-intro,
#asb-sg-root.asb-sg-theme-glass .asb-sg-starter-tray {
	background: color-mix(in srgb, var(--asb-sg-tint) 60%, transparent);
}
#asb-sg-root.asb-sg-theme-glass .asb-sg-form {
	background: color-mix(in srgb, var(--asb-sg-bg) 55%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top-color: rgba(255, 255, 255, .5);
}

/* ============================================================
   v1.50.0 theme character pass — each style gets a clear identity:
   classic = crisp card, floating = weightless islands, glass = deep
   frosted pane. Plus shared finishing (focus rings, scrollbars,
   reduced motion). Appended overrides: same specificity, later wins.
   ============================================================ */

/* ---------- Shared finishing (all themes) ---------- */

/* Keyboard focus: a visible ring on every interactive part. The text input
   keeps its own focus treatment (border + soft ring) defined above. */
/* !important: the theme-isolation baseline above sets outline:none !important
   on bare buttons, so the focus ring must be forced back on. */
#asb-sg-root .asb-sg-chip:focus-visible,
#asb-sg-root .asb-sg-starter-choice:focus-visible,
#asb-sg-root .asb-sg-starter-step:focus-visible,
#asb-sg-root .asb-sg-starter-intro-label:focus-visible,
#asb-sg-root .asb-sg-cta-x:focus-visible,
#asb-sg-root .asb-sg-bubble a:focus-visible {
	outline: 2px solid var(--asb-sg-primary) !important;
	outline-offset: 2px;
	border-radius: 4px;
}
/* Controls that sit on the primary color need a ring that reads on it. */
#asb-sg-root .asb-sg-launcher:focus-visible,
#asb-sg-root .asb-sg-hbtn:focus-visible,
#asb-sg-root .asb-sg-send:focus-visible,
#asb-sg-root .asb-sg-goal-btn:focus-visible,
#asb-sg-root .asb-sg-consent-btn:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--asb-sg-primary) 35%, #fff) !important;
	outline-offset: 2px;
}

/* Scrollbars: the expandable question tray scrolls too — match the slim
   message-list bar, and darken thumbs slightly while grabbed/hovered. */
#asb-sg-root .asb-sg-starter-tray-list {
	scrollbar-width: thin;
	scrollbar-color: rgba(16, 24, 40, .18) transparent;
}
#asb-sg-root .asb-sg-starter-tray-list::-webkit-scrollbar { width: 5px; }
#asb-sg-root .asb-sg-starter-tray-list::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .18); border-radius: 99px; }
#asb-sg-root .asb-sg-messages::-webkit-scrollbar-thumb:hover,
#asb-sg-root .asb-sg-input::-webkit-scrollbar-thumb:hover,
#asb-sg-root .asb-sg-starter-tray-list::-webkit-scrollbar-thumb:hover { background: rgba(16, 24, 40, .34); }

/* ---------- Theme: classic — the "proper" card ----------
   Crisp and precise: a defined hairline around the card and the bot bubbles,
   and tighter, darker shadows instead of wide faint halos. */
#asb-sg-root:not(.asb-sg-theme-floating):not(.asb-sg-theme-glass) .asb-sg-panel {
	border: 1px solid rgba(16, 24, 40, .09);
	box-shadow:
		0 1px 3px rgba(16, 24, 40, .1),
		0 16px 40px rgba(16, 24, 40, .24);
}
#asb-sg-root:not(.asb-sg-theme-floating):not(.asb-sg-theme-glass) .asb-sg-row-bot .asb-sg-bubble {
	border: 1px solid rgba(16, 24, 40, .08);
	box-shadow: 0 1px 3px rgba(16, 24, 40, .1);
}
#asb-sg-root:not(.asb-sg-theme-floating):not(.asb-sg-theme-glass) .asb-sg-row-user .asb-sg-bubble {
	box-shadow: 0 2px 8px var(--asb-sg-glow);
}
#asb-sg-root:not(.asb-sg-theme-floating):not(.asb-sg-theme-glass) .asb-sg-form {
	border-top: 1px solid rgba(16, 24, 40, .09);
}

/* ---------- Theme: floating — weightless islands ----------
   Rounder corners everywhere and a staggered entrance: each island (header,
   messages, question chips, composer, brand line) rises into place in turn. */
#asb-sg-root.asb-sg-theme-floating .asb-sg-header { border-radius: 20px; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-starter-intro { border-radius: 18px; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-chips,
#asb-sg-root.asb-sg-theme-floating .asb-sg-starter-tray { border-radius: 18px; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-form { border-radius: 24px; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-bubble { border-radius: 20px; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-row-user .asb-sg-bubble { border-bottom-right-radius: 8px; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-row-bot .asb-sg-bubble { border-bottom-left-radius: 8px; }
/* The brand line otherwise renders as an opaque strip under the transparent
   panel; make it its own small floating chip like everything else. */
#asb-sg-root.asb-sg-theme-floating .asb-sg-brandline {
	background: color-mix(in srgb, var(--asb-sg-bg) 72%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 999px;
	padding: 4px 10px 5px;
	align-self: center;
	margin: 0 auto;
	width: max-content;
	max-width: 100%;
}
@keyframes asb-sg-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}
/* The panel itself no longer pops as one block — its islands rise in turn. */
#asb-sg-root.asb-sg-theme-floating .asb-sg-panel { animation: none; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-header { animation: asb-sg-rise .3s cubic-bezier(.21, 1.02, .55, 1) backwards; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-messages { animation: asb-sg-rise .3s cubic-bezier(.21, 1.02, .55, 1) .05s backwards; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-starter-intro,
#asb-sg-root.asb-sg-theme-floating .asb-sg-chips,
#asb-sg-root.asb-sg-theme-floating .asb-sg-starter-tray { animation: asb-sg-rise .3s cubic-bezier(.21, 1.02, .55, 1) .1s backwards; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-form { animation: asb-sg-rise .3s cubic-bezier(.21, 1.02, .55, 1) .14s backwards; }
#asb-sg-root.asb-sg-theme-floating .asb-sg-brandline { animation: asb-sg-rise .3s cubic-bezier(.21, 1.02, .55, 1) .18s backwards; }

/* ---------- Theme: glass — deeper frosted pane ----------
   Stronger blur/saturation, a bright top edge highlight on the pane, and the
   message bubbles themselves become glass (including the visitor's). */
#asb-sg-root.asb-sg-theme-glass .asb-sg-panel {
	background: color-mix(in srgb, var(--asb-sg-bg) 62%, transparent);
	-webkit-backdrop-filter: blur(26px) saturate(1.55);
	backdrop-filter: blur(26px) saturate(1.55);
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 26px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .65),
		0 4px 12px rgba(16, 24, 40, .14),
		0 18px 44px rgba(16, 24, 40, .26);
}
#asb-sg-root.asb-sg-theme-glass .asb-sg-header {
	background: color-mix(in srgb, var(--asb-sg-primary) 76%, transparent);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .28);
}
#asb-sg-root.asb-sg-theme-glass .asb-sg-row-bot .asb-sg-bubble,
#asb-sg-root.asb-sg-theme-glass .asb-sg-row-bot .asb-sg-guide-bubble {
	background: color-mix(in srgb, #fff 72%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .65);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 8px rgba(16, 24, 40, .1);
}
#asb-sg-root.asb-sg-theme-glass .asb-sg-row-user .asb-sg-bubble {
	background: color-mix(in srgb, var(--asb-sg-primary) 78%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 8px var(--asb-sg-glow);
}
#asb-sg-root.asb-sg-theme-glass .asb-sg-starter-choice,
#asb-sg-root.asb-sg-theme-glass .asb-sg-chip {
	background: color-mix(in srgb, #fff 76%, transparent);
}
#asb-sg-root.asb-sg-theme-glass .asb-sg-form {
	background: color-mix(in srgb, var(--asb-sg-bg) 45%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
#asb-sg-root.asb-sg-theme-glass .asb-sg-input { background: color-mix(in srgb, #f2f4f8 72%, transparent); }
#asb-sg-root.asb-sg-theme-glass .asb-sg-input:focus { background: color-mix(in srgb, #fff 85%, transparent); }
#asb-sg-root.asb-sg-theme-glass .asb-sg-brandline { background: transparent; }

/* Browsers without backdrop-filter would show raw transparency (unreadable
   text over the page), so both translucent themes fall back to solid fills. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#asb-sg-root.asb-sg-theme-glass .asb-sg-panel { background: var(--asb-sg-bg); }
	#asb-sg-root.asb-sg-theme-glass .asb-sg-row-bot .asb-sg-bubble,
	#asb-sg-root.asb-sg-theme-glass .asb-sg-row-bot .asb-sg-guide-bubble { background: #fff; }
	#asb-sg-root.asb-sg-theme-glass .asb-sg-row-user .asb-sg-bubble { background: var(--asb-sg-grad); border: 0; }
	#asb-sg-root.asb-sg-theme-glass .asb-sg-starter-choice,
	#asb-sg-root.asb-sg-theme-glass .asb-sg-chip { background: #fff; }
	#asb-sg-root.asb-sg-theme-glass .asb-sg-form { background: var(--asb-sg-bg); }
	#asb-sg-root.asb-sg-theme-glass .asb-sg-input { background: #f2f4f8; }
	#asb-sg-root.asb-sg-theme-glass .asb-sg-input:focus { background: #fff; }
	#asb-sg-root.asb-sg-theme-floating .asb-sg-header { background: var(--asb-sg-primary); }
	#asb-sg-root.asb-sg-theme-floating .asb-sg-starter-intro,
	#asb-sg-root.asb-sg-theme-floating .asb-sg-chips,
	#asb-sg-root.asb-sg-theme-floating .asb-sg-starter-tray { background: var(--asb-sg-tint); }
	#asb-sg-root.asb-sg-theme-floating .asb-sg-form,
	#asb-sg-root.asb-sg-theme-floating .asb-sg-brandline { background: var(--asb-sg-bg); }
}

/* Reduced motion: no decorative movement — entrances, breathing glow and the
   status pulse stop; state changes still happen instantly. */
@media (prefers-reduced-motion: reduce) {
	#asb-sg-root.asb-sg-theme-floating .asb-sg-header,
	#asb-sg-root.asb-sg-theme-floating .asb-sg-messages,
	#asb-sg-root.asb-sg-theme-floating .asb-sg-starter-intro,
	#asb-sg-root.asb-sg-theme-floating .asb-sg-chips,
	#asb-sg-root.asb-sg-theme-floating .asb-sg-starter-tray,
	#asb-sg-root.asb-sg-theme-floating .asb-sg-form,
	#asb-sg-root.asb-sg-theme-floating .asb-sg-brandline { animation: none !important; }
	#asb-sg-root .asb-sg-status { animation: none; }
	#asb-sg-root .asb-sg-chip,
	#asb-sg-root .asb-sg-starter-step,
	#asb-sg-root .asb-sg-send { transition: none; }
	#asb-sg-root .asb-sg-chip:hover,
	#asb-sg-root .asb-sg-starter-step:hover:not(:disabled),
	#asb-sg-root .asb-sg-send:hover { transform: none; }
}

/* ============================================================
   v1.51.0 — pill + side teaser on wide screens, avatar launcher,
   and the fourth widget style: dark.
   ============================================================ */

/* --- Side teaser beside a pill launcher (desktop widths only; the JS falls
   back to the stacked "above" layout under 782px). The pill's width depends
   on its label, so the JS measures it into --asb-sg-launcher-w. --- */
#asb-sg-root.asb-sg-pill-inline .asb-sg-cta-inline {
	right: calc(var(--asb-sg-launcher-w, 64px) + 14px);
	bottom: 9px;
}
#asb-sg-root.asb-sg-pos-left.asb-sg-pill-inline .asb-sg-cta-inline {
	right: auto;
	left: calc(var(--asb-sg-launcher-w, 64px) + 14px);
}

/* --- Launcher: avatar --- the bot's photo as the button, with a small
   chat badge so it still reads as "talk to me". No image → orb fallback. */
#asb-sg-root .asb-sg-launcher-avatar {
	background-size: cover;
	background-position: center;
	box-shadow: 0 2px 6px rgba(16, 24, 40, .2), 0 8px 24px rgba(16, 24, 40, .24), 0 0 0 2px #fff;
}
#asb-sg-root .asb-sg-launcher-badge {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--asb-sg-grad);
	color: var(--asb-sg-on-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(16, 24, 40, .25);
}
#asb-sg-root .asb-sg-launcher-badge[hidden] { display: none !important; }

/* --- Theme: dark — a low-light night panel. The scheme is self-contained
   (own bg/tint), so the admin's light panel color does not bleed through.
   Primary color, gradients and glows still follow the admin's choice. --- */
#asb-sg-root.asb-sg-theme-dark {
	/* !important: the admin's panel color arrives as an inline style var on the
	   root, which would otherwise beat this class rule. */
	--asb-sg-bg: #151a26 !important;
	--asb-sg-tint: #1b2130;
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-panel {
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .5);
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-row-bot .asb-sg-bubble {
	background: #232a3b;
	color: #e6eaf2;
	border: 1px solid rgba(255, 255, 255, .07);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-row-bot .asb-sg-guide-bubble {
	background: linear-gradient(180deg, color-mix(in srgb, var(--asb-sg-primary) 14%, #232a3b), #232a3b);
	border-color: color-mix(in srgb, var(--asb-sg-primary) 30%, transparent);
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-guide-card strong { color: #e6eaf2; }
#asb-sg-root.asb-sg-theme-dark .asb-sg-guide-card span,
#asb-sg-root.asb-sg-theme-dark .asb-sg-disclaimer { color: #98a2b3; }
#asb-sg-root.asb-sg-theme-dark .asb-sg-bubble a { color: color-mix(in srgb, var(--asb-sg-primary) 60%, #fff); }
#asb-sg-root.asb-sg-theme-dark .asb-sg-row-user .asb-sg-bubble a { color: inherit; }
/* Question chips and the expandable tray. */
#asb-sg-root.asb-sg-theme-dark .asb-sg-chip,
#asb-sg-root.asb-sg-theme-dark .asb-sg-starter-choice {
	background: #232a3b;
	color: color-mix(in srgb, var(--asb-sg-primary) 55%, #fff);
	border-color: color-mix(in srgb, var(--asb-sg-primary) 45%, transparent);
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-chip::before {
	background: color-mix(in srgb, var(--asb-sg-primary) 30%, #232a3b);
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-starter-intro { color: #98a2b3; }
#asb-sg-root.asb-sg-theme-dark .asb-sg-starter-intro::before {
	background: color-mix(in srgb, var(--asb-sg-primary) 30%, #232a3b);
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-starter-step {
	background: color-mix(in srgb, var(--asb-sg-primary) 24%, #232a3b);
	color: color-mix(in srgb, var(--asb-sg-primary) 55%, #fff);
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-starter-step:hover:not(:disabled) {
	background: color-mix(in srgb, var(--asb-sg-primary) 38%, #232a3b);
}
/* Composer. */
#asb-sg-root.asb-sg-theme-dark .asb-sg-form { border-top: 1px solid rgba(255, 255, 255, .07); }
#asb-sg-root.asb-sg-theme-dark .asb-sg-input {
	background: #232a3b;
	color: #e6eaf2;
	scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-input::placeholder { color: #8a94a8; }
#asb-sg-root.asb-sg-theme-dark .asb-sg-input:focus { background: #1b2130; }
#asb-sg-root.asb-sg-theme-dark .asb-sg-input:disabled { background: #1b2130; color: #8a94a8; }
/* Meta row: badges, source pills, listen button. */
#asb-sg-root.asb-sg-theme-dark .asb-sg-badge {
	background: #232a3b;
	color: #c6cddb;
	border-color: rgba(255, 255, 255, .1);
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-src,
#asb-sg-root.asb-sg-theme-dark .asb-sg-speak-btn {
	background: #232a3b;
	color: color-mix(in srgb, var(--asb-sg-primary) 55%, #fff);
}
/* Quick bar, options popover, brand line. */
#asb-sg-root.asb-sg-theme-dark .asb-sg-quickopts { border-top-color: rgba(255, 255, 255, .07); }
#asb-sg-root.asb-sg-theme-dark .asb-sg-quickopt {
	background: color-mix(in srgb, var(--asb-sg-primary) 12%, #1b2130);
	border-color: rgba(255, 255, 255, .1);
	color: #c6cddb;
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-quickopt-lang { color: #c6cddb; }
#asb-sg-root.asb-sg-theme-dark .asb-sg-options {
	background: #1f2634;
	color: #e6eaf2;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .3), 0 16px 48px rgba(0, 0, 0, .5);
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-opt:hover { color: #c6cddb; }
/* Goal guidance card. */
#asb-sg-root.asb-sg-theme-dark .asb-sg-goal {
	background: linear-gradient(180deg, #232a3b, #1f2634);
	border-color: rgba(255, 255, 255, .09);
	border-left-color: var(--asb-sg-primary);
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-goal-title { color: #e6eaf2; }
#asb-sg-root.asb-sg-theme-dark .asb-sg-goal-subtitle { color: #98a2b3; }
#asb-sg-root.asb-sg-theme-dark .asb-sg-goal-icon {
	background: color-mix(in srgb, var(--asb-sg-primary) 24%, #232a3b);
}
/* Closed-state greeting bubble matches the night look. */
#asb-sg-root.asb-sg-theme-dark .asb-sg-cta {
	background: #1f2634;
	color: #e6eaf2;
	border-color: rgba(255, 255, 255, .09);
	border-left-color: var(--asb-sg-primary);
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-cta::after { background: #1f2634; }
#asb-sg-root.asb-sg-theme-dark .asb-sg-cta-kicker { color: #98a2b3; }
#asb-sg-root.asb-sg-theme-dark .asb-sg-cta-icon {
	background: color-mix(in srgb, var(--asb-sg-primary) 24%, #1f2634);
	color: color-mix(in srgb, var(--asb-sg-primary) 55%, #fff);
}
/* Scrollbars read on the dark ground. */
#asb-sg-root.asb-sg-theme-dark .asb-sg-messages,
#asb-sg-root.asb-sg-theme-dark .asb-sg-starter-tray-list {
	scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-messages::-webkit-scrollbar-thumb,
#asb-sg-root.asb-sg-theme-dark .asb-sg-input::-webkit-scrollbar-thumb,
#asb-sg-root.asb-sg-theme-dark .asb-sg-starter-tray-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }
#asb-sg-root.asb-sg-theme-dark .asb-sg-messages::-webkit-scrollbar-thumb:hover,
#asb-sg-root.asb-sg-theme-dark .asb-sg-input::-webkit-scrollbar-thumb:hover,
#asb-sg-root.asb-sg-theme-dark .asb-sg-starter-tray-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .38); }

/* ---------- Guided tree: back control ----------
   Placed last so it outranks every per-theme .asb-sg-chip skin: the back chip
   must read as navigation, not as another answer choice — a neutral gray pill
   with an arrow instead of the ? badge, and no gradient hover lift. */
#asb-sg-root .asb-sg-chip.asb-sg-chip-back {
	border: 1px solid transparent;
	border-radius: 999px;
	background: color-mix(in srgb, #64748b 14%, transparent);
	color: #475467;
	font-weight: 600;
	padding-right: 13px;
}
#asb-sg-root .asb-sg-chip.asb-sg-chip-back::before {
	content: "\2190"; /* ← */
	width: auto;
	height: auto;
	background: transparent;
	color: inherit;
	font-size: 13px;
	font-weight: 800;
}
#asb-sg-root .asb-sg-chip.asb-sg-chip-back::after { content: none; }
#asb-sg-root .asb-sg-chip.asb-sg-chip-back:hover {
	background: color-mix(in srgb, #64748b 26%, transparent);
	border-color: transparent;
	color: #1d2939;
	box-shadow: none;
	transform: none;
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-chip.asb-sg-chip-back {
	background: rgba(148, 163, 184, .18);
	color: #cbd5e1;
}
#asb-sg-root.asb-sg-theme-dark .asb-sg-chip.asb-sg-chip-back:hover {
	background: rgba(148, 163, 184, .3);
	color: #f1f5f9;
}