.stachat-root {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.stachat-bubble {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 999px;
	border: none;
	/* Hard-coded rather than var(--stachat-brand) on purpose: this is just
	   the closed, floating icon - a bright, WhatsApp-style green so it
	   reads as an obvious "tap to chat" button against any part of the
	   page. The panel that opens still uses --stachat-brand (the site's
	   own purple) throughout, so the actual chat window stays on-brand. */
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
	transition: transform 0.15s ease;
	/* Same slow bob as the theme's own "call us" button that now sits
	   right above this one (see main.scss's .animate-float / @keyframes
	   floatY) - referencing it by name here instead of redefining it
	   keeps the two moving in perfect sync, and since that keyframe only
	   exists at all inside the theme's own prefers-reduced-motion guard,
	   this animation is automatically a no-op for anyone who has reduced
	   motion turned on, without needing its own media query here. */
	animation: floatY 7s ease-in-out infinite;
}
.stachat-bubble:hover {
	transform: scale(1.06);
}

/* The speech-bubble icon gives a short wiggle every few seconds to draw the
   eye, then holds still. Only under the no-preference media query, so
   visitors who have reduced motion turned on see the static icon. */
.stachat-bubble svg {
	transform-origin: 50% 60%;
}
@media (prefers-reduced-motion: no-preference) {
	.stachat-bubble svg {
		animation: stachat-wiggle 4s ease-in-out infinite;
	}
}
@keyframes stachat-wiggle {
	0%, 60%, 100% { transform: rotate(0deg); }
	65% { transform: rotate(-12deg); }
	70% { transform: rotate(10deg); }
	75% { transform: rotate(-8deg); }
	80% { transform: rotate(5deg); }
	85% { transform: rotate(0deg); }
}

/* The small white-ringed green "online" dot Messenger layers onto the
   corner of every chat head/avatar - same look on the closed bubble and
   the panel header's avatar below. Messenger's own online green (not
   --stachat-brand or the bubble's WhatsApp green): it needs to read as a
   status indicator, not just match whatever's behind it. */
.stachat-status-dot {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 15px;
	height: 15px;
	border-radius: 999px;
	background: #31a24c;
	border: 2.5px solid #fff;
}
.stachat-header-avatar .stachat-status-dot {
	width: 11px;
	height: 11px;
	border-width: 2px;
}

.stachat-panel {
	position: absolute;
	right: 0;
	bottom: 76px;
	width: 360px;
	max-width: calc(100vw - 24px);
	height: 520px;
	max-height: calc(100vh - 140px);
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px) scale(0.98);
	transform-origin: bottom right;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.stachat-root.is-open .stachat-panel {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.stachat-header {
	background: var(--stachat-brand, #501CA8);
	color: #fff;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.stachat-header-info {
	display: flex;
	align-items: center;
	gap: 10px;
}
.stachat-header-avatar {
	position: relative;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
}
.stachat-header-avatar svg {
	width: 19px;
	height: 19px;
}
.stachat-header-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.stachat-header-name {
	font-weight: 700;
	font-size: 15px;
}
.stachat-header-status {
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);
}

.stachat-close {
	background: rgba(255, 255, 255, 0.18);
	border: none;
	color: #fff;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.stachat-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.stachat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f7f6fa;
}

.stachat-msg {
	max-width: 82%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
}
.stachat-msg-bot {
	align-self: flex-start;
	background: #fff;
	border: 1px solid #e6e2ee;
	color: #26212e;
	border-bottom-left-radius: 4px;
}
.stachat-msg-bot a {
	color: var(--stachat-brand, #501CA8);
	font-weight: 600;
}
.stachat-msg-user {
	align-self: flex-end;
	background: var(--stachat-brand, #501CA8);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.stachat-typing {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 14px;
}
.stachat-typing span {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #b6adc7;
	animation: stachat-dot 1.2s ease-in-out infinite;
}
.stachat-typing span:nth-child(2) { animation-delay: 0.15s; }
.stachat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes stachat-dot {
	0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

.stachat-quick-replies {
	/* Lives inside .stachat-messages (as the reply's own last "turn"), not
	   a separate fixed-height bar below it - that way it scrolls away
	   with old messages instead of permanently eating into the space
	   available for reading the current one. */
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.stachat-quick-reply {
	border: 1.5px solid var(--stachat-brand, #501CA8);
	background: #fff;
	color: var(--stachat-brand, #501CA8);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.stachat-quick-reply:hover {
	background: var(--stachat-brand, #501CA8);
	color: #fff;
}

.stachat-form {
	display: flex;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid #ece8f2;
	flex-shrink: 0;
	background: #fff;
}
.stachat-input {
	flex: 1;
	min-width: 0;
	border: 1px solid #ddd7e6;
	border-radius: 999px;
	padding: 10px 16px;
	/* 16px, not 14px: any smaller and iOS/Android auto-zoom the whole page
	   in on focus, since they assume text under 16px is too small to read -
	   that's the "screen zooms in when I tap the message box" bug, not an
	   actual size change on the chat window itself. */
	font-size: 16px;
	outline: none;
}
.stachat-input:focus {
	border-color: var(--stachat-brand, #501CA8);
}
.stachat-send {
	background: var(--stachat-brand, #501CA8);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
}
.stachat-send:hover {
	filter: brightness(1.08);
}

/* Teaser notification: a white card with a speech-bubble tail pointing at
   the chat head, bold name + a lighter preview line, and its own small
   dismiss circle - the same unprompted "new message" look Messenger shows
   beside a contact's chat head. Hidden by default/collapsed down near the
   bubble, then eases up into place once chat-widget.js adds .is-visible. */
.stachat-teaser {
	position: absolute;
	right: 76px;
	bottom: 14px;
	width: 236px;
	max-width: calc(100vw - 110px);
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
	padding: 13px 16px;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translate(8px, 8px) scale(0.92);
	transform-origin: bottom right;
	transition: opacity 0.22s ease, transform 0.22s ease;
}
.stachat-teaser.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(0, 0) scale(1);
}
.stachat-root.is-open .stachat-teaser {
	/* The panel covers this corner once open; avoid a stray click-through
	   or a dismiss button fighting the panel's own close button. */
	display: none;
}
.stachat-teaser::after {
	content: '';
	position: absolute;
	right: -6px;
	bottom: 22px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 3px;
	transform: rotate(45deg);
}
.stachat-teaser-name {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: #050505;
	margin-bottom: 3px;
}
.stachat-teaser-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: #65676b;
}
.stachat-teaser-close {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	border: 1px solid #e4e6eb;
	background: #fff;
	color: #65676b;
	font-size: 11px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.stachat-teaser-close:hover {
	background: #f2f3f5;
}

.stachat-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 480px) {
	.stachat-root {
		right: 12px;
		bottom: 12px;
	}
	.stachat-panel {
		width: calc(100vw - 24px);
		/* A comfortable, consistently-proportioned mobile size (~70% of the
		   viewport) rather than the previous 100vh - 120px, which stretched
		   almost edge-to-edge on a typical phone and made the window feel
		   oversized. The calc() is still there as a floor so it never gets
		   clipped on a short viewport. */
		height: min(70vh, 560px);
		max-height: calc(100vh - 88px);
	}
	.stachat-teaser {
		right: 68px;
		bottom: 6px;
		width: 200px;
	}
}

/* On a short viewport (an older/smaller phone in landscape or portrait,
   e.g. iPhone SE), the closed bubble sits low enough to land on top of
   whatever page content happens to be there too - shrinking it and
   pulling it a little closer to the corner buys back some of that
   collision room without changing anything on a normal-height screen. */
@media (max-height: 700px) {
	.stachat-root {
		bottom: 10px;
	}
	.stachat-bubble {
		width: 48px;
		height: 48px;
	}
	.stachat-teaser {
		right: 62px;
		bottom: 2px;
	}
}

/* The theme's full-screen mobile nav drawer adds this class to <html>
   while it's open (src/js/modules/mobile-drawer.js). Without this, the
   bubble - and the chat panel, if it was left open - would float on top
   of the drawer regardless of the drawer's own z-index, since a fixed,
   viewport-level element like this one isn't contained by it. */
html.mobile-drawer-open .stachat-root {
	display: none;
}