/**
 * Maria chat widget. Royal Coral tokens.
 *
 * Positioning: the chat bubble sits ABOVE the sticky mobile action bar, never on top
 * of it. The action bar owns the bottom edge on mobile because Call, Text and Get
 * Quote are the primary conversions. A widget covering them is a real, observed
 * failure mode rather than a hypothetical one.
 *
 * The pop-up suppresses the bubble entirely while it is open, so only one floating
 * element is ever visible.
 */

.mc-chat {
	--mc-navy: #174A7E;
	--mc-sky: #2B8FE5;
	--mc-coral: #FF7A66;
	--mc-ink: #253746;
	--mc-muted: #607080;
	--mc-tint: #EAF6FF;
	--mc-line: #d7e6f2;
	--mc-bar: 0px;

	font-family: 'Source Sans 3', system-ui, sans-serif;
}

/* Suppressed while the pop-up is up. Only one floating element at a time. */
html.mc-popup-active .mc-chat__bubble,
html.mc-popup-active .mc-chat__nudge {
	display: none;
}

/* ---- Bubble ---- */

.mc-chat__bubble {
	position: fixed;
	right: 20px;
	bottom: calc( 20px + var( --mc-bar ) );
	z-index: 60;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var( --mc-tint );
	cursor: pointer;
	box-shadow: 0 10px 28px rgba( 23, 74, 126, .3 );
	transition: transform .2s;
	overflow: visible;
}

.mc-chat__bubble:hover {
	transform: translateY( -3px );
}

.mc-chat__bubble:focus-visible {
	outline: 3px solid var( --mc-navy );
	outline-offset: 3px;
}

/*
 * WHY THESE AVATARS ASK FOR `medium`, NOT `thumbnail`.
 *
 * Maria's portrait is 1024x1536, a 2:3 upright. WordPress's `thumbnail` size is a HARD
 * CROP to 150x150 taken from the centre of the frame, so the generated file already had
 * the top of her head and everything below her waist cut away. No object-position could
 * recover it: the pixels were gone before CSS ever saw them, and `center top` was showing
 * the top of an already-decapitated crop, which is why it looked deliberate rather than
 * broken.
 *
 * `medium` is 200x300 and uncropped, so the whole head is in the file and the framing
 * below is a real choice rather than damage control. Anything that changes the avatar
 * source must keep an UNCROPPED size for the same reason.
 */
.mc-chat__bubble img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.mc-chat__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 22px;
	height: 22px;
	border-radius: 11px;
	background: var( --mc-coral );
	color: #fff; /* White on coral (2.55:1). Ruled three times: text on coral is white sitewide. */
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 22px;
	text-align: center;
	border: 2px solid #fff;
}

.mc-chat.is-open .mc-chat__badge {
	display: none;
}

/* ---- Launcher prompt ---- */

/*
 * WHY IT SITS BESIDE THE LAUNCHER AND NOT ABOVE IT.
 *
 * "Above the launcher" is already taken. The back-to-top pill in mater-templates is
 * fixed to the same right-hand column, directly over the chat button, and the gap it
 * leaves is 14px at desktop and 11px at 390px. Nothing legible fits in that, so a
 * prompt stacked above the avatar would sit on top of another control rather than in
 * a space of its own. Measured on the live site, not assumed.
 *
 * Beside it, sharing the launcher's bottom edge, the prompt occupies the band the
 * launcher already owns. It cannot reach the back-to-top pill above or the sticky
 * action bar below, and it stays clear of both if either of them moves vertically,
 * because it is anchored to the launcher rather than to a number.
 *
 * KEEP IT TO TWO LINES AT 390px. The prompt grows upward, and the third line is the
 * one that would reach the back-to-top pill. max-width below is set so the shipped
 * English string wraps to two; a translation long enough to need three should be
 * shortened rather than allowed to run.
 */
.mc-chat__nudge {
	position: fixed;
	z-index: 59; /* Under the launcher and the panel. It is never the important thing. */
	right: calc( 20px + 64px + 10px ); /* Clear of the 64px launcher plus a 10px gap. */
	bottom: calc( 20px + var( --mc-bar ) ); /* The launcher's own bottom edge. */
	display: flex;
	align-items: flex-start;
	gap: 4px;
	max-width: min( 264px, calc( 100vw - 130px ) );
	padding: 9px 8px 9px 14px;
	background: #fff;
	border: 1px solid var( --mc-line );
	border-radius: 16px;
	border-bottom-right-radius: 6px;
	box-shadow: 0 10px 28px rgba( 23, 74, 126, .22 );
	animation: mc-nudge-in .3s cubic-bezier( .2, .7, .3, 1 );
}

/*
 * The same trap the panel fell into, and for the same reason: `display: flex` above is
 * an author declaration, the `[hidden] { display: none }` it needs to obey is in the
 * user-agent sheet, and author beats UA. Without this line the prompt is painted on
 * every page load regardless of the attribute, which is exactly the "instantly, and
 * then forever" behaviour it is supposed to avoid.
 */
.mc-chat__nudge[hidden] { display: none; }

/* Gone the moment the panel is open. The panel says all of this and more. */
.mc-chat.is-open .mc-chat__nudge { display: none; }

/* The tail, pointing at Maria. */
.mc-chat__nudge::after {
	content: '';
	position: absolute;
	right: -6px;
	bottom: 15px;
	width: 11px;
	height: 11px;
	background: #fff;
	border-right: 1px solid var( --mc-line );
	border-bottom: 1px solid var( --mc-line );
	transform: rotate( -45deg );
}

.mc-chat__nudge-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var( --mc-ink );
	cursor: pointer;
}

/*
 * 28px, not 24px. WCAG 2.2 puts the floor at 24x24 and this is a small control sitting
 * beside a 56px one, which is precisely the case where the floor is too low.
 */
.mc-chat__nudge-close {
	flex: none;
	width: 28px;
	height: 28px;
	margin: -3px -3px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var( --mc-muted );
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.mc-chat__nudge-close:hover {
	background: var( --mc-tint );
	color: var( --mc-ink );
}

.mc-chat__nudge-close:focus-visible {
	outline: 3px solid var( --mc-navy );
	outline-offset: 2px;
}

@keyframes mc-nudge-in {
	from { opacity: 0; transform: translateY( 8px ) scale( .96 ); }
	to { opacity: 1; transform: none; }
}

/* ---- Panel ---- */

.mc-chat__panel {
	position: fixed;
	right: 20px;
	bottom: calc( 96px + var( --mc-bar ) );
	z-index: 61;
	width: 380px;
	max-width: calc( 100vw - 40px );
	height: 560px;
	max-height: calc( 100vh - 140px );
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba( 9, 30, 52, .35 );
	animation: mc-chat-in .28s cubic-bezier( .2, .7, .3, 1 );
}

/*
 * The `display: flex` above beats the user-agent's `[hidden] { display: none }`, because
 * any author declaration outranks the UA sheet. Without this rule the panel is painted on
 * every page load no matter what the attribute says.
 *
 * That failure is worse than it sounds. chat.js drives everything from openPanel(), which
 * is what fetches the tree and renders the welcome node; it only runs on a bubble click.
 * So a visitor's first impression was Maria sitting open with a completely empty message
 * area and a Send button, while the API was healthy and all 61 nodes were present. The
 * panel looked broken precisely because it was never actually opened.
 */
.mc-chat__panel[hidden] { display: none; }

@keyframes mc-chat-in {
	from { opacity: 0; transform: translateY( 16px ) scale( .98 ); }
	to { opacity: 1; transform: none; }
}

.mc-chat__header {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 14px 16px;
	background: var( --mc-navy );
	color: #fff;
	flex: none;
}

.mc-chat__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	border: 2px solid rgba( 255, 255, 255, .5 );
	flex: none;
}

.mc-chat__header strong {
	display: block;
	font-family: 'Sora', system-ui, sans-serif;
	font-size: 16px;
	letter-spacing: -.02em;
}

.mc-chat__status {
	display: block;
	font-size: 12.5px;
	color: #c3d9ee;
}

.mc-chat__close {
	margin-left: auto;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .14 );
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	flex: none;
}

.mc-chat__close:hover {
	background: var( --mc-coral );
	color: #fff; /* White on coral (2.55:1). Ruled three times: text on coral is white sitewide. */
}

/* ---- Log ---- */

.mc-chat__log {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background: #f7fbff;
	scroll-behavior: smooth;
}

.mc-chat__msg {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	align-items: flex-end;
}

.mc-chat__msg--user {
	justify-content: flex-end;
}

.mc-chat__msg-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	flex: none;
}

.mc-chat__bubble-text {
	max-width: 78%;
	padding: 11px 14px;
	border-radius: 16px;
	font-size: 15px;
	line-height: 1.55;
}

.mc-chat__msg--maria .mc-chat__bubble-text {
	background: #fff;
	color: var( --mc-ink );
	border-bottom-left-radius: 5px;
	box-shadow: 0 2px 8px rgba( 23, 74, 126, .08 );
}

.mc-chat__msg--user .mc-chat__bubble-text {
	background: var( --mc-navy );
	color: #fff;
	border-bottom-right-radius: 5px;
}

/* ---- Options ---- */

.mc-chat__options {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 4px 0 8px 38px;
}

.mc-chat__option {
	text-align: left;
	border: 1.5px solid var( --mc-line );
	border-radius: 14px;
	background: #fff;
	color: var( --mc-navy );
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	padding: 11px 14px;
	min-height: 44px;
	cursor: pointer;
	transition: border-color .18s, background .18s, transform .18s;
}

.mc-chat__option:hover {
	border-color: var( --mc-sky );
	background: var( --mc-tint );
	transform: translateX( 2px );
}

.mc-chat__option:focus-visible {
	outline: 3px solid var( --mc-navy );
	outline-offset: 2px;
}

/* ---- Typed input ---- */

.mc-chat__input {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var( --mc-line );
	background: #fff;
	flex: none;
}

.mc-chat__input input {
	flex: 1;
	border: 1.5px solid var( --mc-line );
	border-radius: 999px;
	padding: 11px 16px;
	font-family: inherit;
	font-size: 15px;
	color: var( --mc-ink );
	min-height: 44px;
}

.mc-chat__input input:focus {
	border-color: var( --mc-sky );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 43, 143, 229, .18 );
}

.mc-chat__input button {
	border: 0;
	border-radius: 999px;
	background: var( --mc-coral );
	color: #fff; /* White on coral (2.55:1). Ruled three times: text on coral is white sitewide. */
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	padding: 0 20px;
	min-height: 44px;
	cursor: pointer;
}

.mc-chat__input button:hover {
	background: #f2634d;
}

/* ---- Footer ---- */

.mc-chat__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 14px;
	border-top: 1px solid var( --mc-line );
	background: #fff;
	font-size: 12px;
	color: var( --mc-muted );
	flex: none;
}

.mc-chat__footer button {
	border: 0;
	background: none;
	color: var( --mc-sky );
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px;
}

.mc-chat__footer button:hover {
	color: var( --mc-navy );
	text-decoration: underline;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ---- Mobile ---- */

@media ( max-width: 1120px ) {
	/*
	 * The sticky action bar occupies the bottom 64px on mobile. The bubble is
	 * offset above it rather than sitting on top of the primary conversions.
	 */
	.mc-chat {
		--mc-bar: 64px;
	}

	.mc-chat__bubble {
		width: 56px;
		height: 56px;
		right: 16px;
	}

	/* Tracks the 56px launcher at 16px, and gives the text one point back. */
	.mc-chat__nudge {
		right: calc( 16px + 56px + 10px );
		max-width: min( 252px, calc( 100vw - 106px ) );
	}

	.mc-chat__nudge-text {
		font-size: 13.5px;
	}
}

@media ( max-width: 600px ) {
	/* Full screen rather than a floating card. A 380px panel on a 375px phone is
	   a worse experience than simply taking the screen. */
	.mc-chat__panel {
		right: 0;
		bottom: 0;
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}

	.mc-chat.is-open .mc-chat__bubble {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mc-chat__panel,
	.mc-chat__nudge {
		animation: none;
	}

	.mc-chat__bubble:hover,
	.mc-chat__option:hover {
		transform: none;
	}

	.mc-chat__log {
		scroll-behavior: auto;
	}
}