Thinking State

.pds-thinking-state {
	--thinking-state-font-size: var(--pds-typography-size-s);
	--thinking-state-gap: var(--pds-spacing-2xs);
	--thinking-state-time-size: var(--pds-typography-size-xs);

	align-items: center;
	color: var(--pds-color-foreground-default);
	display: inline-flex;
	font-family: var(--pds-typography-ff-default);
	font-size: var(--thinking-state-font-size);
	gap: var(--thinking-state-gap);
	line-height: var(--pds-typography-lh-m);
}

/* Sizes are named after the type tokens: the text takes the matching size, the
   icon is the same height as the text, and the time is one step smaller (it
   stays at xs for the smallest size, since 10px is too small to read). The gap
   grows a step per size. */
.pds-thinking-state--xs {
	--thinking-state-font-size: var(--pds-typography-size-xs);
	--thinking-state-gap: var(--pds-spacing-3xs);
	--thinking-state-time-size: var(--pds-typography-size-xs);
}

.pds-thinking-state--m {
	--thinking-state-font-size: var(--pds-typography-size-m);
	--thinking-state-gap: var(--pds-spacing-xs);
	--thinking-state-time-size: var(--pds-typography-size-s);
}

.pds-thinking-state__icon {
	flex-shrink: 0;
}

.pds-thinking-state__time {
	color: var(--pds-color-foreground-default-secondary);
	font-family: var(--pds-typography-ff-code);
	font-size: var(--thinking-state-time-size);
	font-variant-numeric: tabular-nums;
}

/* Stopped: the run was cut off, so the icon and label are muted. The time keeps
   its own secondary color. */
.pds-thinking-state--stopped .pds-thinking-state__icon,
.pds-thinking-state--stopped .pds-thinking-state__label {
	color: var(--pds-color-foreground-default-secondary);
}

/* While the agent is working the icon shrinks and returns to full size, in step
   with the label's shimmer. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.pds-thinking-state--active .pds-thinking-state__icon {
		animation: thinking-state-pulse var(--pds-animation-duration-ai-shimmer)
			ease-in-out infinite;
	}
}

@keyframes thinking-state-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.75);
	}
}