Chain of Thought

.pds-chain-of-thought {
	--chain-of-thought-indent: var(--pds-spacing-s);

	color: var(--pds-color-foreground-default);
	font-family: var(--pds-typography-ff-default);
	font-size: var(--pds-typography-size-s);
	line-height: var(--pds-typography-lh-m);
}

/* The size sets the summary (through ThinkingState) and, one step down, the rows
   and reasoning text. */
.pds-chain-of-thought {
	--agent-step-font-size: var(--pds-typography-size-xs);
}

.pds-chain-of-thought--m {
	--agent-step-font-size: var(--pds-typography-size-s);
}

.pds-chain-of-thought > details > summary {
	align-items: center;
	border-radius: var(--pds-border-radius-default);
	cursor: pointer;
	display: inline-flex;
	gap: var(--pds-spacing-2xs);
	list-style: none;

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

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

.pds-chain-of-thought__icon {
	color: var(--pds-color-foreground-default-secondary);
	transition: var(--pds-animation-transition-rotation);
}

/* Hover cue: the chevron darkens. */
.pds-chain-of-thought > details > summary:hover .pds-chain-of-thought__icon {
	color: var(--pds-color-foreground-default);
}

.pds-chain-of-thought__icon--open {
	transform: rotate(180deg);
}

/* The rule down the left edge ties the steps to the line above them. */
.pds-chain-of-thought__list {
	border-inline-start: var(--pds-border-width-default) solid
		var(--pds-color-border-default);
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-xs);
	list-style: none;
	margin-block: var(--pds-spacing-xs) 0;
	margin-inline-start: var(--pds-spacing-2xs);
	padding: 0 0 0 var(--chain-of-thought-indent);
}

/* Reasoning is running text, not a list of rows. */
.pds-chain-of-thought--reasoning .pds-chain-of-thought__list {
	color: var(--pds-color-foreground-default-secondary);
	font-size: var(--agent-step-font-size);
	gap: var(--pds-spacing-s);

	/* PDS styles every <p> at the `s` text size, which would ignore the size
	   set above. */
	p {
		font-size: inherit;
		margin: 0;
	}
}

/* Search results and tool calls lead with a heavier label. */
.pds-chain-of-thought--coding .pds-agent-step__label,
.pds-chain-of-thought--search .pds-agent-step__label {
	font-weight: var(--pds-typography-fw-medium);
}

.pds-chain-of-thought--search .pds-agent-step--quiet .pds-agent-step__label {
	font-weight: var(--pds-typography-fw-regular);
}