/*
 * The website assistant.
 *
 * Drawn in the site's own language rather than in a generic chat-widget one:
 * the gold hairline and the uppercase letterspaced DM Mono label are the same
 * two moves the nav, the buttons and the rewritten form panel make, and the
 * surface is the form's warm off-white rather than pure white. No avatars and
 * no drop shadows in colour - the site has neither anywhere.
 *
 * It does have bubbles, and softer corners than the rest of the site, both at
 * the owner's request. See the corner note in the custom properties below for
 * how far that was taken and why it stops short of a fully rounded treatment.
 *
 * Colour. The brand gold is 3.7:1 on white, which is a border and a large-text
 * colour, not a body-text one. So gold carries the rules, the fills and the
 * 12px uppercase UI, and anything set at reading size uses either the ink or a
 * deepened gold that clears 4.5:1. Nothing is distinguished by colour alone.
 */

.mf-ai {
  --mf-ai-gold: #a28114;
  /* Gold deepened until it clears 4.5:1 on the panel, for links and any gold
     set at reading size. The brand gold itself does not. */
  --mf-ai-gold-deep: #7d6210;
  --mf-ai-ink: #14100a;
  --mf-ai-surface: #fffefb;
  --mf-ai-line: rgba(20, 16, 4, .22);
  --mf-ai-line-soft: rgba(20, 16, 4, .10);
  --mf-ai-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mf-ai-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /*
   * Corners.
   *
   * The site itself is square: components.css and form-ui.css round almost
   * everything to 2px or 3px, and there is one 20px radius in the whole
   * stylesheet. A pill-shaped launcher and fully rounded bubbles would make
   * the assistant the only round object on the site, which is the clash worth
   * avoiding - so this is a graded softening rather than a different language.
   *
   * What justifies going softer here at all is that the assistant is the one
   * thing on the page that is not part of the page: it floats above the grid,
   * it is a conversation rather than a document, and every other floating
   * conversation a visitor has used is round. So the panel and the speech get
   * a real radius, the controls inside get about two thirds of it, and nothing
   * becomes a pill. 3px -> 10px on a control and 3px -> 16px on the panel is
   * plainly softer without reading as a foreign component.
   */
  --mf-ai-r-panel: 16px;
  --mf-ai-r-ctl: 10px;
  --mf-ai-r-msg: 14px;
  /* The corner nearest the speaker stays tight, which is what makes a rounded
     block read as speech rather than as a card. */
  --mf-ai-r-tail: 4px;
  /* Kept as the site's own radius for anything hairline-thin. */
  --mf-ai-r: 3px;
  --mf-ai-t: .16s cubic-bezier(.2, .6, .3, 1);

  position: fixed;
  z-index: 9000;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--mf-ai-mono);
  color: var(--mf-ai-ink);
}

/* ---- launcher ---------------------------------------------------------- */

.mf-ai__launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 20px;
  border: 1px solid var(--mf-ai-gold);
  border-radius: var(--mf-ai-r-ctl);
  background: var(--mf-ai-ink);
  color: var(--mf-ai-gold);
  font-family: var(--mf-ai-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--mf-ai-t), color var(--mf-ai-t);
}

.mf-ai__launch:hover,
.mf-ai__launch:focus-visible {
  background: var(--mf-ai-gold);
  color: var(--mf-ai-ink);
}

.mf-ai__launch:focus-visible {
  outline: 2px solid var(--mf-ai-ink);
  outline-offset: 2px;
}

/* The mark is decoration and is hidden from assistive technology; the label
   beside it is the accessible name, so nothing depends on reading the shape. */
.mf-ai__launch-mark {
  inline-size: 9px;
  block-size: 9px;
  flex: none;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

/* Once the panel is open the launcher would just repeat the close button. */
.mf-ai.is-open .mf-ai__launch { display: none; }

/* ---- panel ------------------------------------------------------------- */

.mf-ai__panel {
  display: flex;
  flex-direction: column;
  inline-size: min(380px, calc(100vw - 40px));
  /* 620 was enough for a transcript and a composer, and about sixty pixels
     short of also showing the details step's three fields, so the step opened
     with two of them below the fold on a full-size screen. */
  max-block-size: min(740px, calc(100vh - 40px));
  background: var(--mf-ai-surface);
  border: 1px solid var(--mf-ai-ink);
  border-radius: var(--mf-ai-r-panel);
  /* A neutral lift, not a coloured glow - the site's cards sit flat and this
     needs only enough separation to read as being above the page. */
  box-shadow: 0 18px 40px rgba(20, 16, 4, .18);
  overflow: hidden;
}

/*
 * The panel is closed with the hidden attribute, and the display rule above
 * outranks the browser's own [hidden] rule - so without this the panel was
 * drawn open on every page load, next to the launcher that is supposed to
 * open it. Found while checking that the banner and the launcher do not
 * collide; the same trap as the details step below.
 */
.mf-ai__panel[hidden] { display: none; }

.mf-ai__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 14px;
  border-block-end: 1px solid var(--mf-ai-line);
  background: var(--mf-ai-ink);
  color: var(--mf-ai-surface);
}

.mf-ai__ident { flex: 1 1 auto; min-inline-size: 0; }

.mf-ai__title {
  margin: 0;
  font-family: var(--mf-ai-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--mf-ai-gold);
}

.mf-ai__sub {
  margin: 5px 0 0;
  font-family: var(--mf-ai-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.4;
  /* 0.78 of the off-white on the ink is still above 10:1. */
  color: rgba(255, 254, 251, .78);
}

.mf-ai__close {
  flex: none;
  margin: -4px -4px 0 0;
  padding: 0;
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--mf-ai-r-ctl);
  background: transparent;
  color: var(--mf-ai-surface);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--mf-ai-t), color var(--mf-ai-t);
}

.mf-ai__close:hover { color: var(--mf-ai-gold); border-color: var(--mf-ai-gold); }
.mf-ai__close:focus-visible { outline: 2px solid var(--mf-ai-gold); outline-offset: 1px; }

/* ---- transcript -------------------------------------------------------- */

.mf-ai__log {
  flex: 1 1 auto;
  min-block-size: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mf-ai__msg {
  font-family: var(--mf-ai-sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .005em;
}

.mf-ai__msg p { margin: 0; }
.mf-ai__msg p + p,
.mf-ai__msg p + ul,
.mf-ai__msg ul + p { margin-block-start: .6em; }

.mf-ai__msg ul {
  margin: 0;
  padding-inline-start: 1.1em;
  display: flex;
  flex-direction: column;
  gap: .3em;
}

.mf-ai__msg a {
  color: var(--mf-ai-gold-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.mf-ai__msg a:hover { color: var(--mf-ai-ink); }
.mf-ai__msg a:focus-visible { outline: 2px solid var(--mf-ai-gold-deep); outline-offset: 2px; }

/*
 * Both speakers now sit in a block with a soft corner, because the owner asked
 * for rounder corners and speech is where roundness actually says something.
 * The assistant keeps its gold rule, which is what the site uses to mark its
 * own voice, so the two are still told apart by shape, edge and placement and
 * never by hue alone: the assistant's block is on the left, hairline-bordered
 * and carries the gold edge; the visitor's is on the right and tinted.
 *
 * Each block leaves the corner nearest its own speaker tight. That is the one
 * detail that makes a rounded rectangle read as something said rather than as
 * a card, and it costs nothing.
 */
.mf-ai__msg--bot {
  align-self: flex-start;
  max-inline-size: 94%;
  padding: 10px 13px;
  border: 1px solid var(--mf-ai-line-soft);
  border-inline-start: 2px solid var(--mf-ai-gold);
  border-start-start-radius: var(--mf-ai-r-msg);
  border-start-end-radius: var(--mf-ai-r-msg);
  border-end-end-radius: var(--mf-ai-r-msg);
  border-end-start-radius: var(--mf-ai-r-tail);
  background: rgba(20, 16, 4, .035);
}

.mf-ai__msg--user {
  align-self: flex-end;
  max-inline-size: 88%;
  padding: 10px 13px;
  border: 1px solid var(--mf-ai-line-soft);
  border-start-start-radius: var(--mf-ai-r-msg);
  border-start-end-radius: var(--mf-ai-r-msg);
  border-end-end-radius: var(--mf-ai-r-tail);
  border-end-start-radius: var(--mf-ai-r-msg);
  background: rgba(162, 129, 20, .09);
}

.mf-ai__msg.is-thinking {
  font-family: var(--mf-ai-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(20, 16, 10, .62);
}

.mf-ai__msg.is-thinking::after {
  content: "";
  display: inline-block;
  inline-size: 2.2em;
  text-align: start;
  animation: mf-ai-dots 1.2s steps(4, end) infinite;
}

@keyframes mf-ai-dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
}

/*
 * While the details step is up, the composer's footnote steps aside; the room
 * it takes is the difference between the step's three fields fitting on a
 * laptop and not. It comes back the moment the step is resolved, because the
 * script hides the block this selector is looking for. A browser without
 * :has() simply keeps the note, which costs a little scrolling and nothing
 * else.
 */
.mf-ai__panel:has(#mf-ai-intake:not([hidden])) .mf-ai__note { display: none; }

/* ---- the details step -------------------------------------------------- */
/*
 * Offered after an answer, and deliberately drawn as part of the transcript
 * rather than as a form laid over it: the assistant's own sentence sits in
 * the same kind of block as any other thing it says, and the fields follow
 * under it. The script moves the block to the end of the transcript when it
 * shows it, so it always sits under the answer it follows.
 *
 * Skip and Continue are given equal weight on purpose. Continue is filled
 * because it is the one that carries what was typed, but Skip is the same
 * height, the same hit area and the same distance from the fields, with a real
 * border rather than being demoted to a link - if the step is genuinely
 * optional then the two ways out of it have to look like two ways out of it.
 */
.mf-ai__intake {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The step is rendered hidden for every visitor and shown, once, to those
   whose consent covers it, so the panel drives it with the hidden attribute -
   which a display rule would otherwise override. */
.mf-ai__intake[hidden] { display: none; }

/*
 * Label beside the field rather than above it. The panel is only ever about
 * 380px tall in its transcript, and three stacked label-over-input pairs pushed
 * the two buttons off the bottom of it - which is exactly the wrong thing to
 * hide when the point being made is that skipping is a real option. Beside the
 * field the three rows cost about seventy pixels less and the labels stay
 * visible, which placeholder-only fields would not.
 */
.mf-ai__intake-fields {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.mf-ai__intake-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
}

.mf-ai__intake-legend {
  padding: 0;
  margin-block-end: 10px;
  font-family: var(--mf-ai-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mf-ai-ink);
}

.mf-ai__intake-label {
  font-family: var(--mf-ai-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(20, 16, 10, .72);
}

.mf-ai__intake-input {
  inline-size: 100%;
  /* 16px so iOS does not zoom the page when the field takes focus. */
  font-family: var(--mf-ai-sans);
  font-size: 16px;
  line-height: 1.3;
  padding: 10px 12px;
  color: var(--mf-ai-ink);
  background: #fff;
  border: 1px solid var(--mf-ai-line);
  border-radius: var(--mf-ai-r-ctl);
  transition: border-color var(--mf-ai-t);
}

.mf-ai__intake-input:hover { border-color: rgba(20, 16, 4, .42); }

.mf-ai__intake-input:focus-visible {
  outline: 2px solid var(--mf-ai-gold-deep);
  outline-offset: 1px;
  border-color: var(--mf-ai-gold-deep);
}

.mf-ai__intake-why {
  margin: 0;
  font-family: var(--mf-ai-mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: .03em;
  /* 0.66 ink on the off-white panel is 5.9:1 - a footnote that is still read. */
  color: rgba(20, 16, 10, .66);
}

/*
 * Pinned to the bottom of the transcript while the step is open. The panel is
 * short enough that these two sat below the fold on a phone, and a Skip the
 * visitor has to go looking for is not the equal of a Continue they can see.
 * Sticky keeps both in view at every height without shortening the explanation
 * above them.
 */
.mf-ai__intake-actions {
  position: sticky;
  inset-block-end: -18px;
  display: flex;
  gap: 8px;
  padding-block: 10px 18px;
  margin-block-end: -18px;
  background: var(--mf-ai-surface);
}

.mf-ai__btn {
  flex: 1 1 0;
  padding: 11px 14px;
  border-radius: var(--mf-ai-r-ctl);
  font-family: var(--mf-ai-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--mf-ai-t), color var(--mf-ai-t), border-color var(--mf-ai-t);
}

.mf-ai__btn--quiet {
  border: 1px solid var(--mf-ai-line);
  background: transparent;
  color: var(--mf-ai-ink);
}

.mf-ai__btn--quiet:hover { border-color: var(--mf-ai-ink); }

.mf-ai__btn--solid {
  border: 1px solid var(--mf-ai-ink);
  background: var(--mf-ai-ink);
  color: var(--mf-ai-gold);
}

.mf-ai__btn--solid:hover {
  background: var(--mf-ai-gold);
  color: var(--mf-ai-ink);
  border-color: var(--mf-ai-gold);
}

.mf-ai__btn:focus-visible { outline: 2px solid var(--mf-ai-gold-deep); outline-offset: 2px; }

/* ---- composer ---------------------------------------------------------- */

.mf-ai__form {
  flex: none;
  padding: 14px 16px 16px;
  border-block-start: 1px solid var(--mf-ai-line);
  background: var(--mf-ai-surface);
}

.mf-ai__label {
  display: block;
  margin-block-end: 8px;
  font-family: var(--mf-ai-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mf-ai-ink);
}

.mf-ai__row { display: flex; gap: 8px; align-items: stretch; }

.mf-ai__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  /* 16px so iOS does not zoom the page when the field takes focus. */
  font-family: var(--mf-ai-sans);
  font-size: 16px;
  line-height: 1.3;
  padding: 11px 12px;
  color: var(--mf-ai-ink);
  background: #fff;
  border: 1px solid var(--mf-ai-line);
  border-radius: var(--mf-ai-r-ctl);
  transition: border-color var(--mf-ai-t);
}

.mf-ai__input::placeholder { color: rgba(20, 16, 10, .52); }
.mf-ai__input:hover { border-color: rgba(20, 16, 4, .42); }

.mf-ai__input:focus-visible {
  outline: 2px solid var(--mf-ai-gold-deep);
  outline-offset: 1px;
  border-color: var(--mf-ai-gold-deep);
}

.mf-ai__send {
  flex: none;
  padding: 0 16px;
  border: 1px solid var(--mf-ai-ink);
  border-radius: var(--mf-ai-r-ctl);
  background: var(--mf-ai-ink);
  color: var(--mf-ai-gold);
  font-family: var(--mf-ai-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--mf-ai-t), color var(--mf-ai-t);
}

.mf-ai__send:hover { background: var(--mf-ai-gold); color: var(--mf-ai-ink); border-color: var(--mf-ai-gold); }
.mf-ai__send:focus-visible { outline: 2px solid var(--mf-ai-gold-deep); outline-offset: 2px; }

.mf-ai__note {
  margin: 10px 0 0;
  font-family: var(--mf-ai-mono);
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: .04em;
  /* 0.66 ink on the off-white panel is 5.9:1 - a footnote that is still read. */
  color: rgba(20, 16, 10, .66);
}

/* ---- phone ------------------------------------------------------------- */
/*
 * On a phone the panel is the page: a 380px card floating over content is
 * neither readable nor reachable one-handed. It fills the viewport with a
 * small inset so the site is still visibly behind it.
 */
/* ---- the theme reset's buttons ----------------------------------------- */

/*
 * hello-elementor's reset paints every bare <button> #c36 on :hover and
 * :focus. That selector is (0,1,1), so it outranks the one-class rules above
 * wherever they do not name a background of their own - the close button went
 * pink on hover, and every button here went pink after a mouse click, which
 * leaves :focus set without :focus-visible. Found while fitting the cookie
 * banner beside this panel; the banner's own stylesheet carries the same note.
 *
 * Restated at (0,2,0), with :focus given the button's resting colours and
 * :focus-visible keeping the outline the rules above already draw.
 */
.mf-ai .mf-ai__launch:focus  { background: var(--mf-ai-ink); color: var(--mf-ai-gold); }
.mf-ai .mf-ai__launch:hover,
.mf-ai .mf-ai__launch:focus-visible { background: var(--mf-ai-gold); color: var(--mf-ai-ink); }

.mf-ai .mf-ai__close:hover,
.mf-ai .mf-ai__close:focus { background: transparent; }
.mf-ai .mf-ai__close:hover { color: var(--mf-ai-gold); }
.mf-ai .mf-ai__close:focus { color: var(--mf-ai-surface); }
.mf-ai .mf-ai__close:hover:focus { color: var(--mf-ai-gold); }

.mf-ai .mf-ai__btn--quiet:focus { background: transparent; color: var(--mf-ai-ink); }
.mf-ai .mf-ai__btn--quiet:hover { background: transparent; color: var(--mf-ai-ink); }

.mf-ai .mf-ai__btn--solid:focus { background: var(--mf-ai-ink); color: var(--mf-ai-gold); }
.mf-ai .mf-ai__btn--solid:hover { background: var(--mf-ai-gold); color: var(--mf-ai-ink); }

.mf-ai .mf-ai__send:focus { background: var(--mf-ai-ink); color: var(--mf-ai-gold); }
.mf-ai .mf-ai__send:hover { background: var(--mf-ai-gold); color: var(--mf-ai-ink); }

@media (max-width: 600px) {
  .mf-ai {
    inset-block-end: 14px;
    inset-inline-end: 14px;
    inset-inline-start: 14px;
    align-items: flex-end;
  }

  .mf-ai__panel {
    inline-size: 100%;
    /* Taller than it was: the launcher is hidden while the panel is open, so
       the space it occupied is free, and the details step needs it to show
       three fields and two buttons without the visitor hunting for them. */
    max-block-size: min(88vh, calc(100vh - 28px));
  }

  /* The header is a name and one line about it; it does not need desktop
     padding on a phone where the transcript is competing for the room. */
  .mf-ai__head { padding: 13px 14px 12px; }
  .mf-ai__intake { gap: 10px; }

  .mf-ai__log { padding: 16px 14px; gap: 14px; }
  .mf-ai__form { padding: 12px 14px 14px; }
  .mf-ai__msg--user { max-inline-size: 92%; }
  .mf-ai__msg--bot { max-inline-size: 100%; }
}

/* A short landscape phone has no room for a fixed composer under a tall log. */
@media (max-height: 460px) {
  .mf-ai__panel { max-block-size: calc(100vh - 20px); }
  .mf-ai__log { min-block-size: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .mf-ai *,
  .mf-ai *::after { transition: none !important; animation: none !important; }
  .mf-ai__msg.is-thinking::after { content: "..."; }
}

/* Windows high-contrast: the gold rules disappear, so keep real borders. */
@media (forced-colors: active) {
  .mf-ai__launch,
  .mf-ai__panel,
  .mf-ai__send,
  .mf-ai__input,
  .mf-ai__intake-input,
  .mf-ai__btn { border: 1px solid CanvasText; }
  .mf-ai__msg--bot,
  .mf-ai__msg--user { border: 1px solid CanvasText; }
  .mf-ai__msg--bot { border-inline-start: 2px solid CanvasText; }
}