/* ─────────────────────────────────────────────
   Док-станция кнопки amoCRM

   Виджет создаёт .amo-button-holder прямым ребёнком body и живёт своей
   жизнью. Скрипт js/amocrm-dock.js оборачивает холдер в свой .collagen-amo-dock,
   после чего позиционированием и видимостью кнопки управляем мы.

   ⚠️ Обёртка НАМЕРЕННО получает второй класс .amo-button-holder. На окнах
   до 450px виджет при открытом чате прячет всех прямых детей body правилом
   `> *:not(.amo-button-holder):not(.amo-livechat-first-container)`, и без
   этого класса обёртка исчезала бы вместе с кнопкой закрытия чата.
   Побочный эффект: позиционные правила из footer.css достаются обёртке —
   это и нужно, а настоящий холдер внутри обнуляется ниже.
   ───────────────────────────────────────────── */

.collagen-amo-dock.amo-button-holder {
	position: fixed;
	z-index: 2147483000;
	transition: transform .34s cubic-bezier(.22, .61, .36, 1), bottom .32s ease;
}

/* Внутренний холдер виджета: всё позиционирование снято, он просто
   содержимое обёртки. Селектор специфичнее правил темы из footer.css. */
.collagen-amo-dock > .amo-button-holder {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
}

/* Убранное состояние: обёртка уезжает ровно на свою ширину плюс отступ от
   края, поэтому язычок (он висит на `right: 100%`) встаёт впритык к краю окна. */
.collagen-amo-dock.is-tucked {
	transform: translateX(calc(100% + var(--amo-dock-right, 24px)));
}

/* Пока кнопка убрана, её содержимое не должно ловить клики «вслепую» */
.collagen-amo-dock.is-tucked > .amo-button-holder {
	pointer-events: none;
}

/* Всплывающее сообщение живёт внутри кнопки и выходит далеко за границы
   док-станции, поэтому при убранной кнопке его нужно гасить отдельно. */
.collagen-amo-dock.is-tucked .amo-livechat_bubble {
	display: none !important;
}

/* Прозрачный жест-слой поверх iframe кнопки. Внутренности iframe не отдают
   touch/pointer-события родительской странице, поэтому ловим свайп здесь,
   а короткий тап пробрасываем в кнопку виджета из JS. */
.collagen-amo-dock__scrim {
	position: absolute;
	inset: 0;
	z-index: 2147483647;
	display: block;
	background: transparent;
	touch-action: pan-y;
}

.collagen-amo-dock.is-tucked .collagen-amo-dock__scrim,
.collagen-amo-dock.is-open .collagen-amo-dock__scrim {
	pointer-events: none;
}

/* ── Язычок возврата ───────────────────────── */

.collagen-amo-dock__handle {
	position: absolute;
	top: 50%;
	right: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--color-primary-opacity-20, rgba(7, 71, 84, .2));
	border-right: 0;
	border-radius: var(--radius-btn, 12px) 0 0 var(--radius-btn, 12px);
	background: #fff;
	color: var(--color-primary);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.collagen-amo-dock.is-tucked .collagen-amo-dock__handle {
	opacity: 1;
	pointer-events: auto;
}

.collagen-amo-dock__handle:hover {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}

.collagen-amo-dock__handle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-primary-opacity-20, rgba(7, 71, 84, .2)), 0 10px 28px rgba(0, 0, 0, .14);
}

.collagen-amo-dock__handle svg {
	display: block;
	width: 14px;
	height: 14px;
}

/* ── Мобильные ─────────────────────────────── */

@media (max-width: 990px) {
	/* Приветственная всплывашка виджета: на телефоне она перекрывает контент
	   и появляется без спроса — гасим. ⚠️ Классы у amoCRM плавают от версии
	   к версии, поэтому ловим по вхождению; если всплывашка осталась,
	   селектор уточнить по её реальному классу из DevTools. */
	.collagen-amo-dock [class*="message" i],
	.collagen-amo-dock [class*="welcome" i],
	.collagen-amo-dock [class*="tooltip" i] {
		display: none !important;
	}
}

@media (min-width: 991px) {
	.collagen-amo-dock__scrim {
		display: none;
	}
}

@media (max-width: 768px) {
	.collagen-amo-dock {
		--amo-dock-right: 16px;
	}

	.collagen-amo-dock__handle {
		width: 28px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.collagen-amo-dock,
	.collagen-amo-dock__handle {
		transition: none;
	}
}