﻿.project-ai-chat-context {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 .55rem;
	min-width: 0;
}

.project-ai-chat-context__label {
	color: var(--ztm-text-secondary);
	font-size: .78rem;
	font-weight: 600;
}

.project-ai-chat-context__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	min-width: 0;
}

.project-ai-chat-context__chip {
	display: inline-flex;
	align-items: center;
	gap: .38rem;
	max-width: min(28rem, 100%);
	padding: .28rem .34rem .28rem .58rem;
	border: 1px solid color-mix(in srgb, var(--bs-primary) 32%, var(--bs-border-color));
	border-radius: 999px;
	background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
	color: var(--ztm-text-primary);
	font-size: .82rem;
}

.project-ai-chat-context__chip > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-ai-chat-context__chip button {
	display: inline-grid;
	place-items: center;
	width: 1.55rem;
	height: 1.55rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
}

.project-ai-chat-context__chip button:hover,
.project-ai-chat-context__chip button:focus-visible {
	background: color-mix(in srgb, var(--bs-primary) 15%, transparent);
	outline: none;
}

@media (max-width: 575.98px) {
	.project-ai-chat-context {
		align-items: flex-start;
		flex-direction: column;
		gap: .3rem;
	}
}
