/**
 * Armo Float frontend styles.
 * Intentionally framework-free and scoped to the armofb namespace.
 */

.armofb-stack {
	position: fixed;
	inset: 0;
	z-index: var(--armofb-z-index, 9999);
	margin: 0;
	padding: 0;
	pointer-events: none;
	box-sizing: border-box;
	isolation: isolate;
}

.armofb-button {
	position: absolute;
	bottom: calc(var(--armofb-bottom-desktop, 32px) + env(safe-area-inset-bottom, 0px));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--armofb-size, 56px);
	height: var(--armofb-size, 56px);
	min-width: var(--armofb-size, 56px);
	min-height: var(--armofb-size, 56px);
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	box-sizing: border-box;
	border: var(--armofb-border-width, 0px) solid var(--armofb-border-color, #fff);
	border-radius: 50%;
	background: var(--armofb-background, #fff);
	color: inherit;
	line-height: 1;
	text-decoration: none;
	text-indent: 0;
	cursor: pointer;
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transform-origin: center;
}

.armofb-stack--right .armofb-button {
	right: calc(var(--armofb-side-desktop, 24px) + env(safe-area-inset-right, 0px));
}

.armofb-stack--left .armofb-button {
	left: calc(var(--armofb-side-desktop, 24px) + env(safe-area-inset-left, 0px));
}

.armofb-button:hover,
.armofb-button:focus,
.armofb-button:active {
	text-decoration: none;
}

.armofb-button:focus-visible {
	outline: 3px solid #135e96;
	outline-offset: 3px;
}

.armofb-button__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	object-fit: contain;
	box-sizing: border-box;
}

.armofb-shadow--none {
	box-shadow: none;
}

.armofb-shadow--soft {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.armofb-effect--fade {
	animation: armofb-fade-in 280ms ease-out both;
}

.armofb-effect--pulse {
	animation: armofb-pulse 2.2s ease-in-out infinite;
}

.armofb-effect--hover-scale {
	transition: transform 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) {
	.armofb-effect--hover-scale:hover {
		transform: scale(1.07);
	}
}

.armofb-tooltip {
	position: absolute;
	top: 50%;
	z-index: 1;
	width: max-content;
	max-width: min(260px, calc(100vw - 120px));
	padding: 7px 10px;
	border-radius: 7px;
	background: rgba(24, 24, 27, 0.96);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: normal;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity 140ms ease;
}

.armofb-stack--right .armofb-tooltip {
	right: calc(100% + 12px);
}

.armofb-stack--left .armofb-tooltip {
	left: calc(100% + 12px);
}

.armofb-button:hover .armofb-tooltip,
.armofb-button:focus-visible .armofb-tooltip {
	opacity: 1;
}

.armofb-button--mobile-only {
	display: none;
}

@keyframes armofb-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes armofb-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.055);
	}
}

@media (max-width: 782px) {
	.armofb-button {
		bottom: calc(var(--armofb-bottom-mobile, 20px) + env(safe-area-inset-bottom, 0px));
	}

	.armofb-stack--right .armofb-button {
		right: calc(var(--armofb-side-mobile, 16px) + env(safe-area-inset-right, 0px));
	}

	.armofb-stack--left .armofb-button {
		left: calc(var(--armofb-side-mobile, 16px) + env(safe-area-inset-left, 0px));
	}

	.armofb-button--desktop-only {
		display: none;
	}

	.armofb-button--mobile-only {
		display: inline-flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.armofb-button,
	.armofb-tooltip {
		animation: none !important;
		transition: none !important;
	}

	.armofb-effect--hover-scale:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.armofb-button {
		border: 1px solid ButtonText;
		background: ButtonFace;
	}

	.armofb-tooltip {
		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;
	}
}

@media print {
	.armofb-stack {
		display: none !important;
	}
}