/* ============================================================
   VIDYA · Brain demo vignette (shared: home feature band + /brain)
   A session replay on a dark surface: grounded, cited answer ->
   honest refusal -> professor-queue ping. Markup lives in the
   page (SEO + reduced-motion robustness); assets/brain-demo.js
   orchestrates the .in steps and the loop.
   Motion: entries 500ms ease-out-quart on transform/opacity only;
   refusal is deliberately calm (trust moment, no bounce).
   ============================================================ */

.bd{
  position:relative;max-width:500px;width:100%;
  background:rgba(15,22,21,.72);
  border:1px solid rgba(199,207,205,.14);
  border-radius:18px;padding:22px 22px 18px;
  backdrop-filter:saturate(130%) blur(12px);-webkit-backdrop-filter:saturate(130%) blur(12px);
  box-shadow:0 1px 1px rgba(0,0,0,.3),0 24px 60px -18px rgba(0,0,0,.55),0 18px 48px -20px rgba(55,190,176,.18),inset 0 1px 0 rgba(255,255,255,.06);
}
.bd-head{
  font-size:11px;font-weight:500;letter-spacing:.02em;
  color:var(--tide-300);margin-bottom:16px;font-feature-settings:"tnum" on;
}
.bd-feed{display:flex;flex-direction:column;gap:12px;min-height:328px}

/* messages */
.bd-msg{max-width:88%;border-radius:14px;padding:11px 14px;font-size:12.5px;line-height:1.55}
.bd-me{align-self:flex-end;background:rgba(199,207,205,.12);color:#E3E9E7;border-bottom-right-radius:5px}
.bd-vy{align-self:flex-start;background:rgba(55,190,176,.14);border:1px solid rgba(55,190,176,.22);color:#E3E9E7;border-bottom-left-radius:5px}
.bd-tag{display:block;font-size:10px;font-weight:600;font-style:italic;letter-spacing:.01em;color:var(--tide-300);margin-bottom:6px}

/* citation chips — the receipts under a grounded answer */
.bd-cites{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bd-cite{
  display:inline-flex;align-items:center;
  font-size:9.5px;font-weight:600;letter-spacing:.02em;
  color:var(--tide-100);background:rgba(12,97,112,.45);border:1px solid rgba(164,229,224,.28);
  border-radius:999px;padding:4px 10px;font-feature-settings:"tnum" on;white-space:nowrap;
}

/* the honest refusal — same bubble grammar as the answer, warm wash */
.bd-refusal{
  align-self:flex-start;max-width:92%;
  background:linear-gradient(180deg,rgba(217,138,52,.11),rgba(217,138,52,.045));
  border:1px solid rgba(217,138,52,.26);
  border-radius:14px;border-bottom-left-radius:5px;
  padding:11px 14px;font-size:12.5px;line-height:1.55;color:#EFE6DA;
}
.bd-ref-label{display:block;font-size:11px;font-weight:600;font-style:italic;letter-spacing:.01em;color:#E9A759;margin-bottom:4px}

/* queue / confusion-map ping */
.bd-ping{
  align-self:center;display:inline-flex;align-items:center;margin-top:2px;
  font-size:10px;font-weight:500;letter-spacing:.02em;
  color:#98A2A0;background:rgba(199,207,205,.08);border:1px solid rgba(199,207,205,.14);
  border-radius:999px;padding:6px 14px;font-feature-settings:"tnum" on;text-align:center;
}

/* typing indicator between beats */
.bd-typing{align-self:flex-start;display:none;gap:4px;padding:10px 14px;background:rgba(55,190,176,.10);border-radius:14px;border-bottom-left-radius:5px}
.bd-typing.on{display:inline-flex}
.bd-typing i{width:5px;height:5px;border-radius:50%;background:var(--tide-300);opacity:.35;animation:bd-blink 1.1s linear infinite}
.bd-typing i:nth-child(2){animation-delay:.18s}
.bd-typing i:nth-child(3){animation-delay:.36s}
@keyframes bd-blink{0%,60%,100%{opacity:.35}30%{opacity:1}}

/* step choreography: content is VISIBLE by default (no-JS / script-failure
   safe). The script adds .bd-live before animating, which arms the hidden
   state; steps then enter via .in (500ms ease-out-quart, transform+opacity). */
.bd.bd-live [data-bd-step]{opacity:0;transform:translateY(10px)}
.bd.bd-live [data-bd-step].in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.165,.84,.44,1),transform .5s cubic-bezier(.165,.84,.44,1)}
/* loop reset: fade out in place (no transform snap), re-offset while invisible */
.bd.bd-live .bd-feed.bd-resetting [data-bd-step]{opacity:0;transform:none;transition:opacity .35s ease}

/* static fallback: everything visible, no loop */
.bd.bd-static [data-bd-step]{opacity:1;transform:none;transition:none}
.bd.bd-static .bd-typing{display:none}

@media (prefers-reduced-motion:reduce){
  .bd [data-bd-step],.bd.bd-live [data-bd-step]{opacity:1;transform:none;transition:none}
  .bd-typing{display:none!important}
  .bd-typing i{animation:none}
}
@media (max-width:520px){
  .bd{padding:16px 14px 13px}
  .bd-feed{min-height:0}
  .bd-msg,.bd-refusal{font-size:12px}
}