/*
 * Matches MZ Ride's own site language exactly (sampled live from
 * mzride.com): dark glass nav (rgba(10,10,10,.55) + blur(10px)), gold
 * accent #DDB48D, Cormorant Garamond for display text, Montserrat for
 * body/UI, pill gold-bordered buttons, and hairline-bordered glass cards
 * (rgba(255,255,255,.02) + rgba(221,180,141,.06) border, 20px radius).
 *
 * !important is used throughout because this widget is injected into an
 * arbitrary host theme whose own bare-tag button/input resets otherwise
 * win via source order — the same approach embeddable widgets like
 * Intercom/Drift use for exactly this reason.
 */
#mzrideai-widget,
#mzrideai-widget * {
	box-sizing: border-box !important;
}

.mzrideai-widget {
	--mzrideai-gold: #ddb48d;
	--mzrideai-gold-soft: rgba(221, 180, 141, 0.16);
	--mzrideai-glass-bg: rgba(15, 13, 11, 0.78);
	--mzrideai-glass-border: rgba(221, 180, 141, 0.18);
	--mzrideai-font-display: "Cormorant Garamond", Georgia, serif;
	--mzrideai-font-body: Montserrat, "Segoe UI", system-ui, sans-serif;

	position: fixed !important;
	bottom: 20px !important;
	z-index: 999999 !important;
	font-family: var(--mzrideai-font-body) !important;
	line-height: normal !important;
}

.mzrideai-widget.mzrideai-bottom-right { right: 20px !important; left: auto !important; }
.mzrideai-widget.mzrideai-bottom-left { left: 20px !important; right: auto !important; }

/*
 * Two actual ring elements (::before/::after, not just a box-shadow) grow
 * outward from the button's own edge and fade out — staggered half a cycle
 * apart so a new ripple is always launching as the previous one is fading,
 * giving a continuous sonar/water-ripple look instead of one soft pulse.
 */
@keyframes mzrideai-ripple {
	0%   { transform: scale(1); opacity: 0.55; }
	100% { transform: scale(1.9); opacity: 0; }
}
@keyframes mzrideai-toggle-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.07); }
}
@keyframes mzrideai-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes mzrideai-panel-in {
	from { opacity: 0; transform: translateY(12px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mzrideai-dot-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes mzrideai-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

.mzrideai-toggle {
	position: relative !important;
	width: 60px !important;
	height: 60px !important;
	min-width: 60px !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	border: 1px solid rgba(221, 180, 141, 0.45) !important;
	outline: none !important;
	background: rgba(15, 13, 11, 0.72) !important;
	-webkit-backdrop-filter: blur(14px) !important;
	backdrop-filter: blur(14px) !important;
	color: var(--mzrideai-gold) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
	line-height: normal !important;
	font-size: 14px !important;
}
.mzrideai-toggle::before,
.mzrideai-toggle::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: 50% !important;
	border: 1.5px solid var(--mzrideai-gold) !important;
	pointer-events: none !important;
	z-index: -1 !important;
	/* Deliberately NOT !important — the ripple animation below needs to
	   drive this value every frame, and a static !important here would
	   permanently pin it at 0 and silently defeat the whole animation
	   (a plain !important declaration always wins over a running CSS
	   animation, regardless of where it's declared). Reduced-motion / no
	   animation still resolves to this same 0 as the default, just not
	   forced. */
	opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.mzrideai-toggle {
		animation: mzrideai-toggle-breathe 2.4s ease-in-out 1.5s infinite;
	}
	.mzrideai-toggle::before,
	.mzrideai-toggle::after {
		animation: mzrideai-ripple 2.8s ease-out 1.5s infinite;
	}
	.mzrideai-toggle::after {
		animation-delay: 2.9s;
	}
}
.mzrideai-toggle:hover {
	transform: scale(1.06) !important;
	border-color: rgba(221, 180, 141, 0.8) !important;
	background: rgba(20, 17, 14, 0.85) !important;
}
.mzrideai-toggle-icon-open,
.mzrideai-toggle-icon-close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.mzrideai-toggle-icon-close { display: none !important; }
.mzrideai-widget.mzrideai-open .mzrideai-toggle-icon-open { display: none !important; }
.mzrideai-widget.mzrideai-open .mzrideai-toggle-icon-close { display: flex !important; }
.mzrideai-widget.mzrideai-open .mzrideai-toggle { animation: none !important; }
.mzrideai-widget.mzrideai-open .mzrideai-toggle::before,
.mzrideai-widget.mzrideai-open .mzrideai-toggle::after { animation: none !important; opacity: 0 !important; }

.mzrideai-panel {
	position: absolute !important;
	bottom: 76px !important;
	width: 380px !important;
	max-width: calc(100vw - 32px) !important;
	height: 580px !important;
	/* dvh (where supported) tracks the real visible viewport, so a wide
	   landscape phone that still renders the floating desktop-style card
	   (width above the 640px mobile breakpoint) doesn't get its max-height
	   stuck at the pre-keyboard 100vh — the classic iOS Safari vh bug. The
	   plain vh line is a fallback for browsers without dvh support; the
	   dvh line after it wins wherever it's understood. */
	max-height: calc(100vh - 120px) !important;
	max-height: calc(100dvh - 120px) !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 40%),
		var(--mzrideai-glass-bg) !important;
	-webkit-backdrop-filter: blur(24px) saturate(160%) !important;
	backdrop-filter: blur(24px) saturate(160%) !important;
	border-radius: 20px !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	border: 1px solid var(--mzrideai-glass-border) !important;
	margin: 0 !important;
	padding: 0 !important;
	animation: mzrideai-panel-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	transform-origin: bottom right;
}
.mzrideai-panel[hidden] { display: none !important; }
.mzrideai-bottom-right .mzrideai-panel { right: 0 !important; left: auto !important; transform-origin: bottom right; }
.mzrideai-bottom-left .mzrideai-panel { left: 0 !important; right: auto !important; transform-origin: bottom left; }

.mzrideai-panel-header {
	background: transparent !important;
	color: #fff !important;
	padding: 18px 20px 14px !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	border-bottom: 1px solid rgba(221, 180, 141, 0.14) !important;
	flex-shrink: 0 !important;
}
#mzrideai-panel-title {
	font-family: var(--mzrideai-font-display) !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	letter-spacing: 0.2px !important;
	color: #fff !important;
}
#mzrideai-panel-title::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #7fe08a;
	box-shadow: 0 0 6px rgba(127, 224, 138, 0.8);
	margin-right: 8px;
	vertical-align: middle;
}
.mzrideai-panel-close {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(221, 180, 141, 0.5) !important;
	color: rgba(255, 255, 255, 0.95) !important;
	font-size: 18px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 36px !important;
	height: 36px !important;
	flex-shrink: 0 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.mzrideai-panel-close:hover {
	background: var(--mzrideai-gold) !important;
	color: #191613 !important;
	border-color: var(--mzrideai-gold) !important;
}

.mzrideai-gate {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	padding: 28px 24px !important;
	margin: 0 !important;
	gap: 4px !important;
	overflow-y: auto !important;
}
.mzrideai-gate[hidden] { display: none !important; }
.mzrideai-gate-title {
	font-family: var(--mzrideai-font-display) !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	color: #fff !important;
	margin: 0 0 6px !important;
}
.mzrideai-gate-intro {
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, 0.6) !important;
	margin: 0 0 20px !important;
	font-family: var(--mzrideai-font-body) !important;
}
.mzrideai-gate-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.mzrideai-gate-input {
	width: 100% !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, 0.03) !important;
	color: #fff !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	font-size: 14px !important;
	font-family: var(--mzrideai-font-body) !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, background 0.15s ease !important;
}
.mzrideai-gate-input::placeholder { color: rgba(255, 255, 255, 0.35) !important; }
.mzrideai-gate-input:focus {
	outline: none !important;
	border-color: var(--mzrideai-gold) !important;
	background: rgba(255, 255, 255, 0.05) !important;
	box-shadow: none !important;
}
.mzrideai-gate-error {
	color: #f3a9a4 !important;
	font-size: 12px !important;
	margin: 0 !important;
	font-family: var(--mzrideai-font-body) !important;
}
.mzrideai-gate-error[hidden] { display: none !important; }
.mzrideai-gate-submit {
	background: var(--mzrideai-gold) !important;
	color: #191613 !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 12px 18px !important;
	margin: 6px 0 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	font-family: var(--mzrideai-font-body) !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	cursor: pointer !important;
	transition: opacity 0.15s ease, transform 0.15s ease !important;
}
.mzrideai-gate-submit:hover:not(:disabled) { transform: translateY(-1px) !important; }
.mzrideai-gate-submit:disabled { opacity: 0.5 !important; cursor: default !important; }

.mzrideai-chat-area {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
}
.mzrideai-chat-area[hidden] { display: none !important; }

.mzrideai-panel-body {
	flex: 1 !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	padding: 18px !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	background: transparent !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(221, 180, 141, 0.35) transparent;
}
.mzrideai-panel-body::-webkit-scrollbar { width: 6px; }
.mzrideai-panel-body::-webkit-scrollbar-thumb { background: rgba(221, 180, 141, 0.3); border-radius: 6px; }
.mzrideai-panel-body::-webkit-scrollbar-track { background: transparent; }

.mzrideai-msg {
	max-width: 85% !important;
	padding: 11px 14px !important;
	border-radius: 14px !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	white-space: pre-wrap !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	min-width: 0 !important;
	margin: 0 !important;
	font-family: var(--mzrideai-font-body) !important;
	animation: mzrideai-fade-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.mzrideai-msg-assistant {
	align-self: flex-start !important;
	background: rgba(255, 255, 255, 0.045) !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	color: rgba(255, 255, 255, 0.92) !important;
	border-bottom-left-radius: 4px !important;
}
.mzrideai-msg-user {
	align-self: flex-end !important;
	background: var(--mzrideai-gold-soft) !important;
	border: 1px solid rgba(221, 180, 141, 0.38) !important;
	color: #fff !important;
	border-bottom-right-radius: 4px !important;
}
.mzrideai-msg-error {
	align-self: flex-start !important;
	background: rgba(207, 46, 46, 0.12) !important;
	color: #f3a9a4 !important;
	border: 1px solid rgba(207, 46, 46, 0.3) !important;
}
.mzrideai-msg-cursor {
	display: inline-block;
	width: 2px;
	height: 13px;
	background: var(--mzrideai-gold);
	margin-left: 2px;
	vertical-align: text-bottom;
	animation: mzrideai-blink 0.9s step-start infinite;
}

.mzrideai-typing {
	align-self: flex-start !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	background: rgba(255, 255, 255, 0.045) !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	border-radius: 14px !important;
	border-bottom-left-radius: 4px !important;
	animation: mzrideai-fade-up 0.2s ease;
}
.mzrideai-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mzrideai-gold);
	display: inline-block;
	animation: mzrideai-dot-bounce 1.2s ease-in-out infinite;
}
.mzrideai-typing span:nth-child(2) { animation-delay: 0.15s; }
.mzrideai-typing span:nth-child(3) { animation-delay: 0.3s; }

.mzrideai-vehicles {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	max-width: 92% !important;
	align-self: flex-start !important;
	margin: 0 !important;
}
.mzrideai-vehicle-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	background: rgba(255, 255, 255, 0.025) !important;
	border: 1px solid rgba(221, 180, 141, 0.16) !important;
	border-radius: 16px !important;
	padding: 0 !important;
	align-items: stretch !important;
	margin: 0 !important;
	overflow: hidden !important;
	transition: border-color 0.15s ease, background 0.15s ease !important;
	animation: mzrideai-fade-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mzrideai-vehicle-card:hover {
	border-color: rgba(221, 180, 141, 0.4) !important;
	background: rgba(255, 255, 255, 0.045) !important;
}
.mzrideai-vehicle-photos {
	display: flex !important;
	gap: 0 !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
	border-bottom: 1px solid rgba(221, 180, 141, 0.16) !important;
}
.mzrideai-vehicle-photos::-webkit-scrollbar { display: none !important; }
.mzrideai-vehicle-photo-frame {
	width: 100% !important;
	flex: 1 0 100% !important;
	height: 150px !important;
	background: rgba(255, 255, 255, 0.06) !important;
	position: relative !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}
.mzrideai-vehicle-photo-frame img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: 0 !important;
	background: none !important;
	border: none !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.mzrideai-vehicle-info { font-size: 13px !important; line-height: 1.4 !important; margin: 0 !important; padding: 12px !important; color: rgba(255, 255, 255, 0.85) !important; font-family: var(--mzrideai-font-body) !important; }
.mzrideai-vehicle-name { font-weight: 600 !important; color: #fff !important; font-size: 14px !important; margin-bottom: 2px !important; }
.mzrideai-vehicle-tagline {
	font-family: var(--mzrideai-font-display) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	color: var(--mzrideai-gold) !important;
	margin-top: 2px !important;
}

.mzrideai-pdf-link {
	align-self: flex-start !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	background: transparent !important;
	color: var(--mzrideai-gold) !important;
	text-decoration: none !important;
	padding: 11px 18px !important;
	margin: 0 !important;
	border-radius: 999px !important;
	border: 1px solid rgba(221, 180, 141, 0.55) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	font-family: var(--mzrideai-font-body) !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	transition: background 0.15s ease, color 0.15s ease !important;
	animation: mzrideai-fade-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mzrideai-pdf-link:hover {
	background: var(--mzrideai-gold) !important;
	color: #191613 !important;
}

.mzrideai-form {
	display: flex !important;
	align-items: flex-end !important;
	gap: 10px !important;
	padding: 14px 16px !important;
	margin: 0 !important;
	border-top: 1px solid rgba(221, 180, 141, 0.14) !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	background: transparent !important;
	flex-shrink: 0 !important;
}
.mzrideai-input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	resize: none !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 0 !important;
	padding: 8px 2px !important;
	margin: 0 !important;
	font-size: 14px !important;
	font-family: var(--mzrideai-font-body) !important;
	max-height: 90px !important;
	background: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease !important;
	overflow-y: auto !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}
.mzrideai-input::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.mzrideai-input::placeholder { color: rgba(255, 255, 255, 0.35) !important; }
.mzrideai-input:focus { outline: none !important; border-bottom-color: var(--mzrideai-gold) !important; box-shadow: none !important; }

@keyframes mzrideai-mic-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(214, 54, 56, 0.45); }
	70%  { box-shadow: 0 0 0 8px rgba(214, 54, 56, 0); }
	100% { box-shadow: 0 0 0 0 rgba(214, 54, 56, 0); }
}
.mzrideai-mic {
	background: transparent !important;
	color: var(--mzrideai-gold) !important;
	border: 1px solid rgba(221, 180, 141, 0.55) !important;
	border-radius: 50% !important;
	width: 40px !important;
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.mzrideai-mic[hidden] { display: none !important; }
.mzrideai-mic:hover:not(:disabled) {
	background: var(--mzrideai-gold) !important;
	color: #191613 !important;
	border-color: var(--mzrideai-gold) !important;
}
.mzrideai-mic-icon-active { display: none !important; }
.mzrideai-mic.mzrideai-mic-recording {
	background: #d63638 !important;
	border-color: #d63638 !important;
	color: #fff !important;
	animation: mzrideai-mic-pulse 1.4s ease-out infinite !important;
}
.mzrideai-mic.mzrideai-mic-recording .mzrideai-mic-icon-idle { display: none !important; }
.mzrideai-mic.mzrideai-mic-recording .mzrideai-mic-icon-active { display: flex !important; }

.mzrideai-send {
	background: transparent !important;
	color: var(--mzrideai-gold) !important;
	border: 1px solid rgba(221, 180, 141, 0.55) !important;
	border-radius: 50% !important;
	width: 40px !important;
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.mzrideai-send:hover:not(:disabled) {
	background: var(--mzrideai-gold) !important;
	color: #191613 !important;
	border-color: var(--mzrideai-gold) !important;
}
.mzrideai-send:disabled { opacity: 0.4 !important; cursor: default !important; }

.mzrideai-quick-replies {
	align-self: flex-start !important;
	max-width: 92% !important;
	margin: 0 !important;
	animation: mzrideai-fade-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mzrideai-quick-replies-label {
	font-size: 12px !important;
	color: rgba(255, 255, 255, 0.55) !important;
	margin-bottom: 6px !important;
	font-family: var(--mzrideai-font-body) !important;
}
.mzrideai-quick-replies-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}
.mzrideai-quick-reply {
	background: transparent !important;
	color: var(--mzrideai-gold) !important;
	border: 1px solid rgba(221, 180, 141, 0.5) !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: var(--mzrideai-font-body) !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-block !important;
	line-height: normal !important;
	transition: background 0.15s ease, color 0.15s ease !important;
}
.mzrideai-quick-reply:hover:not(:disabled) {
	background: var(--mzrideai-gold) !important;
	color: #191613 !important;
}
.mzrideai-quick-reply:disabled { opacity: 0.4 !important; cursor: default !important; }

.mzrideai-quote-card {
	align-self: stretch !important;
	background: rgba(255, 255, 255, 0.035) !important;
	border: 1px solid rgba(221, 180, 141, 0.22) !important;
	border-radius: 14px !important;
	padding: 14px 16px !important;
	margin: 0 !important;
	max-width: 92% !important;
	animation: mzrideai-fade-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mzrideai-quote-title {
	font-family: var(--mzrideai-font-display) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #fff !important;
	margin-bottom: 8px !important;
	padding-bottom: 8px !important;
	border-bottom: 1px solid rgba(221, 180, 141, 0.14) !important;
}
.mzrideai-quote-row {
	display: flex !important;
	justify-content: space-between !important;
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.8) !important;
	font-family: var(--mzrideai-font-body) !important;
	padding: 3px 0 !important;
}
.mzrideai-quote-discount { color: #7fe08a !important; }
.mzrideai-quote-total {
	margin-top: 6px !important;
	padding-top: 8px !important;
	border-top: 1px solid rgba(221, 180, 141, 0.14) !important;
	font-family: var(--mzrideai-font-display) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--mzrideai-gold) !important;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
}

/* Below this width the panel becomes a full-screen app view instead of a
   floating card — a small anchored card feels cramped and fiddly to use
   on a phone, and this matches how native chat apps behave. */
@media (max-width: 640px) {
	.mzrideai-panel {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		/* vh fallback first, dvh (real visible viewport) as the modern
		   value — see the base .mzrideai-panel rule above for why both
		   are kept. JS (syncMobileViewport) additionally pins an exact
		   pixel height from the Visual Viewport API once available, since
		   even dvh alone doesn't repaint fast enough on every iOS Safari
		   keyboard-animation frame — this CSS is the correct value before
		   that JS runs and the fallback if it can't. */
		height: 100vh !important;
		height: 100dvh !important;
		max-height: 100vh !important;
		max-height: 100dvh !important;
		border-radius: 0 !important;
		border: none !important;
		box-shadow: none !important;
	}
	.mzrideai-panel-header {
		padding-top: calc(18px + env(safe-area-inset-top)) !important;
		padding-left: calc(20px + env(safe-area-inset-left)) !important;
		padding-right: calc(20px + env(safe-area-inset-right)) !important;
	}
	.mzrideai-gate {
		padding-left: calc(24px + env(safe-area-inset-left)) !important;
		padding-right: calc(24px + env(safe-area-inset-right)) !important;
	}
	.mzrideai-panel-body {
		padding-left: calc(18px + env(safe-area-inset-left)) !important;
		padding-right: calc(18px + env(safe-area-inset-right)) !important;
	}
	.mzrideai-form {
		padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
		padding-left: calc(16px + env(safe-area-inset-left)) !important;
		padding-right: calc(16px + env(safe-area-inset-right)) !important;
	}
	.mzrideai-widget.mzrideai-open .mzrideai-toggle {
		display: none !important;
	}
	/* iOS Safari auto-zooms the whole page on focus of any input/textarea
	   under 16px — 14px (the desktop size, kept as-is above) triggers it.
	   Scoped to mobile only so desktop's font size is untouched. */
	.mzrideai-input,
	.mzrideai-gate-input {
		font-size: 16px !important;
	}
}