.hover-preview-box {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	min-width: 200px;
	background: #f4f4f4;
	border: #dadada 1px solid;
	backdrop-filter: blur(12px);
	border-radius: 6px;
	box-shadow: 0 20px 32px -12px rgba(0, 0, 0, 0.35),
		0 0 0 0.5px rgba(255, 255, 255, 0.15);
}
*:has(.hover-preview-box) {
	cursor: help;
}
.hover-preview-box img {
	border-radius: 6px;
	max-width: 320px;
	height: auto;
	display: block;
}
.hover-preview-content {
	padding: 12px 16px;
	overflow-y: visible;
	line-height: 1.45;
	scrollbar-width: thin;
}

.hover-preview-content::-webkit-scrollbar {
	width: 4px;
	background: var(--orange-bg);
	border-radius: 10px;
}

.hover-preview-content::-webkit-scrollbar-thumb {
	background: #ffcf7a;
	border-radius: 10px;
}

.hover-preview-loading {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 0.8rem;
	color: #cbdbe6;
}

.hover-preview-loading::before {
	content: '';
	width: 12px;
	height: 12px;
	border: 2px solid rgba(255, 255, 240, 0.3);
	border-top-color: #ffcd7e;
	border-radius: 50%;
	animation: hoverPreviewSpin 0.7s linear infinite;
}

@keyframes hoverPreviewSpin {
	to {
		transform: rotate(360deg);
	}
}