/**
 * Matrix Decode Effect Styles
 * Animated text decoding from random matrix characters to real text
 */

/* ===== CONTAINER ===== */

.matrix-decode-container {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	position: relative;
}

/* Flash effect when swapping to rendered HTML */
.matrix-decode-flash {
	animation: matrixDecodeFlash 0.15s ease-out;
}

@keyframes matrixDecodeFlash {
	0% {
		filter: brightness(1.8);
		text-shadow: 0 0 12px rgba(0, 255, 65, 0.6);
	}
	100% {
		filter: brightness(1);
		text-shadow: none;
	}
}

/* ===== CHARACTER STATES ===== */

.matrix-char {
	display: inline;
	font-family: Arial, Helvetica, sans-serif;
	transition: none;
}

/* Pending: not yet reached by the wave */
.matrix-char-pending {
	color: rgba(0, 255, 65, 0.25);
}

/* Decoding: in the wave zone, flickering */
.matrix-char-decoding {
	color: #00ff41;
	text-shadow:
		0 0 4px rgba(0, 255, 65, 0.8),
		0 0 10px rgba(0, 255, 65, 0.4);
	animation: matrixCharFlicker 0.08s steps(1) infinite;
}

/* Decoded: settled to real character */
.matrix-char-decoded {
	color: rgba(0, 255, 65, 0.65);
	text-shadow: none;
	animation: matrixCharSettle 0.3s ease-out;
}

/* ===== ANIMATIONS ===== */

@keyframes matrixCharFlicker {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
	100% {
		opacity: 1;
	}
}

@keyframes matrixCharSettle {
	0% {
		color: #00ff41;
		text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
	}
	100% {
		color: rgba(0, 255, 65, 0.65);
		text-shadow: none;
	}
}

/* ===== CHAT MESSAGE CONTEXT ===== */

/* When matrix decode is inside a model message, match model styling */
.chat-msg-model .matrix-decode-container {
	font-size: 13px;
	line-height: 1.6;
}

/* When inside full answer view, match answer body styling */
.qa-answer-content .matrix-decode-container {
	font-size: 14px;
	line-height: 1.7;
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
	.matrix-char-decoding,
	.matrix-char-decoded,
	.matrix-decode-flash {
		animation: none !important;
	}

	.matrix-char-pending {
		color: rgba(255, 255, 255, 0.88);
	}

	.matrix-char-decoding {
		color: rgba(255, 255, 255, 0.88);
		text-shadow: none;
	}

	.matrix-char-decoded {
		color: rgba(255, 255, 255, 0.88);
		text-shadow: none;
	}

	.matrix-decode-container {
		/* With reduced motion, JS skips animation entirely.
		   This is a safety net in case the container was created. */
		color: rgba(255, 255, 255, 0.88);
	}
}