/* ============================================================================
   Swarm Command Center - Phase 3 (Operate)
   Strict LIGHT theme · blue (#2563eb / var(--acc)) · NO gradients · NO glows ·
   NO dark nodes. Reuses styles.css tokens (--acc, --t-*, --line, --surface,
   --green/amber/red, --fs-*, --shadow-*). Standalone admin page.
   ============================================================================ */

/* Page chrome ----------------------------------------------------------------- */
body { background: var(--bg); }

.swarm-topbar { z-index: 40; }
.swarm-back-link { gap: 6px; }

/* Live "N agents online" pill (flat, no glow) */
.swarm-online-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 12px; height: 30px;
  background: var(--acc-soft); color: var(--acc-ink);
  border: 1px solid var(--acc-tint); border-radius: 999px;
  font-size: var(--fs-12); font-weight: 700; white-space: nowrap;
}
.sop-dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.sop-core { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.sop-ping {
  position: absolute; inset: 0; border-radius: 50%; background: var(--acc);
  opacity: 0.55; animation: swarm-ping 1.8s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes swarm-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* ── 3-column shell ──────────────────────────────────────────────────────────── */
.swarm-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 380px;
  gap: 14px;
  padding: 14px;
  height: calc(100vh - 52px - 30px); /* topbar + footer */
  box-sizing: border-box;
}

/* Shared column / panel surfaces */
.swarm-feed-col,
.swarm-topo-col,
.swarm-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}

.swarm-right-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.swarm-triage { flex: 1 1 58%; }
.swarm-auditor { flex: 1 1 42%; }

.swarm-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.swarm-col-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-12); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--t-2); margin: 0;
}
.swarm-col-title svg { color: var(--acc); }

.swarm-poll-dot {
  margin-left: auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); position: relative;
}
.swarm-poll-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--green) 50%, transparent);
  animation: swarm-pulse-ring 2.2s ease-out infinite;
}
@keyframes swarm-pulse-ring { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }

.swarm-count-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center;
  background: var(--acc-soft); color: var(--acc-ink);
  border: 1px solid var(--acc-tint); border-radius: 999px;
  font-size: var(--fs-11); font-weight: 800;
}
.swarm-gated-tag {
  margin-left: auto;
  font-size: 9px; letter-spacing: 0.1em; font-weight: 800;
  color: var(--acc-ink); background: var(--acc-soft);
  border: 1px solid var(--acc-tint); border-radius: 6px;
  padding: 3px 6px;
}

/* Spinner (page-local; styles.css doesn't ship one) */
.dl-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--acc-tint); border-top-color: var(--acc);
  display: inline-block; animation: swarm-spin 0.7s linear infinite;
}
@keyframes swarm-spin { to { transform: rotate(360deg); } }

/* Ghost button (styles.css ships .btn-secondary, not .btn-ghost) */
.btn-ghost {
  background: var(--surface); color: var(--t-2);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:not(:disabled):hover { color: var(--acc-ink); background: var(--acc-soft); border-color: var(--acc-tint); }
.btn.is-busy { opacity: 0.65; pointer-events: none; }

/* ── LEFT: Live Router Feed ──────────────────────────────────────────────────── */
.swarm-feed-list { flex: 1 1 auto; overflow-y: auto; padding: 10px; }
.swarm-feed-loading,
.swarm-feed-empty,
.swarm-triage-empty,
.swarm-auditor-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 28px 16px; text-align: center;
  color: var(--t-4); font-size: var(--fs-12); font-weight: 500;
}
.swarm-feed-loading { flex-direction: row; }

.swarm-feed-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; margin-bottom: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px;
}
.swarm-feed-in { animation: swarm-slide-in 0.32s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes swarm-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sfr-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--acc-soft); color: var(--acc); border: 1px solid var(--acc-tint);
}
.sfr-icon svg { width: 16px; height: 16px; }
.sfr-icon.sfr-warn { background: var(--amber-soft); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 24%, var(--line)); }
.sfr-body { min-width: 0; flex: 1; }
.sfr-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sfr-agent { font-size: var(--fs-12); font-weight: 700; color: var(--t-1); }
.sfr-kind { font-size: var(--fs-11); font-weight: 600; color: var(--acc-ink); }
.sfr-kind.sfr-warn { color: var(--amber); }
.sfr-time { margin-left: auto; font-size: 10px; color: var(--t-4); font-family: 'JetBrains Mono', monospace; }
.sfr-text {
  margin-top: 3px; font-size: var(--fs-12); color: var(--t-3); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── CENTER: Topology ────────────────────────────────────────────────────────── */
.swarm-topo-head { padding: 13px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.sth-sub { margin: 3px 0 0; font-size: var(--fs-12); color: var(--t-3); font-weight: 500; }

.swarm-topo-stage {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background: var(--surface-2);
}
/* Subtle LIGHT grid (no gradients) */
.swarm-topo-grid {
  position: absolute; inset: 0;
  /* SVG grid image (no CSS gradient - strict no-gradient rule) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M33.5 0V34M0 33.5H34' stroke='%23e2e8f0' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size: 34px 34px;
  opacity: 0.5;
  pointer-events: none;
}
.swarm-topo-loading, .swarm-topo-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--t-4); font-size: var(--fs-13); font-weight: 500;
}

/* SVG link layer fills the stage; nodes layer overlays it. */
.swarm-topo-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.swarm-link {
  stroke: var(--line-strong); stroke-width: 0.5; fill: none;
}
.swarm-link-active {
  stroke: var(--acc); stroke-width: 0.9;
  stroke-dasharray: 2 2.4;
  animation: swarm-flow 0.7s linear infinite, swarm-link-fade 2.6s ease-out forwards;
}
@keyframes swarm-flow { from { stroke-dashoffset: 4.4; } to { stroke-dashoffset: 0; } }
@keyframes swarm-link-fade { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

.swarm-topo-nodes { position: absolute; inset: 0; pointer-events: none; }

/* Node = WHITE card with a coloured icon chip. Supervisor = blue-accented WHITE. */
.swarm-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 92px; pointer-events: auto;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.swarm-node-chip {
  position: relative; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--line-strong);
  color: var(--node-accent, var(--acc));
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease, ease), transform 0.2s ease;
}
.swarm-node-chip svg { width: 24px; height: 24px; }
.swarm-node-sup .swarm-node-chip {
  width: 60px; height: 60px; border-radius: 17px;
  border: 2px solid var(--acc); color: var(--acc);
  background: var(--acc-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 9%, transparent), var(--shadow-sm);
}
.swarm-node-sup .swarm-node-chip svg { width: 30px; height: 30px; }

.swarm-node-name {
  font-size: var(--fs-11); font-weight: 700; color: var(--t-1);
  text-align: center; line-height: 1.2; max-width: 92px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 2px 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.swarm-node-sup .swarm-node-name { font-size: var(--fs-12); border-color: var(--acc-tint); }
.swarm-node-role { font-size: 8px; letter-spacing: 0.12em; font-weight: 800; color: var(--acc); }

/* Tiny health dot on the chip */
.snc-health {
  position: absolute; top: -3px; right: -3px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--surface);
}
.snc-health-green { background: var(--green); }
.snc-health-amber { background: var(--amber); }
.snc-health-red   { background: var(--red); }

/* Active pulse - BLUE, FLAT (no glow). Gentle ring scale. */
.swarm-node-active { transform: translate(-50%, -50%) scale(1.06); z-index: 5; }
.swarm-node-active .swarm-node-chip {
  border-color: var(--acc);
  animation: swarm-node-ring 2.6s ease-out;
}
@keyframes swarm-node-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 28%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--acc) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 0%, transparent); }
}

/* Flagged worker - gentle amber/blue ring pulse (no rose glow). */
.swarm-node-flagged .swarm-node-chip {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--line-strong));
  animation: swarm-node-flag 2.4s ease-in-out infinite;
}
@keyframes swarm-node-flag {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 22%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber) 0%, transparent); }
}
.swarm-node-flagged .snc-health { box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 20%, transparent); }

/* ── RIGHT (1): Triage Inbox ─────────────────────────────────────────────────── */
.swarm-triage-list { flex: 1 1 auto; overflow-y: auto; padding: 10px; }
.swarm-triage-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: 12px; padding: 12px; margin-bottom: 9px;
}
.stc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stc-avatar {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acc-soft); color: var(--acc-ink);
  border: 1px solid var(--acc-tint);
  font-size: var(--fs-12); font-weight: 800;
}
.stc-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.stc-name { font-size: var(--fs-13); font-weight: 700; color: var(--t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stc-role { font-size: 10px; color: var(--t-4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.stc-mood {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 24%, var(--line));
}
.stc-mood-happy, .stc-mood-positive, .stc-mood-neutral {
  background: var(--acc-soft); color: var(--acc-ink); border-color: var(--acc-tint);
}
.stc-question {
  font-size: var(--fs-13); color: var(--t-2); line-height: 1.45;
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 9px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.stc-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; color: var(--t-4); }
.stc-agent { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--t-3); }
.stc-agent svg { width: 13px; height: 13px; color: var(--acc); }
.stc-time { margin-left: auto; font-family: 'JetBrains Mono', monospace; }
.stc-takeover { width: 100%; justify-content: center; gap: 6px; }

/* ── RIGHT (2): Auto-Healer Auditor ──────────────────────────────────────────── */
.swarm-auditor-list { flex: 1 1 auto; overflow-y: auto; padding: 10px; }
.swarm-auditor-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 12px 12px 16px; margin-bottom: 9px;
}
.sac-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--amber); }
.sac-low    .sac-rail { background: var(--acc); }
.sac-medium .sac-rail { background: var(--amber); }
.sac-high   .sac-rail { background: var(--red); }
.sac-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sac-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--acc); border: 1px solid var(--line);
}
.sac-icon svg { width: 16px; height: 16px; }
.sac-name { font-size: var(--fs-13); font-weight: 700; color: var(--t-1); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sac-sev {
  flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 5px;
}
.sac-sev-low    { background: var(--acc-soft); color: var(--acc-ink); border: 1px solid var(--acc-tint); }
.sac-sev-medium { background: var(--amber-soft); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 24%, var(--line)); }
.sac-sev-high   { background: var(--red-soft); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 24%, var(--line)); }
.sac-reason { font-size: var(--fs-12); color: var(--t-3); line-height: 1.45; margin-bottom: 10px; }
.sac-review { width: 100%; justify-content: center; gap: 6px; }
.sac-review svg { color: var(--acc); }

/* ── Review-gated prompt-fix modal ───────────────────────────────────────────── */
.swarm-modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: color-mix(in srgb, var(--t-1) 32%, transparent);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.swarm-modal {
  width: min(860px, 96vw); max-height: 90vh;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.swarm-modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
}
.smh-titlewrap { flex: 1; min-width: 0; }
.swarm-modal-title { margin: 0; font-size: var(--fs-16); font-weight: 800; color: var(--t-1); }
.swarm-modal-sub { margin: 3px 0 0; font-size: var(--fs-12); color: var(--t-3); }
.swarm-modal-close { flex-shrink: 0; }

.swarm-gate-note {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 14px 20px 0; padding: 11px 13px;
  background: var(--acc-soft); border: 1px solid var(--acc-tint);
  border-radius: 11px; font-size: var(--fs-12); color: var(--acc-ink); line-height: 1.5;
}
.swarm-gate-note svg { flex-shrink: 0; color: var(--acc); margin-top: 1px; }

.swarm-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; min-height: 120px; }
.swarm-modal-loading { display: flex; align-items: center; gap: 8px; color: var(--t-3); font-size: var(--fs-13); padding: 24px 0; }
.swarm-modal-error {
  padding: 14px; border-radius: 11px;
  background: var(--red-soft); color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 22%, var(--line));
  font-size: var(--fs-13); font-weight: 500;
}

.swarm-fix-rationale {
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 14px;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 11px;
  font-size: var(--fs-12); color: var(--t-2); line-height: 1.5;
}
.swarm-fix-rationale svg { flex-shrink: 0; color: var(--acc); margin-top: 1px; }
.sfr-signals {
  flex-basis: 100%; margin-top: 4px;
  font-size: 11px; color: var(--t-4); font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.swarm-fix-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.swarm-fix-pane {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden;
}
.swarm-fix-pane-new { border-color: var(--acc-tint); }
.sfp-label {
  padding: 7px 11px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--t-3);
  background: var(--surface-3); border-bottom: 1px solid var(--line);
}
.sfp-label-new { color: var(--acc-ink); background: var(--acc-soft); border-bottom-color: var(--acc-tint); }
.sfp-pre {
  margin: 0; padding: 12px; max-height: 38vh; overflow: auto;
  font-family: 'JetBrains Mono', monospace; font-size: var(--fs-12);
  color: var(--t-2); line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.sfp-pre-new { color: var(--t-1); background: color-mix(in srgb, var(--acc-soft) 50%, var(--surface)); }

.swarm-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--line);
}
.swarm-apply-btn { gap: 7px; }

/* ── Fail-closed state ───────────────────────────────────────────────────────── */
.swarm-forbidden {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 40px;
}
.sfb-orb {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  background: var(--acc-soft); border: 1px solid var(--acc-tint);
}
.sfb-h { margin: 0; font-size: var(--fs-18); font-weight: 800; color: var(--t-1); }
.sfb-p { margin: 0; max-width: 420px; font-size: var(--fs-13); color: var(--t-3); line-height: 1.5; }

/* Status footer dot honours error state */
.swarm-status-footer .sf-dot { background: var(--green); }
.swarm-status-footer .sf-dot.err { background: var(--red); }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .swarm-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(280px, 1fr) auto;
    height: auto; min-height: calc(100vh - 82px);
  }
  .swarm-right-col { flex-direction: row; }
  .swarm-triage, .swarm-auditor { flex: 1 1 50%; }
}
@media (max-width: 720px) {
  .swarm-right-col { flex-direction: column; }
  .swarm-fix-diff { grid-template-columns: 1fr; }
  .swarm-online-pill { display: none; }
}