/* ================================================================
   swarm-live.css — Phase 3a live multi-agent transparency
   ----------------------------------------------------------------
   Styles for:
     1. #swarmGridPanel — the bottom-docked concurrent subagent
        output grid (swarm/swarm-grid.js). position:fixed; never
        reflows the essay above it.
     2. #swarmGridExpand — the "Expand all" toggle injected next to
        the dashboard agent grid (swarm/swarm-dashboard.js).
   Uses existing design tokens from css/reset.css:
     --cream --cream-dark --brown --brown-light --brown-dark
     --accent --gold --gold-light --border --border-light --white
     --shadow --sans --mono
   ================================================================ */

/* ─── "Expand all" toggle next to the agent grid ─────────────── */

.swarm-grid-expand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 2px;
  padding: 5px 11px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brown);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.swarm-grid-expand:hover {
  background: var(--cream-dark);
  border-color: var(--gold-light);
}
.swarm-grid-expand:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.swarm-grid-expand .swarm-grid-expand-glyph {
  font-size: 0.9rem;
  line-height: 1;
  color: var(--gold);
}
.swarm-grid-expand.swarmgrid-expand-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.swarm-grid-expand.swarmgrid-expand-active .swarm-grid-expand-glyph {
  color: var(--white);
}

/* ─── Bottom-docked concurrent output panel ──────────────────── */

.swarmgrid-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  background: var(--cream);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -6px 22px var(--shadow);
  font-family: var(--sans);
  color: var(--brown);
  /* Never reflows the essay: it overlays. */
}

.swarmgrid-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--cream-dark);
  border-bottom: 1px solid var(--border);
}
.swarmgrid-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--brown-dark);
  text-transform: uppercase;
}
.swarmgrid-close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--brown-light);
  font-size: 1.25rem;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.swarmgrid-close:hover {
  background: var(--border-light);
  color: var(--accent);
}
.swarmgrid-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* The columns container. One column per agent. Past ~4 columns the
   minmax floor (260px) overflows the viewport and we scroll
   horizontally rather than crushing the columns. */
.swarmgrid-cols {
  flex: 1 1 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 1px;
  background: var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 0;
}

.swarmgrid-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--white);
  min-width: 260px;
}

.swarmgrid-col-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: var(--cream);
  border-bottom: 1px solid var(--border-light);
}
.swarmgrid-col-ord {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 1.1em;
  text-align: center;
}
.swarmgrid-col-role {
  flex: 1 1 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brown);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Live status dot — same palette idiom as the dashboard cards. */
.swarmgrid-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.swarmgrid-dot-live {
  background: var(--gold);
  animation: swarmgrid-pulse 1.2s ease-in-out infinite;
}
.swarmgrid-dot-done {
  background: #4c8a52;
}
.swarmgrid-dot-error {
  background: #c62828;
}
@keyframes swarmgrid-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.78); }
}

/* Reasoning / Response mini-toggle. */
.swarmgrid-col-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 2px;
}
.swarmgrid-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--brown-light);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.swarmgrid-tab:hover {
  border-color: var(--gold-light);
}
.swarmgrid-tab.swarmgrid-tab-active {
  background: var(--brown);
  border-color: var(--brown);
  color: var(--white);
}
.swarmgrid-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* Scrollable append-only body. The mono face keeps streamed tokens
   from reflowing as ligatures kick in. */
.swarmgrid-col-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 9px 11px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--brown-dark);
  white-space: pre-wrap;
  word-break: break-word;
}
.swarmgrid-empty {
  color: var(--brown-light);
  font-style: italic;
  opacity: 0.7;
}

/* When the grid is open, lift the bottom of the reading surface so the
   last paragraph isn't permanently hidden behind the dock. We pad the
   body rather than reflow the essay container — the overlay itself
   never participates in layout. */
body[data-swarmgrid-open="1"] #explorerMessages {
  padding-bottom: 71vh;
}