﻿.project-ai-chat__capability-launch {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 2.35rem;
	padding: .45rem .75rem;
	border: 1px solid var(--bs-border-color);
	border-radius: .65rem;
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	font-size: .84rem;
	font-weight: 650;
	margin-left: auto;
}

.project-ai-chat__capability-launch:hover,
.project-ai-chat__capability-launch:focus-visible {
	border-color: rgba(var(--bs-primary-rgb), .55);
	background: rgba(var(--bs-primary-rgb), .08);
	color: var(--bs-primary-text-emphasis);
}

.project-ai-capabilities .modal-header {
	align-items: flex-start;
}

.project-ai-capabilities__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.project-ai-capability {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	gap: .8rem 1rem;
	padding: 1.1rem;
	border: 1px solid var(--bs-border-color);
	border-radius: 1rem;
	background: linear-gradient(145deg, rgba(var(--bs-primary-rgb), .055), transparent 58%), var(--bs-body-bg);
	box-shadow: var(--bs-box-shadow-sm);
}

.project-ai-capability__icon {
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: .85rem;
	background: rgba(var(--bs-primary-rgb), .12);
	color: var(--bs-primary-text-emphasis);
	font-size: 1.25rem;
}

.project-ai-capability h3 {
	margin: 0 0 .35rem;
	font-size: 1rem;
}

.project-ai-capability p {
	margin: 0;
	color: var(--bs-secondary-color);
	font-size: .87rem;
	line-height: 1.5;
}

.project-ai-capability__action {
	grid-column: 2;
}

.project-ai-capability__action .btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.project-ai-capabilities__footer {
	justify-content: flex-end;
}

@media (max-width: 991.98px) {
	.project-ai-chat__capability-launch span {
		display: none;
	}

	.project-ai-capabilities__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 575.98px) {
	.project-ai-capability {
		grid-template-columns: 1fr;
	}

	.project-ai-capability__action {
		grid-column: 1;
	}

	.project-ai-capabilities__footer {
		align-items: stretch;
		flex-direction: column;
	}
}
