/* ============================================================================
   marketing-assistant.css — the embedded "Ask the archive" hero widget.

   A fluid, in-flow chat panel that replaces the static proof-panel mockup in
   the marketing hero's right column. One open assistant: question types →
   answer streams with citations → source cards reveal → cite↔card
   cross-highlight → loop (homepage rotates through civil/church/research).

   - Built on the site's own tokens + fonts (Source Serif 4 / Inter /
     JetBrains Mono), so it themes light/dark with the page automatically.
   - Surfaces use the in-scope `.rv3` tokens (--hair, --muted-fg, --foreground,
     --card, --border, --muted). The widget accent and the 3-hue SOURCE palette
     live in marketing.css; only the light-mode source tints are overridden
     here. (This line used to claim the site --accent "flips cool in dark" —
     untrue since the warm espresso theme landed; see marketing.css.)
   - Progressive enhancement: without JS (or with prefers-reduced-motion) the
     server-rendered, fully-revealed answer + sources stay visible — the JS
     adds `.mkt-js` and only then hides units to perform the animation.
   ========================================================================== */

.marketing .mkt-assist {
  /* --mkt-acc, --mkt-acc-fg, --s*-fg, --s*-line, --mkt-soft and --mkt-tint are
     inherited from the shared widget-token block in marketing.css (which also
     documents why --mkt-acc is NOT var(--accent)). Only the light-mode source
     TINTS are overridden here — lighter than search's (0.12/0.12/0.14) because
     here they wash a citation chip rather than fill a <mark> highlight. */
  --s1-bg: rgba(181, 83, 43, 0.10);
  --s2-bg: rgba(63, 125, 170, 0.10);
  --s3-bg: rgba(160, 125, 34, 0.12);
  /* derived — stay local so they resolve against this widget's context */
  --mkt-soft: color-mix(in oklch, var(--foreground) 80%, transparent);
  --mkt-tint: color-mix(in oklch, var(--muted) 45%, transparent);
  width: 100%;
}
/* Dark tints MUST be declared on the widget too — see the note in
   marketing-search.css: an inherited value always loses to one declared on
   the element itself, so the light tints above would otherwise win in dark. */
html.dark .marketing .mkt-assist {
  --s1-bg: rgba(194, 105, 63, 0.16);
  --s2-bg: rgba(143, 179, 196, 0.16);
  --s3-bg: rgba(216, 182, 111, 0.16);
}

/* ── panel ──────────────────────────────────────────────────────────────── */
.marketing .mkt-assist .mkt-chat {
  /* viewport-adaptive so the panel never hugs the bottom on shorter desktops;
     capped so it doesn't get unwieldy on tall monitors */
  height: clamp(440px, calc(100vh - 250px), 580px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 26px 52px -34px rgba(38, 28, 20, 0.28);
}
/* dark mode: a soft dark shadow rather than a foreground-tinted halo */
html.dark .marketing .mkt-assist .mkt-chat { box-shadow: 0 16px 38px -30px rgba(0, 0, 0, 0.4); }

.marketing .mkt-assist .mkt-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--hair);
}
.marketing .mkt-assist .mkt-t {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--foreground);
}
.marketing .mkt-assist .mkt-s {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-top: 5px;
}
.marketing .mkt-assist .mkt-spark {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mkt-acc);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--mkt-acc) 22%, transparent);
}

/* ── messages ───────────────────────────────────────────────────────────── */
.marketing .mkt-assist .mkt-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  padding: 18px 18px 8px;
}
.marketing .mkt-assist .mkt-msgs::-webkit-scrollbar { width: 0; height: 0; display: none; }

.marketing .mkt-assist .mkt-greet {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-foreground);
  padding: 12px 14px;
  background: var(--mkt-tint);
  border: 1px solid var(--hair);
  margin-bottom: 16px;
}

.marketing .mkt-assist .mkt-thread[hidden] { display: none; }

.marketing .mkt-assist .mkt-user { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.marketing .mkt-assist .mkt-user .bubble {
  max-width: 88%;
  background: var(--mkt-acc);
  color: var(--mkt-acc-fg);
  padding: 12px 16px;
  border-radius: 14px 14px 4px 14px;
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.42;
  font-weight: 500;
}

.marketing .mkt-assist .mkt-thinking { display: none; align-items: center; gap: 5px; padding: 2px 2px 6px; }
.marketing .mkt-assist .mkt-thinking i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted-foreground);
  animation: mktThink 1.1s infinite ease-in-out;
}
.marketing .mkt-assist .mkt-thinking i:nth-child(2) { animation-delay: 0.15s; }
.marketing .mkt-assist .mkt-thinking i:nth-child(3) { animation-delay: 0.30s; }
@keyframes mktThink { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── answer ─────────────────────────────────────────────────────────────── */
.marketing .mkt-assist .mkt-answer { font-family: var(--font-serif); }
.marketing .mkt-assist .mkt-answer p {
  margin: 0 0 11px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--foreground);
  text-wrap: pretty;
}
.marketing .mkt-assist .mkt-answer p:first-child { color: var(--mkt-soft); }
.marketing .mkt-assist .mkt-answer .mkt-h {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 18px 0 8px;
}
.marketing .mkt-assist .mkt-answer strong,
.marketing .mkt-assist .mkt-answer .word.b { font-weight: 600; color: color-mix(in oklch, var(--foreground) 90%, var(--mkt-acc)); }

.marketing .mkt-assist sup.cite {
  font-family: var(--font-serif);
  font-size: 0.72em;
  line-height: 0;
  font-feature-settings: "sups";
  padding: 0 1px;
  margin: 0 0.3em 0 0.12em;
  border-bottom: 1.4px solid var(--s1-line);
  vertical-align: super;
  border-radius: 2px 2px 0 0;
  transition: background 0.2s, color 0.2s;
}
.marketing .mkt-assist sup.cite[data-accent="1"] { color: var(--s1-fg); border-color: var(--s1-line); }
.marketing .mkt-assist sup.cite[data-accent="2"] { color: var(--s2-fg); border-color: var(--s2-line); }
.marketing .mkt-assist sup.cite[data-accent="3"] { color: var(--s3-fg); border-color: var(--s3-line); }
.marketing .mkt-assist sup.cite[data-accent="1"].lit { background: var(--s1-bg); }
.marketing .mkt-assist sup.cite[data-accent="2"].lit { background: var(--s2-bg); }
.marketing .mkt-assist sup.cite[data-accent="3"].lit { background: var(--s3-bg); }

/* ── sources ────────────────────────────────────────────────────────────── */
.marketing .mkt-assist .mkt-sources-label {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 18px 0 12px;
}
.marketing .mkt-assist .mkt-sources-label .ln { flex: 1; height: 1px; background: var(--hair); }
.marketing .mkt-assist .mkt-sources-label .trace { flex-shrink: 0; }

.marketing .mkt-assist .mkt-card {
  display: grid;
  grid-template-columns: 46px 1fr;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.marketing .mkt-assist .mkt-card.lit { background: var(--mkt-tint); }
.marketing .mkt-assist .mkt-card[data-accent="1"].lit { border-color: var(--s1-line); }
.marketing .mkt-assist .mkt-card[data-accent="2"].lit { border-color: var(--s2-line); }
.marketing .mkt-assist .mkt-card[data-accent="3"].lit { border-color: var(--s3-line); }

.marketing .mkt-assist .mkt-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-right: 1px solid var(--border);
}
.marketing .mkt-assist .mkt-card[data-accent="1"] .mkt-spine { background: var(--s1-bg); color: var(--s1-fg); }
.marketing .mkt-assist .mkt-card[data-accent="2"] .mkt-spine { background: var(--s2-bg); color: var(--s2-fg); }
.marketing .mkt-assist .mkt-card[data-accent="3"] .mkt-spine { background: var(--s3-bg); color: var(--s3-fg); }
.marketing .mkt-assist .mkt-num {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  line-height: 1;
}
.marketing .mkt-assist .mkt-ic svg { width: 16px; height: 16px; display: block; }
.marketing .mkt-assist .mkt-vlabel {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.marketing .mkt-assist .mkt-cbody { padding: 11px 13px 12px; min-width: 0; }
.marketing .mkt-assist .mkt-cmeta {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-sans);
  font-size: 11px; color: var(--muted-foreground); letter-spacing: 0.02em; margin-bottom: 3px;
}
.marketing .mkt-assist .mkt-cmeta .pub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marketing .mkt-assist .mkt-cmeta .date { flex-shrink: 0; font-family: var(--font-mono); font-size: 10.5px; }
.marketing .mkt-assist .mkt-ctitle {
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--foreground);
  letter-spacing: -0.005em; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.marketing .mkt-assist .mkt-cexcerpt {
  font-family: var(--font-sans);
  font-size: 12.5px; line-height: 1.45; color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.marketing .mkt-assist .mkt-cbyline {
  margin-top: 8px; display: flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 10.5px; color: var(--muted-foreground);
}
.marketing .mkt-assist .mkt-cbyline .author { font-family: var(--font-mono); font-weight: 500; }
.marketing .mkt-assist .mkt-card[data-accent="1"] .mkt-cbyline .author { color: var(--s1-fg); }
.marketing .mkt-assist .mkt-card[data-accent="2"] .mkt-cbyline .author { color: var(--s2-fg); }
.marketing .mkt-assist .mkt-card[data-accent="3"] .mkt-cbyline .author { color: var(--s3-fg); }

/* ── input ──────────────────────────────────────────────────────────────── */
.marketing .mkt-assist .mkt-input { flex-shrink: 0; padding: 13px 14px 14px; border-top: 1px solid var(--hair); }
.marketing .mkt-assist .mkt-input-shell {
  display: flex; align-items: flex-end; gap: 9px;
  background: var(--mkt-tint);
  border: 1px solid var(--border);
  padding: 9px 9px 9px 15px;
}
.marketing .mkt-assist .mkt-fake {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 15.5px; color: var(--foreground); line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; max-height: 150px; overflow: hidden;
}
.marketing .mkt-assist .mkt-ph { color: var(--muted-foreground); }
.marketing .mkt-assist .mkt-caret {
  display: inline-block; width: 1.5px; height: 18px; background: var(--mkt-acc);
  margin-left: 1px; vertical-align: -3px; opacity: 0;
}
.marketing .mkt-assist .mkt-fake.typing .mkt-caret { animation: mktBlink 1s steps(1) infinite; }
@keyframes mktBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.marketing .mkt-assist .mkt-send {
  width: 34px; height: 34px; border: none; background: var(--mkt-acc); color: var(--mkt-acc-fg);
  cursor: default; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.marketing .mkt-assist .mkt-send svg { display: block; }

/* ── animated states — only applied once JS adds `.mkt-js` ──────────────────
   Without `.mkt-js` (no JS) every unit stays visible: the server-rendered,
   fully-cited answer IS the static fallback. */
.marketing .mkt-assist.mkt-js .mkt-thinking { display: none; }
.marketing .mkt-assist.mkt-js .mkt-thinking.show { display: flex; }
.marketing .mkt-assist.mkt-js .word { display: none; }
.marketing .mkt-assist.mkt-js .word.show { display: inline; animation: mktUnitIn 0.2s ease both; }
.marketing .mkt-assist.mkt-js .mkt-answer .mkt-h { display: none; }
.marketing .mkt-assist.mkt-js .mkt-answer .mkt-h.show { display: block; animation: mktUnitIn 0.26s ease both; }
.marketing .mkt-assist.mkt-js sup.cite { display: none; }
.marketing .mkt-assist.mkt-js sup.cite.show { display: inline; animation: mktCitePop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.marketing .mkt-assist.mkt-js .mkt-sources-label { display: none; }
.marketing .mkt-assist.mkt-js .mkt-sources-label.show { display: flex; }
.marketing .mkt-assist.mkt-js .mkt-card { display: none; }
.marketing .mkt-assist.mkt-js .mkt-card.show { display: grid; animation: mktCardIn 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.marketing .mkt-assist.mkt-js .mkt-user { display: none; }
.marketing .mkt-assist.mkt-js .mkt-user.show { display: flex; }
.marketing .mkt-assist.mkt-js .mkt-user.show .bubble { animation: mktBubbleIn 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes mktUnitIn { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: blur(0); } }
@keyframes mktCitePop { from { opacity: 0; transform: translateY(3px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes mktCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mktBubbleIn { from { opacity: 0; transform: translateY(7px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ── responsive — reuse the hero's own breakpoints ──────────────────────────
   At ≤1080px the hero stacks (col-right goes full width below the headline);
   give the panel a touch more height. At ≤680px tighten paddings + step the
   Q&A down ~1px so it stays comfortable on phones. */
@media (max-width: 1080px) {
  .marketing .mkt-assist .mkt-chat { height: 560px; }
}
@media (max-width: 680px) {
  .marketing .mkt-assist .mkt-chat { height: 520px; }
  .marketing .mkt-assist .mkt-msgs { padding: 16px 14px 6px; }
  .marketing .mkt-assist .mkt-user .bubble,
  .marketing .mkt-assist .mkt-answer p { font-size: 15.5px; }
  .marketing .mkt-assist .mkt-t { font-size: 18px; }
  .marketing .mkt-assist .mkt-card { grid-template-columns: 40px 1fr; }
  .marketing .mkt-assist .mkt-cexcerpt { -webkit-line-clamp: 3; }
}

/* ── reduced motion: keep the fully-revealed final frame, no animation ────── */
@media (prefers-reduced-motion: reduce) {
  /* let the single visible thread show in full, un-clipped, as a static proof */
  .marketing .mkt-assist .mkt-chat { height: auto; }
  .marketing .mkt-assist .mkt-msgs { overflow: visible; }
  .marketing .mkt-assist.mkt-js .word,
  .marketing .mkt-assist.mkt-js sup.cite { display: inline !important; opacity: 1 !important; animation: none !important; }
  .marketing .mkt-assist.mkt-js .mkt-answer .mkt-h { display: block !important; animation: none !important; }
  .marketing .mkt-assist.mkt-js .mkt-card { display: grid !important; opacity: 1 !important; transform: none !important; animation: none !important; }
  .marketing .mkt-assist.mkt-js .mkt-sources-label { display: flex !important; }
  .marketing .mkt-assist.mkt-js .mkt-user { display: flex !important; }
  .marketing .mkt-assist.mkt-js .mkt-user .bubble { animation: none !important; }
  .marketing .mkt-assist.mkt-js .mkt-thinking { display: none !important; }
  .marketing .mkt-assist .mkt-caret { display: none !important; }
}