/* AI loader using Brighton Fibre palette */
	.ai-loader {
		min-height: 110px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: centre;
		background-color: #F3F3F3; /* Off white */
		border-radius: 0.5rem;
		opacity: 1;
	}

	/* entrance / exit */
	.ai-loader-fade-in {
		animation: ai-fade-in 0.25s ease-out forwards;
	}

	.ai-loader-fade-out {
		animation: ai-fade-out 0.25s ease-in forwards;
	}

	.ai-orb-wrapper {
		margin-top:20px;
		width: 64px;
		height: 64px;
		border-radius: 50%;
		padding: 4px;
		/* Lime, Aqua, Sky, Forest */
		background:
			radial-gradient(circle at 0% 0%,   #DAFF75, transparent 60%),
			radial-gradient(circle at 100% 0%, #22C7B6, transparent 60%),
			radial-gradient(circle at 0% 100%, #B6E1FA, transparent 60%),
			radial-gradient(circle at 100% 100%, #082E2A, transparent 60%);
		/* slightly irregular spin with easing */
		animation: ai-spin 6.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
	}

	.ai-orb {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		/* Lime, Aqua, Mid-blue, Purple, Orange, Burgundy */
		background: conic-gradient(
			from 0deg,
			#DAFF75,
			#22C7B6,
			#6375A8,
			#AC4F7C,
			#C73F00,
			#7A2700,
			#DAFF75
		);
		animation: ai-pulse 4.2s ease-in-out infinite alternate;
	}

	.ai-loader-text {
		margin-top: 0.75rem;
		font-size: 0.9rem;
		color: #082E2A; /* Forest */
	}

	/* slightly uneven spin + scale so it feels less mechanical */
	@keyframes ai-spin {
		0%   { transform: rotate(0deg)   scale(0.97); }
		18%  { transform: rotate(55deg)  scale(1.02); }
		37%  { transform: rotate(120deg) scale(1.04); }
		56%  { transform: rotate(205deg) scale(1.01); }
		76%  { transform: rotate(280deg) scale(1.03); }
		100% { transform: rotate(360deg) scale(0.97); }
	}

	@keyframes ai-pulse {
		0% {
			transform: scale(0.95);
			box-shadow: 0 0 10px rgba(8, 46, 42, 0.25);
		}
		100% {
			transform: scale(1);
			box-shadow: 0 0 22px rgba(8, 46, 42, 0.45);
		}
	}

	@keyframes ai-fade-in {
		from {
			opacity: 0;
			transform: translateY(6px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes ai-fade-out {
		from {
			opacity: 1;
			transform: translateY(0);
		}
		to {
			opacity: 0;
			transform: translateY(-4px);
		}
	}