.agent-tool-stream,
.agent-activity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 2px 0 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.agent-activity-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  margin: 0;
  padding: 1px 0;
  border: 0;
  background: transparent;
  color: var(--text-muted, #52514e);
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.agent-activity-toggle:hover,
.agent-activity-toggle:focus-visible {
  color: var(--text-primary, #0b0b0b);
  outline: none;
}

.agent-activity-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-activity-caret {
  display: inline-flex;
  justify-content: center;
}

.agent-activity[data-expanded="true"] .agent-activity-caret {
  transform: rotate(0);
}
.agent-activity-caret { transform: rotate(-90deg); width: 12px; }
.agent-activity-status { color: var(--text-secondary); font-size: 13px; line-height: 24px; }
.agent-activity[data-terminal="false"] .agent-activity-summary,
.agent-activity[data-terminal="false"] .agent-activity-status { animation: activity-breathe 1.8s ease-in-out infinite; }
@keyframes activity-breathe { 50% { opacity: .55; } }
.agent-activity-body, .agent-activity-body-inner { min-width: 0; }
.agent-activity-body-inner { border-radius: 8px; }
.agent-activity[data-expanded="true"] .agent-activity-body-inner { border: 0; margin-top: 6px; }
.agent-activity-body-inner > .agent-tool-item { padding: 5px 10px; box-sizing: border-box; }
.agent-tool-list { position: relative; min-width: 0; }
.agent-tool-list > .agent-tool-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 23px;
  bottom: -1px;
  width: 1px;
  background: color-mix(in srgb, var(--border, rgb(11 11 11 / 10%)) 85%, transparent);
  pointer-events: none;
}
.agent-tool-web-copy { display: flex; gap: 7px; }
.agent-tool-verb { color: var(--text-faint); flex: none; }
.agent-tool-target { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-trace-result-domain { flex: 0 1 auto; max-width: 35%; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .agent-activity-summary, .agent-activity-status { animation: none !important; } }
html[data-reduce-motion="true"] .agent-activity-summary, html[data-reduce-motion="true"] .agent-activity-status { animation: none !important; }

.agent-activity-needs-action {
  color: var(--text-primary, #0b0b0b);
  font-size: 13px;
  line-height: 20px;
}

.agent-activity-phases {
  margin: 0;
  padding: 0 0 4px 20px;
  color: var(--text-faint, #898781);
  font-size: 12px;
  line-height: 18px;
}

.agent-activity-body[hidden] {
  display: none;
}

.agent-tool-item {
  position: relative;
  min-width: 0;
  width: 100%;
}

.agent-tool-item-toggle {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 24px;
  margin: 0;
  padding: 1px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted, #52514e);
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  cursor: default;
}

.agent-tool-item-toggle,
.agent-activity-peek {
  position: relative;
  z-index: 1;
}

button.agent-tool-item-toggle {
  cursor: pointer;
}

button.agent-tool-item-toggle:hover,
button.agent-tool-item-toggle:focus-visible {
  color: var(--text-primary, #0b0b0b);
  background: transparent;
  outline: none;
  box-shadow: none;
}

button.agent-tool-item-toggle:focus-visible .agent-tool-item-copy {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.agent-tool-item-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--text-faint, #898781);
  background: var(--page, #f9f9f7);
  border-radius: 999px;
}

.agent-tool-item-icon .icon {
  width: 14px;
  height: 14px;
}

.agent-tool-item-progress {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  color: var(--text-faint, #898781);
}

.agent-tool-item-progress .icon {
  width: 11px;
  height: 11px;
  animation: agent-tool-spin 800ms linear infinite;
}

.agent-tool-item-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-tool-item-copy--break {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  text-overflow: unset;
}

.agent-tool-item-copy code,
.agent-tool-inline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary, #0b0b0b);
  overflow-wrap: anywhere;
}

.agent-tool-item-meta {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.agent-tool-item-caret {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--text-faint, #898781);
}

.agent-tool-item-caret .icon {
  width: 11px;
  height: 11px;
  transition: transform 180ms var(--ease-standard, ease-out);
}

.agent-tool-item[data-expanded="true"] > .agent-tool-item-toggle .agent-tool-item-caret .icon {
  transform: rotate(180deg);
}

.agent-tool-plus {
  color: var(--success, #1a8633);
  font-variant-numeric: tabular-nums;
}

.agent-tool-minus {
  color: var(--minus, #c45c26);
  font-variant-numeric: tabular-nums;
}

.agent-tool-item[data-tool-status="error"] .agent-tool-item-copy,
.agent-tool-item[data-tool-status="approval"] .agent-tool-item-copy {
  color: var(--text-secondary, #383835);
}

.agent-tool-item-panel {
  display: grid;
  grid-template-rows: 0fr;
  width: auto;
  min-width: 0;
  margin: 0 0 0 24px;
  transition: grid-template-rows 200ms var(--ease-standard, ease-out);
}

.agent-tool-item[data-expanded="true"] .agent-tool-item-panel {
  grid-template-rows: 1fr;
}

.agent-tool-item-panel-inner {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--text-secondary, #383835);
  container-type: inline-size;
  container-name: agent-tool-detail;
  transition: opacity 180ms var(--ease-standard, ease-out);
}

.agent-activity-peek {
  display: block;
  width: min(100%, 620px);
  max-width: 100%;
  margin: 0;
  padding: 0 0 2px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  cursor: pointer;
  pointer-events: auto !important;
  -webkit-mask-image: linear-gradient(#000 64%, transparent);
  mask-image: linear-gradient(#000 64%, transparent);
}
.agent-activity-peek:hover,
.agent-activity-peek:focus-visible {
  color: var(--text-primary);
  outline: none;
}
.agent-activity-peek:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.agent-tool-item[data-expanded="true"] .agent-tool-item-panel-inner {
  opacity: 1;
}

.agent-tool-nest {
  min-width: 0;
}

.agent-tool-nest > summary {
  list-style: none;
  cursor: pointer;
}

.agent-tool-nest > summary::-webkit-details-marker {
  display: none;
}

.agent-tool-query {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 2px 0 6px;
  color: var(--text-secondary, #383835);
  font-size: 13px;
  line-height: 20px;
}

.agent-tool-query-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-trace-count {
  flex: none;
  color: var(--text-faint, #898781);
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}

.agent-tool-nest > summary.agent-tool-query {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.agent-tool-nest > summary:focus-visible {
  outline: none;
}

.agent-tool-nest > summary:focus-visible .agent-tool-query-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.agent-tool-nest:not([open]) > summary .agent-tool-item-caret .icon {
  transform: none;
}

.agent-tool-nest[open] > summary .agent-tool-item-caret .icon {
  transform: rotate(180deg);
}

.agent-trace-results {
  display: grid;
  gap: 2px;
  max-height: 148px;
  overflow: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.agent-trace-result {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 24px;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
}

a.agent-trace-result {
  color: inherit;
}

a.agent-trace-result:hover .agent-trace-result-title,
a.agent-trace-result:focus-visible .agent-trace-result-title {
  color: var(--text-primary, #0b0b0b);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.agent-trace-result:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--radius-sm, 6px);
}

.agent-trace-result + .agent-trace-result {
  box-shadow: none;
}

.agent-trace-result-title {
  flex: 1 1 12rem;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary, #383835);
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container agent-tool-detail (max-width: 480px) {
  .agent-trace-count {
    display: none;
  }

  .agent-tool-query,
  .agent-tool-nest > summary.agent-tool-query {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.agent-trace-command {
  display: grid;
  gap: 4px;
}

.agent-tool-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  font-size: 12px;
}

.agent-tool-row span { color: var(--text-muted, #52514e); }
.agent-tool-row code,
.agent-tool-output {
  overflow: auto;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.agent-tool-output {
  margin: 4px 0 0;
  max-height: 180px;
  color: var(--text-muted, #52514e);
  white-space: pre-wrap;
}

.agent-tool-item .button--compact {
  justify-self: start;
  margin-top: 2px;
}

.agent-tool-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 12px;
  color: var(--text-faint, #898781);
  font-size: 12px;
}

.agent-tool-summary .icon {
  width: 11px;
  height: 11px;
}

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

@media (prefers-reduced-motion: reduce) {
  .agent-tool-item-caret .icon,
  .agent-tool-item-panel,
  .agent-tool-item-panel-inner,
  .agent-tool-item-progress .icon,
  .agent-tool-nest > summary .agent-tool-item-caret .icon {
    animation: none;
    transition: none;
  }
}

html[data-reduce-motion="true"] .agent-tool-item-caret .icon,
html[data-reduce-motion="true"] .agent-tool-item-panel,
html[data-reduce-motion="true"] .agent-tool-item-panel-inner,
html[data-reduce-motion="true"] .agent-tool-item-progress .icon,
html[data-reduce-motion="true"] .agent-tool-nest > summary .agent-tool-item-caret .icon {
  animation: none;
  transition: none;
}

/* Nested Pi calls retain individual status within the existing activity list. */
.agent-tool-list > .agent-tool-item--nested { margin-inline-start: 16px; }