/* ================================================================
   CHATBOT — the offline Q&A widget: the floating action button that
   opens it, the one-time nudge bubble that points at that button,
   and the panel itself. Kept together (including the trigger) so
   the whole feature can be added or removed without touching the
   header's own files.
   ================================================================ */

/* Fixed bottom-right, persistent across scroll and every view — the
   near-universal placement for a chat trigger, within thumb reach on
   mobile and clear of the primary nav/CTA hierarchy. This is now the
   assistant's only entry point (no matching icon in the top nav), so
   it doesn't compete with a second, redundant button. */
.chat-fab {
  position: fixed;
  inset-inline-end: 24px;
  inset-block-end: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-elevated);
  z-index: 190;
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.15s ease;
}
.chat-fab svg { width: 26px; height: 26px; }
.chat-fab:hover { transform: translateY(-2px); box-shadow: 0 24px 52px rgba(15, 23, 32, 0.32); }
[data-theme="dark"] .chat-fab { background: var(--color-teal); }
/* Hidden (not removed) while the panel is open, since the panel sits
   in the same corner — its own close button takes over. */
.chat-fab.is-hidden {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .chat-fab { transition: opacity 0.01ms linear; }
}

/* Dismissible speech-bubble nudge — a lighter touch than auto-opening
   the panel. Fires once per session (after a delay or on scrolling to
   the Tiers section, see chatbot.js) and never reappears once shown
   or dismissed. */
.chat-nudge {
  position: fixed;
  inset-inline-end: 24px;
  /* Sits just above the FAB: its 24px inset + 52px height + a small gap. */
  inset-block-end: 86px;
  max-width: 240px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay);
  padding-block: 12px;
  padding-inline: 16px 32px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-primary);
  z-index: 190;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.chat-nudge.visible { opacity: 1; transform: none; }
.chat-nudge::after {
  content: "";
  position: absolute;
  inset-block-end: -7px;
  inset-inline-end: 26px;
  width: 14px;
  height: 14px;
  background: var(--bg-surface);
  border-inline-end: 1px solid var(--border);
  border-block-end: 1px solid var(--border);
  transform: rotate(45deg);
}
.chat-nudge-dismiss {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-nudge-dismiss svg { width: 11px; height: 11px; }
.chat-nudge-dismiss:hover { background: var(--bg-page); }
@media (prefers-reduced-motion: reduce) {
  .chat-nudge { transition: opacity 0.01ms linear; }
}

/* The one floating panel in the app — it genuinely sits above page
   content, so it's the one place the strongest shadow tier applies. */
.chat-panel {
  position: fixed;
  inset-inline-end: 24px;
  inset-block-end: 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: calc(100vh - var(--topbar-height) - 48px);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevated);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.chat-panel.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .chat-panel { transition: opacity 0.01ms linear; }
}

.chat-panel-header {
  background: var(--color-primary-deep);
  color: #fff;
  padding-block: 12px;
  padding-inline: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}
.chat-panel-title-group { display: flex; align-items: center; gap: 10px; }
.chat-avatar { width: 30px; height: 30px; border-radius: var(--radius-sm); background: #fff; padding: 4px; flex-shrink: 0; }
.chat-panel-title { font-weight: var(--weight-label); font-size: 0.95rem; }
.chat-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-close svg { width: 13px; height: 13px; }
.chat-close:hover { background: rgba(255, 255, 255, 0.28); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-page);
}

.chat-message { display: flex; }
.chat-message.user { justify-content: flex-end; }
.chat-bubble {
  max-width: 84%;
  padding-block: 8px;
  padding-inline: 12px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.chat-message.bot .chat-bubble {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-end-start-radius: 4px;
}
.chat-message.user .chat-bubble {
  background: var(--color-primary);
  color: #fff;
  border-end-end-radius: 4px;
}

.chat-typing .chat-bubble { display: flex; align-items: center; gap: 4px; padding-block: 13px; padding-inline: 14px; }
.chat-typing .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: chatTypingBounce 1.2s infinite ease-in-out;
}
.chat-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-typing .dot { animation: none; opacity: 0.7; }
}

.chat-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: -2px;
}
.chat-quick-reply {
  background: var(--bg-surface);
  border: 1.5px solid var(--color-primary);
  color: var(--color-accent-text);
  border-radius: var(--radius-pill);
  padding-block: 6px;
  padding-inline: 14px;
  font-size: 0.8rem;
  font-weight: var(--weight-label);
}
.chat-quick-reply:hover { background: var(--color-primary); color: #fff; }

/* Suggested-question chips, shown above the input as soon as the
   panel opens — solves blank-input hesitation and shows what the
   assistant can actually answer instead of making the visitor guess.
   Populated from chatbot.js (context-aware: general set on the home
   view, wizard-relevant set when opened from the quote wizard) and
   hidden once the first message is sent, so the conversation gets
   the room back. */
.chat-suggested-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 10px 0;
  padding-inline: 12px;
  background: var(--bg-surface);
  flex-shrink: 0;
}
.chat-suggested-chips[hidden] { display: none; }
.chat-suggested-chip {
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  padding-block: 6px;
  padding-inline: 12px;
  font-size: 0.78rem;
  font-weight: var(--weight-label);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.chat-suggested-chip:hover { border-color: var(--color-primary); color: var(--color-accent-text); }

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-block-start: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.chat-input-row input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.9rem;
  padding-block: 10px;
  padding-inline: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-page);
  color: var(--text-primary);
}
.chat-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-seafoam);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-send svg { width: 17px; height: 17px; }
.chat-send:hover { opacity: 0.9; }

/* ================================================================
   INSTANT ESTIMATE — the guided price/timeline flow and the add-on
   flow, both running inside this same chat panel (see the PRICING/
   CAPACITY/ADDONS data and conversation functions in chatbot.js).
   Reuses the panel's existing message-bubble chrome; these rules
   only style what plain-text bubbles and single-shot quick-reply
   buttons don't cover: the tier multi-select and the structured
   result bubble.
   ================================================================ */

/* Tier multi-select — chips toggle on/off, "Continue" confirms the
   set. Distinct from .chat-quick-reply (which fires immediately on
   click) since more than one tier can be picked at once. */
.chat-tier-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.chat-tier-chip {
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-inline-start: 4px solid var(--tier-color);
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  padding-block: 7px;
  padding-inline: 14px 16px;
  font-size: 0.85rem;
  font-weight: var(--weight-label);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chat-tier-chip:hover { border-color: var(--tier-color); }
.chat-tier-chip.is-selected {
  background: var(--tier-color);
  border-color: var(--tier-color);
  color: #fff;
}
.chat-tier-continue[disabled] { opacity: 0.5; pointer-events: none; }
.chat-tier-notsure {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding-block: 6px;
}

/* Rich (innerHTML) bot bubbles — used for the tier descriptions and
   the structured estimate result, which need real markup, not the
   plain-text bubbles addMessage() produces everywhere else. */
.chat-bubble-rich { max-width: 92%; }
.chat-bubble-rich p { margin-block-end: 6px; }
.chat-bubble-rich p:last-child { margin-block-end: 0; }

.chat-estimate-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-block-end: 10px; }
.chat-estimate-stat { display: flex; flex-direction: column; gap: 2px; }
.chat-estimate-stat-label { font-size: 0.72rem; color: var(--text-muted); }
.chat-estimate-stat-value { font-size: 1.05rem; font-weight: var(--weight-display); }
.chat-estimate-stat-note { font-size: 0.72rem; color: var(--text-muted); font-style: italic; }

.chat-estimate-badge-row { margin-block-end: 8px; }
.chat-estimate-badge-row .badge { --tier-color: var(--color-seafoam); margin-inline-end: 6px; }

/* Add-on line items don't have a .tier-color-N class of their own —
   the Companion reuses Tier 3's Deep Blue (see ADDONS.aiCompanion in
   chatbot.js); the License gets its own quiet accent. */
.addon-color-license { --tier-color: var(--color-deepwater); }

.chat-estimate-breakdown { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-block-end: 10px; font-size: 0.85rem; }
.chat-estimate-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-inline-start: 3px solid var(--tier-color);
  padding-inline-start: 8px;
}
/* Deliberately lighter than the site's default <strong> weight
   (base.css) — this wraps a price in a dense, single-line list row,
   where the heavier heading weight reads as too loud next to the
   line item's label. */
.chat-estimate-breakdown strong { font-weight: var(--weight-label); white-space: nowrap; }
.chat-estimate-breakdown .below-min { color: var(--text-muted); font-size: 0.72rem; font-style: italic; display: block; }

.chat-estimate-facilitation-note,
.chat-estimate-disclaimer {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-block-end: 8px;
}
.chat-estimate-facilitation-note {
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  padding-block: 8px;
  padding-inline: 10px;
}

/* Small viewports: a cramped floating box is a poor reading/typing
   surface, so the panel becomes a near-full-height bottom sheet that
   slides up from the edge instead. The FAB and nudge tuck in a
   little closer to the edge to match. */
@media (max-width: 640px) {
  .chat-fab {
    inset-inline-end: 16px;
    inset-block-end: 16px;
  }
  .chat-nudge {
    inset-inline-end: 16px;
    inset-block-end: 84px;
    max-width: calc(100vw - 32px);
  }
  .chat-panel {
    inset-inline: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    width: auto;
    max-width: none;
    height: min(88vh, 720px);
    max-height: 88vh;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    transform: translateY(100%);
  }
}