/* =========================================================================
   MyFirst chat gate — widget styles
   Everything is namespaced under .mfg- so it cannot collide with the theme.
   Brand tokens are scoped to the widget root, not :root, for the same reason.
   ========================================================================= */

.mfg-root {
  --mfg-brand: #4E01DD;
  --mfg-brand-lift: #8E14FF;
  --mfg-ink: #1A1626;
  --mfg-muted: #6B6580;
  --mfg-surface: #FFFFFF;
  --mfg-surface-2: #FBFAFE;
  --mfg-wash: #F1EAFE;
  --mfg-line: #E3DEEE;
  --mfg-ok: #0B7A55;
  --mfg-ok-wash: #E3F5EE;
  --mfg-warn: #96560A;
  --mfg-warn-wash: #FBEFDF;
  --mfg-sans: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  position: fixed;
  right: 18px;
  bottom: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;
  width: min(340px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--mfg-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--mfg-ink);
}

.mfg-root *,
.mfg-root *::before,
.mfg-root *::after { box-sizing: border-box; }

/* Mounted inside a container (CONFIG.mount) rather than the window corner. */
.mfg-root.mfg-inline {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: auto;
  z-index: 5;
  width: min(340px, calc(100% - 36px));
}
.mfg-root.mfg-inline .mfg-panel { max-height: 430px; }
.mfg-root.mfg-inline .mfg-panel.mfg-chat-mode { height: 552px; max-height: none; }

/* ---------- Formilla inside the panel (CONFIG.formillaEmbedPage) ---------- */
/* Formilla's chat has a fixed min-height of 450px. Header (~65px) + 450px +
   back link (~34px) = ~550px. Shorter than that, the chat area scrolls. */
.mfg-panel.mfg-chat-mode {
  height: min(600px, calc(100vh - 110px));
  max-height: none;
}
.mfg-chat-mode .mfg-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.mfg-chat-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow-y: auto;
}
.mfg-chat-foot {
  flex: none;
  border-top: 1px solid var(--mfg-line);
  padding: 0 14px 9px;
  background: var(--mfg-surface);
}
.mfg-chat-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 450px;
  border: 0;
}
.mfg-chat-loading {
  position: absolute;
  inset: 0;
  padding: 15px 14px;
  background: var(--mfg-surface);
}

/* Hide Formilla's own launcher until the gate hands over to it.
   The gate adds .mfg-formilla-live to <html> at that moment. */
html:not(.mfg-formilla-live) #formilla-widget,
html:not(.mfg-formilla-live) #formilla-frame,
html:not(.mfg-formilla-live) iframe[src*="formilla"]:not(.mfg-chat-frame),
html:not(.mfg-formilla-live) div[id^="formilla"] {
  display: none !important;
}

/* ---------- launcher ---------- */
.mfg-launcher {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--mfg-brand);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--mfg-sans);
  font-weight: 600;
  font-size: 13.5px;
  padding: 12px 19px 12px 16px;
  box-shadow: 0 10px 26px -6px rgba(78, 1, 221, .5);
  transition: transform .16s ease;
  margin: 0;
}
.mfg-launcher:hover { transform: translateY(-2px); }
.mfg-launcher svg { width: 17px; height: 17px; flex: none; }

/* ---------- panel ---------- */
.mfg-panel {
  width: 100%;
  background: var(--mfg-surface);
  border: 1px solid var(--mfg-line);
  border-radius: 14px;
  box-shadow: 0 18px 50px -12px rgba(26, 12, 60, .28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(460px, calc(100vh - 140px));
}
/* Must beat the display:flex above, and any theme rule that resets [hidden]. */
.mfg-panel[hidden] { display: none !important; }

.mfg-head {
  background: var(--mfg-brand);
  color: #FFFFFF;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mfg-head-text { flex: 1; min-width: 0; }
.mfg-title { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.mfg-status { font-size: 11px; opacity: .82; display: block; font-weight: 500; }

.mfg-close {
  background: rgba(255, 255, 255, .18);
  border: 0;
  color: inherit;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  font-family: var(--mfg-sans);
  flex: none;
  padding: 0;
}
.mfg-close:hover { background: rgba(255, 255, 255, .3); }

.mfg-body { padding: 15px 14px; overflow-y: auto; }

/* ---------- menu ---------- */
.mfg-prompt { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.mfg-routes { display: flex; flex-direction: column; gap: 7px; }

.mfg-route {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: var(--mfg-surface-2);
  color: var(--mfg-ink);
  border: 1px solid var(--mfg-line);
  border-radius: 10px;
  padding: 11px 12px;
  cursor: pointer;
  font-family: var(--mfg-sans);
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color .14s ease, background .14s ease;
}
.mfg-route:hover { border-color: var(--mfg-brand); background: var(--mfg-wash); }
.mfg-route .mfg-chev { color: var(--mfg-brand); font-size: 15px; line-height: 1; }
.mfg-route .mfg-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mfg-muted);
  margin-left: auto;
}

/* ---------- messages ---------- */
.mfg-bubble {
  background: var(--mfg-wash);
  border: 1px solid var(--mfg-line);
  border-radius: 12px 12px 12px 4px;
  padding: 12px 13px;
  font-size: 14px;
  margin: 0 0 12px;
}
.mfg-bubble strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mfg-brand);
}

.mfg-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--mfg-brand);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 13px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.mfg-call:hover { background: var(--mfg-brand-lift); color: #FFFFFF; }

/* ---------- hours ---------- */
.mfg-hours {
  border: 1px solid var(--mfg-line);
  border-radius: 10px;
  overflow: hidden;
  font-size: 12.5px;
  margin-bottom: 12px;
}
.mfg-hours-head {
  background: var(--mfg-surface-2);
  padding: 8px 11px;
  font-weight: 600;
  border-bottom: 1px solid var(--mfg-line);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.mfg-hours-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 11px; }
.mfg-hours-row:last-child { padding-bottom: 9px; }
.mfg-hours-row.mfg-today { font-weight: 700; color: var(--mfg-brand); }
.mfg-hours-row span:last-child { font-variant-numeric: tabular-nums; }

.mfg-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.mfg-pill.mfg-open { background: var(--mfg-ok-wash); color: var(--mfg-ok); }
.mfg-pill.mfg-shut { background: var(--mfg-warn-wash); color: var(--mfg-warn); }

/* ---------- forms ---------- */
.mfg-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.mfg-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mfg-muted);
  letter-spacing: .03em;
  margin: 0;
}
.mfg-field input,
.mfg-field textarea {
  font-family: var(--mfg-sans);
  font-size: 13.5px;
  color: var(--mfg-ink);
  background: var(--mfg-surface-2);
  border: 1px solid var(--mfg-line);
  border-radius: 9px;
  padding: 10px;
  width: 100%;
  margin: 0;
}
.mfg-field textarea { resize: vertical; min-height: 60px; }
.mfg-field .mfg-error { font-size: 11.5px; color: #B3261E; }

.mfg-submit {
  width: 100%;
  background: var(--mfg-brand);
  color: #FFFFFF;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  font-family: var(--mfg-sans);
  font-weight: 700;
  font-size: 14px;
}
.mfg-submit:disabled { opacity: .55; cursor: default; }

.mfg-back {
  background: none;
  border: 0;
  color: var(--mfg-muted);
  cursor: pointer;
  font-family: var(--mfg-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 0 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mfg-fine { font-size: 11.5px; color: var(--mfg-muted); margin: 12px 0 0; }

/* ---------- typing indicator ---------- */
.mfg-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mfg-muted);
  font-size: 13px;
  padding: 6px 0 10px;
}
.mfg-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mfg-brand);
  animation: mfg-blink 1.1s infinite ease-in-out;
}
.mfg-typing i:nth-child(2) { animation-delay: .18s; }
.mfg-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes mfg-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.mfg-root :focus-visible { outline: 2px solid var(--mfg-brand-lift); outline-offset: 2px; }

/* ---------- phone ---------- */
@media (max-width: 480px) {
  .mfg-root { right: 12px; left: 12px; width: auto; }
  .mfg-panel { max-height: calc(100vh - 120px); }
}

@media (prefers-reduced-motion: reduce) {
  .mfg-root *,
  .mfg-root *::before,
  .mfg-root *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}