Agent Step

.pds-agent-step {
	color: var(--pds-color-foreground-default);
	font-family: var(--pds-typography-ff-default);
	font-size: var(--agent-step-font-size, var(--pds-typography-size-xs));
	line-height: var(--pds-typography-lh-m);
	--agent-step-status-color: var(--pds-color-foreground-default-secondary);
}

.pds-agent-step--error {
	--agent-step-status-color: var(--pds-color-status-critical-foreground);
}

.pds-agent-step--pending {
	--agent-step-status-color: var(--pds-color-foreground-default-secondary);

	color: var(--pds-color-foreground-default-secondary);
}

.pds-agent-step__row {
	align-items: center;
	display: flex;
	gap: var(--pds-spacing-xs);
	list-style: none;

	&::-webkit-details-marker {
		display: none;
	}
}

/* An expandable step is only as wide as its content, with the chevron right
   after the text (like the Chain of Thought summary), so the chevron reads as
   part of what you click. */
summary.pds-agent-step__row {
	border-radius: var(--pds-border-radius-default);
	cursor: pointer;
	display: inline-flex;

	&:focus-visible {
		outline: var(--pds-border-width-outline) solid
			var(--pds-color-interactive-focus);
	}
}

.pds-agent-step__status,
.pds-agent-step__toggle {
	height: 1em;
	width: 1em;
}

.pds-agent-step__status {
	color: var(--agent-step-status-color);
	flex-shrink: 0;
}

.pds-agent-step__secondary-text {
	color: var(--pds-color-foreground-default-secondary);
	font-size: var(--pds-typography-size-xs);

	code {
		font-family: var(--pds-typography-ff-code);
	}
}

.pds-agent-step__toggle {
	color: var(--pds-color-foreground-default-secondary);
	flex-shrink: 0;
	transition: var(--pds-animation-transition-rotation);
}

/* Hover cue: the chevron darkens. */
summary.pds-agent-step__row:hover .pds-agent-step__toggle {
	color: var(--pds-color-foreground-default);
}

.pds-agent-step details[open] .pds-agent-step__toggle {
	transform: rotate(90deg);
}

.pds-agent-step__detail {
	color: var(--pds-color-foreground-default-secondary);
	margin-block-start: var(--pds-spacing-2xs);
	padding-inline-start: var(--pds-spacing-l);
}

/* Detail text takes the step's size. Paragraphs would otherwise use the PDS
   default paragraph size and margins. */
.pds-agent-step__detail p {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

.pds-agent-step__detail code {
	font-family: var(--pds-typography-ff-code);
}

.pds-agent-step--quiet {
	color: var(--pds-color-foreground-default-secondary);
}

/* Diff counts in the secondary text slot. */
.pds-agent-step__added {
	color: var(--pds-color-status-success-foreground);
}

.pds-agent-step__removed {
	color: var(--pds-color-status-critical-foreground);
}