/* Business Growth Assistant — scoped styles.
   Deliberately built from the site's existing design tokens (--cyan,
   --card, --line, --radius, --ease, etc. — defined in index.html) rather
   than introducing a second visual language. Primary buttons and the
   recommendation card reuse .btn/.btn-primary/.build-card directly;
   this file only adds the structural chrome those classes don't cover:
   the panel itself, message bubbles, quick-reply chips and the FAQ
   drawer. Loaded after the site's inline <style>, so equal-specificity
   overrides here (e.g. .wai-launcher's border-radius) win as intended. */

.wai-launcher{
  position:fixed;right:24px;bottom:24px;z-index:65;
  border-radius:999px;padding:14px 24px 14px 20px;font-size:.95rem;
}
.wai-launcher-dot{width:7px;height:7px;border-radius:50%;background:#04191F;opacity:.5;flex-shrink:0}

.wai-panel{
  position:fixed;right:24px;bottom:96px;z-index:70;
  width:min(400px,calc(100vw - 32px));height:min(640px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(24,36,52,.97),rgba(15,22,33,.98)) padding-box,
    linear-gradient(165deg,rgba(75,237,240,.4),rgba(140,170,200,.12) 40%,rgba(75,237,240,.2)) border-box;
  border:1px solid transparent;border-radius:var(--radius);
  box-shadow:var(--hi),var(--shadow-2);
}
.wai-panel[hidden]{display:none}

.wai-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line-soft);flex-shrink:0;
}
.wai-header-title{font-family:"Space Grotesk";font-weight:600;font-size:.98rem;color:var(--ink)}
.wai-header-actions{display:flex;gap:6px}
.wai-icon-btn{
  width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:transparent;border:1px solid transparent;color:var(--muted);
  font-size:1rem;line-height:1;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);
}
.wai-icon-btn:hover{background:rgba(33,221,227,.1);color:var(--cyan)}

.wai-body{
  flex:1;min-height:0;overflow-y:auto;padding:18px 18px 28px;display:flex;flex-direction:column;gap:12px;
  scrollbar-color:#2A3B50 transparent;
}
/* Every direct child (bubbles, quick replies, the recommendation card,
   the lead form) must keep its natural height and never be flex-shrunk.
   Without this, a child with any non-visible overflow (e.g. .build-card's
   overflow:hidden, reused by .wai-rec-card) has its flexbox "automatic
   minimum size" treated as zero per spec, so when content exceeds the
   panel's fixed height the flex algorithm silently squeezes that child
   down to a sliver instead of letting wai-body scroll to reveal it. This
   was a real bug, not a hypothetical one — the recommendation card
   rendered at ~54px tall, clipping all but its badge. */
.wai-body > *{flex-shrink:0;scroll-margin-top:14px;scroll-margin-bottom:14px}

.wai-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.wai-bubble{
  max-width:88%;padding:11px 14px;border-radius:var(--radius-sm);font-size:.93rem;line-height:1.5;
}
.wai-bubble-assistant{
  align-self:flex-start;background:var(--card);color:var(--ink);
  border:1px solid var(--line-soft);border-bottom-left-radius:4px;
}
.wai-bubble-visitor{
  align-self:flex-end;background:linear-gradient(180deg,rgba(33,221,227,.22),rgba(33,221,227,.12));
  color:var(--ink);border:1px solid rgba(33,221,227,.3);border-bottom-right-radius:4px;
}

.wai-typing{display:flex;gap:5px;align-items:center;padding-top:14px;padding-bottom:14px}
.wai-typing-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5;animation:wai-typing-bounce 1.1s ease-in-out infinite}
.wai-typing-dot:nth-child(2){animation-delay:.15s}
.wai-typing-dot:nth-child(3){animation-delay:.3s}
@keyframes wai-typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.wai-quick-replies{display:flex;flex-wrap:wrap;gap:8px;align-self:stretch}
.wai-quick-reply{
  font-family:"Hanken Grotesk";font-size:.88rem;font-weight:500;color:var(--ink);
  background:rgba(33,221,227,.06);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease-spring);
  min-height:40px;
}
.wai-quick-reply:hover{border-color:rgba(75,237,240,.55);background:rgba(33,221,227,.12);transform:translateY(-1px)}

.wai-text-controls{display:flex;flex-direction:column;gap:10px}
.wai-text-input{margin:0}
.wai-text-actions{display:flex;gap:10px;align-items:center}
.wai-btn-secondary{
  font-family:"Space Grotesk";font-weight:600;font-size:.88rem;color:var(--muted);
  background:transparent;border:1px solid var(--line);border-radius:12px;
  padding:11px 18px;cursor:pointer;min-height:40px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.wai-btn-secondary:hover{border-color:rgba(75,237,240,.5);color:var(--cyan)}

.wai-welcome{display:flex;flex-direction:column;gap:14px}

/* The recommendation card is deliberately the strongest visual moment in
   the conversation — a brighter, thicker glow than .build-card's base
   hairline, and more breathing room, so it reads as a result being
   handed over rather than another card in a list. */
.wai-rec-card{
  margin:10px 0 4px;padding:26px 24px;
  background:
    linear-gradient(180deg,rgba(28,42,61,.92),rgba(18,27,40,.96)) padding-box,
    linear-gradient(165deg,rgba(75,237,240,.75),rgba(75,237,240,.15) 45%,rgba(63,217,160,.55)) border-box;
  box-shadow:var(--hi),0 0 0 1px rgba(33,221,227,.12),0 28px 64px -20px rgba(33,221,227,.4);
}
.wai-rec-card-tentative{
  background:
    linear-gradient(180deg,rgba(28,42,61,.92),rgba(18,27,40,.96)) padding-box,
    linear-gradient(165deg,rgba(240,178,75,.6),rgba(240,178,75,.12) 45%,rgba(240,178,75,.35)) border-box;
  box-shadow:var(--hi),0 0 0 1px rgba(240,178,75,.1),0 28px 64px -20px rgba(240,178,75,.3);
}
.wai-rec-badge{
  display:inline-block;font-family:"Space Grotesk";font-size:.72rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--amber);
  background:rgba(240,178,75,.12);border:1px solid rgba(240,178,75,.3);
  border-radius:999px;padding:5px 12px;margin-bottom:16px;
}
.wai-rec-badge-confident{color:var(--cyan);background:rgba(33,221,227,.1);border-color:rgba(33,221,227,.3)}
.wai-rec-title{font-size:1.3rem;font-weight:700;margin-bottom:10px}
.wai-rec-summary{color:var(--muted);font-size:.96rem;margin-bottom:22px}
.wai-rec-section{margin-bottom:18px}
.wai-rec-section:last-of-type{margin-bottom:24px}
.wai-rec-label{
  display:block;font-family:"Space Grotesk";font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px;
}
.wai-rec-section p{color:var(--ink);font-size:.95rem;line-height:1.55}
.wai-rec-actions{display:flex}
.wai-rec-actions .btn{width:100%;justify-content:center}

.wai-lead-wrap{display:flex;flex-direction:column;gap:14px}
.wai-lead-form{display:flex;flex-direction:column;gap:2px}
.wai-lead-form label{margin-top:10px}
.wai-form-status{font-size:.82rem;color:var(--muted-2);margin-top:10px;min-height:1.2em}

.wai-faq-toggle{
  align-self:flex-start;background:none;border:none;color:var(--cyan);
  font-size:.85rem;font-weight:500;text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;padding:6px 0;min-height:32px;
}
.wai-faq-panel{
  display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--radius-sm);
  background:rgba(9,16,27,.5);border:1px solid var(--line-soft);
}
.wai-faq-list{display:flex;flex-direction:column;gap:6px}
.wai-faq-item{
  text-align:left;background:transparent;border:none;color:var(--muted);
  font-size:.88rem;padding:8px 4px;border-radius:8px;cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.wai-faq-item:hover{color:var(--cyan);background:rgba(33,221,227,.06)}
.wai-faq-other-label{font-size:.8rem;color:var(--muted-2)}

/* Matches the site's own breakpoint (index.html) exactly — .sticky-cta
   becomes visible at max-width:760px, not 640px. Getting this out of
   sync caused a real overlap in the 641-760px range, caught by direct
   measurement during QA: the launcher sat 58px into the sticky bar. */
@media(max-width:760px){
  /* Measured against the site's existing .sticky-cta bar (~83px tall
     including its own safe-area padding) — this leaves a real gap
     instead of nearly touching it. */
  .wai-launcher{bottom:calc(104px + env(safe-area-inset-bottom))}
}

@media(max-width:640px){
  .wai-launcher{right:16px;padding:13px 20px 13px 16px;font-size:.9rem}
  .wai-panel{
    right:0;left:0;bottom:0;top:0;width:100%;height:100%;
    border-radius:0;border:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .wai-launcher,.wai-quick-reply,.wai-icon-btn,.wai-btn-secondary{transition:none !important}
  .wai-typing-dot{animation:none !important;opacity:.6}
}