/* SRI App — app chrome beyond sri-base.css: v2 thread-first geometry,
   genui blocks, journey rail, onboarding (7a–7h), the reveal, pitch mode. */

/* ═══ v2 — thread-first layout: spine · context · THREAD · feature surface ═══ */
.v2Main { flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr; --spineW: 48px;
  grid-template-columns: var(--spineW) 0 minmax(0, 1fr) 0fr;
  transition: grid-template-columns var(--cvDur) cubic-bezier(0.2, 0, 0, 1); }
.v2Main.isSpineWide { --spineW: 208px; }
.v2Main { position: relative; }
.v2PanelExpand { position: absolute; right: 0; top: 8px; z-index: 45;
  width: 22px; height: 28px; border: 1px solid var(--border-strong); border-right: 0;
  border-radius: var(--radius-input) 0 0 var(--radius-input);
  background: var(--card); color: var(--muted-foreground); box-shadow: var(--shadow-raise);
  display: flex; align-items: center; justify-content: center;
  animation: v2ExpandIn var(--dur) var(--ease-out);
  transition: color var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out); }
.v2PanelExpand:hover { color: var(--foreground); width: 26px; }
.v2PanelCollapse { position: absolute; right: 0; top: 8px; z-index: 45;
  width: 22px; height: 28px; border: 1px solid var(--border-strong); border-right: 0;
  border-radius: var(--radius-input) 0 0 var(--radius-input);
  background: var(--card); color: var(--muted-foreground); box-shadow: var(--shadow-raise);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out); }
.v2PanelCollapse:hover { color: var(--foreground); width: 26px; }
@keyframes v2ExpandIn { from { opacity: 0; transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .v2PanelExpand { animation: none; } }
.v2Main.isPanelOpen { grid-template-columns: var(--spineW) 0 minmax(0, 1fr) minmax(0, var(--panelW, 0.92fr)); }
.v2Main.isSplit.isPanelOpen { grid-template-columns: var(--spineW) 0 minmax(0, 1fr) minmax(0, 1fr); }
.v2Main.isSplit .v2SplitLeft { border-right: 1px solid var(--border); }
.v2Main.isPanelOpen.isPanelFocus { grid-template-columns: var(--spineW) 0 0 minmax(380px, 1fr); }
.v2Main > .v2Center, .v2Main > .cvCtx { transition: opacity var(--cvDur) cubic-bezier(0.2,0,0,1); }
.v2Main.isPanelFocus > .cvCtx, .v2Main.isPanelFocus > .v2Center { opacity: 0; pointer-events: none; }
.v2Main.isPanelFocus > .cvCtx { width: 0; padding: 0; border-right: 0; overflow: hidden; }
.v2Main.isPanelFocus > .v2Center { overflow: hidden; }
.v2Main.isPanelFocus > .v2Panel { animation: v2FocusIn var(--cvDur) cubic-bezier(0.2,0,0,1); }
@keyframes v2FocusIn { from { transform: scale(0.985); opacity: 0.75; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .v2Main.isPanelFocus > .v2Panel { animation: none; } .v2Main > .v2Center, .v2Main > .cvCtx { transition: none; } }
.v2Main.isCtxCollapsed { grid-template-columns: var(--spineW) 0 minmax(0, 1fr) 0fr; }
.v2Main.isCtxCollapsed.isPanelOpen { grid-template-columns: var(--spineW) 0 minmax(0, 1fr) minmax(0, var(--panelW, 0.92fr)); }
.v2Main.isPanelFocus.isPanelOpen, .v2Main.isPanelFocus.isPanelOpen.isCtxCollapsed { grid-template-columns: var(--spineW) 0 0 minmax(380px, 1fr); }
.v2Main.isCtxCollapsed > .cvCtx { width: 0; padding: 0; border-right: 0; overflow: hidden; }
.v2CtxExpand { position: absolute; left: var(--spineW); top: 8px; z-index: 46; width: 22px; height: 28px;
  border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 var(--radius-input) var(--radius-input) 0;
  background: var(--card); color: var(--muted-foreground); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out); }
.v2CtxExpand:hover { color: var(--foreground); width: 26px; }
.v2PanelFocus { position: absolute; right: 27px; top: 8px; z-index: 46; width: 22px; height: 28px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-input); background: var(--card);
  color: var(--muted-foreground); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.v2PanelFocus:hover { color: var(--foreground); background: var(--muted); }
.v2PanelFocus:active { transform: scale(0.9); }
.v2PanelFocus > svg { transition: transform var(--dur) cubic-bezier(0.2,0,0,1); }
.v2Main.isPanelFocus .v2PanelFocus > svg { transform: rotate(90deg); }
.v2Main.isPanelFocus .v2PanelFocus { color: var(--green-11); border-color: var(--green-9); background: var(--green-3); }
.v2Main.isPanelDrag { transition: none; user-select: none; cursor: col-resize; }
.v2HomeCollapse { position: absolute; right: 8px; top: 8px; z-index: 44; width: 22px; height: 28px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-input); background: var(--card);
  color: var(--muted-foreground); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.v2HomeCollapse:hover { color: var(--foreground); background: var(--muted); }
.v2SplitCtrls { position: absolute; right: 8px; top: 8px; z-index: 44; display: flex; align-items: center; gap: 6px; }
.v2SplitCtrls .v2HomeCollapse { position: static; }
.v2SplitPick { position: relative; }
.v2SplitBtn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-input); background: var(--card); color: var(--foreground); font: 500 11.5px var(--font-sans);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out); white-space: nowrap; }
.v2SplitBtn:hover { background: var(--muted); }
.v2SplitBtn > svg:first-child { color: var(--green-9); }
.v2SplitBtn > svg:last-child { color: var(--muted-foreground); }
.v2SplitMenu { position: absolute; right: 0; top: calc(100% + 5px); z-index: 60; min-width: 210px; padding: 5px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-raise);
  animation: v2ExpandIn var(--dur) var(--ease-out); }
.v2SplitMenuH { font: 600 10px var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); padding: 4px 8px 6px; }
.v2SplitMenuItem { display: flex; align-items: center; gap: 9px; width: 100%; height: 32px; padding: 0 8px; border: 0; background: transparent;
  border-radius: var(--radius-input); color: var(--foreground); font: 400 12.5px var(--font-sans); text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out); }
.v2SplitMenuItem > svg { color: var(--muted-foreground); flex: none; }
.v2SplitMenuItem:hover { background: var(--muted); }
.v2SplitMenuItem.isOn { background: var(--green-3); color: var(--green-11); font-weight: 500; }
.v2SplitMenuItem.isOn > svg { color: var(--green-9); }
.v2SplitLeft { flex: 1; min-height: 0; overflow-y: auto; background: var(--background); }
.v2SplitLeft .cvStage { height: 100%; }

.v2Center { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--background); }
.v2Thread { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px 10px;
  display: flex; flex-direction: column; gap: 12px; }
.v2Thread > * { width: 100%; max-width: 680px; margin: 0 auto; flex: none; }
.v2Dock { flex: none; padding: 6px 28px 16px; }
.v2Dock .cvComposer { max-width: 680px; }

.v2Panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--border);
  background: var(--neutral-2, var(--muted)); opacity: 0; transition: opacity var(--cvDur) linear; }
.isPanelOpen .v2Panel { opacity: 1; }
.v2PanelResize { position: absolute; left: -4px; top: 0; bottom: 0; width: 9px; z-index: 40;
  cursor: col-resize; touch-action: none; }
.v2PanelResize::after { content: ""; position: absolute; left: 3.5px; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background var(--dur-fast) var(--ease-out); }
.v2PanelResize:hover::after, .isPanelDrag .v2PanelResize::after { background: var(--green-9); }
.v2PanelInner { height: 100%; min-width: 0; display: flex; flex-direction: column; overflow-x: auto; }
.v2PanelHead { flex: none; display: flex; align-items: center; justify-content: space-between;
  font: 600 10.5px var(--font-sans); color: var(--muted-foreground); padding: 10px 24px 0; }
.v2PanelInner .cvStage { min-height: 0; }

/* ═══ stage chrome at panel widths ═══
   The subject's name never disappears — the quiet metadata (as-of, why)
   wraps to a second line before the title gives up space */
@keyframes svSettle { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cvStageTitleWrap { flex-wrap: wrap; row-gap: 2px; }
.cvStageTitle { min-width: 120px; flex: 1 1 auto; }

/* ═══ workstreams — the working-on strip (parallel matters, no threads) ═══ */
.wsStrip { flex: none; display: flex; align-items: stretch; gap: 7px; width: 100%; max-width: 736px;
  margin: 0 auto; padding: 10px 28px 0; box-sizing: border-box; overflow-x: auto;
  animation: svSettle 260ms var(--ease-out, ease-out) both; }
.wsStripLabel { flex: none; align-self: center; font: 600 10px var(--font-sans); color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.06em; padding-right: 3px; white-space: nowrap; }
.wsCard { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-row); background: var(--card);
  cursor: pointer; text-align: left; transition: border-color 140ms linear, background 140ms linear,
  transform var(--dur-fast, 120ms) var(--ease-out, ease-out); }
.wsCard:hover { background: var(--muted); }
.wsCard:active { transform: scale(0.98); }
.wsCard:disabled { opacity: 0.55; cursor: default; }
.wsCard.isFocused { border-color: var(--green-7); background: var(--green-1); }
.wsCard.isNeedsYou:not(.isFocused) { border-color: var(--amber-6, oklch(0.84 0.09 80)); }
.wsDot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--border-strong); flex: none; }
.wsDot.isWorking { background: var(--green-9); animation: v2Pulse 1.6s ease-in-out infinite; }
.wsDot.isReady { background: var(--amber-9, oklch(0.72 0.14 70)); animation: none; }
.wsMain { min-width: 0; display: flex; flex-direction: column; }
.wsName { font: 500 11.5px var(--font-sans); color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsTick { font: 400 10px var(--font-sans); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsBadge { flex: none; font: 600 9.5px var(--font-sans); color: var(--amber-11, oklch(0.5 0.11 70));
  background: var(--amber-2, oklch(0.97 0.02 80)); border: 1px solid var(--amber-5, oklch(0.9 0.06 80));
  border-radius: var(--radius-full); padding: 1px 7px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wsStrip { animation: none; } .wsDot.isWorking { animation: none; } }

/* ═══ sessions — fresh anchor, pull-to-load history, fresh-session control ═══ */
.v2Center { position: relative; }
.svRecordCap { text-align: center; font: 400 10.5px var(--font-sans); color: var(--muted-foreground);
  padding: 4px 0 10px; }
.svFresh { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0 4px; }
.svFresh::before, .svFresh::after { content: ""; flex: 1; height: 1px; background: var(--green-6); }
.svFresh .t { font: 600 11px var(--font-sans); color: var(--green-11); white-space: nowrap; }
.svFresh .s { font: 400 10px var(--font-sans); color: var(--muted-foreground); white-space: nowrap; }
.svJumpNow { position: absolute; left: 50%; transform: translateX(-50%); bottom: 92px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--foreground);
  font: 500 11.5px var(--font-sans); padding: 6px 13px; border-radius: var(--radius-full);
  box-shadow: var(--shadow-raise); animation: svSettle 200ms var(--ease-out, ease-out) both; }
.svJumpNow:hover { background: var(--muted); }

/* pull-to-load — resistance made visible; click works too */
.svPullEarlier { display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 0 4px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted-foreground); font: 500 10.5px var(--font-sans); }
.svPullEarlier:hover { color: var(--foreground); }
.svPullEarlier .bar { width: 120px; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.svPullEarlier .bar i { display: block; height: 100%; background: var(--green-9); width: 0; transition: width 60ms linear; }

/* fresh-session — icon action inside the composer, like "new chat" */
.cvComposerFresh { flex: none; width: 30px; height: 30px; margin-left: 4px; border: 0; background: transparent;
  border-radius: var(--radius-input); color: var(--muted-foreground);
  display: flex; align-items: center; justify-content: center;
  animation: svSettle 240ms var(--ease-out, ease-out) both;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.cvComposerFresh:hover { background: var(--muted); color: var(--foreground); }
.cvComposerFresh:disabled { opacity: 0.4; cursor: default; }

/* the top bar must paint above thread parts (their entrance animations create
   stacking contexts) — otherwise the search pane opens invisibly underneath */
.cvTop { position: relative; z-index: 80; }

/* ═══ micro-animations — everything arrives, nothing pops ═══ */
/* thread parts rise in as they land */
@keyframes svPartIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.v2Thread > * { animation: svPartIn 260ms var(--ease-out, ease-out) both; }
/* fresh-session clear: the transcript settles down and out, the new session rises in */
.v2Thread { transition: opacity 230ms linear, transform 230ms var(--ease-out, ease-out); }
.v2Thread.isClearing { opacity: 0; transform: translateY(16px); pointer-events: none; }
/* pull-to-load: the indicator gives — rubber-band follow with a sprung release */
.svPullEarlier { transition: transform 220ms var(--ease-out, ease-out); will-change: transform; }
/* superseded blocks crossfade into their frozen chip */
.cvFrozen { animation: svPartIn 220ms var(--ease-out, ease-out) both; }
/* reveal metrics cascade */
.svRevealMetric:nth-child(2) { animation-delay: 70ms; }
.svRevealMetric:nth-child(3) { animation-delay: 140ms; }
.svRevealMetric:nth-child(4) { animation-delay: 210ms; }
/* the fresh-session control eases in once the conversation has grown */
.cvComposerFresh { }
/* a loaded history chunk arrives as one group, easing down from above while the
   viewport drifts up to meet it — never a pop */
.svChunk { display: flex; flex-direction: column; gap: 12px; }
.svChunk > * { flex: none; width: 100%; }
.v2Thread > .svChunk { animation: svChunkIn 460ms var(--ease-out, ease-out) both; }
@keyframes svChunkIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .v2Thread > *, .cvFrozen, .svRevealMetric, .cvComposerFresh, .svJumpNow, .v2Thread > .svChunk { animation: none; }
  .v2Thread, .svPullEarlier { transition: none; }
}

/* ═══ genui blocks — live views composed in the thread ═══ */
.cvBlock { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  box-shadow: var(--shadow-edge); overflow: hidden; }
.cvBlockHead { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--border); background: var(--muted); }
.cvBlockLive { display: inline-flex; align-items: center; gap: 5px; font: 500 10px var(--font-sans);
  color: var(--green-11); flex: none; }
.cvBlockDot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--green-9);
  animation: v2Pulse 2.4s ease-in-out infinite; }
@keyframes v2Pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .cvBlockDot { animation: none; } }
.cvBlockTitle { font: 600 12.5px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvBlockMeta { font: 400 11px var(--font-sans); color: var(--muted-foreground); flex: none; }
.cvBlockOpen { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent;
  font: 500 11px var(--font-sans); color: var(--green-11); padding: 2px 4px; border-radius: 4px; flex: none; }
.cvBlockOpen:hover { color: var(--green-12); background: var(--green-3); }
.cvBlockShared { display: inline-flex; align-items: center; gap: 5px; font: 500 10.5px var(--font-sans);
  color: var(--consent-shared-fg); flex: none; }
.cvBlockBody { padding: 6px 14px 10px; }
.cvBlockRow { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.cvBlockRow:last-of-type { border-bottom: 0; }
.cvBlockRowMain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cvBlockRowT { font: 500 12.5px var(--font-sans); text-wrap: pretty; }
.cvBlockRowD { font: 400 11.5px var(--font-sans); color: var(--muted-foreground); line-height: 1.45; text-wrap: pretty; }
.cvBlockRow .cvBtnQuiet { flex: none; align-self: center; white-space: nowrap; }
.cvBlockRow .cvShortDorm { flex: none; padding-top: 2px; }
.cvBlockTable { width: 100%; border-collapse: collapse; }
.cvBlockTable td { font: 400 12px var(--font-sans); padding: 7px 8px 7px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cvBlockTable tr:last-child td { border-bottom: 0; }
.cvBlockMore { border: 0; background: transparent; font: 500 11.5px var(--font-sans); color: var(--muted-foreground);
  padding: 8px 0 2px; }
.cvBlockMore:hover { color: var(--green-11); }
.cvBlockFoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.cvBlockEntity { display: flex; gap: 18px; padding: 8px 0 4px; }
.cvBlockEntityScore { flex: none; text-align: center; padding: 4px 14px 0 2px; border-right: 1px solid var(--border); }
.cvBlockEntityFacts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cvBlockLock { display: inline-flex; align-items: center; gap: 6px; }

/* frozen chip — a superseded block, one honest line */
.cvFrozen { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 1px dashed var(--border-strong); background: transparent; border-radius: var(--radius-row);
  padding: 7px 12px; color: var(--muted-foreground); font: 400 11.5px var(--font-sans); }
.cvFrozen:hover { background: var(--muted); }
.cvFrozenT { font-weight: 500; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvFrozenM { flex: none; }
.cvFrozenTime { flex: none; margin-left: auto; font-size: 10.5px; }
.cvFrozenAct { flex: none; font: 500 10.5px var(--font-sans); color: var(--green-11); }

.v2Thread .cvReceipt { padding: 2px 6px; }

/* journey rail — the relationship's story, list-first (never a graph) */
.cvJourney { display: flex; flex-direction: column; padding-top: 4px; }
.cvJRow { display: flex; gap: 10px; }
.cvJRail { display: flex; flex-direction: column; align-items: center; width: 10px; flex: none; padding-top: 5px; }
.cvJDot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--border-strong); flex: none; }
.cvJDot.isNow { background: var(--green-9); box-shadow: 0 0 0 3px var(--green-3); }
.cvJLine { flex: 1; width: 1px; background: var(--border-strong); margin: 3px 0; min-height: 12px; }
.cvJMain { flex: 1; min-width: 0; padding-bottom: 14px; }
.cvJRow:last-child .cvJMain { padding-bottom: 4px; }
.cvJTop { display: flex; align-items: baseline; gap: 8px; }
.cvJDate { font: 500 10.5px var(--font-sans); color: var(--muted-foreground); }
.cvJStage { font: 600 10.5px var(--font-sans); color: var(--green-11); }
.cvJEvent { font: 400 12px var(--font-sans); line-height: 1.45; margin-top: 1px; text-wrap: pretty; }
.cvJWhy { font-size: 10px; color: var(--muted-foreground); margin-top: 2px; }
.cvJScore { flex: none; display: flex; align-items: baseline; gap: 5px; padding-top: 3px; }
.cvJScoreN { font: 600 12.5px var(--font-sans); }
.cvJDelta { font: 500 10px var(--font-sans); color: var(--green-11); }

/* ═══ The reveal — J2, the canvas wakes composed ═══ */
.svReveal { border: 1px solid var(--green-6); box-shadow: var(--shadow-raise); }
.svReveal .cvBlockHead { background: var(--green-1); border-bottom-color: var(--green-5); }
.svRevealLede { font: 400 13px var(--font-sans); line-height: 1.55; text-wrap: pretty; max-width: 62ch; padding: 8px 0 2px; }
.svRevealLede b { font-weight: 600; }
.svRevealMetrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 0 4px; }
.svRevealMetric { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-row);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; animation: cvRise 320ms var(--ease-out) both; }
.svRevealMetric .n { font: 600 19px var(--font-sans); letter-spacing: -0.015em; }
.svRevealMetric .l { font: 500 11px var(--font-sans); }
.svRevealMetric .s { font: 400 10px var(--font-sans); color: var(--muted-foreground); }
.svRevealProofH { font: 600 10.5px var(--font-sans); color: var(--muted-foreground); padding: 10px 0 2px; }
.svRevealProv { font: 400 10.5px var(--font-mono); color: var(--muted-foreground); flex: none; align-self: center;
  white-space: nowrap; }
.svRevealActs { display: flex; gap: 8px; padding-top: 12px; flex-wrap: wrap; }
.svRevealWall { font: 400 11.5px var(--font-sans); color: var(--muted-foreground); font-style: italic;
  padding-top: 10px; text-wrap: pretty; }
.svRevealAssembling { font: 400 11.5px var(--font-sans); color: var(--muted-foreground); padding: 8px 0; }

/* ═══ Onboarding (7a–7h) ═══ */
.obRoot { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--background); color: var(--foreground); position: relative; overflow-y: auto; }
.obSteps { position: absolute; top: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.obSteps i { width: 24px; height: 3px; border-radius: 2px; background: var(--border-strong); transition: background 200ms linear; }
.obSteps i.on { background: var(--green-9); }
.obSteps i.done { background: var(--green-7); }
.obSkip { position: absolute; top: 16px; right: 20px; border: 0; background: transparent;
  font: 500 12px var(--font-sans); color: var(--muted-foreground); padding: 4px 8px; border-radius: var(--radius-input); }
.obSkip:hover { background: var(--muted); color: var(--foreground); }
.obPanel { width: 420px; max-width: calc(100vw - 48px); display: flex; flex-direction: column; gap: 14px;
  animation: cvRise 280ms var(--ease-out) both; padding: 48px 0; }
.obPanel.isWide { width: 480px; }
.obPanel h1 { font: 600 21px var(--font-sans); letter-spacing: -0.015em; margin: 0; text-wrap: pretty; }
.obLede { font: 400 13.5px var(--font-sans); color: var(--muted-foreground); line-height: 1.6; margin: 0; text-wrap: pretty; }
.obBrand { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.obBrand img { height: 22px; }
.obCard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-row); }
.obField { display: flex; flex-direction: column; gap: 5px; }
.obField label { font: 500 12px var(--font-sans); }
.obInput { height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-input);
  background: var(--card); font: 400 13.5px var(--font-sans); color: var(--foreground);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.obInput input { border: 0; outline: 0; background: transparent; font: inherit; color: inherit; flex: 1; min-width: 0; }
.obVerified { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--font-sans); color: var(--green-11); white-space: nowrap; }
.obHint { font: 400 11px var(--font-sans); color: var(--muted-foreground); line-height: 1.5; text-wrap: pretty; }
.obBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
  font: 500 13.5px var(--font-sans); color: var(--primary-foreground); background: var(--primary);
  border: 0; border-radius: var(--radius-input); white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out); }
.obBtn:hover { background: var(--primary-hover); } .obBtn:active { transform: scale(0.97); }
.obBtn:disabled { opacity: 0.45; cursor: default; }
.obGBtn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px;
  font: 500 13px var(--font-sans); color: var(--foreground); background: transparent;
  border: 1px solid var(--border-strong); border-radius: var(--radius-input); white-space: nowrap; }
.obGBtn:hover { background: var(--muted); }
.obProvider { display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; width: 100%;
  border: 1px solid var(--border-strong); border-radius: var(--radius-input); background: var(--card);
  font: 500 13.5px var(--font-sans); color: var(--foreground); }
.obProvider:hover { background: var(--muted); }
.obProvider svg { width: 17px; height: 17px; flex: none; }

.obRule { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 12px 14px; }
.obRule + .obRule { border-top: 1px solid var(--border); }
.obRule .ic { width: 28px; height: 28px; border-radius: var(--radius-input); background: var(--green-2);
  border: 1px solid var(--green-5); color: var(--green-11); display: inline-flex; align-items: center; justify-content: center; }
.obRule .t { font: 500 13px var(--font-sans); }
.obRule .d { font: 400 11.5px var(--font-sans); color: var(--muted-foreground); line-height: 1.5; margin-top: 2px; text-wrap: pretty; }
.obChips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }

.obRole { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; cursor: pointer; width: 100%;
  border: 0; background: transparent; text-align: left; }
.obRole + .obRole { border-top: 1px solid var(--border); }
.obRole .t { font: 500 12.5px var(--font-sans); }
.obRole .d { font: 400 11px var(--font-sans); color: var(--muted-foreground); line-height: 1.45; margin-top: 1px; text-wrap: pretty; }
.obRole .lead { font: 500 10px var(--font-mono); color: var(--green-11); margin-top: 4px; display: block; }
.obRole.sel { background: var(--green-1); }
.obRadio { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex: none;
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.obRadio.on { border-color: var(--green-9); }
.obRadio.on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-9); }

.obSrc { display: flex; align-items: center; gap: 10px; padding: 10px 13px; width: 100%; border: 0;
  background: transparent; cursor: pointer; text-align: left; }
.obSrc + .obSrc { border-top: 1px solid var(--border); }
.obSrc .logo { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; font: 600 9px var(--font-sans); color: var(--muted-foreground); flex: none; }
.obSrc .t { font: 500 12.5px var(--font-sans); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.obSrc .d { font: 400 10.5px var(--font-sans); color: var(--muted-foreground); text-wrap: pretty; }
.obRec { font: 500 9.5px var(--font-sans); color: var(--green-11); background: var(--green-2); border: 1px solid var(--green-5);
  border-radius: var(--radius-full); padding: 1px 7px; white-space: nowrap; }
.obCheck { width: 15px; height: 15px; border-radius: 4px; flex: none; margin-left: auto; border: 1.5px solid var(--border-strong); position: relative; }
.obCheck.on { background: var(--green-9); border-color: var(--green-9); }
.obCheck.on::after { content: ""; position: absolute; inset: 3px 3.5px 4.5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); }

.obPhase { display: grid; grid-template-columns: 20px 1fr auto; gap: 9px; align-items: baseline; padding: 9px 13px; }
.obPhase + .obPhase { border-top: 1px solid var(--border); }
.obPhase .t { font: 400 12.5px var(--font-sans); }
.obPhase .t.isDone { color: var(--green-11); }
.obPhase .t.isNext { color: var(--muted-foreground); }
.obPhase .n { font: 400 11px var(--font-sans); color: var(--muted-foreground); white-space: nowrap; }
.obDotRun { width: 7px; height: 7px; border-radius: 50%; background: var(--green-9); align-self: center;
  animation: v2Pulse 1.6s ease-in-out infinite; }
.obDotWait { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); align-self: center; }
.obStat { display: flex; flex-direction: column; }
.obStat .n { font: 600 20px var(--font-sans); letter-spacing: -0.01em; }
.obStats { width: 100%; padding: 12px 14px; display: flex; justify-content: space-between; text-align: left; box-sizing: border-box; }
.obEvent { padding: 9px 13px; display: flex; align-items: center; gap: 9px; font: 400 12px var(--font-sans); }
.obEvent + .obEvent { border-top: 1px solid var(--border); }
.obEvent .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-9); flex: none; }
.obEvent .time { font: 400 10.5px var(--font-sans); color: var(--muted-foreground); margin-left: auto; }
.obRunChip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  font: 500 11px var(--font-sans); background: var(--muted); border: 1px solid var(--border-strong);
  border-radius: var(--radius-chip); white-space: nowrap; }
.obTease { padding: 10px 13px; display: flex; flex-direction: column; gap: 5px; }
.obTease .line { font: 400 11.5px var(--font-sans); line-height: 1.5; }
.obTease .line b { color: var(--green-11); font-weight: 600; }
.obPermRow { display: flex; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer; width: 100%;
  border: 0; background: transparent; text-align: left; }
.obPermRow + .obPermRow { border-top: 1px solid var(--border); }
.obPermRow .t { font: 500 12.5px var(--font-sans); }

/* ═══ Pitch mode (J0) ═══ */
.pitchBar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: 14px; max-width: min(760px, calc(100vw - 40px));
  background: oklch(0.2 0.008 155); color: oklch(0.96 0.004 155); border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay); padding: 11px 16px; animation: cvRise 280ms var(--ease-out) both; }
.pitchBeatN { flex: none; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--green-9);
  color: oklch(0.15 0.03 155); display: flex; align-items: center; justify-content: center; font: 600 12px var(--font-sans); }
.pitchMain { min-width: 0; flex: 1; }
.pitchT { font: 600 12.5px var(--font-sans); }
.pitchLine { font: 400 11.5px var(--font-sans); opacity: 0.8; line-height: 1.45; text-wrap: pretty; margin-top: 1px; }
.pitchActs { display: flex; align-items: center; gap: 6px; flex: none; }
.pitchActs button { border: 0; border-radius: var(--radius-input); font: 500 12px var(--font-sans); padding: 6px 12px; }
.pitchNext { background: var(--green-9); color: oklch(0.15 0.03 155); }
.pitchNext:hover { filter: brightness(1.08); }
.pitchEnd { background: transparent; color: oklch(0.96 0.004 155 / 0.6); }
.pitchEnd:hover { color: oklch(0.96 0.004 155); }

/* topbar present affordance */
.svTopBtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong);
  background: var(--card); color: var(--muted-foreground); font: 500 11.5px var(--font-sans);
  padding: 5px 11px; border-radius: var(--radius-full); }
.svTopBtn:hover { background: var(--muted); color: var(--foreground); }

/* agent error / fallback note */
.svAgentNote { font: 400 11px var(--font-sans); color: var(--muted-foreground); font-style: italic; }