/*
 * AI Studio Block — homepage prototype.
 * Mirrors the runflow-studio design system exactly:
 *   - Token palette (bg-0..3, ink-0..3, accent #FBBF24)
 *   - Outfit typography
 *   - Card + tab + version-thumb + sentinel + plan-bubble shapes
 *
 * Three-column layout: sample rail | center (canvas + version stripe) | panel.
 *
 * All styles live under .aisb-root so the block can drop into any
 * marketing page without leaking selectors.
 */

.aisb-root {
  /* === Token palette: copied verbatim from runflow-studio.css === */
  --rfs-bg-0: #0A0A0B;
  --rfs-bg-1: #18181B;
  --rfs-bg-2: #27272A;
  --rfs-bg-3: #3F3F46;
  --rfs-ink-0: #FAFAFA;
  --rfs-ink-1: #D4D4D8;
  --rfs-ink-2: #A1A1AA;
  --rfs-ink-3: #71717A;
  --rfs-accent: #FBBF24;
  --rfs-accent-dim: #F59E0B;
  --rfs-accent-soft: rgba(251,191,36,0.12);
  --rfs-success: #22C55E;
  --rfs-warn: #F59E0B;
  --rfs-danger:  #F87171;
  --rfs-radius:  12px;
  --rfs-radius-lg: 16px;
  --rfs-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.2);

  font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--rfs-ink-0);
  background: var(--rfs-bg-0);
  -webkit-font-smoothing: antialiased;
}

/* Page wrapper for the standalone preview. Marketing strips this when
   embedding the block on the homepage. */
body {
  margin: 0;
  padding: 0;
  background: var(--rfs-bg-0);
  font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #FAFAFA;
  -webkit-font-smoothing: antialiased;
}
.aisb-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 4rem 1.5rem;
}

* { box-sizing: border-box; }

/* ============ Block frame ============ */

.aisb-block {
  width: 100%;
  max-width: 1180px;
  background: var(--rfs-bg-1);
  border: 1px solid var(--rfs-bg-2);
  border-radius: var(--rfs-radius-lg);
  overflow: hidden;
  box-shadow: var(--rfs-shadow);
}

.aisb-header {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--rfs-bg-2);
}

.aisb-eyebrow {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rfs-ink-3);
}
.aisb-eyebrow .aisb-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--rfs-success);
  margin: 0 0.5rem;
  vertical-align: middle;
}

.aisb-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--rfs-ink-0);
}

/* ============ Studio: 3-column layout (rail | center | panel) ============ */

.aisb-studio {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.4fr) clamp(340px, 32%, 400px);
  background: var(--rfs-bg-0);
  min-height: 560px;
}

@media (max-width: 860px) {
  .aisb-studio {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "rail center"
      "rail panel";
  }
  .aisb-rail   { grid-area: rail; }
  .aisb-center { grid-area: center; }
  .aisb-panel  { grid-area: panel; }
}

/* ----- Left rail: sample asset picker (single column) ----- */

.aisb-rail {
  display: flex;
  flex-direction: column;
  background: var(--rfs-bg-1);
  border-right: 1px solid var(--rfs-bg-2);
  padding: 0.875rem 0.5rem;
  gap: 0.625rem;
  min-width: 0;
}
.aisb-rail-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rfs-ink-3);
  padding: 0 0.25rem;
}
.aisb-rail-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  padding: 0 0.125rem 0.25rem;
}

.aisb-sample {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: var(--rfs-bg-2);
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 120ms, transform 120ms;
}
.aisb-sample:hover {
  border-color: var(--rfs-bg-3);
  transform: translateY(-1px);
}
.aisb-sample.is-active {
  border-color: var(--rfs-accent);
}
.aisb-sample img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- Center: canvas + version stripe + sentinel ----- */

.aisb-center {
  display: flex;
  flex-direction: column;
  background: var(--rfs-bg-0);
  min-width: 0;
}

.aisb-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 0.75rem;
  gap: 0.75rem;
  min-height: 0;
}

.aisb-canvas-frame {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-conic-gradient(#1A1B20 0 25%, #15161A 0 50%) 0 0 / 24px 24px,
    var(--rfs-bg-1);
  border-radius: var(--rfs-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.aisb-canvas-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 320ms ease, filter 320ms ease;
}
.aisb-canvas-image.is-revealing {
  animation: aisb-reveal 480ms ease-out;
}
@keyframes aisb-reveal {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

.aisb-canvas-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(10, 10, 11, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.aisb-spinner {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(251, 191, 36, 0.25);
  border-top-color: var(--rfs-accent);
  animation: aisb-spin 0.85s linear infinite;
}
@keyframes aisb-spin { to { transform: rotate(360deg); } }

.aisb-overlay-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rfs-ink-0);
  letter-spacing: 0.01em;
  max-width: 70%;
  text-align: center;
  line-height: 1.4;
}

/* Result decorators (on top of the canvas image) */
.aisb-pin {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--rfs-accent);
  box-shadow:
    0 0 0 4px rgba(251, 191, 36, 0.28),
    0 0 0 10px rgba(251, 191, 36, 0.12);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.aisb-ratio-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px dashed var(--rfs-accent);
  background: rgba(251, 191, 36, 0.05);
  pointer-events: none;
  border-radius: 4px;
}
.aisb-bundle-grid {
  position: absolute;
  inset: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
}
.aisb-bundle-grid .bundle-cell {
  position: relative;
  background: var(--rfs-bg-1);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aisb-bundle-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aisb-bundle-grid .bundle-cell-label {
  position: absolute;
  bottom: 6px; left: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(10, 10, 11, 0.78);
  color: var(--rfs-ink-0);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Canvas meta row (under the frame) */
.aisb-canvas-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.25rem;
  flex-wrap: wrap;
}
.aisb-canvas-meta-label {
  font-size: 0.75rem;
  color: var(--rfs-ink-2);
  letter-spacing: 0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sentinel pill — positioned bottom-left INSIDE the canvas frame.
   Click to toggle the .aisb-sentinel-panel above it. Mirrors the
   studio's SentinelBadge component (rfs-sentinel-badge). */
.aisb-sentinel-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--rfs-bg-3);
  background: rgba(24, 24, 27, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--rfs-ink-1);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 160ms, color 160ms;
  z-index: 2;
}
.aisb-sentinel-badge:hover {
  border-color: var(--rfs-ink-3);
}
.aisb-sentinel-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--rfs-bg-3);
  flex-shrink: 0;
  transition: background 160ms;
}
.aisb-sentinel-tally {
  color: var(--rfs-ink-3);
  font-weight: 600;
  margin-left: 2px;
}
.aisb-sentinel-badge[data-state="running"] {
  border-color: var(--rfs-accent);
  color: var(--rfs-ink-0);
}
.aisb-sentinel-badge[data-state="running"] .aisb-sentinel-dot {
  background: var(--rfs-accent);
  animation: aisb-pulse 1.2s ease-in-out infinite;
}
.aisb-sentinel-badge[data-state="green"] { border-color: var(--rfs-success); color: var(--rfs-ink-0); }
.aisb-sentinel-badge[data-state="green"] .aisb-sentinel-dot { background: var(--rfs-success); }
.aisb-sentinel-badge[data-state="amber"] { border-color: var(--rfs-warn); color: var(--rfs-ink-0); }
.aisb-sentinel-badge[data-state="amber"] .aisb-sentinel-dot { background: var(--rfs-warn); }
.aisb-sentinel-badge[data-state="red"] { border-color: var(--rfs-danger); color: var(--rfs-ink-0); }
.aisb-sentinel-badge[data-state="red"] .aisb-sentinel-dot { background: var(--rfs-danger); }
@keyframes aisb-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.1); }
}

/* Sentinel detail panel — sits above the pill, opens on click */
.aisb-sentinel-panel {
  position: absolute;
  bottom: 52px;
  left: 12px;
  width: min(360px, calc(100% - 24px));
  background: rgba(24, 24, 27, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--rfs-bg-3);
  border-radius: 12px;
  box-shadow: var(--rfs-shadow);
  padding: 0.875rem;
  z-index: 3;
  font-family: inherit;
}
.aisb-sentinel-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rfs-bg-3);
}
.aisb-sentinel-panel-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--rfs-ink-0);
  letter-spacing: -0.01em;
}
.aisb-sentinel-panel-score {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rfs-accent);
}
.aisb-sentinel-judges {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.aisb-judge {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: var(--rfs-bg-1);
  border-radius: 8px;
  border-left: 3px solid var(--rfs-bg-3);
}
.aisb-judge.is-pass { border-left-color: var(--rfs-success); }
.aisb-judge.is-fail { border-left-color: var(--rfs-warn); }
.aisb-judge-icon {
  flex-shrink: 0;
  width: 14px; height: 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  margin-top: 1px;
}
.aisb-judge.is-pass .aisb-judge-icon {
  background: rgba(34, 197, 94, 0.18);
  color: var(--rfs-success);
}
.aisb-judge.is-fail .aisb-judge-icon {
  background: rgba(245, 158, 11, 0.18);
  color: var(--rfs-warn);
}
.aisb-judge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.aisb-judge-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rfs-ink-0);
  line-height: 1.3;
}
.aisb-judge-reason {
  font-size: 0.6875rem;
  color: var(--rfs-ink-2);
  line-height: 1.4;
}
.aisb-sentinel-panel-foot {
  margin: 0.625rem 0 0;
  font-size: 0.625rem;
  color: var(--rfs-ink-3);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* ----- Version stripe (mirrors runflow-studio's bottom version row) ----- */

.aisb-version-stripe {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--rfs-bg-2);
  background: var(--rfs-bg-0);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rfs-bg-2) transparent;
}
.aisb-version-stripe::-webkit-scrollbar { height: 6px; }
.aisb-version-stripe::-webkit-scrollbar-thumb {
  background: var(--rfs-bg-2);
  border-radius: 999px;
}
.aisb-version-stripe-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rfs-ink-3);
  flex-shrink: 0;
}
.aisb-version-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.aisb-version-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--rfs-bg-1);
  border: 2px solid var(--rfs-bg-3);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: border-color 160ms;
}
.aisb-version-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aisb-version-thumb.sentinel-pending {
  border-color: var(--rfs-accent);
  animation: aisb-border-pulse 1500ms ease-in-out infinite;
}
.aisb-version-thumb.sentinel-green { border-color: var(--rfs-success); }
.aisb-version-thumb.sentinel-amber { border-color: var(--rfs-warn); }
.aisb-version-thumb.sentinel-red   { border-color: var(--rfs-danger); }
.aisb-version-thumb.is-current {
  box-shadow: 0 0 0 2px var(--rfs-accent);
}
@keyframes aisb-border-pulse {
  0%, 100% { border-color: var(--rfs-accent); }
  50%      { border-color: rgba(251,191,36,0.4); }
}
.aisb-version-thumb-label {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent 0%, rgba(9,9,11,0.85) 100%);
  color: var(--rfs-ink-0);
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 6px 4px 3px;
  text-align: center;
  letter-spacing: 0.02em;
}
.aisb-version-thumb-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.aisb-version-thumb-spinner-ring {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: var(--rfs-accent);
  border-radius: 999px;
  animation: aisb-spin 800ms linear infinite;
}
.aisb-version-thumb.is-pending img { opacity: 0.4; }

/* ----- Right panel ----- */

.aisb-panel {
  display: flex;
  flex-direction: column;
  background: var(--rfs-bg-0);
  border-left: 1px solid var(--rfs-bg-2);
  min-width: 0;
}

.aisb-tabs {
  display: flex;
  border-bottom: 1px solid var(--rfs-bg-2);
  flex-shrink: 0;
}
.aisb-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: transparent;
  border: none;
  padding: 0.875rem 0.5rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rfs-ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}
.aisb-tab:hover { color: var(--rfs-ink-0); }
.aisb-tab.is-active {
  color: var(--rfs-ink-0);
  border-bottom-color: var(--rfs-accent);
}
.aisb-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px;
  padding: 0 5px;
  background: var(--rfs-bg-2);
  border-radius: 999px;
  font-size: 0.625rem;
  color: var(--rfs-ink-2);
}
.aisb-tab.is-active .aisb-tab-count {
  background: var(--rfs-accent-soft);
  color: var(--rfs-accent);
}
.aisb-tab-soon {
  display: inline-block;
  background: var(--rfs-accent-soft);
  color: var(--rfs-accent);
  font-size: 0.5625rem; font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.aisb-tab-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ----- Cards (mirrors .rfs-cards / .rfs-cards-group / .rfs-card) ----- */

.aisb-cards {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.875rem 0.875rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.aisb-cards-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.aisb-cards-group-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rfs-ink-3);
  padding: 0 0.125rem;
  margin-top: 0.125rem;
}

.aisb-card {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem;
  background: var(--rfs-bg-1);
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: background 120ms, border-color 120ms;
  width: 100%;
}
.aisb-card:hover { background: var(--rfs-bg-2); }
.aisb-card.is-selected { border-color: var(--rfs-accent); }

.aisb-card-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--rfs-bg-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--rfs-ink-1);
  flex-shrink: 0;
  margin-top: 1px;
}
.aisb-card-icon svg { display: block; }
.aisb-card.is-recommended .aisb-card-icon {
  background: var(--rfs-accent);
  color: #09090B;
}

.aisb-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Block-level so name + desc never collapse onto one line, even when
   the panel is narrow enough to wrap the desc. */
.aisb-card-name {
  display: block;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--rfs-ink-0);
  line-height: 1.25;
}
.aisb-card-desc {
  display: block;
  font-size: 0.6875rem;
  color: var(--rfs-ink-2);
  line-height: 1.45;
}

/* Options panel — appears between cards and apply when a workflow is
   selected. Mirrors the studio's StepParamsForm layout (label + input +
   optional help). For the homepage demo every input is disabled with
   the canonical demo value pre-filled, so users see the option shape
   without picking. */
.aisb-options {
  flex-shrink: 0;
  border-top: 1px solid var(--rfs-bg-2);
  background: var(--rfs-bg-1);
  padding: 0.875rem 0.875rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.aisb-options-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aisb-options-eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rfs-ink-3);
}
.aisb-options-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rfs-ink-0);
}
.aisb-options-body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.aisb-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}
.aisb-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rfs-ink-1);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.aisb-label-meta {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--rfs-ink-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.aisb-text,
.aisb-textarea,
.aisb-select {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.625rem;
  background: var(--rfs-bg-0);
  border: 1px solid var(--rfs-bg-3);
  border-radius: 8px;
  color: var(--rfs-ink-0);
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
}
.aisb-textarea { resize: none; min-height: 56px; }
.aisb-select { appearance: none; -webkit-appearance: none; cursor: not-allowed; }
.aisb-text:disabled,
.aisb-textarea:disabled,
.aisb-select:disabled {
  /* Style disabled controls so they read as "configured for the demo"
     rather than "broken". Background slightly darker, border softer,
     cursor not-allowed. The text itself stays at full opacity so the
     pre-filled value is legible. */
  background: rgba(24, 24, 27, 0.5);
  border-color: var(--rfs-bg-2);
  color: var(--rfs-ink-1);
  cursor: not-allowed;
}
.aisb-help {
  font-size: 0.625rem;
  color: var(--rfs-ink-3);
  line-height: 1.45;
}
/* Read-only chain list (Zalando bundle) */
.aisb-chain {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: chain;
}
.aisb-chain li {
  counter-increment: chain;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  background: var(--rfs-bg-0);
  border: 1px solid var(--rfs-bg-2);
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--rfs-ink-1);
}
.aisb-chain li::before {
  content: counter(chain);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--rfs-accent-soft);
  color: var(--rfs-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Apply button — yellow pill matching the studio's primary CTA */
.aisb-panel-footer {
  flex-shrink: 0;
  padding: 0.75rem 0.875rem;
  border-top: 1px solid var(--rfs-bg-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--rfs-bg-0);
}
.aisb-panel-footer-meta {
  font-size: 0.6875rem;
  color: var(--rfs-ink-3);
  letter-spacing: 0.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aisb-apply,
.aisb-btn-primary {
  background: var(--rfs-accent);
  color: #09090B;
  border: none;
  padding: 0.5rem 1.125rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms, transform 120ms;
}
.aisb-apply:hover:not(:disabled),
.aisb-btn-primary:hover:not(:disabled) {
  background: var(--rfs-accent-dim);
  transform: translateY(-1px);
}
.aisb-apply:disabled,
.aisb-btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.aisb-btn {
  background: transparent;
  color: var(--rfs-ink-1);
  border: 1px solid var(--rfs-bg-3);
  padding: 0.4375rem 0.875rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.aisb-btn:hover {
  color: var(--rfs-ink-0);
  border-color: var(--rfs-ink-3);
  background: var(--rfs-bg-1);
}

/* ----- Chat tab ----- */

.aisb-chat {
  flex: 1;
  overflow-y: auto;
  padding: 0.875rem 0.875rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.aisb-chat-bubble {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  background: var(--rfs-bg-1);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rfs-ink-0);
}
.aisb-chat-bubble.is-user {
  background: var(--rfs-accent-soft);
  border: 1px solid rgba(251, 191, 36, 0.18);
}
.aisb-chat-author {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rfs-ink-3);
}
.aisb-chat-text { display: block; }

.aisb-chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  vertical-align: middle;
}
.aisb-chat-typing span {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--rfs-ink-2);
  animation: aisb-bounce 1.2s infinite ease-in-out;
}
.aisb-chat-typing span:nth-child(2) { animation-delay: 150ms; }
.aisb-chat-typing span:nth-child(3) { animation-delay: 300ms; }
@keyframes aisb-bounce {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-3px); }
}

/* Plan bubble (mirrors runflow-studio's PlanBubble) */
.aisb-chat-plan-bubble {
  /* No own background — child .aisb-plan carries the chrome */
  padding: 0;
  background: transparent;
}
.aisb-plan {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 0.875rem 0.75rem;
  background: var(--rfs-bg-1);
  border: 1px solid var(--rfs-accent-soft);
  border-radius: 12px;
}
.aisb-plan-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aisb-plan-eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rfs-accent);
}
.aisb-plan-rationale {
  font-size: 0.8125rem;
  color: var(--rfs-ink-1);
  line-height: 1.45;
}
.aisb-plan-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}
.aisb-plan-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.4375rem 0.5rem;
  background: var(--rfs-bg-0);
  border-radius: 8px;
}
.aisb-plan-num {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--rfs-accent-soft);
  color: var(--rfs-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
}
.aisb-plan-step-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aisb-plan-step-desc {
  font-size: 0.75rem;
  color: var(--rfs-ink-0);
  line-height: 1.35;
}
.aisb-plan-step-id {
  font-size: 0.625rem;
  color: var(--rfs-ink-3);
  letter-spacing: 0.02em;
}
.aisb-plan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ============ Hidden state ============ */
[hidden] { display: none !important; }