/* LCH Whats button styles */
.lch-whats-container { z-index: 99999; }
#lch-whats-floating.lch-whats-container { position: fixed; bottom: 22px; }
#lch-whats-floating.lch-whats-right { right: 22px; }
#lch-whats-floating.lch-whats-left { left: 22px; }
#lch-whats-inline.lch-whats-container { position: relative; }

.lch-whats-button { display: inline-block; text-decoration: none; }

.lch-whats-avatar-wrap {
	position: relative;
	display: inline-flex;
	width: var(--lchw-size, 64px);
	height: var(--lchw-size, 64px);
	border-radius: 9999px;
	box-shadow: 0 10px 20px rgba(0,0,0,.18);
	overflow: visible; /* so the status dot can sit outside */
	background: transparent;
}
.lch-whats-avatar-clip {
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	overflow: hidden; /* keeps the photo fully inside */
	background: #fff;
}
.lch-whats-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Status dot partly inside/outside */
.lch-whats-status-dot {
	position: absolute;
	width: calc(var(--lchw-size,64px) * var(--lchw-dot-size, 0.26));
	height: calc(var(--lchw-size,64px) * var(--lchw-dot-size, 0.26));
	border-radius: 50%;
	background: #22c55e;
	border: 3px solid #fff;
	right: calc(var(--lchw-size,64px) * var(--lchw-dot-offset, -0.04));
	bottom: calc(var(--lchw-size,64px) * var(--lchw-dot-offset, -0.04));
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Hello Elementor compatibility: admin bar offset & mobile spacing */
.admin-bar #lch-whats-floating.lch-whats-container { bottom: 54px; }
@media (max-width: 767px) {
	#lch-whats-floating.lch-whats-container { bottom: 18px; }
}