/**
 * Виджет чата acdc.uz.
 *
 * Ширина задана в процентах с потолком в пикселях, и ни одного `@media`:
 * окно живёт на всех страницах сайта, а лендинги acdc.uz уже один раз
 * поймали ловушку, когда правило внутри `@media` не срабатывало там, где
 * его ждали. Проценты с `max-width` дают то же самое без порогов.
 */

#acdc-chat {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9000;
	font-size: 14px;
	line-height: 1.4;
	color: #222;
}

#acdc-chat * {
	box-sizing: border-box;
}

/*
 * Скрытое остаётся скрытым. Правило браузера `[hidden] { display: none }`
 * слабее любого нашего `display`, и метка непрочитанного с её
 * `display: inline-block` горела бы всегда.
 */
#acdc-chat [hidden] {
	display: none;
}

/*
 * Кнопка вызова — круг со знаком, а не подпись словами: решение владельца
 * 6 сентября 2026. Слова из кнопки не исчезли, они ушли в `aria-label` —
 * читалка экрана и поиск по странице обязаны находить «Спросить менеджера»
 * и тогда, когда глазу показан один пузырь.
 *
 * `position: relative` держит метку непрочитанного: она висит на краю круга,
 * а не стоит строкой после текста, как было у широкой кнопки.
 */
.acdc-chat-knopka-vyzova {
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #0a5ec7;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.22 );
}

.acdc-chat-knopka-vyzova:hover {
	background: #0949a0;
}

/*
 * Знак красится `currentColor`, а не своим цветом: тема Woodmart перекрашивает
 * кнопки сайта, и на слайдере главной мы это уже поймали. Перекрасят круг —
 * знак поедет за цветом текста сам, и белое на синем не станет белым на белом.
 */
.acdc-chat-znak {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	fill: currentColor;
	transition: opacity 0.18s, transform 0.18s;
}

/*
 * Открыто — крестик, закрыто — пузырь. Оба знака лежат в кнопке всегда и
 * меняются прозрачностью: подмена разметки на каждый щелчок сбрасывала бы
 * и метку, и обработчик, а `hidden` здесь дал бы рывок вместо перехода.
 */
.acdc-chat-znak--krest,
.acdc-chat-knopka-vyzova--otkryto .acdc-chat-znak--chat {
	opacity: 0;
	transform: rotate( -90deg ) scale( 0.6 );
}

.acdc-chat-knopka-vyzova--otkryto .acdc-chat-znak--krest {
	opacity: 1;
	transform: none;
}

/*
 * Движение зовёт заговорить и потому конечно: три волны и тишина. Кольцо
 * растёт тенью, а не вторым узлом, — тень не занимает места и не ловит щелчки.
 * Вечно пульсирующий круг в углу раздражает и держит композитор занятым на
 * каждой странице сайта, а страниц у каталога тысячи.
 */
@keyframes acdc-chat-puls {
	0% {
		box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.22 ), 0 0 0 0 rgba( 10, 94, 199, 0.55 );
	}

	100% {
		box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.22 ), 0 0 0 18px rgba( 10, 94, 199, 0 );
	}
}

.acdc-chat-knopka-vyzova--puls {
	animation: acdc-chat-puls 2s ease-out 3;
}

/* Пришёл ответ — короткий кивок вместе с меткой, тоже три раза и тихо. */
@keyframes acdc-chat-kivok {
	0%,
	60%,
	100% {
		transform: rotate( 0 );
	}

	70% {
		transform: rotate( -12deg );
	}

	85% {
		transform: rotate( 10deg );
	}
}

.acdc-chat-knopka-vyzova--kivok {
	animation: acdc-chat-kivok 1.6s ease-in-out 3;
}

/*
 * Единственный `@media` в файле, и он НЕ про ширину. Пороги ширины здесь
 * запрещены и остаются запрещены: окно висит на каждой странице сайта, и
 * правило, написанное под один шаблон, ломает раскладку другого. А это —
 * объявленное системой предпочтение гостя, и оно одинаково на всех шаблонах.
 *
 * Движение снимается целиком, а не замедляется: «поменьше движения» значит
 * «без движения», а не «то же самое, но вяло».
 */
@media ( prefers-reduced-motion: reduce ) {
	.acdc-chat-knopka-vyzova--puls,
	.acdc-chat-knopka-vyzova--kivok {
		animation: none;
	}

	.acdc-chat-znak {
		transition: none;
	}
}

/*
 * Метка непрочитанного. Окно чата само не разворачивается никогда (решение
 * владельца 47), и эта точка — единственное, чем виджет сообщает о новом
 * ответе менеджера.
 */
.acdc-chat-metka {
	position: absolute;
	top: -2px;
	right: -2px;
	display: inline-block;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: #d4351c;
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
}

/*
 * Окно — колонка с потолком по высоте экрана.
 *
 * Раньше высота складывалась из слагаемых (шапка, лента до 320, форма) и
 * ничем сверху не держалась. Колонка нужна, чтобы лишнее отнимала лента,
 * а не форма: без неё потолок обрезал бы окно снизу — вместе с кнопкой
 * «Отправить».
 *
 * `dvh` меряет видимую часть с поправкой на панели браузера; `vh` строкой
 * выше — запас для тех, кто `dvh` не знает. Клавиатуру телефона не мерит
 * ни та, ни другая единица: она уменьшает не эти величины, а «видимое
 * окно» (`visualViewport`), и до него доберётся отдельная правка, если
 * после этой на телефоне всё ещё будет тесно. Порогов ширины (`@media`)
 * по-прежнему нет: на десктопе потолок просто не срабатывает.
 *
 * `display: flex` здесь безопасен только потому, что выше стоит
 * `#acdc-chat [hidden] { display: none }` — правило с идентификатором,
 * оно сильнее этого. Уберут его — и закрытое окно раскроется у всех.
 */
.acdc-chat-okno {
	display: flex;
	flex-direction: column;
	width: 92%;
	max-width: 360px;
	min-width: 260px;
	max-height: 80vh;
	max-height: 80dvh;
	margin-bottom: 10px;
	margin-left: auto;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.28 );
	overflow: hidden;
}

.acdc-chat-shapka {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: #0a5ec7;
	color: #fff;
}

.acdc-chat-zagolovok {
	font-weight: 600;
}

.acdc-chat-zakryt {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/*
 * Нутро окна — тоже колонка, и оно же забирает остаток высоты у шапки.
 *
 * `min-height: 0` не лишнее слово: наименьшая высота растяжимого элемента
 * по умолчанию равна его содержимому, и лента отказалась бы сжиматься,
 * сколько бы ни было переписки.
 */
.acdc-chat-telo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: 12px 14px;
}

/*
 * Лента отдаёт высоту первой, когда места мало: сжиматься должна переписка,
 * а не поле вопроса с кнопкой. 320 остаётся потолком для десктопа, где
 * потолка у окна нет вовсе.
 */
.acdc-chat-lenta {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 320px;
	overflow-y: auto;
}

.acdc-chat-s {
	margin-bottom: 10px;
	max-width: 85%;
}

.acdc-chat-s--gost {
	margin-left: auto;
	text-align: right;
}

/*
 * `white-space: pre-wrap` — не украшение: менеджер отвечает из Telegram
 * списком, по строке на позицию, и без него весь список слипается в одну
 * строку. Перевод строки в HTML схлопывается в пробел, а `ekran()` его не
 * трогает и трогать не должен — тегов в текст гостя мы не вносим.
 */
.acdc-chat-t {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 12px;
	background: #eef2f7;
	text-align: left;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.acdc-chat-s--gost .acdc-chat-t {
	background: #d9e8fb;
}

.acdc-chat-s--sistema .acdc-chat-t {
	background: transparent;
	color: #777;
	font-style: italic;
}

.acdc-chat-vlozhenie {
	display: inline-block;
	margin-top: 4px;
	color: #0a5ec7;
}

/* Снимок гость смотрит прямо в окне. Потолок высоты нужен, чтобы вертикальный
   кадр не выдавил из окна саму переписку. */
.acdc-chat-vlozhenie-snimok {
	display: block;
	margin-top: 6px;
}

.acdc-chat-vlozhenie-snimok img {
	display: block;
	max-width: 100%;
	max-height: 220px;
	border-radius: 8px;
}

/*
 * Служебная строка под сообщением — мелкая и серая: это не текст переписки.
 * У своего сообщения там время и состояние (`sost`), у чужого одно время
 * (`vremya`); вид общий, разные классы нужны разметке, а не глазу.
 */
.acdc-chat-sost,
.acdc-chat-vremya {
	margin-top: 2px;
	color: #8a8a8a;
	font-size: 11px;
}

.acdc-chat-forma {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.acdc-chat-pole {
	flex: 1 1 100%;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ccd4de;
	border-radius: 8px;
	font: inherit;
	resize: vertical;
}

/*
 * Своя высота у поля вопроса — не вкусовщина, а защита от чужого правила.
 * Тема Woodmart объявляет в `base.min.css` голое `textarea { min-height:
 * 190px }`, и поле съедало окно целиком: 190 плюс отступы — те самые 210
 * точек, при которых на телефоне видно одну реплику. Атрибут `rows` против
 * этого бессилен: CSS сильнее его всегда, и `rows="1"` в разметке — лишь
 * запасной вариант на случай, когда таблица стилей не доехала.
 *
 * Тег в селекторе назван не ради силы (у темы селектор и так слабее), а ради
 * границы: тот же класс носят поля анкеты, а они `input`, и высота строки
 * им не нужна.
 *
 * Потолок держит именно CSS, а не расчёт в скрипте: скрипт ставит высоту
 * прямо в стиль элемента, и ошибись он — `max-height` всё равно не даст
 * полю вытеснить переписку.
 *
 * `resize` снят: тянуть поле руками и растить его по набору — два хозяина
 * у одной высоты, и скрипт затирал бы растяжку на первом же знаке.
 */
textarea.acdc-chat-pole {
	min-height: 40px;
	max-height: 112px;
	overflow-y: auto;
	resize: none;
}

/**
 * Поле запирается ровно в одном случае — пока у разговора нет почты (1.17.0).
 * Серый фон нужен, чтобы запрет читался запретом: поле обычного вида, в
 * которое не печатается, выглядит поломкой окна, а не требованием анкеты,
 * стоящей строкой ниже.
 */
textarea.acdc-chat-pole[disabled] {
	background: #f1f4f8;
	cursor: not-allowed;
}

.acdc-chat-knopka {
	margin-left: auto;
	padding: 8px 16px;
	border: 0;
	border-radius: 8px;
	background: #0a5ec7;
	color: #fff;
	font: inherit;
	cursor: pointer;
}

.acdc-chat-knopka[disabled] {
	background: #b8c2ce;
	cursor: default;
}

/**
 * Поле-ловушка прячет стиль, а не `type="hidden"`: скрытое стилем поле робот
 * заполняет охотно, а поле «hidden» чаще пропускает. Человек его не видит и
 * не попадает в него табом (`tabindex="-1"` в разметке).
 */
#acdc-chat-primanka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.acdc-chat-anketa {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e3e8ee;
}

.acdc-chat-anketa .acdc-chat-pole {
	margin-bottom: 8px;
}

/*
 * Слова об опечатке в анкете.
 *
 * Пустой узел висит в разметке всегда, а не заводится по надобности: строка
 * встаёт МЕЖДУ полями и кнопкой, и дорисованный узел сдвигал бы кнопку из-под
 * пальца ровно в тот миг, когда по ней метятся. Пустой — не занимает ничего.
 */
.acdc-chat-anketa .acdc-chat-oshibka {
	margin: 0 0 8px;
	color: #b4442a;
	font-size: 12px;
}

.acdc-chat-anketa .acdc-chat-oshibka:empty {
	display: none;
}

.acdc-chat-vyrozhdenie {
	margin: 0 0 10px;
}

.acdc-chat-preduprezhdenie {
	margin: 8px 0 0;
	color: #b4442a;
}

.acdc-chat-melko {
	margin: 8px 0 0;
	color: #8a8a8a;
	font-size: 12px;
}

/* Скрепка живёт в форме рядом с кнопкой, а само поле файла спрятано:
   браузерная кнопка выбора не подчиняется стилям и в узкое окно не влезает. */
.acdc-chat-skrepka { cursor: pointer; display: inline-flex; align-items: center;
	padding: 0 6px; font-size: 18px; line-height: 1; }

/* Название для тех, кто слушает окно голосом: скрепка сама по себе рисунок. */
.acdc-chat-skrytno { position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; }


/* Галка согласия на обработку данных (ЗРУ-547). Строкой, а не столбиком:
   квадратик прижат к первой строке текста (`align-items: flex-start`), иначе
   в двухстрочной подписи он уезжает на середину и перестаёт читаться галкой.
   Мелко, как и остальные подписи, но не серым: это условие, а не сноска. */
.acdc-chat-soglasie { display: flex; align-items: flex-start; gap: 8px;
	margin: 8px 0 0; font-size: 12px; line-height: 1.4; cursor: pointer; }

/* Квадратик не сжимается: в узком окне flex ужал бы его в полоску. */
.acdc-chat-soglasie input { flex: 0 0 auto; margin: 2px 0 0; }

.acdc-chat-ssylka { color: inherit; text-decoration: underline; }