/*
 * Agent avatar loaders. 1em = outer frame diameter; the avatar itself is inset
 * 0.15em, so the frame is set to avatar size / 0.7. Colors come from
 * --al-c1..--al-c4 (dark → light: c1, c4, c3, c2), set per agent theme.
 * Every class and keyframe carries the al- prefix: names like ring, shadow or
 * line would otherwise collide with other components.
 */
.al {
	--al-card: #fff;
	position: relative;
	display: block;
	width: 1em;
	height: 1em;
	flex: none;
	pointer-events: none;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .al {
		--al-card: rgb(17 24 39);
	}
}
:root[data-theme="dark"] .al {
	--al-card: rgb(17 24 39);
}
.al-avatar {
	position: absolute;
	inset: 0.15em;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(145deg, var(--al-c2), var(--al-c3));
	z-index: 2;
}
.al-avatar svg {
	width: 100%;
	height: 100%;
	display: block;
}
.al svg.al-layer {
	position: absolute;
	overflow: visible;
}
@keyframes al-spin {
	to {
		transform: rotate(1turn);
	}
}

/* ---------- comet ---------- */
.al-comet .al-ring,
.al-comet .al-head {
	position: absolute;
	inset: 0.02em;
	animation: al-spin 1.1s linear infinite;
}
.al-comet .al-ring {
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0.2turn,
		var(--al-c2) 0.42turn,
		var(--al-c3) 0.66turn,
		var(--al-c4) 0.86turn,
		var(--al-c1) 1turn
	);
	-webkit-mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 0.055em),
		#000 calc(100% - 0.055em + 0.5px)
	);
	mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 0.055em),
		#000 calc(100% - 0.055em + 0.5px)
	);
}
.al-comet .al-head::after {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 0.0275em);
	width: 0.055em;
	height: 0.055em;
	border-radius: 50%;
	background: var(--al-c1);
}

/* ---------- arcs ---------- */
.al-arcs svg.al-layer {
	inset: 0;
	width: 100%;
	height: 100%;
	animation: al-spin 2s linear infinite;
}
.al-arcs .al-layer circle {
	fill: none;
	stroke-width: 6;
	stroke-linecap: round;
}
.al-arcs .al-track {
	stroke: var(--al-c2);
	opacity: 0.45;
}
.al-arcs .al-arc {
	animation:
		al-arc-dash 1.5s ease-in-out infinite,
		al-arc-color 4.5s linear infinite;
}
@keyframes al-arc-dash {
	0% {
		stroke-dasharray: 1 300;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 180 300;
		stroke-dashoffset: -50;
	}
	100% {
		stroke-dasharray: 180 300;
		stroke-dashoffset: -288;
	}
}
@keyframes al-arc-color {
	0%,
	100% {
		stroke: var(--al-c4);
	}
	33% {
		stroke: var(--al-c3);
	}
	66% {
		stroke: var(--al-c1);
	}
}

/* ---------- orbit ---------- */
.al-orbit .al-dot {
	position: absolute;
	inset: 0;
	animation: al-orbit 2s infinite;
}
.al-orbit .al-dot::before {
	content: "";
	position: absolute;
	top: 0.025em;
	left: calc(50% - 0.045em);
	width: 0.09em;
	height: 0.09em;
	border-radius: 50%;
	background: var(--al-c);
}
@keyframes al-orbit {
	0% {
		transform: rotate(0deg);
	}
	80%,
	100% {
		transform: rotate(1turn);
	}
}

/* ---------- ripple ---------- */
.al-ripple .al-wave {
	position: absolute;
	inset: 0.15em;
	border-radius: 50%;
	border: 0.025em solid var(--al-c);
	opacity: 0;
	animation: al-ripple 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
	animation-delay: var(--al-delay);
}
@keyframes al-ripple {
	0% {
		transform: scale(1);
		opacity: 0.95;
	}
	100% {
		transform: scale(1.42);
		opacity: 0;
	}
}

/* ---------- ticks ---------- */
.al-ticks .al-tick {
	position: absolute;
	top: 0.015em;
	left: calc(50% - 0.0125em);
	width: 0.025em;
	height: 0.08em;
	border-radius: 0.0125em;
	transform-origin: 50% 0.485em;
	transform: rotate(calc(var(--al-i) * 15deg));
	background: var(--al-c2);
	opacity: 0.3;
	animation: al-tick 1.2s linear infinite;
	animation-delay: calc((var(--al-i) / 24 - 1) * 1.2s);
}
@keyframes al-tick {
	0% {
		background: var(--al-c1);
		opacity: 1;
	}
	12% {
		background: var(--al-c4);
		opacity: 1;
	}
	30% {
		background: var(--al-c3);
		opacity: 0.85;
	}
	55% {
		background: var(--al-c2);
		opacity: 0.5;
	}
	100% {
		background: var(--al-c2);
		opacity: 0.3;
	}
}

/* ---------- enso (segments driven from JS) ---------- */
.al-enso svg.al-layer {
	inset: 0;
	width: 100%;
	height: 100%;
}
.al-enso line {
	stroke-linecap: round;
	opacity: 0;
}

/* ---------- letters ---------- */
.al-letters .al-letter {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	z-index: 1;
}
.al-letters .al-letter b {
	position: absolute;
	transform: translate(-50%, -50%);
	font:
		700 0.14em/1 "Segoe UI",
		"Helvetica Neue",
		Arial,
		sans-serif;
	color: var(--al-c);
	white-space: nowrap;
}

/* ---------- voice ---------- */
.al-voice .al-bar {
	position: absolute;
	top: 0.025em;
	left: calc(50% - 0.016em);
	width: 0.032em;
	height: 0.1em;
	transform-origin: 50% 0.475em;
	transform: rotate(var(--al-a));
}
.al-voice .al-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0.016em;
	background: var(--al-c);
	transform-origin: 50% 100%;
	animation: al-level var(--al-d) ease-in-out infinite alternate;
	animation-delay: var(--al-delay);
}
.al-voice.al-rolling .al-bar::before {
	animation:
		al-level var(--al-d) ease-in-out var(--al-delay) infinite alternate,
		al-tone 1.8s linear var(--al-tdelay) infinite;
}
@keyframes al-level {
	from {
		transform: scaleY(0.18);
	}
	to {
		transform: scaleY(1);
	}
}
@keyframes al-tone {
	0%,
	100% {
		background: var(--al-c2);
	}
	18% {
		background: var(--al-c3);
	}
	36% {
		background: var(--al-c4);
	}
	50% {
		background: var(--al-c1);
	}
	64% {
		background: var(--al-c4);
	}
	82% {
		background: var(--al-c3);
	}
}

/* ---------- think ---------- */
.al-think .al-bubble {
	position: absolute;
	left: var(--al-x);
	top: var(--al-y);
	width: var(--al-s);
	height: var(--al-s);
	margin: calc(var(--al-s) / -2) 0 0 calc(var(--al-s) / -2);
	border-radius: 50%;
	background: var(--al-c);
	opacity: 0;
	transform: scale(0);
	animation: al-pop 1.8s cubic-bezier(0.3, 1.6, 0.5, 1) infinite;
	animation-delay: var(--al-delay);
	z-index: 3;
}
.al-think .al-bubble.al-big {
	background: linear-gradient(145deg, var(--al-c4), var(--al-c1));
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.012em;
}
.al-think .al-bubble.al-big i {
	width: 0.022em;
	height: 0.022em;
	border-radius: 50%;
	background: var(--al-c2);
	animation: al-blink 0.9s ease-in-out infinite;
}
.al-think .al-bubble.al-big i:nth-child(2) {
	animation-delay: 0.15s;
}
.al-think .al-bubble.al-big i:nth-child(3) {
	animation-delay: 0.3s;
}
.al-think .al-bubble.al-big b {
	font:
		800 0.105em/1 "Segoe UI",
		"Helvetica Neue",
		Arial,
		sans-serif;
	color: var(--al-c2);
}
@keyframes al-pop {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	18% {
		transform: scale(1);
		opacity: 1;
	}
	72% {
		transform: scale(1);
		opacity: 1;
	}
	90%,
	100% {
		transform: scale(0.6);
		opacity: 0;
	}
}
@keyframes al-blink {
	0%,
	100% {
		opacity: 0.35;
	}
	50% {
		opacity: 1;
	}
}

/* ---------- signal ---------- */
.al-signal svg.al-layer {
	inset: 0;
	width: 100%;
	height: 100%;
}
.al-signal .al-layer path {
	fill: none;
	stroke: var(--al-c);
	stroke-width: 3.6;
	stroke-linecap: round;
	opacity: 0.15;
	animation: al-beam 1.6s ease-in-out infinite;
	animation-delay: var(--al-delay);
}
@keyframes al-beam {
	0%,
	100% {
		opacity: 0.15;
	}
	30% {
		opacity: 1;
	}
	60% {
		opacity: 0.15;
	}
}

/* ---------- hop ---------- */
.al-hop .al-avatar {
	transform-origin: 50% 100%;
	animation: al-hop 1.1s infinite;
}
.al-hop .al-shadow {
	position: absolute;
	left: calc(50% - 0.3em);
	top: 0.83em;
	width: 0.6em;
	height: 0.08em;
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		color-mix(in srgb, var(--al-c1) 55%, transparent),
		transparent
	);
	animation: al-shadow 1.1s infinite;
}
.al-hop .al-dust {
	position: absolute;
	left: calc(50% - 0.02em);
	top: 0.83em;
	width: 0.04em;
	height: 0.04em;
	border-radius: 50%;
	background: var(--al-c);
	opacity: 0;
	animation: al-dust 1.1s ease-out infinite;
}
@keyframes al-hop {
	0%,
	100% {
		transform: translateY(0) scale(1.08, 0.9);
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
	}
	12% {
		transform: translateY(-0.03em) scale(0.95, 1.06);
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
	}
	50% {
		transform: translateY(-0.17em) scale(1);
		animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3);
	}
	90% {
		transform: translateY(-0.01em) scale(0.96, 1.05);
	}
}
@keyframes al-shadow {
	0%,
	100% {
		transform: scale(1.05);
		opacity: 1;
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
	}
	50% {
		transform: scale(0.5);
		opacity: 0.35;
		animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3);
	}
}
@keyframes al-dust {
	0% {
		transform: translate(0, 0);
		opacity: 0.9;
	}
	22%,
	100% {
		transform: translate(var(--al-dx), -0.05em);
		opacity: 0;
	}
}

/* ---------- typer ---------- */
.al-typer .al-line {
	position: absolute;
	top: 0.92em;
	height: 0.06em;
}
.al-typer .al-paper {
	position: absolute;
	left: -0.03em;
	right: -0.03em;
	top: 0.085em;
	height: 0.012em;
	border-radius: 0.006em;
	background: var(--al-c2);
	opacity: 0.6;
}
.al-typer .al-glyph {
	position: absolute;
	top: 0;
	height: 0.05em;
	border-radius: 0.012em;
	background: var(--al-c);
	transform-origin: 0 50%;
	opacity: 0;
}
.al-typer .al-caret {
	position: absolute;
	left: 0;
	top: -0.02em;
	width: 0.018em;
	height: 0.09em;
	border-radius: 0.009em;
	background: var(--al-c4);
}

/* ---------- printer ---------- */
.al-printer .al-slot {
	position: absolute;
	left: calc(50% - 0.23em);
	top: 0.855em;
	width: 0.46em;
	height: 0.04em;
	border-radius: 0.02em;
	background: var(--al-c1);
	z-index: 3;
}
.al-printer .al-tray {
	position: absolute;
	left: calc(50% - 0.17em);
	top: 0.875em;
	width: 0.34em;
	height: 0.34em;
	overflow: hidden;
}
.al-printer .al-sheet {
	display: flex;
	height: 0.3em;
	background: #fff;
	border: 0.008em solid var(--al-c2);
	border-top: 0;
	border-radius: 0 0 0.02em 0.02em;
	padding: 0.03em 0.035em;
	flex-direction: column;
	gap: 0.028em;
	transform: translateY(-100%);
	animation: al-feed 2.8s infinite;
}
.al-printer .al-sheet i {
	height: 0.022em;
	border-radius: 0.011em;
	background: var(--al-c);
	width: var(--al-w);
}
@keyframes al-feed {
	0% {
		transform: translateY(-100%);
		opacity: 1;
		animation-timing-function: steps(6, end);
	}
	55% {
		transform: translateY(0);
		opacity: 1;
	}
	78% {
		transform: translateY(0);
		opacity: 1;
		animation-timing-function: ease-in;
	}
	95%,
	100% {
		transform: translateY(0.08em);
		opacity: 0;
	}
}

/* ---------- corner badges ---------- */
.al-badge-dot {
	position: absolute;
	border-radius: 50%;
	box-shadow: 0 0 0 0.028em var(--al-card);
	z-index: 3;
}
.al-badge .al-badge-dot {
	left: calc(0.747em - 0.11em);
	top: calc(0.747em - 0.11em);
	width: 0.22em;
	height: 0.22em;
	background: var(--al-c2);
}
.al-badge .al-shape {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.09em;
	height: 0.09em;
	animation: al-morph 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes al-morph {
	0%,
	100% {
		border-radius: 50%;
		transform: translate(-50%, -50%) rotate(0) scale(1);
		background: var(--al-c4);
	}
	25% {
		border-radius: 18%;
		transform: translate(-50%, -50%) rotate(90deg) scale(0.85);
		background: var(--al-c3);
	}
	50% {
		border-radius: 50%;
		transform: translate(-50%, -50%) rotate(180deg) scale(1.15);
		background: var(--al-c1);
	}
	75% {
		border-radius: 18%;
		transform: translate(-50%, -50%) rotate(270deg) scale(0.85);
		background: var(--al-c3);
	}
}

/* ---------- clock ---------- */
.al-clock .al-badge-dot {
	left: calc(0.76em - 0.15em);
	top: calc(0.76em - 0.15em);
	width: 0.3em;
	height: 0.3em;
	background: var(--al-c2);
}
.al-clock .al-badge-dot svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.al-clock .al-mark {
	stroke: var(--al-c1);
	stroke-width: 1.6;
	stroke-linecap: round;
}
.al-clock .al-hand {
	transform-box: view-box;
	transform-origin: 50% 50%;
	animation: al-clock-hand 4s infinite;
}
.al-clock .al-hand line {
	stroke: var(--al-c4);
	stroke-width: 1.9;
	stroke-linecap: round;
}
.al-clock .al-pin {
	fill: var(--al-c1);
}
@keyframes al-clock-hand {
	0% {
		transform: rotate(0deg);
		animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
	}
	4% {
		transform: rotate(104deg);
		animation-timing-function: ease-in-out;
	}
	8% {
		transform: rotate(88deg);
		animation-timing-function: ease-out;
	}
	11%,
	25% {
		transform: rotate(90deg);
		animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
	}
	29% {
		transform: rotate(194deg);
		animation-timing-function: ease-in-out;
	}
	33% {
		transform: rotate(178deg);
		animation-timing-function: ease-out;
	}
	36%,
	50% {
		transform: rotate(180deg);
		animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
	}
	54% {
		transform: rotate(284deg);
		animation-timing-function: ease-in-out;
	}
	58% {
		transform: rotate(268deg);
		animation-timing-function: ease-out;
	}
	61%,
	75% {
		transform: rotate(270deg);
		animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
	}
	79% {
		transform: rotate(374deg);
		animation-timing-function: ease-in-out;
	}
	83% {
		transform: rotate(358deg);
		animation-timing-function: ease-out;
	}
	86%,
	100% {
		transform: rotate(360deg);
	}
}

/* ---------- progress bars ---------- */
.al-bar-frame {
	position: absolute;
	left: calc(50% - 0.36em);
	top: 0.92em;
	width: 0.72em;
	height: 0.11em;
	padding: 0.01em;
	border: 0.012em solid var(--al-c1);
	border-radius: 0.055em;
}
.al-bar-fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0.04em;
}
.al-progress .al-bar-fill {
	background: linear-gradient(90deg, var(--al-c4), var(--al-c2), var(--al-c4)) 0 0 / 1.02em 100%
		repeat-x;
	animation: al-roll-progress 4s linear infinite;
}
@keyframes al-roll-progress {
	to {
		background-position: -1.02em 0;
	}
}
.al-hazard .al-bar-fill {
	background: linear-gradient(
			45deg,
			var(--al-c4) 25%,
			var(--al-c2) 25% 50%,
			var(--al-c4) 50% 75%,
			var(--al-c2) 75%
		)
		0 0 / 0.1em 0.1em;
	animation: al-roll-hazard 0.9s linear infinite;
}
@keyframes al-roll-hazard {
	to {
		background-position: -0.1em 0;
	}
}
/* An admin-set face in place of the default figure (agent-face.js). */
.al-avatar .al-face-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.al-avatar .al-face-text {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-size: 0.4em;
	line-height: 1;
	font-weight: 600;
	color: #fff;
}
/* Before the ink-centred drawing replaces it (no canvas) */
.al-avatar .al-face-text:empty::before {
	content: attr(data-text);
}