:root {
	--ai-explain-text-color: rgb(255, 255, 255, 0.8);
}

html[data-bs-theme="light"] {
	--ai-explain-text-color: rgb(0, 0, 0, 0.8);
}


.kv-panel-ai[data-k5-ai-explain] {
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
}

.k5-ai-explain-center {
	min-height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.k5-ai-explain-body {
	white-space: pre-wrap;
	line-height: 1.35;
	color: var(--ai-explain-text-color);
	font-size: 0.9rem;
}

.k5-ai-explain-caret::after {
	content: "|";
	display: inline-block;
	margin-left: 2px;
	animation: k5AiExplainCaretBlink 0.8s step-end infinite;
}

@keyframes k5AiExplainCaretBlink {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.k5-ai-explain-caret::after {
		animation: none;
	}
}