/* Floating CTA engagement + panel finish. The structural component remains in
 * main.css; this layer gives the open state enough brand colour and hierarchy
 * to feel intentional without drifting into a third-party chat-widget look. */
.floating-cta__prompt {
	position: absolute;
	inset-inline-end: calc(100% + 10px);
	inset-block-end: 5px;
	z-index: var(--z-raised);
	max-width: min(220px, calc(100vw - 110px));
	/* Mobile-first: the tighter inline padding and larger type are the base,
	   and the 480px query below steps them back for wider viewports. This was
	   written the other way round, as a `max-width: 479px` override (§8.13).
	   The inset-* offsets below stay as literals on purpose: they optically
	   align the pill against the round toggle, which is not layout spacing
	   and has no meaningful value on the --s-* scale. */
	padding: var(--s-3) var(--s-4);
	border: 1px solid color-mix(in srgb, var(--brass) 42%, var(--line));
	border-radius: var(--r-full);
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--brass) 13%, var(--surface)),
		var(--surface)
	);
	box-shadow: var(--shadow-sm);
	color: var(--ink-900);
	font: inherit;
	font-size: var(--fs-small);
	font-weight: var(--fw-subhead);
	line-height: var(--lh-heading);
	white-space: nowrap;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateX(8px) scale(.98);
	transform-origin: 100% 50%;
	transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.floating-cta.has-context-prompt .floating-cta__prompt {
	opacity: 1;
	visibility: visible;
	transform: translateX(0) scale(1);
	transition-delay: 0s;
}

.floating-cta__prompt:hover,
.floating-cta__prompt:focus-visible {
	background: color-mix(in srgb, var(--brass) 18%, var(--surface));
	transform: translateX(-2px) scale(1);
}

.floating-chat,
.floating-cta__options {
	border: 1px solid color-mix(in srgb, var(--brass) 34%, var(--ink-900));
	box-shadow:
		0 20px 52px color-mix(in srgb, var(--ink-900) 18%, transparent),
		0 5px 14px color-mix(in srgb, var(--ink-900) 10%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--surface) 68%, transparent);
}

/* A dark branded cap gives the box a clear visual anchor. Brass is used as a
 * restrained accent line rather than flooding the whole panel. */
.floating-chat__head {
	margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) 0;
	padding: var(--s-4);
	padding-block-end: var(--s-3);
	background: linear-gradient(
		135deg,
		var(--ink-900),
		color-mix(in srgb, var(--ink-900) 82%, var(--accent))
	);
	border-block-end: 2px solid var(--brass);
	border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;
}

.floating-chat__name { color: var(--surface); }

.floating-chat__status {
	color: color-mix(in srgb, var(--surface) 72%, transparent);
}

.floating-chat__avatar {
	border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
	background-color: color-mix(in srgb, var(--brass) 18%, var(--ink-900));
	color: var(--surface);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 10%, transparent);
}

.floating-chat__call {
	border-color: color-mix(in srgb, var(--surface) 30%, transparent);
	background-color: color-mix(in srgb, var(--surface) 8%, transparent);
	color: var(--surface);
	box-shadow: none;
}

.floating-chat__call:hover {
	border-color: var(--brass);
	background-color: color-mix(in srgb, var(--brass) 18%, transparent);
	color: var(--surface);
}

/* The message carries a warmer brand tint so the panel body no longer reads as
 * three stacked white rectangles. */
.floating-chat__bubble {
	position: relative;
	border: 1px solid color-mix(in srgb, var(--brass) 38%, var(--line));
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--brass) 14%, var(--surface)),
		color-mix(in srgb, var(--brass) 5%, var(--bg-tint))
	);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--brass) 8%, transparent);
}

.floating-chat__bubble strong {
	color: var(--ink-900);
	font-weight: var(--fw-subhead);
}

.floating-chat__composer {
	border-color: color-mix(in srgb, var(--ink-900) 26%, var(--line));
	box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink-900) 4%, transparent);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
	overflow: hidden;
}

.floating-chat__composer:has(.floating-chat__input:focus-visible) {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Make WhatsApp the obvious completion action. This is the one place in the
 * box where a saturated colour is useful: it tells the visitor what happens
 * next and breaks the otherwise neutral body without competing with the site
 * CTA disc outside the panel. */
.floating-chat__send {
	background: var(--whatsapp);
	border-inline-start-color: color-mix(in srgb, var(--whatsapp-edge) 52%, transparent);
	color: var(--whatsapp-ink);
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.floating-chat__send:hover {
	background: var(--whatsapp-hover);
	color: var(--whatsapp-ink-hover);
}

.floating-cta.is-attention .floating-cta__toggle {
	animation: pinnacle-floating-cue 900ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes pinnacle-floating-cue {
	0%, 100% { transform: translateY(0) scale(1); }
	35% { transform: translateY(-4px) scale(1.035); }
	65% { transform: translateY(0) scale(1); }
}

/* The legacy compact panel keeps its own reveal animation. The dialog is
 * deliberately excluded so it cannot receive two competing open animations. */
.floating-chat:not(.floating-chat-dialog):not([hidden]),
.floating-cta__options:not([hidden]) {
	transform-origin: 100% 100%;
	animation: pinnacle-floating-panel-in 240ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes pinnacle-floating-panel-in {
	from { opacity: 0; transform: translateY(8px) scale(.96); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.floating-cta:has(.floating-cta__toggle[aria-expanded="true"]) .floating-cta__prompt {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* The WhatsApp-enhanced experience is a real dialog. It is centred in the
 * visible part of the viewport on every screen size. As the software keyboard
 * opens, the visual-viewport offset supplied by JS moves the centre upward and
 * the max-height shrinks to the space that remains visible. */
.floating-cta__toggle {
	text-decoration: none;
}

/* main.css gives .floating-chat a flex display. That author rule outranks the
 * browser's built-in dialog:not([open]) hiding rule, so explicitly preserve the
 * native closed state here. The dialog only becomes visible after showModal(). */
.floating-chat-dialog:not([open]) {
	display: none;
}

.floating-chat-dialog {
	position: fixed;
	inset-inline: var(--s-4);
	inset-block-start: calc(50% - (var(--floating-chat-keyboard-offset, 0px) / 2));
	inset-block-end: auto;
	margin: 0 auto;
	inline-size: auto;
	max-inline-size: var(--w-prose);
	max-block-size: calc(100% - (var(--s-5) * 2));
	padding: var(--s-5);
	border: 1px solid color-mix(in srgb, var(--brass) 34%, var(--ink-900));
	border-radius: var(--r-md);
	background-color: var(--surface);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateY(-50%);
}

.floating-chat-dialog::backdrop {
	background: color-mix(in srgb, var(--ink-900) 42%, transparent);
}

.floating-chat-dialog .floating-chat__head {
	margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) 0;
	padding: var(--s-5);
	padding-block-end: var(--s-4);
	border-radius: var(--r-md) var(--r-md) 0 0;
}

.floating-chat__close {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: var(--field-h);
	block-size: var(--field-h);
	border: 1px solid color-mix(in srgb, var(--surface) 30%, transparent);
	border-radius: var(--r-sm);
	background-color: color-mix(in srgb, var(--surface) 8%, transparent);
	color: var(--surface);
	box-shadow: none;
	cursor: pointer;
}

.floating-chat__close:hover {
	border-color: var(--brass);
	background-color: color-mix(in srgb, var(--brass) 18%, transparent);
}

.floating-chat-dialog .floating-chat__input {
	min-block-size: calc(var(--field-h) * 2);
	max-block-size: calc(var(--field-h) * 4);
	padding-block: var(--s-3);
	line-height: var(--lh-small);
	resize: vertical;
}

.floating-chat-dialog .floating-chat__send {
	block-size: auto;
	min-block-size: var(--field-h);
}

/* Only opacity animates here. Transform is reserved for centring the modal, so
 * closing cannot briefly replay a translate/scale reveal before display:none. */
.floating-chat-dialog[open] {
	animation: pinnacle-floating-dialog-in var(--dur-base) var(--ease) both;
}

@keyframes pinnacle-floating-dialog-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (min-width: 480px) {
	.floating-cta__prompt { padding-inline: var(--s-5); }
}

@media (min-width: 768px) {
	.floating-chat-dialog {
		inset-inline: var(--s-11);
		max-block-size: calc(100% - (var(--s-11) * 2));
	}
}

@media (prefers-reduced-motion: reduce) {
	.floating-cta__prompt,
	.floating-cta.is-attention .floating-cta__toggle,
	.floating-chat:not(.floating-chat-dialog):not([hidden]),
	.floating-cta__options:not([hidden]),
	.floating-chat-dialog[open] {
		animation: none;
		transition: none;
	}
}