/* AEG UI — Node Styles */

/* ── FSM color helper map (replicated as CSS classes) ───── */
.fsm-draft                    { --fsm-bg: var(--fsm-draft); --fsm-txt: var(--fsm-draft-text); }
.fsm-ready                    { --fsm-bg: var(--fsm-ready); --fsm-txt: var(--fsm-ready-text); }
.fsm-agent_running            { --fsm-bg: var(--fsm-agent-running); --fsm-txt: var(--fsm-agent-running-text); }
.fsm-maker_done               { --fsm-bg: var(--fsm-maker-done); --fsm-txt: var(--fsm-maker-done-text); }
.fsm-adversarial_in_progress  { --fsm-bg: var(--fsm-adversarial-in-progress); --fsm-txt: var(--fsm-adversarial-in-progress-text); }
.fsm-adversarial_done         { --fsm-bg: var(--fsm-adversarial-done); --fsm-txt: var(--fsm-adversarial-done-text); }
.fsm-human_pending            { --fsm-bg: var(--fsm-human-pending); --fsm-txt: var(--fsm-human-pending-text); }
.fsm-approved                 { --fsm-bg: var(--fsm-approved); --fsm-txt: var(--fsm-approved-text); }
.fsm-children_pending_review  { --fsm-bg: var(--fsm-children-pending-review); --fsm-txt: var(--fsm-children-pending-review-text); }
.fsm-done                     { --fsm-bg: var(--fsm-done); --fsm-txt: var(--fsm-done-text); }
.fsm-rejected                 { --fsm-bg: var(--fsm-rejected); --fsm-txt: var(--fsm-rejected-text); }
.fsm-failed_recoverable       { --fsm-bg: var(--fsm-failed-recoverable); --fsm-txt: var(--fsm-failed-recoverable-text); }
.fsm-blocked                  { --fsm-bg: var(--fsm-blocked); --fsm-txt: var(--fsm-blocked-text); }
.fsm-merge_conflict           { --fsm-bg: var(--fsm-merge-conflict); --fsm-txt: var(--fsm-merge-conflict-text); }
.fsm-stale                    { --fsm-bg: var(--fsm-stale); --fsm-txt: var(--fsm-stale-text); }
.fsm-invalidated              { --fsm-bg: var(--fsm-invalidated); --fsm-txt: var(--fsm-invalidated-text); }
.fsm-killed                   { --fsm-bg: var(--fsm-killed); --fsm-txt: var(--fsm-killed-text); }
.fsm-deadlock_human_pending   { --fsm-bg: var(--fsm-deadlock-human-pending); --fsm-txt: var(--fsm-deadlock-human-pending-text); }

/* ── Status Dot ──────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fsm-bg, #6b7280);
  flex-shrink: 0;
}

/* ── Status Badge (web component base styles) ────────────── */
status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  background: var(--fsm-bg, #6b7280);
  color: var(--fsm-txt, #fff);
}

/* ── Badge pills ─────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  white-space: nowrap;
}
.badge-agent {
  background: var(--bg-agent);
  color: var(--color-agent);
  font-family: var(--font-mono);
}
.badge-human {
  background: var(--bg-human);
  color: var(--color-human);
}
.badge-muted {
  background: var(--bg-surface-3);
  color: var(--color-text-dim);
}
.badge-warn {
  background: rgba(245,158,11,0.15);
  color: var(--color-warning);
}

/* ── Filters bar ─────────────────────────────────────────── */
#filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-3);
  position: sticky;
  top: 0;
  background: var(--bg-app);
  z-index: 10;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-3);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 2px 10px;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.filter-chip .chip-remove { font-size: 10px; margin-left: 2px; }

/* ── Epic group ──────────────────────────────────────────── */
.epic-group { margin-bottom: var(--space-2); }
.epic-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-dim);
  border: 1px solid transparent;
  transition: background var(--transition-fast);
}
.epic-header:hover { background: var(--bg-surface); }
.epic-toggle { font-size: 10px; transition: transform var(--transition-fast); }
.epic-group.collapsed .epic-toggle { transform: rotate(-90deg); }
.epic-group.collapsed .epic-body   { display: none; }

/* ── Node row ────────────────────────────────────────────── */
.node-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  font-size: var(--font-size-sm);
  margin-bottom: 1px;
}
.node-row:hover   { background: var(--bg-surface-2); }
.node-row.active  { background: rgba(255,255,255,0.10); border-left-color: var(--color-accent); }
.node-row.locked  { opacity: 0.7; }

.node-row .row-indent { display: inline-block; width: 24px; flex-shrink: 0; }
.node-row .row-title  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-row .row-title mark.search-hl { background: rgba(255,255,255,0.22); color: var(--color-text); border-radius: 2px; }
.node-row .row-badges { display: flex; gap: var(--space-1); align-items: center; flex-shrink: 0; }
.node-row .row-open   { color: var(--color-muted); font-size: 12px; opacity: 0; transition: opacity var(--transition-fast); }
.node-row:hover .row-open { opacity: 1; }

/* ── Kanban ──────────────────────────────────────────────── */
#kanban-board {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  align-items: flex-start;
  min-height: calc(100vh - var(--header-height) - 100px);
}

.kanban-col {
  min-width: 220px;
  max-width: 260px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}
.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-dim);
  border-bottom: 1px solid var(--border-color);
  cursor: default;
}
.kanban-col-header.collapsible { cursor: pointer; }
.kanban-count {
  background: var(--bg-surface-2);
  border-radius: 9999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}
.kanban-body {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 60px;
}
.kanban-col.drag-over .kanban-body { background: rgba(255,255,255,0.08); }
.kanban-col.drag-invalid .kanban-body { background: rgba(239,68,68,0.08); }

.kanban-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  draggable: true;
}
.kanban-card:hover { background: var(--bg-surface-3); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.kanban-card.dragging { opacity: 0.4; }
.kanban-card.active { border-color: var(--color-accent); }

.kanban-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}
.kanban-card-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: var(--space-1);
}
.kanban-card-parent {
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  margin-bottom: var(--space-1);
}
.kanban-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

/* ── Search highlight ────────────────────────────────────── */
mark.search-hl {
  background: rgba(255,255,255,0.30);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}