Chat with an agent

/* Story scaffolding. No `pds-` prefix so Annotate doesn't flag it as a
   net-new component. The frame stands in for a drawer: full height, docked to
   the right edge, with the drawer shadow. */
.chat-with-agent-story__frame {
	box-shadow: var(--pds-elevation-drawer-right);
	height: 100vh;
	margin-inline-start: auto;
	width: fit-content;
}

.chat-with-agent-story__summary {
	align-items: center;
	background-color: var(--pds-color-surface-default-secondary);
	display: flex;
	gap: var(--pds-spacing-xs);
	padding-block: var(--pds-spacing-xs);
	padding-inline: var(--chat-panel-inset);
}

.chat-with-agent-story__rows {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-xs);
	margin-block-start: var(--pds-spacing-xs);
	padding-inline: var(--chat-panel-inset);
}

/* A full-bleed rule above the view switch. */
.chat-with-agent-story__views {
	border-block-start: var(--pds-border-width-default) solid
		var(--pds-color-border-default-secondary);
	margin-block-start: var(--pds-spacing-s);
	padding-block-start: var(--pds-spacing-s);
	padding-inline: var(--chat-panel-inset);
}

.chat-with-agent-story__fill {
	height: 100%;
}

/* The PDS empty state heading is 2xl; the chat reference uses xl. */
.chat-with-agent-story__empty .pds-vertical-empty-state__heading {
	font-size: var(--pds-typography-size-xl);
}

/* The description is xs (the pds-copy-xs class) in the secondary color. */
.chat-with-agent-story__empty .chat-with-agent-story__empty-message {
	color: var(--pds-color-foreground-default-secondary);
	margin-block-start: 0;
}

/* Heading to description: 2xs. */
.chat-with-agent-story__empty .pds-vertical-empty-state__text {
	row-gap: var(--pds-spacing-2xs);
}

/* The view switch fills the header width, with equal segments. The PDS
   Segmented Button hugs its content and has no full-width option. */
.chat-with-agent-story__views .pds-segmented-button {
	display: block;
	width: 100%;
}

.chat-with-agent-story__views .pds-segmented-button__track {
	display: flex;
	width: 100%;
}

.chat-with-agent-story__views .pds-segmented-button__option {
	flex: 1;
}

.chat-with-agent-story__views .pds-segmented-button__option label {
	flex: 1;
}

.chat-with-agent-story__editing {
	align-items: center;
	display: inline-flex;
	gap: var(--pds-spacing-xs);
}

.chat-with-agent-story__summary > .pds-icon {
	margin-inline-start: auto;
}

/* The Add page button matches the Tag (s) height: 24px. The smallest PDS Button
   is 28px. */
.chat-with-agent-story__editing .pds-button {
	--button-height: var(--pds-spacing-xl);
}

/* Trial: a neutral grey (silver) for the Home tag, using the Badge's
   silver-muted tokens. The PDS Tag has no neutral color. */
.chat-with-agent-story__editing .pds-tag {
	--tag-bg: var(--pds-color-badge-silver-muted-background);
	--tag-fg: var(--pds-color-badge-silver-muted-foreground);
}

/* The reply sits under the chain of thought. */
.chat-with-agent-story__reply {
	margin-block-start: var(--pds-spacing-s);
}

/* Empty state and composer stacked together, centered in the content area. */
.chat-with-agent-story__sample {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-xl);
	justify-content: center;
	min-height: 100%;
	/* The Chat Panel's fade adds bottom padding to the content area but the top
	   padding is smaller; this evens them so the group is truly centered. */
	padding-block-start: calc(var(--pds-spacing-2xl) - var(--pds-spacing-s));
}

/* The empty state's own block padding is dropped so the gap to the chat input
   is the group's gap (xl). */
.chat-with-agent-story__empty {
	padding-block: 0;
}

/* Thumbs under a plain reply. */
.chat-with-agent-story__feedback {
	margin-block-start: var(--pds-spacing-s);
}

/* The context bar above the chat input (the aboveField slot) after Refine. */
.chat-with-agent-story__context {
	align-items: center;
	color: var(--pds-color-foreground-default);
	display: flex;
	gap: var(--pds-spacing-xs);
}

.chat-with-agent-story__context-dismiss {
	margin-inline-start: auto;
}