/**
 * Floating contact / chat stack (bottom-right).
 */

.rocky-float-contact {
	position: fixed;
	z-index: 95;
	right: 1.25rem;
	bottom: 1.25rem;
	pointer-events: none;
}

.rocky-float-contact__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	pointer-events: auto;
}

.rocky-float-contact__channels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.rocky-float-contact__channels[hidden] {
	display: none;
}

.rocky-float-contact.is-open .rocky-float-contact__channels {
	display: flex;
	animation: rocky-float-contact-in 0.25s ease;
}

@keyframes rocky-float-contact-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.rocky-float-contact__btn,
.rocky-float-contact__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Larger glyphs inside the same 52px hit target (overrides inline SVG dimensions). */
.rocky-float-contact__btn svg,
.rocky-float-contact__toggle-icon svg {
	display: block;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.rocky-float-contact__channels .rocky-float-contact__btn svg {
	width: 32px;
	height: 32px;
}

.rocky-float-contact__btn--phone svg {
	width: 30px;
	height: 30px;
}

.rocky-float-contact__btn:hover,
.rocky-float-contact__toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.rocky-float-contact__btn--phone {
	background: #e53935;
	color: var(--rocky-color-text-on-dark);
}

.rocky-float-contact__btn--zalo {
	background: #0068ff;
	color: var(--rocky-color-text-on-dark);
}

.rocky-float-contact__btn--messenger {
	background: #0084ff;
	color: var(--rocky-color-text-on-dark);
}

.rocky-float-contact__btn--top {
	background: var(--rocky-color-surface);
	color: #1a2744;
	border: 2px solid #1a2744;
}

.rocky-float-contact__btn--top[hidden] {
	display: none;
}

.rocky-float-contact__toggle {
	position: relative;
	background: #1a2744;
	color: var(--rocky-color-text-on-dark);
	box-shadow: 0 0 0 4px rgba(26, 39, 68, 0.2), 0 4px 16px rgba(0, 0, 0, 0.2);
}

.rocky-float-contact__toggle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rocky-float-contact__toggle-icon--close {
	display: none;
}

.rocky-float-contact.is-open .rocky-float-contact__toggle {
	background: #1a2744;
}

.rocky-float-contact.is-open .rocky-float-contact__toggle-icon--chat {
	display: none;
}

.rocky-float-contact.is-open .rocky-float-contact__toggle-icon--close {
	display: flex;
}

.rocky-float-contact:not(.is-open) .rocky-float-contact__toggle {
	background: #0068ff;
	box-shadow: 0 4px 16px rgba(0, 104, 255, 0.35);
}

@media (max-width: 600px) {
	.rocky-float-contact {
		right: 1rem;
		bottom: 1rem;
	}

	.rocky-float-contact__btn,
	.rocky-float-contact__toggle {
		width: 48px;
		height: 48px;
	}
}