/* "Ask WhatsMenu" — marketing-site assistant widget.
   Standalone: no Tailwind classes, no framework, so it can load after paint
   without waiting on the page's stylesheet. Palette matches vertex.css. */

/* Host-page isolation.
   Embedded on a site we do not control, that site's stylesheet reaches our
   elements: a global line-height, a rule on `button` or `textarea`, a reset
   that sets `box-sizing: content-box`. None of it is aimed at us and all of it
   lands. Everything below is scoped to .wm-ask, so nothing here escapes into
   the host page either. */
.wm-ask,
.wm-ask *,
.wm-ask *::before,
.wm-ask *::after {
  box-sizing: border-box;
}

/* Every selector below is wrapped in :where(), which contributes no
   specificity. Without it these read as .class + element and outrank the single
   class our own components use, so a reset meant only to fend off the host page
   quietly beats our own styling. That is not hypothetical: it took the centring
   off the footer note, and it held the composer at 15px while a rule two
   screens down asked for the 16px that stops iOS zooming. */
.wm-ask :where(p, ul, ol, li, h1, h2, h3, h4) {
  margin: 0;
  padding: 0;
}

.wm-ask :where(ul, ol) { list-style: none; }

/* Form controls inherit no typography of their own, so this has to be said
   rather than left to the cascade. */
.wm-ask :where(button, input, textarea, a) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
}

.wm-ask :where(svg) { display: block; }

.wm-ask {
  --wm-ask-brand: #2d852d;
  --wm-ask-brand-dark: #246b24;
  --wm-ask-tint: #f0f9f0;
  --wm-ask-ink: #111827;
  --wm-ask-body: #374151;
  --wm-ask-muted: #6b7280;
  --wm-ask-line: #e5e7eb;
  --wm-ask-surface: #ffffff;
  /* WhatsApp glyph as a mask, so the icon inherits the text colour and no
     second copy of the path has to live in the JS. */
  --wm-ask-wa: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a9.9 9.9 0 0 0-8.5 15l-1.2 4.4 4.5-1.2A9.9 9.9 0 1 0 12 2zm0 1.8a8.1 8.1 0 1 1-4.1 15.1l-.3-.2-2.7.7.7-2.6-.2-.3A8.1 8.1 0 0 1 12 3.8zm-3 4c-.2 0-.5.1-.7.4-.3.3-.9.9-.9 2.1s.9 2.4 1 2.6c.1.2 1.7 2.7 4.3 3.7 2.1.8 2.6.7 3 .6.6 0 1.6-.6 1.8-1.3.2-.6.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3l-1.9-.9c-.3-.1-.5-.1-.6.2l-.7 1c-.1.2-.3.2-.5.1-.3-.1-1.2-.4-2.3-1.4-.8-.8-1.4-1.7-1.6-2-.1-.3 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5 0-.2 0-.4-.1-.5l-.8-2c-.2-.4-.4-.4-.6-.4z'/%3E%3C/svg%3E");

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  /* Pinned rather than inherited. On our own pages this is the site font
     anyway; embedded, inheriting meant the panel took on whatever the host
     used, which is the whole of why it stopped looking like ours. */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  /* Inherited rather than reset per element. Listing them against `p` put a
     two-part selector on every paragraph, which outranks the single class our
     own components use, so the footer note lost its centring to a rule meant
     only to fend off the host page. */
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--wm-ask-body);
}

/* The marketing pages load Tailwind's forms base, whose `textarea:focus` and
   `[type='...']:focus` rules paint a blue ring and a blue border. Those beat a
   plain `.class` rule, so they are neutralised here and the widget's own focus
   treatment below is the only one that shows. */
.wm-ask input:focus,
.wm-ask textarea:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

/* Launcher ------------------------------------------------------------- */

.wm-ask__launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  min-width: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--wm-ask-brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(17, 24, 39, .18);
  transition: transform .15s ease, background-color .15s ease;
}

.wm-ask__launcher:hover { background: var(--wm-ask-brand-dark); transform: translateY(-1px); }
.wm-ask__launcher:focus-visible { outline: 3px solid var(--wm-ask-brand-dark); outline-offset: 2px; }
.wm-ask__launcher svg { width: 22px; height: 22px; flex: none; }
.wm-ask__launcher-text { white-space: nowrap; }

.wm-ask[data-open="true"] .wm-ask__launcher { display: none; }

/* Panel ---------------------------------------------------------------- */

.wm-ask__panel {
  display: none;
  flex-direction: column;
  width: min(390px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 120px));
  background: var(--wm-ask-surface);
  border: 1px solid var(--wm-ask-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(17, 24, 39, .22);
  overflow: hidden;
}

.wm-ask[data-open="true"] .wm-ask__panel { display: flex; }

.wm-ask__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--wm-ask-line);
}

.wm-ask__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--wm-ask-ink); }
.wm-ask__subtitle { margin: 2px 0 0; font-size: 13px; color: var(--wm-ask-muted); }

.wm-ask__reset {
  width: 32px;
  height: 32px;
  margin-inline-end: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--wm-ask-muted);
  cursor: pointer;
}

.wm-ask__reset svg { width: 16px; height: 16px; }
.wm-ask__reset:hover { background: #f3f4f6; color: var(--wm-ask-ink); }

.wm-ask__close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--wm-ask-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Matched to the reset icon beside it by drawing the same box. It used to be a
   times character at 20px, which sounds larger than a 16px icon and is not: a
   glyph fills about half its em, so it rendered nearer 10px and read as the
   smaller of the two controls. */
.wm-ask__close svg { width: 16px; height: 16px; }
.wm-ask__close:hover { background: #f3f4f6; color: var(--wm-ask-ink); }

/* Messages ------------------------------------------------------------- */

.wm-ask__log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wm-ask__msg { max-width: 92%; font-size: 14.5px; }
.wm-ask__msg--bot { align-self: flex-start; color: var(--wm-ask-body); }
.wm-ask__msg--you {
  align-self: flex-end;
  background: var(--wm-ask-tint);
  border: 1px solid #dcf2dc;
  color: var(--wm-ask-ink);
  padding: 9px 12px;
  border-radius: 14px 4px 14px 14px;
  white-space: pre-wrap;
}

.wm-ask__msg--bot p { margin: 0 0 8px; }
.wm-ask__msg--bot p:last-child { margin-bottom: 0; }
/* Tailwind's preflight strips list markers site-wide, so a bulleted answer
   arrived as indented lines with nothing to anchor them. Put the markers back
   inside the widget only. */
.wm-ask__msg--bot ul,
.wm-ask__msg--bot ol {
  margin: 6px 0 8px;
  padding-left: 20px;
  list-style-position: outside;
}
/* A dash rather than a disc: it matches the markdown the model writes and reads
   as conversation rather than as a spec sheet. Drawn with ::before instead of
   list-style-type so it renders the same in older Safari. */
.wm-ask__msg--bot ul { list-style: none; padding-left: 2px; }
.wm-ask__msg--bot ul > li { position: relative; padding-left: 15px; }
.wm-ask__msg--bot ul > li::before {
  content: "-";
  position: absolute;
  left: 1px;
  color: var(--wm-ask-muted);
}
.wm-ask__msg--bot ol { list-style-type: decimal; }
.wm-ask__msg--bot li { margin: 3px 0; }
.wm-ask__msg--bot ol > li::marker { color: var(--wm-ask-muted); }
.wm-ask__msg--bot a { color: var(--wm-ask-brand-dark); }
.wm-ask__msg--bot strong { color: var(--wm-ask-ink); }
.wm-ask__msg--bot h1,
.wm-ask__msg--bot h2,
.wm-ask__msg--bot h3 { font-size: 15px; margin: 0 0 6px; color: var(--wm-ask-ink); }

/* Citations, not actions. As pills they read as tappable suggestions for the
   next question, and a visitor who taps one expecting the conversation to
   continue gets a page navigation instead. A sentence with links in it says
   what it is. */
.wm-ask__sources {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wm-ask-muted);
}
.wm-ask__sources-label { margin-right: 4px; }
.wm-ask__source {
  color: var(--wm-ask-brand-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wm-ask__source:hover { text-decoration-thickness: 2px; }

.wm-ask__typing { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
.wm-ask__typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9ca3af;
  animation: wm-ask-bounce 1.2s infinite ease-in-out;
}
.wm-ask__typing span:nth-child(2) { animation-delay: .15s; }
.wm-ask__typing span:nth-child(3) { animation-delay: .3s; }

@keyframes wm-ask-bounce {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Starters ------------------------------------------------------------- */

.wm-ask__starters { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wm-ask__starter {
  border: 1px solid var(--wm-ask-line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 13px;
  font: inherit;
  font-size: 13.5px;
  color: var(--wm-ask-body);
  cursor: pointer;
  text-align: left;
}
.wm-ask__starter:hover { border-color: var(--wm-ask-brand); color: var(--wm-ask-brand-dark); background: var(--wm-ask-tint); }

/* Lead form ------------------------------------------------------------ */

.wm-ask__lead {
  border: 1px solid var(--wm-ask-line);
  border-radius: 14px;
  padding: 14px;
  background: #fafafa;
}
.wm-ask__lead p { margin: 0 0 10px; font-size: 13.5px; color: var(--wm-ask-body); }

/* A WhatsApp link the assistant wrote into its own answer. Rendered as a pill
   rather than underlined text: it is an action, not a citation, and on a phone
   a line of text is a poor target. Deliberately inline and smaller than the
   offer below, so the answer reads as a sentence with an action in it rather
   than as a second banner. */
.wm-ask__msg--bot a[href*="/api/sales/whatsapp"],
.wm-ask__msg--bot a[href*="wa.me"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}
.wm-ask__msg--bot a[href*="/api/sales/whatsapp"]:hover,
.wm-ask__msg--bot a[href*="wa.me"]:hover { background: #1eb855; color: #fff; text-decoration: none; }
.wm-ask__msg--bot a[href*="/api/sales/whatsapp"]::before,
.wm-ask__msg--bot a[href*="wa.me"]::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--wm-ask-wa) center / contain no-repeat;
  mask: var(--wm-ask-wa) center / contain no-repeat;
}

/* The WhatsApp offer sits above the email fields because it is the faster of
   the two, not because it replaces them: some visitors will not use WhatsApp
   and the form stays for them. WhatsApp green, not the brand green, so it reads
   as "this leaves for WhatsApp" rather than as our primary action. */
.wm-ask__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: #25d366;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.wm-ask__wa:hover { background: #1eb855; color: #fff; text-decoration: none; }
.wm-ask__wa svg { width: 18px; height: 18px; flex: none; }
.wm-ask__wa + p { color: var(--wm-ask-muted); font-size: 13px; }
.wm-ask__lead input {
  width: 100%;
  margin-bottom: 8px;
  padding: 9px 11px;
  border: 1px solid var(--wm-ask-line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.wm-ask__lead input:focus {
  border-color: var(--wm-ask-brand);
  box-shadow: 0 0 0 3px var(--wm-ask-tint);
  outline: none;
}
.wm-ask__lead-actions { display: flex; gap: 8px; align-items: center; }
.wm-ask__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.wm-ask__btn {
  border: 0;
  border-radius: 10px;
  background: var(--wm-ask-brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 14px;
  cursor: pointer;
}
.wm-ask__btn:hover { background: var(--wm-ask-brand-dark); }
.wm-ask__btn:disabled { opacity: .55; cursor: progress; }
.wm-ask__btn:disabled:hover { background: var(--wm-ask-brand); }
.wm-ask__btn--quiet { background: transparent; color: var(--wm-ask-muted); font-weight: 500; padding: 9px 4px; }
.wm-ask__btn--quiet:hover { background: transparent; color: var(--wm-ask-ink); text-decoration: underline; }

/* Composer ------------------------------------------------------------- */

.wm-ask__composer {
  border-top: 1px solid var(--wm-ask-line);
  padding: 12px 12px 10px;
}

.wm-ask__field {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--wm-ask-line);
  border-radius: 14px;
  padding: 6px 6px 6px 12px;
  background: #fff;
}
.wm-ask__field:focus-within { border-color: var(--wm-ask-brand); }

.wm-ask__input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  resize: none;
  font-size: 14.5px;
  line-height: 1.45;
  /* One line to start with, whatever the host's line-height would have made
     it. The script grows it from scrollHeight as the visitor types. */
  height: 34px;
  min-height: 34px;
  max-height: 96px;
  /* Hidden by default so a placeholder that wraps cannot put a scrollbar in an
     empty box; the script turns it on once real content passes max-height. */
  overflow-y: hidden;
  padding: 6px 0;
  background: transparent;
  color: var(--wm-ask-ink);
}

/* A placeholder is one line or it is nothing. Nineteen translations of the same
   sentence are nineteen different lengths, and the longest of them wrapping
   inside a single-line box shows the visitor half a second line with its
   descenders cut off. Truncation is the honest failure here. */
.wm-ask__input::placeholder {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.wm-ask__send {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--wm-ask-brand);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wm-ask__send:disabled { background: #d1d5db; cursor: default; }
.wm-ask__send svg { width: 17px; height: 17px; }

/* Sending: a spinner in place of the arrow, and the brand colour kept rather
   than the flat grey of a plain disabled button. Grey reads as "this control
   is dead", which invites the second click; a moving ring reads as "already
   working on it", which is what is actually true. */
.wm-ask__send.is-busy:disabled { background: var(--wm-ask-brand); cursor: progress; }
.wm-ask__send.is-busy svg { display: none; }
.wm-ask__send.is-busy::after {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  animation: wm-ask-spin .6s linear infinite;
}

@keyframes wm-ask-spin { to { transform: rotate(360deg); } }

.wm-ask__note {
  margin: 8px 2px 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--wm-ask-muted);
  text-align: center;
}

/* Phones: the panel takes the whole screen once open.
   A sheet floating over the page spends a quarter of a 390px screen on margin
   and shadow, and once the keyboard is up the conversation is a few lines tall.
   The launcher stays a bottom-right button — only the open state goes full
   bleed, which is why the inset is scoped to [data-open]. */
@media (max-width: 640px) {
  .wm-ask[data-open="true"] {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .wm-ask__panel {
    width: 100%;
    height: 100%;
    /* dvh tracks the viewport as the address bar and keyboard come and go; the
       percentage above is the fallback where dvh is unsupported. */
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Keep the chrome clear of the notch and the home indicator. The scroll area
     is left alone so messages can pass under both while scrolling. */
  .wm-ask__head { padding-top: calc(16px + env(safe-area-inset-top)); }
  .wm-ask__composer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  /* Both header controls grow together for touch. Only the close one used to,
     which left two buttons of different sizes doing the same kind of job. */
  .wm-ask__close,
  .wm-ask__reset { width: 40px; height: 40px; }
  .wm-ask__close svg,
  .wm-ask__reset svg { width: 18px; height: 18px; }
  .wm-ask__msg { max-width: 100%; }

  /* iOS zooms the page whenever it focuses a field smaller than 16px, and the
     zoom pushes the composer and its send button off the side of the screen.
     Sixteen is the whole fix: maximum-scale has been ignored since iOS 10, and
     on a site we do not render we do not own the viewport tag to try it in.
     The one-line height grows with the type, or the taller text clips inside
     the box the smaller size was measured for. */
  .wm-ask__input {
    font-size: 16px;
    height: 36px;
    min-height: 36px;
  }

  .wm-ask__lead input { font-size: 16px; }
}

@media (max-width: 480px) {
  .wm-ask { right: 12px; bottom: 12px; }
  .wm-ask__launcher { padding: 0; width: 56px; }
  .wm-ask__launcher-text { display: none; }
}

/* Keyed on the input device, not the viewport width. A phone whose host page
   sets a fixed-width viewport reports a CSS viewport far wider than the screen,
   so the width query above never matches there and the field stays small enough
   for Safari to zoom. This one holds wherever the pointer is a finger, which is
   the actual condition. */
@media (pointer: coarse) {
  .wm-ask__input {
    font-size: 16px;
    height: 36px;
    min-height: 36px;
  }

  .wm-ask__lead input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-ask__launcher { transition: none; }
  .wm-ask__typing span { animation: none; }
  /* The ring stops turning but stays, because it is the shape that says
     something is happening, not the movement. */
  .wm-ask__send.is-busy::after { animation: none; }
}