/* Messenger chat widget — front-end styles. Sizing comes from the
   --mcw-size / --mcw-fab-size / --mcw-svg-size custom properties, printed
   inline per the admin's "icon size" setting. Position comes from the
   mcw-side-* / mcw-valign-* classes plus the --mcw-offset-x / --mcw-offset-y
   custom properties (redefined inside the max-width media query below for
   the mobile-specific offset values), all printed per the admin's settings. */

.mcw-widget {
	position: fixed;
	z-index: 999;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* --mcw-offset-x / --mcw-offset-y nudge the widget away from its edge
   (or center) — useful when a theme element (e.g. a "scroll to top"
   button) already occupies the same corner. Positive values move the
   widget toward the center of the screen on both axes. */
.mcw-widget.mcw-side-right { right: calc(20px + var(--mcw-offset-x, 0px)); }
.mcw-widget.mcw-side-left { left: calc(20px + var(--mcw-offset-x, 0px)); }

.mcw-widget.mcw-valign-top { top: calc(20px + var(--mcw-offset-y, 0px)); }
.mcw-widget.mcw-valign-center { top: calc(50% + var(--mcw-offset-y, 0px)); transform: translateY(-50%); }
.mcw-widget.mcw-valign-bottom { bottom: calc(20px + var(--mcw-offset-y, 0px)); }

.mcw-widget__item {
	position: relative;
}

/* #mcwWidget (an ID, always present on the wrapper) qualifies every rule
   that styles an <a>/<button> below, so it always outranks the theme's
   generic `:is(.btn, .button, button, ...)` reset regardless of stylesheet
   load order — a bare class selector has the same specificity as that
   :is() list and would lose or win by print order alone, which is fragile.
   The same reasoning applies to every collapse-mode override further down:
   they must all carry #mcwWidget too, or they lose to the base
   "display: none" rule regardless of how many classes they add. */
#mcwWidget .mcw-widget__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mcw-size, 56px);
	height: var(--mcw-size, 56px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(20, 24, 26, 0.22);
	transition: transform .18s ease;
	text-decoration: none;
}

#mcwWidget .mcw-widget__link:hover {
	transform: scale(1.07);
}

#mcwWidget .mcw-widget__link svg,
#mcwWidget .mcw-widget__link img {
	width: var(--mcw-svg-size, 28px);
	height: var(--mcw-svg-size, 28px);
	fill: #fff;
}

.mcw-widget__tip {
	position: absolute;
	top: 50%;
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	background: #14181a;
	color: #fff;
	font: 600 14px/1 -apple-system, Helvetica, Arial, sans-serif;
	padding: 9px 14px;
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(20, 24, 26, 0.22);
	transition: opacity .18s ease, transform .18s ease;
}

.mcw-side-right .mcw-widget__tip {
	right: calc(100% + 12px);
	transform: translateY(-50%) translateX(8px);
}

.mcw-side-left .mcw-widget__tip {
	left: calc(100% + 12px);
	transform: translateY(-50%) translateX(-8px);
}

.mcw-widget__item:hover .mcw-widget__tip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

#mcwWidget .mcw-widget__fab {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--mcw-fab-size, 48px);
	height: var(--mcw-fab-size, 48px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #17a24a; /* Fallback only — the button always carries an inline background from the admin's FAB color/override. */
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(23, 162, 74, 0.4);
}

#mcwWidget .mcw-widget__fab svg,
#mcwWidget .mcw-widget__fab img {
	width: calc(var(--mcw-fab-size, 48px) * 0.46);
	height: calc(var(--mcw-fab-size, 48px) * 0.46);
}

#mcwWidget .mcw-widget__fab-close { display: none; }

/* Desktop collapse mode ("Сворачивание на десктопе" admin setting) — fully
   independent of the mobile setting below: each is scoped to its own
   min-/max-width media query so one can be on while the other is off. */
@media (min-width: 769px) {
	#mcwWidget.mcw-collapse-desktop .mcw-widget__item {
		opacity: 0;
		transform: translateY(14px) scale(.7);
		pointer-events: none;
		transition: opacity .2s ease, transform .24s cubic-bezier(.34,1.4,.6,1);
	}

	#mcwWidget.mcw-collapse-desktop.is-open .mcw-widget__item {
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}

	#mcwWidget.mcw-collapse-desktop .mcw-widget__fab { display: flex; }
	#mcwWidget.mcw-collapse-desktop.is-open .mcw-widget__fab-chat { display: none; }
	#mcwWidget.mcw-collapse-desktop.is-open .mcw-widget__fab-close { display: block; }
}

/* Mobile collapse mode ("Сворачивание на мобильных" admin setting,
   default on to match the original mockup's mobile behavior). */
@media (max-width: 768px) {
	#mcwWidget { gap: 10px; }
	#mcwWidget.mcw-side-right { right: calc(14px + var(--mcw-offset-x, 0px)); }
	#mcwWidget.mcw-side-left { left: calc(14px + var(--mcw-offset-x, 0px)); }

	#mcwWidget.mcw-collapse-mobile .mcw-widget__tip { display: none; }

	#mcwWidget.mcw-collapse-mobile .mcw-widget__item {
		opacity: 0;
		transform: translateY(14px) scale(.7);
		pointer-events: none;
		transition: opacity .2s ease, transform .24s cubic-bezier(.34,1.4,.6,1);
	}

	#mcwWidget.mcw-collapse-mobile.is-open .mcw-widget__item {
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}

	#mcwWidget.mcw-collapse-mobile .mcw-widget__fab { display: flex; }
	#mcwWidget.mcw-collapse-mobile.is-open .mcw-widget__fab-chat { display: none; }
	#mcwWidget.mcw-collapse-mobile.is-open .mcw-widget__fab-close { display: block; }
}