.chat-topic-selector {
	margin-bottom: var(--chat--spacing);
	padding: calc(var(--chat--spacing) * 0.5);
	border-radius: var(--chat--border-radius);
	background: var(--chat--color-light);
	color: var(--chat--color-dark);
	display: flex;
	flex-direction: column;
	gap: 0.75em;

	&__copy {
		display: flex;
		flex-direction: column;
		gap: 0.25em;
	}

	&__heading {
		font-weight: 600;
		margin: 0;
	}

	&__description {
		margin: 0;
		font-size: 0.875em;
		color: var(--chat--color-dark);
		opacity: 0.8;
	}

	&__pills {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
	}

	&__pill {
		border: 1px solid var(--chat--color--primary);
		background: var(--chat--color-white);
		color: var(--chat--color--primary);
		border-radius: 999px;
		padding: 0.35em 0.9em;
		font-size: 0.875em;
		cursor: pointer;
		transition:
			background var(--chat--transition-duration),
			color var(--chat--transition-duration),
			border-color var(--chat--transition-duration);

		&:hover,
		&:focus-visible {
			background: var(--chat--color--primary);
			color: var(--chat--color-white);
			outline: none;
		}
	}
}