/* ── AgentAi Mission Control ── */
:root {
  --bg: #0a0e17;
  --surface: #111827;
  --surface2: #1a2335;
  --text: #f0f4ff;
  --muted: #8899b4;
  --dim: #4a5a74;
  --border: #1e2d42;
  --ok: #22c55e;
  --ok-bg: rgba(34,197,94,.08);
  --warn: #eab308;
  --amber: #f59e0b;
  --warn-bg: rgba(234,179,8,.08);
  --bad: #ef4444;
  --bad-bg: rgba(239,68,68,.08);
  --accent: #3b82f6;
  --accent-bg: rgba(59,130,246,.07);
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", Menlo, Monaco, "Cascadia Code", monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Nav ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 24px;
  background: rgba(10,14,23,.85);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--border);
}
.nav-left { display: flex; align-items: center; gap: 8px; }
.nav-logo { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.nav-sep { color: var(--dim); }
.nav-page { color: var(--muted); font-size: .9rem; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dim);
  transition: background .3s;
}
.live-dot.ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); animation: pulse 2s infinite; }
.live-dot.warn { background: var(--warn); }
.live-dot.off { background: var(--bad); }
.live-label { font-size: .78rem; color: var(--muted); min-width: 64px; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.nav-btns { display: flex; gap: 6px; }
.nav-btns button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s;
}
.nav-btns button:hover { background: var(--surface2); }
#btn-clear { border-color: var(--amber); color: var(--amber); }
#btn-clear:hover { background: rgba(245,158,11,.15); }

/* ── Layout ── */
.layout { max-width: 1480px; margin: 0 auto; padding: 16px 20px 40px; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

/* ── Health Strip ── */
.health-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}
.health-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .78rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.health-chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.health-chip .dot.ok { background: var(--ok); }
.health-chip .dot.warn { background: var(--warn); }
.health-chip .dot.off { background: var(--bad); }
.health-chip .label { color: var(--muted); }
.health-chip .val { color: var(--text); font-weight: 500; }

/* ── Hero Task ── */
.hero-task {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-bg), var(--surface) 60%);
  padding: 20px 24px;
  margin-bottom: 16px;
  position: relative;
  overflow: visible;
}
.hero-task::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; border-radius: 4px 0 0 4px;
  background: var(--accent);
}
.hero-label {
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.hero-text { font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
.hero-meta { margin-top: 6px; font-size: .8rem; color: var(--muted); }
.hero-task.idle { border-color: var(--border); }
.hero-task.idle::before { background: var(--dim); }
.hero-task.active::before { background: var(--ok); animation: pulse 2s infinite; }
.hero-task.active { border-color: rgba(34,197,94,.2); background: linear-gradient(135deg, var(--ok-bg), var(--surface) 60%); }
.hero-task.active .hero-label { color: var(--ok); }
.hero-task.done::before { background: var(--accent); }
.hero-task.done { border-color: rgba(59,130,246,.15); background: linear-gradient(135deg, var(--accent-bg), var(--surface) 60%); }
.hero-task.done .hero-label { color: var(--accent); }

/* ── Task Runtimes ── */
.task-runtimes-section { margin-bottom: 16px; }
.runtime-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.runtime-summary-chip,
.runtime-agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .72rem;
  color: var(--muted);
}
button.runtime-summary-chip {
  appearance: none;
  font: inherit;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.runtime-summary-chip:hover {
  border-color: rgba(59,130,246,.35);
  color: var(--text);
}
.runtime-summary-chip.active {
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.12);
  color: var(--accent);
}
.runtime-summary-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 6px;
  background: rgba(10,14,23,.55);
  color: var(--text);
  font-weight: 600;
}
.runtime-summary-chip.active .runtime-summary-count,
.runtime-summary-chip:hover .runtime-summary-count,
.runtime-agent-chip strong {
  color: var(--text);
  font-weight: 600;
}
.task-runtimes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.task-runtime,
.runtime-empty {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
}
.task-runtime {
  cursor: pointer;
  transition: border-color .18s, transform .18s, background .18s;
}
.task-runtime:hover {
  border-color: rgba(59,130,246,.45);
  transform: translateY(-1px);
}
.task-runtime.selected {
  border-color: rgba(34,197,94,.4);
  background: linear-gradient(135deg, rgba(34,197,94,.08), var(--surface) 70%);
  box-shadow: 0 0 0 1px rgba(34,197,94,.12);
}
.runtime-empty {
  color: var(--muted);
  text-align: center;
}
.task-runtime-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}
.task-runtime-id {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--text);
}
.task-runtime-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.task-runtime-title {
  font-size: .84rem;
  color: var(--text);
  font-weight: 600;
}
.task-runtime-meta,
.task-runtime-path {
  font-size: .74rem;
  color: var(--muted);
}

/* ── Runtime Detail ── */
.runtime-detail-section {
  margin-bottom: 16px;
}
.runtime-detail-meta {
  color: var(--muted);
  font-size: .78rem;
}
.runtime-detail-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px;
  color: var(--muted);
  background: rgba(17,24,39,.5);
}
.runtime-detail-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.95fr) minmax(420px, 1.05fr);
  gap: 16px;
}
.runtime-col {
  min-width: 0;
}
.runtime-summary-card,
.runtime-agents-section,
.runtime-col-feed {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
}
.runtime-summary-card {
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(59,130,246,.08), var(--surface) 65%);
}
.runtime-summary-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.runtime-summary-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
.runtime-summary-subtitle {
  color: var(--muted);
  font-size: .78rem;
  margin-top: 4px;
}
.runtime-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.runtime-kv {
  border: 1px solid rgba(30,45,66,.75);
  border-radius: 8px;
  background: rgba(10,14,23,.35);
  padding: 10px;
}
.runtime-kv-label {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.runtime-kv-value {
  color: var(--text);
  font-size: .78rem;
  font-family: var(--mono);
  word-break: break-word;
}
.runtime-summary-block {
  border-top: 1px solid rgba(30,45,66,.75);
  padding-top: 12px;
  margin-top: 12px;
}
.runtime-summary-block:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.runtime-summary-block h4 {
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.runtime-summary-copy {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.runtime-artifact-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.runtime-agent-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.runtime-workers {
  margin-top: 10px;
}
.subsection-title {
  font-size: .92rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.runtime-activity-feed {
  margin-top: 10px;
  max-height: 360px;
}

.worker.status-assigned { border-left: 3px solid var(--accent); }
.worker.status-blocked { border-left: 3px solid var(--bad); }
.pill-assigned { color: var(--accent); background: var(--accent-bg); border: 1px solid rgba(59,130,246,.2); }
.pill-blocked { color: var(--bad); background: var(--bad-bg); border: 1px solid rgba(239,68,68,.2); }

/* ── Main Grid ── */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* ── Section Title ── */
.section-title {
  font-size: 1rem; font-weight: 600;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: .7rem;
  color: var(--muted);
  padding: 0 6px;
}

/* ── Workers ── */
.workers { display: flex; flex-direction: column; gap: 8px; }

.worker {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  transition: border-color .2s;
}
.worker:hover { border-color: var(--accent); }
.worker.status-active { border-left: 3px solid var(--ok); }
.worker.status-idle { border-left: 3px solid var(--accent); }
.worker.status-setup { border-left: 3px solid var(--warn); }
.worker.status-warn { border-left: 3px solid var(--bad); }

.worker-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.worker-name {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .88rem;
}
.worker-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  font-size: .85rem;
  background: var(--surface2);
}
.pill {
  border-radius: 999px;
  font-size: .68rem;
  padding: 2px 8px;
  font-weight: 500;
  letter-spacing: .02em;
}
.pill-active { color: var(--ok); background: var(--ok-bg); border: 1px solid rgba(34,197,94,.2); }
.pill-done { color: var(--accent); background: var(--accent-bg); border: 1px solid rgba(59,130,246,.2); }
.pill-standby { color: var(--dim); background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.15); }
.pill-idle { color: var(--accent); background: var(--accent-bg); border: 1px solid rgba(59,130,246,.2); }
.pill-setup { color: var(--warn); background: var(--warn-bg); border: 1px solid rgba(234,179,8,.2); }
.pill-warn { color: var(--bad); background: var(--bad-bg); border: 1px solid rgba(239,68,68,.2); }

.worker-task {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 4px;
}
.worker-task em { color: var(--text); font-style: normal; font-weight: 500; }
.worker-updated {
  font-size: .7rem;
  color: var(--dim);
}

/* ── Activity Feed ── */
.col-feed { display: flex; flex-direction: column; min-width: 0; }
.activity-feed {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
  max-height: 320px;
  overflow-y: auto;
}
.event {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .82rem;
}
.event-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  background: var(--surface2);
}
.event-info .event-icon { background: var(--accent-bg); }
.event-ok .event-icon { background: var(--ok-bg); }
.event-warn .event-icon { background: var(--warn-bg); }
.event-body { min-width: 0; flex: 1; }
.event-title { font-weight: 600; font-size: .82rem; }
.event-detail { color: var(--muted); font-size: .76rem; margin-top: 1px; }
.event-time { color: var(--dim); font-family: var(--mono); font-size: .66rem; white-space: nowrap; margin-top: 2px; }
.event-empty { color: var(--dim); padding: 16px; text-align: center; }

/* ── Log Tabs ── */
.log-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.tab {
  padding: 6px 14px;
  font-size: .76rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.log-panels { position: relative; }
.log-panel {
  display: none;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  color: #c4d5ea;
  padding: 10px 12px;
  min-height: 220px;
  max-height: 400px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.55;
}
.log-panel.active { display: block; }

/* ── Global Secondary Surface ── */
.global-section {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(17,24,39,.4);
  padding: 0 14px 14px;
}
.global-section summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .82rem;
  padding: 12px 0;
}
.global-note {
  color: var(--muted);
  font-size: .78rem;
  margin-bottom: 14px;
}

/* ── Command Output ── */
.cmd-section { margin-top: 8px; }
.cmd-section summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .82rem;
  padding: 8px 0;
}
.cmd-section pre {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: #c4d5ea;
  padding: 10px 12px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.5;
}

.error { color: var(--bad); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .section-head { flex-direction: column; align-items: flex-start; }
  .main-grid { grid-template-columns: 1fr; }
  .runtime-detail-grid { grid-template-columns: 1fr; }
  .runtime-agent-summary { justify-content: flex-start; }
  .runtime-meta-grid { grid-template-columns: 1fr; }
  .task-runtimes { grid-template-columns: 1fr; }
  .nav { flex-direction: column; gap: 8px; align-items: flex-start; }
  .nav-right { width: 100%; justify-content: space-between; }
  .health-strip { flex-direction: column; }
}