/* MBRE AI Real Estate Concierge — widget styles
 * Scoped under #mbre-ai-concierge-root to avoid theme conflicts.
 * Accent color is injected at runtime via the --mbre-accent custom property.
 */

#mbre-ai-concierge-root {
	/* Taken from mattbrownrealestate.com on 25 August 2026, by reading the
	   Avada theme variables the live site actually renders rather than by eye.
	   --primary_color is #181b20 and site buttons resolve to the same value,
	   so the launcher and send button match the buttons already on the page.

	   The palette is deliberately near-monochrome, which is what the site does:
	   black links, grey text, white and off-white surfaces, no decorative
	   colour. It also suits a brand whose own guidelines forbid hype. */
	--mbre-accent: #181b20;
	--mbre-accent-dark: #000000;
	--mbre-bg: #ffffff;
	--mbre-text: #181b20;
	--mbre-muted: #747474;
	--mbre-body: #656a70;
	--mbre-user-bubble: #181b20;
	--mbre-bot-bubble: #f2f3f5;
	--mbre-border: #eae9e9;
	--mbre-surface: #fafafa;
	--mbre-radius: 14px;
	--mbre-shadow: 0 18px 50px rgba(24, 27, 32, 0.20);

	/* Read off the live site, from the variables the theme actually renders:
	   --h1_typography-font-family and --h2_typography-font-family resolve to
	   "Playfair Display", and --body_typography-font-family to Montserrat.

	   Avada also exposes --awb-typography1..5-font-family, which say Inter.
	   Those are the theme's global typography sets and are not what the
	   headings and body resolve to on this site. Checking only those is how an
	   earlier pass of this file briefly switched the widget to Inter and lost
	   the serif. The site loads both faces already, so referencing them costs
	   the visitor nothing. */
	--mbre-font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mbre-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

	font-family: var(--mbre-font);

	/* Baseline for anything in the widget without a size of its own, to
	   Sharad's specification of 27 September. The panel inherited the theme's
	   body size before this, which on some pages resolved small enough that
	   the chat text was hard to read. */
	font-size: 13px;
	font-weight: 400;
}

/* ── Colour scheme ─────────────────────────────────────────────────────────
 * The widget does not follow prefers-color-scheme, and that is deliberate.
 *
 * mattbrownrealestate.com is light only. A dark panel floating over a white
 * page does not read as part of the site, it reads as a third-party widget
 * bolted onto it, which is the opposite of what this is meant to feel like.
 * Screenshotted both ways on the demo before deciding.
 *
 * This is a brand decision rather than an accessibility one: the light palette
 * meets contrast comfortably, near-black on white for text and white on
 * near-black for the header and buttons.
 *
 * If the site ever gains a dark theme, this is one block to add back, keyed on
 * the same tokens declared above.
 */

/* ── Launcher button ───────────────────────────────────────────────────── */
.mbre-launcher {
	position: fixed;
	bottom: 22px;
	z-index: 999990;
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	background: var(--mbre-accent);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--mbre-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.mbre-launcher:hover  { transform: translateY(-3px) scale(1.06); background: var(--mbre-accent-dark); box-shadow: 0 16px 48px rgba(0,0,0,0.24); }
.mbre-launcher:active { transform: translateY(0) scale(0.97); }
.mbre-launcher svg    { width: 28px; height: 28px; }

/* ── Avatar launcher ───────────────────────────────────────────────────── */
/* When an avatar is configured the photo *is* the button: the accent circle
   and padding are dropped so the transparent PNG edge reads as the edge. */
.mbre-launcher.mbre-has-avatar {
	width: 72px;
	height: 72px;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}
.mbre-launcher.mbre-has-avatar:hover { background: transparent; }
.mbre-launcher.mbre-has-avatar > span { width: 100%; height: 100%; }
/* The icon is a speech-bubble silhouette with its own transparency, so it
   must not be clipped to a circle; contain keeps the tail intact. */
.mbre-launcher-avatar {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	filter: drop-shadow(0 6px 14px rgba(15, 36, 64, 0.35));
}

/* Attention pulse while the panel has not been opened yet. */
@keyframes mbre-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(41, 141, 235, 0.55); }
	70%  { box-shadow: 0 0 0 16px rgba(41, 141, 235, 0); }
	100% { box-shadow: 0 0 0 0 rgba(41, 141, 235, 0); }
}
.mbre-launcher.mbre-pulsing .mbre-launcher-avatar { animation: mbre-pulse 2.2s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.mbre-launcher.mbre-pulsing .mbre-launcher-avatar { animation: none; }
	.mbre-launcher { transition: none; }
}
.mbre-pos-right .mbre-launcher { right: 22px; }
.mbre-pos-left  .mbre-launcher { left:  22px; }

/* Unread badge on launcher */
.mbre-launcher-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	padding: 0 5px;
	box-sizing: border-box;
	border: 2px solid #fff;
	animation: mbre-badge-pop 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
	pointer-events: none;
}
@keyframes mbre-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ── Panel ─────────────────────────────────────────────────────────────── */
/*
 * FIX: Previously used display:none which breaks CSS transitions.
 * Now uses visibility + pointer-events so opacity/transform animate properly.
 * JS still adds/removes .mbre-open; the hidden state is handled by CSS.
 */
.mbre-panel {
	position: fixed;
	bottom: 96px;
	z-index: 999991;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - 130px);
	background: var(--mbre-bg);
	border-radius: var(--mbre-radius);
	box-shadow: var(--mbre-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Hidden state — no display:none so transitions work */
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	transform: translateY(16px) scale(0.97);
	transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.3,0.64,1), visibility 0s linear 0.22s;
}
.mbre-panel.mbre-open {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.3,0.64,1), visibility 0s linear 0s;
}
.mbre-pos-right .mbre-panel { right: 22px; }
.mbre-pos-left  .mbre-panel { left:  22px; }

/* ── Header ────────────────────────────────────────────────────────────── */
.mbre-header {
	background: linear-gradient(135deg, var(--mbre-accent-dark) 0%, #163a63 100%);
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-shrink: 0;
}

/* Agent photo in the header: makes it read as "talk to Matt's desk", and
   carries the same avatar the launcher uses. */
.mbre-header-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: rgba(255, 255, 255, 0.12);
}

.mbre-header-meta { flex: 1; min-width: 0; }

.mbre-header-title {
	font-family: var(--mbre-font-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.25;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* "AI concierge / online" line, so visitors know what they are talking to. */
.mbre-header-sub {
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .75;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mbre-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	display: inline-block;
	box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
	animation: mbre-status-pulse 2.4s infinite;
}
@keyframes mbre-status-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
	60%  { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
	100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.mbre-header-actions { display: flex; align-items: center; gap: 2px; flex: none; }

.mbre-close,
.mbre-expand,
.mbre-minimise {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	opacity: 0.8;
	padding: 5px;
	border-radius: 6px;
	display: grid;
	place-items: center;
	transition: opacity 0.15s ease, background 0.15s ease;
}
.mbre-close:hover,
.mbre-expand:hover,
.mbre-minimise:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }

.mbre-close svg,
.mbre-expand svg,
.mbre-minimise svg { width: 17px; height: 17px; display: block; }

/* ── Full screen ───────────────────────────────────────────────────────── */
/* Anchored to the viewport rather than sized in vh so the panel cannot end
   up taller than the visible area on mobile. */
.mbre-panel.mbre-fullscreen {
	top: 12px;
	right: 12px;
	bottom: 12px;
	left: 12px;
	width: auto;
	/*
	 * Capped and centred. Edge to edge on a wide monitor, the conversation
	 * sat in a narrow column in the middle of a very large empty panel.
	 */
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	max-height: none;
	border-radius: 14px;
}

/* Long-form reading needs a measure, not a full-width sprawl. */
.mbre-panel.mbre-fullscreen .mbre-messages { align-items: center; }
/* Full screen is read from further back, so the message text steps up to 18px
   while the windowed panel stays at 15px. Sharad's specification. */
.mbre-panel.mbre-fullscreen .mbre-msg { max-width: min(720px, 92%); font-size: 18px; }
.mbre-panel.mbre-fullscreen .mbre-msg-bot  { align-self: flex-start; margin-right: auto; }
.mbre-panel.mbre-fullscreen .mbre-msg-user { align-self: flex-end;   margin-left: auto; }
.mbre-panel.mbre-fullscreen .mbre-lead-form,
.mbre-panel.mbre-fullscreen .mbre-composer { padding-inline: max(16px, calc((100% - 760px) / 2)); }

@media (max-width: 480px) {
	.mbre-panel.mbre-fullscreen { top: 8px; right: 8px; bottom: 8px; left: 8px; }
}

/* ── Messages ──────────────────────────────────────────────────────────── */
.mbre-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--mbre-surface);
	scroll-behavior: smooth;
}
.mbre-msg {
	max-width: 84%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	word-wrap: break-word;
	/* Fade-in animation for each new message */
	animation: mbre-msg-in 0.22s ease both;
}
@keyframes mbre-msg-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.mbre-msg-bot  { background: var(--mbre-bot-bubble); color: var(--mbre-text); align-self: flex-start; border-bottom-left-radius: 4px; }
.mbre-msg-user { background: var(--mbre-accent);     color: #fff;            align-self: flex-end;   border-bottom-right-radius: 4px; }
.mbre-msg a    { color: inherit; text-decoration: underline; }

/* ── Typing indicator ──────────────────────────────────────────────────── */
.mbre-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; transition: opacity 0.2s ease; }
.mbre-typing.mbre-fade-out { opacity: 0; }
.mbre-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--mbre-muted); animation: mbre-bounce 1.2s infinite ease-in-out; }
.mbre-typing span:nth-child(2) { animation-delay: 0.15s; }
.mbre-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mbre-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ── Source links beneath an answer ────────────────────────────────────── */
/* Deliberately quieter than the reply itself: this is provenance, not part of
   what Jake said, so it sits outside the bubble and reads as secondary. */
.mbre-sources {
	align-self: flex-start;
	max-width: 88%;
	margin: 2px 0 8px 2px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.mbre-sources-lead {
	font-size: 14px;
	font-weight: 400;
	color: var(--mbre-muted);
	margin-right: 2px;
}
.mbre-source-link {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--mbre-accent);
	text-decoration: none;
	padding: 3px 9px;
	border: 1px solid var(--mbre-border);
	border-radius: 100px;
	background: var(--mbre-bg);
	transition: background 0.15s ease, border-color 0.15s ease;
	/* Long community names must not push the panel sideways. */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mbre-source-link:hover,
.mbre-source-link:focus-visible {
	background: var(--mbre-accent);
	border-color: var(--mbre-accent);
	color: #fff;
}

/* ── Reply feedback (thumbs up/down) ───────────────────────────────────── */
.mbre-fb-bar { display: flex; align-items: center; gap: 4px; margin: 2px 0 8px 2px; align-self: flex-start; }
.mbre-fb {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; padding: 0;
	background: transparent; border: 1px solid transparent; border-radius: 8px;
	color: var(--mbre-muted); cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.mbre-fb:hover:not(:disabled) { background: var(--mbre-surface); border-color: var(--mbre-border); color: var(--mbre-text); transform: translateY(-1px); }
.mbre-fb:active:not(:disabled) { transform: translateY(0) scale(0.94); }
.mbre-fb:disabled { cursor: default; }
.mbre-fb:disabled:not(.mbre-fb-active) { opacity: 0.35; }
.mbre-fb[data-v="up"].mbre-fb-active   { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.35); color: #16a34a; }
.mbre-fb[data-v="down"].mbre-fb-active { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.35); color: #dc2626; }
.mbre-fb-thanks { font-size: 12px; color: #16a34a; margin-left: 4px; animation: mbre-fade-in 0.2s ease; }
@keyframes mbre-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Suggested prompts ─────────────────────────────────────────────────── */
.mbre-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.mbre-chip {
	background: var(--mbre-bg);
	border: 1px solid var(--mbre-accent);
	color: var(--mbre-accent);
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.mbre-chip:hover  { background: var(--mbre-accent); color: #fff; transform: translateY(-1px); }
.mbre-chip:active { transform: translateY(0); }

/* ── Lead form ─────────────────────────────────────────────────────────── */
.mbre-lead-form {
	position: relative;
	margin: 0 12px 10px;
	padding: 14px;
	border: 1px solid var(--mbre-border);
	border-radius: 12px;
	background: var(--mbre-surface);
	box-shadow: 0 1px 3px rgba(24, 27, 32, 0.06);
}

/*
 * The close button sits in the flow beside the heading rather than on top
 * of it. It used to be absolutely positioned, and .mbre-lead-form button
 * below set width:100%, which is one point more specific than
 * .mbre-lead-close and so won: the button stretched the full width of the
 * card and its x glyph centred itself over the heading text. Sharad
 * reported it as the close icon being in the middle, which is exactly what
 * it was. A flex row cannot overlap, whatever a later rule does to widths.
 */
.mbre-lead-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
/* Two other cards reuse .mbre-lead-form without a header row (save search,
   email transcript), so the spacing lives on the heading and is removed
   only where the flex row already provides it. */
.mbre-lead-form h4 { flex: 1; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--mbre-text); }
.mbre-lead-head h4 { margin: 0; }

/* Dismiss controls. The form is a suggestion, not a gate, so both an X and a
   worded opt-out are offered; either one clears it for the session. */
.mbre-lead-close {
	order: -1;
	flex: 0 0 auto;
	width: 26px;
	min-width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
	font-size: 20px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--mbre-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.mbre-lead-close:hover { background: var(--mbre-bot-bubble); color: var(--mbre-text); }

.mbre-lead-skip {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--mbre-muted);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mbre-lead-skip:hover { color: var(--mbre-text); }
.mbre-lead-form input {
	width: 100%;
	padding: 9px 11px;
	margin-bottom: 8px;
	border: 1px solid var(--mbre-border);
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
	background: var(--mbre-bg);
	color: var(--mbre-text);
	transition: border-color 0.15s ease;
}
.mbre-lead-form input:focus { outline: none; border-color: var(--mbre-accent); }
/* Named, not every button in the card: see the note on .mbre-lead-head. */
.mbre-lead-form .mbre-lead-submit,
.mbre-lead-form .mbre-lead-skip { width: 100%; }

/* ── GDPR consent gate ─────────────────────────────────────────────────── */
.mbre-consent { padding: 14px 16px; border-top: 1px solid var(--mbre-border); background: var(--mbre-bg); font-size: 13px; color: var(--mbre-text); }
.mbre-consent p { margin: 0 0 10px; line-height: 1.4; }

/* ── Inline booking embed ──────────────────────────────────────────────── */
.mbre-booking-embed { align-self: stretch; margin: 4px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--mbre-border); background: var(--mbre-bg); }
.mbre-booking-embed iframe { width: 100%; height: 320px; border: none; display: block; }
.mbre-booking-fallback { padding: 6px 10px; font-size: 11px; text-align: center; background: var(--mbre-surface); border-top: 1px solid var(--mbre-border); }
.mbre-booking-fallback a { color: var(--mbre-accent); }

/* ── Structured listing cards ──────────────────────────────────────────── */
.mbre-listings-row { align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin: 4px 0; }
.mbre-listing-card {
	display: flex;
	gap: 10px;
	background: var(--mbre-bg);
	border: 1px solid var(--mbre-border);
	border-radius: 10px;
	padding: 8px;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.mbre-listing-card:hover {
	border-color: var(--mbre-accent);
	box-shadow: 0 4px 16px rgba(15,118,110,0.18);
	transform: translateY(-2px);
}
.mbre-listing-card img, .mbre-listing-noimg { width: 72px; height: 56px; border-radius: 6px; object-fit: cover; background: var(--mbre-border); flex-shrink: 0; }
.mbre-listing-body { flex: 1; min-width: 0; }
.mbre-listing-price { font-weight: 700; font-size: 14px; color: var(--mbre-text); }
.mbre-listing-meta { font-size: 12px; color: var(--mbre-muted); margin: 2px 0; }
.mbre-listing-addr { font-size: 12px; color: var(--mbre-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbre-listing-link { font-size: 12px; color: var(--mbre-accent); text-decoration: underline; }
.mbre-save-search-link { align-self: flex-start; font-size: 12px; color: var(--mbre-accent); text-decoration: underline; margin: 2px 0 6px 4px; }

/* ── Composer ──────────────────────────────────────────────────────────── */
.mbre-composer { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--mbre-border); background: var(--mbre-bg); flex-shrink: 0; }
.mbre-input {
	flex: 1;
	border: 1px solid var(--mbre-border);
	border-radius: 22px;
	padding: 10px 14px;
	font-size: 14px;
	outline: none;
	resize: none;
	max-height: 90px;
	/* Scrollable past four lines, but without the arrows and track that
	   render inside a single-line composer. */
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	background: var(--mbre-bg);
	color: var(--mbre-text);
	transition: border-color 0.15s ease;
}
.mbre-input:focus { border-color: var(--mbre-accent); }
.mbre-btn {
	border: none; background: var(--mbre-accent); color: #fff; width: 40px; height: 40px;
	border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; transition: background 0.15s ease, transform 0.12s ease;
}
.mbre-btn:hover    { background: var(--mbre-accent-dark); transform: scale(1.08); }
.mbre-btn:active   { transform: scale(0.95); }
.mbre-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.mbre-btn svg { width: 18px; height: 18px; }
.mbre-mic.mbre-listening { background: #dc2626; animation: mbre-pulse 1.2s infinite; }
@keyframes mbre-pulse { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); } 70% { box-shadow: 0 0 0 10px rgba(220,38,38,0); } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } }

/* ── Compliance ────────────────────────────────────────────────────────── */
/* The Equal Housing line is pinned to the panel rather than placed in the
   message list, because the client asked for it visible at all times and a
   message scrolls away as soon as the conversation gets going. */
.mbre-eho {
	flex-shrink: 0;
	text-align: center;
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--mbre-muted);
	padding: 7px 14px 5px;
	border-top: 1px solid var(--mbre-border);
	background: var(--mbre-surface);
}

/* Reads as a system note rather than as something Jake said, so it is never
   mistaken for part of the conversation. */
.mbre-disclosure {
	align-self: center;
	max-width: 92%;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--mbre-muted);
	background: var(--mbre-surface);
	border: 1px dashed var(--mbre-border);
	border-radius: 8px;
	padding: 7px 12px;
	margin: 2px 0 8px;
}

.mbre-footer-note { text-align: center; font-size: 11px; color: var(--mbre-muted); padding: 6px 0 16px; flex-shrink: 0; }
.mbre-input::-webkit-scrollbar { width: 0; height: 0; }

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Short viewports (landscape phones, small laptops): let the panel shrink
   rather than run off the top of the screen. */
@media (max-height: 720px) {
	.mbre-panel { height: calc(100dvh - 150px); }
}

/* Tablets and large phones: widen toward the edges but keep it a card. */
@media (max-width: 620px) {
	.mbre-panel { width: calc(100vw - 28px); }
	.mbre-pos-right .mbre-panel { right: 14px; }
	.mbre-pos-left  .mbre-panel { left:  14px; }
}

/* Phones: full-bleed sheet anchored to the bottom.
   dvh rather than vh so the panel does not sit under a mobile browser's
   collapsing address bar; vh is the fallback for older engines. */
@media (max-width: 480px) {
	.mbre-panel {
		width: auto;
		max-width: none;
		height: calc(100vh - 96px);
		height: calc(100dvh - 96px);
		max-height: none;
		bottom: 84px;
		border-radius: 18px;
	}
	.mbre-pos-right .mbre-panel,
	.mbre-pos-left  .mbre-panel { right: 10px; left: 10px; }

	.mbre-messages   { padding: 14px 12px; }
	.mbre-msg        { max-width: 90%; font-size: 15px; } /* 15px avoids iOS zoom-on-focus */
	.mbre-input      { font-size: 16px; }                 /* 16px is the actual no-zoom threshold */
	.mbre-composer   { padding: 10px; }
	.mbre-header     { padding: 12px 14px; }
	.mbre-header-avatar { width: 34px; height: 34px; }
	.mbre-suggestions { padding: 0 12px 10px; }
}

/* Very small phones: drop the avatar so the title and close button fit. */
@media (max-width: 360px) {
	.mbre-header-avatar { display: none; }
	.mbre-panel { bottom: 78px; height: calc(100dvh - 90px); }
}

/* The launcher should never cover the panel's composer on tiny screens. */
@media (max-width: 480px) {
	.mbre-launcher { bottom: 14px; }
	.mbre-pos-right .mbre-launcher { right: 14px; }
	.mbre-pos-left  .mbre-launcher { left:  14px; }
}

/* ── Newsletter offer ──────────────────────────────────────────────────── */
/* Sits in the same mount as the lead form and shares its dismiss grammar,
   so both surfaces behave identically from the visitor's point of view. */
.mbre-news-offer {
	position: relative;
	padding: 14px 16px;
	border-top: 1px solid var(--mbre-border);
	background: var(--mbre-bg);
}
.mbre-news-offer h4 {
	margin: 0 0 6px;
	padding-right: 24px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--mbre-text);
}
.mbre-news-offer p {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--mbre-muted);
}
.mbre-news-offer input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	margin-bottom: 8px;
	border: 1px solid var(--mbre-border);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	background: var(--mbre-bg);
	color: var(--mbre-text);
}
.mbre-news-offer input[type="email"]:focus {
	outline: none;
	border-color: var(--mbre-accent);
}
.mbre-news-submit {
	width: 100%;
	height: auto;
	padding: 10px;
	border-radius: 8px;
}
.mbre-news-close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 26px;
	height: 26px;
	line-height: 1;
	font-size: 20px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--mbre-muted);
	cursor: pointer;
}
.mbre-news-close:hover { background: var(--mbre-bot-bubble); color: var(--mbre-text); }
.mbre-news-skip {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--mbre-muted);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mbre-news-skip:hover { color: var(--mbre-text); }
.mbre-news-error {
	display: none;
	margin-top: 6px;
	font-size: 12px;
	color: #dc2626;
}

/* ── Hands-free voice mode ─────────────────────────────────────────────── */
/* The mic stays lit for the whole session, not just while a phrase is being
   captured, so the visitor can tell the conversation is still open. */
.mbre-mic.mbre-handsfree {
	background: var(--mbre-accent);
	color: #fff;
	box-shadow: 0 0 0 0 rgba(18, 117, 209, 0.5);
	animation: mbre-handsfree-pulse 2.4s ease-out infinite;
}
@keyframes mbre-handsfree-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(18, 117, 209, 0.5); }
	70%  { box-shadow: 0 0 0 12px rgba(18, 117, 209, 0); }
	100% { box-shadow: 0 0 0 0 rgba(18, 117, 209, 0); }
}

/* A quiet band across the composer while voice mode is active. */
.mbre-panel.mbre-voice-mode .mbre-composer {
	background: linear-gradient(0deg, rgba(18, 117, 209, 0.06), rgba(18, 117, 209, 0.06)), var(--mbre-bg);
	border-top-color: var(--mbre-accent);
}
.mbre-panel.mbre-voice-mode .mbre-input::placeholder {
	color: var(--mbre-accent);
	opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
	.mbre-mic.mbre-handsfree { animation: none; }
}

/* ── Narrow phone corrections ──────────────────────────────────────────── */
/* The header title was wrapping to two lines under ~360px, which pushed the
   controls down and ate most of the panel. Scale the type instead. */
@media (max-width: 400px) {
	.mbre-header { padding: 10px 12px; gap: 8px; }
	.mbre-header-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.mbre-header-sub { font-size: 10px; }
	.mbre-header-actions { gap: 0; }
	.mbre-close, .mbre-expand, .mbre-minimise { padding: 4px; }
	.mbre-close svg, .mbre-expand svg, .mbre-minimise svg { width: 15px; height: 15px; }

	/* A 72px launcher covers real content on a small screen. */
	.mbre-launcher.mbre-has-avatar { width: 56px; height: 56px; }

	.mbre-suggestion { font-size: 12px; padding: 6px 10px; }
	.mbre-footer-note { font-size: 10px; padding: 5px 0 14px; }
}

/* While the panel is open on a phone there is nothing to launch, and the
   button only obscures the conversation. */
@media (max-width: 620px) {
	#mbre-ai-concierge-root:has(.mbre-panel.mbre-open) .mbre-launcher { display: none; }
}

/* ── Preview badge ─────────────────────────────────────────────────────────
 * Shown when the widget is switched off for visitors but visible to the team,
 * so nobody reports a bug against something the public cannot reach.
 */
.mbre-preview-flag {
	position: fixed;
	bottom: 96px;
	z-index: 999991;
	max-width: 220px;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--mbre-accent);
	color: #fff;
	font-family: var(--mbre-font);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .02em;
	text-align: center;
	box-shadow: var(--mbre-shadow);
	pointer-events: none;
}

.mbre-pos-right .mbre-preview-flag { right: 22px; }
.mbre-pos-left .mbre-preview-flag { left: 22px; }

/* -- Teaser: one quiet line beside the launcher ---------------------------- */
.mbre-teaser {
	position: fixed;
	bottom: 94px;
	z-index: 999989;
	display: flex;
	align-items: flex-start;
	gap: 2px;
	max-width: min(290px, calc(100vw - 44px));
	background: #fff;
	color: var(--mbre-text);
	border: 1px solid var(--mbre-border);
	border-radius: 14px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
	padding: 4px 4px 4px 0;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease;
}
.mbre-pos-right .mbre-teaser { right: 22px; }
.mbre-pos-left  .mbre-teaser { left: 22px; }
.mbre-teaser.mbre-teaser-in { opacity: 1; transform: none; }
.mbre-teaser-text {
	flex: 1;
	background: none;
	border: 0;
	padding: 10px 6px 10px 14px;
	font: inherit;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
	color: inherit;
	cursor: pointer;
}
.mbre-teaser-text:focus-visible { outline: 2px solid var(--mbre-accent); outline-offset: 2px; border-radius: 10px; }
.mbre-teaser-close {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin-top: 4px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6b6b6b;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.mbre-teaser-close:hover,
.mbre-teaser-close:focus-visible { background: #f2f2f2; color: #1d1d1f; }
@media (prefers-reduced-motion: reduce) {
	.mbre-teaser { transition: none; transform: none; }
}
@media (max-width: 480px) {
	.mbre-teaser { bottom: 90px; }
	.mbre-pos-right .mbre-teaser { right: 14px; }
	.mbre-pos-left  .mbre-teaser { left: 14px; }
}

/* The brand mark standing in for a missing photo: contained, not cropped. */
.mbre-listing-card img.mbre-listing-fallback {
	object-fit: contain;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--mbre-border);
	box-sizing: border-box;
}