/* driftless BA Agent — animated shaping simulation (DW-018)
   Lightweight, abstract: five alternating chat bubbles (two pairs + a user
   message) → 14 tool-call rows → a final agent bubble. Fixed height, internal scroll, autoplays and loops.
   No real text content — the visual rhythm communicates the back-and-forth. */

.ba-sim {
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  box-shadow: 0 12px 32px -20px rgba(10, 14, 22, 0.35);
}

.ba-sim-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-body);
  letter-spacing: 0.01em;
  flex: 0 0 auto;
}
.ba-sim-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px var(--green-50);
  flex: 0 0 auto;
}

.ba-sim-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* ac-15: hide scrollbar, keep scroll */
  -ms-overflow-style: none;
}
.ba-sim-body::-webkit-scrollbar { display: none; } /* ac-15 */

/* Fixed-height variants (ac-10): the body scrolls internally, the page never
   shifts. --hero is the BA page hero visual; --showcase is a standalone
   full-width block; --fill stretches to a bounded-height media container
   (.product-node-media--sim on the home page). A definite height is required
   so the flex body is bounded and scrolls instead of growing the card. */
.ba-sim--fill { height: 100%; }
.ba-sim--hero { height: 460px; }
.ba-sim--showcase { height: 420px; margin-bottom: 20px; }

/* Chat bubbles (ac-6): blue on the right (user), white on the left (agent). */
.ba-bubble {
  width: 80%; /* ac-16: bubbles take up 80% of horizontal space */
  border-radius: 14px;
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  animation: ba-pop 0.32s ease forwards;
}
.ba-bubble--user {
  align-self: flex-end;
  background: var(--blue-500);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ba-bubble--agent {
  align-self: flex-start;
  background: var(--paper);
  border: 1px solid var(--border-subtle);
  color: var(--text-body);
  border-bottom-left-radius: 4px;
}
/* Abstract text bars — suggest a message without any real content. */
.ba-bubble-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--ink-200);
  flex: 0 0 auto;
}
.ba-bubble--user .ba-bubble-bar { background: rgba(255, 255, 255, 0.5); }
.ba-bubble-bar--w90 { width: 90%; }
.ba-bubble-bar--w70 { width: 70%; }
.ba-bubble-bar--w50 { width: 50%; }
@keyframes ba-pop { to { opacity: 1; transform: translateY(0); } }

/* Tool-call rows (ac-7): colored verb badge + display name + check + <1s.
   Verb colors mirror the live driftless app (get=blue, create=green,
   update=amber). */
.ba-tools {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-self: flex-start;
  width: 100%;
  max-width: 94%;
}
.ba-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-body);
  opacity: 0;
  transform: translateY(4px);
  animation: ba-pop 0.28s ease forwards;
}
.ba-tool-verb {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.4;
  flex: 0 0 auto;
}
.ba-tool-verb--get { color: var(--blue-600); background: var(--blue-50); }
.ba-tool-verb--create { color: var(--green-700); background: var(--green-50); }
.ba-tool-verb--update { color: var(--amber-700); background: var(--amber-50); }
.ba-tool-name { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.ba-tool-check { color: var(--green-500); flex: 0 0 auto; font-weight: 700; }
.ba-tool-time {
  font-size: 11px;
  color: var(--text-subtle);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* Two-up screenshot grid for the BA page screenshots section. */
.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* Media fill helpers: let a simulation / terminal / image fill a product-node
   media box edge to edge. --fill keeps the 16/10 aspect (screenshots); --sim
   uses a FIXED height so a simulation/terminal body scrolls internally instead
   of growing the card (ac-10) — aspect-ratio alone is not a definite height
   for percentage children once content pushes. */
.product-node-media--fill {
  align-items: stretch;
  background: transparent;
  border-bottom: 0;
}
.product-node-media--fill > * { width: 100%; }
.product-node-media--sim {
  aspect-ratio: auto;
  height: 240px;
  align-items: stretch;
  background: transparent;
  border-bottom: 0;
}
.product-node-media--sim > * { width: 100%; height: 100%; }
.product-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive (ac-11): scales without horizontal scroll at 390px. */
@media (max-width: 768px) {
  .ba-sim--hero { height: 380px; }
  .ba-sim--showcase { height: 360px; }
  .product-node-media--sim { height: 220px; }
  .ba-sim-body { padding: 12px 11px; gap: 8px; }
  .ba-bubble { max-width: 84%; }
  .ba-tool { font-size: 12px; }
  .screenshots-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .ba-sim--hero { height: 320px; }
  .ba-sim--showcase { height: 340px; }
  .product-node-media--sim { height: 200px; }
  .ba-bubble { max-width: 88%; border-radius: 12px; padding: 9px 11px; }
  .ba-bubble-bar { height: 6px; }
  .ba-tool { padding: 5px 9px; gap: 7px; }
  .ba-tool-verb { font-size: 10px; padding: 1px 5px; }
}