/* MAX OS chat widget — intended to inherit the site's existing typeface. */
.max-os-chat {
  --max-os-chat-ink: var(--max-os-ink, #151716);
  --max-os-chat-paper: var(--max-os-paper, #f8f7f3);
  --max-os-chat-muted: var(--max-os-muted, #5d625e);
  --max-os-chat-rule: var(--max-os-rule, #d7d8d2);
  --max-os-chat-accent: var(--max-os-accent, #1a615d);
  --max-os-chat-focus: var(--max-os-focus, #0b665f);
  --max-os-chat-error: #8a3627;
  --max-os-chat-shadow: 0 16px 48px rgb(20 25 22 / 18%);
  --max-os-chat-radius: 0.35rem;
  --max-os-chat-space-1: 0.25rem;
  --max-os-chat-space-2: 0.5rem;
  --max-os-chat-space-3: 0.75rem;
  --max-os-chat-space-4: 1rem;
  --max-os-chat-space-5: 1.25rem;
  --max-os-chat-space-6: 1.5rem;
  --max-os-chat-space-8: 2rem;
  --max-os-chat-text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --max-os-chat-text-sm: clamp(0.875rem, 0.83rem + 0.15vw, 0.9375rem);
  --max-os-chat-text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  position: fixed;
  right: max(var(--max-os-chat-space-5), env(safe-area-inset-right));
  bottom: max(var(--max-os-chat-space-5), env(safe-area-inset-bottom));
  z-index: 2147483000;
  color: var(--max-os-chat-ink);
  font-family: inherit;
  font-size: var(--max-os-chat-text-base);
  line-height: 1.45;
}

.max-os-chat *,
.max-os-chat *::before,
.max-os-chat *::after { box-sizing: border-box; }

.max-os-chat button,
.max-os-chat textarea { font: inherit; }

.max-os-chat button { cursor: pointer; }

.max-os-chat button:focus-visible,
.max-os-chat textarea:focus-visible,
.max-os-chat a:focus-visible {
  outline: 2px solid var(--max-os-chat-focus);
  outline-offset: 3px;
}

.max-os-chat__launcher,
.max-os-chat__send,
.max-os-chat__retry,
.max-os-chat__close {
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: var(--max-os-chat-radius);
  font-size: var(--max-os-chat-text-sm);
  font-weight: 650;
  letter-spacing: 0.01em;
}

.max-os-chat__launcher {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 8.75rem;
  padding: var(--max-os-chat-space-3) var(--max-os-chat-space-5);
  color: var(--max-os-chat-paper);
  background: var(--max-os-chat-ink);
  box-shadow: var(--max-os-chat-shadow);
}

.max-os-chat__launcher:hover { background: #292d2a; }

.max-os-chat__panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  width: min(30rem, calc(100vw - 2rem));
  height: min(46rem, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
  margin-bottom: var(--max-os-chat-space-3);
  overflow: hidden;
  color: var(--max-os-chat-ink);
  background: var(--max-os-chat-paper);
  border: 1px solid var(--max-os-chat-rule);
  border-radius: var(--max-os-chat-radius);
  box-shadow: var(--max-os-chat-shadow);
}

.max-os-chat__panel[hidden] { display: none; }

.max-os-chat__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--max-os-chat-space-4);
  padding: var(--max-os-chat-space-3) var(--max-os-chat-space-4);
  border-bottom: 1px solid var(--max-os-chat-rule);
}

.max-os-chat__eyebrow {
  margin: 0 0 var(--max-os-chat-space-1);
  color: var(--max-os-chat-muted);
  font-size: var(--max-os-chat-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.max-os-chat__header h2 {
  margin: 0;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.2;
}

.max-os-chat__close {
  flex: 0 0 auto;
  padding: var(--max-os-chat-space-2) var(--max-os-chat-space-3);
  color: var(--max-os-chat-ink);
  background: transparent;
  border-color: var(--max-os-chat-rule);
}

.max-os-chat__close:hover,
.max-os-chat__retry:hover { background: rgb(21 23 22 / 6%); }

.max-os-chat__introduction {
  color: var(--max-os-chat-muted);
  font-size: var(--max-os-chat-text-sm);
  border-bottom: 1px solid var(--max-os-chat-rule);
}

.max-os-chat__introduction-summary {
  padding: var(--max-os-chat-space-2) var(--max-os-chat-space-4);
  color: var(--max-os-chat-accent);
  font-size: var(--max-os-chat-text-xs);
  font-weight: 650;
  cursor: pointer;
  list-style-position: inside;
}

.max-os-chat__introduction-body {
  padding: var(--max-os-chat-space-2) var(--max-os-chat-space-4) var(--max-os-chat-space-3);
}

.max-os-chat__introduction p { margin: 0; }
.max-os-chat__introduction p + p { margin-top: var(--max-os-chat-space-2); }
.max-os-chat__data-link { color: var(--max-os-chat-accent); display: inline-block; margin-top: var(--max-os-chat-space-2); }

.max-os-chat__messages {
  display: grid;
  align-content: start;
  gap: var(--max-os-chat-space-3);
  min-height: 0;
  padding: var(--max-os-chat-space-3) var(--max-os-chat-space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.max-os-chat__message {
  width: fit-content;
  max-width: 92%;
  margin: 0;
  padding: var(--max-os-chat-space-3) var(--max-os-chat-space-4);
  font-size: var(--max-os-chat-text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--max-os-chat-rule);
  border-radius: var(--max-os-chat-radius);
}

.max-os-chat__message--visitor { justify-self: end; color: var(--max-os-chat-paper); background: var(--max-os-chat-ink); border-color: var(--max-os-chat-ink); }
.max-os-chat__message--assistant { justify-self: start; background: #efefeb; }
.max-os-chat__message--error { justify-self: start; color: var(--max-os-chat-error); background: #fcf5f2; border-color: #ddc7c0; }

.max-os-chat__booking {
  display: grid;
  justify-self: start;
  width: min(100%, 20rem);
  gap: var(--max-os-chat-space-2);
  padding: var(--max-os-chat-space-3);
  background: #efefeb;
  border: 1px solid var(--max-os-chat-rule);
  border-radius: var(--max-os-chat-radius);
}

.max-os-chat__booking-title {
  margin: 0;
  font-size: var(--max-os-chat-text-sm);
  line-height: 1.3;
}

.max-os-chat__booking-link {
  width: fit-content;
  max-width: 100%;
  color: var(--max-os-chat-accent);
  font-size: var(--max-os-chat-text-xs);
  overflow-wrap: anywhere;
}

.max-os-chat__booking-button {
  width: fit-content;
  min-height: 2.75rem;
  padding: var(--max-os-chat-space-2) var(--max-os-chat-space-4);
  color: var(--max-os-chat-paper);
  background: var(--max-os-chat-accent);
  border: 1px solid var(--max-os-chat-accent);
  border-radius: var(--max-os-chat-radius);
  font-size: var(--max-os-chat-text-sm);
  font-weight: 650;
}

.max-os-chat__booking-button:hover { background: #104d49; }

/* Chips reuse the booking card's surface, rule, radius and touch target so a
   server-offered choice reads as part of the same conversation. */
.max-os-chat__choices {
  display: flex;
  flex-wrap: wrap;
  justify-self: start;
  width: min(100%, 20rem);
  gap: var(--max-os-chat-space-2);
}

.max-os-chat__choice {
  min-height: 2.75rem;
  padding: var(--max-os-chat-space-2) var(--max-os-chat-space-3);
  color: var(--max-os-chat-accent);
  background: #efefeb;
  border: 1px solid var(--max-os-chat-rule);
  border-radius: var(--max-os-chat-radius);
  font-size: var(--max-os-chat-text-sm);
  font-weight: 650;
  text-align: left;
  overflow-wrap: anywhere;
}

.max-os-chat__choice:hover { background: #e5e5df; }
.max-os-chat__choice[disabled] { opacity: 55%; cursor: default; }

.max-os-chat__status {
  min-height: 0;
  margin: 0;
  padding: 0 var(--max-os-chat-space-5) var(--max-os-chat-space-2);
  color: var(--max-os-chat-muted);
  font-size: var(--max-os-chat-text-xs);
}

.max-os-chat__status:empty { display: none; }

.max-os-chat__form { padding: var(--max-os-chat-space-2) var(--max-os-chat-space-4); border-top: 1px solid var(--max-os-chat-rule); }
.max-os-chat__form[hidden],
.max-os-chat__panel--booking-modal-open .max-os-chat__form { display: none; }

.max-os-chat__input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  max-height: 7.5rem;
  resize: none;
  overflow-y: hidden;
  padding: var(--max-os-chat-space-2) var(--max-os-chat-space-3);
  color: var(--max-os-chat-ink);
  background: #fff;
  border: 1px solid #afb2ac;
  border-radius: var(--max-os-chat-radius);
  font-size: var(--max-os-chat-text-base);
  line-height: 1.4;
}

.max-os-chat__input::placeholder { color: #737872; opacity: 1; }

.max-os-chat__verification {
  display: grid;
  gap: var(--max-os-chat-space-1);
  margin-top: var(--max-os-chat-space-2);
  color: var(--max-os-chat-muted);
  font-size: var(--max-os-chat-text-xs);
}

.max-os-chat__verification[hidden] { display: none; }
.max-os-chat__verification-copy { margin: 0; }
.max-os-chat__verification-widget { min-height: 65px; }
.max-os-chat__verification--error .max-os-chat__verification-copy { color: var(--max-os-chat-error); }

.max-os-chat__form-footer { display: flex; align-items: center; gap: var(--max-os-chat-space-2); margin-top: var(--max-os-chat-space-2); }
.max-os-chat__counter { margin: 0 auto 0 0; color: var(--max-os-chat-muted); font-size: var(--max-os-chat-text-xs); }

.max-os-chat__send { min-height: 2.75rem; padding: var(--max-os-chat-space-2) var(--max-os-chat-space-3); color: var(--max-os-chat-paper); background: var(--max-os-chat-accent); }
.max-os-chat__send:hover:not(:disabled) { background: #104d49; }
.max-os-chat__send:disabled { cursor: not-allowed; opacity: 0.62; }
.max-os-chat__retry { padding: var(--max-os-chat-space-2) var(--max-os-chat-space-3); color: var(--max-os-chat-ink); background: transparent; border-color: var(--max-os-chat-rule); }

.max-os-chat__booking-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--max-os-chat-space-4);
  background: rgb(15 18 16 / 64%);
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.max-os-chat__booking-modal[hidden] { display: none; }

.max-os-chat__booking-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(70rem, calc(100vw - 2rem));
  height: min(90dvh, 58rem);
  max-height: 90dvh;
  max-width: 100%;
  overflow: hidden;
  color: var(--max-os-chat-ink);
  background: var(--max-os-chat-paper);
  border: 1px solid var(--max-os-chat-rule);
  border-radius: var(--max-os-chat-radius);
  box-shadow: var(--max-os-chat-shadow);
}

.max-os-chat__booking-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--max-os-chat-space-4);
  padding: var(--max-os-chat-space-3) var(--max-os-chat-space-4);
  border-bottom: 1px solid var(--max-os-chat-rule);
}

.max-os-chat__booking-dialog-header h2 {
  margin: 0;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.2;
}

.max-os-chat__booking-close {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: var(--max-os-chat-space-2) var(--max-os-chat-space-3);
  color: var(--max-os-chat-ink);
  background: transparent;
  border: 1px solid var(--max-os-chat-rule);
  border-radius: var(--max-os-chat-radius);
  font-size: var(--max-os-chat-text-sm);
  font-weight: 650;
}

.max-os-chat__booking-close:hover { background: rgb(21 23 22 / 6%); }

.max-os-chat__booking-dialog-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  min-width: 0;
}

.max-os-chat__booking-frame-host {
  min-height: 0;
  background: #fff;
}

.max-os-chat__booking-modal-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 32rem;
  max-width: 100%;
  border: 0;
  background: #fff;
}

.max-os-chat__booking-modal-link {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin: var(--max-os-chat-space-3) var(--max-os-chat-space-4);
  color: var(--max-os-chat-accent);
  font-size: var(--max-os-chat-text-sm);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.max-os-chat__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 32rem) {
  .max-os-chat { right: max(var(--max-os-chat-space-2), env(safe-area-inset-right)); bottom: max(var(--max-os-chat-space-2), env(safe-area-inset-bottom)); left: max(var(--max-os-chat-space-2), env(safe-area-inset-left)); }
  .max-os-chat__launcher { float: right; }
  .max-os-chat__panel { width: 100%; height: calc(100dvh - 1rem); max-height: calc(100dvh - 1rem); margin-bottom: var(--max-os-chat-space-2); }
  .max-os-chat__header,
  .max-os-chat__messages,
  .max-os-chat__form { padding-right: var(--max-os-chat-space-4); padding-left: var(--max-os-chat-space-4); }
  .max-os-chat__booking { width: 100%; }
  .max-os-chat__booking-modal {
    align-items: stretch;
    padding:
      max(var(--max-os-chat-space-2), env(safe-area-inset-top))
      max(var(--max-os-chat-space-2), env(safe-area-inset-right))
      max(var(--max-os-chat-space-2), env(safe-area-inset-bottom))
      max(var(--max-os-chat-space-2), env(safe-area-inset-left));
  }
  .max-os-chat__booking-dialog { width: 100%; height: 100%; max-height: 100%; }
  .max-os-chat__booking-modal-frame { min-height: 0; }
}

@media (max-height: 38rem) {
  .max-os-chat__booking-modal { align-items: stretch; padding: var(--max-os-chat-space-2); }
  .max-os-chat__booking-dialog { width: min(70rem, 100%); height: 100%; max-height: 100%; }
  .max-os-chat__booking-modal-frame { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .max-os-chat *, .max-os-chat *::before, .max-os-chat *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* The resources link inside the post-booking message. Underlined because it sits
   mid-sentence, where colour alone is not a reliable affordance and would fail
   anyone who cannot distinguish it. Accent on the assistant bubble measures
   6.26:1, above the 4.5:1 needed for body text. */
.max-os-chat__resources-link { color: var(--max-os-chat-accent); text-decoration: underline; }
.max-os-chat__resources-link:hover { text-decoration: none; }
.max-os-chat__resources-link:focus-visible { outline: 2px solid var(--max-os-chat-accent); outline-offset: 2px; }

/* The always-available way to book. Quiet on purpose: Max qualifies before he
   offers a call, so this is a reliable exit rather than a call-to-action. Sized to
   the close button beside it so the header reads as one row of controls. */
.max-os-chat__header-actions { display: flex; align-items: center; gap: var(--max-os-chat-space-2); }
.max-os-chat__book {
  font: inherit; font-size: 0.85rem; color: var(--max-os-chat-accent);
  background: none; border: 1px solid var(--max-os-chat-accent); border-radius: 999px;
  padding: 4px 12px; cursor: pointer;
}
.max-os-chat__book:hover { color: var(--max-os-chat-paper); background: var(--max-os-chat-accent); }
.max-os-chat__book:focus-visible { outline: 2px solid var(--max-os-chat-accent); outline-offset: 2px; }

/* The route onward at the end of a conversation. A sibling of the reply above it,
   not another message, so it reads as a next step rather than as Max speaking
   twice. */
.max-os-chat__resources { margin: 0; padding: 0 var(--max-os-chat-space-2); }

/* The four ways into a conversation. Stacked rather than wrapped in a row: these
   are sentences, not short chips, and side by side they truncate on a phone. */
.max-os-chat__starters { flex-direction: column; align-items: stretch; }
.max-os-chat__starters .max-os-chat__choice { text-align: left; width: 100%; }