/**
 * MHTrack website chat widget (ADR-093).
 *
 * Deliberately quiet: this sits on a dealer's own site, and the theme's
 * design should carry the page rather than a bolted-on panel. Colours
 * come from the theme's brand tokens where the theme provides them, with
 * safe fallbacks for sites that do not.
 */

.mht-chat {
	--mht-chat-brand: var( --mht-color-primary, #1f2f6d );
	--mht-chat-accent: var( --mht-color-accent, #4654e8 );
	bottom: 1.25rem;
	display: none;
	font-family: inherit;
	position: fixed;
	right: 1.25rem;
	z-index: 9990;
}

.mht-chat.is-ready {
	display: block;
}

/*
 * Nobody can answer right now (ADR-093 §D3). The widget stays and offers
 * to take a message instead of disappearing — hiding it out of hours was
 * honest and lost the inquiry. It also keeps asking whether somebody has
 * come on shift, so a dealership opening reaches the visitor already
 * reading rather than only the next one to load a page.
 */
.mht-chat__offline {
	display: none;
	flex-direction: column;
	gap: 0.5rem;
	overflow-y: auto;
	padding: 0.9rem;
}

.mht-chat.is-offline .mht-chat__offline {
	display: flex;
}

.mht-chat.is-offline .mht-chat__log,
.mht-chat.is-offline .mht-chat__form {
	display: none;
}

.mht-chat__offline-lead {
	color: #4b5563;
	font-size: 0.85rem;
	line-height: 1.4;
	margin: 0 0 0.2rem;
}

.mht-chat__offline-row {
	display: flex;
	gap: 0.5rem;
}

.mht-chat__offline-row .mht-chat__offline-field {
	min-width: 0;
	width: 50%;
}

.mht-chat__offline-field {
	border: 1px solid #d7dced;
	border-radius: 0.6rem;
	font-family: inherit;
	font-size: 0.9rem;
	padding: 0.5rem 0.65rem;
	width: 100%;
}

textarea.mht-chat__offline-field {
	resize: vertical;
}

.mht-chat__offline-send {
	background: #1f3b73;
	border: 0;
	border-radius: 0.6rem;
	color: #fff;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.55rem 0.8rem;
}

.mht-chat__offline-status {
	font-size: 0.82rem;
	margin: 0;
}

.mht-chat__offline-status.is-error {
	color: #b42318;
}

.mht-chat__offline-status.is-success {
	color: #197c4c;
}

.mht-chat__offline-status.is-pending {
	color: #6b7280;
}

/*
 * The `hidden` attribute loses to a class that sets display, so the
 * launcher stayed on screen behind the open panel. Say it explicitly.
 */
.mht-chat [hidden] {
	display: none;
}

.mht-chat__launcher {
	align-items: center;
	background: var( --mht-chat-brand );
	border: none;
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba( 16, 24, 48, 0.24 );
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.95rem;
	font-weight: 600;
	gap: 0.5rem;
	line-height: 1;
	padding: 0.85rem 1.25rem;
}

.mht-chat__launcher:hover {
	filter: brightness( 1.08 );
}

.mht-chat__launcher-icon {
	display: inline-flex;
}

.mht-chat__panel {
	background: #fff;
	border-radius: 0.9rem;
	box-shadow: 0 18px 44px rgba( 16, 24, 48, 0.26 );
	display: flex;
	flex-direction: column;
	height: 26rem;
	overflow: hidden;
	width: 21rem;
}

.mht-chat__head {
	align-items: center;
	background: var( --mht-chat-brand );
	color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 0.75rem 1rem;
}

.mht-chat__title {
	font-size: 0.95rem;
	font-weight: 600;
}

.mht-chat__close {
	background: none;
	border: none;
	color: rgba( 255, 255, 255, 0.85 );
	cursor: pointer;
	font-size: 1.4rem;
	line-height: 1;
	padding: 0 0.2rem;
}

.mht-chat__close:hover {
	color: #fff;
}

.mht-chat__log {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.45rem;
	overflow-y: auto;
	padding: 0.9rem;
}

.mht-chat__hint {
	color: #6b7280;
	font-size: 0.85rem;
	margin: 0;
	text-align: center;
}

.mht-chat__msg {
	border-radius: 0.75rem;
	font-size: 0.9rem;
	line-height: 1.35;
	max-width: 85%;
	padding: 0.5rem 0.75rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.mht-chat__msg--visitor {
	align-self: flex-end;
	background: var( --mht-chat-accent );
	color: #fff;
}

.mht-chat__msg--staff {
	align-self: flex-start;
	background: #eef1f8;
	color: #1f2937;
}

.mht-chat__msg--system {
	align-self: center;
	color: #6b7280;
	font-size: 0.82rem;
	font-style: italic;
	text-align: center;
}

/* Three dots, the universal "hold on, they are writing". */
.mht-chat__typing {
	align-self: flex-start;
	background: #eef1f8;
	border-radius: 0.75rem;
	display: flex;
	gap: 0.22rem;
	margin: 0;
	padding: 0.6rem 0.75rem;
}

.mht-chat__typing span {
	animation: mht-chat-blink 1.3s infinite ease-in-out;
	background: #98a2b8;
	border-radius: 50%;
	height: 0.38rem;
	width: 0.38rem;
}

.mht-chat__typing span:nth-child( 2 ) {
	animation-delay: 0.18s;
}

.mht-chat__typing span:nth-child( 3 ) {
	animation-delay: 0.36s;
}

@keyframes mht-chat-blink {
	0%, 80%, 100% { opacity: 0.35; }
	40% { opacity: 1; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mht-chat__typing span {
		animation: none;
		opacity: 0.6;
	}
}

/* A message shown before the server has confirmed it. */
.mht-chat__msg--visitor.is-pending {
	opacity: 0.72;
}

/*
 * ADR-093 §H2a: where Cloudflare puts a challenge if it wants one.
 *
 * Empty for almost everybody — Turnstile runs in interaction-only mode,
 * so this collapses to nothing unless the visitor is actually asked to
 * do something, and only then does it take up room above the composer.
 */
.mht-chat__challenge {
	display: flex;
	justify-content: center;
}

.mht-chat__challenge:not( :empty ) {
	border-top: 1px solid #e6e9f2;
	padding: 0.6rem;
}

.mht-chat__challenge-note {
	color: #6b7280;
	font-size: 0.82rem;
	margin: 0;
	padding: 0 0.9rem 0.6rem;
	text-align: center;
}

.mht-chat__form {
	border-top: 1px solid #e6e9f2;
	display: flex;
	gap: 0.4rem;
	padding: 0.6rem;
}

.mht-chat__input {
	border: 1px solid #d7dced;
	border-radius: 0.6rem;
	flex: 1;
	font-size: 0.9rem;
	min-width: 0;
	padding: 0.55rem 0.7rem;
}

.mht-chat__input:focus {
	border-color: var( --mht-chat-accent );
	outline: none;
}

.mht-chat__send {
	background: var( --mht-chat-accent );
	border: none;
	border-radius: 0.6rem;
	color: #fff;
	cursor: pointer;
	padding: 0 0.85rem;
}

@media ( max-width: 480px ) {
	.mht-chat {
		bottom: 0.75rem;
		left: 0.75rem;
		right: 0.75rem;
	}

	.mht-chat__panel {
		height: 70vh;
		width: 100%;
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.mht-chat__launcher {
		transition: filter 0.15s ease;
	}
}