/* Velocity Orchestration — swarm command center. The centerpiece: effort-level
   selector, live agent heatmap (scales 3 → 100), wave/DAG fan-out, batched
   approvals + dual-voice. Mirrors the desktop swarm cockpit one-for-one. */

/* ── Effort-level selector (Solo → MaxSwarm) ── */
.effort { padding: 10px 12px 12px; }
.effort-track {
  display: flex; border: 1px solid var(--line-strong);
  border-radius: 8px; overflow: hidden;
}
.effort-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 2px; background: var(--bg); color: var(--muted);
  border: none; border-right: 1px solid var(--line); cursor: pointer;
  font-family: var(--sans); transition: background 120ms ease, color 120ms ease;
}
.effort-step:last-child { border-right: none; }
.effort-step:hover { background: var(--raised); color: var(--text); }
.effort-step .lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.effort-step .n   { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.effort-step[aria-pressed="true"] {
  background: var(--surface-2); color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.effort-step[aria-pressed="true"] .n { color: var(--accent); }
.effort-step:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.effort-readout {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-top: 8px; font-size: 11px;
}
.effort-readout .desc { color: var(--muted); }
.effort-readout .cost { font-family: var(--mono); color: var(--accent); white-space: nowrap; }
.effort-readout .cost .est { color: var(--dim); font-size: 9px;
                             text-transform: uppercase; letter-spacing: 0.08em; margin-right: 5px; }

/* ── Command center (right) ── */
.command-center {
  flex: 1; min-width: 0; background: var(--black);
  display: flex; flex-direction: column; overflow: hidden;
}
.cc-tabbar {
  height: 44px; background: var(--black); border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 8px; padding: 0 12px; flex-shrink: 0;
}
.cc-tabs { display: flex; gap: 4px; }
.cc-tab {
  height: 30px; padding: 0 12px; border: 1px solid transparent;
  border-radius: 6px; background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.cc-tab:hover { background: var(--raised); color: var(--text); }
.cc-tab.active { background: var(--raised); border-color: var(--line-strong); color: var(--text); }
.cc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cc-legend { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.lg { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); }
.lg .swatch { width: 8px; height: 8px; border-radius: 2px; border: 1px solid currentColor; }
.lg.Pending .swatch          { color: var(--dim); }
.lg.Running .swatch          { color: var(--accent); }
.lg.AwaitingApproval .swatch { color: var(--amber); }
.lg.Done .swatch             { color: var(--green-soft); }
.lg.Failed .swatch           { color: var(--crimson-text); }

.cc-stack { flex: 1; min-height: 0; position: relative; }
.cc-pane { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; }

/* ── Swarm view: rollup + body(grid | detail) ── */
.swarm-view { display: flex; flex-direction: column; }
.swarm-rollup {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: #060606;
  flex-shrink: 0;
}
.roll {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-strong); border-radius: 100px; padding: 3px 11px;
}
.roll .n { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.roll .l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.roll.total .n   { color: var(--text); }
.roll.Running .n          { color: var(--accent); }
.roll.AwaitingApproval .n { color: var(--amber); }
.roll.AwaitingApproval    { border-color: var(--amber); }
.roll.Done .n             { color: var(--green-soft); }
.roll.Failed .n           { color: var(--crimson-text); }
.roll.Pending .n          { color: var(--muted); }
.roll-spacer { flex: 1; }

.swarm-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.swarm-waves { flex: 1; min-width: 0; overflow-y: auto; padding: 8px 14px 24px; }
.swarm-empty { color: var(--dim); font-size: 12px; padding: 24px; text-align: center; }

/* Wave band — a dependency depth in the DAG fan-out */
.wave { margin-top: 14px; }
.wave:first-child { margin-top: 4px; }
.wave-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.wave-head .rule { flex: 1; height: 1px; background: var(--line); }
.wave-grid {
  display: grid; gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
}

/* Agent cell — color/intensity by status; emerald on BORDER, never filled */
.cell {
  position: relative; aspect-ratio: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 5px;
  background: #101010; color: var(--dim); cursor: pointer;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  transition: transform 90ms ease, border-color 120ms ease;
}
.cell:hover { transform: translateY(-1px); border-color: var(--muted); }
.cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cell.sel { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
.cell.Pending          { color: var(--dim); }
.cell.Running          { border-color: var(--accent); color: var(--accent);
                         background: var(--accent-soft); animation: cellpulse 1.8s ease-in-out infinite; }
.cell.AwaitingApproval { border-color: var(--amber); color: var(--amber);
                         background: var(--amber-soft); }
.cell.Done             { border-color: rgba(95,194,126,0.5); color: var(--green-soft);
                         background: rgba(95,194,126,0.08); }
.cell.Failed           { border-color: var(--crimson); color: var(--crimson-text);
                         background: rgba(153,27,30,0.12); }
.cell.Skipped          { color: var(--dim); opacity: 0.5; }
@keyframes cellpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,163,127,0.0); }
  50%      { box-shadow: 0 0 0 3px rgba(16,163,127,0.18); }
}
.cell.sel.Running { animation: none; }

/* Detail column — the drilled-in agent thread */
.swarm-detail {
  width: 40%; min-width: 300px; max-width: 520px;
  border-left: 1px solid var(--line-2); background: var(--black);
  display: flex; flex-direction: column; overflow: hidden;
}
.detail-hint { color: var(--dim); font-size: 12px; padding: 24px; text-align: center; margin: auto; }
.detail-close { margin-left: auto; }

/* ── Batched approval card (BatchApprovalRequested) ── */
.appr-card {
  border: 1px solid var(--amber); border-radius: 8px; background: var(--amber-soft);
  margin: 0 0 8px; overflow: hidden;
}
.appr-card .hd {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid rgba(224,160,80,0.25);
}
.appr-card .hd .ttl { font-size: 12px; font-weight: 700; color: var(--amber); }
.appr-card .hd .tier { font-family: var(--mono); font-size: 10px; color: var(--amber); }
.appr-items { list-style: none; padding: 4px 0; max-height: 200px; overflow-y: auto; }
.appr-items li { padding: 5px 10px; font-size: 11px; display: flex; gap: 6px; align-items: baseline; }
.appr-items li .role { font-weight: 600; text-transform: capitalize; }
.appr-items li .tool { font-family: var(--mono); color: var(--amber); }
.appr-items li .rationale { color: var(--muted); flex: 1; min-width: 0; }
.appr-items li.flagged { background: rgba(224,160,80,0.08); }
.appr-flags { padding: 5px 10px; font-size: 10px; color: var(--amber);
              border-top: 1px solid rgba(224,160,80,0.2); }
.appr-flags .ic { margin-right: 5px; }
.appr-actions { display: flex; gap: 6px; padding: 8px 10px;
                border-top: 1px solid rgba(224,160,80,0.25); }

/* Single approval row */
.approval-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--amber); border-radius: 8px;
  background: var(--amber-soft); margin-bottom: 8px;
}
.approval-item .meta .tier { color: var(--amber); font-family: var(--mono); font-size: 11px; }
.approval-actions { display: flex; gap: 6px; }
.appr-wrap { padding: 8px 12px; }

/* ── Dual-voice verification card (in the conversation log) ── */
.dv {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 8px 10px; font-size: 11px;
}
.dv.escalate { border-color: var(--amber); }
.dv.confirmed { border-left: 2px solid var(--accent); }
.dv .dv-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.dv .dv-hd .who { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.dv .claim { color: var(--text); margin-bottom: 6px; line-height: 1.4; }
.dv-voices { display: flex; flex-direction: column; gap: 3px; }
.dv-voice { display: flex; gap: 6px; align-items: baseline; font-family: var(--mono); font-size: 10px; }
.dv-voice .v-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.dv-voice.yes .v-dot { background: var(--green-soft); }
.dv-voice.no  .v-dot { background: var(--crimson-text); }
.dv-voice .v-label { color: var(--text); }
.dv-voice .v-why { color: var(--muted); }
.dv-blind { margin-top: 6px; font-size: 10px; color: var(--amber); }
.dv-blind .bt { text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; margin-right: 5px; }
.badge.verify-ok { background: #16331f; color: var(--green-soft); }
.badge.verify-esc { background: var(--amber-soft); color: var(--amber); }
.badge.verify-no { background: #3a1d1f; color: var(--crimson-text); }