/* BrightPath Quick Chat v1.0 — all rules scoped under .bpqc so Bootstrap/reskin.css aren't affected */
.bpqc {
  /* Matched to reskin.css brand tokens */
  --bpqc-ink: #1a365d;        /* --bpl-primary: header, visitor bubbles, chip outlines */
  --bpqc-ink-soft: #2d4a7c;   /* --bpl-primary-light */
  --bpqc-accent: #6eb441;     /* --bpl-accent: launcher, send, submit (same as .btn-primary) */
  --bpqc-accent-dark: #5a9434;
  --bpqc-accent-ink: #ffffff;
  --bpqc-bot: #f1f5f9;        /* --bpl-gray-50 */
  --bpqc-line: #e2e8f0;       /* --bpl-gray-100 */
  --bpqc-text: #1e293b;       /* --bpl-gray-800 */
  --bpqc-muted: #64748b;      /* --bpl-gray-500 */
  --bpqc-error: #b42318;
  --bpqc-surface: #ffffff;
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--bpqc-text);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.bpqc *, .bpqc *::before, .bpqc *::after { box-sizing: border-box; }
/* Move Google's reCAPTCHA badge to the bottom-left so the chat button can own the
   bottom-right corner. It stays visible (required by Google's terms) and expands on hover. */
.grecaptcha-badge {
  left: 4px !important; right: auto !important;
  width: 70px !important; overflow: hidden !important;
  transition: width .3s ease !important;
}
.grecaptcha-badge:hover { width: 256px !important; }
.bpqc [hidden] { display: none !important; }
.bpqc button { font: inherit; margin: 0; cursor: pointer; }
.bpqc svg { display: block; }
.bpqc :focus-visible { outline: 3px solid var(--bpqc-accent); outline-offset: 2px; }

/* Launcher */
.bpqc-launcher {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 20px 0 16px;
  border: 0; border-radius: 6px;               /* --radius-sm, same as site .btn */
  background: var(--bpqc-accent); color: var(--bpqc-accent-ink);
  font-weight: 600; font-size: 14.5px; letter-spacing: 0;
  /* thin white ring + deeper shadow so it separates from hero photos */
  box-shadow: 0 0 0 2px #fff, 0 10px 24px -6px rgba(15, 23, 42, .55);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bpqc-launcher svg { width: 22px; height: 22px; margin: -2px 0; }
.bpqc-launcher:hover { background: var(--bpqc-accent-dark); transform: translateY(-1px); box-shadow: 0 0 0 2px #fff, 0 12px 26px -6px rgba(15, 23, 42, .6); }

/* Teaser nudge */
.bpqc-teaser {
  position: relative; max-width: 260px;
  background: var(--bpqc-surface); border: 1px solid var(--bpqc-line);
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 12px 28px -14px rgba(21, 48, 74, .4);
  animation: bpqc-in .25s ease-out both;
}
.bpqc-teaser-text {
  display: block; width: 100%; text-align: left;
  padding: 12px 36px 12px 14px; border: 0; background: none; margin: 0; cursor: default;
  color: var(--bpqc-text); font-weight: 400; font-size: 14px; line-height: 1.4;
}
.bpqc-teaser-text strong { font-weight: 700; color: var(--bpqc-ink); }
.bpqc-teaser-x {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; padding: 4px;
  border: 0; border-radius: 50%; background: none; color: var(--bpqc-muted);
}
.bpqc-teaser-x svg { width: 100%; height: 100%; }

/* Panel */
.bpqc-panel {
  width: 370px;
  height: min(600px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--bpqc-surface);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(21, 48, 74, .5), 0 0 0 1px rgba(21, 48, 74, .08);
  animation: bpqc-rise .22s ease-out both;
}
.bpqc-head {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 10px 12px 16px;
  background: var(--bpqc-ink); color: #fff;
}
.bpqc-title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bpqc-title strong { font-size: 16px; line-height: 1.2; }
.bpqc-title span { font-size: 12.5px; color: #c6d4e2; }
.bpqc-icon-btn {
  width: 36px; height: 36px; padding: 7px; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: #fff;
}
.bpqc-icon-btn:hover { background: rgba(255, 255, 255, .12); }
.bpqc-reply-row { display: flex; align-items: flex-start; gap: 8px; }
.bpqc-reply-body { flex: 1; min-width: 0; }
/* Back: mirrors Send on the left; navy outline so it's visible but still secondary to green */
.bpqc-prev {
  width: 46px; height: 46px; flex: none; padding: 11px;
  border: 1.5px solid var(--bpqc-ink); border-radius: 6px;   /* navy outline, like the answer buttons */
  background: #fff; color: var(--bpqc-ink);
  transition: background .12s ease, color .12s ease;
}
.bpqc-prev svg { width: 100%; height: 100%; }
.bpqc-prev:hover { background: var(--bpqc-ink); color: #fff; }
.bpqc-change {
  align-self: flex-end; margin: -4px 2px 4px; padding: 2px 4px;
  border: 0; background: none; color: var(--bpqc-muted);
  font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px;
}
.bpqc-change:hover { color: var(--bpqc-ink); }
.bpqc-icon-btn svg { width: 100%; height: 100%; }

.bpqc-meter { height: 4px; background: var(--bpqc-bot); flex: none; }
.bpqc-meter span { display: block; height: 100%; width: 0; background: var(--bpqc-accent); transition: width .3s ease; }

/* Conversation */
.bpqc-log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 14px 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.bpqc-msg { max-width: 86%; padding: 9px 13px; word-wrap: break-word; }
.bpqc-bot { align-self: flex-start; background: var(--bpqc-bot); border-radius: 16px 16px 16px 4px; }
.bpqc-user {
  align-self: flex-end; background: var(--bpqc-ink); color: #fff; font-weight: 600;
  border-radius: 16px 16px 4px 16px; margin-bottom: 6px;
}
.bpqc-msg.is-new { animation: bpqc-in .22s ease-out both; }

/* Reply area */
.bpqc-reply {
  flex: none; padding: 10px 14px 14px;
  border-top: 1px solid var(--bpqc-line);
  background: var(--bpqc-surface);
  max-height: 55%; overflow-y: auto;
}
.bpqc-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bpqc-chip {
  min-height: 40px; padding: 7px 15px;
  border: 1.5px solid var(--bpqc-ink); border-radius: 999px;
  background: var(--bpqc-surface); color: var(--bpqc-ink); font-weight: 600;
  transition: background .12s ease, color .12s ease;
}
.bpqc-chip:hover, .bpqc-chip.is-picked { background: var(--bpqc-ink); color: #fff; }

.bpqc-compose { display: flex; gap: 8px; margin: 0; }
.bpqc-input, .bpqc-select {
  flex: 1; min-width: 0; height: 46px; margin: 0;
  padding: 0 14px;
  border: 1.5px solid var(--bpqc-line); border-radius: 6px;
  background: var(--bpqc-surface); color: var(--bpqc-text);
  font: inherit; font-size: 16px; /* 16px stops iOS zoom-on-focus */
}
.bpqc-select { width: 100%; }
.bpqc-input:focus, .bpqc-select:focus { outline: none; border-color: var(--bpqc-ink); box-shadow: 0 0 0 3px rgba(110, 180, 65, .3); }
.bpqc-input[aria-invalid="true"] { border-color: var(--bpqc-error); }
/* Send: quiet (outline) while the box is empty, solid green once they've typed */
.bpqc-send {
  width: 46px; height: 46px; flex: none; padding: 11px;
  border: 1.5px solid var(--bpqc-accent); border-radius: 6px;
  background: #fff; color: var(--bpqc-accent);
  transition: background .15s ease, color .15s ease;
}
.bpqc-send:hover { background: #f3f9ee; }
.bpqc-send.is-ready { background: var(--bpqc-accent); color: var(--bpqc-accent-ink); }
.bpqc-send.is-ready:hover, .bpqc-submit:hover { background: var(--bpqc-accent-dark); border-color: var(--bpqc-accent-dark); }
.bpqc-send svg { width: 100%; height: 100%; }
.bpqc-send.is-busy, .bpqc-submit.is-busy { opacity: .6; cursor: progress; }
.bpqc-error { margin: 6px 2px 0; min-height: 0; font-size: 13.5px; color: var(--bpqc-error); }
.bpqc-error:empty { display: none; }
.bpqc-link {
  margin-top: 8px; padding: 2px; border: 0; background: none;
  color: var(--bpqc-ink-soft); font-size: 13.5px; text-decoration: underline;
}
.bpqc-link:disabled { color: var(--bpqc-muted); text-decoration: none; cursor: default; }

/* Consent */
.bpqc-consent-label {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12px; line-height: 1.5; color: var(--bpqc-muted); font-weight: 400; margin: 0 0 12px;
  cursor: pointer;
}
.bpqc-consent-label input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--bpqc-ink); }
.bpqc-consent-label a { color: var(--bpqc-ink-soft); text-decoration: underline; }
.bpqc-trust {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 10px; margin: 10px 0 2px;
}
.bpqc-trust span { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: #98a2b3; white-space: nowrap; }
.bpqc-trust i { font-size: 12px; color: var(--bpqc-accent); }
.bpqc-trust img { height: 17px; width: auto; }
.bpqc-trust strong { color: #4a7c5f; font-size: 11px; font-weight: 700; }
.bpqc-consent-below {
  display: block; margin: 10px 2px 0; cursor: default;
  font-size: 10.5px; line-height: 1.45; color: var(--bpqc-muted);
}
.bpqc-submit {
  width: 100%; min-height: 50px; padding: 0 18px;
  border: 0; border-radius: 6px;
  background: var(--bpqc-accent); color: var(--bpqc-accent-ink);
  font-weight: 600; font-size: 16px;
}
.bpqc-submit-quiet { background: var(--bpqc-ink); color: #fff; }
.bpqc-submit-quiet:hover { background: var(--bpqc-ink-soft); }
.bpqc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

@keyframes bpqc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bpqc-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Phones: full-screen panel, launcher hidden while open */
@media (max-width: 480px) {
  .bpqc { right: 14px; bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
  .bpqc.is-open { inset: 0; right: 0; bottom: auto; height: 100%; }
  .bpqc.is-open .bpqc-launcher { display: none; }
  .bpqc-panel {
    width: 100%; height: 100%; border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bpqc-ink);
  }
  .bpqc-log { background: var(--bpqc-surface); }
  .bpqc-head { padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bpqc *, .bpqc *::before, .bpqc *::after { animation: none !important; transition: none !important; }
}