/* ============================================================================
 * site-modes.css — interactive "Trusted artifact" surface for the Platform
 * section. A four-mode selector (Ask · Deep Search · Agents · BI) that swaps
 * the demo below — ported from the Nama keynote's SlideCaixaModos, kept in the
 * site's flat-white system. Brand mode icons come from nama-keynote.
 * ========================================================================== */

.demo.moded { display: flex; flex-direction: column; }
.demo.moded .bar .ttl { font-size: 11.5px; }

/* ── mode selector (2×2 grid, like the reference) ── */
.md-modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 16px 16px 4px;
}
.md-mode {
  display: flex; align-items: center; gap: 10px;
  background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 10px;
  padding: 11px 14px; cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.md-mode:hover { background: #F7F8FB; }
.md-mode .mi { width: 18px; height: 18px; color: #71717A; flex: none; display: block; }
.md-mode .ml { font-size: 14px; font-weight: 600; color: #18181B; }
.md-mode[aria-selected="true"] {
  border-color: #2684FF; background: #F3F8FF;
  box-shadow: 0 1px 2px rgba(38,132,255,0.12);
}
.md-mode[aria-selected="true"] .mi { color: #2684FF; }
.md-mode[aria-selected="true"] .ml { color: #006ADF; }

/* ── thread area ── */
.md-thread {
  padding: 12px 16px 4px; display: flex; flex-direction: column; gap: 12px;
  min-height: 318px;
}

/* NOTE: every content class below is md-prefixed on purpose — the dark hero's
   chat pane defines global .ubub / .ans / .srcs / .src / .cite-pill / .sub
   styles in Nama Site.html, and sharing names bled styles both ways. */

/* staggered reveal — base state is VISIBLE; entrance is a pure-CSS animation
   enhancement, so content is never gated behind a JS-triggered transition
   (which throttled/offscreen tabs can leave stuck at opacity 0). */
.mdrow { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .md-thread.anim .mdrow { animation: mdIn .4s cubic-bezier(.22,.7,.3,1) backwards; }
}
@keyframes mdIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

/* mode head row (icon + title + badge) */
.md-card { border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,0.04); overflow: hidden; }
.md-chead { display: flex; align-items: center; gap: 9px; padding: 11px 12px; }
.md-chead .ci { width: 16px; height: 16px; color: #2684FF; flex: none; display: block; }
.md-chead .ct { font-size: 13.5px; font-weight: 600; color: #334155; }
.md-chead .cb {
  margin-left: auto; font-size: 11px; font-weight: 600; color: #6B7280;
  background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.md-cbody { padding: 0 12px 11px; }

/* decompose sub-queries (chain-of-thought lite) */
.md-step { position: relative; padding-left: 18px; }
.md-step::before { content: ''; position: absolute; left: 6px; top: 2px; bottom: 2px; width: 1px; background: #E2E8F0; }
.md-step-lab { font-size: 12.5px; font-weight: 600; color: #475569; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.md-step-lab svg { width: 13px; height: 13px; color: #94A3B8; }
.md-step-lab .md-sub { color: #94A3B8; font-weight: 400; }
.md-q {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0;
  background: #F4F6FA; border: 1px solid #ECEFF4; border-radius: 999px; padding: 4px 11px;
  font-size: 12px; color: #475569; max-width: 100%;
}
.md-q svg { width: 12px; height: 12px; color: #94A3B8; flex: none; }
.md-q .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* agent draft artifact */
.md-memo { border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; }
.md-memo-h { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-bottom: 1px solid #EEF0F4; background: #FBFCFE; }
.md-memo-h svg { width: 13px; height: 13px; color: #2684FF; flex: none; }
.md-memo-h b { font-size: 12px; color: #0B1220; }
.md-memo-h .ok { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #166534; background: #DCFCE7; border-radius: 999px; padding: 2px 7px; }
.md-memo-h .ok svg { width: 8px; height: 8px; color: #166534; }
.md-memo-b { padding: 10px 12px; font-size: 12.5px; line-height: 1.6; color: #1F2937; }
.md-memo-b .lbl { font-weight: 700; color: #0B1220; }

/* BI bar chart */
.md-bi { display: flex; flex-direction: column; gap: 7px; }
.md-birow { display: flex; align-items: center; gap: 10px; }
.md-birow .lab { font-size: 11.5px; color: #64748B; width: 96px; flex: none; text-align: right; }
.md-bitrack { flex: 1; height: 18px; border-radius: 5px; background: #EEF1F6; overflow: hidden; }
.md-bifill { display: block; height: 100%; border-radius: 5px; background: #2684FF; width: 0; transition: width .7s cubic-bezier(.22,.7,.3,1); }
.md-birow.lo .md-bifill { background: #9FC4FF; }
.md-birow .pct { font-size: 12px; font-weight: 700; color: #0B1220; width: 34px; }

/* ── user prompt bubble ── */
.md-ubub {
  align-self: flex-end; max-width: 86%;
  background: #2684FF; color: #fff;
  font-size: 13px; line-height: 1.5; font-weight: 500;
  padding: 9px 13px; border-radius: 16px 16px 4px 16px;
  box-shadow: 0 1px 2px rgba(38,132,255,0.22);
}

/* ── final answer paragraph ── */
.md-ans {
  font-size: 13px; line-height: 1.62; color: #1F2937;
  text-wrap: pretty;
}
.md-ans b { font-weight: 700; color: #0B1220; }

/* ── inline citation pill ── */
.md-cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px; margin: 0 1px;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #0050B0; background: #EFF6FF; border: 1px solid #D4E6FF;
  border-radius: 999px; vertical-align: 1px;
}

/* ── sources footer (bottom bookend of a run) ── */
.md-srcs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  border-top: 1px solid #F1F1F3; padding-top: 12px;
}
.md-srcs-h { display: flex; align-items: center; gap: 7px; flex-basis: 100%; }
.md-srcs-h .ic { display: inline-flex; color: #2684FF; flex: none; }
.md-srcs-h .ic svg { width: 14px; height: 14px; display: block; }
.md-srcs-h b { font-size: 12.5px; font-weight: 600; color: #334155; }
.md-srcs-h .cnt { margin-left: auto; font-size: 11px; color: #9CA1AB; }
.md-src {
  display: inline-flex; align-items: center; gap: 6px;
  background: #F7F8FA; border: 1px solid #ECEEF2; border-radius: 8px;
  padding: 5px 10px; font-size: 11.5px; color: #475569; max-width: 100%;
}
.md-src .ic { display: inline-flex; color: #94A3B8; flex: none; }
.md-src .ic svg { width: 13px; height: 13px; display: block; }
.md-src .n { font-weight: 700; color: #2684FF; flex: none; }
.md-src .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── answer pipeline pills (bottom bookend) ── */
.md-pipe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: auto; padding: 14px 16px; border-top: 1px solid #EEF0F4; background: #FBFCFE;
}
.md-pipe .pp {
  font-size: 12px; font-weight: 600; color: #5B6B86;
  background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 999px; padding: 4px 12px;
}
.md-pipe .pp.on { color: #006ADF; background: #EFF6FF; border-color: #C7DEFF; }
.md-pipe .pp-cap { margin-left: auto; font-size: 11.5px; color: #9CA1AB; }

@media (max-width: 980px) {
  .md-thread { min-height: 0; }
  .md-pipe .pp-cap { display: none; }
}