/*
 * SPS Chatbot widget — vanilla CSS port of the Anthropic Design bundle.
 * Navy (#0B2545) primary, gold (#C9A24B) accent, Fraunces + Geist + JetBrains Mono.
 * All visual knobs are CSS variables overridden by inline style on #sps-chatbot-root.
 */

#sps-chatbot-root {
	--sps-accent: #C9A24B;
	--sps-navy: #0B2545;
	--sps-bg: #FBFAF7;
	--sps-surface: #FFFFFF;
	--sps-surface-alt: rgba(11, 37, 69, .04);
	--sps-fg: #0B2545;
	--sps-sub: rgba(11, 37, 69, .7);
	--sps-muted: rgba(11, 37, 69, .5);
	--sps-ring: rgba(11, 37, 69, .14);
	--sps-ring-strong: rgba(11, 37, 69, .28);
	--sps-bubble-user-bg: var(--sps-navy);
	--sps-bubble-user-fg: #FFFFFF;
	--sps-bubble-bot-bg: rgba(11, 37, 69, .05);
	--sps-bubble-bot-fg: var(--sps-navy);

	font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color-scheme: light;
}

#sps-chatbot-root[data-dark="true"] {
	--sps-bg: var(--sps-navy);
	--sps-surface: #0F2D54;
	--sps-surface-alt: rgba(255, 255, 255, .06);
	--sps-fg: #FFFFFF;
	--sps-sub: rgba(255, 255, 255, .72);
	--sps-muted: rgba(255, 255, 255, .5);
	--sps-ring: rgba(255, 255, 255, .16);
	--sps-ring-strong: rgba(255, 255, 255, .28);
	--sps-bubble-user-bg: var(--sps-accent);
	--sps-bubble-user-fg: var(--sps-navy);
	--sps-bubble-bot-bg: rgba(255, 255, 255, .08);
	--sps-bubble-bot-fg: #FFFFFF;
	color-scheme: dark;
}

#sps-chatbot-root *,
#sps-chatbot-root *::before,
#sps-chatbot-root *::after {
	box-sizing: border-box;
}

/* ─── Animations (match design) ───────────────────────────────────────────── */
@keyframes sps-pop-in {
	0% { opacity: 0; transform: translateY(20px) scale(.94); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sps-msg-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes sps-chip-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes sps-caret { 50% { opacity: 0; } }
@keyframes sps-dot {
	0%, 80%, 100% { transform: translateY(0); opacity: .35; }
	40% { transform: translateY(-3px); opacity: 1; }
}
@keyframes sps-pulse {
	0% { transform: scale(1); opacity: .5; }
	100% { transform: scale(1.5); opacity: 0; }
}
@keyframes sps-launcher-in {
	from { opacity: 0; transform: translateY(30px) scale(.85); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sps-float-a {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-30px, 30px); }
}

/* ─── Full-screen modal animations (new design) ─────────────────────────── */
@keyframes sps-intro-veil {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes sps-intro-sheet {
	0%   { opacity: 0; transform: translate(-50%, calc(-50% + 40px)) scale(.92); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes sps-halo-drift {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	33% { transform: translate(-30px, 20px) rotate(2deg); }
	66% { transform: translate(30px, -10px) rotate(-2deg); }
}
@keyframes sps-ray-pulse {
	0%, 100% { opacity: .25; transform: scale(1); }
	50% { opacity: .55; transform: scale(1.04); }
}
@keyframes sps-min-icon-in {
	from { opacity: 0; transform: scale(0) rotate(-90deg); }
	to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes sps-min-pulse {
	0%   { transform: scale(1); opacity: .5; }
	100% { transform: scale(1.5); opacity: 0; }
}
@keyframes sps-sheet-out {
	0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, calc(-50% + 20px)) scale(.95); }
}
@keyframes sps-veil-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* ─── Min icon (floating launcher when minimized) ────────────────────────── */
.sps-launcher {
	position: fixed;
	bottom: 22px;
	z-index: 2147483640;
	appearance: none;
	width: 60px;
	height: 60px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--sps-navy) 0%, #14365e 100%);
	border: 1px solid var(--sps-accent);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 6px color-mix(in srgb, var(--sps-accent) 8%, transparent);
	display: grid;
	place-items: center;
	cursor: pointer;
	animation: sps-min-icon-in .5s cubic-bezier(.2, .8, .25, 1) both;
	transition: transform .2s ease, box-shadow .2s ease;
	font-family: inherit;
	padding: 0;
}
#sps-chatbot-root[data-position="right"] .sps-launcher { right: 22px; }
#sps-chatbot-root[data-position="left"] .sps-launcher { left: 22px; }
.sps-launcher::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 999px;
	border: 1px solid var(--sps-accent);
	opacity: .25;
	animation: sps-min-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
.sps-launcher:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 16px 38px rgba(0, 0, 0, .55), 0 0 0 6px color-mix(in srgb, var(--sps-accent) 14%, transparent);
}
.sps-launcher__label {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	opacity: 0;
	transition: opacity .18s ease;
	font-size: 12.5px;
	font-weight: 600;
	color: #FFFFFF;
	background: rgba(11, 37, 69, .92);
	padding: 6px 12px;
	border-radius: 999px;
	pointer-events: none;
	border: 1px solid rgba(201, 162, 75, .35);
}
#sps-chatbot-root[data-position="left"] .sps-launcher__label {
	right: auto;
	left: calc(100% + 12px);
}
.sps-launcher:hover .sps-launcher__label { opacity: 1; }
.sps-launcher__unread {
	position: absolute;
	top: 0;
	right: 0;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: #5DBB7A;
	border: 2px solid var(--sps-navy);
	box-shadow: 0 0 10px #5DBB7A;
}

/* ─── Veil (full-screen backdrop with halo + rays) ───────────────────────── */
.sps-veil {
	position: fixed;
	inset: 0;
	z-index: 2147483641;
	background: radial-gradient(60% 50% at 50% 30%, rgba(11, 37, 69, .55) 0%, rgba(6, 12, 28, .85) 70%);
	-webkit-backdrop-filter: blur(8px) saturate(120%);
	backdrop-filter: blur(8px) saturate(120%);
	animation: sps-intro-veil .45s ease-out both;
	overflow: hidden;
	isolation: isolate;
}
.sps-veil--closing {
	animation: sps-veil-out .3s ease-in forwards;
}
.sps-veil__halo {
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(40% 35% at 50% 35%, color-mix(in srgb, var(--sps-accent) 20%, transparent) 0%, transparent 60%),
		radial-gradient(50% 50% at 20% 80%, rgba(27, 58, 91, .4) 0%, transparent 70%),
		radial-gradient(40% 40% at 85% 15%, color-mix(in srgb, var(--sps-accent) 13%, transparent) 0%, transparent 70%);
	animation: sps-halo-drift 18s ease-in-out infinite;
	pointer-events: none;
}
.sps-veil__rays {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: conic-gradient(from 200deg at 50% 30%,
		transparent 0deg, color-mix(in srgb, var(--sps-accent) 9%, transparent) 8deg, transparent 16deg,
		transparent 60deg, color-mix(in srgb, var(--sps-accent) 8%, transparent) 68deg, transparent 76deg,
		transparent 130deg, color-mix(in srgb, var(--sps-accent) 6%, transparent) 138deg, transparent 146deg,
		transparent 360deg);
	mix-blend-mode: screen;
	animation: sps-ray-pulse 6s ease-in-out infinite;
	-webkit-mask-image: radial-gradient(60% 50% at 50% 30%, #000 0%, transparent 70%);
	mask-image: radial-gradient(60% 50% at 50% 30%, #000 0%, transparent 70%);
}

/* ─── Panel (the centered modal sheet inside the veil) ──────────────────── */
/* Uses the original light cream/navy palette inherited from #sps-chatbot-root.
   The dark veil + animated halo/rays behind it provide the contrast frame. */
.sps-panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(680px, calc(100% - 56px));
	height: calc(100% - 80px);
	max-height: 800px;
	background: var(--sps-bg);
	color: var(--sps-fg);
	border: 1px solid var(--sps-ring);
	border-radius: 24px;
	box-shadow:
		0 40px 120px rgba(0, 0, 0, .55),
		0 0 0 1px rgba(255, 255, 255, .04) inset,
		0 0 80px color-mix(in srgb, var(--sps-accent) 14%, transparent);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: sps-intro-sheet .65s cubic-bezier(.2, .85, .25, 1) both;
	isolation: isolate;
}
.sps-panel--closing {
	animation: sps-sheet-out .3s ease-in forwards;
}
.sps-panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sps-accent), transparent);
	opacity: .8;
	z-index: 2;
}

@media (max-width: 600px) {
	.sps-panel {
		width: calc(100% - 16px);
		height: calc(100% - 28px);
		max-height: none;
		border-radius: 18px;
	}
}

/* ─── Panel header ────────────────────────────────────────────────────────── */
.sps-panel__header {
	position: relative;
	padding: 14px 16px;
	border-bottom: 1px solid var(--sps-ring);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(180deg, color-mix(in srgb, var(--sps-accent) 10%, transparent) 0%, transparent 100%);
	flex: 0 0 auto;
}
.sps-panel__header::before {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sps-accent), transparent);
	opacity: .6;
}
.sps-panel__brand { display: flex; align-items: center; gap: 10px; }
.sps-panel__brand-name {
	font-family: 'Fraunces', serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--sps-fg);
	line-height: 1.1;
}
.sps-panel__brand-name em {
	color: var(--sps-accent);
	font-style: italic;
}
.sps-panel__brand-tag {
	display: block;
	font-size: 10px;
	color: var(--sps-sub);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 2px;
}
.sps-panel__close {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--sps-sub);
	width: 28px;
	height: 28px;
	border-radius: 8px;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.sps-panel__close:hover { background: var(--sps-surface-alt); color: var(--sps-fg); }

/* New "Minimize" pill button (replaces close X — collapses to floating icon) */
.sps-panel__minimize {
	appearance: none;
	border: 1px solid var(--sps-ring);
	background: var(--sps-surface-alt);
	color: var(--sps-sub);
	height: 32px;
	padding: 0 12px;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sps-panel__minimize:hover {
	background: color-mix(in srgb, var(--sps-accent) 12%, transparent);
	border-color: var(--sps-ring-strong);
	color: var(--sps-fg);
}

/* ─── Avatar ──────────────────────────────────────────────────────────────── */
.sps-avatar {
	flex: 0 0 auto;
	border-radius: 999px;
	display: grid;
	place-items: center;
	position: relative;
	background: #FFFFFF;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25), 0 0 0 1px color-mix(in srgb, var(--sps-accent) 40%, transparent);
}
.sps-avatar img { object-fit: contain; }
.sps-avatar--monogram, .sps-avatar--scales, .sps-avatar--pulse, .sps-avatar--letter {
	background: linear-gradient(135deg, var(--sps-accent) 0%, #a8853e 100%);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--sps-accent) 33%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.sps-avatar--pulsing::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 999px;
	border: 1.5px solid var(--sps-accent);
	opacity: .4;
	animation: sps-pulse 2.2s ease-out infinite;
}

/* ─── Body container ──────────────────────────────────────────────────────── */
.sps-body {
	flex: 1;
	min-height: 0;
	position: relative;
	display: flex;
	flex-direction: column;
}

.sps-ambient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.sps-ambient::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--sps-accent) 15%, transparent) 0%, transparent 70%),
		radial-gradient(50% 50% at 0% 100%, rgba(27, 58, 91, .07) 0%, transparent 70%);
}
.sps-ambient::after {
	content: "";
	position: absolute;
	top: -40px; right: -40px;
	width: 160px; height: 160px;
	border-radius: 999px;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--sps-accent) 13%, transparent), transparent);
	animation: sps-float-a 14s ease-in-out infinite;
}

/* ─── Welcome ─────────────────────────────────────────────────────────────── */
.sps-welcome {
	display: flex;
	flex-direction: column;
	padding: 22px 20px 16px;
	gap: 16px;
	flex: 1;
	min-height: 0;
	position: relative;
	overflow-y: auto;
}
.sps-welcome__head { display: flex; align-items: center; gap: 12px; position: relative; }
.sps-welcome__title {
	font-family: 'Fraunces', serif;
	font-size: 17px;
	font-weight: 500;
	color: var(--sps-fg);
	line-height: 1.1;
}
.sps-welcome__status {
	font-size: 11.5px;
	color: var(--sps-accent);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: .14em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	margin-top: 2px;
}
.sps-welcome__status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #5DBB7A;
	box-shadow: 0 0 8px #5DBB7A;
}
.sps-welcome__headline {
	font-family: 'Fraunces', serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -.01em;
	margin: 0;
	color: var(--sps-fg);
	min-height: 64px;
	text-wrap: pretty;
}
.sps-welcome__caret {
	display: inline-block;
	width: 2px;
	height: .95em;
	vertical-align: -.12em;
	background: var(--sps-accent);
	margin-left: 3px;
	animation: sps-caret 1s steps(2) infinite;
}
.sps-welcome__sub {
	font-size: 13.5px;
	color: var(--sps-sub);
	line-height: 1.55;
	margin: 8px 0 0;
}
.sps-welcome__group { border-top: 1px solid var(--sps-ring); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.sps-welcome__group-label {
	font-size: 10.5px;
	color: var(--sps-sub);
	letter-spacing: .18em;
	text-transform: uppercase;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-weight: 600;
}

.sps-welcome__spacer { flex: 1; }

.sps-welcome__disclaimer {
	font-size: 11px;
	color: var(--sps-sub);
	line-height: 1.5;
	padding: 9px 12px;
	border: 1px dashed var(--sps-ring);
	border-radius: 10px;
	display: flex;
	gap: 8px;
	align-items: flex-start;
	background: var(--sps-surface-alt);
}
.sps-welcome__disclaimer-icon { color: var(--sps-accent); font-weight: 700; }

/* ─── Chips ───────────────────────────────────────────────────────────────── */
.sps-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.sps-chip {
	appearance: none;
	border: 1px solid var(--sps-ring);
	background: var(--sps-surface-alt);
	color: var(--sps-fg);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	padding: 8px 13px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .18s ease;
	white-space: nowrap;
	animation: sps-chip-in .35s both ease-out;
}
.sps-chip--compact { font-size: 12px; padding: 6px 11px; }
.sps-chip:hover {
	border-color: var(--sps-accent);
	background: color-mix(in srgb, var(--sps-accent) 13%, transparent);
	transform: translateY(-1px);
}

/* ─── Composer (text input) ───────────────────────────────────────────────── */
.sps-composer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 5px 5px 14px;
	background: var(--sps-surface);
	border: 1px solid var(--sps-ring-strong);
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
	transition: border-color .18s;
}
.sps-composer:focus-within { border-color: var(--sps-accent); }
.sps-composer__honeypot {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.sps-composer__input {
	flex: 1;
	appearance: none;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--sps-fg);
	font-family: inherit;
	font-size: 14px;
	padding: 8px 0;
	min-width: 0;
}
.sps-composer__btn {
	appearance: none;
	border: 0;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: all .18s ease;
	color: var(--sps-muted);
	background: var(--sps-ring);
}
.sps-composer__btn--primary { color: var(--sps-navy); background: var(--sps-accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--sps-accent) 40%, transparent); }
.sps-composer__btn--ghost { width: 30px; height: 30px; background: transparent; color: var(--sps-muted); }
.sps-composer__btn--ghost:hover { color: var(--sps-fg); }

/* ─── Active chat ─────────────────────────────────────────────────────────── */
.sps-chat {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.sps-chat__topbar {
	position: relative;
	padding: 10px 16px;
	border-bottom: 1px solid var(--sps-ring);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, .6);
	backdrop-filter: blur(10px);
	flex: 0 0 auto;
}
#sps-chatbot-root[data-dark="true"] .sps-chat__topbar { background: rgba(11, 37, 69, .6); }
.sps-chat__status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	color: var(--sps-sub);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
}
.sps-chat__status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #5DBB7A;
	box-shadow: 0 0 8px #5DBB7A;
}
.sps-chat__cta {
	appearance: none;
	border: 1px solid var(--sps-accent);
	background: var(--sps-accent);
	color: var(--sps-navy);
	font-family: inherit;
	font-weight: 700;
	font-size: 11.5px;
	padding: 6px 11px;
	border-radius: 999px;
	cursor: pointer;
	letter-spacing: .02em;
}
.sps-chat__messages {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	scrollbar-width: thin;
	scrollbar-color: var(--sps-ring) transparent;
}
.sps-chat__messages::-webkit-scrollbar { width: 8px; }
.sps-chat__messages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 4px; }
.sps-chat__messages::-webkit-scrollbar-track { background: transparent; }
.sps-chat__footer {
	position: relative;
	border-top: 1px solid var(--sps-ring);
	padding: 12px 12px 14px;
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(10px);
	flex: 0 0 auto;
}
#sps-chatbot-root[data-dark="true"] .sps-chat__footer { background: rgba(11, 37, 69, .7); }
.sps-chat__footer-disclaimer {
	font-size: 10px;
	color: var(--sps-muted);
	text-align: center;
	margin-top: 8px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: .12em;
	font-weight: 600;
}

/* ─── Message rows ────────────────────────────────────────────────────────── */
.sps-msg {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	animation: sps-msg-in .42s cubic-bezier(.2, .8, .2, 1);
}
.sps-msg--user { flex-direction: row-reverse; }
.sps-msg__bubble {
	max-width: 78%;
	padding: 10px 14px;
	border-radius: 16px 16px 16px 4px;
	background: var(--sps-bubble-bot-bg);
	color: var(--sps-bubble-bot-fg);
	border: 1px solid var(--sps-ring);
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
	text-wrap: pretty;
	white-space: pre-wrap;
}
.sps-msg--user .sps-msg__bubble {
	border-radius: 16px 16px 4px 16px;
	background: var(--sps-bubble-user-bg);
	color: var(--sps-bubble-user-fg);
	border: 0;
	font-weight: 500;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}

.sps-typing {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	animation: sps-msg-in .3s ease;
}
.sps-typing__bubble {
	padding: 12px 14px;
	border-radius: 16px 16px 16px 4px;
	background: var(--sps-bubble-bot-bg);
	border: 1px solid var(--sps-ring);
	display: flex;
	gap: 4px;
	align-items: center;
}
.sps-typing__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--sps-accent);
	animation: sps-dot 1.2s ease-in-out infinite;
}
.sps-typing__dot:nth-child(2) { animation-delay: .18s; }
.sps-typing__dot:nth-child(3) { animation-delay: .36s; }

.sps-followups {
	padding-left: 38px;
	animation: sps-msg-in .42s ease;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sps-followups__label {
	font-size: 10.5px;
	color: var(--sps-sub);
	letter-spacing: .16em;
	text-transform: uppercase;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-weight: 600;
}

/* ─── Booking form ────────────────────────────────────────────────────────── */
.sps-booking {
	border: 1px solid var(--sps-ring);
	background: var(--sps-surface);
	border-radius: 14px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	animation: sps-msg-in .42s cubic-bezier(.2, .8, .2, 1);
}
.sps-booking__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sps-booking__title {
	font-family: 'Fraunces', serif;
	font-size: 17px;
	color: var(--sps-fg);
	font-weight: 500;
}
.sps-booking__sub {
	font-size: 10.5px;
	color: var(--sps-accent);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
}
.sps-booking__field { display: flex; flex-direction: column; }
.sps-booking__label {
	font-size: 11px;
	color: var(--sps-sub);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 6px;
	font-weight: 600;
}
.sps-booking__input,
.sps-booking__select {
	appearance: none;
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--sps-ring);
	background: var(--sps-surface);
	color: var(--sps-fg);
	font-family: inherit;
	font-size: 13.5px;
	outline: none;
}
.sps-booking__input:focus,
.sps-booking__select:focus { border-color: var(--sps-accent); }
.sps-booking__date-wrap { position: relative; }
.sps-booking__date-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sps-accent);
	pointer-events: none;
}
.sps-booking__input--date { padding-left: 38px; }
.sps-booking__date-pretty {
	font-size: 11.5px;
	color: var(--sps-sub);
	margin-top: 6px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: .06em;
}
.sps-booking__urgency {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
}
.sps-booking__urgency-btn {
	appearance: none;
	padding: 9px 10px;
	border-radius: 10px;
	border: 1px solid var(--sps-ring);
	background: var(--sps-surface-alt);
	color: var(--sps-fg);
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	display: flex;
	flex-direction: column;
	gap: 2px;
	transition: all .15s ease;
}
.sps-booking__urgency-btn[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--urgency-color, var(--sps-accent)); border-color: var(--urgency-color, var(--sps-accent)); background: color-mix(in srgb, var(--urgency-color, var(--sps-accent)) 12%, transparent); }
.sps-booking__urgency-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
}
.sps-booking__urgency-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--urgency-color, var(--sps-accent));
}
.sps-booking__urgency-btn[aria-pressed="true"] .sps-booking__urgency-dot { box-shadow: 0 0 8px var(--urgency-color, var(--sps-accent)); }
.sps-booking__urgency-hint { font-size: 10.5px; color: var(--sps-muted); letter-spacing: .02em; }
.sps-booking__actions { display: flex; gap: 8px; margin-top: 2px; }
.sps-booking__submit {
	flex: 1;
	appearance: none;
	border: 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--sps-accent);
	color: var(--sps-navy);
	font-family: inherit;
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	transition: transform .15s ease;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--sps-accent) 25%, transparent);
}
.sps-booking__submit[disabled] { background: var(--sps-ring); color: var(--sps-muted); cursor: not-allowed; box-shadow: none; }
.sps-booking__cancel {
	appearance: none;
	border: 1px solid var(--sps-ring);
	background: transparent;
	padding: 12px 14px;
	border-radius: 10px;
	color: var(--sps-sub);
	font-family: inherit;
	font-size: 13.5px;
	cursor: pointer;
	font-weight: 500;
}
.sps-booking__legal { font-size: 11px; color: var(--sps-muted); line-height: 1.5; }

@media (max-width: 480px) {
	.sps-booking__urgency { grid-template-columns: 1fr; }
}

/* ─── Restart button (post-confirmation) ─────────────────────────────────── */
.sps-chat__restart-btn {
	width: 100%;
	padding: 11px 14px;
	border-radius: 999px;
	border: 1px solid var(--sps-ring);
	background: transparent;
	color: var(--sps-fg);
	font-family: 'Geist', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.sps-chat__restart-btn:hover {
	background: color-mix(in srgb, var(--sps-accent) 12%, transparent);
	border-color: var(--sps-accent);
}

/* ─── Confirmation card ──────────────────────────────────────────────────── */
.sps-confirmation {
	border: 1px solid color-mix(in srgb, var(--sps-accent) 40%, transparent);
	border-radius: 14px;
	padding: 16px;
	position: relative;
	background: linear-gradient(180deg, color-mix(in srgb, var(--sps-accent) 12%, transparent) 0%, transparent 100%);
	animation: sps-msg-in .5s ease;
}
.sps-confirmation__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sps-confirmation__check {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--sps-accent);
	color: var(--sps-navy);
	display: grid;
	place-items: center;
}
.sps-confirmation__title { font-family: 'Fraunces', serif; font-size: 17px; color: var(--sps-fg); }
.sps-confirmation__body { font-size: 13.5px; color: var(--sps-sub); line-height: 1.55; margin-bottom: 10px; }
.sps-confirmation__body strong { color: var(--sps-fg); font-weight: 600; }
.sps-confirmation__ref {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--sps-ring);
	border: 1px solid var(--sps-ring);
	border-radius: 10px;
	overflow: hidden;
	font-size: 11.5px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: .06em;
}
.sps-confirmation__ref > div { background: var(--sps-surface); padding: 8px 10px; }
.sps-confirmation__ref > div:nth-child(odd) { color: var(--sps-muted); }
.sps-confirmation__ref > div:nth-child(even) { color: var(--sps-fg); text-align: right; text-transform: uppercase; }

/* ─── Error banner ────────────────────────────────────────────────────────── */
.sps-error {
	display: flex;
	gap: 12px;
	padding: 14px;
	border-radius: 14px;
	border: 1px dashed #E5484D;
	background: rgba(229, 72, 77, .08);
	animation: sps-msg-in .42s ease;
	align-items: flex-start;
}
.sps-error__icon {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #E5484D;
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	flex: 0 0 auto;
}
.sps-error__title { font-family: 'Fraunces', serif; font-size: 15px; color: var(--sps-fg); }
.sps-error__body { font-size: 13px; color: var(--sps-sub); line-height: 1.5; margin-top: 6px; }
.sps-error__phone { color: var(--sps-accent); font-weight: 600; }
.sps-error__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sps-error__btn {
	appearance: none;
	border: 0;
	background: var(--sps-accent);
	color: var(--sps-navy);
	padding: 7px 12px;
	border-radius: 999px;
	font-family: inherit;
	font-weight: 700;
	font-size: 12.5px;
	cursor: pointer;
}
.sps-error__btn--ghost { background: transparent; color: var(--sps-sub); border: 1px solid var(--sps-ring); font-weight: 500; }

/* ─── WordPress theme isolation ─────────────────────────────────────────── */
/* WP themes target bare `button` elements. We scope with the ID prefix to
   produce specificity 0,2,0,0 which beats any theme class+element rule,
   then use !important as a final fallback for stubborn theme frameworks.   */

#sps-chatbot-root .sps-chip {
	background: var(--sps-surface-alt) !important;
	border: 1px solid var(--sps-ring) !important;
	border-radius: 999px !important;
	color: var(--sps-fg) !important;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: normal !important;
	padding: 8px 13px !important;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	letter-spacing: normal !important;
}
#sps-chatbot-root .sps-chip--compact {
	font-size: 12px !important;
	padding: 6px 11px !important;
}
#sps-chatbot-root .sps-chip:hover {
	background: color-mix(in srgb, var(--sps-accent) 13%, transparent) !important;
	border-color: var(--sps-accent) !important;
	color: var(--sps-fg) !important;
}

#sps-chatbot-root .sps-panel__minimize {
	background: var(--sps-surface-alt) !important;
	border: 1px solid var(--sps-ring) !important;
	border-radius: 8px !important;
	color: var(--sps-sub) !important;
	font-family: 'JetBrains Mono', ui-monospace, monospace !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	box-shadow: none !important;
	padding: 0 12px !important;
	height: 32px !important;
}
#sps-chatbot-root .sps-panel__minimize:hover {
	background: color-mix(in srgb, var(--sps-accent) 12%, transparent) !important;
	border-color: var(--sps-ring-strong) !important;
	color: var(--sps-fg) !important;
}

#sps-chatbot-root .sps-composer__btn {
	background: var(--sps-ring) !important;
	border: none !important;
	border-radius: 999px !important;
	color: var(--sps-muted) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	width: 34px !important;
	height: 34px !important;
}
#sps-chatbot-root .sps-composer__btn--primary {
	background: var(--sps-accent) !important;
	color: var(--sps-navy) !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--sps-accent) 40%, transparent) !important;
}
#sps-chatbot-root .sps-composer__btn--ghost {
	background: transparent !important;
	color: var(--sps-muted) !important;
	width: 30px !important;
	height: 30px !important;
	box-shadow: none !important;
}

/* Every widget icon is a stroke-only SVG with fill="none" set as an attribute.
   WP themes commonly ship `svg { fill: currentColor }` (for icon systems),
   and CSS always beats presentation attributes — so without this the outlined
   arrows/icons get filled into solid blobs. Force fill off; all widget SVGs
   are stroke-based so this is always correct. */
#sps-chatbot-root svg,
#sps-chatbot-root svg path {
	fill: none !important;
	max-width: none !important;
	max-height: none !important;
}
#sps-chatbot-root svg {
	vertical-align: middle;
}

#sps-chatbot-root .sps-chat__cta {
	background: var(--sps-accent) !important;
	border: 1px solid var(--sps-accent) !important;
	border-radius: 999px !important;
	color: var(--sps-navy) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

#sps-chatbot-root .sps-booking__urgency-btn {
	background: var(--sps-surface-alt) !important;
	border: 1px solid var(--sps-ring) !important;
	border-radius: 10px !important;
	color: var(--sps-fg) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	text-align: left !important;
}
#sps-chatbot-root .sps-booking__submit {
	background: var(--sps-accent) !important;
	border: none !important;
	border-radius: 10px !important;
	color: var(--sps-navy) !important;
	text-decoration: none !important;
}
#sps-chatbot-root .sps-booking__cancel {
	background: transparent !important;
	border: 1px solid var(--sps-ring) !important;
	border-radius: 10px !important;
	color: var(--sps-sub) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
#sps-chatbot-root .sps-error__btn {
	background: var(--sps-accent) !important;
	border: none !important;
	border-radius: 999px !important;
	color: var(--sps-navy) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
#sps-chatbot-root .sps-error__btn--ghost {
	background: transparent !important;
	border: 1px solid var(--sps-ring) !important;
	color: var(--sps-sub) !important;
}
#sps-chatbot-root .sps-chat__restart-btn {
	background: transparent !important;
	border: 1px solid var(--sps-ring) !important;
	border-radius: 999px !important;
	color: var(--sps-fg) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	width: 100% !important;
}

/* Floating launcher — the icon shown when the chat is minimized, which the
   user clicks to reopen. A theme's bare `button` styles can override its
   fixed positioning and dimensions, burying it in the page footer instead
   of floating in the corner. Lock the layout down hard. */
#sps-chatbot-root .sps-launcher {
	position: fixed !important;
	bottom: 22px !important;
	width: 60px !important;
	height: 60px !important;
	min-width: 60px !important;
	min-height: 60px !important;
	max-width: 60px !important;
	max-height: 60px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 999px !important;
	border: 1px solid var(--sps-accent) !important;
	background: linear-gradient(135deg, var(--sps-navy) 0%, #14365e 100%) !important;
	display: grid !important;
	place-items: center !important;
	float: none !important;
	visibility: visible !important;
	z-index: 2147483640 !important;
	cursor: pointer !important;
}
#sps-chatbot-root[data-position="right"] .sps-launcher {
	right: 22px !important;
	left: auto !important;
}
#sps-chatbot-root[data-position="left"] .sps-launcher {
	left: 22px !important;
	right: auto !important;
}

/* ─── A11y ─────────────────────────────────────────────────────────────────── */
#sps-chatbot-root :focus-visible {
	outline: 2px solid var(--sps-accent);
	outline-offset: 2px;
}
.sps-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}