/*
 * The site's AI chat (assistant.js), in the site's own colours and font.
 *
 * Colours (Settings → AI on your site): --mqa-accent (the brand's action
 * colour), --mqa-accent-2 (a lighter tone of it), --mqa-spark (a highlight)
 * and --mqa-deep (the brand's darkest colour). The look is light or dark
 * (data-theme): white frosted glass on a light site, the brand's deep
 * colour as glass on a dark one. The rules below read only the --mqa-*
 * tokens the two themes set, so one set of rules draws both.
 */
.mq-assistant {
  /* Dark: the brand's deep colour, frosted. */
  --mqa-surface: color-mix(in srgb, var(--mqa-deep) 94%, transparent);
  --mqa-sheen: color-mix(in srgb, #fff 7%, transparent);
  --mqa-raised: color-mix(in srgb, #fff 8%, transparent);
  --mqa-raised-2: color-mix(in srgb, #fff 13%, transparent);
  --mqa-ink: #f5f6fa;
  --mqa-strong: #fff;
  --mqa-soft: color-mix(in srgb, #fff 66%, transparent);
  --mqa-faint: color-mix(in srgb, #fff 46%, transparent);
  --mqa-line: color-mix(in srgb, #fff 11%, transparent);
  --mqa-rim: color-mix(in srgb, #fff 15%, transparent);
  --mqa-link: color-mix(in srgb, var(--mqa-accent-2) 80%, #fff);
  --mqa-shadow: 0 28px 70px -22px color-mix(in srgb, var(--mqa-deep) 80%, #000), 0 12px 32px -14px color-mix(in srgb, var(--mqa-accent) 50%, transparent);
  --mqa-glow: color-mix(in srgb, var(--mqa-accent) 42%, transparent);
  --mqa-halo: color-mix(in srgb, var(--mqa-accent) 30%, transparent);
  --mqa-ring: color-mix(in srgb, #fff 22%, transparent);
  /* Filled buttons and the visitor's bubbles: the brand colour into a deeper shade of it, so white words stay readable. */
  --mqa-fill: linear-gradient(135deg, color-mix(in srgb, var(--mqa-accent) 88%, #fff), color-mix(in srgb, var(--mqa-accent) 80%, var(--mqa-deep)));

  --mqa-bottom: 20px;
  --mqa-width: min(660px, calc(100vw - 32px));
  --mqa-ease: cubic-bezier(.2, .8, .2, 1);
  --mqa-heading: var(--font-heading, inherit);
  position: fixed;
  inset: auto 0 var(--mqa-bottom) 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mqa-ink);
  -webkit-font-smoothing: antialiased;
  transform: translateY(28px) scale(.98);
  opacity: 0;
  transition: transform .7s var(--mqa-ease), opacity .6s;
}
/* Light: white frosted glass, the brand's deep colour for the words. */
.mq-assistant[data-theme="light"] {
  --mqa-surface: color-mix(in srgb, #fff 93%, transparent);
  --mqa-sheen: color-mix(in srgb, #fff 70%, transparent);
  --mqa-raised: color-mix(in srgb, var(--mqa-deep) 5%, #fff);
  --mqa-raised-2: color-mix(in srgb, var(--mqa-deep) 9%, #fff);
  --mqa-ink: color-mix(in srgb, var(--mqa-deep) 90%, #000);
  --mqa-strong: var(--mqa-deep);
  --mqa-soft: color-mix(in srgb, var(--mqa-deep) 62%, #fff);
  --mqa-faint: color-mix(in srgb, var(--mqa-deep) 46%, #fff);
  --mqa-line: color-mix(in srgb, var(--mqa-deep) 9%, transparent);
  --mqa-rim: color-mix(in srgb, var(--mqa-deep) 11%, transparent);
  --mqa-link: var(--mqa-accent);
  --mqa-shadow: 0 30px 70px -24px color-mix(in srgb, var(--mqa-deep) 38%, transparent), 0 10px 28px -14px color-mix(in srgb, var(--mqa-accent) 32%, transparent);
  --mqa-glow: color-mix(in srgb, var(--mqa-accent) 34%, transparent);
  --mqa-halo: color-mix(in srgb, var(--mqa-accent) 7%, transparent);
  --mqa-ring: #fff;
}
.mq-assistant[hidden] { display: none; }
.mq-assistant.is-in { transform: none; opacity: 1; }
/* The end of the page scrolls clear of the bar. */
body:has(#mq-assistant:not([hidden])) { padding-bottom: 104px; }
body:has(.mobile-cta) .mq-assistant { --mqa-bottom: 86px; }
@media (min-width: 900px) { body:has(.mobile-cta) .mq-assistant { --mqa-bottom: 20px; } }
.mq-assistant > * { pointer-events: auto; }
.mq-assistant button { font: inherit; color: inherit; cursor: pointer; }
.mq-assistant :focus-visible { outline: 2px solid var(--mqa-accent); outline-offset: 2px; }

/* Glass: frosted, with a sheen from above and a fine rim. */
.mqa-bar, .mqa-panel, .mqa-teaser__q, .mqa-launcher {
  background: linear-gradient(180deg, var(--mqa-sheen), transparent 55%), var(--mqa-surface);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), inset 0 0 0 1px var(--mqa-rim), var(--mqa-shadow);
}

/* ---------------------------------------------------------------- the bar */
.mqa-bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  width: var(--mqa-width);
  padding: 7px;
  border-radius: 999px;
  transition: transform .35s var(--mqa-ease);
}
.mqa-bar:focus-within { transform: translateY(-2px); }
/* A ray of brand light travelling slowly round the rim. */
.mqa-bar::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--mqa-turn, 0deg), transparent 0 60%, var(--mqa-accent) 72%, var(--mqa-spark) 79%, var(--mqa-accent-2) 86%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: mqa-turn 7s linear infinite;
}
@property --mqa-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes mqa-turn { to { --mqa-turn: 360deg; } }
.mqa-bar:focus-within::before { animation-duration: 2.6s; }
.mqa-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--mqa-ink);
  font: inherit;
  font-size: 16px;
  box-shadow: none;
}
.mq-assistant .mqa-input:focus-visible { outline: 0; }
.mqa-input::placeholder { color: var(--mqa-faint); opacity: 1; }
.mqa-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(120% 120% at 30% 18%, var(--mqa-accent-2), var(--mqa-accent) 62%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent), inset 0 -2px 6px color-mix(in srgb, #000 14%, transparent), 0 8px 20px -8px var(--mqa-glow);
  transition: transform .25s var(--mqa-ease), box-shadow .25s;
}
.mqa-send:hover { transform: scale(1.06); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent), 0 12px 26px -8px var(--mqa-glow); }
.mqa-send:active { transform: scale(.95); }
.mqa-send svg { width: 19px; height: 19px; transition: transform .3s var(--mqa-ease); }
.mqa-send:hover svg { transform: translateX(2px); }
.is-busy .mqa-send { opacity: .55; pointer-events: none; }
.mqa-hide {
  position: absolute;
  top: -10px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mqa-surface);
  color: var(--mqa-soft);
  box-shadow: inset 0 0 0 1px var(--mqa-rim), 0 4px 10px -4px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .2s, transform .2s var(--mqa-ease);
}
.mqa-bar:hover .mqa-hide, .mqa-hide:focus-visible { opacity: 1; transform: none; }
.mqa-hide:hover { color: var(--mqa-strong); }
.mqa-hide svg { width: 11px; height: 11px; }
@media (hover: none) { .mqa-hide { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- the avatar */
.mqa-avatar { position: relative; flex: none; display: inline-block; line-height: 0; border-radius: 50%; }
.mqa-avatar canvas { display: block; border-radius: 50%; box-shadow: 0 0 0 2px var(--mqa-ring), 0 6px 18px -6px var(--mqa-glow); }
.mqa-avatar__dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #2fd27a; box-shadow: 0 0 0 2px var(--mqa-ring); }
.mq-assistant:not([data-theme="light"]) .mqa-avatar__dot { box-shadow: 0 0 0 2px var(--mqa-deep); }
.mqa-avatar__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2fd27a; animation: mqa-ping 2.6s var(--mqa-ease) infinite; }
@keyframes mqa-ping { 70%, 100% { transform: scale(2.4); opacity: 0; } }

/* --------------------------------------------- suggested question above */
.mqa-teaser { width: var(--mqa-width); margin-bottom: 12px; transition: opacity .4s, transform .4s var(--mqa-ease); }
.mqa-teaser.is-leaving { opacity: 0; transform: translateY(8px); }
.mqa-teaser[hidden] { display: none; }
.mqa-teaser__q {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 9px 18px 9px 9px;
  border: 0;
  border-radius: 999px;
  color: var(--mqa-ink);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  animation: mqa-float 6s ease-in-out infinite;
  transition: transform .25s var(--mqa-ease);
}
.mqa-teaser__q:hover { transform: translateY(-2px); }
.mqa-teaser__q::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3C/svg%3E") center / 13px no-repeat,
    radial-gradient(circle at 30% 25%, var(--mqa-accent-2), var(--mqa-accent));
  box-shadow: 0 4px 10px -4px var(--mqa-glow);
}
@keyframes mqa-float { 50% { transform: translateY(-4px); } }

/* --------------------------------------------------- minimised launcher */
.mqa-launcher { display: none; padding: 5px; border: 0; border-radius: 50%; transition: transform .25s var(--mqa-ease); }
.mqa-launcher:hover { transform: translateY(-2px) scale(1.05); }
.mq-assistant.is-min { align-items: flex-end; padding-right: 20px; }
.mq-assistant.is-min .mqa-bar, .mq-assistant.is-min .mqa-teaser, .mq-assistant.is-min .mqa-panel { display: none; }
.mq-assistant.is-min .mqa-launcher { display: block; }

/* ------------------------------------------------ the conversation panel */
.mqa-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--mqa-width);
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 28px;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transform-origin: bottom center;
  transition: max-height .55s var(--mqa-ease), opacity .35s, transform .55s var(--mqa-ease), margin .55s var(--mqa-ease);
}
/* The brand's colour, glowing softly behind the header. */
.mqa-panel::before {
  content: "";
  position: absolute;
  inset: -45% -25% auto;
  height: 75%;
  background: radial-gradient(closest-side, var(--mqa-halo), transparent);
  pointer-events: none;
}
.mq-assistant.is-open .mqa-panel { max-height: min(640px, calc(100vh - 130px)); margin-bottom: 14px; opacity: 1; transform: none; }
.mq-assistant.is-open .mqa-teaser { display: none; }
.mqa-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 14px 14px 18px; border-bottom: 1px solid var(--mqa-line); }
.mqa-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.mqa-who strong { font-family: var(--mqa-heading); font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; color: var(--mqa-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mqa-who span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mqa-soft); }
.mqa-who span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2fd27a; box-shadow: 0 0 0 3px color-mix(in srgb, #2fd27a 22%, transparent); }
.mqa-icon { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mqa-soft); transition: background .2s, color .2s; }
.mqa-icon:hover { background: var(--mqa-raised-2); color: var(--mqa-strong); }
.mqa-icon svg { width: 18px; height: 18px; }

.mqa-log { position: relative; flex: 1; overflow-y: auto; padding: 18px 18px 10px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--mqa-line) transparent; }
.mqa-msg { max-width: 86%; padding: 11px 15px; border-radius: 20px; animation: mqa-in .45s var(--mqa-ease) both; overflow-wrap: anywhere; font-size: 15px; }
.mqa-msg p { margin: 0 0 .55em; }
.mqa-msg p:last-child { margin-bottom: 0; }
.mqa-msg ul { margin: .3em 0 .55em; padding-left: 1.15em; }
.mqa-msg li { margin: .15em 0; }
.mqa-msg li::marker { color: var(--mqa-accent); }
.mqa-msg strong { color: var(--mqa-strong); font-weight: 700; }
.mq-assistant .mqa-msg a { color: var(--mqa-link); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mqa-accent) 45%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.mqa-msg a strong { color: inherit; }
.mqa-msg a:hover { text-decoration-color: currentColor; }
.mqa-msg--assistant { align-self: flex-start; color: var(--mqa-ink); background: var(--mqa-raised); box-shadow: inset 0 0 0 1px var(--mqa-line); border-bottom-left-radius: 7px; }
.mqa-msg--user { align-self: flex-end; color: #fff; background: var(--mqa-fill); box-shadow: 0 10px 22px -12px var(--mqa-glow); border-bottom-right-radius: 7px; }
.mq-assistant .mqa-msg--user a, .mqa-msg--user strong { color: #fff; }
.mqa-msg--error { color: #b42318; background: color-mix(in srgb, #f04438 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #f04438 28%, transparent); }
.mq-assistant:not([data-theme="light"]) .mqa-msg--error { color: #fecdca; }
@keyframes mqa-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.mqa-dots { display: inline-flex; gap: 5px; padding: 5px 2px; }
.mqa-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--mqa-accent); animation: mqa-dot 1.3s infinite ease-in-out; }
.mqa-dots i:nth-child(2) { animation-delay: .16s; }
.mqa-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes mqa-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-4px); } }

.mqa-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px; }
.mqa-chips:not(:empty) { padding-bottom: 14px; }
.mqa-chip { padding: 7px 14px; border: 0; border-radius: 999px; background: var(--mqa-raised); box-shadow: inset 0 0 0 1px var(--mqa-rim); color: var(--mqa-ink); font-size: 13.5px; font-weight: 500; animation: mqa-in .45s var(--mqa-ease) both; transition: box-shadow .2s, transform .2s var(--mqa-ease), color .2s; }
.mqa-chip:nth-child(2) { animation-delay: .06s; }
.mqa-chip:nth-child(3) { animation-delay: .12s; }
.mqa-chip:nth-child(4) { animation-delay: .18s; }
.mqa-chip:hover { transform: translateY(-1px); color: var(--mqa-strong); box-shadow: inset 0 0 0 1.5px var(--mqa-accent); }
.mqa-chip--quick { color: var(--mqa-strong); background: color-mix(in srgb, var(--mqa-accent) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mqa-accent) 45%, transparent); font-weight: 600; }

.mqa-ctas { position: relative; display: flex; gap: 10px; padding: 14px 18px 8px; border-top: 1px solid var(--mqa-line); }
.mq-assistant .mqa-cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 14px; border-radius: 14px; text-align: center; color: var(--mqa-strong); font-weight: 600; font-size: 14px; text-decoration: none; background: var(--mqa-raised); box-shadow: inset 0 0 0 1px var(--mqa-rim); transition: background .2s, transform .2s var(--mqa-ease); }
.mq-assistant .mqa-cta:hover { background: var(--mqa-raised-2); transform: translateY(-1px); }
.mq-assistant .mqa-cta--primary { color: #fff; background: var(--mqa-fill); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent), 0 10px 22px -10px var(--mqa-glow); }
.mq-assistant .mqa-cta--primary:hover { background: var(--mqa-fill); filter: brightness(1.06); }
.mqa-notice { position: relative; margin: 0; padding: 4px 18px 14px; font-size: 11.5px; color: var(--mqa-faint); text-align: center; }

/* The booking link, offered in the conversation when a visitor is ready. */
.mqa-book { align-self: stretch; display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 12px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--mqa-accent) 14%, transparent), color-mix(in srgb, var(--mqa-spark) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mqa-accent) 32%, transparent); animation: mqa-in .55s var(--mqa-ease) both; }
.mqa-book__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: radial-gradient(120% 120% at 30% 20%, var(--mqa-accent-2), var(--mqa-accent)); box-shadow: 0 8px 18px -8px var(--mqa-glow); }
.mqa-book__icon svg { width: 22px; height: 22px; }
.mq-assistant .mqa-book__go { flex: 1; padding: 11px 14px; border-radius: 13px; text-align: center; color: #fff; font-weight: 700; text-decoration: none; background: var(--mqa-deep); transition: transform .2s var(--mqa-ease), box-shadow .2s; }
.mq-assistant:not([data-theme="light"]) .mqa-book__go, .mq-assistant:not([data-theme="light"]) .mqa-book__go:hover { color: var(--mqa-deep); background: #fff; }
.mq-assistant .mqa-book__go:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55); }

@media (max-width: 600px) {
  .mq-assistant { --mqa-width: calc(100vw - 24px); --mqa-bottom: 12px; }
  .mqa-avatar--bar canvas { width: 38px !important; height: 38px !important; }
  .mqa-send { width: 40px; height: 40px; }
  .mqa-input { height: 40px; }
  .mq-assistant.is-open .mqa-panel { max-height: calc(100vh - 110px); border-radius: 22px; }
  .mqa-teaser__q { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-assistant, .mqa-bar, .mqa-panel, .mqa-msg, .mqa-chip, .mqa-book, .mqa-teaser, .mqa-teaser__q, .mqa-bar::before, .mqa-avatar__dot::after { transition: none; animation: none; }
}
@media print { .mq-assistant { display: none; } }