/* assistant.css — floating "Ask" assistant (Phase 6). Higher-quality v2. */

#atb-ask {
  /* --atb-fab-bottom lets a page with its own mobile sticky bar lift BOTH
     floating controls (this and #atb-gc-pill) clear of it — Sheridan
     2026-09-16, after the gift-card pill landed on top of a lander's bar. */
  position: fixed; right: 20px; bottom: var(--atb-fab-bottom, 20px); z-index: 2147483000;  /* above any lander sticky bar */

  /* EVERY green in this widget comes from these four, and all four are mixed
     from the site's own --teal — so the launcher, its hover, the tooltip, the
     panel header, the chips, the links and the send button all follow a
     member's custom palette instead of the fixed jade they used to hardcode
     (Sheridan 2026-09-16: "make mouse over ask button and ask popup inherit
     theme colors"). Literal jade stays as the pre-color-mix fallback. */
  --ask-accent: #0c7a5b;
  --ask-accent: color-mix(in srgb, var(--teal, #004b3b) 82%, #ffffff);
  --ask-accent-2: #12a37a;
  --ask-accent-2: color-mix(in srgb, var(--teal, #004b3b) 58%, #ffffff);
  --ask-wash: #e8f3ef;
  --ask-wash: color-mix(in srgb, var(--teal, #004b3b) 9%, #ffffff);
  --ask-line: rgba(0, 75, 59, .28);
  --ask-line: color-mix(in srgb, var(--teal, #004b3b) 30%, transparent);
  --ask-glow: rgba(0, 75, 59, .55);
  --ask-glow: color-mix(in srgb, var(--teal, #004b3b) 55%, transparent);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
}

/* ---- launcher: subtle, see-through "?" that solidifies on hover ---- */
.ask-launch {
  display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  /* Follows the member-site palette (--teal maps to the theme accent on
     themed hosts); solid fallback first for browsers without color-mix. */
  /* Was a fixed jade #0c7a5b (Sheridan 2026-08-01: lighter than the CTA
     reads better for a help control). SUPERSEDED 2026-09-16 — "make the ask
     button inherit the site's custom design colors": keep the lighter
     relationship, but derive it from the palette by mixing the theme accent
     toward white, so a themed member subdomain tints this too. The literal
     jade stays as the fallback for browsers without color-mix. */
  background: #0c7a5b;
  background: color-mix(in srgb, var(--ask-accent) 62%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; opacity: 0.82;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 14px -4px rgba(11, 31, 23, 0.28);
  transition: opacity .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.ask-launch:focus-visible {
  opacity: 1; background: var(--ask-accent);
  box-shadow: 0 10px 24px -8px var(--ask-glow);
}
/* Only apply hover styling on devices that actually hover. On touch, a :hover
   rule makes the first tap a "hover" and needs a second tap to activate. */
@media (hover: hover) {
  .ask-launch:hover {
    opacity: 1; background: var(--ask-accent); transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px var(--ask-glow);
  }
}
#atb-ask.open .ask-launch { display: none; }

/* While a full-screen overlay is up (join popup, embed popup, a lander's own
   modal) the floating controls step aside — they overlapped the popup's own
   CTA at phone widths. assistant.js sets the class by probing the viewport
   centre; these three ids are every floating control we render. */
html.atb-overlay-open #atb-ask,
html.atb-overlay-open #atb-gc-pill,
html.atb-overlay-open #atb-gc-card,
html.atb-overlay-open #atb-gc-teaser { display: none !important; }

/* Themed hover tooltip (replaces the unstyleable native title=) — follows
   the member palette via --teal-deep. */
.ask-launch[data-tip] { position: relative; }
.ask-launch[data-tip]::after {
  content: attr(data-tip);
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--ask-accent); color: #fff;
  font: 500 12.5px/1 'Geist', system-ui, sans-serif; white-space: nowrap;
  padding: 8px 11px; border-radius: 9px;
  box-shadow: 0 6px 18px -6px rgba(11, 31, 23, 0.4);
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
@media (hover: hover) {
  .ask-launch[data-tip]:hover::after { opacity: 1; }
}

/* ---- panel: refined card with animated open ---- */
.ask-panel {
  width: 384px; max-width: calc(100vw - 36px); height: 560px; max-height: calc(100vh - 120px);
  background: #fff; border: 1px solid rgba(11, 31, 23, 0.08); border-radius: 20px;
  box-shadow: 0 1px 1px rgba(11,31,23,.04), 0 18px 48px -14px rgba(11, 31, 23, 0.42);
  display: none; flex-direction: column; overflow: hidden;
  transform-origin: bottom right;
}
#atb-ask.open .ask-panel {
  display: flex; animation: ask-in .22s cubic-bezier(.16,.84,.44,1);
}
@keyframes ask-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* header — gradient band + assistant glyph + title/subtitle */
.ask-head {
  display: flex; align-items: center; gap: 11px; padding: 15px 16px;
  background: linear-gradient(135deg, var(--ask-accent) 0%, var(--ask-accent-2) 100%);
  color: #fff;
}
.ask-head .ask-ava {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.18); display: grid; place-items: center;
}
.ask-head .ask-ttl { flex: 1; min-width: 0; line-height: 1.2; }
.ask-head .ask-ttl b { display: block; font-family: 'Newsreader', serif; font-weight: 500; font-size: 1.06rem; }
.ask-head .ask-ttl span { display: block; font-size: 11.5px; opacity: .85; margin-top: 1px; }
.ask-close {
  flex: none; border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; font-size: 18px; line-height: 1; transition: background .15s ease;
}
.ask-close:hover { background: rgba(255,255,255,.3); }

/* message log */
.ask-log { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface, #fbfcfb); }
.ask-msg { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; animation: ask-msg-in .2s ease; }
@keyframes ask-msg-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ask-msg.bot { align-self: flex-start; background: #fff; border: 1px solid rgba(11,31,23,.08); color: var(--ink, #16241d); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(11,31,23,.04); }
.ask-msg.me  { align-self: flex-end; background: linear-gradient(135deg, var(--ask-accent), var(--ask-accent-2)); color: #fff; border-bottom-right-radius: 5px; }
.ask-msg.bot a { color: var(--ask-accent); text-decoration: underline; text-underline-offset: 2px; }
.ask-msg.bot strong { font-weight: 650; }

/* source chips */
.ask-src { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 2px; }
.ask-src a { font-size: 11px; color: var(--ask-accent); background: var(--ask-wash); border: 1px solid var(--ask-line); border-radius: 99px; padding: 3px 10px; text-decoration: none; }
.ask-src a:hover { background: color-mix(in srgb, var(--teal, #004b3b) 16%, #ffffff); }

/* suggested-question chips (under the intro) */
.ask-sugs { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.ask-sug {
  font: 500 12.5px/1 inherit; color: var(--ask-accent); cursor: pointer;
  background: #fff; border: 1px solid var(--ask-line); border-radius: 99px; padding: 8px 12px;
  transition: background .15s ease, border-color .15s ease;
}
.ask-sug:hover { background: var(--ask-wash); border-color: var(--ask-accent); }

/* animated typing indicator */
.ask-msg.typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px 14px; }
.ask-msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute, #8a978f); display: inline-block; animation: ask-dot 1.2s infinite ease-in-out; }
.ask-msg.typing i:nth-child(2) { animation-delay: .2s; }
.ask-msg.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes ask-dot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* input row */
.ask-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(11,31,23,.07); background: #fff; align-items: center; }
.ask-form input {
  flex: 1; min-width: 0; box-sizing: border-box; padding: 11px 15px; border: 1px solid rgba(11,31,23,.14);
  border-radius: 99px; font: 400 14px/1.2 inherit; color: var(--ink, #16241d); background: var(--surface, #fbfcfb);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ask-form input:focus { outline: none; border-color: var(--ask-accent); background: #fff; box-shadow: 0 0 0 3px var(--ask-wash); }
.ask-send { flex: none; border: 0; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--ask-accent), var(--ask-accent-2)); color: #fff; display: grid; place-items: center; transition: transform .15s ease, opacity .15s ease; }
.ask-send:hover { transform: scale(1.06); }
.ask-send:disabled { opacity: .45; cursor: default; transform: none; }

.ask-foot { padding: 9px 14px 12px; font-size: 10.5px; color: var(--ink-mute, #8a978f); line-height: 1.4; background: #fff; text-align: center; }
.ask-foot a { color: var(--ask-accent); }

@media (max-width: 480px) {
  #atb-ask { right: 14px; bottom: var(--atb-fab-bottom, 14px); }
  .ask-panel { width: calc(100vw - 24px); height: 60vh; max-height: calc(100vh - 150px); }
  /* 16px stops iOS Safari auto-zooming when the field is focused. */
  .ask-form input { font-size: 16px; }
}