/* ─── FAQ Search Assistant — Hardened Stylesheet ──────────────────────────────
   High-specificity selectors + !important on layout-critical rules so that
   theme styles (button resets, link colors, flex overrides) can't break it.
──────────────────────────────────────────────────────────────────────────────── */

:root {
  --fsa-accent:         #111C4E;
  --fsa-accent-hover:   #1B2A6B;
  --fsa-accent-light:   #E8EBF5;
  --fsa-accent-text:    #111C4E;

  --fsa-bg:             #ffffff;
  --fsa-bg-secondary:   #F8F8F7;
  --fsa-bg-warning:     #FFFBEB;

  --fsa-text-primary:   #1A1A1A;
  --fsa-text-secondary: #6B6B6B;
  --fsa-text-muted:     #9B9B9B;
  --fsa-text-warning:   #92400E;

  --fsa-border:         rgba(0,0,0,0.09);
  --fsa-border-strong:  rgba(0,0,0,0.18);
  --fsa-border-warning: rgba(217,119,6,0.40);

  --fsa-shadow-input:       0 2px 12px rgba(0,0,0,0.07);
  --fsa-shadow-input-focus: 0 4px 24px rgba(17,28,78,0.16);
}

/* ── Scope reset — neutralize theme styles inside the app ── */
#fsa-app,
#fsa-app * ,
#fsa-app *::before,
#fsa-app *::after {
  box-sizing: border-box !important;
}

#fsa-app {
  display: block !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 48px 20px 80px !important;
  float: none !important;
  text-align: left;
}

/* Kill theme button/link decoration inside the app */
#fsa-app button {
  -webkit-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
  font-weight: 400;
}

#fsa-app a {
  text-decoration: none;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────────────────────────── */

#fsa-app #fsa-hero {
  display: block !important;
  text-align: center !important;
}

#fsa-app #fsa-heading {
  display: block !important;
  font-size: clamp(26px, 4.5vw, 38px) !important;
  font-weight: 600 !important;
  color: var(--fsa-text-primary) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

#fsa-app #fsa-subheading {
  display: block !important;
  font-size: 16px !important;
  color: var(--fsa-text-secondary) !important;
  margin: 0 0 30px !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

#fsa-app.fsa-active #fsa-heading    { font-size: 22px !important; margin-bottom: 4px !important; }
#fsa-app.fsa-active #fsa-subheading { font-size: 13px !important; margin-bottom: 10px !important; }
#fsa-app.fsa-active #fsa-intro      { display: none !important; }
#fsa-app.fsa-active #fsa-popular    { display: none !important; }

/* Intro note under the title */
#fsa-app #fsa-intro {
  display: block !important;
  max-width: 640px !important;
  margin: -14px auto 28px !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  color: var(--fsa-text-secondary) !important;
  line-height: 1.65 !important;
}

#fsa-app #fsa-intro a {
  color: var(--fsa-accent-text) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH INPUT
───────────────────────────────────────────────────────────────────────────── */

#fsa-app #fsa-search-wrap {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  width: 100% !important;

  background: var(--fsa-bg) !important;
  border: 1px solid var(--fsa-border-strong) !important;
  border-radius: 28px !important;
  box-shadow: var(--fsa-shadow-input) !important;
  padding: 6px 6px 6px 20px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#fsa-app #fsa-search-wrap:focus-within {
  border-color: var(--fsa-accent) !important;
  box-shadow: var(--fsa-shadow-input-focus) !important;
}

#fsa-app #fsa-search-icon {
  color: var(--fsa-text-muted) !important;
  flex-shrink: 0 !important;
  margin-right: 10px !important;
  width: 20px !important;
  height: 20px !important;
}

#fsa-app #fsa-input,
#fsa-app textarea#fsa-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  resize: none !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--fsa-text-primary) !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  min-height: 44px !important;
  max-height: 120px !important;
  height: auto;
  text-align: left !important;
  border-radius: 0 !important;
}

#fsa-app #fsa-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#fsa-app #fsa-input::placeholder {
  color: var(--fsa-text-muted) !important;
  opacity: 1 !important;
}

#fsa-app button#fsa-send {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: var(--fsa-accent) !important;
  border: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 0 0 8px !important;
  transition: background 0.15s, transform 0.1s;
}

#fsa-app button#fsa-send:hover  { background: var(--fsa-accent-hover) !important; }
#fsa-app button#fsa-send:active { transform: scale(0.93); }

#fsa-app button#fsa-send svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION CHIPS
───────────────────────────────────────────────────────────────────────────── */

#fsa-app #fsa-sections {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  position: static !important;
  width: 100% !important;
}

#fsa-app button.fsa-section-chip {
  display: inline-flex !important;
  align-items: center !important;
  position: static !important;
  float: none !important;
  width: auto !important;
  padding: 7px 16px !important;
  margin: 0 !important;
  border-radius: 20px !important;
  border: 1px solid var(--fsa-border-strong) !important;
  background: var(--fsa-bg) !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  color: var(--fsa-text-primary) !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  transition: all 0.15s;
}

#fsa-app button.fsa-section-chip:hover {
  background: var(--fsa-accent) !important;
  color: #fff !important;
  border-color: var(--fsa-accent) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   POPULAR QUESTIONS
───────────────────────────────────────────────────────────────────────────── */

#fsa-app #fsa-popular {
  display: block;
  margin: 34px auto 0 !important;
  max-width: 640px !important;
  text-align: left !important;
  padding: 0 !important;
}

#fsa-app .fsa-popular-title {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--fsa-text-muted) !important;
  margin: 0 0 10px !important;
}

#fsa-app button.fsa-popular-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  text-align: left !important;
  padding: 13px 16px !important;
  margin: 0 0 8px !important;
  border: 1px solid var(--fsa-border) !important;
  border-radius: 12px !important;
  background: var(--fsa-bg) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  color: var(--fsa-text-primary) !important;
  line-height: 1.4 !important;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

#fsa-app button.fsa-popular-item:hover {
  border-color: var(--fsa-accent) !important;
  background: var(--fsa-accent-light) !important;
  transform: translateX(3px);
  color: var(--fsa-text-primary) !important;
}

#fsa-app .fsa-popular-count {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 24px !important;
  border-radius: 12px !important;
  background: var(--fsa-accent-light) !important;
  color: var(--fsa-accent-text) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 0 6px !important;
  flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONVERSATION THREAD
───────────────────────────────────────────────────────────────────────────── */

#fsa-app #fsa-thread {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

/* Each question+answer exchange is a group; newest is prepended on top */
#fsa-app .fsa-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 0 0 22px !important;
  margin: 0 0 22px !important;
  border-bottom: 1px solid var(--fsa-border) !important;
  animation: fsaFadeUp 0.25s ease;
}

#fsa-app .fsa-group:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Older exchanges fade slightly to emphasize the newest */
#fsa-app .fsa-group:not(:first-child) {
  opacity: 0.65;
  transition: opacity 0.2s;
}

#fsa-app .fsa-group:not(:first-child):hover {
  opacity: 1;
}

#fsa-app .fsa-turn {
  animation: fsaFadeUp 0.25s ease;
}

@keyframes fsaFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#fsa-app .fsa-question {
  display: block !important;
  align-self: flex-end !important;
  max-width: 82% !important;
  background: var(--fsa-accent) !important;
  color: #fff !important;
  padding: 11px 18px !important;
  margin: 0 !important;
  border-radius: 20px !important;
  border-bottom-right-radius: 5px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

#fsa-app .fsa-answer {
  display: block !important;
  align-self: stretch !important;
  background: var(--fsa-bg) !important;
  border: 1px solid var(--fsa-border) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--fsa-text-primary) !important;
}

#fsa-app .fsa-answer p {
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

#fsa-app .fsa-answer p:last-child { margin-bottom: 0 !important; }

#fsa-app .fsa-answer a {
  color: var(--fsa-accent-text) !important;
}

#fsa-app .fsa-answer-tag {
  display: inline-block !important;
  padding: 3px 11px !important;
  margin: 0 0 10px !important;
  border-radius: 20px !important;
  background: var(--fsa-accent-light) !important;
  color: var(--fsa-accent-text) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

#fsa-app a.fsa-read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 12px 0 0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--fsa-accent-text) !important;
  text-decoration: none !important;
}

#fsa-app a.fsa-read-more:hover { text-decoration: underline !important; }

/* Related questions */
#fsa-app .fsa-related {
  display: block !important;
  margin: 16px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--fsa-border) !important;
}

#fsa-app .fsa-related-title {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--fsa-text-muted) !important;
  margin: 0 0 8px !important;
}

#fsa-app button.fsa-chip {
  display: inline-block !important;
  position: static !important;
  float: none !important;
  width: auto !important;
  padding: 6px 14px !important;
  margin: 0 6px 6px 0 !important;
  border-radius: 20px !important;
  border: 1px solid var(--fsa-border-strong) !important;
  background: var(--fsa-bg) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  color: var(--fsa-text-primary) !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  transition: all 0.15s;
}

#fsa-app button.fsa-chip:hover {
  background: var(--fsa-accent) !important;
  color: #fff !important;
  border-color: var(--fsa-accent) !important;
}

/* Sorry / not found */
#fsa-app .fsa-sorry {
  display: block !important;
  margin: 12px 0 0 !important;
  padding: 13px 16px !important;
  border-radius: 12px !important;
  border: 1px solid var(--fsa-border-warning) !important;
  background: var(--fsa-bg-warning) !important;
  font-size: 14px !important;
  color: var(--fsa-text-warning) !important;
  line-height: 1.6 !important;
}

#fsa-app .fsa-sorry a {
  color: var(--fsa-text-warning) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

/* Typing indicator */
#fsa-app .fsa-typing {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  padding: 4px 0 !important;
}

#fsa-app .fsa-dot {
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--fsa-text-muted) !important;
  animation: fsaBounce 0.9s infinite;
}

#fsa-app .fsa-dot:nth-child(2) { animation-delay: 0.2s; }
#fsa-app .fsa-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes fsaBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-5px); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  #fsa-app { padding: 32px 16px 60px !important; }

  #fsa-app #fsa-search-wrap {
    border-radius: 24px !important;
    padding-left: 16px !important;
  }

  #fsa-app .fsa-question { max-width: 92% !important; font-size: 14.5px !important; }
  #fsa-app .fsa-answer   { padding: 16px !important; font-size: 14.5px !important; }
}