/* Zen Support — native-feeling fintech chat widget */

/* PP Neue Montreal - Zenegy's brand font. Pulled from the existing uploads
   directory so we don't ship duplicate font files. */
@font-face {
	font-family: "Neue Montreal";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("/wp-content/uploads/2025/09/ppneuemontreal-book.woff") format("woff");
}
@font-face {
	font-family: "Neue Montreal";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("/wp-content/uploads/2025/09/PPNeueMontreal-Medium.woff2") format("woff2"),
		url("/wp-content/uploads/2025/09/PPNeueMontreal-Medium.woff") format("woff");
}
@font-face {
	font-family: "Neue Montreal";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("/wp-content/uploads/2025/09/PPNeueMontreal-Medium.woff2") format("woff2"),
		url("/wp-content/uploads/2025/09/PPNeueMontreal-Medium.woff") format("woff");
}
@font-face {
	font-family: "Neue Montreal";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("/wp-content/uploads/2025/09/ppneuemontreal-bold.woff") format("woff");
}
@font-face {
	font-family: "Neue Montreal";
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url("/wp-content/uploads/2025/09/ppneuemontreal-italic.woff") format("woff");
}

/* Constrain WordPress Twemoji and other inline images inside the widget so
   they render at text size instead of as giant images. WP's wp-emoji-release
   replaces unicode emojis with <img class="emoji"> tags. */
.zen-support img,
.zs-panel img {
	max-width: 1.25em !important;
	max-height: 1.25em !important;
	width: auto !important;
	height: auto !important;
	display: inline-block;
	vertical-align: -0.15em;
	margin: 0 0.1em;
	border: 0;
	box-shadow: none;
}

.zen-support {
	--zs-brand: #6e30fd;
	--zs-brand-dark: color-mix(in srgb, var(--zs-brand) 75%, #000);
	--zs-brand-deeper: #120c2b;
	--zs-ios:    cubic-bezier(0.32, 0.72, 0, 1);       /* iOS material - smooth, no bounce */
	--zs-glide:  cubic-bezier(0.22, 1, 0.36, 1);       /* gentle tail */
	--zs-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* reserved: FAB hover only */
	--zs-snap:   cubic-bezier(0.16, 1, 0.3, 1);        /* fast settle */
	--zs-shadow: 0 20px 50px -12px rgba(17, 24, 39, 0.25), 0 8px 16px -8px rgba(17, 24, 39, 0.18);
	--zs-shadow-btn: 0 12px 32px -8px color-mix(in srgb, var(--zs-brand) 55%, transparent),
		0 4px 12px -4px rgba(17, 24, 39, 0.18);
	--zs-radius: 18px;
	--zs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	position: fixed;
	z-index: 2147483600;
	bottom: clamp(16px, 3vw, 28px);
	font-family: "Neue Montreal", "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
}

.zen-support[data-position="bottom-right"] { right: clamp(16px, 3vw, 28px); }
.zen-support[data-position="bottom-left"]  { left:  clamp(16px, 3vw, 28px); }

/* ---------- Floating button ---------- */
.zs-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--zs-brand);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--zs-shadow-btn);
	transition: transform 380ms var(--zs-ios), box-shadow 280ms var(--zs-glide), background 220ms ease;
	outline: none;
	will-change: transform;
	transform: translate3d(var(--zs-mx, 0px), var(--zs-my, 0px), 0);
}
.zs-btn:hover {
	transform: translate3d(var(--zs-mx, 0px), calc(var(--zs-my, 0px) - 2px), 0) scale(1.03);
	background: var(--zs-brand-dark);
	box-shadow:
		0 16px 32px -10px color-mix(in srgb, var(--zs-brand) 45%, transparent),
		0 4px 12px -4px rgba(17, 24, 39, 0.16);
}
.zs-btn:active {
	transform: translate3d(var(--zs-mx, 0px), var(--zs-my, 0px), 0) scale(0.92);
	transition: transform 120ms ease-out;
}
.zs-btn:focus-visible { box-shadow: var(--zs-shadow-btn), 0 0 0 4px color-mix(in srgb, var(--zs-brand) 35%, transparent); }
.zs-btn .zs-icon-chat {
	width: 26px;
	height: 22px;
	display: block;
	transition: opacity 220ms var(--zs-glide), transform 380ms var(--zs-ios);
}
.zs-btn .zs-icon-close {
	position: absolute;
	width: 22px;
	height: 22px;
	display: block;
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
	transition: opacity 220ms var(--zs-glide), transform 380ms var(--zs-ios);
}
.zen-support[data-open="true"] .zs-btn .zs-icon-chat { opacity: 0; transform: rotate(90deg) scale(0.5); }
.zen-support[data-open="true"] .zs-btn .zs-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* Subtle pulse when the bubble is shown */
.zen-support[data-pulse="true"] .zs-btn::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: var(--zs-brand);
	opacity: 0.35;
	z-index: -1;
	animation: zs-pulse 2s ease-out infinite;
}
@keyframes zs-pulse {
	0%   { transform: scale(0.92); opacity: 0.45; }
	70%  { transform: scale(1.4);  opacity: 0;    }
	100% { transform: scale(1.4);  opacity: 0;    }
}

/* ---------- Welcome bubble ---------- */
.zs-bubble {
	position: absolute;
	bottom: 78px;
	width: max-content;
	max-width: min(280px, calc(100vw - 88px));
	background: #fff;
	color: #111827;
	padding: 12px 38px 12px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: var(--zs-shadow);
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	pointer-events: none;
	transition: opacity 320ms var(--zs-ios), transform 420ms var(--zs-ios);
}

/* Rich fintech CTA bubble - frosted glass card with subtle organic motion */
.zs-bubble--rich {
	width: max-content;
	max-width: min(320px, calc(100vw - 88px));
	min-width: 264px;
	padding: 16px 18px 16px 18px;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--zs-brand) 3%, #fff) 100%);
	border: 1px solid rgba(12, 14, 26, 0.04);
	box-shadow:
		0 30px 60px -22px color-mix(in srgb, var(--zs-brand) 18%, rgba(12, 14, 26, 0.18)),
		0 6px 14px -8px rgba(12, 14, 26, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	/* Three combined animations: entry fade-in, then gentle infinite float + breathe */
	transition: box-shadow 360ms var(--zs-ios), border-color 240ms ease;
	will-change: transform, opacity;
}
/* Default (hidden) state */
.zs-bubble--rich {
	opacity: 0;
	transform: translateY(8px) scale(0.97);
}
/* Shown state inherits opacity:1 and base transform from data-bubble selector,
   then layers organic float + breathe animations on top */
.zen-support[data-bubble="true"] .zs-bubble--rich {
	opacity: 1;
	transform: none;
	animation:
		zs-bubble-in 540ms var(--zs-ios) both,
		zs-bubble-float 5.5s ease-in-out 540ms infinite;
}
@keyframes zs-bubble-in {
	from { opacity: 0; transform: translateY(10px) scale(0.95); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes zs-bubble-float {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-2.5px) scale(1.004); }
}
/* Subtle aurora gradient sheen that drifts across the surface */
.zs-bubble--rich::before {
	content: "";
	position: absolute;
	inset: -50%;
	background:
		radial-gradient(35% 50% at 30% 30%,
			color-mix(in srgb, var(--zs-brand) 18%, transparent) 0%,
			transparent 70%),
		radial-gradient(40% 60% at 70% 70%,
			color-mix(in srgb, #3b82f6 14%, transparent) 0%,
			transparent 70%);
	opacity: 0.55;
	pointer-events: none;
	z-index: -1;
	animation: zs-bubble-aurora 14s ease-in-out infinite;
	filter: blur(8px);
}
@keyframes zs-bubble-aurora {
	0%, 100% { transform: rotate(0deg) scale(1); }
	33%      { transform: rotate(40deg) scale(1.05); }
	66%      { transform: rotate(-30deg) scale(0.95); }
}

.zs-bubble--rich:hover {
	border-color: rgba(12, 14, 26, 0.08);
	box-shadow:
		0 36px 70px -22px color-mix(in srgb, var(--zs-brand) 28%, rgba(12, 14, 26, 0.22)),
		0 6px 14px -8px rgba(12, 14, 26, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Badge with pulsing dot - three concentric rings for organic feel */
.zs-bubble-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--zs-brand-dark);
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid color-mix(in srgb, var(--zs-brand) 14%, transparent);
	padding: 5px 11px 5px 9px;
	border-radius: 999px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	white-space: nowrap;
	flex-shrink: 0;
}
.zs-bubble-title {
	text-wrap: balance; /* Avoid widow/orphan words on title wraps */
}
.zs-bubble-badge-dot {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--zs-brand);
	flex: 0 0 auto;
}
.zs-bubble-badge-dot::before,
.zs-bubble-badge-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid var(--zs-brand);
	opacity: 0;
}
.zs-bubble-badge-dot::before { animation: zs-bubble-ring 2.4s ease-out infinite; }
.zs-bubble-badge-dot::after  { animation: zs-bubble-ring 2.4s ease-out 1.2s infinite; }
@keyframes zs-bubble-ring {
	0%   { opacity: 0.7; transform: scale(1); }
	100% { opacity: 0;   transform: scale(2.8); }
}

.zs-bubble-title {
	font-size: 16px;
	font-weight: 700;
	color: #0c0e1a;
	letter-spacing: -0.025em;
	line-height: 1.3;
}
.zs-bubble-features {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	row-gap: 4px;
}
.zs-bubble-feature {
	position: relative;
	font-size: 11.5px;
	font-weight: 500;
	color: #6b7280;
	letter-spacing: -0.005em;
	white-space: nowrap;
}
.zs-bubble-feature + .zs-bubble-feature::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--zs-brand) 30%, #d1d5db);
	transform: translateY(-50%);
}
/* CTA with breathing arrow */
.zs-bubble-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zs-brand);
	letter-spacing: -0.005em;
	white-space: nowrap;
	transition: gap 320ms var(--zs-ios);
}
.zs-bubble-cta svg {
	width: 13px;
	height: 13px;
	transition: transform 320ms var(--zs-ios);
	animation: zs-bubble-arrow 2.6s ease-in-out infinite;
}
@keyframes zs-bubble-arrow {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(2px); }
}
.zs-bubble--rich:hover .zs-bubble-cta { gap: 9px; }
.zs-bubble--rich:hover .zs-bubble-cta svg { animation: none; transform: translateX(3px); }
.zen-support[data-position="bottom-right"] .zs-bubble { right: 0; }
.zen-support[data-position="bottom-left"]  .zs-bubble { left: 0; }
.zen-support[data-bubble="true"] .zs-bubble {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.zs-bubble::after {
	content: "";
	position: absolute;
	bottom: -6px;
	width: 12px;
	height: 12px;
	background: #fff;
	transform: rotate(45deg);
	box-shadow: 3px 3px 6px -2px rgba(17, 24, 39, 0.08);
}
.zen-support[data-position="bottom-right"] .zs-bubble::after { right: 22px; }
.zen-support[data-position="bottom-left"]  .zs-bubble::after { left: 22px; }
.zs-bubble-close {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 22px;
	height: 22px;
	border: 0;
	background: transparent;
	color: #6b7280;
	cursor: pointer;
	border-radius: 6px;
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.zs-bubble-close:hover { background: #f3f4f6; color: #111827; }

/* ---------- Backdrop (mobile only) ---------- */
.zs-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(12, 14, 26, 0.5);
	backdrop-filter: blur(6px) saturate(140%);
	-webkit-backdrop-filter: blur(6px) saturate(140%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 340ms var(--zs-glide), backdrop-filter 360ms var(--zs-glide);
	z-index: 2147483599;
}
.zen-support[data-open="true"] ~ .zs-backdrop { opacity: 1; pointer-events: auto; }

/* ---------- Chat panel ---------- */
.zs-panel {
	position: fixed;
	bottom: clamp(96px, 9vw, 110px);
	width: min(400px, calc(100vw - 32px));
	height: min(640px, calc(100vh - 140px));
	background: #fff;
	border-radius: var(--zs-radius);
	box-shadow: var(--zs-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(24px) scale(0.94);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity 280ms var(--zs-glide), transform 480ms var(--zs-ios);
	will-change: transform, opacity;
	z-index: 2147483600;
}
.zen-support[data-position="bottom-right"] .zs-panel { right: clamp(16px, 3vw, 28px); transform-origin: bottom right; }
.zen-support[data-position="bottom-left"]  .zs-panel { left:  clamp(16px, 3vw, 28px); transform-origin: bottom left; }
.zen-support[data-open="true"] .zs-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.zs-panel-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 16px 18px;
	background: linear-gradient(160deg, var(--zs-brand) 0%, var(--zs-brand-dark) 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.zs-panel-header::before {
	/* Subtle top-right gloss only - Apple-style restraint */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 100% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 60%);
	pointer-events: none;
}
.zs-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	flex: 0 0 auto;
	color: #fff;
	position: relative;
	z-index: 1;
}
.zs-brand-mark .zs-logo {
	width: 20px;
	height: 17px;
	display: block;
}
.zs-brand-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.2;
	position: relative;
	z-index: 1;
}
.zs-title {
	font-weight: 700;
	font-size: 15.5px;
	letter-spacing: -0.015em;
	color: #fff;
}
.zs-status {
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.zs-status .zs-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
	animation: zs-status-pulse 2.4s ease-in-out infinite;
}
@keyframes zs-status-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
	50%      { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.05); }
}
/* Offline state: grey dot, no pulse, slightly dimmer label */
.zs-status--off .zs-dot {
	background: #d1d5db;
	box-shadow: 0 0 0 3px rgba(209, 213, 219, 0.18);
	animation: none;
}
.zs-status--off { color: rgba(255, 255, 255, 0.7); }
.zs-panel-close {
	background: rgba(255, 255, 255, 0.14);
	border: 0;
	color: #fff;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 160ms ease, transform 160ms ease;
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
}
.zs-panel-close:hover { background: rgba(255, 255, 255, 0.28); transform: scale(1.05); }
.zs-panel-close svg { width: 18px; height: 18px; }

.zs-panel-body {
	flex: 1;
	background: #fafafa;
	position: relative;
	overflow: hidden;
}

/* Header back button */
.zs-back {
	background: rgba(255, 255, 255, 0.16);
	border: 0;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 4px;
	transition: background 160ms ease, transform 200ms var(--zs-ease);
}
.zs-back:hover { background: rgba(255, 255, 255, 0.28); }
.zs-back[hidden] { display: none; }
.zs-back svg { width: 18px; height: 18px; }

/* ---------- Triage screen (fintech card style) ---------- */
.zs-triage {
	padding: 22px 18px 18px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--zs-brand) 5%, #fff) 0%, #fafafa 80%);
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
}
.zs-triage-hero {
	margin-bottom: 18px;
	opacity: 0;
	transform: translateY(6px);
	animation: zs-rise 620ms var(--zs-ios) 80ms forwards;
}
.zs-triage-title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	color: #0c0e1a;
	letter-spacing: -0.025em;
	line-height: 1.2;
}
.zs-triage-sub {
	margin: 0;
	font-size: 14px;
	color: #6b7280;
	line-height: 1.5;
}
.zs-routes {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.zs-routes .zs-route {
	opacity: 0;
	transform: translateY(-10px);
	animation: zs-piano 500ms var(--zs-ios) forwards;
}
.zs-routes .zs-route:nth-child(1) { animation-delay: 100ms; }
.zs-routes .zs-route:nth-child(2) { animation-delay: 160ms; }
.zs-routes .zs-route:nth-child(3) { animation-delay: 220ms; }
.zs-routes .zs-route:nth-child(4) { animation-delay: 280ms; }
.zs-routes .zs-route:nth-child(5) { animation-delay: 340ms; }
.zs-trust {
	margin-top: auto;
	padding: 14px 4px 4px;
	font-size: 11.5px;
	color: #9ca3af;
	letter-spacing: 0.01em;
	text-align: center;
	line-height: 1.5;
	font-weight: 500;
	opacity: 0;
	animation: zs-rise 540ms var(--zs-glide) 480ms forwards;
}

@keyframes zs-rise {
	to { opacity: 1; transform: none; }
}

/* Piano-cascade: cards drop softly from above in sequence. Apple-style -
   no overshoot, no bounce, just a clean settled landing. */
@keyframes zs-piano {
	0%   { opacity: 0; transform: translateY(-10px); }
	100% { opacity: 1; transform: none; }
}
@keyframes zs-blur-in {
	from { opacity: 0; filter: blur(8px); transform: translateY(6px); }
	to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

/* Base card - works for both <button> and <a> renderings */
.zs-route {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px 13px 16px;
	border: 1px solid transparent;
	border-radius: 16px;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: none;
	transition: transform 320ms var(--zs-ios), box-shadow 280ms var(--zs-glide), border-color 220ms ease, background 220ms ease;
	width: 100%;
	box-sizing: border-box;
	box-shadow: 0 1px 3px rgba(12, 14, 26, 0.04), 0 1px 1px rgba(12, 14, 26, 0.03);
	will-change: transform;
}
a.zs-route { color: inherit; text-decoration: none; }
.zs-route:active {
	transform: translateY(0) scale(0.985) !important;
	transition: transform 120ms ease-out !important;
}

/* LIGHT variant - white background, borderless */
.zs-route[data-style="light"] {
	background: #ffffff;
	border-color: transparent;
}
.zs-route[data-style="light"]:hover {
	transform: translateY(-1px);
	border-color: transparent;
	box-shadow:
		0 1px 2px rgba(12, 14, 26, 0.04),
		0 12px 28px -16px rgba(12, 14, 26, 0.16);
}
.zs-route[data-style="light"] .zs-route-title { color: #0c0e1a; }
.zs-route[data-style="light"] .zs-route-sub { color: #6b7280; }
.zs-route[data-style="light"] .zs-route-icon {
	background: color-mix(in srgb, var(--zs-brand) 12%, #fff);
	color: var(--zs-brand);
}
.zs-route[data-style="light"] .zs-route-arrow {
	background: color-mix(in srgb, var(--zs-brand) 10%, #fff);
	color: var(--zs-brand);
}
.zs-route[data-style="light"]:hover .zs-route-arrow {
	background: var(--zs-brand);
	color: #fff;
	transform: translateX(1px);
}

/* DARK variant - soft brand-tinted light card, still borderless.
   The accent wash itself is the visual delta. */
.zs-route[data-style="dark"] {
	background:
		linear-gradient(135deg,
			color-mix(in srgb, var(--zs-brand) 7%, #fff) 0%,
			color-mix(in srgb, var(--zs-brand) 3%, #fff) 100%);
	border-color: transparent;
	color: #0c0e1a;
}
.zs-route[data-style="dark"]:hover {
	transform: translateY(-1px);
	border-color: transparent;
	background:
		linear-gradient(135deg,
			color-mix(in srgb, var(--zs-brand) 10%, #fff) 0%,
			color-mix(in srgb, var(--zs-brand) 5%, #fff) 100%);
	box-shadow:
		0 1px 2px rgba(12, 14, 26, 0.04),
		0 12px 28px -16px rgba(12, 14, 26, 0.14);
}
.zs-route[data-style="dark"] .zs-route-title { color: #0c0e1a; }
.zs-route[data-style="dark"] .zs-route-sub   { color: #6b7280; }
.zs-route[data-style="dark"] .zs-route-icon {
	background: color-mix(in srgb, var(--zs-brand) 16%, #fff);
	color: var(--zs-brand);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zs-brand) 20%, transparent);
}
.zs-route[data-style="dark"] .zs-route-arrow {
	background: color-mix(in srgb, var(--zs-brand) 14%, #fff);
	color: var(--zs-brand);
	transition: transform 320ms var(--zs-ios), background 240ms ease;
}
.zs-route[data-style="dark"]:hover .zs-route-arrow {
	transform: translateX(1px);
	background: var(--zs-brand);
	color: #fff;
}

/* Icon container */
.zs-route-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	font-size: 20px;
	line-height: 1;
	transition: background 200ms ease;
}
.zs-route-icon svg {
	width: 19px;
	height: 19px;
	display: block;
}

/* Text */
.zs-route-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.zs-route-title {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: -0.015em;
	line-height: 1.3;
}
.zs-route-sub {
	font-size: 12.5px;
	line-height: 1.4;
	letter-spacing: -0.005em;
}
.zs-route-tag {
	margin-top: 6px;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 999px;
	letter-spacing: 0.01em;
}
.zs-route[data-style="light"] .zs-route-tag {
	color: var(--zs-brand-dark);
	background: color-mix(in srgb, var(--zs-brand) 12%, #fff);
}
.zs-route[data-style="dark"] .zs-route-tag {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

/* Arrow circle */
.zs-route-arrow {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: transform 220ms var(--zs-ios), background 200ms ease, color 180ms ease;
}
.zs-route-arrow svg { width: 14px; height: 14px; display: block; }

/* ---------- Product picker ---------- */
.zs-products-host {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: none;
	background:
		radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--zs-brand) 8%, #fff) 0%, transparent 60%),
		linear-gradient(180deg, #ffffff 0%, #fafafa 80%);
}
.zs-products {
	padding: 20px 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 100%;
}
.zs-products-hero { opacity: 0; transform: translateY(4px); animation: zs-rise 540ms var(--zs-ios) 60ms forwards; }
.zs-products-title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	color: #0c0e1a;
	letter-spacing: -0.025em;
	line-height: 1.25;
}
.zs-products-sub {
	margin: 0;
	font-size: 12.5px;
	color: #6b7280;
	line-height: 1.5;
	letter-spacing: -0.005em;
}
.zs-products-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.zs-products-foot {
	margin: auto 0 0;
	text-align: center;
	font-size: 11.5px;
	color: #9ca3af;
	letter-spacing: -0.005em;
	opacity: 0;
	animation: zs-rise 540ms var(--zs-ios) 420ms forwards;
}
.zs-products-foot a { color: var(--zs-brand); font-weight: 600; text-decoration: none; }
.zs-products-foot a:hover { text-decoration: underline; }

.zs-product {
	position: relative;
	display: block;
	width: 100%;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid transparent;
	border-radius: 16px;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	overflow: hidden;
	transition:
		transform 360ms var(--zs-ios),
		box-shadow 320ms var(--zs-glide);
	box-shadow:
		0 1px 2px rgba(12, 14, 26, 0.04),
		0 1px 1px rgba(12, 14, 26, 0.03);
	will-change: transform;
	opacity: 0;
	transform: translateY(-10px);
	isolation: isolate;
}
.zs-products-list .zs-product:nth-child(1) { animation: zs-piano 500ms var(--zs-ios) 120ms forwards; }
.zs-products-list .zs-product:nth-child(2) { animation: zs-piano 500ms var(--zs-ios) 180ms forwards; }
.zs-products-list .zs-product:nth-child(3) { animation: zs-piano 500ms var(--zs-ios) 240ms forwards; }
.zs-products-list .zs-product:nth-child(4) { animation: zs-piano 500ms var(--zs-ios) 300ms forwards; }

/* Stripe hidden in default minimalist mode - kept in DOM so anyone
   wanting decoration can re-enable via custom CSS */
.zs-product-stripe { display: none; }
.zs-product-sheen { display: none; }

.zs-product:hover {
	transform: translateY(-1px);
	box-shadow:
		0 1px 2px rgba(12, 14, 26, 0.04),
		0 14px 30px -18px rgba(12, 14, 26, 0.16);
}
.zs-product:active { transform: translateY(0) scale(0.995); transition: transform 120ms ease-out; }

/* Minimal badge - tiny accent dot + label. Inline below the title row so
   it doesn't share horizontal space with the arrow chevron. */
.zs-product-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: 6px;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #9ca3af;
	background: transparent;
	padding: 0;
	border: 0;
	transition: color 240ms ease;
}
.zs-product:hover .zs-product-badge { color: color-mix(in srgb, var(--zs-accent) 70%, #6b7280); }
.zs-product-badge::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--zs-accent);
}
@keyframes zs-badge-pulse {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--zs-accent) 30%, transparent); }
	50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--zs-accent) 0%, transparent); }
}

/* Head row */
.zs-product-head {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.zs-product-logo {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--zs-accent) 7%, #fff);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: background 320ms var(--zs-ios), transform 380ms var(--zs-ios);
}
.zs-product:hover .zs-product-logo {
	background: color-mix(in srgb, var(--zs-accent) 12%, #fff);
}
.zs-product-logo img {
	width: 28px;
	height: 28px;
	display: block;
	object-fit: contain;
	border-radius: 7px;
	transition: transform 420ms var(--zs-ios);
}
.zs-product:hover .zs-product-logo img { transform: scale(1.03); }

.zs-product-text {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.zs-product-title {
	font-size: 15px;
	font-weight: 600;
	color: #0c0e1a;
	letter-spacing: -0.02em;
	line-height: 1.25;
}
.zs-product-sub {
	font-size: 12.5px;
	color: #6b7280;
	line-height: 1.4;
	letter-spacing: -0.005em;
}

/* Stille chevron - inde i head-rækken så den aligner med titlen.
   Glider 3px ind på hover. */
.zs-product-arrow {
	flex: 0 0 auto;
	align-self: center;
	width: 18px;
	height: 18px;
	background: transparent;
	color: #cbd5e1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: transform 320ms var(--zs-ios), color 220ms ease;
}
.zs-product-arrow svg { width: 16px; height: 16px; display: block; }

/* ---------- Info screen (static message) ---------- */
.zs-info {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 100%;
	box-sizing: border-box;
	animation: zs-rise 480ms var(--zs-ios) both;
}
.zs-info-back {
	align-self: flex-start;
	background: transparent;
	border: 0;
	color: var(--zs-text-soft, #6b7280);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 10px;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 200ms ease, color 200ms ease;
}
.zs-info-back svg { width: 14px; height: 14px; }
.zs-info-back:hover { background: rgba(12, 14, 26, 0.04); color: #0c0e1a; }

.zs-info-card {
	background: linear-gradient(160deg,
		color-mix(in srgb, var(--zs-accent) 10%, #fff) 0%,
		#fff 60%);
	border: 1px solid color-mix(in srgb, var(--zs-accent) 18%, transparent);
	border-radius: 18px;
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 14px 36px -22px color-mix(in srgb, var(--zs-accent) 35%, rgba(12, 14, 26, 0.18));
}
.zs-info-icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--zs-accent) 16%, #fff);
	color: var(--zs-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zs-accent) 22%, transparent);
}
.zs-info-icon svg { width: 22px; height: 22px; }
.zs-info-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #0c0e1a;
	letter-spacing: -0.005em;
}
.zs-info-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 11px 16px;
	border-radius: 12px;
	background: var(--zs-accent);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	align-self: flex-start;
	box-shadow:
		0 8px 20px -8px color-mix(in srgb, var(--zs-accent) 50%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
	transition: transform 320ms var(--zs-ios), box-shadow 240ms var(--zs-ios);
}
.zs-info-cta svg { width: 14px; height: 14px; }
.zs-info-cta:hover {
	transform: translateY(-1px);
	box-shadow:
		0 12px 26px -8px color-mix(in srgb, var(--zs-accent) 60%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.zs-info-cta:active { transform: scale(0.985); }
.zs-product:hover .zs-product-arrow {
	transform: translateX(3px);
	color: var(--zs-accent);
}

/* Feature pills - tight inline row, dot-separated style */
.zs-product-features {
	margin-top: 8px;
	padding-left: 52px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	row-gap: 4px;
	position: relative;
	z-index: 1;
}
.zs-product-feature {
	position: relative;
	font-size: 11.5px;
	font-weight: 500;
	color: #6b7280;
	letter-spacing: -0.005em;
	display: inline-flex;
	align-items: center;
	transition: color 240ms ease;
}
.zs-product-feature + .zs-product-feature::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 50%;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: #d1d5db;
	transform: translateY(-50%);
}
.zs-product:hover .zs-product-feature { color: #4b5563; }
.zs-product:hover .zs-product-feature + .zs-product-feature::before { background: #9ca3af; }

/* ---------- Qualifier form ---------- */
.zs-qualifier-host {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--zs-brand) 5%, #fff) 0%, #fafafa 80%);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: none;
}
.zs-qualifier {
	padding: 22px 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 100%;
}
.zs-qualifier > * {
	opacity: 0;
	transform: translateY(8px);
	animation: zs-rise 480ms var(--zs-ios) forwards;
}
.zs-qualifier > *:nth-child(1) { animation-delay: 40ms; }
.zs-qualifier > *:nth-child(2) { animation-delay: 100ms; }
.zs-qualifier > *:nth-child(3) { animation-delay: 160ms; }
.zs-qualifier > *:nth-child(4) { animation-delay: 220ms; }
.zs-qualifier > *:nth-child(5) { animation-delay: 280ms; }
.zs-qualifier > *:nth-child(6) { animation-delay: 340ms; }
.zs-qualifier > *:nth-child(7) { animation-delay: 380ms; }
.zs-q-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #0c0e1a;
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.zs-q-sub {
	margin: -10px 0 0;
	font-size: 13.5px;
	color: #6b7280;
	line-height: 1.5;
}
.zs-q-field { display: flex; flex-direction: column; gap: 8px; position: relative; }
/* The field with the typeahead input needs to sit above the question-options
   field that follows it, so the dropdown can extend down and overlap. Each
   field is its own stacking context (animation transform) so we just promote
   the company field's z-index. */
.zs-q-field:has(.zs-q-input-wrap) { z-index: 20; }
.zs-q-label {
	font-size: 13px;
	font-weight: 600;
	color: #0c0e1a;
	letter-spacing: -0.005em;
}
.zs-q-input-wrap { position: relative; }
.zs-q-input {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 14px;
	border: 1.5px solid #e5e7eb;
	border-radius: 12px;
	font-size: 14.5px;
	font-family: inherit;
	background: #fff;
	color: #0c0e1a;
	transition: border-color 220ms ease, box-shadow 320ms var(--zs-ios), transform 280ms var(--zs-ios);
	outline: none;
	will-change: transform, box-shadow;
}
.zs-q-input::placeholder { color: #9ca3af; }
.zs-q-input:focus {
	border-color: var(--zs-brand);
	transform: translateY(-1px);
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--zs-brand) 18%, transparent),
		0 10px 24px -10px color-mix(in srgb, var(--zs-brand) 30%, transparent);
}
.zs-q-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid rgba(12, 14, 26, 0.08);
	border-radius: 12px;
	box-shadow: 0 16px 32px -12px rgba(12, 14, 26, 0.18), 0 2px 6px -2px rgba(12, 14, 26, 0.06);
	overflow: hidden;
	z-index: 20;
	max-height: 240px;
	overflow-y: auto;
}
.zs-q-hit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 10px 14px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #f3f4f6;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: background 120ms ease;
}
.zs-q-hit:last-child { border-bottom: 0; }
.zs-q-hit:hover { background: color-mix(in srgb, var(--zs-brand) 6%, #fff); }
.zs-q-hit-name { font-size: 13.5px; font-weight: 500; color: #0c0e1a; }
.zs-q-hit-cvr { font-size: 11.5px; color: #9ca3af; flex-shrink: 0; }
.zs-q-hint {
	padding: 10px 14px;
	font-size: 12px;
	color: #856404;
	background: #fff8e1;
	line-height: 1.45;
}

.zs-q-opts { display: flex; flex-direction: column; gap: 8px; }
.zs-q-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 12px 12px 14px;
	background: #fff;
	border: 1.5px solid #e5e7eb;
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 220ms ease, background 220ms ease, transform 320ms var(--zs-ios), box-shadow 240ms var(--zs-glide);
	will-change: transform;
}
.zs-q-opt:active { transform: scale(0.99); }
/* Hide the native input - we use a custom checkmark indicator */
.zs-q-opt input[type="radio"],
.zs-q-opt input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.zs-q-opt:hover { border-color: color-mix(in srgb, var(--zs-brand) 30%, #d1d5db); }
.zs-q-opt:has(input:checked) {
	border-color: var(--zs-brand);
	background: color-mix(in srgb, var(--zs-brand) 7%, #fff);
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--zs-brand) 10%, transparent),
		0 4px 12px -8px color-mix(in srgb, var(--zs-brand) 25%, transparent);
}
.zs-q-opt-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.zs-q-opt-title {
	font-size: 14px;
	font-weight: 600;
	color: #0c0e1a;
	letter-spacing: -0.015em;
	line-height: 1.25;
}
.zs-q-opt-sub {
	font-size: 12.5px;
	color: #6b7280;
	line-height: 1.4;
	letter-spacing: -0.005em;
}
.zs-q-opt-check {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	color: #fff;
	transition: border-color 200ms ease, background 200ms ease, transform 240ms var(--zs-ios);
}
.zs-q-opt--radio .zs-q-opt-check { border-radius: 50%; }
.zs-q-opt-check svg {
	width: 14px;
	height: 14px;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 200ms ease, transform 280ms var(--zs-ios);
}
.zs-q-opt:has(input:checked) .zs-q-opt-check {
	background: var(--zs-brand);
	border-color: var(--zs-brand);
}
.zs-q-opt:has(input:checked) .zs-q-opt-check svg {
	opacity: 1;
	transform: scale(1);
}

/* Honeypot - hidden via off-screen positioning, NOT display:none which bots detect */
.zs-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none;
}

.zs-q-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 18px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, var(--zs-brand) 0%, var(--zs-brand-dark) 100%);
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	letter-spacing: -0.005em;
	box-shadow:
		0 12px 28px -8px color-mix(in srgb, var(--zs-brand) 55%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
	transition: transform 360ms var(--zs-ios), background 220ms ease, box-shadow 280ms var(--zs-glide), opacity 200ms ease;
	overflow: hidden;
	will-change: transform;
}
.zs-q-submit::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,0.25), transparent 60%);
	pointer-events: none;
}
.zs-q-submit:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow:
		0 18px 36px -8px color-mix(in srgb, var(--zs-brand) 65%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.zs-q-submit:active {
	transform: scale(0.97);
	transition: transform 120ms ease-out;
}
.zs-q-submit:disabled { opacity: 0.6; cursor: progress; transform: none; }
.zs-q-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: zs-spin 800ms linear infinite;
}

.zs-q-foot {
	margin: 0;
	font-size: 11.5px;
	color: #9ca3af;
	text-align: center;
	line-height: 1.5;
}
.zs-q-err {
	margin: 0;
	padding: 10px 12px;
	background: #fef2f2;
	border: 1px solid #fee2e2;
	border-radius: 10px;
	color: #b91c1c;
	font-size: 12.5px;
}

/* ---------- Route frames ---------- */
.zs-frames {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.zs-frame {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 360ms var(--zs-glide), transform 480ms var(--zs-ios);
}
.zs-frame.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.zs-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #fff;
}
/* Small "pop out to new tab" anchor always visible top-right of iframes */
.zs-frame-popout {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.94);
	color: var(--zs-brand);
	border-radius: 8px;
	text-decoration: none;
	box-shadow:
		0 4px 12px -4px rgba(12, 14, 26, 0.12),
		inset 0 0 0 1px rgba(110, 48, 253, 0.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: transform 240ms var(--zs-ios), background 200ms ease, color 200ms ease;
}
.zs-frame-popout svg { width: 14px; height: 14px; }
.zs-frame-popout:hover {
	transform: translateY(-1px);
	background: var(--zs-brand);
	color: #fff;
}
/* Fallback shown when iframe never loads (third-party storage block etc.) */
.zs-frame-blocked {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--zs-brand) 5%, #fff) 0%,
		#fafafa 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 4;
}
.zs-frame-blocked-card {
	background: #fff;
	border: 1px solid rgba(12, 14, 26, 0.06);
	border-radius: 16px;
	padding: 22px 22px 24px;
	max-width: 320px;
	text-align: left;
	box-shadow: 0 24px 50px -22px rgba(12, 14, 26, 0.16);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.zs-frame-blocked-card svg {
	width: 24px;
	height: 24px;
	color: var(--zs-brand);
}
.zs-frame-blocked-card p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #0c0e1a;
	letter-spacing: -0.005em;
}
.zs-frame-blocked-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: 12px;
	background: var(--zs-brand);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	align-self: flex-start;
	margin-top: 4px;
	box-shadow:
		0 8px 20px -8px color-mix(in srgb, var(--zs-brand) 50%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
	transition: transform 240ms var(--zs-ios), box-shadow 240ms var(--zs-ios);
}
.zs-frame-blocked-cta:hover {
	transform: translateY(-1px);
	box-shadow:
		0 12px 26px -8px color-mix(in srgb, var(--zs-brand) 60%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.zs-frame-blocked-cta svg { width: 14px; height: 14px; color: currentColor; }
.zs-frame-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6b7280;
	font-size: 13px;
	gap: 10px;
	background:
		linear-gradient(90deg,
			color-mix(in srgb, var(--zs-brand) 5%, #fff) 0%,
			#fff 40%,
			color-mix(in srgb, var(--zs-brand) 5%, #fff) 100%);
	background-size: 250% 100%;
	animation: zs-shimmer 1.6s ease-in-out infinite;
}
@keyframes zs-shimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}
.zs-panel-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6b7280;
	font-size: 13px;
	gap: 10px;
}
.zs-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid #e5e7eb;
	border-top-color: var(--zs-brand);
	border-radius: 50%;
	animation: zs-spin 800ms linear infinite;
}
@keyframes zs-spin { to { transform: rotate(360deg); } }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.zen-support { bottom: 14px; }
	.zen-support[data-position] { right: 14px; left: auto; }
	.zen-support[data-position="bottom-left"] { left: 14px; right: auto; }
	.zs-btn { width: 56px; height: 56px; }
	.zs-btn svg { width: 26px; height: 26px; }

	.zs-panel {
		left: 0 !important;
		right: 0 !important;
		bottom: 0;
		top: auto;
		width: 100vw;
		height: 92vh;
		max-height: calc(100vh - env(safe-area-inset-top, 0px) - 20px);
		border-radius: 22px 22px 0 0;
		transform: translateY(100%);
		transition: transform 520ms var(--zs-ios);
		opacity: 1;
	}
	.zen-support[data-open="true"] .zs-panel { transform: translateY(0); }

	.zs-panel-header {
		padding: 18px 18px 14px;
		padding-top: max(18px, env(safe-area-inset-top, 0px));
		position: relative;
	}
	.zs-panel-header::before {
		content: "";
		position: absolute;
		top: 6px;
		left: 50%;
		transform: translateX(-50%);
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: rgba(255, 255, 255, 0.3);
	}

	.zs-bubble { max-width: calc(100vw - 90px); }
}

/* Hide on mobile if disabled */
.zen-support[data-mobile="false"] { display: none; }
@media (min-width: 641px) {
	.zen-support[data-mobile="false"] { display: block; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.zs-btn, .zs-bubble, .zs-panel, .zs-backdrop { transition: none !important; animation: none !important; }
	.zen-support[data-pulse="true"] .zs-btn::before { display: none; }
}