/* Виджет контактов. Макет Claude Design «Виджет контактов · 14a» (десктоп)
   и «14b» (телефон) — лестница кружков, которая выкладывается вверх
   из круглой зелёной кнопки.

   Разметку печатает mydecor-child/inc/contact-widget.php, поведение —
   assets/contact.js. Зеркало макета: на сайте виджет стоит СЛЕВА внизу
   (справа кнопка «Наверх»), поэтому ярлычок канала выезжает вправо.

   Этажи по z-index в проекте: шапка 999, шторка меню 998, «Наверх» 996,
   нижняя панель телефона у темы 994. Виджету достаётся 995 — он выше панели
   и ниже всего, что разворачивается на весь экран. Баннер cookie (99998)
   перекрывает виджет намеренно: пока согласие не дано, он главный. */

.tk-contact {
	--tk-deep: #1D3A37;
	--tk-deep-hi: #24473F;
	--tk-accent: #8A6A3B;
	--tk-cream: #FFFDF9;
	--tk-border: #E4DCCF;
	--tk-faint: #9A9188;
	--tk-ease: cubic-bezier(0.16, 1, 0.3, 1);

	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 995;

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	font-family: 'Golos Text', system-ui, -apple-system, sans-serif;
	line-height: 1.3;

	/* Обёртка и лестница — рамка, а не мишень: иначе пустая полоса шириной
	   в кружок съедала бы клики по странице под виджетом. Кликается только
	   то, что нарисовано. */
	pointer-events: none;
}

.tk-contact__link,
.tk-contact__fab,
.tk-contact__close {
	pointer-events: auto;
}

/* Крестик убрал виджет до перезагрузки страницы. */
.tk-contact.is-gone {
	display: none;
}

/* ---------- лестница ---------- */

/* В покое лестница свёрнута (display: none). Разворачивать её умеет только
   скрипт, поэтому при отключённом JS разметка возвращает столбик ссылок
   тегом noscript (см. inc/contact-widget.php): мёртвая кнопка хуже. */
.tk-contact__list {
	list-style: none;
	margin: 0 0 6px;
	padding: 0 0 0 3px;
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 11px;
}

.tk-contact.is-open .tk-contact__list,
.tk-contact.is-closing .tk-contact__list {
	display: flex;
}

.tk-contact__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Открытие — каскад снизу вверх, закрытие — обратный: кружки втягиваются
   в кнопку. Номера этажей приходят из PHP переменными --tk-c-i / --tk-c-r. */
.tk-contact.is-open .tk-contact__item {
	animation: tk-contact-pop 620ms cubic-bezier(0.22, 1.2, 0.36, 1) calc(var(--tk-c-r, 0) * 52ms) both;
}

.tk-contact.is-closing .tk-contact__item {
	animation: tk-contact-unpop 380ms cubic-bezier(0.5, 0, 0.75, 0) calc(var(--tk-c-i, 0) * 42ms) both;
}

@keyframes tk-contact-pop {
	0%   { opacity: 0; transform: translateY(26px) scale(0.35); }
	55%  { opacity: 1; transform: translateY(-4px) scale(1.06); }
	75%  { transform: translateY(1px) scale(0.985); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tk-contact-unpop {
	0%   { opacity: 1; transform: translateY(0) scale(1); }
	30%  { transform: translateY(-3px) scale(1.04); }
	100% { opacity: 0; transform: translateY(30px) scale(0.3); }
}

/* ---------- канал ---------- */

/* Селектор с двумя классами: тема красит любую ссылку внутри страницы
   через font-color.css, и при равном весе побеждает она. */
.tk-contact .tk-contact__link {
	display: flex;
	align-items: center;
	gap: 0;
	text-decoration: none;
	box-shadow: none;
	transition: gap 320ms var(--tk-ease);
}

.tk-contact .tk-contact__link:hover,
.tk-contact .tk-contact__link:focus-visible {
	gap: 10px;
	text-decoration: none;
}

.tk-contact__dot {
	position: relative;
	width: 50px;
	height: 50px;
	flex: none;
	border-radius: 50%;
	background: var(--tk-cream);
	border: 1px solid var(--tk-border);
	color: var(--tk-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px -18px rgba(29, 58, 55, 0.55);
	transition: border-color 240ms ease, box-shadow 240ms ease,
		transform 240ms var(--tk-ease), color 240ms ease;
}

.tk-contact__link:hover .tk-contact__dot,
.tk-contact__link:focus-visible .tk-contact__dot {
	border-color: var(--tk-accent);
	box-shadow: 0 0 0 4px rgba(138, 106, 59, 0.13);
	transform: translateY(-2px);
}

/* Фирменные цвета сетей — те же, что в подвале. */
.tk-contact__link--vk:hover .tk-contact__dot,
.tk-contact__link--vk:focus-visible .tk-contact__dot { color: #0077FF; }

.tk-contact__link--instagram:hover .tk-contact__dot,
.tk-contact__link--instagram:focus-visible .tk-contact__dot { color: #C13584; }

.tk-contact__link--youtube:hover .tk-contact__dot,
.tk-contact__link--youtube:focus-visible .tk-contact__dot { color: #FF0000; }

/* MAX: в покое знак одним цветом (маска, залитая currentColor — тем же,
   каким нарисованы соседи), при наведении проявляется фирменный градиент.
   Оба слоя лежат друг на друге по центру кружка, поэтому знак не дёргается. */
.tk-contact__mark,
.tk-contact__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	display: block;
	max-width: none;
	transition: opacity 240ms ease;
}

.tk-contact__mark {
	background: currentColor;
	-webkit-mask: url(img/logo-max-mask.png) center / contain no-repeat;
	mask: url(img/logo-max-mask.png) center / contain no-repeat;
}

.tk-contact__logo {
	border-radius: 50%;
	opacity: 0;
}

.tk-contact__link--max:hover .tk-contact__mark,
.tk-contact__link--max:focus-visible .tk-contact__mark { opacity: 0; }

.tk-contact__link--max:hover .tk-contact__logo,
.tk-contact__link--max:focus-visible .tk-contact__logo { opacity: 1; }

/* Звёздочка про Meta — как в подвале, сноска стоит второй строкой ярлычка. */
.tk-contact__ast {
	position: absolute;
	top: 7px;
	right: 8px;
	font-size: 9px;
	line-height: 1;
	color: var(--tk-faint);
}

/* ---------- ярлычок ---------- */

.tk-contact__tag {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	background: var(--tk-cream);
	border: 1px solid var(--tk-border);
	border-radius: 4px;
	padding: 8px 0;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	box-shadow: 0 10px 24px -18px rgba(29, 58, 55, 0.5);
	transition: max-width 340ms var(--tk-ease), opacity 220ms ease,
		padding 340ms var(--tk-ease);
}

.tk-contact__link:hover .tk-contact__tag,
.tk-contact__link:focus-visible .tk-contact__tag {
	max-width: 320px;
	opacity: 1;
	padding: 8px 14px;
}

/* Межстрочный интервал задаём обеим строкам явно: тема ставит span'ам жёсткие
   22px, и унаследованный line-height обёртки до них не доходит. С темиными
   строка ярлычка вырастала до 63px и разгоняла шаг лестницы — кружки
   переставали стоять вплотную друг к другу. */
.tk-contact__name {
	font-size: 12.5px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--tk-deep);
}

.tk-contact__hint {
	font-size: 10.5px;
	line-height: 1.3;
	color: var(--tk-faint);
}

/* ---------- кнопка ---------- */

.tk-contact__base {
	position: relative;
	display: flex;
}

.tk-contact__fab {
	position: relative;
	width: 58px;
	height: 58px;
	flex: none;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--tk-deep);
	color: #F7F4EF;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1px var(--tk-deep),
		0 0 0 3px rgba(138, 106, 59, 0.32),
		0 16px 32px -18px rgba(29, 58, 55, 0.65);
	transition: background 220ms ease;
}

.tk-contact__fab:hover,
.tk-contact__fab:focus-visible {
	background: var(--tk-deep-hi);
}

.tk-contact__glyph {
	position: absolute;
	display: none;
}

.tk-contact:not(.is-open) .tk-contact__glyph--chat {
	display: block;
}

/* Крестик появляется только после клика, поэтому поворот при появлении
   ему можно, а «облачку» нельзя: оно стоит на странице с загрузки
   и крутиться на ровном месте не должно. */
.tk-contact.is-open .tk-contact__glyph--close {
	display: block;
	animation: tk-contact-spin 380ms var(--tk-ease) both;
}

@keyframes tk-contact-spin {
	from { opacity: 0; transform: rotate(-90deg) scale(0.7); }
	to   { opacity: 1; transform: rotate(0) scale(1); }
}

/* ---------- крестик ---------- */

.tk-contact__close {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--tk-border);
	border-radius: 50%;
	background: var(--tk-cream);
	color: #7C756C;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.9;
	box-shadow: 0 4px 12px -8px rgba(29, 58, 55, 0.7);
	transition: opacity 200ms ease, color 200ms ease, border-color 200ms ease;
}

.tk-contact__close:hover,
.tk-contact__close:focus-visible {
	opacity: 1;
	color: var(--tk-deep);
	border-color: var(--tk-accent);
}

/* Пальцем в 22 пикселя не попасть — поле попадания шире самого кружка. */
.tk-contact__close::after {
	content: '';
	position: absolute;
	inset: -9px;
}

/* У развёрнутой лестницы крестика нет: там его роль играет сама кнопка,
   и два крестика рядом читались бы как одно и то же действие. */
.tk-contact.is-open .tk-contact__close,
.tk-contact.is-closing .tk-contact__close {
	display: none;
}

/* ---------- затемнение (телефон) ---------- */

.tk-contact__veil {
	position: fixed;
	inset: 0;
	background: rgba(29, 58, 55, 0.28);
	opacity: 0;
	pointer-events: none;
	transition: opacity 260ms ease;
}

/* ---------- телефон и планшет ---------- */

@media (max-width: 900px) {
	/* Ярлычков нет — это макет 14b: только кружки, а фон затемняется. */
	.tk-contact__tag {
		display: none;
	}

	.tk-contact.is-open .tk-contact__veil {
		opacity: 1;
		pointer-events: auto;
	}

	.tk-contact__list {
		gap: 12px;
	}

	.tk-contact__dot {
		width: 52px;
		height: 52px;
	}
}

/* Нижняя панель телефона (#ts-mobile-button-bottom) занимает 50px и живёт
   на body:not(.ts_desktop) — тем же условием поднимаем и виджет, чтобы
   отступ не разъезжался с шириной окна. 70px — как у кнопки «Наверх»,
   её темa на тач-устройствах поднимает ровно настолько. */
body:not(.ts_desktop) .tk-contact {
	left: 16px;
	bottom: 70px;
}

@media (prefers-reduced-motion: reduce) {
	.tk-contact *,
	.tk-contact__item,
	.tk-contact__glyph {
		animation: none !important;
		transition-duration: 1ms !important;
	}
}