.side-custom {
	height: 100%;
}

#side-view-title {
	max-width: 300px;
	text-overflow: clip;
}

#header + div > *:nth-child(3) {
	max-width: 500px;
}

/* =================================================================
   LOADER VOCAL VISIBLE - Solution CSS Robuste
   ================================================================= */

/* Cibler tous les SVG qui tournent (plus robuste) */
svg.animate-spin {
	/* Forcer la couleur à être visible */
	color: hsl(var(--primary)) !important;
	opacity: 1 !important;
}

/* Alternative: Utiliser un filtre pour augmenter le contraste */
.lucide-loader-circle {
	filter: drop-shadow(0 0 2px hsl(var(--primary))) brightness(1.5) !important;
	color: hsl(var(--primary)) !important;
}

/* Si le loader est dans un bouton, assurer la visibilité */
button svg.animate-spin,
button .lucide-loader-circle {
	color: hsl(var(--primary)) !important;
	stroke: hsl(var(--primary)) !important;
	fill: none !important;
	stroke-width: 3 !important;
}

/* Méthode alternative: border spinner si SVG ne fonctionne pas */
@keyframes custom-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Créer un wrapper pour le spinner si besoin */
button:has(svg.animate-spin) {
	position: relative !important;
}

button svg.animate-spin {
	position: relative !important;
	z-index: 10 !important;
}

/* Gradient background for user messages */
/* 
.dark .bg-accent {
	background: linear-gradient(
		90deg,
		#ee4810 0%,
		#f28a1e 50%,
		#f7cd2b 100%
	) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 1rem !important;
	padding: 0.75rem 1rem !important;
}
.bg-accent {
	background: linear-gradient(
		90deg,
		#f28a1e 0%,
		#f5ac24 50%,
		#f7cd2b 100%
	) !important;
	color: #000000 !important; 
	border: none !important;
	border-radius: 1rem !important;
	padding: 0.75rem 1rem !important;
} */