/*
 * Tool rows, the action log (docs/DESIGN.md): one 34 px line per step with a state glyph, the verb in the sans face,
 * the target in mono and the stats at the right. Opening a row shows its detail under a 2 px rule, never a card inside
 * a card. Tokens come from app.css; this file defines none.
 */

/* Hidden elements stay hidden even where a display rule below sets one. */
.tool-card [hidden] {
  display: none !important;
}

/* ---- The row ------------------------------------------------------------------------------------------------------ */

.tool-card {
  min-width: 0;
  font-size: var(--fs-sm);
}

.tool-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  min-width: 0;
}

.tool-head::-webkit-details-marker {
  display: none;
}

.tool-head:hover {
  background: var(--bg-hover);
}

.tool-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The state glyph: nothing when done, an arc when running, a dot when waiting, an exclamation when failed. */
.tool-glyph {
  position: relative;
  display: inline-flex;
  flex: 0 0 12px;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}

.tool-glyph.is-running {
  color: var(--accent);
}

.tool-glyph.is-waiting {
  color: var(--attention);
}

.tool-glyph.is-waiting::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px var(--attention-soft);
}

.tool-glyph.is-error {
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}

.tool-glyph.is-error::before {
  content: "!";
}

.tool-arc {
  display: block;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tool-spin 900ms linear infinite;
}

@keyframes tool-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The verb: sans, medium weight. The target follows it in mono, truncated in the middle for paths. */
.tool-title {
  flex: 0 0 auto;
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}

.tool-subtitle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* Extras (the diff stat, a duration): plain colored text, no badges. */
.tool-extras {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tool-extras .is-add {
  color: var(--success);
}

.tool-extras .is-del {
  color: var(--danger);
}

.tool-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--fg-subtle);
}

.tool-chevron .icon {
  width: 12px;
  height: 12px;
  transition: transform 140ms var(--ease);
}

.tool-card[open] > .tool-head .tool-chevron .icon {
  transform: rotate(90deg);
}

/* The detail: indented under a 2 px rule, with the same type size as the row. */
.tool-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin: 2px 0 8px 14px;
  padding: 4px 0 2px 14px;
  border-left: 2px solid var(--border);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.tool-body:empty {
  display: none;
}

.tool-card:not([open]) > .tool-body {
  display: none;
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.tool-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.tool-action:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

.tool-more {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}

.tool-meta {
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.tool-muted {
  color: var(--fg-subtle);
}

.tool-plain {
  margin: 0;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.tool-caption {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: 16px;
}

.tool-caption-error,
.tool-error,
.tool-status-error .tool-caption {
  color: var(--danger);
}

.tool-error {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.tool-kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 14px;
  margin: 0;
  font-size: var(--fs-sm);
}

.tool-kv dt {
  color: var(--fg-muted);
}

.tool-kv dd {
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.tool-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tool-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  list-style: none;
}

.tool-section-title {
  color: var(--fg);
  font-weight: 500;
}

.tool-section-sub {
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}

.tool-section-chevron {
  display: inline-flex;
  width: 12px;
  height: 12px;
  transition: transform 140ms var(--ease);
}

.tool-section-chevron .icon {
  width: 12px;
  height: 12px;
}

.tool-section-head[aria-expanded="true"] .tool-section-chevron {
  transform: rotate(90deg);
}

.tool-section-body {
  min-width: 0;
}

.tool-scroll {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.tool-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Shell: commands and their output ------------------------------------------------------------------------------ */

.tool-bash {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tool-command,
.tool-code,
.tool-output,
.tool-stderr,
.tool-code-lines {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  overflow: auto;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: calc(12.5px * var(--fs-scale, 1));
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tool-command,
.tool-code,
.tool-output {
  padding: 8px 10px;
  background: var(--bg-sunken);
  color: var(--fg);
}

.tool-output {
  max-height: 240px;
}

.tool-card.is-wrap .tool-command,
.tool-card.is-wrap .tool-output {
  white-space: pre-wrap;
}

.tool-stderr {
  padding: 6px 10px 6px 12px;
  border-left: 2px solid var(--danger);
  background: none;
  color: var(--danger);
  max-height: 180px;
}

.tool-code-inline {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.tool-code-error {
  color: var(--danger);
}

.tool-code-lines {
  padding: 0;
  background: none;
}

.tool-code-json {
  white-space: pre;
}

/* ---- Files: read lines, diffs ------------------------------------------------------------------------------------- */

.tool-line {
  display: grid;
  grid-template-columns: 3.5ch minmax(0, 1fr);
  gap: 0 10px;
  font-family: var(--font-mono);
  font-size: calc(12.5px * var(--fs-scale, 1));
  line-height: 1.55;
}

.tool-ln {
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
  text-align: end;
  user-select: none;
  white-space: nowrap;
}

.tool-lc {
  min-width: 0;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tool-diff-view {
  min-width: 0;
  max-width: 100%;
}

.tool-diff {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  font-family: var(--font-mono);
  font-size: calc(12.5px * var(--fs-scale, 1));
  line-height: 1.55;
}

.tool-diff-label {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
}

.tool-hunk {
  padding: 4px 10px;
  background: var(--bg-sunken);
  color: var(--fg-subtle);
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-diff-row {
  display: grid;
  grid-template-columns: 3.5ch 3.5ch 1ch minmax(0, 1fr);
  gap: 0 6px;
  min-width: max-content;
  padding: 0 10px 0 6px;
  color: var(--fg);
}

.tool-diff-row.is-add {
  background: var(--diff-add-bg);
}

.tool-diff-row.is-del {
  background: var(--diff-del-bg);
}

.tool-diff-row.is-ctx {
  color: var(--fg-muted);
}

.tool-diff-row .tool-ln {
  font-size: var(--fs-xs);
}

.tool-sign {
  color: var(--fg-muted);
  text-align: center;
  user-select: none;
}

.tool-diff-row.is-add .tool-sign {
  color: var(--success);
}

.tool-diff-row.is-del .tool-sign {
  color: var(--danger);
}

.tool-dc {
  white-space: pre;
}

/* ---- Images: the screenshot in the row, the full-size view in a dialog ---------------------------------------------- */

.tool-image {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.tool-image-button {
  display: inline-flex;
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  overflow: hidden;
  cursor: zoom-in;
}

.tool-image-button img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.tool-image-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.tool-image-full {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* ---- Structured results: todos, plans, tasks, search and web lists, MCP and agent output ---------------------------- */

.tool-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.tool-progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 140ms var(--ease);
}

.tool-todos,
.tool-tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tool-todo-list,
.tool-task-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-todo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  min-height: 24px;
  color: var(--fg-muted);
}

.tool-todo.is-in_progress {
  color: var(--fg);
}

.tool-todo.is-completed {
  color: var(--fg-subtle);
}

.tool-todo-mark {
  flex: 0 0 auto;
  width: 1.2em;
  color: var(--fg-subtle);
  text-align: center;
}

.tool-todo.is-in_progress .tool-todo-mark {
  color: var(--accent);
}

.tool-todo.is-completed .tool-todo-mark {
  color: var(--success);
}

.tool-todo-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tool-plan,
.tool-plan-card,
.tool-markdown {
  min-width: 0;
}

.tool-plan-card {
  box-sizing: border-box;
  max-height: 46vh;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  overflow-y: auto;
}

.tool-markdown {
  font-size: var(--fs-prose);
}

.tool-task-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  min-height: 24px;
}

.tool-task-subject {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--fg);
}

.tool-list-wrap,
.tool-search,
.tool-web,
.tool-mcp,
.tool-agent,
.tool-generic,
.tool-file,
.tool-activity {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tool-row {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: calc(12.5px * var(--fs-scale, 1));
  line-height: 1.7;
}

/* Flags and filters shown as small mono chips; the tint says what kind of flag it is. */
.tool-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.tool-chip-mono {
  font-family: var(--font-mono);
}

.tool-chip-accent {
  background: var(--accent-soft);
  color: var(--accent);
}

.tool-chip-success {
  color: var(--success);
}

.tool-chip-warning {
  color: var(--attention);
}

.tool-chip-danger {
  color: var(--danger);
}

.tool-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.tool-link-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 28px;
}

.tool-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-decoration: none;
}

.tool-link:hover {
  text-decoration: underline;
}

.tool-link-title {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--fg);
  font-weight: 500;
}

.tool-activity {
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.tool-background {
  align-self: flex-start;
}

/* The detail of a tool call shown inside a permission card: the body alone, without the row's header, rule or toolbar. */
.tool-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.tool-command-block {
  position: relative;
  min-width: 0;
}

.tool-command-block .tool-command {
  padding-right: 40px;
}

/* The copy icon sits in the corner of its block; its hit area stays inside the block. */
.tool-copy-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}

.tool-copy-icon:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

.tool-copy-icon .icon {
  width: 13px;
  height: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .tool-arc,
  .tool-chevron .icon,
  .tool-section-chevron,
  .tool-progress-bar {
    animation: none;
    transition: none;
  }

  .tool-arc {
    border-right-color: currentColor;
  }
}

@media (pointer: coarse) {
  /* Touch targets: the row, its actions and the expanders are at least 44 px tall. */
  .tool-head,
  .tool-action,
  .tool-more,
  .tool-section-head {
    min-height: 44px;
  }

  .tool-copy-icon {
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
  }

  .tool-command-block .tool-command {
    padding-right: 52px;
  }
}