/* SVI "Ask SVI" chat widget — portable styles. Scoped under .svi-chat to avoid collisions
   with the host site (WordPress/Elementor or the new site). Brand tokens cloned from the
   garlic.com logo: steel-blue primary, teal accent. All colors are CSS variables so the
   brand can be confirmed/retuned at cutover in one place. */

.svi-chat {
  --svi-primary: #3E7CB1;       /* garlic.com "G" steel blue */
  --svi-primary-dark: #2F6391;
  --svi-accent: #2AA8A0;        /* garlic.com "C" teal */
  --svi-ink: #1f2d3d;
  --svi-muted: #6b7a8d;
  --svi-bg: #ffffff;
  --svi-bubble-bot: #eef3f8;
  --svi-bubble-user: #3E7CB1;
  --svi-line: #e6eaf0;
  --svi-shadow: 0 12px 38px rgba(31,45,61,.18);
  --svi-radius: 16px;

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;          /* above most host chrome */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--svi-ink);
}
.svi-chat *, .svi-chat *::before, .svi-chat *::after { box-sizing: border-box; }

/* Launcher bubble */
.svi-chat__launcher {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--svi-primary); color: #fff;
  border: none; cursor: pointer;
  padding: 13px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  box-shadow: var(--svi-shadow);
  transition: background .15s ease, transform .15s ease;
}
.svi-chat__launcher:hover { background: var(--svi-primary-dark); transform: translateY(-1px); }
.svi-chat__launcher:focus-visible { outline: 3px solid var(--svi-accent); outline-offset: 2px; }
.svi-chat__launcher svg { width: 20px; height: 20px; flex: none; }
.svi-chat[data-open="true"] .svi-chat__launcher { display: none; }

/* Panel */
.svi-chat__panel {
  display: none;
  width: 370px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 110px);
  background: var(--svi-bg);
  border: 1px solid var(--svi-line);
  border-radius: var(--svi-radius);
  box-shadow: var(--svi-shadow);
  overflow: hidden;
  flex-direction: column;
}
.svi-chat[data-open="true"] .svi-chat__panel { display: flex; }

/* Header */
.svi-chat__header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: #fff; border-bottom: 1px solid var(--svi-line);
}
.svi-chat__header img { height: 30px; width: auto; }
.svi-chat__header-text { display: flex; flex-direction: column; line-height: 1.2; }
.svi-chat__header-title { font-weight: 700; font-size: 15px; }
.svi-chat__header-sub { font-size: 12px; color: var(--svi-muted); }
.svi-chat__close {
  margin-left: auto; background: transparent; border: none; cursor: pointer;
  color: var(--svi-muted); font-size: 22px; line-height: 1; padding: 4px 6px; border-radius: 8px;
}
.svi-chat__close:hover { background: var(--svi-bubble-bot); color: var(--svi-ink); }

/* Transcript */
.svi-chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #fbfcfe; }
.svi-chat__msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.svi-chat__msg a { color: inherit; text-decoration: underline; }
.svi-chat__msg--bot { align-self: flex-start; background: var(--svi-bubble-bot); color: var(--svi-ink); border-bottom-left-radius: 4px; }
.svi-chat__msg--user { align-self: flex-end; background: var(--svi-bubble-user); color: #fff; border-bottom-right-radius: 4px; }
.svi-chat__msg--user a { color: #fff; }

/* Typing indicator */
.svi-chat__typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--svi-bubble-bot); border-radius: 14px; }
.svi-chat__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--svi-muted); opacity: .5; animation: svi-bounce 1.1s infinite; }
.svi-chat__typing span:nth-child(2) { animation-delay: .15s; }
.svi-chat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes svi-bounce { 0%,60%,100% { transform: translateY(0); opacity:.45 } 30% { transform: translateY(-4px); opacity:.9 } }

/* Composer */
.svi-chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--svi-line); background: #fff; }
.svi-chat__input {
  flex: 1; resize: none; border: 1px solid var(--svi-line); border-radius: 12px;
  padding: 10px 12px; font-family: inherit; font-size: 15px; color: var(--svi-ink); max-height: 96px;
}
.svi-chat__input:focus { outline: 2px solid var(--svi-accent); outline-offset: -1px; border-color: var(--svi-accent); }
.svi-chat__send {
  flex: none; border: none; cursor: pointer; background: var(--svi-accent); color: #fff;
  width: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.svi-chat__send:hover { background: #228e87; }
.svi-chat__send:disabled { opacity: .5; cursor: default; }
.svi-chat__send svg { width: 20px; height: 20px; }

.svi-chat__footer { text-align: center; font-size: 11px; color: var(--svi-muted); padding: 0 12px 10px; background: #fff; }

@media (max-width: 480px) {
  .svi-chat { right: 12px; bottom: 12px; }
  .svi-chat__panel { width: calc(100vw - 24px); height: calc(100vh - 90px); }
}

@media (prefers-reduced-motion: reduce) {
  .svi-chat__launcher, .svi-chat__send { transition: none; }
  .svi-chat__typing span { animation: none; }
}

/* ── Bold, bleed-proof launcher (Option A) ─────────────────────────────────────────────
   The host site's global link color (#CC3366 on the Telos-built SVI site) was leaking onto
   the launcher / send / close buttons and their SVG icons (stroke="currentColor"), turning
   the brand steel-blue pill into a near-invisible pink outline (Arnold: "looks hard to see").
   These class-scoped rules use !important so no host link/button color can override the
   widget's own brand again. Visual = Option A: larger, weight 700, steel-blue→teal gradient,
   white separator ring + deeper shadow so it pops on any background. */
.svi-chat .svi-chat__launcher {
  background: linear-gradient(135deg, var(--svi-primary) 0%, var(--svi-accent) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;   /* host theme's button-radius was squaring it off */
  padding: 16px 24px !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 3px #fff, 0 14px 34px rgba(31,45,61,.30) !important;
}
.svi-chat .svi-chat__launcher:hover {
  background: linear-gradient(135deg, var(--svi-primary-dark) 0%, #228e87 100%) !important;
}
.svi-chat .svi-chat__launcher svg { width: 23px !important; height: 23px !important; stroke: #fff !important; }

/* Keep the open panel on-brand too — same bleed source hits send/close/icons + user bubble. */
.svi-chat .svi-chat__send { background: var(--svi-accent) !important; color: #fff !important; border: none !important; border-radius: 12px !important; }
.svi-chat .svi-chat__send svg { stroke: #fff !important; }
.svi-chat .svi-chat__send:hover { background: #228e87 !important; }
.svi-chat .svi-chat__close { background: transparent !important; border: none !important; border-radius: 8px !important; color: var(--svi-muted) !important; }
.svi-chat .svi-chat__msg--user { background: var(--svi-bubble-user) !important; color: #fff !important; }
.svi-chat .svi-chat__msg--user a { color: #fff !important; }