/**
 * MolSimulX 3Dmol 多实例查看器
 * 高度由每实例 --mol3d-height 或 data-height 控制
 */

.molsimulx-mol3d {
	--mol3d-height: clamp(320px, 50vh, 600px);
	position: relative;
	width: 100%;
	height: var(--mol3d-height);
	min-height: 200px;
	overflow: hidden;
	border-radius: inherit;
}

.molsimulx-mol3d:not(.is-ready) .molsimulx-mol3d__canvas {
	visibility: hidden;
}

.molsimulx-mol3d.is-ready .molsimulx-mol3d__canvas {
	visibility: visible;
}

.molsimulx-mol3d__canvas {
	position: relative;
	width: 100%;
	height: 100%;
}

.molsimulx-mol3d__canvas canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

.molsimulx-mol3d__glass {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: grab;
	background: transparent;
	/* Let the page scroll; desktop rotate uses mouse on this layer */
	touch-action: pan-y;
}

.molsimulx-mol3d.is-touch-ui .molsimulx-mol3d__glass {
	cursor: default;
}

.molsimulx-mol3d.is-touch-ui .molsimulx-mol3d__hint {
	display: none;
}

.molsimulx-mol3d__glass.is-active {
	cursor: grabbing;
	pointer-events: none;
}

.molsimulx-mol3d.is-interactive .molsimulx-mol3d__glass {
	pointer-events: none;
	opacity: 0;
}

.molsimulx-mol3d__hint {
	position: absolute;
	bottom: 0.65rem;
	left: 50%;
	z-index: 3;
	transform: translateX(-50%);
	margin: 0;
	padding: 0.25rem 0.65rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: rgba(226, 232, 240, 0.85);
	background: rgba(15, 23, 42, 0.55);
	border-radius: 999px;
	pointer-events: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.molsimulx-mol3d.is-interactive .molsimulx-mol3d__hint,
.molsimulx-mol3d__hint.is-hidden,
.molsimulx-mol3d__hint[hidden] {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.molsimulx-mol3d__hint {
		transition: none;
	}
}