/* ============================================================
   GENE HEW v5 — LIVE INSTRUMENTS
   Two builds that actually RUN on the page, not pictures of them:
   (1) .inst-rag   — in-browser BM25 retrieval over a real corpus
   (2) .inst-agent — looping replay of a captured multi-agent run
   Self-contained: no backend, no keys. Reuses v3/v4 tokens.
   ============================================================ */

.bld-featured {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(16px, 1.8vw, 24px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 880px) { .bld-featured { grid-template-columns: 1fr; } }

.instrument {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  height: 460px;
}
@media (max-width: 880px) { .instrument { height: 420px; } }
.inst-head {
  display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap;
  padding: 16px 18px 12px;
}
.inst-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600;
}
.inst-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); animation: nowPulse 2.4s ease infinite;
}
@media (prefers-reduced-motion: reduce) { .inst-eyebrow::before { animation: none; } }
.inst-title { font-family: var(--font-display); font-weight: 720; font-size: 1.15rem; letter-spacing: -0.015em; }
.inst-note { font-size: 13px; color: var(--ink-soft); flex-basis: 100%; line-height: 1.5; max-width: 54ch; }

/* ---------- (1) retrieval instrument — light ---------- */
.inst-rag { background: white; }
.inst-rag .inst-eyebrow { color: var(--green-deep); }
.inst-rag .inst-title { color: var(--ink); }

.rag-field {
  display: flex; align-items: center; gap: 10px; margin: 4px 18px 0;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--green-ghost); transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.rag-field:focus-within {
  border-color: color-mix(in oklab, var(--green), transparent 40%);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--green), transparent 86%);
}
.rag-field svg { width: 17px; height: 17px; stroke: var(--ink-soft); stroke-width: 2; fill: none; flex: 0 0 auto; }
.rag-field input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
}
.rag-field input::placeholder { color: var(--ink-soft); }

.rag-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 18px 4px; }
.rag-chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  transition: all 0.25s ease;
}
.rag-chip:hover { border-color: color-mix(in oklab, var(--green), transparent 45%); color: var(--green-deep); background: var(--green-ghost); }

.rag-results { list-style: none; margin: 6px 0 0; padding: 4px 10px 14px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden; }
.rag-result { padding: 10px 8px; border-radius: 9px; transition: background 0.2s ease; animation: ragIn 0.4s var(--ease-out) both; }
.rag-result:hover { background: var(--green-ghost); }
.rag-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.rag-src { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink); font-weight: 600; }
.rag-theme { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.rag-score { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.rag-score i { display: block; height: 4px; width: 42px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.rag-score i::after { content: ""; position: absolute; inset: 0; width: var(--w, 0%); background: var(--green); border-radius: 2px; }
.rag-score b { font-family: var(--font-mono); font-size: 10px; color: var(--green-deep); font-weight: 600; }
.rag-snip { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.rag-snip mark { background: color-mix(in oklab, var(--green), white 62%); color: var(--green-deep); padding: 0 2px; border-radius: 3px; font-weight: 600; }
.rag-empty { padding: 16px 18px; font-size: 13.5px; color: var(--ink-soft); }
@keyframes ragIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- (1b) chat mode: real grounded Q&A ---------- */
.rag-left {
  margin-left: auto; flex: 0 0 auto; align-self: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--green-deep);
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--green), white 80%);
  border: 1px solid color-mix(in oklab, var(--green), transparent 60%);
}
.inst-rag.is-chat .rag-results {
  overflow-y: auto; gap: 9px; padding: 10px 14px 14px;
  scroll-behavior: smooth;
}
.rag-msg { display: flex; animation: ragIn 0.4s var(--ease-out) both; }
.rag-msg.rag-q { justify-content: flex-end; }
.rag-msg.rag-a { justify-content: flex-start; }
.rag-bub {
  max-width: 86%; padding: 10px 13px; border-radius: 13px;
  font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.rag-q .rag-bub {
  background: var(--green); color: #fff;
  border-bottom-right-radius: 4px;
}
.rag-a .rag-bub {
  background: var(--green-ghost); color: var(--ink);
  border: 1px solid var(--line); border-bottom-left-radius: 4px;
}
.rag-note { color: var(--ink-soft); }
.rag-a .rag-bub mark { background: color-mix(in oklab, var(--green), white 62%); color: var(--green-deep); padding: 0 2px; border-radius: 3px; font-weight: 600; }
.rag-from {
  display: block; margin-top: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--green-deep);
}
/* citation chips under an answer: the real project(s) the answer points to */
.rag-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rag-cite {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--green-deep); line-height: 1.4;
  background: color-mix(in oklab, var(--green), white 80%);
  border: 1px solid color-mix(in oklab, var(--green), transparent 60%);
  border-radius: 999px; padding: 3px 9px; cursor: pointer;
  text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.rag-cite:hover { background: color-mix(in oklab, var(--green), white 66%); border-color: color-mix(in oklab, var(--green), transparent 30%); transform: translateY(-1px); }
/* brief highlight when a citation scrolls you to its build card */
.bld-flash { animation: bldFlash 1.5s ease; }
@keyframes bldFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  16% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--green), transparent 52%); }
}
@media (prefers-reduced-motion: reduce) { .bld-flash { animation: none; } }
.rag-typing .rag-bub { display: inline-flex; gap: 4px; padding: 12px 14px; }
.rag-typing i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklab, var(--green), transparent 30%); animation: ragDot 1.1s ease-in-out infinite; }
.rag-typing i:nth-child(2) { animation-delay: 0.18s; }
.rag-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes ragDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .rag-typing i { animation: none; } .inst-rag.is-chat .rag-results { scroll-behavior: auto; } }

/* ---------- (2) agent-run replay — dark terminal ---------- */
.inst-agent { background: var(--black); border-color: color-mix(in oklab, var(--green), transparent 70%); }
.inst-agent .inst-head { border-bottom: 1px solid color-mix(in oklab, white, transparent 90%); }
.inst-agent .inst-eyebrow { color: var(--green); }
.inst-agent .inst-title { color: #EAF3EE; }
.inst-agent .inst-note { color: color-mix(in oklab, #EAF3EE, transparent 38%); }

.term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-bottom: 1px solid color-mix(in oklab, white, transparent 92%); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in oklab, white, transparent 78%); }
.term-bar i:nth-child(1) { background: #ff5f57; } .term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: color-mix(in oklab, #EAF3EE, transparent 45%); }

.term-body {
  flex: 1; margin: 0; padding: 14px 16px 16px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  color: color-mix(in oklab, #EAF3EE, transparent 12%);
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--green), transparent 88%) 0%, transparent 60%),
    var(--black);
}
.term-body::-webkit-scrollbar { display: none; }
.term-line { display: block; white-space: pre-wrap; word-break: break-word; }
.term-line .t-time { color: color-mix(in oklab, #EAF3EE, transparent 62%); }
.term-line .t-role { font-weight: 600; }
.term-line[data-role="sys"]   .t-role { color: #8aa0ff; }
.term-line[data-role="research"] .t-role { color: #5fd0ff; }
.term-line[data-role="score"] .t-role { color: #febc2e; }
.term-line[data-role="reach"] .t-role { color: var(--green); }
.term-line[data-role="ok"]    { color: var(--green); }
.term-line[data-role="muted"] { color: color-mix(in oklab, #EAF3EE, transparent 52%); }
.term-caret { display: inline-block; width: 8px; height: 14px; vertical-align: -2px; background: var(--green); margin-left: 2px; animation: termCaret 1s steps(1) infinite; }
@keyframes termCaret { 50% { opacity: 0; } }
.term-status { padding: 8px 16px; border-top: 1px solid color-mix(in oklab, white, transparent 92%); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklab, #EAF3EE, transparent 50%); display: flex; align-items: center; gap: 8px; }
.term-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: nowPulse 2.4s ease infinite; }
@media (prefers-reduced-motion: reduce) { .term-caret, .term-status::before { animation: none; } }