/* GBCA "Find Help" chat widget — STANDALONE styles.
 *
 * Source of truth: css/styles.css "Find Help chat widget" section.
 * This file scopes the design tokens onto .gbca-chat so the widget
 * works on pages that do NOT load the full site stylesheet (e.g. the
 * standalone preview/ landing page). Keep in sync if tokens change.
 */
.gbca-chat {
  --text:              #1e2733;
  --text-muted:        #5a6577;
  --bg:                #ffffff;
  --bg-tint:           #faf8f4;
  --bg-tint-deep:      #ede9e3;
  --border:            #d8d3c4;
  --border-strong:     #a4b1bd;
  --focus-ring:        #f5ef73;
  --gbca-navy:         #1f3c94;
  --brand-primary:     #168747;
  --brand-primary-dark:#0f6234;
  --font-display:      'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --font-body:         Arial, 'Helvetica Neue', sans-serif;
  --radius:            8px;
  --radius-lg:         12px;
  --radius-pill:       999px;
  --shadow-hover:      0 12px 24px rgba(22, 45, 61, 0.12);
}

/* ============================================================
   "Find Help" chat widget — global, all public pages.
   Internal staging (not public yet). Vanilla, no deps. Injected
   by renderChatWidget() in js/app.js; excluded on /admin + 404.
   ============================================================ */
.gbca-chat, .gbca-chat * { box-sizing: border-box; }

/* ── Closed state: floating action button ── */
.gbca-chat__fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-hover);
  z-index: 1000;
  transition: background-color .15s, transform .15s;
}
.gbca-chat__fab:hover { background: var(--brand-primary-dark); transform: translateY(-2px); }
.gbca-chat__fab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.gbca-chat__fab svg { width: 28px; height: 28px; }
.gbca-chat__fab-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--gbca-navy);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius);
}

/* Attention-bounce modifier: 3 hops at decreasing height. JS adds the
   class and removes it on animationend, so the bubble settles at
   translateY(0) with no fallback snap. Suppressed under reduced motion. */
.gbca-chat__fab--bounce { animation: gbca-chat-fab-bounce 1.4s ease-in-out 1; }
@keyframes gbca-chat-fab-bounce {
  0%, 30%, 60%, 90%, 100% { transform: translateY(0); }
  15%                     { transform: translateY(-12px); }
  45%                     { transform: translateY(-8px); }
  75%                     { transform: translateY(-5px); }
}

.gbca-chat__fab[hidden], .gbca-chat__panel[hidden],
.gbca-chat__disclaimer[hidden], .gbca-chat__body[hidden],
.gbca-chat__typing[hidden] { display: none; }

/* ── Open state: chat panel ── */
.gbca-chat__panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 400px;
  max-width: calc(100vw - 40px);
  height: 600px;
  max-height: calc(100vh - 40px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gbca-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 20px;
  background: var(--brand-primary);
  color: #fff;
  flex: none;
}
.gbca-chat__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
}
.gbca-chat__close {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}
.gbca-chat__close:hover { background: rgba(255, 255, 255, 0.18); }
.gbca-chat__close:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* "Start new chat" pill in the header — only visible once the
   conversation has actually started (hidden while the pre-chat
   disclaimer is showing). Reuses the same white-on-brand pill
   treatment as the Close X but with a text label. */
.gbca-chat__newchat {
  flex: none;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  margin-right: 6px;
  white-space: nowrap;
}
.gbca-chat__newchat:hover { background: rgba(255, 255, 255, 0.18); }
.gbca-chat__newchat:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ── Pre-chat disclaimer ── */
.gbca-chat__disclaimer {
  padding: 20px;
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}
.gbca-chat__disclaimer p { margin: 0 0 18px; }

/* ── Body: messages + input + handoff ── */
.gbca-chat__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.gbca-chat__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gbca-chat__msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.gbca-chat__msg--bot {
  align-self: flex-start;
  background: var(--bg-tint-deep);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.gbca-chat__msg--user {
  align-self: flex-end;
  background: var(--brand-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.gbca-chat__typing { align-self: flex-start; display: flex; gap: 5px; padding: 12px 14px; }
.gbca-chat__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: gbca-chat-bounce 1.2s infinite ease-in-out;
}
.gbca-chat__typing span:nth-child(2) { animation-delay: .15s; }
.gbca-chat__typing span:nth-child(3) { animation-delay: .30s; }
@keyframes gbca-chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ── Input ── */
.gbca-chat__input-wrap { border-top: 1px solid var(--border); padding: 12px; flex: none; }
.gbca-chat__input-row { display: flex; gap: 8px; align-items: flex-end; }
.gbca-chat__textarea {
  flex: 1 1 auto;
  resize: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  background: #fff;
  min-height: 44px;
  max-height: 120px;
}
.gbca-chat__textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--brand-primary);
}
.gbca-chat__send, .gbca-chat__start {
  flex: none;
  min-height: 44px;
  border: none;
  border-radius: var(--radius);
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
}
.gbca-chat__send { padding: 0 18px; }
.gbca-chat__start { width: 100%; padding: 12px 18px; font-size: 0.95rem; }
.gbca-chat__send:hover, .gbca-chat__start:hover { background: var(--brand-primary-dark); }
.gbca-chat__send:focus-visible, .gbca-chat__start:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.gbca-chat__counter {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
}

/* ── Handoff ── */
.gbca-chat__handoff {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  padding: 13px 16px;
  background: var(--bg-tint);
  color: var(--brand-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
  flex: none;
}
.gbca-chat__handoff:hover { background: var(--bg-tint-deep); }
.gbca-chat__handoff:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
/* Emphasized when the backend signals a human handoff / crisis. */
.gbca-chat__handoff--cta {
  background: var(--brand-primary);
  color: #fff;
  text-decoration: none;
  animation: gbca-chat-cta 1s ease-in-out 2;
}
.gbca-chat__handoff--cta:hover { background: var(--brand-primary); filter: brightness(1.08); }
@keyframes gbca-chat-cta {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: inset 0 0 0 3px rgba(255,255,255,.45); }
}

/* ── Program cards (authoritative /programs/<slug> links) ── */
.gbca-chat__cards {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 80%;
  margin: -2px 0 2px;
}
.gbca-chat__card {
  display: block;
  padding: 9px 13px;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius);
  background: var(--bg-tint);
  color: var(--brand-primary);
  font-size: 0.9rem;
  text-decoration: none;
  text-align: left;
}
.gbca-chat__card:hover { background: var(--bg-tint-deep); }
.gbca-chat__card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.gbca-chat__card__title {
  display: block;
  font-weight: 700;
}
.gbca-chat__card__title::after { content: " →"; }
.gbca-chat__card__desc {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-muted);
}
/* "None of these match my need" — visually distinct: dashed
   border, no arrow, neutral muted color. It is a button, not a
   link, so it triggers an in-chat message instead of navigation. */
.gbca-chat__card--reject {
  border-style: dashed;
  border-color: var(--text-muted);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  margin-top: 2px;
}
.gbca-chat__card--reject:hover {
  background: var(--bg-tint);
  color: var(--text);
  border-color: var(--text);
}
.gbca-chat__card--reject::after { content: ""; }

/* ── Option (quick-reply) buttons — see css/styles.css for the
   source-of-truth comment. ── */
.gbca-chat__options {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 90%;
  margin: -2px 0 2px;
}
.gbca-chat__option {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--brand-primary);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-primary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.gbca-chat__option:hover { background: var(--bg-tint); }
.gbca-chat__option:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.gbca-chat__option--other {
  border-style: dashed;
  border-color: var(--text-muted);
  color: var(--text-muted);
}
.gbca-chat__option--other:hover {
  background: var(--bg-tint);
  color: var(--text);
  border-color: var(--text);
}

/* ── Mobile: full screen ── */
@media (max-width: 560px) {
  .gbca-chat__panel {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: none;
    border-radius: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gbca-chat__fab { transition: none; }
  .gbca-chat__fab--bounce { animation: none; }
  .gbca-chat__typing span { animation: none; }
}