/* chatbot.css */
/* The Mortgage Room chat widget -- matches site token system */
/* Uses same --bg, --surface, --accent, --font-sans variables as main site */

:root {
  /* Repainted 2026-09-16 to the redesigned site's own dark-band tokens.
     The widget keeps its dark panel, which is a deliberate contrast against a
     light site, but the gold accent and Outfit came from the pre-redesign
     brand. Outfit is no longer loaded on any converted page, so the widget was
     silently falling back to system-ui. Values below are fc.css --deep,
     --on-deep and --accent-deep. */
  /* Follows fc.css again, now on Direction A. The panel stays dark on purpose,
     as contrast against a light site, but the dark is the site's own --deep-2
     and the accent is the brass. Brass on this ground reads 7.8:1. */
  --fc-bg:        #0B231C;
  --fc-surface:   #12332A;
  --fc-surface-2: #1A4034;
  --fc-border:    rgba(255,255,255,0.10);
  --fc-muted:     rgba(237,241,236,0.48);
  --fc-body:      rgba(237,241,236,0.85);
  --fc-heading:   #FFFFFF;
  --fc-accent:    #D9A961;
  --fc-accent-dk: #BC8C42;
  --fc-radius:    10px;
  --fc-font:      'Inter Tight', 'Archivo', system-ui, sans-serif;
  --fc-shadow:    0 24px 64px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
}

/* ─── Launcher button ───────────────────────── */

#fc-chat-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--fc-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(217,169,97,0.35), 0 2px 8px rgba(0,0,0,0.4);
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
  font-family: var(--fc-font);
  outline: none;
}

/* The site's mobile sticky CTA bar is fixed at bottom:0 and about 72px tall
   (fc.css .sticky-cta, and the body padding-bottom that reserves room for it).
   The launcher sits at z-index 9000, so at bottom:24px it lands on top of the
   "Book a call" button and swallows the tap. Lift it clear wherever that bar
   is on screen. fc.css hides .sticky-cta above 899px. */
@media (max-width: 899px) {
  #fc-chat-launcher {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

#fc-chat-launcher:hover {
  background: var(--fc-accent-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(217,169,97,0.4), 0 2px 8px rgba(0,0,0,0.4);
}

#fc-chat-launcher:focus-visible {
  outline: 2px solid var(--fc-accent);
  outline-offset: 3px;
}

#fc-chat-launcher svg {
  color: #0B231C;
  transition: opacity 0.15s;
}

@keyframes fc-pulse-ring {
  0%   { box-shadow: 0 4px 24px rgba(217,169,97,0.35), 0 2px 8px rgba(0,0,0,0.4), 0 0 0 0 rgba(217,169,97,0.5); }
  60%  { box-shadow: 0 4px 24px rgba(217,169,97,0.35), 0 2px 8px rgba(0,0,0,0.4), 0 0 0 14px rgba(217,169,97,0); }
  100% { box-shadow: 0 4px 24px rgba(217,169,97,0.35), 0 2px 8px rgba(0,0,0,0.4), 0 0 0 0 rgba(217,169,97,0); }
}

#fc-chat-launcher.fc-pulse {
  animation: fc-pulse-ring 1.2s ease-out 3;
}

/* ─── Unread badge ──────────────────────────── */

#fc-unread-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--fc-bg);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  font-family: var(--fc-font);
}

#fc-unread-badge.visible {
  display: flex;
}

/* ─── Chat window ───────────────────────────── */

#fc-chat-window {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 8999;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--fc-font);
  transition: opacity 0.2s, transform 0.2s;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  pointer-events: none;
}

#fc-chat-window.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* ─── Header ────────────────────────────────── */

#fc-chat-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--fc-bg);
  border-bottom: 1px solid var(--fc-border);
  flex-shrink: 0;
}

.fc-header-identity {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.fc-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* Ground, not brass: the mark's second link is brass and would vanish on it. */
  background: #F7F4EE;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fc-avatar-mark {
  width: 24px;
  height: 24px;
}

.fc-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* FSRA: the agent's advertising name and the brokerage's name and licence must be
   at least as prominent as the trade name, so all three header lines share one
   size, weight and colour at every width, fullscreen mobile included. The rest of
   the disclosure stays in the compliance footer's small type. */
.fc-header-name,
.fc-header-agent,
.fc-header-brokerage {
  font-size: 14px;
  font-weight: 600;
  color: var(--fc-heading);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fc-nowrap { white-space: nowrap; }

.fc-header-status {
  font-size: 11px;
  color: var(--fc-muted);
}

#fc-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fc-muted);
  width: 44px;
  height: 44px;
  margin: -6px -10px -6px 0;
  flex-shrink: 0;
  padding: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
  outline: none;
}

#fc-close-btn:hover { color: var(--fc-heading); }
#fc-close-btn:focus-visible { outline: 2px solid var(--fc-accent); }

/* ─── Messages area ─────────────────────────── */

#fc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

#fc-messages::-webkit-scrollbar { width: 4px; }
#fc-messages::-webkit-scrollbar-track { background: transparent; }
#fc-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* ─── Message bubbles ───────────────────────── */

.fc-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  gap: 4px;
}

.fc-msg.bot { align-self: flex-start; }
.fc-msg.visitor { align-self: flex-end; }
.fc-msg.raymond { align-self: flex-start; }

.fc-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
}

.fc-msg.bot .fc-bubble {
  background: var(--fc-surface-2);
  border: 1px solid var(--fc-border);
  color: var(--fc-body);
  border-bottom-left-radius: 4px;
}

.fc-msg.raymond .fc-bubble {
  background: rgba(217,169,97,0.08);
  border: 1px solid rgba(217,169,97,0.2);
  color: var(--fc-body);
  border-bottom-left-radius: 4px;
}

.fc-msg.visitor .fc-bubble {
  background: var(--fc-accent);
  color: #0B231C;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}

.fc-bubble a {
  color: var(--fc-accent);
  text-decoration: underline;
  text-decoration-color: rgba(217,169,97,0.4);
}

.fc-msg.visitor .fc-bubble a {
  color: #0B231C;
  text-decoration-color: rgba(12,14,18,0.4);
}

.fc-sender-label {
  font-size: 10px;
  color: var(--fc-muted);
  padding: 0 4px;
}

.fc-msg.raymond .fc-sender-label {
  color: var(--fc-accent);
  font-weight: 500;
}

/* Typing indicator */
.fc-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  background: var(--fc-surface-2);
  border: 1px solid var(--fc-border);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}

.fc-typing-dot {
  width: 6px;
  height: 6px;
  background: var(--fc-muted);
  border-radius: 50%;
  animation: fc-bounce 1.2s infinite;
}

.fc-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.fc-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes fc-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ─── Quick actions ─────────────────────────── */

#fc-quick-actions {
  padding: 0 16px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.fc-quick-btn {
  font-family: var(--fc-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--fc-accent);
  background: transparent;
  border: 1px solid rgba(217,169,97,0.3);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  outline: none;
}

.fc-quick-btn:hover {
  background: rgba(217,169,97,0.08);
  border-color: rgba(217,169,97,0.5);
}

.fc-quick-btn:focus-visible {
  outline: 2px solid var(--fc-accent);
  outline-offset: 2px;
}

.fc-quick-btn--contextual {
  background: rgba(217,169,97,0.06);
  border-color: rgba(217,169,97,0.45);
}

/* ─── Input area ────────────────────────────── */

#fc-input-area {
  padding: 12px 16px;
  background: var(--fc-bg);
  border-top: 1px solid var(--fc-border);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}

#fc-input {
  flex: 1;
  background: var(--fc-surface-2);
  border: 1px solid var(--fc-border);
  border-radius: 8px;
  color: var(--fc-heading);
  font-family: var(--fc-font);
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 14px;
  resize: none;
  outline: none;
  max-height: 120px;
  min-height: 40px;
  transition: border-color 0.15s;
}

#fc-input::placeholder { color: var(--fc-muted); }
#fc-input:focus { border-color: rgba(217,169,97,0.4); }

#fc-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--fc-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0B231C;
  transition: background 0.15s, transform 0.12s;
  outline: none;
}

#fc-send-btn:hover { background: var(--fc-accent-dk); transform: translateY(-1px); }
#fc-send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
#fc-send-btn:focus-visible { outline: 2px solid var(--fc-accent); }

/* ─── Compliance footer ─────────────────────── */

#fc-compliance-footer {
  padding: 8px 16px;
  background: var(--fc-bg);
  border-top: 1px solid var(--fc-border);
  font-size: 10px;
  color: var(--fc-muted);
  line-height: 1.5;
  flex-shrink: 0;
}

/* ─── Warning banner ────────────────────────── */

#fc-sensitive-warning {
  display: none;
  padding: 8px 16px;
  background: rgba(239,68,68,0.08);
  border-top: 1px solid rgba(239,68,68,0.2);
  font-size: 11px;
  color: rgba(239,68,68,0.9);
  line-height: 1.4;
  flex-shrink: 0;
}

#fc-sensitive-warning.visible { display: block; }

/* ─── Welcome screen ────────────────────────── */

#fc-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  gap: 12px;
  flex: 1;
}

.fc-welcome-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--fc-accent) 0%, var(--fc-accent-dk) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  color: #0B231C;
}

.fc-welcome-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fc-heading);
}

.fc-welcome-sub {
  font-size: 13px;
  color: var(--fc-muted);
  line-height: 1.55;
  max-width: 260px;
}

/* ─── Responsive: narrow screens ───────────── */

@media (max-width: 480px) {
  #fc-chat-window {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    z-index: 9999;
  }

  #fc-chat-launcher {
    /* Clears the site's mobile sticky CTA bar. See the 899px rule above. */
    bottom: calc(88px + env(safe-area-inset-bottom));
    right: 16px;
    z-index: 10000;
  }

  /* Prevent iOS Safari zoom on input focus -- must be 16px+ */
  #fc-input {
    font-size: 16px;
    min-height: 44px;
    padding: 12px 14px;
  }

  /* Larger bubbles for easier reading */
  .fc-bubble {
    font-size: 15px;
    line-height: 1.6;
    padding: 12px 16px;
  }

  /* Larger tap targets */
  #fc-send-btn {
    width: 44px;
    height: 44px;
  }

  .fc-quick-btn {
    font-size: 13px;
    padding: 8px 14px;
  }

  /* Push content above iPhone home bar */
  #fc-input-area {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  #fc-compliance-footer {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* ─── Reduced motion ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #fc-chat-window, #fc-chat-launcher, .fc-typing-dot {
    transition: none;
    animation: none;
  }
}