/* ==========================================================================
   X6 Subsurface 4D — Page Simulations CSS
   Three self-contained sims:
     1. sim-ar-scanner   — Tactical AR HUD με Gun Scope + Matrix Label
     2. sim-voxel-3d     — 3D voxel cube με rotation + filter toggles
     3. sim-ai-analysis  — Multi-Agent flow με verdict animation
   ========================================================================== */

/* ========================================================================
   1. SIM-AR-SCANNER (Tactical AR HUD)
   ======================================================================== */

.section--sim-ar { padding: 60px 0; }
.sim-ar-shell {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(260px, 320px);
	gap: 24px;
	align-items: start;
	margin-top: 32px;
}
@media (max-width: 880px) {
	.sim-ar-shell { grid-template-columns: 1fr; }
}

/* --- Phone frame mockup --- */
.sim-ar-phone {
	position: relative;
	/* Fallback explicit dimensions (in case aspect-ratio fails) */
	width: 100%;
	max-width: 380px;
	height: 675px;          /* explicit fallback height (380 * 16/9 = 675.5) */
	min-height: 580px;      /* safety floor — never collapse to 0 */
	aspect-ratio: 9 / 16;   /* preferred — overrides height when supported */
	margin: 0 auto;
	background: #020608;
	border-radius: 28px;
	border: 1px solid rgba(0, 242, 255, .25);
	box-shadow:
		0 0 0 4px rgba(0, 0, 0, .8),
		0 0 60px rgba(0, 242, 255, .15),
		inset 0 0 30px rgba(0, 0, 0, .6);
	overflow: hidden;
	color: #e2e8f0;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11px;
	/* Make sure it's always rendered as block-level container */
	display: block;
	box-sizing: border-box;
}
/* Modern browsers with aspect-ratio support — let aspect-ratio win */
@supports (aspect-ratio: 9 / 16) {
	.sim-ar-phone { height: auto; }
}

/* --- CSS-rendered camera background (terrain texture) --- */
.sim-ar-camera {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 70%, rgba(120, 100, 80, .35) 0%, transparent 60%),
		radial-gradient(ellipse at 75% 30%, rgba(80, 110, 90, .25) 0%, transparent 50%),
		linear-gradient(180deg, #1a2a1a 0%, #2a3220 30%, #3a3a28 60%, #2a2a1c 100%);
	background-size: 100% 100%, 100% 100%, 100% 100%;
}
.sim-ar-camera::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, transparent 0, transparent 30px, rgba(0, 242, 255, .04) 30px, rgba(0, 242, 255, .04) 31px),
		repeating-linear-gradient(90deg, transparent 0, transparent 30px, rgba(0, 242, 255, .04) 30px, rgba(0, 242, 255, .04) 31px);
	opacity: .6;
}

/* --- Header --- */
.sim-ar-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	padding: 12px 14px 10px;
	background: linear-gradient(180deg, rgba(2, 6, 8, .88) 0%, rgba(2, 6, 8, .55) 100%);
	z-index: 5;
}
.sim-ar-title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}
.sim-ar-title {
	font-weight: 800;
	font-size: 13px;
	color: #fff;
	letter-spacing: .5px;
}
.sim-ar-targets-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(52, 199, 89, .15);
	border: 1px solid rgba(52, 199, 89, .4);
	border-radius: 12px;
	padding: 3px 8px;
	color: #5eead4;
	font-weight: 800;
	font-size: 11px;
}

/* --- Mode chips --- */
.sim-ar-mode-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.sim-ar-chip {
	display: inline-flex;
	align-items: center;
	font-size: 8.5px;
	padding: 3px 7px;
	border-radius: 10px;
	background: rgba(15, 25, 35, .85);
	border: 1px solid rgba(0, 242, 255, .15);
	color: #94a3b8;
	font-weight: 600;
	letter-spacing: .3px;
}
.sim-ar-chip--green {
	color: #4ade80;
	border-color: rgba(74, 222, 128, .35);
	background: rgba(74, 222, 128, .08);
}

/* --- Stats row --- */
.sim-ar-stats-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
	font-size: 9px;
}
.sim-ar-stat {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.sim-ar-stat-key { color: #94a3b8; font-weight: 700; letter-spacing: .4px; }
.sim-ar-stat-val { color: #e2e8f0; font-weight: 700; }
.sim-ar-stat-val em { color: #ff8c00; font-style: normal; font-weight: 800; }

/* --- LED row --- */
.sim-ar-leds {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 7.5px;
	flex-wrap: wrap;
}
.sim-ar-sensor-label { color: #64748b; font-weight: 700; letter-spacing: .5px; }
.sim-ar-led {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #475569;
	box-shadow: 0 0 4px currentColor;
}
.sim-ar-led--green { background: #4ade80; color: #4ade80; }
.sim-ar-led--yellow { background: #fbbf24; color: #fbbf24; }
.sim-ar-led--red { background: #ef4444; color: #ef4444; }
.sim-ar-led--gray { background: #475569; color: #475569; }

/* --- DNA Signature banner --- */
.sim-ar-dna-banner {
	position: absolute;
	top: 142px;
	left: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: rgba(15, 25, 35, .85);
	border: 1px solid rgba(255, 140, 0, .35);
	border-radius: 24px;
	box-shadow: 0 0 12px rgba(255, 140, 0, .25);
	z-index: 4;
	transition: opacity .3s;
}
.sim-ar-dna-icon { color: #ff8c00; font-size: 14px; font-weight: 800; }
.sim-ar-dna-label { color: #94a3b8; font-size: 8px; font-weight: 700; letter-spacing: .5px; flex: 1; }
.sim-ar-dna-pattern { color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .5px; }
.sim-ar-dna-conf { color: #ff8c00; font-weight: 800; font-size: 11px; }

/* --- Gun Scope + Matrix Label --- */
.sim-ar-target {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 6;
	color: #ff3838; /* default METAL color, overridden via JS */
	pointer-events: auto;
}
.sim-ar-target[data-kind="void"] { color: #2e86ff; }
.sim-ar-target[data-kind="unknown"] { color: #e8eef5; }
.sim-ar-target[data-kind="rebar"] { color: #050847; }

.sim-ar-scope {
	width: 60px;
	height: 60px;
	color: currentColor;
	filter: drop-shadow(0 0 6px currentColor);
}
.sim-ar-pulse {
	transform-origin: center;
	animation: sim-ar-pulse 1.4s ease-in-out infinite;
}
@keyframes sim-ar-pulse {
	0%, 100% { transform: scale(0.85); opacity: .9; }
	50% { transform: scale(1.18); opacity: .5; }
}

/* --- Matrix Label --- */
.sim-ar-matrix-label {
	position: absolute;
	top: 50%;
	left: calc(100% + 10px);
	transform: translateY(-50%);
	width: 130px;
	background: rgba(0, 0, 0, .68);
	border: 1px solid currentColor;
	border-radius: 8px;
	padding: 7px 9px;
	color: currentColor;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.sim-ar-matrix-header {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 4px;
}
.sim-ar-matrix-id {
	color: #fff;
	font-weight: 900;
	font-size: 11px;
	letter-spacing: .5px;
}
.sim-ar-matrix-kind {
	color: currentColor;
	font-weight: 800;
	font-size: 9px;
	letter-spacing: .3px;
}
.sim-ar-matrix-divider {
	height: 1px;
	background: currentColor;
	opacity: .6;
	margin: 4px 0;
}
.sim-ar-matrix-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sim-ar-matrix-key {
	color: #b0b6be;
	font-weight: 700;
	font-size: 9px;
	letter-spacing: .3px;
}
.sim-ar-matrix-val {
	color: currentColor;
	font-weight: 900;
	font-size: 11px;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* --- Inline spinner για ΒΑΘΟΣ pending --- */
.sim-ar-spinner {
	width: 8px;
	height: 8px;
	border: 1.2px solid rgba(255, 200, 56, .3);
	border-top-color: #ffc838;
	border-radius: 50%;
	animation: sim-ar-spin 0.9s linear infinite;
}
.sim-ar-spinner--hidden { display: none; }
@keyframes sim-ar-spin {
	to { transform: rotate(360deg); }
}

/* --- Bottom bar --- */
.sim-ar-bottom {
	position: absolute;
	bottom: 50px;
	left: 14px;
	right: 14px;
	display: flex;
	justify-content: space-around;
	gap: 4px;
	padding: 6px 8px;
	background: rgba(15, 25, 35, .92);
	border: 1px solid rgba(0, 242, 255, .15);
	border-radius: 14px;
	z-index: 5;
}
.sim-ar-btn-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: transparent;
	border: 0;
	color: #94a3b8;
	font-size: 7px;
	cursor: pointer;
	letter-spacing: .3px;
}
.sim-ar-btn-icon span { font-size: 14px; }
.sim-ar-btn-icon--active { color: #00f2ff; }

/* --- Tabs --- */
.sim-ar-tabs {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	border-top: 1px solid rgba(0, 242, 255, .2);
	background: rgba(0, 0, 0, .9);
	z-index: 5;
}
.sim-ar-tab {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 7px 0 5px;
	background: transparent;
	border: 0;
	color: #64748b;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .4px;
	cursor: pointer;
}
.sim-ar-tab span { font-size: 13px; }
.sim-ar-tab--active { color: #00f2ff; }

/* --- Side panel (presets + commentary) --- */
.sim-ar-side {
	background: rgba(15, 25, 35, .35);
	border: 1px solid rgba(0, 242, 255, .2);
	border-radius: 14px;
	padding: 18px;
}
.sim-ar-side h3 {
	font-size: 12px;
	font-weight: 800;
	color: #00e5ff;
	letter-spacing: .8px;
	margin: 0 0 12px 0;
	text-transform: uppercase;
}
.sim-ar-presets {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}
.sim-ar-preset-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	background: rgba(0, 0, 0, .25);
	border: 1px solid rgba(0, 242, 255, .12);
	border-radius: 10px;
	color: #cbd5e1;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s;
	text-align: left;
}
.sim-ar-preset-btn:hover {
	border-color: rgba(0, 242, 255, .35);
	background: rgba(0, 242, 255, .05);
}
.sim-ar-preset-btn--active {
	background: rgba(0, 242, 255, .12);
	border-color: rgba(0, 242, 255, .55);
	color: #fff;
}
.sim-ar-preset-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 6px currentColor;
}
.sim-ar-preset-dot--metal { background: #ff3838; color: #ff3838; }
.sim-ar-preset-dot--void { background: #2e86ff; color: #2e86ff; }
.sim-ar-preset-dot--crypt { background: #ff8c00; color: #ff8c00; }
.sim-ar-preset-dot--rebar { background: #050847; color: #1a1a99; box-shadow: 0 0 6px #1a1a99; }

.sim-ar-commentary {
	background: rgba(0, 0, 0, .25);
	border-left: 2px solid #00f2ff;
	border-radius: 4px;
	padding: 10px 12px;
	margin: 14px 0;
	font-size: 11px;
	color: #cbd5e1;
	line-height: 1.5;
}
.sim-ar-commentary-line { margin: 0 0 6px 0; }
.sim-ar-commentary-line:last-child { margin-bottom: 0; }

/* --- Phase indicator --- */
.sim-ar-phases {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 12px;
}
.sim-ar-phase {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: rgba(0, 0, 0, .2);
	border: 1px solid rgba(100, 116, 139, .2);
	border-radius: 8px;
	color: #64748b;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	transition: all .3s;
}
.sim-ar-phase-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #475569;
	box-shadow: 0 0 4px currentColor;
}
.sim-ar-phase--active {
	color: #fff;
	border-color: currentColor;
	background: rgba(0, 242, 255, .08);
}
.sim-ar-phase--active .sim-ar-phase-dot {
	background: #00f2ff;
	color: #00f2ff;
	animation: sim-ar-pulse-dot 1.2s infinite;
}
@keyframes sim-ar-pulse-dot {
	0%, 100% { box-shadow: 0 0 4px currentColor; }
	50% { box-shadow: 0 0 12px currentColor; }
}

/* --- Multi-layer photorealistic terrain --- */
.sim-ar-terrain-sky {
	position: absolute;
	inset: 0 0 65% 0;
	background: linear-gradient(180deg, #2c3e50 0%, #4a5d70 60%, #6b7a8a 100%);
}
.sim-ar-terrain-horizon {
	position: absolute;
	left: 0; right: 0; top: 35%;
	height: 8%;
	background: linear-gradient(180deg, transparent 0%, rgba(80, 60, 40, .6) 50%, rgba(40, 30, 20, .8) 100%);
	filter: blur(4px);
}
.sim-ar-terrain-dirt {
	position: absolute;
	inset: 35% 0 0 0;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(140, 100, 60, .6) 0%, transparent 40%),
		radial-gradient(ellipse at 70% 60%, rgba(110, 80, 50, .5) 0%, transparent 40%),
		radial-gradient(ellipse at 50% 90%, rgba(60, 40, 25, .7) 0%, transparent 50%),
		linear-gradient(180deg, #4a3825 0%, #3a2d1c 30%, #2a2015 60%, #1a1408 100%);
}
.sim-ar-terrain-dirt::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		repeating-radial-gradient(circle at 20% 30%, rgba(180, 140, 90, .12) 0px, transparent 3px),
		repeating-radial-gradient(circle at 70% 50%, rgba(150, 110, 70, .12) 0px, transparent 4px),
		repeating-radial-gradient(circle at 40% 80%, rgba(80, 60, 40, .15) 0px, transparent 5px);
	background-size: 40px 40px, 60px 60px, 30px 30px;
}
.sim-ar-terrain-rocks {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 35%;
	width: 100%;
}
.sim-ar-terrain-grass {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 12%;
	width: 100%;
}

/* --- Live magnetometer trace --- */
.sim-ar-mag-trace {
	position: absolute;
	left: 14px; right: 14px;
	bottom: 110px;
	height: 36px;
	background: rgba(2, 6, 8, .65);
	border: 1px solid rgba(0, 242, 255, .25);
	border-radius: 6px;
	overflow: hidden;
	z-index: 4;
	padding: 2px 4px;
}
.sim-ar-mag-trace svg {
	display: block;
	width: 100%;
	height: 100%;
}
.sim-ar-mag-label {
	position: absolute;
	top: 2px; right: 6px;
	font-size: 7px;
	color: #00f2ff;
	font-weight: 800;
	letter-spacing: .8px;
}

/* --- DNA waveform visualization --- */
.sim-ar-dna-wave {
	display: inline-block;
	width: 50px;
	height: 14px;
	margin: 0 4px;
	vertical-align: middle;
}
.sim-ar-dna-wave path {
	transition: d 0.4s ease;
	filter: drop-shadow(0 0 2px rgba(255, 140, 0, .6));
}

/* --- Heat zone overlay --- */
.sim-ar-heat-overlay {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 180px; height: 180px;
	pointer-events: none;
	z-index: 3;
}
.sim-ar-heat-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 80, 60, .35);
	animation: sim-ar-heat-pulse 2.4s ease-out infinite;
}
.sim-ar-heat-ring--mid {
	inset: 20%;
	animation-delay: 0.4s;
	border-color: rgba(255, 140, 0, .5);
}
.sim-ar-heat-ring--inner {
	inset: 40%;
	animation-delay: 0.8s;
	border-color: rgba(255, 200, 0, .65);
}
@keyframes sim-ar-heat-pulse {
	0% { transform: scale(0.6); opacity: 0; }
	30% { opacity: 1; }
	100% { transform: scale(1.3); opacity: 0; }
}

/* --- Depth probe laser --- */
.sim-ar-depth-laser {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, 0);
	width: 80px; height: 180px;
	z-index: 4;
	pointer-events: none;
	animation: sim-ar-laser-fade 1.6s ease-in;
}
@keyframes sim-ar-laser-fade {
	0% { opacity: 0; transform: translate(-50%, -10px); }
	100% { opacity: 1; transform: translate(-50%, 0); }
}
.sim-ar-depth-laser line {
	animation: sim-ar-laser-flow 1s linear infinite;
}
@keyframes sim-ar-laser-flow {
	0% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -6; }
}

/* --- Matrix label additional rows styling --- */
.sim-ar-matrix-row--accent {
	background: rgba(0, 242, 255, .08);
	margin: 2px -6px -2px -6px;
	padding: 3px 6px;
	border-top: 1px dashed rgba(0, 242, 255, .25);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
.sim-ar-matrix-val--mag {
	color: #ff8c00;
	font-weight: 800;
}

/* --- BURIED OBJECTS reveal layer (semi-transparent through ground) --- */
.sim-ar-buried {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	mix-blend-mode: screen;
}
.sim-ar-buried g {
	transition: opacity 0.6s ease;
	filter: drop-shadow(0 0 4px currentColor);
}
.sim-ar-phone[data-buried="metal"] .sim-ar-buried-metal { opacity: 1; }
.sim-ar-phone[data-buried="void"]  .sim-ar-buried-void  { opacity: 1; }
.sim-ar-phone[data-buried="crypt"] .sim-ar-buried-void  { opacity: 1; }
.sim-ar-phone[data-buried="rebar"] .sim-ar-buried-rebar { opacity: 1; }

/* --- RADAR SWEEP (rotating conic beam) --- */
.sim-ar-radar-sweep {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 280px;
	height: 280px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 2;
	background: conic-gradient(
		from 0deg,
		rgba(0, 242, 255, .35) 0deg,
		rgba(0, 242, 255, .25) 8deg,
		rgba(0, 242, 255, .12) 18deg,
		rgba(0, 242, 255, .04) 30deg,
		transparent 60deg,
		transparent 360deg
	);
	mask: radial-gradient(circle at center, transparent 8%, black 30%, black 80%, transparent 100%);
	-webkit-mask: radial-gradient(circle at center, transparent 8%, black 30%, black 80%, transparent 100%);
	animation: sim-ar-radar-spin 4s linear infinite;
	opacity: 0.85;
}
@keyframes sim-ar-radar-spin {
	0%   { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- SCANLINE (CRT-style horizontal pass) --- */
.sim-ar-scanline {
	position: absolute;
	left: 0; right: 0;
	height: 80px;
	pointer-events: none;
	z-index: 6;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(0, 242, 255, .04) 30%,
		rgba(0, 242, 255, .15) 50%,
		rgba(0, 242, 255, .04) 70%,
		transparent 100%
	);
	animation: sim-ar-scanline-pass 5.5s linear infinite;
	mix-blend-mode: screen;
}
@keyframes sim-ar-scanline-pass {
	0%   { top: -80px; opacity: 0.9; }
	95%  { opacity: 0.9; }
	100% { top: 100%; opacity: 0; }
}

/* --- Add subtle vignette overlay --- */
.sim-ar-camera::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .55) 100%);
	pointer-events: none;
}

/* ========================================================================
   2. SIM-VOXEL-3D (3D Voxel Cube)
   ======================================================================== */

.section--sim-voxel { padding: 60px 0; }
.sim-voxel-shell {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(240px, 280px);
	gap: 24px;
	margin-top: 32px;
}
@media (max-width: 880px) {
	.sim-voxel-shell { grid-template-columns: 1fr; }
}

.sim-voxel-stage {
	position: relative;
	width: 100%;
	max-width: 460px;
	height: 460px;          /* explicit fallback */
	min-height: 380px;      /* safety floor */
	aspect-ratio: 1;        /* preferred when supported */
	margin: 0 auto;
	background:
		radial-gradient(circle at 50% 50%, rgba(0, 242, 255, .08) 0%, transparent 70%),
		linear-gradient(180deg, #050a14 0%, #0a1525 100%);
	border: 1px solid rgba(0, 242, 255, .25);
	border-radius: 12px;
	overflow: hidden;
	perspective: 800px;
	box-sizing: border-box;
}
@supports (aspect-ratio: 1) {
	.sim-voxel-stage { height: auto; }
}

.sim-voxel-grid-overlay {
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, transparent 0, transparent 19px, rgba(0, 242, 255, .06) 20px),
		repeating-linear-gradient(90deg, transparent 0, transparent 19px, rgba(0, 242, 255, .06) 20px);
	pointer-events: none;
}

.sim-voxel-cube {
	position: absolute;
	top: 50%; left: 50%;
	width: 200px; height: 200px;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotateX(-25deg) rotateY(35deg);
	animation: sim-voxel-rotate 24s linear infinite;
}
.sim-voxel-shell.is-paused .sim-voxel-cube { animation-play-state: paused; }

@keyframes sim-voxel-rotate {
	from { transform: translate(-50%, -50%) rotateX(-25deg) rotateY(0deg); }
	to { transform: translate(-50%, -50%) rotateX(-25deg) rotateY(360deg); }
}

.sim-voxel-face {
	position: absolute;
	width: 200px;
	height: 200px;
	background:
		linear-gradient(135deg, rgba(0, 242, 255, .15) 0%, rgba(0, 242, 255, .04) 100%);
	border: 1.5px solid rgba(0, 242, 255, .55);
	box-shadow: 0 0 18px rgba(0, 242, 255, .25);
}
.sim-voxel-face--front { transform: translateZ(100px); }
.sim-voxel-face--back { transform: rotateY(180deg) translateZ(100px); }
.sim-voxel-face--right { transform: rotateY(90deg) translateZ(100px); }
.sim-voxel-face--left { transform: rotateY(-90deg) translateZ(100px); }
.sim-voxel-face--top { transform: rotateX(90deg) translateZ(100px); }
.sim-voxel-face--bottom { transform: rotateX(-90deg) translateZ(100px); }

/* Voxel hotspots inside cube */
.sim-voxel-spot {
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	transform-style: preserve-3d;
	pointer-events: none;
	transition: opacity .3s;
}
.sim-voxel-spot::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle, currentColor 0%, transparent 70%);
	opacity: .9;
	animation: sim-voxel-glow 2.4s ease-in-out infinite;
}
@keyframes sim-voxel-glow {
	0%, 100% { transform: scale(0.85); opacity: .6; }
	50% { transform: scale(1.2); opacity: 1; }
}

.sim-voxel-spot[data-kind="met"] { color: #ff3838; }
.sim-voxel-spot[data-kind="void"] { color: #2e86ff; }
.sim-voxel-spot[data-kind="rock"] { color: #cbd5e1; }
.sim-voxel-spot[data-kind="str"] { color: #ffc838; }
.sim-voxel-spot[data-kind="anm"] { color: #ff8c00; }

.sim-voxel-shell[data-filter="met"] .sim-voxel-spot:not([data-kind="met"]),
.sim-voxel-shell[data-filter="void"] .sim-voxel-spot:not([data-kind="void"]),
.sim-voxel-shell[data-filter="str"] .sim-voxel-spot:not([data-kind="str"]),
.sim-voxel-shell[data-filter="rock"] .sim-voxel-spot:not([data-kind="rock"]),
.sim-voxel-shell[data-filter="anm"] .sim-voxel-spot:not([data-kind="anm"]) {
	opacity: .08;
}

/* Voxel side panel */
.sim-voxel-side {
	background: rgba(15, 25, 35, .35);
	border: 1px solid rgba(0, 242, 255, .2);
	border-radius: 14px;
	padding: 18px;
}
.sim-voxel-side h3 {
	font-size: 12px;
	font-weight: 800;
	color: #00e5ff;
	letter-spacing: .8px;
	margin: 0 0 12px 0;
	text-transform: uppercase;
}
.sim-voxel-filters {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-bottom: 14px;
}
.sim-voxel-filter {
	background: rgba(0, 0, 0, .25);
	border: 1px solid rgba(0, 242, 255, .12);
	border-radius: 8px;
	padding: 8px 4px;
	color: #cbd5e1;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .5px;
	cursor: pointer;
	transition: all .2s;
}
.sim-voxel-filter--active {
	background: rgba(0, 242, 255, .15);
	border-color: rgba(0, 242, 255, .55);
	color: #fff;
}
.sim-voxel-filter[data-kind="met"].sim-voxel-filter--active { background: rgba(255, 56, 56, .2); border-color: #ff3838; }
.sim-voxel-filter[data-kind="void"].sim-voxel-filter--active { background: rgba(46, 134, 255, .2); border-color: #2e86ff; }
.sim-voxel-filter[data-kind="rock"].sim-voxel-filter--active { background: rgba(203, 213, 225, .2); border-color: #cbd5e1; }
.sim-voxel-filter[data-kind="str"].sim-voxel-filter--active { background: rgba(255, 200, 56, .2); border-color: #ffc838; }
.sim-voxel-filter[data-kind="anm"].sim-voxel-filter--active { background: rgba(255, 140, 0, .2); border-color: #ff8c00; }

.sim-voxel-controls {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
}
.sim-voxel-btn {
	flex: 1;
	background: rgba(0, 0, 0, .25);
	border: 1px solid rgba(0, 242, 255, .15);
	border-radius: 8px;
	padding: 8px 6px;
	color: #cbd5e1;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .3px;
	cursor: pointer;
}

.sim-voxel-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	font-size: 10px;
}
.sim-voxel-stat {
	background: rgba(0, 0, 0, .25);
	border: 1px solid rgba(0, 242, 255, .12);
	border-radius: 8px;
	padding: 8px;
}
.sim-voxel-stat-key { color: #94a3b8; font-weight: 700; letter-spacing: .3px; font-size: 8px; }
.sim-voxel-stat-val { color: #fff; font-weight: 900; font-size: 14px; }

/* --- Color-coded stats per kind --- */
.sim-voxel-stat--met  { border-color: rgba(239, 68, 68, .35);  background: rgba(239, 68, 68, .08); }
.sim-voxel-stat--met  .sim-voxel-stat-val { color: #fca5a5; }
.sim-voxel-stat--void { border-color: rgba(59, 130, 246, .35); background: rgba(59, 130, 246, .08); }
.sim-voxel-stat--void .sim-voxel-stat-val { color: #93c5fd; }
.sim-voxel-stat--rock { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .04); }
.sim-voxel-stat--rock .sim-voxel-stat-val { color: #f1f5f9; }
.sim-voxel-stat--str  { border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .08); }
.sim-voxel-stat--str  .sim-voxel-stat-val { color: #fcd34d; }
.sim-voxel-stat--anm  { border-color: rgba(168, 85, 247, .35); background: rgba(168, 85, 247, .08); }
.sim-voxel-stat--anm  .sim-voxel-stat-val { color: #d8b4fe; }

/* --- Coordinate axes overlay --- */
.sim-voxel-axes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 6;
}
.sim-voxel-axis {
	position: absolute;
	font-family: 'Space Mono', monospace;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 1px;
	color: rgba(0, 242, 255, .8);
	text-shadow: 0 0 6px rgba(0, 242, 255, .6);
	background: rgba(2, 6, 8, .55);
	padding: 2px 6px;
	border-radius: 3px;
	border: 1px solid rgba(0, 242, 255, .25);
}
.sim-voxel-axis--x { bottom: 12px; right: 12px; }
.sim-voxel-axis--y { top: 12px; left: 12px; }
.sim-voxel-axis--z { top: 12px; right: 12px; color: rgba(255, 140, 0, .9); border-color: rgba(255, 140, 0, .35); text-shadow: 0 0 6px rgba(255, 140, 0, .6); }

/* --- Depth ruler --- */
.sim-voxel-depth-ruler {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	height: 70%;
	width: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	pointer-events: none;
	z-index: 5;
}
.sim-voxel-depth-tick {
	position: relative;
	height: 1px;
	background: rgba(255, 140, 0, .5);
}
.sim-voxel-depth-tick::before {
	content: '';
	position: absolute;
	left: 0; top: 0;
	width: 8px; height: 1px;
	background: rgba(255, 140, 0, .8);
}
.sim-voxel-depth-num {
	position: absolute;
	left: 12px; top: -5px;
	font-family: 'Space Mono', monospace;
	font-size: 8px;
	color: rgba(255, 140, 0, .85);
	font-weight: 700;
}

/* --- Volume fog (depth haze inside cube) --- */
.sim-voxel-fog {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.sim-voxel-fog--front {
	transform: translateZ(85px);
	background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 20, 30, .4) 80%);
}
.sim-voxel-fog--back {
	transform: translateZ(-85px) rotateY(180deg);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, transparent 70%);
}

/* --- Iso-surface volume meshes (semi-transparent clusters) --- */
.sim-voxel-iso {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	transform-style: preserve-3d;
	mix-blend-mode: screen;
	transition: opacity 0.4s ease;
}
.sim-voxel-iso[data-kind="met"] {
	background: radial-gradient(ellipse at center, rgba(239, 68, 68, .5) 0%, rgba(239, 68, 68, .15) 50%, transparent 80%);
	box-shadow: 0 0 20px rgba(239, 68, 68, .25);
}
.sim-voxel-iso[data-kind="void"] {
	background: radial-gradient(ellipse at center, rgba(59, 130, 246, .55) 0%, rgba(59, 130, 246, .18) 50%, transparent 80%);
	box-shadow: 0 0 24px rgba(59, 130, 246, .3);
}
.sim-voxel-iso[data-kind="rock"] {
	background: radial-gradient(ellipse at center, rgba(241, 245, 249, .35) 0%, rgba(241, 245, 249, .08) 50%, transparent 80%);
}
.sim-voxel-iso[data-kind="str"] {
	background: radial-gradient(ellipse at center, rgba(251, 191, 36, .5) 0%, rgba(251, 191, 36, .15) 50%, transparent 80%);
	box-shadow: 0 0 20px rgba(251, 191, 36, .25);
}
.sim-voxel-iso[data-kind="anm"] {
	background: radial-gradient(ellipse at center, rgba(168, 85, 247, .5) 0%, rgba(168, 85, 247, .15) 50%, transparent 80%);
}
/* Hide iso-surfaces when filter active and doesn't match */
.sim-voxel-shell[data-filter]:not([data-filter=""]) .sim-voxel-iso { opacity: 0; }
.sim-voxel-shell[data-filter="met"]  .sim-voxel-iso[data-kind="met"],
.sim-voxel-shell[data-filter="void"] .sim-voxel-iso[data-kind="void"],
.sim-voxel-shell[data-filter="rock"] .sim-voxel-iso[data-kind="rock"],
.sim-voxel-shell[data-filter="str"]  .sim-voxel-iso[data-kind="str"],
.sim-voxel-shell[data-filter="anm"]  .sim-voxel-iso[data-kind="anm"] { opacity: 1; }

/* --- Iso visibility toggle --- */
.sim-voxel-shell.iso-hidden .sim-voxel-iso { opacity: 0; }

/* --- Spot size variants --- */
.sim-voxel-spot--lg { width: 14px !important; height: 14px !important; }
.sim-voxel-spot--md { width: 10px !important; height: 10px !important; opacity: .85; }
.sim-voxel-spot--sm { width: 6px !important; height: 6px !important; opacity: .65; }

/* --- Animated slice plane (sweeps Y axis) --- */
.sim-voxel-slice-plane {
	position: absolute;
	left: 50%; top: 50%;
	width: 200px; height: 200px;
	transform: translate(-50%, -50%) rotateX(90deg) translateZ(0);
	background: linear-gradient(180deg, transparent 0%, rgba(0, 242, 255, .25) 49%, rgba(0, 242, 255, .9) 50%, rgba(0, 242, 255, .25) 51%, transparent 100%);
	border: 1px dashed rgba(0, 242, 255, .5);
	box-shadow: 0 0 15px rgba(0, 242, 255, .35);
	opacity: 0;
	pointer-events: none;
	animation: sim-voxel-slice-sweep 6s linear infinite;
}
.sim-voxel-shell.slice-active .sim-voxel-slice-plane { opacity: 1; }
@keyframes sim-voxel-slice-sweep {
	0%   { transform: translate(-50%, -50%) rotateX(90deg) translateZ(-90px); }
	50%  { transform: translate(-50%, -50%) rotateX(90deg) translateZ(90px); }
	100% { transform: translate(-50%, -50%) rotateX(90deg) translateZ(-90px); }
}

/* ========================================================================
   3. SIM-AI-ANALYSIS (Multi-Agent)
   ======================================================================== */

.section--sim-ai { padding: 60px 0; }
.sim-ai-shell {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(260px, 320px);
	gap: 24px;
	margin-top: 32px;
}
@media (max-width: 880px) {
	.sim-ai-shell { grid-template-columns: 1fr; }
}

.sim-ai-stage {
	position: relative;
	min-height: 460px;
	background: linear-gradient(180deg, #050a14 0%, #0a1525 100%);
	border: 1px solid rgba(168, 85, 247, .25);
	border-radius: 12px;
	padding: 24px;
	overflow: hidden;
}

.sim-ai-stage::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, transparent 0, transparent 23px, rgba(168, 85, 247, .04) 24px),
		repeating-linear-gradient(90deg, transparent 0, transparent 23px, rgba(168, 85, 247, .04) 24px);
	pointer-events: none;
}

.sim-ai-input {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(15, 25, 35, .65);
	border: 1px solid rgba(168, 85, 247, .35);
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 18px;
	position: relative;
}
.sim-ai-input-icon {
	font-size: 16px;
	color: #a855f7;
}
.sim-ai-input-text {
	color: #cbd5e1;
	font-size: 11px;
	font-weight: 600;
	flex: 1;
}

.sim-ai-agents {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 18px;
	position: relative;
}
@media (max-width: 600px) {
	.sim-ai-agents { grid-template-columns: repeat(2, 1fr); }
}

.sim-ai-agent {
	background: rgba(15, 25, 35, .65);
	border: 1px solid rgba(168, 85, 247, .25);
	border-radius: 10px;
	padding: 10px 8px;
	text-align: center;
	transition: all .4s;
	position: relative;
}
.sim-ai-agent--active {
	border-color: #a855f7;
	background: rgba(168, 85, 247, .12);
	box-shadow: 0 0 20px rgba(168, 85, 247, .35);
	transform: translateY(-3px);
}
.sim-ai-agent-icon {
	width: 32px;
	height: 32px;
	margin: 0 auto 6px;
	border-radius: 50%;
	background: rgba(168, 85, 247, .15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.sim-ai-agent--active .sim-ai-agent-icon {
	background: rgba(168, 85, 247, .35);
	animation: sim-ai-agent-pulse 1.2s ease-in-out infinite;
}
@keyframes sim-ai-agent-pulse {
	0%, 100% { box-shadow: 0 0 0 rgba(168, 85, 247, .6); }
	50% { box-shadow: 0 0 14px rgba(168, 85, 247, .9); }
}
.sim-ai-agent-name {
	font-size: 9.5px;
	font-weight: 800;
	color: #fff;
	letter-spacing: .3px;
	margin-bottom: 2px;
}
.sim-ai-agent-role {
	font-size: 8px;
	color: #94a3b8;
	letter-spacing: .2px;
}

/* Verdict card */
.sim-ai-verdict {
	background: rgba(0, 0, 0, .55);
	border: 1.5px solid #ff8c00;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 0 25px rgba(255, 140, 0, .25);
}
.sim-ai-verdict-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}
.sim-ai-verdict-id {
	font-size: 13px;
	font-weight: 900;
	color: #fff;
	letter-spacing: .5px;
}
.sim-ai-verdict-conf {
	font-size: 18px;
	font-weight: 900;
	color: #ff8c00;
}
.sim-ai-verdict-kind {
	font-size: 11px;
	font-weight: 800;
	color: #ff8c00;
	margin-bottom: 8px;
	letter-spacing: .5px;
}
.sim-ai-verdict-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	font-size: 10px;
}
.sim-ai-verdict-stat-key { color: #94a3b8; font-weight: 700; }
.sim-ai-verdict-stat-val { color: #fff; font-weight: 800; font-size: 12px; }

/* AI flow lines */
.sim-ai-flow-line {
	position: absolute;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, #a855f7 50%, transparent 100%);
	opacity: .6;
	pointer-events: none;
	animation: sim-ai-flow 2.4s ease-in-out infinite;
}
@keyframes sim-ai-flow {
	0%, 100% { opacity: 0; transform: scaleX(0.3); }
	50% { opacity: .9; transform: scaleX(1); }
}

/* AI side panel */
.sim-ai-side {
	background: rgba(15, 25, 35, .35);
	border: 1px solid rgba(168, 85, 247, .25);
	border-radius: 14px;
	padding: 18px;
}
.sim-ai-side h3 {
	font-size: 12px;
	font-weight: 800;
	color: #a855f7;
	letter-spacing: .8px;
	margin: 0 0 12px 0;
	text-transform: uppercase;
}
.sim-ai-evidence {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sim-ai-evidence-item {
	background: rgba(0, 0, 0, .25);
	border: 1px solid rgba(168, 85, 247, .15);
	border-radius: 8px;
	padding: 8px 10px;
	transition: all .3s;
}
.sim-ai-evidence-item--firing {
	border-color: #a855f7;
	background: rgba(168, 85, 247, .12);
}
.sim-ai-evidence-name {
	font-size: 9.5px;
	font-weight: 800;
	color: #fff;
	letter-spacing: .3px;
	margin-bottom: 4px;
}
.sim-ai-evidence-bar {
	height: 4px;
	background: rgba(168, 85, 247, .15);
	border-radius: 2px;
	overflow: hidden;
}
.sim-ai-evidence-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #a855f7 0%, #ff8c00 100%);
	transition: width .8s ease-out;
}

/* === AI v9 visual upgrades === */

/* SVG connection lines layer */
.sim-ai-connections {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}
.sim-ai-connections path {
	transition: stroke 0.3s, stroke-width 0.3s, opacity 0.3s;
}
.sim-ai-connections path.is-active {
	stroke: url(#aiLineActive);
	stroke-width: 2.5;
	filter: drop-shadow(0 0 4px rgba(34, 211, 238, .6));
}

/* Thinking dots animation per agent */
.sim-ai-agent-thinking {
	display: flex;
	justify-content: center;
	gap: 3px;
	margin-top: 5px;
	height: 6px;
	opacity: 0;
	transition: opacity 0.3s;
}
.sim-ai-agent--active .sim-ai-agent-thinking {
	opacity: 1;
}
.sim-ai-agent-thinking span {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #22d3ee;
	animation: sim-ai-thinking-bounce 1.2s infinite ease-in-out;
}
.sim-ai-agent-thinking span:nth-child(1) { animation-delay: 0s; }
.sim-ai-agent-thinking span:nth-child(2) { animation-delay: 0.15s; }
.sim-ai-agent-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes sim-ai-thinking-bounce {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
	40% { transform: scale(1.3); opacity: 1; }
}

/* Confidence percentage badge per agent (appears when agent activates) */
.sim-ai-agent-conf {
	position: absolute;
	top: -6px; right: -6px;
	font-size: 9px;
	font-weight: 800;
	background: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);
	color: #fff;
	padding: 2px 6px;
	border-radius: 10px;
	min-width: 28px;
	text-align: center;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.4s ease, transform 0.4s ease;
	box-shadow: 0 0 10px rgba(168, 85, 247, .5);
}
.sim-ai-agent-conf.is-shown {
	opacity: 1;
	transform: scale(1);
}

/* Place stage children above SVG */
.sim-ai-stage > .sim-ai-input,
.sim-ai-stage > .sim-ai-agents,
.sim-ai-stage > .sim-ai-verdict {
	position: relative;
	z-index: 2;
}

/* Verdict progressive reveal */
.sim-ai-verdict {
	position: relative;
}
.sim-ai-verdict-stats > div {
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.sim-ai-verdict-stats > div.is-shown {
	opacity: 1;
	transform: translateY(0);
}
.sim-ai-verdict[data-revealing="1"] .sim-ai-verdict-stats > div {
	opacity: 0;
	transform: translateY(8px);
}

/* Pulse glow on verdict when locked */
.sim-ai-verdict.is-locked {
	animation: sim-ai-verdict-glow 1.6s ease-out 1;
}
@keyframes sim-ai-verdict-glow {
	0% { box-shadow: 0 0 0 rgba(168, 85, 247, 0); }
	40% { box-shadow: 0 0 35px rgba(168, 85, 247, .6); }
	100% { box-shadow: 0 0 12px rgba(168, 85, 247, .25); }
}