/**
 * SM - Chat — вітринний віджет.
 *
 * ОДИНИЦІ. У теми html{font-size:10px}, але на ширинах 1200-1470px корінь
 * плаваючий (0.68vw) — на 1280px це 8.7px, тобто кожен rem виходить на 13%
 * дрібнішим за задуманий. Звідси правило, і воно НЕ «все в rem»:
 *
 *   відступи й геометрію   — у rem: вони МАЮТЬ дихати разом зі сторінкою;
 *   кегль і зони натискання — у px: вони МАЮТЬ НЕ зменшуватися.
 *
 * Порушення цього правила вже коштувало нам трьох дефектів, заміряних у
 * браузері: заголовок панелі всох до 15.7px і майже зрівнявся з вкладкою
 * (14px), кнопка «закрити» вийшла 28x28, а «надіслати» й скріпка — 38x38
 * замість мінімальних 44. Усе це rem, які всохли на плаваючому корені.
 *
 * Кольори — через змінні теми, щоб віджет автоматично слідував за
 * оформленням магазину.
 */

/*
 * Атрибут hidden — це лише display:none з браузерного стилю, і будь-яке
 * авторське правило display його перебиває. У темі таких правил вистачає,
 * тож без цього рядка прихований <input type="file"> показувався б
 * просто в полі вводу як «Виберіть файл».
 */
.sm-chat [hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   0. Токени
   --------------------------------------------------------------------------
   Оголошені на самому віджеті, а не в :root — щоб нічого не протекло в тему
   магазину. Бренд і текст беремо з теми: віджет має слідувати за оформленням
   магазину, а не жити власним життям.

   До цього блоку у файлі було 20 захардкожених кольорів, серед них три майже
   однакові off-white (#f7f7fb / #f7f8fb / #f0f1f7 — різниця в один-два пункти
   каналу) і два різні червоні для одного сенсу «помилка».
   -------------------------------------------------------------------------- */

.sm-chat {
	/* Поверхні */
	--sm-paper: #fff;
	--sm-mist: var(--body-bg, #f7f7fb);
	/* Межа, яку видно: було #f0f1f7 — це 1.05:1 до білого, тобто лінії
	   не існувало. */
	--sm-line: #e2e5ee;
	/* Межа поля вводу — окремий токен: для елементів керування поріг 3:1,
	   а не 1.05:1 як у декоративної лінії. */
	--sm-field-line: #868d9b;

	/* Текст */
	--sm-ink: var(--body-color, #343434);
	--sm-ink-2: #6e6e78;
	--sm-ink-3: #8b8b96;

	/* Бренд. --theme-secondary-color тема вже має (#2471A3) і ніде у віджеті
	   не використовувала — беремо його під наведення замість самопальних
	   напівпрозорих плівок. */
	--sm-brand: var(--theme-primary-color, #2980B9);
	--sm-brand-deep: var(--theme-secondary-color, #1c5f92);
	--sm-on-brand: #fff;

	/* Стани. Один червоний замість двох. */
	--sm-alert: #b02020;
	--sm-alert-bg: #fdeaea;
	--sm-go: #1f7a45;
	--sm-go-bg: #e8f8ee;
	--sm-info: #1c5f92;
	--sm-info-bg: #eef7ff;

	/* Ритм. Шістнадцять кроків відступу зводяться до ряду з кроком 4. */
	--sm-1: 0.4rem;
	--sm-2: 0.8rem;
	--sm-3: 1.2rem;
	--sm-4: 1.6rem;
	--sm-6: 2.4rem;
	--sm-8: 3.2rem;

	/* Дванадцять радіусів зводяться до трьох. */
	--sm-r-s: 0.4rem;
	--sm-r: 0.8rem;
	--sm-r-pill: 999px;
	/* Четвертий радіус — виняток, і він заслужений. Корінь у теми плаваючий
	   (0.68vw), тож на 1280px 0.8rem дає сім пікселів: бульбашки виходять
	   майже прямокутні й читаються як таблиця, а не як розмова. Скруглення
	   бульбашки — єдине місце, де радіус несе зміст, тому в нього власний
	   токен, а не «ще одне значення на око». */
	--sm-r-bubble: 1.6rem;

	/*
	 * ГРАДІЄНТИ. Три штуки, і кожен позначає ДІЮ або ВПІЗНАННЯ.
	 *
	 * Звідки взято форму: у меблях градієнт — це світло на оббивці. Саме так
	 * фотографують і продають диван: мʼякий перехід від згину до гребеня
	 * складки. Звідси й «мʼяко, але строго» — мʼякість у світлі, строгість
	 * у геометрії й наборі, які лишаються жорсткими.
	 *
	 * Де їх НЕМАЄ і не буде: стрічка повідомлень, шапка, поля вводу. Це
	 * поверхні, з яких читають; світло на них заважає. Нещодавно ми
	 * прибрали суцільну синю шапку саме тому, що колір там нічого не
	 * означав, — повертати її градієнтом було б кроком назад.
	 *
	 * Світлий кінець кожного градієнта підібраний так, щоб БІЛИЙ ТЕКСТ на
	 * ньому проходив AA: контраст рахується по найсвітлішій точці, і саме
	 * на ній ламаються красиві градієнти.
	 */
	--sm-dusk: #16304a;
	--sm-slate: #2b5680;

	/*
	 * КНОПКА НА СТОРІНЦІ — ПАСТЕЛЬ, А НЕ ГЛИБОКИЙ СЛАНЕЦЬ.
	 *
	 * Темний варіант виглядав добре, але тримався на білому кільці й був
	 * помітно гучнішим за все інше у віджеті. Мʼяка блакить робить те саме
	 * тихіше: заливка світла, текст темний, і кнопка перестає сперечатися
	 * з товаром на сторінці.
	 *
	 * Заміряно, чому саме такі значення:
	 *   заливка проти синього героя магазину — 3.2:1 (поріг 3.0);
	 *   темний текст на заливці — 8.7:1;
	 *   на БІЛИХ блоках сторінки заливка дає 1.34:1, тобто зникає, —
	 *   тому край обовʼязковий, і саме #6b95bf: 3.15:1 проти білого.
	 *
	 * Розподіл ролей той самий, що й у темної кнопки, лише вивернутий:
	 * ЗАЛИВКА тримає контраст на темному тлі, КРАЙ — на світлому.
	 *
	 * Обидва кольори власник міняє в налаштуваннях модуля; колір тексту
	 * модуль рахує сам за яскравістю — так налаштування не може створити
	 * темне на темному, як це щойно сталося з написом.
	 */
	--sm-mark-1: #eaf2fa;
	--sm-mark-2: #d2e0ef;
	--sm-mark-ink: #16304a;
	--sm-mark-line: #6b95bf;

	--sm-grad-mark: linear-gradient(145deg, var(--sm-mark-1) 0%, var(--sm-mark-2) 100%);
	--sm-grad-mark-hi: linear-gradient(145deg, #f4f8fc 0%, #dce8f4 100%);

	/* Бульбашка покупця й «надіслати» — світло згори, як на подушці. */
	/* Світлий кінець тут не «на око»: #2d7fb2 давав 4.38 при потрібних 4.50 —
	   заміряно, не вгадано. #2b7aab дає 4.69 і на вигляд від першого не
	   відрізняється. Саме на цьому ламається більшість гарних градієнтів:
	   контраст рахують по середньому кольору, а читати доводиться по краю. */
	--sm-grad-mine: linear-gradient(180deg, #2b7aab 0%, #1f5f88 100%);
	--sm-grad-send: linear-gradient(180deg, #2b7aab 0%, #1f5f88 100%);
	--sm-grad-send-hi: linear-gradient(180deg, #2977a6 0%, #1c5679 100%);

	/* Дев'ять тіней зводяться до двох. Тінь панелі — двошарова: щільна
	   близька плюс широка мʼяка. Один шар дає «наліпку», два — предмет,
	   що лежить над сторінкою. */
	--sm-shadow: 0 2px 8px rgba(20, 41, 60, 0.10), 0 2.4rem 6rem rgba(20, 41, 60, 0.20);
	--sm-shadow-s: 0 2px 8px rgba(20, 41, 60, 0.14);

	/* Рух. Ритм беремо з теми: у неї 0.25s у 346 місцях, а модуль анімував
	   усе за 0.2s. Вихід швидший за вхід — так інтерфейс здається жвавішим. */
	--sm-t-in: 0.25s;
	--sm-t-out: 0.15s;
	--sm-ease: ease-out;
}

/* --------------------------------------------------------------------------
   1. Розводимося з тим, що вже стоїть у кутку
   -------------------------------------------------------------------------- */

/* Рідна оболонка чату лишається в підвалі теми. Її контейнер не схований —
   схована лише кнопка, — а стан is-chat-open глобальний, на <html>.
   Без цього правила разом з нашою панеллю відкривалося б і рідне меню. */
.chat:not(.sm-chat) {
	display: none !important;
}

/* Кнопку вмикаємо назад. display:none у теми стоїть ДВІЧІ: у тілі основного
   правила .chat__toggle і окремо в @media (max-width:991px). Однакова
   специфічність, тож без !important не перебити. */
.sm-chat .chat__toggle {
	display: -ms-flexbox !important;
	display: flex !important;
}

/* Статичні іконки Telegram і Viber з підвалу теми. Вони мають
   z-index:999999999999 і геометрично перекривають кнопку чату.
   Месенджери переїхали всередину віджета. */
.dm-mess1,
.dm-mess2 {
	display: none !important;
}

/* Плашка згоди на куки лежить на всю ширину знизу й перекрила б
   нижню кромку панелі. */
.sm-chat.sm-chat--cookie {
	transform: translate(0, -7rem);
}

/*
 * НА ШИРОКОМУ ЕКРАНІ КНОПКА СТОЇТЬ НИЖЧЕ.
 *
 * Від 1200px тема відсуває віджет на `bottom: 16rem` — сто шістдесят
 * пікселів. Перевірено обходом усіх закріплених елементів: у цій смузі в
 * правому нижньому куті НЕМАЄ нічого, лише сторінка, що гортається повз.
 *
 * ВУЖЧЕ 1200px ЧІПАТИ НЕ МОЖНА, і це не обережність. Там тема застосовує
 * `.is-page-sticky .chat { transform: translate(0,-6.5rem) }` — підйом над
 * власним липким меню «Пошук / Каталог / Кошик», яке справді стоїть унизу.
 * Спершу я поставив межу на 768px, вирішивши, що ті 65px теж зайві, — вони
 * не зайві.
 *
 * Опускаючи кнопку, ми заразом віддаємо панелі ті самі сто тридцять
 * пікселів: вона росте вгору від кнопки.
 */
@media (min-width: 1200px) {
	/*
	 * Специфічність подвоєна навмисно: тема тримає `.is-page-sticky .chat`
	 * (0,2,0), і простий `.sm-chat` (0,1,0) програє йому мовчки — правило є,
	 * а нічого не змінюється.
	 */
	.sm-chat.sm-chat {
		bottom: 3rem;
	}

	/* Кнопка опустилася — панелі дісталося більше висоти. */
	.sm-chat .sm-chat__panel {
		height: calc(100vh - 14rem);
	}
}

/* --------------------------------------------------------------------------
   2. Панель
   -------------------------------------------------------------------------- */

.sm-chat .sm-chat__panel {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	/*
	 * ВИСОТА БЕРЕ ТЕ, ЩО Є, А НЕ СТАЛІ 52rem.
	 *
	 * Заміряно на 1512x950: панель займала 520px там, де вільно було 810 —
	 * майже триста пікселів порожнього екрана над нею, тоді як розмова
	 * гортається всередині. Стала висота була обережністю, яка коштувала
	 * половини корисної площі.
	 *
	 * Верхня межа все одно потрібна, і в ПІКСЕЛЯХ: на великому моніторі
	 * панель у півтори тисячі пікселів заввишки — це не «більше видно»,
	 * а рядок тексту, за яким доводиться водити головою. 780px ≈ двадцять
	 * реплік, далі читати однаково незручно.
	 */
	/*
	 * Скільки лишити під панеллю — залежить від того, як високо стоїть сама
	 * кнопка, а тема тримає її по-різному: до 1199px віджет піднятий над
	 * липким меню, від 1200px — опущений нашим правилом. Тому два режими,
	 * і кожен заміряний, а не прикинутий: при єдиному значенні панель
	 * вилазила за верх екрана на дев'ять пікселів.
	 */
	height: calc(100vh - 20rem);
	max-height: 780px;
	min-height: 42rem;
	overflow: hidden;
	/* Ледь помітний холодний підклад згори вниз: панель перестає бути
	   аркушем паперу й стає поверхнею, на яку падає світло. Різниця між
	   кінцями — два пункти яскравості, більше тут і не потрібно. */
	background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
	border-radius: 1.4rem;
	box-shadow: var(--sm-shadow);
}

/* Тема ховає переповнення кнопки заради своєї hover-плівки, і лічильник
   непрочитаного обрізало б скругленням. Плівка має власне скруглення,
   тож видимість переповнення її не псує. */
.sm-chat .chat__toggle {
	overflow: visible;
	touch-action: manipulation;
}

/*
 * ШАПКА СВІТЛА, А НЕ СУЦІЛЬНО СИНЯ.
 *
 * Раніше це був глухий кольоровий слеб на всю ширину — рівно те, як
 * виглядає будь-який чат-віджет останні десять років. Колір у ньому нічого
 * не означав: він просто заповнював місце, а заразом робив кнопку «закрити»
 * блідою плівкою на синьому й змушував кільце фокуса зливатися з тлом.
 *
 * Позиція проста: колір мітить ДІЮ і ГОВОРЯЧОГО, а не прикрашає смугу.
 * Тому бренд лишився там, де він щось каже, — у бульбашці покупця, у кнопці
 * «надіслати», у крапці присутності й у підкресленні активної вкладки.
 * Шапка стала тихою, і панель перестала розпадатися на три чужі блоки.
 */
.sm-chat__head {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: start;
	align-items: flex-start;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: var(--sm-3);
	padding: var(--sm-4) var(--sm-4) var(--sm-3);
	background: var(--sm-paper);
	color: var(--sm-ink);
	border-bottom: 1px solid var(--sm-line);
}

.sm-chat__head-text {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
}

.sm-chat__title {
	/* Строгість тримається на наборі, а не на кольорі: тісніше міжлітерне
	   в заголовку й розрядка в мікропідписах. Нових шрифтів не беремо —
	   тема вантажить Roboto, і другий файл заради віджета не вартий ваги. */
	letter-spacing: -0.01em;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
}

.sm-chat__subtitle {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.6rem;
	margin: 0.3rem 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--sm-ink-2);
}

/* Та сама крапка, що й на кнопці: людина бачить її ще до відкриття панелі
   й упізнає всередині. */
.sm-chat--online .sm-chat__subtitle::before {
	content: "";
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: var(--sm-r-pill);
	background: var(--sm-go);
}

.sm-chat__close {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	/* Зсув на край: оптична межа кнопки має збігатися з межею шапки, інакше
	   сорок пікселів зони натискання виглядають як зайвий відступ. */
	margin: -0.4rem -0.8rem -0.4rem 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--sm-ink-3);
	fill: currentColor;
	cursor: pointer;
	transition: background var(--sm-t-in) var(--sm-ease), color var(--sm-t-in) var(--sm-ease);
}

.sm-chat__close:hover,
.sm-chat__close:focus {
	background: var(--sm-mist);
	color: var(--sm-ink);
}

.sm-chat__close .icon-close-alerts {
	width: 1.2rem;
	height: 1.2rem;
}

.sm-chat__body {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	/* min-height:0 обов'язковий: без нього флекс-елемент не дає вкладеній
	   стрічці стиснутися, і прокрутка з'являється у сторінки, а не в чаті. */
	min-height: 0;
	/*
	 * Прокрутка саме тут. Форма зворотного дзвінка вища за панель, і без
	 * цього рядка кнопка «Передзвоніть мені» зрізалася нижньою кромкою:
	 * панель має overflow:hidden, а всередині ніщо не прокручувалось.
	 */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 2rem;
	background: var(--body-bg, #f7f7fb);
}

.sm-chat__hint {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sm-ink-2);
}

/*
 * ПОЧАТОК РОЗМОВИ.
 *
 * Порожня стрічка — це перше, що бачить людина, яка відкрила чат. Досі там
 * був один сірий рядок і двісті пікселів порожнечі: підказка чесно
 * перелічувала «розміри, тканини, терміни доставки», але вимагала
 * сформулювати питання самому. Найдорожчий крок у чаті — саме перша фраза.
 *
 * Тепер ті самі три теми (плюс розстрочка) стоять кнопками. Це не здогадки:
 * це те, що консультант відповідає щодня, і те, що вже було в тексті
 * підказки — ми лише зробили слова натискними.
 */
.sm-chat__start {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: var(--sm-3);
}

.sm-chat__chips {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: var(--sm-2);
}

.sm-chat__chip {
	/* inline-flex, а не inline-block: без нього min-height лише розтягує
	   коробку, а напис лишається притиснутим до верху. */
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--sm-3);
	/* --sm-line — ДЕКОРАТИВНА лінія (1.26:1 до білого). Чип лежить білим на
	   білому, і межа тут єдина ознака, що це кнопка, — тобто поріг 3:1, а не
	   декоративний. Це ще й перше, що бачить людина у відкритому чаті. */
	border: 1px solid var(--sm-field-line);
	border-radius: var(--sm-r-pill);
	background: var(--sm-paper);
	font: 400 13px/1.3 var(--base-font-family, "Roboto", sans-serif);
	color: var(--sm-ink);
	cursor: pointer;
	touch-action: manipulation;
	transition: border-color var(--sm-t-in) var(--sm-ease), color var(--sm-t-in) var(--sm-ease),
		background var(--sm-t-in) var(--sm-ease);
}

.sm-chat__chip:hover {
	border-color: var(--sm-brand);
	color: var(--sm-brand-deep);
	background: var(--sm-info-bg);
}

/* Картка товару в стрічці натискна (js ставить tabindex), а в переліку
   правил фокуса її не було: для того, хто ходить клавіатурою, фокус на ній
   не показувався нічим. */
.sm-chat .sm-chat__card:focus-visible,
.sm-chat .sm-chat__chip:focus-visible {
	outline: 2px solid var(--sm-brand);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Вкладки
   -------------------------------------------------------------------------- */

/* Вкладки лежать на тій самій білій поверхні, що й шапка, і відділені від неї
   лише відступом. Раніше це була третя за рахунком смуга з власним тлом і
   власною межею — панель через неї розпадалася на шари. */
.sm-chat__tabs {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	padding: 0 var(--sm-4);
	background: var(--sm-paper);
	border-bottom: 1px solid var(--sm-line);
}

.sm-chat__tab {
	-ms-flex: 1 1 0;
	flex: 1 1 0;
	min-height: 44px;
	padding: var(--sm-3) var(--sm-1);
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-size: 14px;
	line-height: 1.3;
	color: var(--sm-ink-2);
	cursor: pointer;
	transition: color var(--sm-t-in) var(--sm-ease), border-color var(--sm-t-in) var(--sm-ease);
}

.sm-chat__tab:hover {
	color: var(--sm-ink);
}

.sm-chat__tab.is-active {
	color: var(--sm-brand-deep);
	border-bottom-color: var(--sm-brand);
	font-weight: 500;
}

.sm-chat__pane {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	min-height: 0;
	/*
	 * Форми вищі за панель. Без власної прокрутки кнопка «Передзвоніть мені»
	 * опинялася за нижньою межею панелі й до неї не можна було ані догортати,
	 * ані дотягтися: overflow скрізь був visible, а панель має max-height.
	 * На низькому екрані так само зникала шапка з вкладками.
	 */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	height: 100%;
}

.sm-chat__pane[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Стрічка повідомлень
   -------------------------------------------------------------------------- */

.sm-chat__log {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: var(--sm-3);
}

/*
 * ПОВІДОМЛЕННЯ РОСТУТЬ ЗНИЗУ ВГОРУ.
 *
 * Досі два перші повідомлення прилипали до верху, і під ними лишалося
 * чотириста порожніх пікселів. Це читалося як «тут щось зламалося», хоча
 * насправді розмова просто щойно почалася.
 *
 * У месенджерах стрічка ЗАВЖДИ починається від низу — від поля вводу, тобто
 * від того місця, куди людина дивиться й куди друкує. Порожнеча йде вгору,
 * де на неї ніхто не дивиться.
 *
 * Робить це margin-top:auto на першому повідомленні, а не justify-content:
 * flex-end на контейнері. Різниця критична: у прокрутному флекс-контейнері
 * flex-end у Chrome обрізає верхні елементи, коли розмова переростає висоту
 * панелі, — доскролити до них стає неможливо. Автовідступ такої вади не має.
 */
.sm-chat__msg:first-child {
	margin-top: auto;
}

/*
 * ПОКИ РОЗМОВИ НЕМА — НЕМА Й СІРОЇ ПЛИТИ.
 *
 * Сіре тло стрічки існує рівно для того, щоб відділити повідомлення від
 * поля вводу. Коли повідомлень нема, відділяти нічого, а сірий прямокутник
 * лишається: на десктопі це 180 порожніх пікселів, на телефоні — сімсот.
 * Порожнеча на білому читається як «місце, де з'явиться розмова»,
 * порожнеча на сірому — як «тут щось зламалося».
 *
 * :has() тут не годиться (Safari до 15.4 і будь-який IE), тому вмикаємо
 * навпаки: тло з'являється, щойно в стрічці щось є.
 */
/*
 * Перша спроба фарбувала саму стрічку й тягла її на всю ширину від'ємними
 * полями. У прокрутного контейнера це негайно дало горизонтальну смугу
 * прокрутки: від'ємне поле розширює коробку за межі батька, а padding
 * додає зверху ще. Клас стану простіший і нічого не ламає — тим паче що
 * JS усе одно вже рахує, чи є в стрічці повідомлення (ним він ховає чипи).
 */
.sm-chat__body {
	background: var(--sm-paper);
}

/*
 * ЗАМИКАЄМО ПРОКРУТКУ НА ВСІХ РІВНЯХ, А НЕ ЛИШЕ НА СТРІЧЦІ.
 *
 * overscroll-behavior стояв рівно на .sm-chat__log, але прокрутних
 * контейнерів у панелі три: тіло, панель вкладки й сама форма. Форма
 * зворотного дзвінка вища за лист, і догорнувши її до кінця людина
 * продовжувала гортати каталог ПОЗАДУ — сам лист при цьому стоїть
 * нерухомо, тож виглядає це як поламана сторінка.
 */
.sm-chat__body,
.sm-chat__pane,
.sm-chat__form {
	overscroll-behavior: contain;
}

.sm-chat--talking .sm-chat__body {
	background: var(--sm-mist);
}

.sm-chat__log:not(:empty) + .sm-chat__start {
	display: none;
}

.sm-chat__msg {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: start;
	align-items: flex-start;
	max-width: 85%;
}

.sm-chat__msg--mine {
	-ms-flex-item-align: end;
	align-self: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
}

/* Бульбашка оператора — світла картка з тінню замість обведення: обведення
   товщиною в піксель поряд із суцільно залитою бульбашкою покупця виглядало
   як інший, чужий елемент. Тінь ставить їх на один рівень. */
.sm-chat__bubble {
	padding: 1rem 1.4rem;
	border-radius: var(--sm-r-bubble) var(--sm-r-bubble) var(--sm-r-bubble) var(--sm-r-s);
	background: var(--sm-paper);
	border: 1px solid var(--sm-line);
	box-shadow: 0 1px 2px rgba(52, 52, 52, 0.05);
	/* Заміряно: корінь теми 8.7px на 1280px і 9px на 375px, тож 1.5rem давало
	   13.5px — розмову набирали кеглем виноски. Текст, який людина читає,
	   не має всихати разом із сіткою. */
	font-size: 15px;
	line-height: 1.45;
	color: var(--body-color, #343434);
	/* Довге слово чи посилання не має розпирати панель. */
	word-break: break-word;
	overflow-wrap: anywhere;
	/* Переноси рядків, які надрукувала людина, зберігаємо. */
	white-space: pre-wrap;
}

.sm-chat__msg--mine .sm-chat__bubble {
	border-radius: var(--sm-r-bubble) var(--sm-r-bubble) var(--sm-r-s) var(--sm-r-bubble);
	/* Те саме світло на оббивці, тільки в мініатюрі: згори світліше, знизу
	   глибше. У стрічці таких бульбашок десятки, тож перехід навмисно
	   ледь помітний — помітний градієнт на кожній репліці швидко втомлює. */
	background: var(--sm-grad-mine);
	border-color: transparent;
	color: var(--sm-on-brand);
	box-shadow: 0 1px 2px rgba(20, 41, 60, 0.14);
}

.sm-chat__bubble--card { padding: 0.8rem; }
/*
 * КАРТКА ТОВАРУ — БИРКА, А НЕ ПОСИЛАННЯ.
 *
 * Це те місце, заради якого оператор узагалі відкриває пошук товару, і єдине
 * місце віджета, де ми дозволяємо собі помітне оформлення. Решта панелі
 * лишається тихою.
 *
 * Розміри винесені окремим рядком і набрані цифрами однакової ширини: у
 * меблях саме вони відповідають на питання «а чи стане воно в нішу». Ціна —
 * якір картки, тому найбільша.
 */
.sm-chat__card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.sm-chat__card-img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--sm-r-s);
	margin: 0 0 var(--sm-2);
}

.sm-chat__card-name {
	display: block;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 500;
	/* Назву не обрізаємо: найдовші товари каталогу різняться саме хвостом. */
	word-break: break-word;
}

.sm-chat__card-size {
	display: block;
	margin: var(--sm-1) 0 0;
	font-size: 13px;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--sm-ink-2);
}

.sm-chat__card-foot {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: baseline;
	align-items: baseline;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: var(--sm-2);
	margin: var(--sm-2) 0 0;
	padding: var(--sm-2) 0 0;
	border-top: 1px solid var(--sm-line);
}

.sm-chat__card-price {
	font-size: 18px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

/* Кожен четвертий товар каталогу без ціни. «0 грн» читалося б як «безкоштовно». */
.sm-chat__card-price--ask {
	font-size: 14px;
	font-weight: 400;
	color: var(--sm-ink-2);
}

.sm-chat__card-go {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	font-size: 13px;
	/* --sm-brand дає 3.95:1 — нижче за AA для 13px. */
	color: var(--sm-brand-deep);
	white-space: nowrap;
}

.sm-chat__card:hover .sm-chat__card-go { text-decoration: underline; }

/* На власній бульбашці оператора картка лежить на синьому. */
.sm-chat__msg--mine .sm-chat__card-size,
.sm-chat__msg--mine .sm-chat__card-price--ask { color: rgba(255, 255, 255, 0.85); }
.sm-chat__msg--mine .sm-chat__card-foot { border-top-color: rgba(255, 255, 255, 0.3); }
.sm-chat__msg--mine .sm-chat__card-go { color: #fff; text-decoration: underline; }

/* Час — підпис, а не учасник розмови: 11px, приглушений, майже впритул до
   бульбашки. Досі він стояв за чотири піксели й тим самим кеглем важив
   стільки ж, скільки саме повідомлення. */
.sm-chat__time {
	font-variant-numeric: tabular-nums;
	margin: 0.2rem 0.2rem 0;
	font-size: 11px;
	line-height: 1.3;
	color: var(--sm-ink-3);
}

/* --------------------------------------------------------------------------
   Поле вводу
   -------------------------------------------------------------------------- */

.sm-chat__composer {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: end;
	align-items: flex-end;
	gap: 1rem;
	margin: 0;
}

.sm-chat__input {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 44px;
	max-height: 12rem;
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--sm-field-line);
	/* Було 2.2rem — капсула. Поле вводу з таким скругленням читається як
	   кнопка, а не як місце, куди друкують; до того ж воно єдине в панелі
	   мало власний радіус поза шкалою. */
	border-radius: var(--sm-r);
	background: var(--sm-mist);
	font: 400 15px/1.4 var(--base-font-family, "Roboto", sans-serif);
	color: var(--body-color, #343434);
	resize: none;
	overflow-y: auto;
}

.sm-chat__input:focus {
	outline: none;
	border-color: var(--sm-brand);
	box-shadow: 0 0 0 2px var(--sm-brand);
}

.sm-chat__attach {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--sm-ink-3);
	cursor: pointer;
	touch-action: manipulation;
	transition: color 0.2s;
}

.sm-chat__attach:hover { color: var(--theme-primary-color, #2980B9); }
.sm-chat__attach:disabled { opacity: 0.5; cursor: default; }
.sm-chat__attach[hidden] { display: none; }

/* Фото в стрічці: пузир стискається до картинки, картинка — до панелі. */
.sm-chat__bubble--photo { padding: 0.4rem; }

.sm-chat__photo {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 0.9rem;
}

.sm-chat__send {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--sm-r);
	background: var(--sm-grad-send);
	color: var(--sm-on-brand);
	box-shadow: 0 1px 2px rgba(20, 41, 60, 0.18);
	cursor: pointer;
	transition: background var(--sm-t-in) var(--sm-ease), opacity var(--sm-t-in) var(--sm-ease),
		box-shadow var(--sm-t-in) var(--sm-ease);
}

.sm-chat__send:hover:not(:disabled) {
	background: var(--sm-grad-send-hi);
	box-shadow: 0 2px 6px rgba(20, 41, 60, 0.26);
}

.sm-chat__send:disabled {
	opacity: 0.5;
	cursor: default;
}

/* --------------------------------------------------------------------------
   Форми
   -------------------------------------------------------------------------- */

/*
 * ФОРМА ЗАЙМАЄ ПАНЕЛЬ, А НЕ ТУЛИТЬСЯ ДОГОРИ.
 *
 * Панель виросла до 780px, і коротка форма з трьох полів почала лишати під
 * собою двісті пікселів порожнечі — тобто зростання висоти пішло не на
 * користь, а на шкоду саме тим вкладкам, де людина щось заповнює.
 *
 * Розтягуємо не порожнечу, а САМЕ ПОЛЕ ПОВІДОМЛЕННЯ: воно єдине тут
 * заздалегідь невідомого розміру, і чим воно більше, тим докладніше людина
 * опише, що шукає. Решта полів — телефон і пошта — мають сталу довжину,
 * розтягувати їх немає сенсу.
 */
.sm-chat__form {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	overflow-y: auto;
	min-height: 0;
}

.sm-chat__form .ui-input,
.sm-chat__form .ui-textarea {
	margin: 0 0 1.6rem;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

.sm-chat__textarea {
	min-height: 12rem !important;
	/* Забирає весь надлишок панелі, але не менше min-height. */
	-ms-flex: 1 1 auto !important;
	flex: 1 1 auto !important;
}

/* Кнопка відправлення притиснута донизу форми: у високій панелі вона
   інакше зависала б посередині, за півекрана від останнього поля. */
.sm-chat__form .ui-btn,
.sm-chat__form button[type="submit"] {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	margin-top: auto;
}

.sm-chat__form .is-error {
	box-shadow: 0 0 0 2px var(--sm-alert);
}

/* Обгортка чекбокса згоди: сам input схований темою, тож кільце вішається
   на батька. Йому потрібні власне скруглення й трохи повітря, інакше
   червона рамка сідає впритул до тексту. */
.sm-chat__form label.is-error {
	display: inline-block;
	padding: 0.4rem 0.6rem;
	margin: -0.4rem -0.6rem;
	border-radius: var(--sm-r-s);
}

.sm-chat__consent {
	display: block;
	margin: 0 0 1.6rem;
	font-size: 13px;
}

/*
 * Пастка для ботів. Саме off-screen, а не display:none: частина ботів
 * свідомо пропускає приховані стилями поля, а винесене за екран заповнює.
 * Людина його не побачить і не потрапить у нього табом (tabindex="-1").
 */
.sm-chat__trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Лічильник непрочитаного й повідомлення
   -------------------------------------------------------------------------- */

/*
 * КЕГЛІ ТУТ І НИЖЧЕ — У ПІКСЕЛЯХ, І ЦЕ ЗАВЕРШЕННЯ ПРАВИЛА З ШАПКИ ФАЙЛУ.
 *
 * Сім останніх кеглів лишалися в rem. На ноутбуці (1200-1470px, корінь
 * 0.68vw ≈ 8.7px) вони давали найдрібніший текст віджета: плашка про
 * помилку 12px, згода на обробку даних 11px, лічильник непрочитаного 10px.
 * Тобто дрібнішим за все інше виявилося саме те, що людина МУСИТЬ прочитати:
 * чому не пішла заявка, під чим вона підписується і скільки на неї чекає
 * відповідей.
 *
 * Значення взяті ті, що були задумані (rem x 10 номінального кореня теми),
 * не збільшені «про запас»: змінюється не задум, а те, чи він доживає до
 * екрана. Геометрію — padding, gap, скруглення — лишаємо в rem: вона МАЄ
 * дихати разом зі сторінкою.
 *
 * У лічильника разом із цифрою в px переведено й коробку: інакше цифра
 * лишалася б сталою, а кружечок навколо неї всихав.
 */
.sm-chat__badge {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 0.5rem;
	border-radius: 10px;
	background: var(--sm-alert);
	color: #fff;
	font-size: 12px;
	line-height: 2rem;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}

.sm-chat__note {
	margin: 0 0 1.2rem;
	padding: 1rem 1.4rem;
	border-radius: 0.5rem;
	font-size: 14px;
	line-height: 1.4;
	background: var(--sm-info-bg);
	color: var(--sm-info);
}

.sm-chat__note--ok {
	background: var(--sm-go-bg);
	color: var(--sm-go);
}

.sm-chat__note--error {
	background: var(--sm-alert-bg);
	color: var(--sm-alert);
}

.sm-chat__foot {
	padding: 2rem 2.4rem 2.4rem;
	border-top: 1px solid var(--sm-line);
	background: #fff;
}

.sm-chat__foot-title {
	display: block;
	margin: 0 0 1.2rem;
	font-size: 13px;
	color: var(--sm-ink-3);
}

/* Список месенджерів переиспользует .chat__menu/.chat__link теми,
   правимо тільки висоту — усередині панелі 16rem завелико. */
/*
 * ДВА ПУНКТИ НЕ МАЮТЬ ВИСІТИ НАД ТРЬОМАСТАМИ ПІКСЕЛЯМИ ПОРОЖНЕЧІ.
 *
 * Панель має сталу висоту, і вкладка «Месенджери» — це коротка розвилка на
 * два варіанти, а не стрічка, що росте. Тому список не притискаємо до верху,
 * як повідомлення, а ставимо в оптичний центр: коли вибирати треба з двох,
 * погляд має падати одразу на них.
 *
 * Саме тому тут не margin-top:auto, як у стрічці. Там порожнеча означає «сюди
 * прийдуть повідомлення», тут — не означає нічого.
 */
.sm-chat__pane[data-pane="mess"] {
	-ms-flex-pack: center;
	justify-content: center;
}

.sm-chat .sm-chat__menu {
	margin: 0;
	/* Приліплено донизу списку, щоб підказка під ним не відривалася. */
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

/* Тема робить пункти по 33.333% через flex-basis і max-width. Для флекс-елемента
   розмір по головній осі задає саме flex-basis, тож самого width: 50% замало —
   правило застосується, а ширина лишиться чужою. Перебиваємо всі три. */
.sm-chat .sm-chat__menu > li {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
	width: 50%;
}

.sm-chat .sm-chat__menu .chat__link {
	height: 9rem;
	border: 1px solid var(--sm-line);
}

/* --------------------------------------------------------------------------
   3. Фокус з клавіатури — у теми його немає ні для кнопки, ні для панелі
   -------------------------------------------------------------------------- */

/*
 * Тема глушить штатне кільце браузера універсальним `* { outline: none }`,
 * тож ЖОДЕН елемент віджета не має видимого фокуса, поки ми не повернемо його
 * самі. Нижче — усе, до чого можна дотягтися табом.
 */
.sm-chat .chat__toggle:focus-visible,
.sm-chat .chat__link:focus-visible,
.sm-chat .sm-chat__tab:focus-visible,
.sm-chat .sm-chat__attach:focus-visible,
.sm-chat .ui-btn:focus-visible,
.sm-chat .ui-input:focus-visible,
.sm-chat .ui-textarea:focus-visible {
	outline: 2px solid var(--theme-primary-color, #2980B9);
	outline-offset: 2px;
}

/*
 * Кнопка «Закрити» і «Надіслати» лежать на синьому — контур того самого
 * кольору теми на них зливається з тлом (1.00:1). Тому білий.
 */
/*
 * КІЛЬЦЕ ФОКУСА МАЛЮЄТЬСЯ ЗЗОВНІ ЕЛЕМЕНТА, А НЕ ПО НЬОМУ.
 *
 * Тут стояв білий контур із міркування «кнопка ж на синьому». Синя тільки
 * САМА кнопка; outline з відступом 2px лежить повністю за її межами — на
 * білому підвалі. Заміряно 1.00:1, тобто для того, хто ходить клавіатурою,
 * фокуса на головній кнопці віджета не існувало взагалі.
 */
.sm-chat .sm-chat__send:focus-visible {
	outline: 2px solid var(--sm-brand-deep);
	outline-offset: 2px;
}

.sm-chat .sm-chat__close:focus-visible {
	outline: 2px solid var(--sm-brand);
	outline-offset: 2px;
}

/*
 * ЗГОДА НА ОБРОБКУ ДАНИХ.
 *
 * Тема ховає сам чекбокс через `visibility: hidden` (style.css:2986), а це
 * викидає його не тільки з екрана, а й з порядку табуляції та з дерева
 * доступності: галочку неможливо поставити з клавіатури взагалі, навіть
 * програмний focus() її не бере. При цьому сервер без згоди заявку не
 * приймає — тобто людина без миші фізично не могла залишити заявку на
 * дзвінок, а це саме той запасний канал, який існує для тих, кому незручно
 * друкувати.
 *
 * Повертаємо елемент у потік фокуса, лишаючи його візуально невидимим:
 * квадратик малює сусідній span, як і задумано темою.
 */
.sm-chat .ui-check__input {
	visibility: visible;
	width: 1.8rem;
	height: 1.8rem;
	margin: 0;
}

/* Без цього фокус на прозорому інпуті не показаний нічим. */
.sm-chat .ui-check__input:focus-visible ~ .ui-check__checkbox {
	outline: 2px solid var(--theme-primary-color, #2980B9);
	outline-offset: 2px;
}

/*
 * Час під повідомленням був #a8a8b3 на #f7f7fb — 2.20:1, і 1.1rem всихав
 * до 9 px на 1200-1470px через плаваючий корінь теми. Це рядок, за яким
 * покупець розуміє «мені вже відповіли чи це моє вчорашнє».
 */
.sm-chat .sm-chat__time {
	color: var(--sm-ink-2);
	font-size: 12px;
}

/*
 * ПОЛЯ ФОРМИ БУЛИ НЕВИДИМІ.
 *
 * Тема заливає .ui-input кольором var(--sm-mist) і малює рамку ТИМ САМИМ кольором.
 * На білій панелі віджета межа поля виходить 1.04:1 — людина бачить підпис
 * «Телефон» і порожнечу під ним, а самого поля не бачить. У темі це працює,
 * бо там форми лежать на сірому тлі сторінки; у нас панель біла.
 *
 * var(--sm-field-line) дає 3.33:1 до білого — поріг для меж елементів керування.
 */
.sm-chat .ui-input,
.sm-chat .ui-textarea {
	border: 1px solid var(--sm-field-line);
}

.sm-chat .ui-input::placeholder,
.sm-chat .ui-textarea::placeholder {
	color: var(--sm-ink-2);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Мобільний
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/*
	 * НА ТЕЛЕФОНІ ПАНЕЛЬ — ЛИСТ НА ВЕСЬ ЕКРАН, а не картка посеред сторінки.
	 *
	 * Було: панель 468 px заввишки в екрані 812 px. Під нею лишалася мертва
	 * смуга, стрічка повідомлень мала 209 px і в ній не вміщалася навіть
	 * форма зворотного дзвінка — кнопку «Передзвоніть мені» зрізало нижньою
	 * кромкою. Зверху панель ще й наїжджала на липке меню сайту, і два
	 * елементи сперечалися за нижній край екрана.
	 *
	 * top/bottom замість height: так висота береться з реального вікна й не
	 * ламається, коли мобільний браузер ховає адресний рядок (саме через це
	 * 100vh на телефоні бреше).
	 */
	/*
	 * БУДЬ-ЯКИЙ transform на предку робить position:fixed відносним до цього
	 * предка, а не до вікна. Обгортка .sm-chat зсувається трансформом, коли
	 * знизу з'являється плашка кукі, — і через це лист лишався замкненим у
	 * межах кнопки 54 px завширшки. На телефоні зсув не потрібен зовсім:
	 * лист і так накриває весь екран разом із плашкою.
	 */
	/*
	 * ...але ТІЛЬКИ поки лист відкрито. Обнулення було безумовним, і разом
	 * із ним зникав підйом закритої кнопки над плашкою кукі: поки лист
	 * закритий, ніякого position:fixed усередині нема, замикати нічого, а
	 * кнопка опинялася під плашкою й ставала недосяжною.
	 */
	.is-chat-open .sm-chat,
	.is-chat-open .sm-chat.sm-chat--cookie {
		transform: none !important;
	}

	/*
	 * !important тут не від ліні. Тема тримає на цій же панелі власний
	 * набір: position:absolute, bottom:100%, right:0, width:49.6rem,
	 * max-width:calc(100vw - 4rem) — і частина з них перемагає навіть при
	 * вищій специфічності нашого селектора. У цьому файлі вже є два таких
	 * місця з тієї ж причини (.chat:not(.sm-chat) і .chat__toggle).
	 */
	.sm-chat .sm-chat__panel {
		position: fixed !important;
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		margin: 0 !important;
		width: 100vw !important;
		max-width: none !important;
		/* Висота задана явно, а не через пару top/bottom з height:auto:
		   тема лишає на панелі власні правила, і авторозрахунок висоти з
		   відступів у неї сходився в нуль. dvh замість vh — на телефоні
		   vh бреше, поки браузер ховає адресний рядок. */
		height: calc(100vh - 6rem) !important;
		height: calc(100dvh - 6rem) !important;
		max-height: none;
		/* Скруглення лишаємо лише зверху — низ упирається в край екрана. */
		border-radius: 1.6rem 1.6rem 0 0;
	}

	/*
	 * Коли лист відкрито, кнопка-перемикач більше не потрібна: вона лежить
	 * ПІД листом і перетворюється на другий хрестик. Двох способів закрити
	 * не повинно бути — лишається × у шапці, він єдиний і завжди на видноті.
	 */
	.is-chat-open .sm-chat .chat__toggle {
		display: none !important;
	}

	.sm-chat__head {
		padding: 1.6rem 1.6rem 1.6rem 2rem;
	}

	.sm-chat__body {
		padding: 2rem;
	}

	/*
	 * ШІСТНАДЦЯТЬ ПІКСЕЛІВ — НЕ ЕСТЕТИКА, А ПОВЕДІНКА БРАУЗЕРА.
	 *
	 * Safari на iOS автоматично збільшує сторінку, коли фокус потрапляє в
	 * поле з кеглем меншим за 16px. Тобто покупець торкався поля, щоб
	 * написати, — і весь магазин стрибав і від'їжджав; повернути масштаб
	 * можна лише пальцями, вручну.
	 *
	 * ПРАВИЛО НАКРИВАЄ ВСІ ПОЛЯ ВІДЖЕТА, а не лише поле чату. Спершу було
	 * виправлено тільки .sm-chat__input — і залишилися 14.4px у формі
	 * «Передзвоніть мені» та в офлайн-заявці, тобто рівно там, де людина
	 * вводить ТЕЛЕФОН. Це найгірше місце для стрибка сторінки: набирати
	 * цифри в полі, яке поїхало за край екрана, неможливо.
	 *
	 * Селектор по тегах, бо поля форм малює тема своїм класом .ui-input,
	 * і перелічувати її класи означало б ламатися при кожному оновленні теми.
	 */
	.sm-chat input[type="text"],
	.sm-chat input[type="tel"],
	.sm-chat input[type="email"],
	.sm-chat input[type="search"],
	.sm-chat input[type="number"],
	.sm-chat textarea {
		font-size: 16px;
	}

	/* Заразом і сама розмова: 13.5px на телефоні — це дрібно. */
	.sm-chat__bubble {
		font-size: 16px;
	}

	/* На десктопі 40px вистачає — навколо кнопки багато вільного місця.
	   Пальцем цього мало: мінімум 44. */
	.sm-chat__close {
		width: 44px;
		height: 44px;
	}

	/* Панель дістає до самого низу екрана, тож нижній відступ має враховувати
	   смугу жестів на iPhone — інакше поле вводу опиняється під нею. */
	.sm-chat__foot {
		padding: 1.6rem 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
	}

	.sm-chat .sm-chat__menu .chat__link {
		height: 8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-chat,
	.sm-chat .chat__toggle,
	.sm-chat .sm-chat__panel,
	.sm-chat .chat__toggle svg {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Кнопка виклику
   --------------------------------------------------------------------------
   Була суцільно бренд-кольором — і на власному синьому герої магазину давала
   контраст 1.23:1 при потрібних 3:1 для елементів керування. Тобто точка
   входу в усю функцію розчинялася саме на головній сторінці, куди приходить
   більшість.

   Розв'язок не в новому відтінку, а в розділенні ролей: бренд фарбує
   ПОВЕРХНІ, а елемент, який має бути помітним на будь-якому тлі, отримує
   світлу поверхню, бренд-іконку й тінь. Так кнопка читається і на синьому
   герої, і на білому блоці розпродажу.
   -------------------------------------------------------------------------- */

.sm-chat .chat__toggle {
	/* Не коло, а підписана плашка. Значок-хмаринка не читається як «чат»
	   аудиторією, яка купує меблі: це переважно люди, для яких кнопка має
	   бути названа словом. Слово ще й пояснює, ЩО саме буде далі —
	   не «чат-бот», а консультант. */
	width: auto;
	min-width: 5.4rem;
	height: 5.4rem;
	padding: 0 2rem 0 1.6rem;
	gap: 1rem;
	border-radius: var(--sm-r-pill);
	/*
	 * ГЛИБОКИЙ СЛАНЕЦЬ, А НЕ БІЛА ПЛАШКА.
	 *
	 * Біла кнопка вирішувала задачу контрасту, але вирішувала її боязко:
	 * на білих блоках сторінки вона трималася на самій лише межі в піксель.
	 * Темна поверхня знімає питання геть — вона помітна і на синьому герої
	 * магазину, і на білому блоці розпродажу, без жодних умов.
	 *
	 * Градієнт тут не прикраса, а те саме світло на оббивці, з якого зроблено
	 * весь новий вигляд: діагональ від світлішого сланцю до темного, як кут
	 * кімнати в сутінках. Це єдина яскрава річ віджета на сторінці — решта
	 * лишається тихою, і саме тому вона працює.
	 */
	background: var(--sm-grad-mark);
	color: var(--sm-mark-ink);
	fill: currentColor;
	border: 1px solid var(--sm-mark-line);
	/*
	 * СВІТЛЕ КІЛЬЦЕ — НЕ ОЗДОБА, А ЄДИНЕ, ЩО ТРИМАЄ КНОПКУ НА БУДЬ-ЯКОМУ ТЛІ.
	 *
	 * Заміряно на власному синьому герої магазину (#2980B9): світлий кінець
	 * градієнта дає там 1.60:1 — тобто поверхня кнопки просто зникає. Саме
	 * через це попередня версія була білою. Але вибір не між «темна» і
	 * «біла»: темна заливка розвʼязує контраст на світлих блоках сторінки,
	 * кільце — на темних. Разом вони працюють скрізь, і жодне тло більше
	 * не має значення.
	 */
	box-shadow: 0 1px 2px rgba(20, 41, 60, 0.12),
		0 6px 18px rgba(20, 41, 60, 0.16);
	transition: box-shadow var(--sm-t-in) var(--sm-ease), background var(--sm-t-in) var(--sm-ease),
		transform var(--sm-t-in) var(--sm-ease);
}

.sm-chat .chat__toggle:hover {
	background: var(--sm-grad-mark-hi);
	border-color: var(--sm-brand-deep);
	box-shadow: 0 2px 4px rgba(20, 41, 60, 0.16),
		0 10px 26px rgba(20, 41, 60, 0.22);
	/* Один піксель угору. Рівно стільки, щоб рука відчула відгук, і
	   недостатньо, щоб це помітили як анімацію. */
	transform: translateY(-1px);
}

.sm-chat .chat__toggle:active {
	transform: translateY(0);
}

/*
 * Тема кладе значок position:absolute у центр кнопки й міняє чат на хрестик
 * трансформом scale(0). Для кола це працює, для підписаної плашки — ні:
 * значок лягав просто поверх слова. Повертаємо його в потік і міняємо
 * видимістю, а не масштабом.
 */
.sm-chat .chat__toggle .icon-chat,
.sm-chat .chat__toggle .icon-chat-close {
	position: static;
	transform: none;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 2.2rem;
	height: 2.2rem;
}

.sm-chat .chat__toggle .icon-chat-close { display: none; }
.is-chat-open .sm-chat .chat__toggle .icon-chat { display: none; }
.is-chat-open .sm-chat .chat__toggle .icon-chat-close { display: block; }

.sm-chat__toggle-label {
	/*
	 * КОЛІР УСПАДКОВУЄМО ВІД КНОПКИ, А НЕ ЗАДАЄМО СВІЙ.
	 *
	 * Тут стояв var(--sm-brand-deep) — з часів, коли кнопка була білою.
	 * Кнопка стала темною, напис лишився синім: контраст 1.30:1, слово
	 * «Консультант» практично зникло. Клас дефекту простий і повторюваний:
	 * колір тексту, прибитий окремо від кольору поверхні, переживає зміну
	 * поверхні й мовчки псує її. Успадкування робить це неможливим —
	 * зокрема й тоді, коли власник змінить кольори в налаштуваннях.
	 */
	color: inherit;
	letter-spacing: 0.01em;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	/* Кегль теж у px: 1.5rem на плаваючому корені давало 13.5px, і слово
	   на кнопці виходило дрібнішим за підпис під нею. */
	font-size: 15px;
}

/* Відкрита панель має власну шапку — підпис на кнопці стає зайвим,
   а сама кнопка згортається назад у коло з хрестиком. */
.is-chat-open .sm-chat .chat__toggle {
	width: 5.4rem;
	min-width: 0;
	padding: 0;
}

.is-chat-open .sm-chat__toggle-label {
	display: none;
}

/* Крапка присутності. Показуємо ЛИШЕ коли оператори справді на місці —
   інакше це обіцянка, якої ніхто не давав. */
/* ::after у теми зайнятий плівкою наведення — беремо ::before. */
.sm-chat--online .chat__toggle::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 1rem;
	height: 1rem;
	border-radius: var(--sm-r-pill);
	/* Світліший зелений: на темному сланці #1f7a45 майже не видно, а крапка
	   присутності — обіцянка, яку має бути помітно з першого погляду. */
	/* Знову темніший зелений: кнопка світла, і #3ddc84 на пастелі
	   розчинявся. Обідок — кольором самої заливки. */
	background: var(--sm-go);
	box-shadow: 0 0 0 0.25rem var(--sm-mark-1);
}

/* На телефоні плашка згортається в коло: там і місця менше, і знизу вже
   стоїть липке меню сайту. */
@media (max-width: 767px) {
	.sm-chat .chat__toggle {
		width: 5.4rem;
		min-width: 0;
		padding: 0;
	}

	.sm-chat__toggle-label {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-chat .chat__toggle { transition: none; }
}

/* --------------------------------------------------------------------------
   Оцінка розмови
   --------------------------------------------------------------------------
   Картка стоїть у стрічці як остання репліка. Оформлення навмисно тихе:
   це не заклик до дії, а ввічливе питання наостанок, і кричати ним про себе
   означало б перебивати враження від самої розмови.
   -------------------------------------------------------------------------- */

.sm-chat__rate {
	align-self: stretch;
	padding: var(--sm-3) var(--sm-4);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-r);
	background: var(--sm-paper);
	text-align: center;
}

.sm-chat__rate-q {
	margin: 0 0 var(--sm-2);
	font-size: 14px;
	line-height: 1.4;
	color: var(--sm-ink);
}

.sm-chat__rate-row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	gap: var(--sm-2);
}

/* 44px, а не «скільки вийде»: це остання дія розмови, і промахнутися по ній
   на телефоні прикро вдвічі. */
.sm-chat__rate-btn {
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	min-height: 44px;
	padding: 0 var(--sm-4);
	border: 1px solid var(--sm-field-line);
	border-radius: var(--sm-r);
	background: var(--sm-paper);
	font: 400 14px/1.3 var(--base-font-family, "Roboto", sans-serif);
	color: var(--sm-ink);
	cursor: pointer;
	touch-action: manipulation;
	transition: border-color var(--sm-t-in) var(--sm-ease), background var(--sm-t-in) var(--sm-ease);
}

.sm-chat__rate-btn:hover:not(:disabled) {
	border-color: var(--sm-brand);
	background: var(--sm-info-bg);
}

/*
 * ОБИДВІ КНОПКИ ОДНАКОВІ. Пофарбувати «Так» зеленим, а «Ні» червоним — це
 * підказати правильну відповідь; оцінка після цього перестає бути оцінкою.
 */
.sm-chat__rate-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.sm-chat .sm-chat__rate-btn:focus-visible {
	outline: 2px solid var(--sm-brand);
	outline-offset: 2px;
}

.sm-chat__rate-done {
	align-self: stretch;
	margin: 0;
	padding: var(--sm-3);
	font-size: 13px;
	line-height: 1.4;
	color: var(--sm-ink-2);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Файл у стрічці
   --------------------------------------------------------------------------
   Не картинка: прайс у PDF, специфікація, голосове. Виглядає як рядок, який
   можна натиснути, — з назвою й вагою, щоб людина з мобільним інтернетом
   вирішувала сама, качати зараз чи потім.
   -------------------------------------------------------------------------- */

.sm-chat__bubble--file {
	padding: 0;
	overflow: hidden;
}

.sm-chat__file {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	gap: var(--sm-2);
	/* 44px висоти: це посилання на телефоні натискають пальцем. */
	min-height: 44px;
	padding: var(--sm-2) var(--sm-3);
	color: var(--sm-brand-deep);
	text-decoration: none;
}

.sm-chat__file:hover .sm-chat__file-name {
	text-decoration: underline;
}

.sm-chat__file-icon {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--sm-r-pill);
	background: var(--sm-info-bg);
	font-size: 15px;
	line-height: 1;
}

.sm-chat__file-name {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	/* Довге імʼя не має розпирати панель, але й ховати його повністю не
	   можна: розширення в кінці — половина сенсу назви. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sm-chat__file-size {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	font-size: 12px;
	color: var(--sm-ink-3);
	font-variant-numeric: tabular-nums;
}

.sm-chat__file-note {
	display: block;
	padding: 0 var(--sm-3) var(--sm-2);
	font-size: 14px;
	line-height: 1.4;
	color: var(--sm-ink);
}

/* На бульбашці покупця файл лежить на синьому. */
.sm-chat__msg--mine .sm-chat__file { color: #fff; }
.sm-chat__msg--mine .sm-chat__file-icon { background: rgba(255, 255, 255, 0.22); }
.sm-chat__msg--mine .sm-chat__file-size { color: rgba(255, 255, 255, 0.85); }
.sm-chat__msg--mine .sm-chat__file-note { color: #fff; }