/* Spire AI S.A. — AI assistant widget styles. Uses the site tokens (with fallbacks).
   AA contrast: white on #00756b 5.4:1; ink #0f1a2b on #f4fbfa >15:1. No external requests. */
.sa-root, .sa-root * { box-sizing: border-box; }
.sa-root [hidden] { display: none !important; }
.sa-root {
  --sa-brand: var(--brand, #00756b);
  --sa-brand-hover: var(--brand-hover, #00544d);
  --sa-ink: var(--ink, #0f1a2b);
  --sa-text: var(--text, #2a3a50);
  --sa-muted: var(--muted, #475a70);
  --sa-line: var(--line, #cfe6e2);
  --sa-soft: var(--bg-soft, #f4fbfa);
  --sa-coral: var(--coral-ink, #b02b16);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--sa-text);
}

/* launcher */
.sa-launcher {
  position: fixed; z-index: 1000;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .55rem 1.1rem .55rem .7rem;
  background: var(--sa-brand); color: #fff; border: 2px solid #fff; border-radius: 999px;
  font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 22px rgba(15, 26, 43, .32);
  transition: background-color .15s ease, transform .15s ease, opacity .2s ease, visibility .2s;
}
.sa-launcher:hover { background: var(--sa-brand-hover); transform: translateY(-1px); }
.sa-launcher svg { flex: none; border-radius: 8px; box-shadow: 0 0 0 2px #fff; }
.sa-is-open .sa-launcher { display: none; }
/* faded out while it would cover one of the page's buttons (assistant.js, updateTuck) */
.sa-tucked .sa-launcher { opacity: 0; visibility: hidden; pointer-events: none; }

/* panel */
.sa-panel {
  position: fixed; z-index: 1001;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 380px; height: min(560px, calc(100vh - 32px)); height: min(560px, calc(100dvh - 32px));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--sa-line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 26, 43, .35);
}
.sa-head {
  display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem;
  background: var(--sa-ink); color: #fff;
}
.sa-head svg { flex: none; border-radius: 8px; }
.sa-titles { flex: 1; min-width: 0; }
.sa-title { font-weight: 700; font-size: 1rem; }
.sa-sub { font-size: .78rem; color: #cfe6e2; }
.sa-close {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent;
  color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.sa-close:hover { background: rgba(255, 255, 255, .14); }

.sa-msgs { flex: 1; overflow-y: auto; padding: .9rem; background: var(--sa-soft); display: flex; flex-direction: column; gap: .7rem; overscroll-behavior: contain; }
.sa-msg { max-width: 92%; }
.sa-who { display: block; font-size: .72rem; font-weight: 600; color: var(--sa-muted); margin: 0 .25rem .15rem; }
.sa-body { padding: .6rem .8rem; border-radius: 14px; overflow-wrap: anywhere; }
.sa-body p + p, .sa-body ul + p, .sa-body p + ul { margin-top: .5rem; }
.sa-body ul { padding-left: 1.2rem; }
.sa-bot .sa-body { background: #fff; color: var(--sa-ink); border: 1px solid var(--sa-line); border-top-left-radius: 4px; }
.sa-user { align-self: flex-end; }
.sa-user .sa-who { text-align: right; }
.sa-user .sa-body { background: var(--sa-brand); color: #fff; border-top-right-radius: 4px; white-space: pre-wrap; }
.sa-err .sa-body { border-color: var(--sa-coral); }
.sa-body a { color: var(--sa-brand); font-weight: 600; text-decoration: underline; }
.sa-bot .sa-body a:hover { color: var(--sa-brand-hover); }

.sa-typing { display: inline-flex; gap: 4px; align-items: center; height: 1.2em; }
.sa-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--sa-brand); animation: sa-blink 1.2s infinite ease-in-out; }
.sa-typing i:nth-child(2) { animation-delay: .2s; }
.sa-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes sa-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.sa-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sa-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: .6rem .9rem; background: var(--sa-soft); border-top: 1px solid var(--sa-line); }
.sa-chip {
  font: inherit; font-size: .85rem; color: var(--sa-brand); background: #fff;
  border: 1px solid var(--sa-brand); border-radius: 999px; padding: .35rem .8rem; min-height: 36px; cursor: pointer;
}
.sa-chip:hover { background: var(--sa-brand); color: #fff; }

.sa-form { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .7rem .9rem .4rem; border-top: 1px solid var(--sa-line); background: #fff; }
.sa-input {
  grid-column: 1; resize: none; font: inherit; color: var(--sa-ink); background: #fff;
  border: 1px solid #7e9a96; border-radius: 10px; padding: .55rem .7rem; max-height: 130px; min-height: 42px;
}
.sa-input:disabled { background: var(--sa-soft); }
.sa-send {
  grid-column: 2; align-self: end; min-height: 42px; padding: 0 1rem; font: inherit; font-weight: 600;
  color: #fff; background: var(--sa-brand); border: 0; border-radius: 10px; cursor: pointer;
}
.sa-send:hover:not(:disabled) { background: var(--sa-brand-hover); }
.sa-send:disabled { opacity: .55; cursor: not-allowed; }
.sa-counter { grid-column: 1 / -1; font-size: .72rem; color: var(--sa-muted); text-align: right; }
.sa-counter.sa-warn { color: var(--sa-coral); font-weight: 600; }

.sa-unavail { padding: .9rem; border-top: 1px solid var(--sa-line); background: #fff; color: var(--sa-ink); }
.sa-links { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.sa-unavail a { color: var(--sa-brand); font-weight: 600; text-decoration: underline; }

.sa-foot { padding: .45rem .9rem .65rem; background: #fff; font-size: .78rem; }
.sa-foot a { color: var(--sa-muted); text-decoration: underline; }
.sa-foot a:hover { color: var(--sa-brand); }

/* visible focus (also on the dark header) */
.sa-root :focus-visible { outline: 3px solid var(--sa-ink); outline-offset: 2px; }
.sa-launcher:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--sa-ink), 0 6px 22px rgba(15, 26, 43, .32); }
.sa-head :focus-visible { outline-color: #fff; }

/* full-screen sheet on small screens */
@media (max-width: 559px) {
  .sa-panel { inset: 0; width: 100%; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
  .sa-launcher { min-height: 44px; }
  .sa-input { font-size: 16px; }   /* prevents iOS zoom-on-focus */
  .sa-msg { max-width: 96%; }
}
html.sa-noscroll, html.sa-noscroll body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sa-launcher { transition: none; }
  .sa-launcher:hover { transform: none; }
  .sa-typing i { animation: none; opacity: .7; }
}
@media (forced-colors: active) {
  .sa-launcher, .sa-send, .sa-chip, .sa-panel { border: 2px solid CanvasText; }
}
