Agent avatar

/* Agent avatar: a dark fill with a lightning-bolt icon, ringed by the AI
   gradient with a small gap. Human avatars have no ring, so an agent reads as
   an agent at a glance and not by color alone. */
.pds-agent-avatar {
	--avatar-halo-gap: 0.0625rem;
	--avatar-icon-size: 0.625rem;
	--avatar-halo-ring: 0.0625rem;
	--avatar-radius: 100%;
	--avatar-size: 1.25rem;

	align-items: center;
	border-radius: var(--avatar-radius);
	display: inline-flex;
	height: var(--avatar-size);
	justify-content: center;
	vertical-align: top;
	width: var(--avatar-size);
}

/* Without the halo the content is just the fill. */
.pds-agent-avatar__content {
	align-items: center;
	background-color: var(--pds-color-foreground-default);
	border-radius: var(--avatar-radius);
	display: flex;
	height: var(--avatar-size);
	justify-content: center;
	width: var(--avatar-size);
}

/* Halo: three stacked backgrounds: the fill (content box), a surface-colored
   gap (padding box) and the gradient ring (border box). The gradient is not a
   color, so it cannot go in border-color; the border is transparent and the
   gradient shows through it. */
.pds-agent-avatar--halo .pds-agent-avatar__content {
	background:
		linear-gradient(
				var(--pds-color-foreground-default),
				var(--pds-color-foreground-default)
			)
			content-box,
		linear-gradient(
				var(--pds-color-surface-default),
				var(--pds-color-surface-default)
			)
			padding-box,
		var(--pds-gradient-ai-active) border-box;
	border: var(--avatar-halo-ring) solid transparent;
	box-sizing: border-box;
	padding: var(--avatar-halo-gap);
}

.pds-agent-avatar__content--link {
	&:hover {
		cursor: pointer;
		opacity: 0.8;
	}

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

.pds-agent-avatar__icon {
	color: var(--pds-color-foreground-reverse);
	height: var(--avatar-icon-size);
	width: var(--avatar-icon-size);
}

/* Shape modifiers */
.pds-agent-avatar--square {
	--avatar-radius: var(--pds-border-radius-default);
}

/* Size modifiers */
.pds-agent-avatar--xs {
	--avatar-icon-size: 0.5rem;
	--avatar-size: 1rem;
}

.pds-agent-avatar--m {
	--avatar-icon-size: 0.75rem;
	--avatar-size: 1.5rem;
}

.pds-agent-avatar--l {
	--avatar-icon-size: 0.875rem;
	--avatar-halo-ring: 0.125rem;
	--avatar-size: 2rem;
}

.pds-agent-avatar--xl {
	--avatar-halo-gap: 0.125rem;
	--avatar-icon-size: 1.125rem;
	--avatar-halo-ring: 0.125rem;
	--avatar-size: 2.5rem;
}