// Agent Coordination Hub — Phase 4.3
// SINGULARITY aesthetic: dark surfaces, glowing accents, mono typography

// ── Layout ────────────────────────────────────────────────────────────────────

.agents-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  font-family: var(--font-mono);
}

// ── Page header ───────────────────────────────────────────────────────────────

.agents-hd {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-5) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.agents-hd-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-fg-default);

  svg { opacity: 0.7; }
}

.agents-hd-repo {
  font-size: 0.8rem;
  color: var(--color-fg-muted);
}

.agents-hd-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-success, #3fb950);
}

.agents-hd-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success, #3fb950);
  box-shadow: 0 0 6px var(--color-success, #3fb950);
  animation: agents-pulse 2s ease-in-out infinite;
}

@keyframes agents-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--color-success, #3fb950); }
  50%       { opacity: 0.5; box-shadow: 0 0 2px var(--color-success, #3fb950); }
}

// ── Sub-navigation (coord / shard / forecast) ─────────────────────────────────

.agents-subnav {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.agents-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-fg-muted);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;

  &:hover {
    border-color: var(--color-accent-emphasis, #58a6ff);
    color: var(--color-accent-emphasis, #58a6ff);
  }
}

// ── Two-column grid (swarm overview) ─────────────────────────────────────────

.agents-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}

// ── Cards / panels ────────────────────────────────────────────────────────────

.agents-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-canvas-subtle, #161b22);
  padding: var(--space-4);
}

.agents-card-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--space-3);
}

// ── Active agent list ─────────────────────────────────────────────────────────

.agents-active-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-success, #3fb950);
  margin-bottom: var(--space-3);

  &::before {
    content: "● ";
    font-size: 0.6rem;
  }
}

.agents-agent-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.agents-agent-item {
  a {
    font-size: 0.8rem;
    color: var(--color-accent-emphasis, #58a6ff);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;

    &:hover { text-decoration: underline; }
  }
}

.agents-no-active {
  font-size: 0.78rem;
  color: var(--color-fg-subtle);
  font-style: italic;
}

// ── Task queue bar chart ──────────────────────────────────────────────────────

.agents-queue {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.agents-queue-row {
  display: grid;
  grid-template-columns: 68px 1fr 28px;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.78rem;
}

.agents-queue-label {
  color: var(--color-fg-muted);
  text-align: right;
}

.agents-queue-track {
  height: 8px;
  background: var(--color-canvas-default, #0d1117);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.agents-queue-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.agents-queue-fill--pending  { background: var(--color-accent-emphasis, #58a6ff); }
.agents-queue-fill--claimed  { background: var(--color-warning-emphasis, #d29922); box-shadow: 0 0 4px var(--color-warning, #e3b341); }
.agents-queue-fill--done     { background: var(--color-success-emphasis, #238636); }
.agents-queue-fill--failed   { background: var(--color-danger-emphasis, #da3633); }

.agents-queue-count {
  color: var(--color-fg-muted);
  text-align: right;
}

// ── Reservations table (swarm overview, coord page) ───────────────────────────

.agents-reservations {
  margin-bottom: var(--space-5);
}

.agents-reservations-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.agents-reservations-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.agents-reservations-count {
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
}

.agents-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.agents-table th {
  text-align: left;
  padding: var(--space-1) var(--space-2);
  color: var(--color-fg-subtle);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
}

.agents-table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
  vertical-align: middle;
}

.agents-table tr:last-child td { border-bottom: none; }

.agents-table tr:hover td {
  background: color-mix(in srgb, var(--color-canvas-subtle, #161b22) 60%, transparent);
}

.agents-symbol-addr {
  font-family: var(--font-mono);
  color: var(--color-fg-default);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agents-agent-chip {
  display: inline-block;
  padding: 1px var(--space-2);
  background: color-mix(in srgb, var(--color-accent-emphasis, #58a6ff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-emphasis, #58a6ff) 30%, transparent);
  border-radius: 10px;
  font-size: 0.72rem;
  color: var(--color-accent-emphasis, #58a6ff);
  white-space: nowrap;
}

.agents-ttl {
  color: var(--color-fg-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.agents-ttl--expiring {
  color: var(--color-warning, #e3b341);
}

// ── Event stream (coord page) ─────────────────────────────────────────────────

.agents-stream {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-canvas-default, #0d1117);
  margin-bottom: var(--space-5);
  overflow: hidden;
}

.agents-stream-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-canvas-subtle, #161b22);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.7rem;
  color: var(--color-fg-muted);
  letter-spacing: 0.06em;
}

.agents-stream-cursor {
  font-family: var(--font-mono);
  color: var(--color-fg-subtle);
}

.agents-stream-body {
  padding: var(--space-2) 0;
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
}

.agents-stream-row {
  display: grid;
  grid-template-columns: 10px 90px 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  font-size: 0.76rem;
  transition: background 0.1s;

  &:hover { background: color-mix(in srgb, var(--color-canvas-subtle, #161b22) 60%, transparent); }
}

.agents-stream-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

// Color by kind
.agents-stream-dot--reservation { background: var(--color-accent-emphasis, #58a6ff); box-shadow: 0 0 4px var(--color-accent-emphasis, #58a6ff); }
.agents-stream-dot--heartbeat   { background: var(--color-success, #3fb950); }
.agents-stream-dot--claim       { background: var(--color-warning, #e3b341); box-shadow: 0 0 4px var(--color-warning, #e3b341); }
.agents-stream-dot--release     { background: var(--color-fg-subtle); }
.agents-stream-dot--task        { background: color-mix(in srgb, var(--color-accent-emphasis, #58a6ff) 60%, var(--color-success, #3fb950)); }
.agents-stream-dot--intent      { background: var(--color-fg-muted); }
.agents-stream-dot--default     { background: var(--color-fg-subtle); }

.agents-stream-kind {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-fg-muted);
}

.agents-stream-detail {
  color: var(--color-fg-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// ── Shard map ─────────────────────────────────────────────────────────────────

.agents-shard-meta {
  font-size: 0.8rem;
  color: var(--color-fg-muted);
  margin-bottom: var(--space-4);
}

.agents-shard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.agents-shard-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-canvas-subtle, #161b22);
  padding: var(--space-3);
}

.agents-shard-card--assigned {
  border-color: color-mix(in srgb, var(--color-accent-emphasis, #58a6ff) 40%, transparent);
}

.agents-shard-num {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  margin-bottom: var(--space-2);
}

.agents-shard-symbols {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-fg-default);
  margin-bottom: 2px;
}

.agents-shard-detail {
  font-size: 0.72rem;
  color: var(--color-fg-muted);
  margin-bottom: var(--space-3);
}

.agents-shard-assigned {
  font-size: 0.75rem;
  color: var(--color-accent-emphasis, #58a6ff);
  margin-bottom: var(--space-2);

  &::before { content: "● "; font-size: 0.55rem; }
}

.agents-shard-unassigned {
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
  margin-bottom: var(--space-2);

  &::before { content: "○ "; font-size: 0.55rem; }
}

.agents-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-fg-subtle);
  font-size: 0.85rem;
}

.agents-empty-icon {
  display: block;
  margin: 0 auto var(--space-3);
  opacity: 0.35;
}

.agents-empty-hint {
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
  margin-top: var(--space-2);
  font-style: italic;
}

// ── Forecast page ─────────────────────────────────────────────────────────────

.agents-forecast-section {
  margin-bottom: var(--space-5);
}

.agents-forecast-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.agents-conflict-ok {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-success, #3fb950) 30%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-success, #3fb950) 6%, transparent);
  color: var(--color-success, #3fb950);
  font-size: 0.82rem;
}

.agents-conflict-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.agents-conflict-item {
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-danger, #f85149) 35%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-danger, #f85149) 5%, transparent);
}

.agents-conflict-addr {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-danger, #f85149);
  margin-bottom: var(--space-2);
}

.agents-conflict-agents {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.agents-blast-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.agents-blast-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
}

.agents-blast-icon {
  color: var(--color-warning, #e3b341);
  flex-shrink: 0;
}

.agents-blast-addr {
  font-family: var(--font-mono);
  color: var(--color-fg-default);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agents-blast-count {
  color: var(--color-fg-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.agents-blast-reserved {
  color: var(--color-warning, #e3b341);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--color-warning, #e3b341) 35%, transparent);
  border-radius: 3px;
}

// ── Agent profile page ────────────────────────────────────────────────────────

.agents-profile-hd {
  margin-bottom: var(--space-5);
}

.agents-profile-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-fg-default);
  margin-bottom: var(--space-2);
}

.agents-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.78rem;
  color: var(--color-fg-muted);
}

.agents-profile-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.agents-profile-meta-key {
  color: var(--color-fg-subtle);
}

.agents-profile-meta-val {
  color: var(--color-fg-default);
  font-weight: 500;
}

.agents-profile-section {
  margin-bottom: var(--space-5);
}

.agents-profile-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.agents-profile-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-neutral-emphasis, #6e7681);
  color: var(--color-canvas-default, #0d1117);
  font-size: 0.65rem;
  font-weight: 700;
}

// Task rows in profile
.agents-task-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
  font-size: 0.8rem;

  &:last-child { border-bottom: none; }
}

.agents-task-id {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-fg-subtle);
  flex-shrink: 0;
}

.agents-task-title {
  flex: 1;
  color: var(--color-fg-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agents-task-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: 3px;
}

.agents-task-status--pending   { color: var(--color-fg-muted); border: 1px solid var(--color-border); }
.agents-task-status--claimed   { color: var(--color-warning, #e3b341); border: 1px solid color-mix(in srgb, var(--color-warning, #e3b341) 35%, transparent); }
.agents-task-status--completed { color: var(--color-success, #3fb950); border: 1px solid color-mix(in srgb, var(--color-success, #3fb950) 35%, transparent); }
.agents-task-status--failed    { color: var(--color-danger, #f85149); border: 1px solid color-mix(in srgb, var(--color-danger, #f85149) 35%, transparent); }

// Commit rows in profile
.agents-commit-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
  font-size: 0.8rem;

  &:last-child { border-bottom: none; }
}

.agents-commit-id {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-accent-emphasis, #58a6ff);
  flex-shrink: 0;
}

.agents-commit-msg {
  flex: 1;
  color: var(--color-fg-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agents-commit-signed {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--color-success, #3fb950);
  flex-shrink: 0;
  opacity: 0.8;
}

// ── Back link ─────────────────────────────────────────────────────────────────

.agents-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.78rem;
  color: var(--color-fg-muted);
  text-decoration: none;
  margin-bottom: var(--space-4);

  &:hover { color: var(--color-accent-emphasis, #58a6ff); }
}

// ── Hint / CLI instruction text ───────────────────────────────────────────────

.agents-hint {
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
  margin-top: var(--space-3);
}

// ── Section empty state paragraphs ───────────────────────────────────────────

.agents-section-empty {
  font-size: 0.8rem;
  color: var(--color-fg-subtle);
  padding: var(--space-2) 0;
}

.agents-section-empty-hint {
  font-style: italic;
}

// ── Task priority label ───────────────────────────────────────────────────────

.agents-task-priority {
  font-size: 0.72rem;
  color: var(--color-fg-subtle);
  flex-shrink: 0;
}

// ── Forecast section title — secondary description ────────────────────────────

.agents-forecast-title-sub {
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-fg-muted);
}

// Inline icon inside conflict address ─────────────────────────────────────────

.agents-conflict-addr svg {
  vertical-align: -1px;
  margin-right: 3px;
}

// ── Shard card helpers ────────────────────────────────────────────────────────

.agents-shard-sym-unit {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-fg-muted);
}

.agents-shard-assigned-link {
  color: inherit;
  text-decoration: none;
}

// ── Muted stream entries (empty state) ───────────────────────────────────────

.agents-stream-kind--muted  { color: var(--color-fg-subtle); }
.agents-stream-detail--muted { color: var(--color-fg-subtle); }

// ── Profile meta item — hint / empty variant ──────────────────────────────────

.agents-profile-meta-item--hint {
  color: var(--color-fg-subtle);
  font-style: italic;
}