/* Beverly Hills Growth - chat widget styles. Scoped under .bhg-chat. */

/* Site-wide horizontal-scroll lock - prevents any element from causing the
   page to drift left/right on mobile (a known iOS Safari issue when fixed-
   position overlays exist). `width: 100%` is more reliable than
   `max-width: 100vw` because vw includes the scrollbar gutter on some iOS
   configurations and can produce a 1-2px overflow strip. overscroll-behavior
   blocks rubber-band horizontal scrolling that iOS Safari sometimes lets
   through even when overflow-x is hidden. */
html, body {
  overflow-x: hidden;
  width: 100%;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
}

/* When the chat panel is open on mobile, the body is pinned via JS
   (chat-widget.js lockBodyScroll). This class is the CSS half - anything
   below the modal is hidden from accidental scroll/touch interception. */
body.bhg-chat-locked {
  overflow: hidden;
  touch-action: none;
}

.bhg-chat,
.bhg-chat * {
  box-sizing: border-box;
}

.bhg-chat-launcher {
  position: fixed;
  right: max(1.5rem, env(safe-area-inset-right));
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--accent, #ff6b6b);
  border: 1px solid var(--accent, #ff6b6b);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(255, 107, 107, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 9998;
  transition: transform 0.15s ease, background 0.15s ease;
  animation: bhg-pulse 3s ease-in-out infinite;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bhg-chat-launcher:hover { transform: scale(1.06); background: var(--accent-light, #ff8f8f); }
.bhg-chat-launcher.bhg-seen { animation: none; }
.bhg-chat-launcher svg { width: 1.5rem; height: 1.5rem; display: block; }

@keyframes bhg-pulse {
  0%, 100% { box-shadow: 0 10px 30px -8px rgba(255, 107, 107, 0.55), 0 4px 12px rgba(0,0,0,0.4), 0 0 0 0 rgba(255, 107, 107, 0.4); }
  50%      { box-shadow: 0 10px 30px -8px rgba(255, 107, 107, 0.55), 0 4px 12px rgba(0,0,0,0.4), 0 0 0 12px rgba(255, 107, 107, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bhg-chat-launcher { animation: none; }
}
/* Mobile: the bhg-pulse box-shadow ring animates a position:fixed element
   continuously, which iOS Safari can re-rasterize on every scroll tick if
   the layer fails to GPU-composite. Keep the desktop polish; phone scroll
   stays smooth. */
@media (max-width: 640px) {
  .bhg-chat-launcher { animation: none; }
}

.bhg-chat-panel {
  position: fixed;
  right: 1.5rem;
  bottom: 5.5rem;
  width: 24rem;
  max-width: calc(100vw - 3rem);
  height: 36rem;
  /* dvh (dynamic viewport height) shrinks when iOS keyboard opens so the
     chat input never hides behind the keyboard. Falls back to vh on
     browsers that don't support dvh (iOS 15.3 and earlier). */
  max-height: calc(100vh - 7rem);
  max-height: calc(100dvh - 7rem);
  background: var(--dark2, #0d0f14);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: var(--radius, 0.5rem);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  font-family: 'Inter', -apple-system, sans-serif;
  color: rgba(255, 255, 255, 0.92);
  transform-origin: bottom right;
  animation: bhg-pop 0.2s ease-out;
}
.bhg-chat-panel.bhg-open { display: flex; }

@keyframes bhg-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bhg-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}
.bhg-chat-title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bhg-chat-title span { color: var(--accent, #ff6b6b); }
.bhg-chat-status {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.125rem;
}
.bhg-chat-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bhg-chat-close:hover { color: white; background: rgba(255, 255, 255, 0.08); }
.bhg-chat-close svg { width: 0.875rem; height: 0.875rem; }

.bhg-chat-header-actions { display: flex; align-items: center; gap: 0.25rem; }
.bhg-chat-restart {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bhg-chat-restart:hover { color: rgba(255,255,255,0.85); background: rgba(255, 255, 255, 0.08); }
.bhg-chat-restart svg { width: 0.9375rem; height: 0.9375rem; }

.bhg-chat-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9997;
  display: none;
  animation: bhg-fade-in 0.18s ease-out;
}
.bhg-chat-backdrop.bhg-open { display: block; }
@keyframes bhg-fade-in { from { opacity: 0; } to { opacity: 1; } }

.bhg-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  scroll-behavior: smooth;
}
.bhg-chat-body::-webkit-scrollbar { width: 6px; }
.bhg-chat-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

.bhg-msg {
  max-width: 88%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: bhg-msg-in 0.18s ease-out;
}
@keyframes bhg-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bhg-msg-bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  border-bottom-left-radius: 0.25rem;
}
.bhg-msg-user {
  align-self: flex-end;
  background: var(--accent-dim, rgba(255,107,107,0.12));
  border: 1px solid var(--accent-border, rgba(255,107,107,0.35));
  color: rgba(255, 220, 220, 0.98);
  border-bottom-right-radius: 0.25rem;
}
.bhg-msg-error {
  align-self: stretch;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 107, 107, 0.4);
  color: rgba(255, 200, 200, 0.85);
  font-size: 0.8125rem;
  text-align: center;
}
.bhg-msg-error.bhg-retry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  text-align: left;
  padding: 0.625rem 0.75rem;
}
.bhg-retry-msg {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255, 220, 220, 0.95);
}
.bhg-retry-btn {
  flex: 0 0 auto;
  padding: 0.4rem 0.75rem;
  background: var(--accent, #ff6b6b);
  border: 1px solid var(--accent, #ff6b6b);
  color: white;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bhg-retry-btn:hover { background: var(--accent-light, #ff8f8f); }
.bhg-retry-btn:active { opacity: 0.85; }
.bhg-retry-btn:focus-visible { outline: 2px solid var(--accent-light, #ff8f8f); outline-offset: 2px; }

.bhg-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 0.625rem;
  border-bottom-left-radius: 0.25rem;
}
.bhg-typing span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent, #ff6b6b);
  animation: bhg-blink 1.2s infinite ease-in-out;
}
.bhg-typing span:nth-child(2) { animation-delay: 0.2s; }
.bhg-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bhg-blink {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

.bhg-lead-card {
  align-self: stretch;
  background: rgba(255, 107, 107, 0.06);
  border: 1px dashed var(--accent-border, rgba(255,107,107,0.35));
  border-radius: 0.625rem;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: bhg-msg-in 0.2s ease-out;
}
.bhg-lead-label {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45;
}
.bhg-lead-row { display: flex; gap: 0.5rem; }
.bhg-lead-input {
  flex: 1;
  padding: 0.5rem 0.625rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 0.375rem;
  color: white;
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s;
}
.bhg-lead-input:focus { border-color: var(--accent-border, rgba(255,107,107,0.35)); }
.bhg-lead-submit {
  padding: 0.5rem 0.875rem;
  background: var(--accent, #ff6b6b);
  border: 1px solid var(--accent, #ff6b6b);
  color: white;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s;
}
.bhg-lead-submit:hover { background: var(--accent-light, #ff8f8f); }
.bhg-lead-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.bhg-lead-error { font-size: 0.75rem; color: rgba(255, 150, 150, 0.85); }
.bhg-lead-fine { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.45); line-height: 1.4; }
.bhg-turnstile-slot {
  min-height: 65px;
  overflow: hidden;
}
.bhg-turnstile-slot[hidden] {
  display: none;
}
/* First-chat-message Turnstile slot lives inside the chat panel (between
   the input form and the footer). When Cloudflare's invisible challenge
   escalates to a managed/interactive widget, we need min-height + padding
   so the visible challenge isn't squashed between siblings or hidden
   below the mobile soft keyboard. Hidden by default; turnstile.js sets
   el.hidden=false when it injects a managed challenge. */
.bhg-chat-turnstile-slot {
  min-height: 65px;
  margin: 0 0.75rem 0.5rem 0.75rem;
  padding: 0.25rem 0;
  overflow: hidden;
}
.bhg-chat-turnstile-slot[hidden] {
  display: none;
}

.bhg-chat-form {
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding: 0.75rem;
  display: flex;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.bhg-chat-textarea {
  flex: 1;
  resize: none;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 0.5rem;
  color: white;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.625rem 0.75rem;
  outline: none;
  max-height: 6rem;
  line-height: 1.4;
  transition: border-color 0.15s;
  /* Hide the white vertical scrollbar gutter that iOS + macOS Safari
     render inside textareas. The chat input is short (1-3 lines max);
     the user scrolls the panel itself, not this input. */
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
.bhg-chat-textarea::-webkit-scrollbar { display: none; }
.bhg-chat-textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.bhg-chat-textarea:focus { border-color: var(--accent-border, rgba(255,107,107,0.35)); }
.bhg-chat-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.bhg-chat-send {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  background: var(--accent, #ff6b6b);
  border: 1px solid var(--accent, #ff6b6b);
  color: white;
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bhg-chat-send:hover { background: var(--accent-light, #ff8f8f); }
.bhg-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.bhg-chat-send svg { width: 1rem; height: 1rem; }

.bhg-chat-foot {
  text-align: center;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.35);
  padding: 0.375rem 0.75rem 0.625rem;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.bhg-chat-foot a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.bhg-chat-foot a:hover { color: var(--accent-light, #ff8f8f); }

.bhg-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Hero CTA inline trigger styling - paired with existing .btn classes */
.hero-cta-mini {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}
.hero-cta-mini button {
  background: none;
  border: none;
  color: var(--accent-light, #ff8f8f);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.25rem 0.5rem;
  margin: 0 -0.5rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 143, 143, 0.2);
  min-height: 44px;
}
.hero-cta-mini button:hover { color: white; }

/* Mobile - full screen takeover */
@media (max-width: 640px) {
  .bhg-chat-launcher {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: 3.25rem;
    height: 3.25rem;
  }
  body.bhg-chat-locked .bhg-chat-launcher {
    display: none;
  }
  .bhg-chat-panel {
    inset: 0;
    width: 100%;
    max-width: 100%;
    /* iOS Safari + Chrome belt-and-suspenders viewport heights. dvh
       (dynamic viewport height) shrinks with the keyboard, svh is the
       fallback. Both are kept so the panel never gaps at the bottom
       when the URL bar transitions in/out. */
    height: 100svh;
    height: 100dvh;
    max-height: 100svh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    /* SOLID opaque background. Transparent or rgba bg + page underneath
       creates the "page-inside-page" visual when iOS Safari rubber-bands
       the body. */
    background: var(--dark2, #0d0f14);
    /* Use flex so header + messages + form distribute correctly */
    display: none;
    flex-direction: column;
    /* Block touch scroll from chaining out to the body behind. Without
       this, a swipe inside the chat can still scroll the page below. */
    overscroll-behavior: contain;
  }
  .bhg-chat-panel.bhg-keyboard-open {
    bottom: auto;
    max-height: none;
  }
  .bhg-chat-panel.bhg-keyboard-open .bhg-chat-header {
    padding: 0.625rem 0.875rem;
  }
  .bhg-chat-panel.bhg-keyboard-open .bhg-chat-status,
  .bhg-chat-panel.bhg-keyboard-open .bhg-chat-foot {
    display: none;
  }
  .bhg-chat-panel.bhg-keyboard-open .bhg-chat-title {
    font-size: 0.875rem;
  }
  .bhg-chat-panel.bhg-keyboard-open .bhg-chat-close {
    width: 2.25rem;
    height: 2.25rem;
  }
  .bhg-chat-panel.bhg-open { display: flex; }
  .bhg-chat-body {
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .bhg-chat-panel.bhg-keyboard-open .bhg-chat-body {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  /* The form lives at the bottom of the panel - give it safe-area padding so
     the input + send button sit above the iOS home indicator. */
  .bhg-chat-form {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
  .bhg-chat-panel.bhg-keyboard-open .bhg-chat-form {
    padding: 0.5rem 0.625rem max(0.5rem, env(safe-area-inset-bottom));
  }
  .bhg-lead-row {
    flex-direction: column;
  }
  .bhg-lead-submit {
    min-height: 2.75rem;
  }
  .bhg-chat-close {
    width: 2.75rem;
    height: 2.75rem;
  }
  .bhg-chat-backdrop.bhg-open {
    display: block !important;
    background: var(--dark2, #0d0f14);
  }
}

/* AI-disclosure banner rendered above the first greeting bubble.
   CPRA notice-at-collection + FTC AI guidance + EU AI Act Art. 50. */
.bhg-ai-notice {
  font-size: 0.6875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 107, 107, 0.05);
  border: 1px solid rgba(255, 107, 107, 0.18);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.5rem;
  letter-spacing: 0.005em;
}
.bhg-ai-notice strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.bhg-ai-notice a {
  color: #ff8f8f;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bhg-ai-notice a:hover {
  color: #ffb3b3;
}