/**
 * Floating contact (WhatsApp + quote) with motion, Nov 2026.
 * Loaded only in the hidden tests (`?gm_v2=1`, `?gm_pdp=v2`) together with
 * assets/js/floating-contact-v2.js, which drives the `data-fc` states:
 * idle → typing → open → min (message folded, unread mark on the button).
 * Square shapes, hard steps, brand v3 colours. No motion when the visitor
 * asks for reduced motion.
 */

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact {
	--fc-ink: #111111;
	--fc-amber: #de881f;
	--fc-honey: #f9b233;
	--fc-ease: cubic-bezier(0.2, 0.9, 0.2, 1);
	gap: 8px;
}

/* ── Buttons: slide in one after the other ─────────────────────────────── */
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__item {
	position: relative;
	overflow: visible;
	animation: gm-fc-in 560ms var(--fc-ease) 700ms both;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__item--contact {
	animation-delay: 840ms;
}

@keyframes gm-fc-in {
	0% { transform: translateX(80px); }
	62% { transform: translateX(-5px); }
	100% { transform: translateX(0); }
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__icon {
	position: relative;
	border-width: 2px;
	overflow: hidden;
	transition: background-color 160ms ease, color 160ms ease;
}

/* Selected: the whole button goes black, label white (approved direction). */
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__item:is(:hover, :focus-visible) {
	background: var(--fc-ink);
	border-width: 0;
	border-color: var(--fc-ink);
	color: #fff;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__label {
	font-family: var(--gm-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* The icon leaves through the top and comes back from below. */
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__item:is(:hover, :focus-visible) .gm-floating-contact__icon :is(svg, .gm-icon) {
	animation: gm-fc-swap 420ms var(--fc-ease);
}

@keyframes gm-fc-swap {
	0% { transform: translateY(0); }
	45% { transform: translateY(-34px); }
	46% { transform: translateY(34px); }
	100% { transform: translateY(0); }
}

/* ── Calling: square echoes around the WhatsApp block + icon shake ─────── */
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__item--whatsapp::before,
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__item--whatsapp::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 46px;
	height: 46px;
	box-sizing: border-box;
	border: 2px solid var(--fc-ink);
	opacity: 0;
	pointer-events: none;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__item--whatsapp::after {
	border-color: var(--fc-amber);
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact:is([data-fc="typing"], [data-fc="min"]) .gm-floating-contact__item--whatsapp:not(:hover)::before {
	animation: gm-fc-echo 3.6s var(--fc-ease) infinite;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact:is([data-fc="typing"], [data-fc="min"]) .gm-floating-contact__item--whatsapp:not(:hover)::after {
	animation: gm-fc-echo 3.6s var(--fc-ease) 220ms infinite;
}

@keyframes gm-fc-echo {
	0% { opacity: 0.9; transform: scale(1); }
	28% { opacity: 0; transform: scale(1.75); }
	100% { opacity: 0; transform: scale(1.75); }
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact:is([data-fc="typing"], [data-fc="min"]) .gm-floating-contact__item--whatsapp:not(:hover) .gm-floating-contact__icon :is(svg, .gm-icon) {
	animation: gm-fc-ring 3.6s steps(1, end) infinite;
	transform-origin: 50% 60%;
}

@keyframes gm-fc-ring {
	0% { transform: rotate(-14deg); }
	4% { transform: rotate(12deg); }
	8% { transform: rotate(-9deg); }
	12% { transform: rotate(6deg); }
	16%, 100% { transform: rotate(0); }
}

/* Unread mark: a honey square with a "1". */
body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-badge {
	position: absolute;
	top: -7px;
	right: 37px;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	box-sizing: border-box;
	background: var(--fc-honey);
	border: 2px solid var(--fc-ink);
	color: var(--fc-ink);
	font-family: var(--gm-font-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="min"] .gm-fc-badge {
	display: inline-flex;
	animation: gm-fc-pop 360ms steps(4, end) both;
}

@keyframes gm-fc-pop {
	0% { transform: scale(0); }
	70% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

/* ── "Typing…" box: three squares stepping up in turn ──────────────────── */
body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-typing {
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	display: none;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	background: var(--fc-ink);
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-typing::after {
	content: '';
	position: absolute;
	right: 17px;
	bottom: -6px;
	width: 12px;
	height: 6px;
	background: var(--fc-ink);
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="typing"] .gm-fc-typing {
	display: inline-flex;
	animation: gm-fc-wipe 260ms var(--fc-ease) both;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-typing i {
	width: 7px;
	height: 7px;
	background: #fff;
	animation: gm-fc-dot 900ms steps(2, end) infinite;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-typing i:nth-child(2) {
	background: var(--fc-honey);
	animation-delay: 150ms;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-typing i:nth-child(3) {
	background: var(--fc-amber);
	animation-delay: 300ms;
}

@keyframes gm-fc-dot {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(-7px); }
}

@keyframes gm-fc-wipe {
	0% { clip-path: inset(100% 0 0 100%); }
	100% { clip-path: inset(0 0 -8px 0); }
}

/* ── Message: opens from the button corner, words arrive one by one ────── */
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__bubble {
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	width: min(300px, calc(100vw - 16px));
	padding: 0;
	border: 1.5px solid var(--fc-ink);
	opacity: 1;
	transform: none;
	pointer-events: none;
	visibility: hidden;
	clip-path: inset(100% 0 0 100%);
	transition:
		clip-path 420ms var(--fc-ease),
		visibility 0s linear 420ms;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="open"] .gm-floating-contact__bubble,
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="min"]:is(:hover, :focus-within) .gm-floating-contact__bubble,
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="quiet"]:not(.is-dismissed):is(:hover, :focus-within) .gm-floating-contact__bubble {
	visibility: visible;
	pointer-events: auto;
	clip-path: inset(0 0 -10px 0);
	transition:
		clip-path 420ms var(--fc-ease),
		visibility 0s;
}

/* A bridge so the pointer can travel from the button to the message. */
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__bubble::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	height: 10px;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__bubble::after {
	right: 17px;
	bottom: -7px;
	left: auto;
	width: 12px;
	height: 6px;
	background: var(--fc-ink);
	border: 0;
	transform: none;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 44px 0 12px;
	background: var(--fc-ink);
	color: #fff;
	font-family: var(--gm-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-head small {
	color: var(--fc-honey);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-live {
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	background: var(--fc-amber);
	animation: gm-fc-blink 1.4s steps(1, end) infinite;
}

@keyframes gm-fc-blink {
	0%, 60% { background: var(--fc-amber); }
	61%, 100% { background: var(--fc-honey); }
}

/* Palette band in hard blocks; it runs across once when the message opens. */
body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-band {
	display: block;
	height: 4px;
	background: linear-gradient(90deg, #de881f 0 46%, #f9b233 46% 62%, #c8491b 62% 76%, #7d3b12 76% 90%, #4e1e04 90% 100%);
	transform-origin: 0 50%;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="open"] .gm-fc-band,
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="min"]:is(:hover, :focus-within) .gm-fc-band,
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="quiet"]:not(.is-dismissed):is(:hover, :focus-within) .gm-fc-band {
	animation: gm-fc-band 620ms steps(8, end) 260ms both;
}

@keyframes gm-fc-band {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__bubble p {
	margin: 0;
	padding: 13px 14px 12px;
	color: #2b2b2b;
	font-family: var(--gm-font-body);
	font-size: 14px;
	line-height: 1.45;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-w {
	display: inline-block;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="open"] .gm-fc-w,
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="min"]:is(:hover, :focus-within) .gm-fc-w,
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="quiet"]:not(.is-dismissed):is(:hover, :focus-within) .gm-fc-w {
	animation: gm-fc-word 300ms var(--fc-ease) both;
	animation-delay: calc(var(--i) * 42ms + 380ms);
}

@keyframes gm-fc-word {
	0% { opacity: 0; transform: translateY(0.55em); }
	100% { opacity: 1; transform: translateY(0); }
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-reply {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 40px;
	margin: 0 14px 14px;
	padding: 0 12px;
	background: var(--fc-ink);
	color: #fff;
	font-family: var(--gm-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 140ms ease, color 140ms ease;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-reply b {
	font-weight: 700;
	transition: transform 200ms var(--fc-ease);
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-reply:is(:hover, :focus-visible) {
	background: var(--fc-amber);
	color: var(--fc-ink);
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-reply:is(:hover, :focus-visible) b {
	transform: translateX(5px);
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="open"] .gm-fc-reply,
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="min"]:is(:hover, :focus-within) .gm-fc-reply,
body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact[data-fc="quiet"]:not(.is-dismissed):is(:hover, :focus-within) .gm-fc-reply {
	animation: gm-fc-word 320ms var(--fc-ease) both;
	animation-delay: calc(var(--n, 16) * 42ms + 520ms);
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__bubble-close {
	z-index: 1;
	width: 40px;
	height: 34px;
	color: #fff;
	border-radius: 0;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__bubble-close:is(:hover, :focus-visible) {
	background: var(--fc-amber);
	color: var(--fc-ink);
	outline: 0;
}

body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__bubble-close:is(:hover, :focus-visible) :is(svg, .gm-icon) {
	transform: rotate(90deg);
	transition: transform 200ms var(--fc-ease);
}

/* Phone: buttons sit side by side, WhatsApp first. */
@media (max-width: 760px) {
	body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__bubble::after,
	body:is(.gm-site-v2, .gm-pdp-v2) .gm-fc-typing::after {
		right: 71px;
		left: auto;
	}

	body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__item:is(:hover, :focus-visible) {
		width: 46px;
		padding: 0;
	}

	body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__item:is(:hover, :focus-visible) .gm-floating-contact__label {
		max-width: 0;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact *,
	body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact *::before,
	body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact *::after,
	body:is(.gm-site-v2, .gm-pdp-v2) .gm-floating-contact__item {
		animation: none !important;
		transition: none !important;
	}
}