/**
 * Gelu AI API Status
 * Version: 1.1.0
 * Author: Dan Lee
 */

.aiss {
	--aiss-ok: #16a34a;
	--aiss-warn: #d97706;
	--aiss-bad: #ea580c;
	--aiss-critical: #dc2626;
	--aiss-info: #2563eb;
	--aiss-unknown: #6b7280;

	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-size: 0.95em;
	line-height: 1.3;
	vertical-align: middle;
}

.aiss-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	color: inherit;
	text-decoration: none;
}

.aiss-link:hover .aiss-state {
	text-decoration: underline;
}

.aiss-body {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	flex-wrap: wrap;
}

.aiss-label {
	font-weight: 600;
}

.aiss-label::after {
	content: ":";
}

.aiss-state {
	font-weight: 500;
}

.aiss-meta {
	font-size: 0.82em;
	opacity: 0.65;
}

/* Indicator dot -------------------------------------------------------- */

.aiss-dot {
	flex: 0 0 auto;
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: var(--aiss-unknown);
	box-shadow: 0 0 0 0.18em rgba(107, 114, 128, 0.18);
}

.aiss-dot--ok {
	background: var(--aiss-ok);
	box-shadow: 0 0 0 0.18em rgba(22, 163, 74, 0.18);
}

.aiss-dot--warn {
	background: var(--aiss-warn);
	box-shadow: 0 0 0 0.18em rgba(217, 119, 6, 0.18);
}

.aiss-dot--bad {
	background: var(--aiss-bad);
	box-shadow: 0 0 0 0.18em rgba(234, 88, 12, 0.18);
}

.aiss-dot--critical {
	background: var(--aiss-critical);
	box-shadow: 0 0 0 0.18em rgba(220, 38, 38, 0.2);
}

.aiss-dot--info {
	background: var(--aiss-info);
	box-shadow: 0 0 0 0.18em rgba(37, 99, 235, 0.18);
}

/* Pulse only when something is wrong, and only if motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
	.aiss--critical .aiss-dot,
	.aiss--bad .aiss-dot {
		animation: aiss-pulse 1.8s ease-in-out infinite;
	}
}

@keyframes aiss-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.45;
	}
}

/* Style: badge --------------------------------------------------------- */

.aiss--badge {
	padding: 0.4em 0.85em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.025);
}

/* Style: inline -------------------------------------------------------- */

.aiss--inline {
	padding: 0;
	border: 0;
	background: none;
}

/* Style: card ---------------------------------------------------------- */

.aiss--card {
	display: flex;
	width: 100%;
	padding: 1em 1.15em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-left-width: 4px;
	border-left-color: var(--aiss-unknown);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.02);
}

.aiss--card.aiss--ok {
	border-left-color: var(--aiss-ok);
}

.aiss--card.aiss--warn {
	border-left-color: var(--aiss-warn);
}

.aiss--card.aiss--bad {
	border-left-color: var(--aiss-bad);
}

.aiss--card.aiss--critical {
	border-left-color: var(--aiss-critical);
}

.aiss--card.aiss--info {
	border-left-color: var(--aiss-info);
}

.aiss--card .aiss-body {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15em;
}

/* Dark scheme ---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.aiss--badge,
	.aiss--card {
		border-color: rgba(255, 255, 255, 0.14);
		background: rgba(255, 255, 255, 0.04);
	}
}