/* ---------------------------------------------------------------
 * Defensive resets — prevent mmcarz.com.au (or any host site's)
 * theme CSS from leaking into the widget. All widget elements are
 * scoped under #mm-chat-panel or #mm-chat-fab.
 * --------------------------------------------------------------- */
#mm-chat-fab,
#mm-chat-panel,
#mm-chat-panel * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", sans-serif !important;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  box-sizing: border-box;
  line-height: 1.4;
}
#mm-chat-panel button,
#mm-chat-panel input,
#mm-chat-panel textarea,
#mm-chat-panel a {
  font: inherit;
  color: inherit;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  background-image: none;
  -webkit-appearance: none;
  appearance: none;
}
#mm-chat-panel textarea.mm-input,
#mm-chat-panel textarea.mm-input:focus,
#mm-chat-panel textarea.mm-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 14px !important;
  padding: 2px 0 8px !important;
  margin: 0 !important;
  resize: none !important;
}
#mm-chat-panel .mm-input-card:focus-within {
  border-color: var(--mm-blue);
  box-shadow: 0 0 0 3px rgba(2, 102, 177, 0.1);
}
#mm-chat-panel button:focus,
#mm-chat-panel button:focus-visible {
  outline: none !important;
}
#mm-chat-panel .mm-quickaction-btn {
  font-weight: 500 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Ensure SVG icons inherit widget colour cleanly from their button parent */
#mm-chat-panel svg {
  stroke: currentColor;
  fill: none;
}
#mm-chat-panel .mm-send svg,
#mm-chat-fab svg,
#mm-chat-fab svg path,
#mm-chat-fab svg circle,
#mm-chat-fab svg line {
  stroke: #ffffff !important;
  fill: none !important;
  color: #ffffff !important;
}
#mm-chat-fab {
  background: var(--mm-blue-dark) !important;
  color: #fff !important;
}

:root {
  --mm-blue: #0266b1;
  --mm-blue-dark: #033e7a;
  --mm-red: #e80012;

  --mm-bg: #faf8f5;
  --mm-surface: #ffffff;
  --mm-border: #e8e4dc;
  --mm-text: #1c1a17;
  --mm-muted: #6b655a;
  --mm-subtle: #a39d92;

  --mm-radius-lg: 18px;
  --mm-radius-md: 14px;
  --mm-radius-sm: 10px;
  --mm-shadow: 0 10px 30px rgba(3, 62, 122, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
  --mm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", sans-serif;
}

#mm-chat-fab,
#mm-chat-fab:active,
#mm-chat-fab:focus,
#mm-chat-fab:hover {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: 22px !important;
  bottom: 22px !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mm-blue-dark);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(3, 62, 122, 0.35);
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
  font-family: var(--mm-font);
  /* Create a stacking context so the ::before aura glow can sit behind the
     button's content without leaking to the page layer below. */
  isolation: isolate;
}

/* Aura glow ring — rotating conic gradient of the MM Carz palette
   (blue, red, dark blue) behind the FAB. Blurred so it reads as a soft halo,
   not a hard ring. */
#mm-chat-fab::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #0266b1 0%,
    #e80012 33%,
    #033e7a 66%,
    #0266b1 100%
  );
  filter: blur(7px);
  opacity: 0.85;
  z-index: -1;
  animation: mm-aura-spin 4s linear infinite;
  pointer-events: none;
}
#mm-chat-fab:hover::before {
  inset: -8px;
  opacity: 1;
  filter: blur(10px);
}
@keyframes mm-aura-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
#mm-chat-fab:hover { transform: scale(1.05); background: var(--mm-blue); }
#mm-chat-fab svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex: none !important;
  flex-shrink: 0 !important;
}
/* Don't let the SVG (or its children) swallow taps — route all clicks to the
   parent <button> so the FAB stays tappable on top of swiper galleries or
   other plugin widgets with their own touch handlers. */
#mm-chat-fab svg,
#mm-chat-fab svg * {
  pointer-events: none !important;
}
#mm-chat-fab {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#mm-chat-panel {
  position: fixed;
  right: 22px;
  bottom: 92px;
  width: 390px;
  max-width: calc(100vw - 44px);
  height: 640px;
  max-height: calc(100vh - 120px);
  background: var(--mm-bg);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow);
  z-index: 999999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--mm-font);
  color: var(--mm-text);
  border: 1px solid var(--mm-border);
}
#mm-chat-panel.open { display: flex; }

.mm-header {
  background: #ffffff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--mm-border);
}
.mm-header .mm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.mm-header .mm-logo-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  padding: 2px;
  background: #ffffff;
  border: 1.5px solid rgba(2, 102, 177, 0.35);
  box-sizing: border-box;
}
.mm-header .mm-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mm-header .mm-name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--mm-text);
}
.mm-header .mm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}
.mm-header .mm-sub {
  font-size: 12px;
  color: var(--mm-muted);
  margin-top: 1px;
}
.mm-header .mm-icon-btn {
  background: transparent;
  border: none;
  color: var(--mm-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.mm-header .mm-icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--mm-text); }
.mm-header .mm-icon-btn svg { width: 18px; height: 18px; }

/* Language switcher (globe icon + dropdown menu) */
#mm-chat-panel .mm-lang-wrap { position: relative; display: inline-flex; }
#mm-chat-panel .mm-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: none;
  flex-direction: column;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  z-index: 1000000;
  min-width: 160px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
#mm-chat-panel .mm-lang-menu.open { display: flex; }
#mm-chat-panel .mm-lang-item {
  background: transparent;
  border: none;
  padding: 8px 12px;
  text-align: start;
  cursor: pointer;
  color: var(--mm-text);
  font-size: 14px;
  font-family: inherit;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.1s;
}
#mm-chat-panel .mm-lang-item:hover { background: rgba(2, 102, 177, 0.08); }
#mm-chat-panel .mm-lang-item.mm-active {
  background: rgba(2, 102, 177, 0.12);
  color: var(--mm-blue-dark);
  font-weight: 600;
}

/* RTL (Arabic) support — flip message alignment + input direction */
#mm-chat-panel[dir="rtl"] .mm-msg.user { align-self: flex-start; border-bottom-right-radius: var(--mm-radius-md); border-bottom-left-radius: 4px; }
#mm-chat-panel[dir="rtl"] .mm-msg.bot,
#mm-chat-panel[dir="rtl"] .mm-msg.human { align-self: flex-end; border-bottom-left-radius: var(--mm-radius-md); border-bottom-right-radius: 4px; }
#mm-chat-panel[dir="rtl"] .mm-msg-wrap.user { align-items: flex-start; }
#mm-chat-panel[dir="rtl"] .mm-msg-wrap.bot { align-items: flex-end; }
#mm-chat-panel[dir="rtl"] .mm-human-row { flex-direction: row-reverse; }
#mm-chat-panel[dir="rtl"] .mm-input { text-align: right; direction: rtl; }
#mm-chat-panel[dir="rtl"] .mm-lang-menu { right: auto; left: 0; }

.mm-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mm-body::-webkit-scrollbar { width: 6px; }
.mm-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }

.mm-msg-wrap {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  gap: 4px;
}
.mm-msg-wrap.user { align-self: flex-end; align-items: flex-end; }
.mm-msg-wrap.bot { align-self: flex-start; align-items: flex-start; }

.mm-msg {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
  border-radius: var(--mm-radius-md);
}
.mm-msg.user {
  background: var(--mm-blue-dark);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.mm-msg .mm-bullet {
  display: block;
  margin: 6px 0;
  padding-left: 2px;
}
.mm-msg .mm-bullet:first-child { margin-top: 0; }
.mm-msg .mm-bullet:last-child { margin-bottom: 0; }
#mm-chat-panel .mm-msg a,
#mm-chat-panel .mm-msg a:link,
#mm-chat-panel .mm-msg a:visited {
  color: var(--mm-blue) !important;
  text-decoration: none !important;
  text-underline-offset: 2px;
  font-weight: 600 !important;
}
.mm-msg.user a {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}
.mm-msg a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.mm-msg.bot {
  background: var(--mm-surface);
  color: var(--mm-text);
  border: 1px solid var(--mm-border);
  border-bottom-left-radius: 4px;
}

.mm-msg.user .mm-attached-img {
  max-width: 220px;
  border-radius: var(--mm-radius-sm);
  display: block;
  margin-bottom: 6px;
}

.mm-human-row {
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 90%;
}
.mm-human-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--mm-blue-dark);
  border: 1.5px solid rgba(2, 102, 177, 0.3);
  display: block;
}
.mm-human-avatar.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
}
.mm-human-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mm-msg.human {
  background: #e7f1fb;
  color: var(--mm-text);
  border: 1px solid rgba(2, 102, 177, 0.25);
  border-bottom-left-radius: 4px;
}
.mm-from-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mm-blue);
  margin-bottom: 0;
  letter-spacing: 0;
}

.mm-waiting {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  border-bottom-left-radius: 4px;
  font-size: 13px;
  color: var(--mm-muted);
}
.mm-waiting .mm-wheel.small { width: 18px; height: 18px; }
.mm-waiting .mm-waiting-text { flex: 1; }
.mm-waiting .mm-waiting-timer {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--mm-blue-dark);
  background: rgba(2, 102, 177, 0.1);
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

.mm-quickaction-row {
  align-self: flex-start;
  margin-top: 2px;
}
.mm-quickaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--mm-surface) !important;
  color: var(--mm-blue-dark) !important;
  border: 1.5px solid var(--mm-blue) !important;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.mm-quickaction-btn svg {
  stroke: currentColor;
  color: inherit !important;
}
.mm-quickaction-btn:hover {
  background: var(--mm-blue) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.mm-quickaction-btn:hover svg { color: #fff !important; stroke: #fff !important; }

.mm-msg-actions {
  display: flex;
  gap: 2px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.1s;
}
.mm-msg-wrap:hover .mm-msg-actions,
.mm-human-row:hover .mm-msg-actions { opacity: 1; }
/* Keep actions visible when a picker is open so the user can click emojis */
.mm-msg-wrap:has(.mm-react-picker.open) .mm-msg-actions,
.mm-human-row:has(.mm-react-picker.open) .mm-msg-actions { opacity: 1; }

.mm-copy-btn,
.mm-react-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: transparent;
  border: none;
  color: var(--mm-subtle);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.1s, color 0.1s;
}
.mm-copy-btn:hover,
.mm-react-btn:hover { background: rgba(0,0,0,0.05); color: var(--mm-text); }
.mm-copy-btn svg,
.mm-react-btn svg { width: 11px; height: 11px; }
.mm-copy-btn.copied { opacity: 1; }

.mm-react-wrap { position: relative; display: inline-flex; }
.mm-react-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  display: none;
  gap: 4px;
  padding: 8px 10px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: 28px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  z-index: 20;
  white-space: nowrap;
}
/* For user (right-aligned) messages, anchor picker to the right so it
   expands LEFT instead of running off screen. */
.mm-msg-wrap.user .mm-react-picker {
  left: auto;
  right: 0;
}
/* Keep the picker inside the viewport — cap width. Keep emojis in a single
   horizontal row (no wrap); the mobile rules further down shrink the size to
   fit all 7 in a narrow viewport. */
.mm-react-picker {
  max-width: calc(100vw - 16px) !important;
}
.mm-react-picker.open { display: flex; animation: mm-pop-in 0.12s ease-out; }
@keyframes mm-pop-in {
  from { opacity: 0; transform: scale(0.85) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
#mm-chat-panel .mm-react-emoji,
#mm-chat-panel button.mm-react-emoji {
  background: none !important;
  border: none !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer;
  padding: 6px 8px !important;
  border-radius: 50% !important;
  transition: background 0.1s, transform 0.1s;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}
/* WordPress core's emoji script swaps emoji TEXT with an <img class="emoji">.
   Stylesheet rules get overridden by WP's own `img.emoji` rule, so sizing is
   enforced via inline style in widget.js (MutationObserver).
   These are the matching CSS fallbacks when the img stays as unicode text. */
#mm-chat-panel .mm-react-emoji img.emoji {
  width: 24px !important;
  height: 24px !important;
  vertical-align: middle !important;
  display: inline-block !important;
  margin: 0 !important;
}
#mm-chat-panel .mm-reaction-pill img.emoji {
  width: 18px !important;
  height: 18px !important;
  vertical-align: -0.2em !important;
  display: inline-block !important;
  margin: 0 !important;
}
#mm-chat-panel .mm-msg img.emoji,
#mm-chat-panel .mm-header img.emoji {
  width: 1.1em !important;
  height: 1.1em !important;
  vertical-align: -0.15em !important;
  display: inline-block !important;
  margin: 0 !important;
}
/* Mobile bump: slightly larger tap targets on phones */
@media (max-width: 640px) and (orientation: portrait) {
  #mm-chat-panel .mm-react-emoji img.emoji {
    width: 22px !important;
    height: 22px !important;
  }
  #mm-chat-panel .mm-reaction-pill img.emoji {
    width: 18px !important;
    height: 18px !important;
  }
}
.mm-react-emoji:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.25);
}

.mm-reactions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.mm-msg-wrap.user .mm-reactions { justify-content: flex-end; }
.mm-reaction-pill {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1.3;
  transition: transform 0.1s, background 0.1s;
  font-family: inherit;
}
.mm-reaction-pill:hover {
  background: rgba(0, 0, 0, 0.03);
  transform: scale(1.05);
}

/* Input-area emoji picker */
.mm-emoji-wrap { position: relative; }
.mm-emoji-grid {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 6px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  z-index: 20;
  width: 220px;
  max-height: 180px;
  overflow-y: auto;
}
.mm-emoji-grid.open { display: grid; animation: mm-pop-in 0.12s ease-out; }
.mm-emoji-cell {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  transition: background 0.1s, transform 0.1s;
}
.mm-emoji-cell:hover {
  background: rgba(2, 102, 177, 0.08);
  transform: scale(1.15);
}

.mm-typing {
  align-self: flex-start;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* max-width mirrors normal chat bubbles so the progress text wraps
     to its own line gracefully once it appears (5s+ into wait). */
  max-width: calc(100% - 24px);
}
.mm-typing-timer {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--mm-subtle);
  font-weight: 500;
}
/* Progressive reassurance text — only shows after ~5s of elapsed wait,
   with a gentle fade so each phase change feels smooth rather than a
   jump-cut. Italic + subtle color to distinguish from Michi's actual
   replies so users never mistake progress narration for a real answer. */
.mm-typing-progress {
  font-size: 12px;
  color: var(--mm-subtle);
  font-style: italic;
  opacity: 0;
  transition: opacity 400ms ease-in;
  /* flex-basis:100% forces the progress text onto its own line under the
     spinning wheel, rather than running off the right edge of the chat
     bubble when the message is long (e.g. the first phase string). */
  flex-basis: 100%;
  max-width: 280px;
  line-height: 1.35;
  margin-top: 2px;
}
.mm-typing-progress.mm-typing-progress-show {
  opacity: 0.85;
}
.mm-wheel {
  width: 28px;
  height: 28px;
  animation: mm-spin 0.9s linear infinite;
}
.mm-wheel svg { width: 100%; height: 100%; display: block; }
@keyframes mm-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.mm-car-card {
  align-self: flex-start;
  max-width: 88%;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  overflow: hidden;
  margin-top: 2px;
}
.mm-car-card img {
  width: 100%;
  display: block;
  background: #f2efe9;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.mm-car-card .mm-car-body { padding: 12px 14px; }
.mm-car-card .mm-car-title { font-weight: 600; font-size: 14px; color: var(--mm-text); }
.mm-car-card .mm-car-price {
  color: var(--mm-blue);
  font-weight: 700;
  font-size: 16px;
  margin-top: 4px;
}
.mm-car-card .mm-car-meta { font-size: 12px; color: var(--mm-muted); margin-top: 4px; }
.mm-car-card a.mm-car-link {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 12px;
  background: var(--mm-blue-dark);
  color: #fff;
  text-decoration: none;
  border-radius: var(--mm-radius-sm);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s;
}
.mm-car-card a.mm-car-link:hover { background: var(--mm-blue); }

/* Indicative weekly repayment card. Rendered when Michi emits a FINANCE
   token. The yellow disclaimer banner is visually prominent on purpose —
   it is THE mechanism preventing buyers from treating the estimate as a
   binding finance offer, so it must never be mistaken for decoration. */
.mm-finance-card {
  align-self: flex-start;
  max-width: 88%;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  overflow: hidden;
  margin-top: 2px;
  padding: 0;
}
.mm-finance-header {
  padding: 12px 14px 0 14px;
}
.mm-finance-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mm-muted);
  font-weight: 600;
}
/* Short warning placed immediately under the title and above the $ figure.
   Belt-and-braces for the full yellow disclaimer at the bottom of the card:
   if the buyer crops or scrolls past that banner, this line still sits right
   next to the number and keeps the "not a real offer" signal visible. */
.mm-finance-subwarn {
  font-size: 11px;
  color: #8a5a00;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.mm-finance-main {
  padding: 4px 14px 0 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.mm-finance-weekly {
  color: var(--mm-blue-dark);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
}
.mm-finance-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--mm-muted);
  margin-left: 2px;
}
.mm-finance-monthly {
  font-size: 13px;
  color: var(--mm-muted);
  font-weight: 500;
}
.mm-finance-meta {
  font-size: 12px;
  color: var(--mm-muted);
  padding: 6px 14px 12px 14px;
  line-height: 1.4;
}
.mm-finance-disclaimer {
  background: #fff4d6;
  border-top: 1px solid #f0d98a;
  color: #6b4e00;
  font-size: 11px;
  line-height: 1.45;
  padding: 10px 14px 4px 14px;
}
.mm-finance-disclaimer p {
  margin: 0 0 8px 0;
}
.mm-finance-disclaimer p:last-child {
  margin-bottom: 6px;
}
.mm-finance-disclaimer strong { color: #7a3b00; }
/* Drive-away / stamp-duty / rego note — same theme as the main disclaimer
   but slightly lighter so it reads as a secondary caveat rather than the
   primary legal warning. */
.mm-finance-driveaway {
  font-style: italic;
  color: #8a6a1f !important;
  border-top: 1px dashed #f0d98a;
  padding-top: 6px;
}

/* Horizontal strip of mini car cards under a multi-car list reply.
   Each card is ~150px wide; track scrolls horizontally with snap for
   easy browsing. Keeps list replies visual without stacking vertically. */
.mm-carstrip {
  align-self: stretch;
  margin: 4px 0 2px;
  /* Let strip bleed to the edge on narrow mobile for a richer feel */
  margin-left: -4px;
  margin-right: -4px;
  position: relative;
}
.mm-carstrip-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 4px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mm-carstrip-track::-webkit-scrollbar { display: none; }

/* Chevron buttons — hidden by default; shown when content actually overflows
   (see mm-carstrip-has-prev / has-next toggled by JS). Hidden entirely on
   coarse pointers (touch devices) where swipe is the natural interaction. */
.mm-carstrip-arrow {
  position: absolute;
  top: calc(50% - 8px);            /* ~center over the photo area */
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--mm-border);
  background: rgba(255, 255, 255, 0.96);
  color: var(--mm-text);
  display: none;                   /* revealed via .has-prev / .has-next */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  box-shadow: 0 2px 6px rgba(26, 22, 19, 0.14);
  transition: background 0.15s, transform 0.15s;
}
.mm-carstrip-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
}
.mm-carstrip-arrow.prev { left: 6px; }
.mm-carstrip-arrow.next { right: 6px; }
.mm-carstrip-has-prev .mm-carstrip-arrow.prev { display: flex; }
.mm-carstrip-has-next .mm-carstrip-arrow.next { display: flex; }

/* Edge fade cues — subtle gradient at the left/right edge hinting "there's
   more". Only visible when content overflows on that side. */
.mm-carstrip::before,
.mm-carstrip::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 4px;
  width: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1;
}
.mm-carstrip::before {
  left: 4px;
  background: linear-gradient(to right, var(--mm-bg, #f6f4ef), transparent);
}
.mm-carstrip::after {
  right: 4px;
  background: linear-gradient(to left, var(--mm-bg, #f6f4ef), transparent);
}
.mm-carstrip-has-prev::before { opacity: 1; }
.mm-carstrip-has-next::after { opacity: 1; }

/* Touch devices: arrows are noise — swiping IS the gesture. Hide them. */
@media (hover: none) and (pointer: coarse) {
  .mm-carstrip-arrow { display: none !important; }
}
.mm-carstrip-card {
  flex: 0 0 150px;
  scroll-snap-align: start;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mm-carstrip-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(26, 22, 19, 0.08);
}
.mm-carstrip-card img {
  width: 100%;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: #f2efe9;
}
.mm-carstrip-nophoto {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #a39d92;
  background: #f2efe9;
}
.mm-carstrip-body { padding: 8px 10px 10px; }
.mm-carstrip-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--mm-text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-carstrip-price {
  color: var(--mm-blue);
  font-weight: 700;
  font-size: 13px;
  margin-top: 3px;
}
.mm-carstrip-loading {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--mm-muted);
  font-style: italic;
}

.mm-handoff {
  align-self: flex-start;
  margin-top: 2px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#mm-chat-panel .mm-handoff a,
#mm-chat-panel .mm-handoff a:link,
#mm-chat-panel .mm-handoff a:visited,
#mm-chat-panel .mm-handoff a:hover,
#mm-chat-panel .mm-handoff a:active {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 14px !important;
  background: var(--mm-red) !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(232, 0, 18, 0.25) !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
}
#mm-chat-panel .mm-handoff a:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(232, 0, 18, 0.35) !important;
}
#mm-chat-panel .mm-handoff a *,
#mm-chat-panel .mm-handoff-label,
#mm-chat-panel .mm-handoff-name,
#mm-chat-panel .mm-handoff-phone {
  color: #fff !important;
}
#mm-chat-panel .mm-handoff-label {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}
#mm-chat-panel .mm-handoff-name { font-weight: 600 !important; font-size: 13px !important; }
#mm-chat-panel .mm-handoff-phone { font-weight: 400 !important; font-size: 11px !important; opacity: 0.9 !important; }

/* Dedicated "Book a test drive" chip — shown under the Michi reply when the
   user asks to inspect / test-drive / get a callback. Click opens the form.
   Styled in MM Carz blue to signal primary CTA. */
#mm-chat-panel .mm-handoff-testdrive-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  background: var(--mm-blue-dark) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(3, 62, 122, 0.25) !important;
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
}
#mm-chat-panel .mm-handoff-testdrive-btn:hover {
  transform: translateY(-1px);
  background: var(--mm-blue) !important;
  box-shadow: 0 4px 12px rgba(2, 102, 177, 0.3) !important;
}
#mm-chat-panel .mm-handoff-testdrive-btn svg { stroke: #fff !important; }

/* Inline callback / test-drive request form */
.mm-callback {
  align-self: stretch;
  margin: 6px 0;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  overflow: hidden;
}
.mm-callback-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--mm-border);
  background: linear-gradient(180deg, rgba(2,102,177,0.04), transparent);
}
.mm-callback-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--mm-text);
  letter-spacing: -0.01em;
}
.mm-callback-sub {
  font-size: 12px;
  color: var(--mm-muted);
  margin-top: 2px;
}
.mm-callback-body { padding: 12px 14px 14px; }
.mm-cb-label {
  display: block;
  font-size: 12px;
  color: var(--mm-muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.mm-cb-req { color: var(--mm-red); margin-left: 2px; font-weight: 700; }
.mm-cb-opt { color: var(--mm-subtle); font-weight: 400; }
#mm-chat-panel .mm-cb-field {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: var(--mm-text) !important;
  background: var(--mm-bg) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius-sm) !important;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
#mm-chat-panel .mm-cb-field:focus {
  border-color: var(--mm-blue) !important;
  background: var(--mm-surface) !important;
  box-shadow: 0 0 0 3px rgba(2, 102, 177, 0.12) !important;
}
#mm-chat-panel select.mm-cb-field {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='none' stroke='%236b655a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l3 3 3-3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 28px !important;
}
.mm-cb-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
#mm-chat-panel .mm-cb-method {
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: var(--mm-bg) !important;
  color: var(--mm-text) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 16px !important;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
#mm-chat-panel .mm-cb-method:hover { background: #f0eadd !important; }
#mm-chat-panel .mm-cb-method.mm-active {
  background: var(--mm-blue-dark) !important;
  color: #fff !important;
  border-color: var(--mm-blue-dark) !important;
}
.mm-cb-error {
  color: var(--mm-red);
  font-size: 12px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: rgba(232, 0, 18, 0.06);
  border-radius: var(--mm-radius-sm);
}
.mm-cb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
#mm-chat-panel .mm-cb-cancel {
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--mm-muted) !important;
  border: none !important;
  border-radius: 20px !important;
  cursor: pointer;
}
#mm-chat-panel .mm-cb-cancel:hover { color: var(--mm-text) !important; background: rgba(0,0,0,0.04) !important; }
#mm-chat-panel .mm-cb-submit {
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--mm-blue-dark) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(3, 62, 122, 0.25) !important;
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
}
#mm-chat-panel .mm-cb-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--mm-blue) !important;
  box-shadow: 0 4px 12px rgba(2, 102, 177, 0.3) !important;
}
#mm-chat-panel .mm-cb-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.mm-callback-done {
  padding: 14px;
  text-align: center;
  color: var(--mm-text);
  background: rgba(34, 197, 94, 0.08);
  font-size: 13px;
  font-weight: 500;
}

.mm-footer {
  padding: 10px 12px 0;
  background: var(--mm-bg);
}

.mm-input-card {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  padding: 10px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mm-input-card:focus-within {
  border-color: var(--mm-blue);
  box-shadow: 0 0 0 3px rgba(2, 102, 177, 0.1);
}

.mm-preview-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.mm-preview {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--mm-radius-sm);
  overflow: hidden;
  border: 1px solid var(--mm-border);
}
.mm-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-pdf-icon {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: #fff;
  color: var(--mm-blue-dark);
  gap: 2px;
}
.mm-pdf-icon div {
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-preview .mm-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65) !important;
  color: #fff !important;
  border: none;
  cursor: pointer;
  font-size: 12px !important;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.mm-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  background: transparent;
  color: var(--mm-text);
  padding: 2px 0 8px;
  resize: none;
  min-height: 22px;
  max-height: 120px;
  line-height: 1.4;
}
.mm-input::placeholder { color: var(--mm-subtle); }

.mm-action-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mm-action-row .mm-spacer { flex: 1; }
.mm-action-btn {
  background: transparent;
  border: none;
  color: var(--mm-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.mm-action-btn:hover { background: rgba(0,0,0,0.05); color: var(--mm-text); }
.mm-action-btn svg { width: 18px !important; height: 18px !important; min-width: 18px !important; flex: none !important; flex-shrink: 0 !important; }

.mm-send {
  background: var(--mm-red) !important;
  color: #fff !important;
  border: none;
  border-radius: 50%;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  flex: none !important;
  padding: 0 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.mm-send:hover:not(:disabled) { transform: translateY(-1px); }
.mm-send:disabled { background: var(--mm-subtle) !important; cursor: not-allowed; }
.mm-send svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: none !important;
  flex-shrink: 0 !important;
  color: #fff !important;
  stroke: #fff !important;
}

.mm-branding {
  text-align: center;
  font-size: 11px;
  color: var(--mm-subtle);
  padding: 14px 0;
}

/* ---------- Mobile: fullscreen panel ---------- */
@media (max-width: 640px) {
  #mm-chat-panel {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    /* No explicit height — inset:0 (top/right/bottom/left all 0) stretches the
       panel across the entire layout viewport. On iOS Safari `100vh` can shrink
       with the keyboard and leaves a gap at the bottom where page content leaks
       through. With inset:0 the panel bg always reaches the edge. */
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    padding-top: env(safe-area-inset-top, 0) !important;
    box-sizing: border-box;
  }
  /* FAB visibility is now controlled purely via JS inline style — the :has()
     selector had inconsistent cross-browser behavior (older Safari) and could
     leave the FAB hidden with display:none !important. */
  #mm-chat-panel .mm-header {
    padding: 14px 16px;
  }
  #mm-chat-panel .mm-body {
    padding: 16px 14px;
  }
  #mm-chat-panel .mm-footer {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #mm-chat-panel .mm-emoji-grid {
    width: 88vw;
    max-width: 320px;
  }
  /* iOS auto-zooms any input with font-size <16px. 16px minimum disables zoom. */
  #mm-chat-panel .mm-input,
  #mm-chat-panel textarea.mm-input {
    font-size: 16px !important;
  }
  /* Bigger tap targets for reaction emojis on mobile */
  #mm-chat-panel .mm-react-picker {
    gap: 2px !important;
    padding: 6px 8px !important;
  }
  #mm-chat-panel .mm-react-emoji {
    font-size: 22px !important;
    padding: 4px 5px !important;
    line-height: 1 !important;
  }
  #mm-chat-panel .mm-reaction-pill {
    font-size: 17px !important;
    padding: 4px 12px !important;
    border-radius: 16px !important;
  }
  #mm-chat-panel .mm-emoji-cell {
    font-size: 24px !important;
    padding: 8px !important;
  }
  /* Claude-app style: when the keyboard opens, keep the full chat UI
     (header + body + input) visible. Keyboard just layers on top as a
     second layer — no content hiding, no mode switch. The JS still adds
     `padding-bottom: keyboardH` on the panel so the input sits flush above
     the keyboard while the header stays pinned to the top. */
  /* Bigger gap between react + copy buttons for fat-finger friendliness. */
  #mm-chat-panel .mm-msg-actions {
    gap: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.15s !important;
  }
  /* Tap a message to reveal its actions. Tap again (or another message) to hide.
     We use opacity+visibility instead of max-height/overflow because the reaction
     picker is absolute-positioned and gets clipped by any overflow:hidden parent. */
  #mm-chat-panel .mm-msg-wrap.mm-actions-on .mm-msg-actions,
  #mm-chat-panel .mm-human-row.mm-actions-on .mm-msg-actions {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  /* Keep the actions visible while a picker is open (covers picker-outside-row). */
  #mm-chat-panel .mm-msg-wrap:has(.mm-react-picker.open) .mm-msg-actions,
  #mm-chat-panel .mm-human-row:has(.mm-react-picker.open) .mm-msg-actions {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  /* Smaller Copy text + icon on mobile so it doesn't dominate the row. */
  #mm-chat-panel .mm-copy-btn,
  #mm-chat-panel .mm-react-btn {
    font-size: 9px !important;
    padding: 1px 4px !important;
    gap: 2px !important;
  }
  #mm-chat-panel .mm-copy-btn svg,
  #mm-chat-panel .mm-react-btn svg {
    width: 9px !important;
    height: 9px !important;
  }
  /* Message links: blue + bold only, no underline (keeps chat clean). */
  #mm-chat-panel .mm-msg a,
  #mm-chat-panel .mm-msg a:link,
  #mm-chat-panel .mm-msg a:visited {
    text-decoration: none !important;
    color: var(--mm-blue) !important;
    font-weight: 600 !important;
  }
}

/* Full-viewport backdrop behind the panel — guarantees no page content leaks
   through even if iOS re-computes the panel height mid-keyboard-open. The
   panel floats on top (higher z-index); this just paints the same cream bg
   across the entire layout viewport. Only on mobile — desktop uses floating
   panel so the page behind is supposed to be visible. */
@media (max-width: 640px) and (orientation: portrait) {
  body.mm-chat-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--mm-bg);
    z-index: 999998;
    pointer-events: none;
  }
}

/* ---------- Mobile landscape: floating panel like desktop ---------- */
/* iPhone in landscape is ~844x390. Don't fullscreen — use a compact floating
   panel (Chatway-style) that fits the short viewport cleanly. */
@media (orientation: landscape) and (max-height: 500px) {
  #mm-chat-panel {
    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;
    top: auto !important;
    width: min(440px, 60vw) !important;
    max-width: 60vw !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 16px !important;
    border: 1px solid var(--mm-border) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

#mm-chat-panel.mm-dragging::before {
  content: "drop photos to attach";
  position: absolute;
  inset: 0;
  background: rgba(2, 102, 177, 0.08);
  border: 2px dashed var(--mm-blue);
  border-radius: var(--mm-radius-lg);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--mm-blue-dark);
  font-size: 15px;
  pointer-events: none;
}