/* live-activity.css — the Live Activity widget + contextual status line,
   shared by the Habu console (loaded BEFORE styles.css so the console's own
   cascade is unchanged) and the public embed page (which defines the same
   theme tokens: --primary --line --line-strong --muted --faint --ink --surface
   --surface-soft --success --warning --danger --info --radius --radius-pill). */


/* ===================== Live Activity widget ======================
   A real-time picture of what the agent team is doing: a supervisor→specialist
   graph where each node says what that agent is DOING right now, plus a live
   feed of shared-blackboard notes. Near-monochrome with a single teal "live"
   accent; motion is GPU-friendly and fully disabled under reduced-motion. */

/* --- Panel shell + summary --- */
.chat-team-panel-card > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.chat-team-panel-card > summary::-webkit-details-marker { display: none; }
.team-summary-title { letter-spacing: 0.01em; }
.team-summary-chevron {
  margin-left: auto;
  width: 15px;
  height: 15px;
  color: var(--muted);
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}
.chat-team-panel-card[open] > summary .team-summary-chevron { transform: rotate(-90deg) scaleX(-1); }

.team-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 9px 1px 7px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: color-mix(in srgb, var(--primary) 90%, var(--ink));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.team-live-badge.idle {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
}
.team-live-ping {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.team-live-ping::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary);
  animation: la-ping 1.6s ease-out infinite;
  animation-delay: var(--la-t1600, 0ms);
}
@keyframes la-ping {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}

/* --- Graph canvas --- */
.team-graph-neuron {
  position: relative;
  width: 100%;
  margin: 10px 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
}
.team-graph-canvas {
  position: relative;
  margin: 0 auto;
}
.team-graph-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* --- Edges. One language: a solid line is a relationship; flowing dashes mean
   something is in flight along it right now; one pass of dashes marks an
   exchange that just happened, then the line rests. Colour says the kind. --- */
.team-edge {
  fill: none;
  stroke: var(--line-strong, var(--line));
  stroke-width: 1.4;
  opacity: 0.45;
}
.team-edge.message { stroke: color-mix(in srgb, var(--primary) 50%, var(--line)); }
.team-edge.delegate { stroke: var(--line-strong, var(--line)); }
.team-edge.return { stroke: color-mix(in srgb, var(--success) 60%, var(--line)); opacity: 0.55; }
.team-edge.board { stroke: var(--warning); opacity: 0.4; }
.team-edge.board-read { stroke: color-mix(in srgb, var(--primary) 50%, var(--line)); opacity: 0.35; }
.team-edge.failed { stroke: var(--danger); opacity: 0.6; }
.team-edge.live,
.team-edge.pulse {
  stroke-width: 2.25;
  opacity: 0.95;
  stroke-dasharray: 5 7;
}
.team-edge.live {
  stroke: var(--primary);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--primary) 55%, transparent));
  animation: team-edge-flow 0.9s linear infinite;
  animation-delay: var(--la-t900, 0ms);
}
.team-edge.pulse {
  stroke: var(--primary);
  animation: team-edge-flow 0.7s linear 2; /* two passes = EDGE_PULSE_MS, then the class goes */
}
.team-edge.return.live,
.team-edge.return.pulse {
  stroke: var(--success);
  animation-direction: reverse;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--success) 55%, transparent));
}
.team-edge.board.pulse { stroke: var(--warning); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--warning) 55%, transparent)); }
.team-edge.board-read.pulse { stroke: var(--primary); }
.team-edge.failed.live,
.team-edge.failed.pulse { stroke: var(--danger); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--danger) 45%, transparent)); }
@keyframes team-edge-flow { to { stroke-dashoffset: -24; } }

/* Arrowheads follow their line: same colour, and never brighter than it. */
.team-arrow { stroke: none; opacity: 0.55; fill: var(--line-strong, var(--muted)); }
.team-arrow.message { fill: color-mix(in srgb, var(--primary) 60%, var(--muted)); }
.team-arrow.return { fill: var(--success); }
.team-arrow.board { fill: var(--warning); opacity: 0.6; }
.team-arrow.board-read { fill: color-mix(in srgb, var(--primary) 55%, var(--muted)); opacity: 0.55; }
.team-arrow.failed { fill: var(--danger); }
.team-arrow.live,
.team-arrow.pulse { opacity: 1; }
.team-arrow.live {
  fill: var(--primary);
  animation: team-arrow-throb 0.9s ease-in-out infinite;
  animation-delay: var(--la-t900, 0ms);
}
.team-arrow.pulse { fill: var(--primary); }
.team-arrow.return.live,
.team-arrow.return.pulse { fill: var(--success); }
.team-arrow.board.pulse { fill: var(--warning); }
.team-arrow.failed.live,
.team-arrow.failed.pulse { fill: var(--danger); }
@keyframes team-arrow-throb { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Swarm: the board is the medium, so its spokes carry the picture. */
.team-graph-neuron.swarm .team-edge.board { opacity: 0.65; stroke-width: 1.8; }
.team-graph-neuron.swarm .team-arrow.board { opacity: 0.8; }
.team-graph-neuron.swarm .team-edge.board-read { opacity: 0.5; }
.team-graph-neuron.swarm .team-arrow.board-read { opacity: 0.7; }

/* --- Agent node card --- */
.team-graph-box {
  position: absolute;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.team-node {
  width: 166px;
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius, 10px);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* State: a left accent rail + tinted border communicate status at a glance */
.team-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--line);
  transition: background 0.25s ease;
}
.team-node.working {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent), 0 2px 10px color-mix(in srgb, var(--primary) 14%, transparent);
  animation: la-node-breathe 2.4s ease-in-out infinite;
  animation-delay: var(--la-t2400, 0ms);
}
.team-node.working::before { background: var(--primary); }
.team-node.done::before { background: color-mix(in srgb, var(--success) 70%, var(--line)); }
.team-node.failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.team-node.failed::before { background: var(--danger); }
.team-node.lead { border-color: color-mix(in srgb, var(--primary) 50%, var(--line)); }
@keyframes la-node-breathe {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent), 0 2px 10px color-mix(in srgb, var(--primary) 10%, transparent); }
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 38%, transparent), 0 3px 16px color-mix(in srgb, var(--primary) 22%, transparent); }
}

.team-node-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.team-node-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.team-node.working .team-node-dot { background: var(--primary); animation: la-dot-pulse 1.5s ease-in-out infinite; animation-delay: var(--la-t1500, 0ms); }
.team-node.done .team-node-dot { background: var(--success); }
.team-node.failed .team-node-dot { background: var(--danger); }
@keyframes la-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 0%, transparent); }
}
.team-node-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  font-size: 12.5px;
  color: var(--ink);
}
.team-lead-tag {
  flex: none;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
  border-radius: var(--radius-pill, 999px);
  padding: 0 6px;
  color: color-mix(in srgb, var(--primary) 92%, var(--ink));
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* The heart: what this agent is doing right now */
.team-node-activity {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11.5px;
  color: var(--muted);
}
.team-node-act-icon .i { width: 13px; height: 13px; display: block; }
.team-node.working .team-node-activity { color: color-mix(in srgb, var(--primary) 88%, var(--ink)); }
.team-node.failed .team-node-activity { color: var(--danger); }
.team-node-verb {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 550;
}
.team-live-dots { flex: none; display: inline-flex; gap: 2px; align-items: center; }
.team-live-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: la-live-dots 1.1s ease-in-out infinite;
  animation-delay: var(--la-t1100, 0ms);
}
.team-live-dots i:nth-child(2) { animation-delay: calc(var(--la-t1100, 0ms) + 0.18s); }
.team-live-dots i:nth-child(3) { animation-delay: calc(var(--la-t1100, 0ms) + 0.36s); }
@keyframes la-live-dots { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1.5px); } }

.team-node-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.team-chip {
  font-size: 9.5px;
  line-height: 1.55;
  padding: 0 6px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-soft);
}
.team-chip b { font-weight: 700; opacity: 0.75; }
.team-chip.running {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  color: color-mix(in srgb, var(--primary) 90%, var(--ink));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-soft));
  animation: la-chip-pulse 1.2s ease-in-out infinite;
  animation-delay: var(--la-t1200, 0ms);
}
.team-chip.done { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); }
.team-chip.failed { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); color: var(--danger); }
@keyframes la-chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.team-node-foot { font-size: 10.5px; color: var(--faint); }

/* --- Board node in the graph --- */
.team-board-node {
  width: 138px;
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line));
  border-radius: var(--radius, 10px);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
.team-board-node.swarm-center { width: 192px; border-width: 2px; z-index: 2; }
.team-board-node.active { animation: la-board-breathe 2.4s ease-in-out infinite; animation-delay: var(--la-t2400, 0ms); }
@keyframes la-board-breathe {
  0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,0.10); }
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 30%, transparent), 0 2px 12px color-mix(in srgb, var(--warning) 18%, transparent); }
}
.team-board-icon .i { width: 14px; height: 14px; display: block; color: var(--warning); }
.team-board-goal { color: var(--muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }

/* --- Shared blackboard live feed --- */
.la-feed {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius, 10px);
  background: var(--surface);
  overflow: hidden;
}
.la-feed-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}
.la-feed-head-icon .i { width: 14px; height: 14px; display: block; }
.la-feed-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  padding: 0 7px;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: color-mix(in srgb, var(--primary) 92%, var(--ink));
}
.la-feed-list {
  display: grid;
  gap: 3px;
  padding: 6px;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: inset 0 -14px 12px -14px rgba(2, 4, 10, 0.4);
}
.la-feed-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  padding: 5px 7px;
  border-radius: 7px;
  background: var(--surface-soft);
  border-left: 2px solid var(--line);
}
/* Gentle fade only — the whole panel re-renders on each team event, so the top
   row re-triggers this often; a subtle opacity blink reads as "live" without
   jumping. */
.la-feed-row[data-fresh] { animation: la-fresh-in 0.5s ease-out; }
@keyframes la-fresh-in {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
.la-feed-dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--line-strong, var(--muted));
}
.la-feed-row.finding .la-feed-dot, .la-feed-row.success .la-feed-dot { background: var(--success); }
.la-feed-row.question .la-feed-dot, .la-feed-row.warning .la-feed-dot { background: var(--warning); }
.la-feed-row.answer .la-feed-dot, .la-feed-row.hypothesis .la-feed-dot, .la-feed-row.info .la-feed-dot { background: color-mix(in srgb, var(--primary) 70%, var(--muted)); }
.la-feed-row.decision .la-feed-dot { background: var(--primary); }
.la-feed-row.danger .la-feed-dot, .la-feed-row.error .la-feed-dot { background: var(--danger); }
.la-feed-row.finding, .la-feed-row.success { border-left-color: var(--success); }
.la-feed-row.question, .la-feed-row.warning { border-left-color: var(--warning); }
.la-feed-row.answer, .la-feed-row.hypothesis, .la-feed-row.info { border-left-color: color-mix(in srgb, var(--primary) 55%, var(--line)); }
.la-feed-row.decision { border-left-color: var(--primary); }
.la-feed-row.danger, .la-feed-row.error { border-left-color: var(--danger); }
.la-feed-body { min-width: 0; display: grid; gap: 1px; }
.la-feed-meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.la-feed-author { font-weight: 650; font-size: 12px; color: var(--ink); white-space: nowrap; }
.la-feed-kind {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
  white-space: nowrap;
}
.la-feed-text { min-width: 0; font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }

/* Mobile: the scale-to-fit engine handles graph width; keep the feed comfortable */
@media (max-width: 640px) {
  .team-graph-neuron { margin: 8px 0 4px; }
  .la-feed-list { max-height: 220px; }
  .la-feed-text { font-size: 11.5px; }
}

/* Respect reduced-motion: hold the final visual state, drop the loops/transitions */
@media (prefers-reduced-motion: reduce) {
  .team-live-ping::after,
  .team-edge.live,
  .team-edge.pulse,
  .team-arrow.live,
  .team-arrow.pulse,
  .team-node.working,
  .team-board-node.active,
  .team-node.working .team-node-dot,
  .team-live-dots i,
  .team-chip.running,
  .la-feed-row[data-fresh] {
    animation: none !important;
  }
  .team-edge.live { stroke-dasharray: 5 7; }
  .team-edge.pulse { stroke-dasharray: 0; }
}

/* In-chat live team panel */
/* The live-activity panel is a grid item of the message stack: without an
   explicit min-width:0 it defaults to min-width:auto and expands to the fixed
   neuron-canvas width, overflowing (and clipping) on narrow screens instead of
   letting fitTeamGraph scale it down. */
.chat-team-panel {
  min-width: 0;
  max-width: 100%;
}

.chat-team-panel-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 6px 0;
  padding: 8px 10px;
}

.chat-team-panel-card > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.chat-team-panel-card .team-graph-wrap {
  margin-top: 8px;
}

.chat-team-panel-card .team-graph-neuron {
  max-width: 100%;
}

/* ===================== Contextual live status ======================
   "What is happening right now, in the user's terms": a single pulsing line
   ("Searching the web for “…”") plus the chain of steps so far. Shared markup
   from liveStatusHTML(); the console wraps it in .chat-live-status, the embed
   in its pending bubble. */
.ls-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--ink);
}
.ls-line.failed { color: var(--danger); }
.ls-line.waiting { color: var(--warning); }
.ls-spark {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.ls-line.live .ls-spark {
  background: var(--primary);
  animation: ls-spark-pulse 1.6s ease-in-out infinite;
}
.ls-line.failed .ls-spark { background: var(--danger); }
.ls-line.waiting .ls-spark { background: var(--warning); }
@keyframes ls-spark-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 0%, transparent); }
}
.ls-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
}
.ls-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  flex: none;
}
.ls-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.35;
  animation: ls-dot 1.2s ease-in-out infinite;
}
.ls-dots i:nth-child(2) { animation-delay: 0.18s; }
.ls-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes ls-dot {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
.ls-steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 3px;
  display: grid;
  gap: 5px;
  border-left: 2px solid var(--line);
}
.ls-step {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-left: 12px;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}
.ls-step > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ls-mark {
  position: absolute;
  left: -5px;
  top: 0.45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong, var(--line));
  box-shadow: 0 0 0 2px var(--surface);
}
.ls-step.done .ls-mark { background: var(--success); }
.ls-step.failed .ls-mark { background: var(--danger); }
.ls-step.failed { color: var(--danger); }
.ls-step.live { color: var(--ink); }
.ls-step.live .ls-mark {
  background: var(--primary);
  animation: ls-spark-pulse 1.6s ease-in-out infinite;
}

/* Console placement: a soft card above the trace dropdown while the reply is
   in flight. */
.chat-live-status {
  min-width: 0;
  max-width: 100%;
  margin: 2px 0 6px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* When the agent's builder shows its activity, the line is a disclosure: the
   summary IS the line, with a quiet "N steps" on the right, and it opens onto
   the steps so far and the tool calls. Nothing below repeats the line. */
.chat-live-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
  list-style: none;
}
.chat-live-details > summary::-webkit-details-marker { display: none; }
.chat-live-details > summary .ls-line { flex: 1 1 auto; }
.chat-live-more {
  flex: none;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.chat-live-more::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
  transition: transform 0.15s ease;
}
.chat-live-details[open] .chat-live-more::after { transform: translateY(-3px) rotate(45deg); }
.chat-live-details > summary:hover .chat-live-more { color: var(--muted); }
.chat-live-details > .chat-run-details-body {
  margin: 9px -12px 0;
  padding-bottom: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ls-line.live .ls-spark,
  .ls-step.live .ls-mark,
  .ls-dots i { animation: none !important; }
}

/* Premium mode: an external harness (Claude Code, Codex) the run delegated to.
   Dashed, because it is not one of ours: it runs on the workstation with its
   own sandbox, and answers back like a specialist would. */
.team-node.external { border-style: dashed; }
.team-node.external .team-node-name::before { content: "⇄ "; opacity: 0.7; }
.team-ext-tag {
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  color: color-mix(in srgb, var(--ink) 70%, var(--muted, var(--ink)));
}