/* ============================================================================
 * Rex Dock — persistent corner bubble the hero mascot flies into on scroll.
 * Layer map: booking pill 1040 · chat FAB 1041 · dock 1042 · chat panel 1080.
 * The .wg-rex-dock element is the fixed corner SLOT (it never transforms);
 * .wg-rex-dock__flyer carries the WAAPI flight transforms; .wg-rex-dock__bubble
 * carries CSS state animations (bob, landing, wiggle). Keeping the three
 * layers separate avoids transform ownership conflicts.
 * ==========================================================================*/

.wg-rex-dock {
	--wg-dock-gap: clamp(1rem, 2.5vw, 1.75rem);
	--wg-dock-size: 76px;
	position: fixed;
	right: var(--wg-dock-gap);
	bottom: var(--wg-dock-gap);
	width: var(--wg-dock-size);
	height: var(--wg-dock-size);
	z-index: 1042;
}
/* The dock shares the booking pill's baseline — one uniform bottom row.
   (.wg-rex-dock--stacked is retired; cached HTML may still carry the class.) */
.wg-rex-dock--stacked { bottom: var(--wg-dock-gap); }
@media (max-width: 767.98px) {
	.wg-rex-dock { --wg-dock-size: 58px; }
}
/* Keep the whole bottom row (pill + Rex) above the mobile sticky CTA bar.
   --wg-sticky-h is the bar's measured height (set by custom.js on show). */
body.has-sticky-bar .wg-rex-dock,
body.has-sticky-bar .wg-rex-dock--stacked { bottom: calc(var(--wg-dock-gap) + var(--wg-sticky-h, 72px) + .6rem); }

/* idle = parked & invisible but still measurable (flights need the slot rect) */
.wg-rex-dock.is-idle { visibility: hidden; pointer-events: none; }
.wg-rex-dock.is-flying { pointer-events: none; }

.wg-rex-dock__flyer {
	position: relative;
	width: 100%;
	height: 100%;
	will-change: transform;
	transform-origin: top left;
}

/* ---------- the bubble (Rex's face) ---------- */
.wg-rex-dock__bubble {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--wg-cream, #FFF6F4);
	cursor: pointer;
	transition: transform 0.25s var(--wg-ease, ease), box-shadow 0.25s ease;
}
.wg-rex-dock__bubble svg,
.wg-rex-dock__bubble img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
	background: var(--wg-cream, #FFF6F4);
	object-fit: contain;
	pointer-events: none;
}
.wg-rex-dock.is-docked .wg-rex-dock__bubble {
	box-shadow: var(--wg-shadow-pop, 0 18px 44px rgba(35, 88, 104, 0.16));
	animation: wg-rexdock-bob 4.6s ease-in-out infinite; /* 0% = identity: seamless start/stop */
}
.wg-rex-dock.is-docked .wg-rex-dock__bubble:hover { transform: translateY(-3px) scale(1.04); }
.wg-rex-dock__bubble:focus-visible {
	outline: 3px solid var(--wg-sky, #69C1F1);
	outline-offset: 3px;
}

@keyframes wg-rexdock-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

/* ---------- one-shots ---------- */
.wg-rex-dock__bubble.is-landing { animation: wg-rexdock-land 0.38s var(--wg-ease, ease); }
@keyframes wg-rexdock-land {
	0% { transform: scale(1.06, 0.92); }
	55% { transform: scale(0.97, 1.03); }
	100% { transform: scale(1); }
}

.wg-rex-dock__bubble.is-wiggle { animation: wg-rexdock-wiggle 0.7s ease-in-out; }
@keyframes wg-rexdock-wiggle {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(4deg); }
	55% { transform: rotate(-4deg); }
	80% { transform: rotate(2deg); }
}

.wg-rex-dock__pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
}
.wg-rex-dock__pulse.is-live { animation: wg-rexdock-pulse 0.9s ease-out 2; }
@keyframes wg-rexdock-pulse {
	0% { box-shadow: 0 0 0 0 rgba(244, 157, 163, 0.55); }
	100% { box-shadow: 0 0 0 24px rgba(244, 157, 163, 0); }
}

/* Closable speech bubble beside the docked mascot (greeting + timed nudges) */
.wg-rex-dock__say {
	position: absolute;
	/* Above the dock (not beside it): the dock now shares the booking pill's
	   baseline, so a side-anchored bubble would cover the centered pill. */
	right: 0;
	bottom: calc(100% + 10px);
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	width: max-content;
	max-width: min(280px, calc(100vw - var(--wg-dock-size) - 4 * var(--wg-dock-gap)));
	background: #fff;
	border-radius: 20px 20px 4px 20px;
	box-shadow: var(--wg-soft-2, 0 12px 30px rgba(35, 88, 104, 0.10));
	padding: 0.6em 0.6em 0.6em 1em;
	transform-origin: bottom right;
}
.wg-rex-dock__say[hidden] { display: none; }
.wg-rex-dock__say.is-in { animation: wg-rexdock-say-in 0.35s var(--wg-ease, ease); }
@keyframes wg-rexdock-say-in {
	0% { opacity: 0; transform: translateY(6px) scale(0.9); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
.wg-rex-dock__say-text {
	border: 0;
	background: none;
	padding: 0;
	text-align: left;
	color: var(--wg-blue, #235868);
	font-family: var(--font-primary, sans-serif);
	font-weight: 600;
	font-size: 0.85rem;
	line-height: 1.4;
	cursor: pointer;
}
.wg-rex-dock__say-text:hover { text-decoration: underline; }
.wg-rex-dock__say-close {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	border: 0;
	border-radius: 50%;
	background: rgba(35, 88, 104, 0.08);
	color: var(--wg-blue, #235868);
	font-size: 0.6rem;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.wg-rex-dock__say-close:hover { background: rgba(35, 88, 104, 0.18); }

/* corner-only mode pop-in */
.wg-rex-dock.is-corner-in { animation: wg-rexdock-pop 0.4s var(--wg-ease, ease); }
@keyframes wg-rexdock-pop {
	0% { opacity: 0; transform: scale(0.5); }
	100% { opacity: 1; transform: scale(1); }
}

/* ---------- hero-side helpers ---------- */
.wgx-hero__stage .wgx-ring.is-rexdock-away {
	opacity: 0.25;
	transition: opacity 0.45s ease;
	pointer-events: none;
}
.wgx-hero__stage .wgx-ring.wg-rexdock-hold { animation: none !important; }
/* Once Rex has docked, the stage's entrance reveal is permanently satisfied so
   a deep-load return flight never lands on a moving target. */
.wgx-hero__stage.wg-rexdock-settled { animation: none !important; opacity: 1 !important; }

/* ---------- coexistence ---------- */
/* Wherever the dock owns the page (server-rendered wg-has-rexdock on the front
   page) the hero mascot is the chat entry — the static FAB never shows there,
   not even before the first flight. */
body.wg-has-rexdock .wg-rex-fab,
body.wg-rexdock-active .wg-rex-fab { opacity: 0; visibility: hidden; pointer-events: none; }
body.wg-rex-open .wg-rex-dock { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.wg-rex-dock.is-docked .wg-rex-dock__bubble { animation: none; }
	.wg-rex-dock__bubble.is-landing,
	.wg-rex-dock__bubble.is-wiggle,
	.wg-rex-dock__pulse.is-live,
	.wg-rex-dock__say.is-in,
	.wg-rex-dock.is-corner-in { animation: none; }
	.wgx-hero__stage .wgx-ring.is-rexdock-away { transition: none; }
}