/* --- Tool calls --- */
.tool-call {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.tool-call-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
@media (hover: hover) {
  .tool-call-header:hover { background: var(--bg-hover); }
}
.tool-call-header .arrow {
  transition: transform 0.15s;
  font-size: 10px;
}
.tool-call-header .arrow.open { transform: rotate(90deg); }
.tool-call-header .tool-name { font-weight: 600; color: var(--accent); }
.tool-call-header .tool-params { color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Agent↔agency action chips (agency-* helper calls) — a distinct accent so they
   read as framework events rather than opaque shell runs. */
.tool-call.agency {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  border-left: 2px solid var(--accent);
}
.tool-call.agency > .tool-call-header {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}

.tool-call-body {
  display: none;
  padding: 8px 12px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  max-height: 300px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}
.tool-call-body.open { display: block; }

/* Red/green line diff for file-editing tool calls (Edit/Write/MultiEdit). */
.tool-call-body.diff-body { word-break: normal; padding: 8px 0; }
.diff { margin: 0; }
.diff .d-row { display: flex; align-items: flex-start; }
.diff .d-ln {
  flex: 0 0 2.6em; text-align: right; padding: 0 6px;
  color: var(--text-muted); opacity: .55; user-select: none; -webkit-user-select: none;
}
.diff .d-ln:nth-child(2) { border-right: 1px solid var(--border); margin-right: 6px; }
.diff .d-txt { flex: 1 1 auto; padding: 0 8px 0 0; white-space: pre-wrap; word-break: break-word; }
.diff .d-add { background: color-mix(in srgb, var(--green) 15%, transparent); }
.diff .d-del { background: color-mix(in srgb, var(--red) 15%, transparent); }
.diff .d-add .d-txt { color: var(--green); }
.diff .d-del .d-txt { color: var(--red); }
.diff .d-ctx .d-txt { color: var(--text-muted); }
.diff .diff-sep { display: block; margin: 6px 0; border-top: 1px dashed var(--border); }
/* Result footnote under an edit's diff (✓ saved, or the error text). */
.edit-result { margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.edit-result.err { color: var(--red); white-space: pre-wrap; }

.tool-timer {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.tool-timer.warn { color: var(--orange); border-color: var(--orange); }
.tool-timer.expired { color: var(--red); border-color: var(--red); }
.tool-timer.done { color: var(--green); border-color: transparent; background: transparent; }
/* Live elapsed badge driven by claude tool_progress heartbeats (long tools). */
.tool-elapsed {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.tool-call-preview {
  padding: 8px 12px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* --- Subagent indicator --- */
.tool-call.subagent {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.tool-call.background {
  border-color: color-mix(in srgb, var(--orange) 30%, var(--border));
}
.bg-badge {
  background: var(--orange);
  color: var(--bg);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}
.bg-kill-btn {
  margin-left: 4px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--red) 60%, var(--border));
  background: transparent;
  color: var(--red);
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.bg-kill-btn:hover { background: var(--red); color: white; }
.bg-kill-btn.killing { opacity: 0.5; cursor: progress; }
.tool-call.background.ended { opacity: 0.55; }
.tool-call.background.ended .bg-badge {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.subagent-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.subagent-spinner.done {
  animation: none;
  border: none;
  width: auto;
  height: auto;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}
@keyframes spin { to { transform: rotate(360deg); } }
.subagent-nested {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}
/* Output / kill calls re-parented under a background Bash card. */
.bg-nested {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--orange) 40%, var(--border));
}
.bg-nested:empty { display: none; }

/* --- Codex todo list --- */
.todo-list {
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.todo-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  color: var(--text-muted);
}
.todo-item.done { color: var(--text); }
.todo-check {
  flex-shrink: 0;
  font-size: 12px;
}
.todo-item.done .todo-check { color: var(--green); }

/* --- Result banner --- */
.result-banner {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 8px 14px;
  background: var(--bg-surface2);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0;
}
.result-banner .check { color: var(--green); font-size: 14px; }
.result-banner.error-banner .check { color: var(--red); }
/* Not red: nothing went wrong yet — --orange is "look at this". */
.result-banner.warning-banner,
.result-banner.warning-banner .check { color: var(--orange); }

/* A banner carrying the CLI's own last lines under its one red line — a turn
   that died before saying anything (src/process.ts). The tick moves to the top
   because the text is now a block, and the lines keep their breaks in the mono
   face they were printed in. `min-width: 0` so a long line wraps inside the
   banner instead of widening the chat. */
.result-banner.has-tail { align-items: flex-start; }
.result-banner .banner-text { min-width: 0; }
.result-banner .banner-tail {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Raw / stderr --- */
.msg-raw {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 8px;
  background: var(--bg);
  border-radius: 4px;
  margin: 4px 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.msg-stderr {
  color: var(--orange);
}