﻿.project-ai-chat-attachment-editor {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--bs-primary) 72%, transparent) 0 .24rem, transparent .24rem),
		color-mix(in srgb, var(--bs-primary) 3%, var(--bs-body-bg));
	border: 1px solid var(--bs-border-color);
	border-radius: .7rem;
	padding: 1rem 1rem 1rem 1.2rem;
}

.project-ai-chat-attachment-editor__heading {
	align-items: flex-start;
	display: flex;
	gap: .75rem;
	margin-bottom: 1rem;
}

.project-ai-chat-attachment-editor__icon {
	align-items: center;
	background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg));
	border: 1px solid color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
	border-radius: .55rem;
	color: var(--bs-primary);
	display: inline-flex;
	font-size: 1.1rem;
	height: 2.35rem;
	justify-content: center;
	min-width: 2.35rem;
}

.project-ai-chat-attachment-picker {
	align-items: center;
	background: var(--bs-body-bg);
	border: 1px dashed color-mix(in srgb, var(--bs-primary) 58%, var(--bs-border-color));
	border-radius: .65rem;
	cursor: pointer;
	display: grid;
	gap: .15rem .65rem;
	grid-template-columns: auto minmax(0, 1fr);
	margin-bottom: 1rem;
	padding: .9rem 1rem;
	transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.project-ai-chat-attachment-picker:hover,
.project-ai-chat-attachment-picker:focus-within {
	background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
	border-color: var(--bs-primary);
	transform: translateY(-1px);
}

.project-ai-chat-attachment-picker:has(+ input:focus-visible) {
	outline: .2rem solid color-mix(in srgb, var(--bs-primary) 28%, transparent);
	outline-offset: .12rem;
}

.project-ai-chat-attachment-picker > i {
	color: var(--bs-primary);
	font-size: 1.5rem;
	grid-row: 1 / span 2;
}

.project-ai-chat-attachment-picker > span {
	font-weight: 650;
}

.project-ai-chat-attachment-picker > small {
	color: var(--bs-secondary-color);
	overflow-wrap: anywhere;
}

.project-ai-chat-attachment-fields {
	display: grid;
	gap: .85rem;
	grid-template-columns: minmax(12rem, .8fr) minmax(16rem, 1.2fr);
}

.project-ai-chat-attachment-fields .form-label {
	font-weight: 650;
}

@media (max-width: 767.98px) {
	.project-ai-chat-attachment-editor {
		padding: .85rem .8rem .85rem 1rem;
	}

	.project-ai-chat-attachment-fields {
		grid-template-columns: 1fr;
	}
}
