.itx-msh {
	position: fixed;
	left: var(--itx-msh-left, 14px);
	bottom: calc(var(--itx-msh-bottom, 96px) + env(safe-area-inset-bottom, 0px));
	z-index: 99998;
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: min(78vw, 250px);
	min-height: 46px;
	padding: 8px 12px 8px 9px;
	color: var(--itx-msh-text, #fff);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025)),
		var(--itx-msh-bg, #062e23);
	border: 1px solid color-mix(in srgb, var(--itx-msh-accent, #d7b56d) 58%, transparent);
	border-radius: 18px;
	box-shadow:
		0 12px 35px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(-10px, 12px, 0) scale(0.96);
	transform-origin: left bottom;
	pointer-events: none;
	will-change: opacity, transform;
	transition:
		opacity 420ms cubic-bezier(.22, 1, .36, 1),
		transform 520ms cubic-bezier(.22, 1, .36, 1),
		visibility 420ms ease;
	direction: rtl;
}

.itx-msh.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0) scale(1);
}

.itx-msh.is-dismissed {
	opacity: 0;
	visibility: hidden;
	transform: translate3d(-10px, 16px, 0) scale(0.94);
}

.itx-msh__text {
	display: block;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: -0.15px;
	white-space: nowrap;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.itx-msh__icon {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 34px;
	display: grid;
	place-items: center;
}

.itx-msh__track {
	position: relative;
	display: block;
	width: 17px;
	height: 27px;
	border: 1.6px solid color-mix(in srgb, var(--itx-msh-accent, #d7b56d) 82%, #fff);
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.itx-msh__dot {
	position: absolute;
	top: 5px;
	left: 50%;
	width: 3px;
	height: 6px;
	margin-left: -1.5px;
	border-radius: 999px;
	background: var(--itx-msh-accent, #d7b56d);
	box-shadow: 0 0 10px color-mix(in srgb, var(--itx-msh-accent, #d7b56d) 60%, transparent);
	animation: itx-msh-wheel 1.65s cubic-bezier(.22, 1, .36, 1) infinite;
}

.itx-msh__chevron {
	position: absolute;
	right: 0;
	bottom: 2px;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var(--itx-msh-accent, #d7b56d);
	border-bottom: 1.5px solid var(--itx-msh-accent, #d7b56d);
	transform: rotate(45deg);
	animation: itx-msh-chevron 1.65s ease-in-out infinite;
}

@keyframes itx-msh-wheel {
	0% {
		opacity: 0;
		transform: translateY(0);
	}
	22% {
		opacity: 1;
	}
	72% {
		opacity: 1;
		transform: translateY(9px);
	}
	100% {
		opacity: 0;
		transform: translateY(11px);
	}
}

@keyframes itx-msh-chevron {
	0%, 100% {
		opacity: 0.3;
		transform: translateY(-2px) rotate(45deg);
	}
	50% {
		opacity: 1;
		transform: translateY(2px) rotate(45deg);
	}
}

.itx-msh.itx-msh--mobile {
	display: flex;
}

@media (prefers-reduced-motion: reduce) {
	.itx-msh,
	.itx-msh__dot,
	.itx-msh__chevron {
		animation: none !important;
		transition-duration: 120ms !important;
	}
}

@supports not (color: color-mix(in srgb, white, black)) {
	.itx-msh {
		border-color: rgba(215, 181, 109, 0.62);
	}

	.itx-msh__track {
		border-color: #d7b56d;
	}

	.itx-msh__dot {
		box-shadow: 0 0 10px rgba(215, 181, 109, 0.55);
	}
}