/* Chat widget tokens alias to the admin's, with the public funnel tokens as fallback. */
html {
    --primary: var(--rq-accent, var(--fn-accent));
    --primary-foreground: var(--rq-on-accent, var(--fn-on-accent));
    --primary-hover: var(--rq-accent-ink, var(--fn-accent-hover));
    --foreground: var(--rq-text, var(--fn-text));
    --muted-foreground: var(--rq-text-muted, var(--fn-text-muted));
    --border: var(--rq-border, var(--fn-border));
    --input: var(--rq-border, var(--fn-border));
    --card: var(--rq-surface, var(--fn-surface));
    --background: var(--rq-bg, var(--fn-bg));
    --muted: var(--rq-neutral-tint, var(--fn-surface-alt));
    --accent: var(--rq-neutral-tint, color-mix(in srgb, var(--fn-text) 8%, transparent));
    --ring: color-mix(in srgb, var(--rq-accent, var(--fn-accent)) 65%, var(--rq-border, var(--fn-border)));
    --secondary: var(--rq-surface, var(--fn-surface-alt));
    --radius: 10px;
    --font-sans: var(--rq-font, var(--fn-font));
    --font-display: var(--rq-font, var(--fn-font));
}
.concierge__actions {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--foreground);
}
.concierge__actions li { margin-bottom: 0.5rem; }
.concierge__when {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.6875rem;
}
.mchat__launch {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 0 0 / 25%);
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mchat__launch:hover { transform: translateY(-2px); }
.mchat__launch .nav-icon, .mchat__launch svg { width: 1.4rem; height: 1.4rem; }
.mchat {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: 22rem;
  max-width: calc(100vw - 2.5rem);
  height: 28rem;
  max-height: 70vh;
  overflow: hidden;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 30%);
}
.mchat[hidden] { display: none; }
.mchat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  box-sizing: border-box;
  height: 2.75rem;
  padding: 0 0.9rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}
/* Light mode: the accent is dark enough to carry white, and a chat header
   with white text and white icons is what a chat header should look like.
   White on the plain accent is only 3.68:1, so the bar goes a shade deeper
   and the whole header lifts to 6.34:1. */
html[data-theme="light"] .mchat__launch,
:root[data-theme="light"] .mchat__launch {
  background: var(--fn-accent-ink, var(--rq-accent-ink));
  color: #fff;
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"] .mchat__launch,
  :root[data-theme="system"] .mchat__launch {
    background: var(--fn-accent-ink, var(--rq-accent-ink));
    color: #fff;
  }
}
html[data-theme="light"] .mchat__head,
:root[data-theme="light"] .mchat__head {
  background: var(--fn-accent-ink, var(--rq-accent-ink));
  color: #fff;
}
html[data-theme="light"] .mchat__tag,
:root[data-theme="light"] .mchat__tag {
  background: rgb(255 255 255 / 22%);
  color: #fff;
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"] .mchat__head,
  :root[data-theme="system"] .mchat__head {
    background: var(--fn-accent-ink, var(--rq-accent-ink));
    color: #fff;
  }
  html[data-theme="system"] .mchat__tag,
  :root[data-theme="system"] .mchat__tag {
    background: rgb(255 255 255 / 22%);
    color: #fff;
  }
}

.mchat__clear {
  margin-left: auto;
  padding: 0.15rem 0.4rem;
  background: none;
  border: none;
  border-radius: 6px;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.75;
  cursor: pointer;
}
.mchat__clear:hover { opacity: 1; background: rgb(255 255 255 / 15%); }
.mchat__clear[hidden] { display: none; }
.mchat__clear[disabled] { opacity: 0.4; cursor: default; }
.mchat__clear ~ .mchat__close { margin-left: 0; }
.mchat__close {
  /* Pushed right on its own, so a header with no title still puts the close
     button where every close button lives. space-between alone would float it
     to the left the moment it is the only child. */
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.75;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.mchat__log {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mchat__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ⚠️ `safe` matters here, and the fallback below is the whole point. When the
     greeting, a notice and three chips exceed the panel, plain `center` pushes
     the overflow ABOVE the scrollable top, where it cannot be scrolled back
     into view: measured at 353px of content in a 314px log with the icon 10px
     out of reach. `safe` falls back to flex-start instead of clipping. */
  justify-content: center;
  justify-content: safe center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem 0.5rem;
  text-align: center;
}
.mchat__empty .nav-icon, .mchat__empty > svg {
  width: 2rem;
  height: 2rem;
  color: var(--primary);
  opacity: 0.9;
}
.mchat__emptytitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}
.mchat__emptynote {
  margin: 0;
  max-width: 22ch;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}
.mchat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0.2rem;
  background: none;
  border: none;
  border-radius: 6px;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
}
.mchat__icon:hover { opacity: 1; background: rgb(255 255 255 / 15%); }
.mchat__icon .nav-icon, .mchat__icon svg { width: 1rem; height: 1rem; }
.mchat__icon[aria-expanded="true"] { opacity: 1; background: rgb(255 255 255 / 22%); }
.mchat__icon ~ .mchat__icon,
.mchat__icon ~ .mchat__clear,
.mchat__icon ~ .mchat__close { margin-left: 0; }
.concierge__history {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem;
}
.mchat__log[hidden],
.concierge__history[hidden] {
  display: none;
}
.concierge__empty {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.concierge__historytitle {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  /* The brand color, because it is a headline over the entries rather than
     another line of them. Muted, it read as the first bullet. */
  color: var(--primary);
}
.mchat__msg {
  max-width: 85%;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  line-height: 1.45;
  font-size: 0.9rem;
  /* The model is told to answer in plain text, so newlines are the only
     formatting it has. Honoring them is what keeps a two-part answer readable. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mchat__msg--you {
  align-self: flex-end;
  background: var(--primary);
  color: var(--primary-foreground);
  border-bottom-right-radius: 3px;
}
.mchat__msg--bot {
  align-self: flex-start;
  background: var(--accent, rgb(0 0 0 / 6%));
  border-bottom-left-radius: 3px;
}
.mchat__typing {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0;
}
.mchat__typing span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: mchat-typing 1.1s ease-in-out infinite;
}
.mchat__typing span:nth-child(2) { animation-delay: 0.15s; }
.mchat__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mchat-typing {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-0.12rem); }
}
.mchat__form {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem;
  border-top: 1px solid var(--border);
}
.mchat__form input { margin-right: 0.15rem; }
.mchat__form input { flex: 1; min-width: 0; }
.mchat__form input[type="text"] {
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--input);
  color: var(--foreground);
}
.mchat__form input[type="text"]::placeholder { font-size: 0.85rem; color: color-mix(in srgb, var(--muted-foreground) 80%, var(--foreground)); opacity: 1; }
.mchat__form input[type="text"]:focus,
.mchat__form input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 10%, transparent);
}
.mchat__form .btn {
  padding: 0.45rem 0.9rem;
  font-size: 0.825rem;
  border-radius: var(--radius);
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
  font-family: inherit;
}
.mchat__form .btn:hover { background: var(--primary-hover); }
.mchat .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mchat__launch .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mchat__form .mchat__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2.5rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius);
}
.mchat__form .mchat__send .nav-icon, .mchat__form .mchat__send svg { width: 1rem; height: 1rem; }
.mchat__mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2rem;
  height: 2.25rem;
  flex: none;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--muted-foreground);
  cursor: pointer;
}
.mchat__mic:hover { background: var(--accent); color: var(--foreground); }
.mchat__mic .nav-icon, .mchat__mic svg { width: 1.1rem; height: 1.1rem; }
.mchat__mic:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 40%, transparent);
}
.mchat__mic .mchat__mic-idle,
.mchat__mic .mchat__mic-done {
  display: inline-flex;
  align-items: center;
}
.mchat__mic .mchat__mic-done { display: none; }
.mchat__mic.is-listening .mchat__mic-idle { display: none; }
.mchat__mic.is-listening .mchat__mic-done { display: inline-flex; }
.mchat__miccancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2rem;
  height: 2.25rem;
  flex: none;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--muted-foreground);
  opacity: 0.75;
  cursor: pointer;
}
.mchat__miccancel:hover { background: var(--accent); color: var(--foreground); opacity: 1; }
.mchat__miccancel .nav-icon { width: 1rem; height: 1rem; }
.mchat__miccancel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 40%, transparent);
}
.mchat__mic[hidden],
.mchat__miccancel[hidden],
.mchat__send[hidden] { display: none; }
.mchat__mic.is-listening {
  color: var(--mahogany);
  background: color-mix(in srgb, var(--mahogany) 14%, transparent);
  animation: mic-pulse 1.4s ease-in-out infinite;
}
.mchat__speaker {
  opacity: 1;
}
.mchat__speaker.is-on {
  background: color-mix(in srgb, var(--mahogany) 18%, transparent);
}
.mchat__speaker .mchat__speaker-on,
.mchat__speaker .mchat__speaker-off {
  display: inline-flex;
  align-items: center;
}
.mchat__speaker .mchat__speaker-off { display: none; }
.mchat__speaker:not(.is-on) .mchat__speaker-on { display: none; }
.mchat__speaker:not(.is-on) .mchat__speaker-off { display: inline-flex; }
.mchat__speaker .nav-icon { width: 1rem; height: 1rem; }
.mchat__foot {
  margin: 0;
  padding: 0 0.6rem 0.6rem;
  font-size: 0.72rem;
  color: var(--muted-foreground);
  text-align: center;
}
.mchat--concierge .mchat__log { gap: 0.55rem; }
.mchat__starters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  padding: 0 0.75rem 0.4rem;
  overflow-x: auto;
  /* Scrolled with a trackpad or a swipe; the bar itself is visual noise on a
     row of three or four. */
  scrollbar-width: none;
}
.mchat__starters::-webkit-scrollbar { display: none; }
.mchat__starters .btn {
  flex: none;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--muted-foreground);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  /* Without this a two-word chip breaks in half rather than scrolling. */
  white-space: nowrap;
}
.mchat__starters .btn:hover {
  color: var(--foreground);
  border-color: var(--border);
}
.mchat__msg a {
  color: inherit;
  text-decoration: underline;
  word-break: break-all;
}

.mchat[data-voice-input="0"] .mchat__mic { display: none; }
.mchat[data-needs-key="1"] .mchat__mic { display: none; }
.mchat[data-needs-key="1"] .mchat__form input[type="text"][disabled] { opacity: 0.6; }
.mchat__emptynote a { color: var(--primary-hover); }
.mchat__tag {
  display: inline-block;
  line-height: 1.2;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
  background: rgb(0 0 0 / 18%);
  color: inherit;
  opacity: 0.85;
}
.mchat__starters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mchat__starters::-webkit-scrollbar { display: none; }
.mchat__starters[hidden] { display: none; }
.mchat__starters .mchat__chip { flex: none; white-space: nowrap; }
.mchat__chip {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
}
.mchat__chip:hover { border-color: var(--primary); color: var(--primary); }