/**
 * Собственный виджет чата.
 *
 * Всё в своём пространстве имён .fmbot- и без внешних зависимостей: виджет
 * поедет на корпоративный сайт франшизы, где своя тема и свои плагины, и
 * не должен ни на что влиять или от чего-то зависеть.
 */

.fmbot-root {
	/*
	 * Палитра взята из темы fmlogistic.ru: #164194 — фирменный тёмно-синий
	 * (доминирует в вёрстке), #00c036 — зелёный, которым на сайте
	 * оформлены целевые действия. Отсюда же серые: #1d1d1b текст,
	 * #768692 второстепенный, #dae2e2 границы, #f5f5f5 фон.
	 * Значения переопределяются из настроек, чтобы не лезть в CSS, если
	 * франшиза обновит брендбук.
	 */
	/* Основной — фирменный зелёный сайта. Для интерактива берём тон
	   темнее: на #00c036 белый текст читается плохо, а кнопки и шапка
	   должны оставаться разборчивыми. Тёмно-синий остаётся акцентом. */
	--fmbot-color: #00c036;
	--fmbot-color-deep: #00992b;
	--fmbot-accent: #164194;
	--fmbot-text: #1d1d1b;
	--fmbot-muted: #768692;
	--fmbot-border: #dae2e2;
	--fmbot-bg: #f5f5f5;
	/* Одна ширина и одно скругление на плашку и на панель: иначе при
	   открытии виджет заметно меняет форму и размер, будто страница
	   перестроилась. */
	--fmbot-width: 336px;
	--fmbot-radius: 20px;
	/* Высота плашки нужна не только ей самой: от неё считается стартовая
	   точка выезда панели (см. .fmbot-root--pill .fmbot-panel). */
	--fmbot-pill-height: 40px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
}

/*
 * Пока не пришли первые реплики, виджета на странице нет вовсе — ни
 * плашки, ни приглашения. Иначе человек нажимает на плашку и смотрит в
 * пустую панель, пока идёт запрос к REST. См. boot() в widget.js.
 */
.fmbot-root.is-booting {
	display: none;
}

.fmbot-bubble {
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 50%;
	background: var(--fmbot-color-deep);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	position: relative;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fmbot-bubble:hover {
	transform: scale(1.06);
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
}

.fmbot-bubble:active {
	transform: scale(0.97);
}

.fmbot-bubble-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.fmbot-bubble svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/*
 * Плашка со свёрнутым чатом — прижата к нижнему краю окна.
 *
 * Размеры не на глаз, а по вёрстке сайта клиента. Кнопка прокрутки вверх
 * там — `.scroll-top { position: fixed; right: 30px; bottom: 40px }`
 * размером 50×50, то есть занимает полосу от 40 до 90 px от низа.
 * Поэтому плашка ложится на сам край (bottom: 0) и держится ниже 40 px:
 * кнопка прокрутки остаётся над ней и ни с чем не спорит. Ровно так же
 * ведёт себя Jivo, который сейчас на сайте стоит, — привычка посетителя
 * не меняется. По нажатию панель выезжает вверх от этого же края.
 */
.fmbot-root--pill {
	right: 40px;
	bottom: 0;
}

.fmbot-bubble--pill {
	/* Ровно как панель — открытие не двигает границы виджета. */
	width: var(--fmbot-width);
	max-width: calc(100vw - 32px);
	/* 40 — ровно до кнопки прокрутки вверх, которая на сайте стоит на
	   bottom: 40px: плашка доходит до неё и не залезает. */
	height: var(--fmbot-pill-height);
	/* Верхние углы скруглены на половину высоты — получается ровная
	   вкладка с полукруглыми краями. Асимметричное скругление, как у
	   Jivo, — их узнаваемая деталь, а не функция; повторять её незачем. */
	border-radius: var(--fmbot-radius) var(--fmbot-radius) 0 0;
	padding: 0 18px;
	gap: 10px;
	/* Подпись с иконкой по центру: плашка шириной с панель, и прижатое
	   к краям содержимое оставляло бы посередине пустоту. */
	justify-content: center;
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
}

/* Панель выезжает от самого низа, без зазора под ней: иначе между окном
   чата и краем экрана остаётся полоска, и «прижатость» теряется.
   Стартовый сдвиг больше обычного — она и должна читаться как выдвинутая
   от края, а не проявившаяся на месте. */
.fmbot-root--pill .fmbot-panel {
	margin-bottom: 0;
	max-height: calc(100vh - 24px);
	/* То же скругление, что у плашки: открытие не должно менять форму. */
	border-radius: var(--fmbot-radius) var(--fmbot-radius) 0 0;
	/*
	 * Панель стартует не из-под экрана, а ровно от верхнего края плашки:
	 * сдвиг на свою высоту МИНУС высота плашки.
	 *
	 * С полным translateY(100%) панель приходила снизу, и её скруглённая
	 * верхушка на первых кадрах проезжала мимо верхушки плашки — две
	 * одинаковые зелёные кромки внахлёст. Отсюда же панель просто растёт
	 * вверх из плашки и накрывает её с первого кадра.
	 */
	transform: translateY(calc(100% - var(--fmbot-pill-height)));
}

/*
 * Закрытие в режиме плашки — не отъезд вниз, а схлопывание.
 *
 * Панель и плашка одной ширины, с одинаковым скруглением и одного цвета
 * в шапке, поэтому панель может просто сжаться по высоте до высоты
 * плашки — и стать ею. Отъезд вниз для этого не нужен: закрывая чат,
 * человек смотрит на шапку, и естественнее, когда она садится на место,
 * а не улетает за край.
 *
 * Схлопывание держится на трёх вещах: высота панели идёт к высоте
 * плашки, содержимое (лента и поле ввода) гаснет быстрее, а шапка
 * остаётся несжимаемой и подрезается сверху — до ровной зелёной полосы.
 */
.fmbot-root--pill .fmbot-header {
	flex: 0 0 auto;
}

/* Три класса в селекторе не для красоты: во время схлопывания на корне
   ещё висит is-shown, а его правило ниже по файлу объявляет свой
   transition. При равной специфичности побеждало бы оно — и переход по
   высоте молча не запускался. */
.fmbot-root--pill.is-shown.is-collapsing .fmbot-panel {
	height: var(--fmbot-pill-height);
	/* Переход по height объявлен ТОЛЬКО здесь: иначе при повторном
	   открытии панель разворачивалась бы обратно с той же анимацией
	   поверх выезда. Так она мгновенно возвращает полную высоту. */
	transition: height 0.26s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.26s ease;
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
}

.fmbot-root--pill.is-collapsing .fmbot-body,
.fmbot-root--pill.is-collapsing .fmbot-footer {
	opacity: 0;
	transition: opacity 0.12s ease;
}

/* Содержимое шапки гаснет к концу схлопывания: в плашке на его месте
   будет своя подпись, и меняться они должны не внахлёст. */
.fmbot-root--pill.is-collapsing .fmbot-header > * {
	opacity: 0;
	transition: opacity 0.18s ease;
}

/* Панель исчезла — под ней ровно такая же полоса, показываем её подпись
   мягко, иначе текст выскочит рывком. */
.fmbot-root--pill.is-revealing .fmbot-bubble-label,
.fmbot-root--pill.is-revealing .fmbot-bubble-icon {
	animation: fmbot-fade 0.22s ease both;
}

@keyframes fmbot-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/*
 * Плашка остаётся на месте, панель просто выезжает поверх неё.
 *
 * Раньше она выключалась через display: none — пропадала в момент клика
 * и так же резко возвращалась после закрытия, получалось моргание. Ни
 * прятать её, ни растворять не нужно: выехавшая панель шириной с плашку
 * закрывает её целиком, а на обратном ходу открывает.
 *
 * Панель для этого вынесена из потока и поднята над плашкой по z-index —
 * в разметке она идёт раньше, то есть без z-index плашка рисовалась бы
 * поверх.
 */
.fmbot-root--pill .fmbot-panel {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
}

.fmbot-root--pill .fmbot-bubble {
	position: relative;
	z-index: 1;
}


.fmbot-root--pill .fmbot-invite {
	margin-bottom: 8px;
}

.fmbot-bubble-label {
	color: #fff;
	/* 16 px: на 14 подпись читается мельче окружающего текста сайта. */
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	/* Подпись редактируется в админке: слишком длинную обрезаем, а не
	   растягиваем плашку — она должна остаться шириной с панель. */
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* Кружок с иконкой на конце плашки — светлее фона, чтобы читался как
   кнопка, а не как часть подложки. */
.fmbot-bubble--pill .fmbot-bubble-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
}

.fmbot-bubble--pill svg {
	width: 18px;
	height: 18px;
}

/* Счётчик непрочитанных — на кружке с иконкой, а не в углу плашки:
   в углу он оказался бы в двадцати сантиметрах от того, на что надо
   нажать. */
.fmbot-bubble--pill .fmbot-badge {
	top: 0;
	right: 0;
}

/* Наведение на плашку не масштабируем: широкий элемент при scale заметно
   дёргается и наезжает на соседние кнопки сайта. */
.fmbot-bubble--pill:hover,
.fmbot-bubble--pill:active {
	transform: none;
}

.fmbot-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	background: #e53935;
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	padding: 0 5px;
	display: none;
}

.fmbot-invite {
	max-width: 280px;
	background: #fff;
	color: var(--fmbot-text);
	border-radius: 12px;
	padding: 12px 34px 12px 14px;
	margin-bottom: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	position: relative;
	cursor: pointer;
}

.fmbot-invite-close {
	position: absolute;
	top: 6px;
	right: 8px;
	border: 0;
	background: none;
	font-size: 16px;
	line-height: 1;
	color: var(--fmbot-muted);
	cursor: pointer;
}

.fmbot-panel {
	width: var(--fmbot-width);
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - 120px);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24);
	display: none;
	flex-direction: column;
	overflow: hidden;
	margin-bottom: 12px;
	/*
	 * Открытие и закрытие — только движение: панель выезжает снизу и
	 * заезжает обратно. Затухание убрано сознательно — вместе со сдвигом
	 * оно читалось как «окно мигнуло», а не как выдвинутый ящик.
	 * translateY(100%) уводит панель ровно на её высоту вниз, поэтому
	 * стартовая точка не зависит от размера окна.
	 *
	 * Кривые у открытия и закрытия РАЗНЫЕ, и это важно. Браузер берёт
	 * transition из состояния, В которое переходит: здесь, в базовом
	 * правиле, — закрытие. Ему нужен разгон: панель трогается мягко и
	 * ускоряется, уходя за край. Одна общая «замедляющаяся» кривая
	 * (0.22, 0.75, …) проходила 75 % пути за первые 22 % времени —
	 * заголовок дёргался вниз на полсотни пикселей в первом же кадре, а
	 * последние сто миллисекунд полз по пикселю.
	 */
	transform: translateY(100%);
	transition: transform 0.24s cubic-bezier(0.4, 0, 1, 1);
	/* Панель со скруглением и overflow: hidden при каждом сдвиге
	   перерисовывает обрезанные углы; отдельный слой избавляет от дрожания
	   кромки на движении. */
	will-change: transform;
}

/* is-open только показывает панель в разметке, is-shown её проявляет.
   Разнесено сознательно: смена display и прозрачности в одном кадре
   отменяет переход, и чат открывался бы рывком (см. open() в widget.js). */
.fmbot-root.is-open .fmbot-panel {
	display: flex;
}

.fmbot-root.is-shown .fmbot-panel {
	transform: translateY(0);
	/*
	 * Открытие — наоборот, с торможением: панель выходит и мягко встаёт
	 * на место.
	 *
	 * Насколько резким будет первый кадр, видно прямо из кривой: скорость
	 * на старте примерно y1/x1 от равномерной. У «эффектной»
	 * (0.16, 1, 0.3, 1) это 6× — заголовок прыгал на 75 px в первом же
	 * кадре. Здесь 0.7/0.33 ≈ 2×: движение всё ещё живое, но глаз успевает
	 * за ним. Конец обеих кривых упирается в y=1 на пологом участке,
	 * поэтому панель не «доклацывает» последние пиксели.
	 */
	transition: transform 0.34s cubic-bezier(0.33, 0.7, 0.45, 1);
}

.fmbot-root.is-open .fmbot-invite {
	display: none;
}

.fmbot-header {
	background: var(--fmbot-color-deep);
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.fmbot-avatar {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: var(--fmbot-color-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex: 0 0 auto;
}

.fmbot-title {
	font-weight: 600;
}

.fmbot-subtitle {
	font-size: 12px;
	opacity: 0.85;
}

.fmbot-close {
	margin-left: auto;
	border: 0;
	background: none;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
}

.fmbot-body {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	background: var(--fmbot-bg);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fmbot-msg {
	max-width: 86%;
	padding: 9px 13px;
	border-radius: 12px;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.fmbot-msg--bot {
	background: #fff;
	color: var(--fmbot-text);
	align-self: flex-start;
	border-bottom-left-radius: 3px;
	border: 1px solid var(--fmbot-border);
}

.fmbot-msg--visitor {
	background: var(--fmbot-color-deep);
	color: #fff;
	align-self: flex-end;
	border-bottom-right-radius: 3px;
}

.fmbot-msg--operator {
	background: #fff;
	color: var(--fmbot-text);
	align-self: flex-start;
	/* Ответ живого человека отличаем синей полосой: зелёный уже занят
	   ботом и кнопками, а жёлтого в фирменной палитре нет. */
	border: 1px solid var(--fmbot-border);
	border-left: 3px solid var(--fmbot-accent);
}

.fmbot-msg a {
	color: inherit;
	text-decoration: underline;
}

/*
 * Присланный файл в реплике посетителя. Показывается в его собственной
 * переписке, чтобы он видел, что именно отправил, и мог забрать обратно.
 */
.fmbot-file-card {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 7px 9px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.22);
	color: inherit;
	text-decoration: none;
	transition: background 0.15s ease;
}

.fmbot-file-card:hover {
	background: rgba(255, 255, 255, 0.34);
}

/* У реплик бота фон светлый — полупрозрачный белый на нём не читается. */
.fmbot-msg--bot .fmbot-file-card {
	background: rgba(0, 0, 0, 0.05);
}

.fmbot-msg--bot .fmbot-file-card:hover {
	background: rgba(0, 0, 0, 0.09);
}

.fmbot-file-icon {
	display: flex;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.18);
}

.fmbot-file-icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Миниатюра картинки вместо иконки — квадрат с обрезкой по центру. */
.fmbot-file-thumb {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	object-fit: cover;
	background: rgba(0, 0, 0, 0.18);
}

.fmbot-file-meta {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.fmbot-file-name {
	overflow: hidden;
	font-size: 13px;
	text-decoration: underline;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fmbot-file-size {
	font-size: 11px;
	opacity: 0.7;
}

/* Реплика отправлена, но сервер её ещё не подтвердил — см. echoVisitor(). */
.fmbot-msg--pending {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.fmbot-time {
	font-size: 11px;
	opacity: 0.6;
	margin-top: 3px;
}

.fmbot-options {
	display: flex;
	flex-direction: column;
	gap: 7px;
	align-self: stretch;
}

.fmbot-option {
	background: #fff;
	border: 1px solid var(--fmbot-color-deep);
	color: var(--fmbot-color-deep);
	padding: 10px 13px;
	border-radius: 9px;
	cursor: pointer;
	text-align: left;
	font: inherit;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease;
}

.fmbot-option:hover {
	background: var(--fmbot-color-deep);
	color: #fff;
	transform: translateX(2px);
}

.fmbot-option:active {
	transform: scale(0.99);
}

.fmbot-footer {
	border-top: 1px solid var(--fmbot-border);
	padding: 10px;
	background: #fff;
}

.fmbot-input-row {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}

.fmbot-input {
	flex: 1;
	border: 1px solid var(--fmbot-border);
	border-radius: 9px;
	padding: 9px 11px;
	font: inherit;
	resize: none;
	max-height: 96px;
}

.fmbot-input:focus {
	outline: none;
	border-color: var(--fmbot-color-deep);
	box-shadow: 0 0 0 3px rgba(0, 192, 54, 0.14);
}

.fmbot-send,
.fmbot-attach {
	border: 0;
	border-radius: 9px;
	padding: 9px 12px;
	/* Целевое действие — зелёным, как кнопки на сайте клиента. */
	background: var(--fmbot-color-deep);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 500;
	transition: filter 0.15s ease, transform 0.12s ease;
}

.fmbot-send:hover:not([disabled]),
.fmbot-attach:hover:not([disabled]) {
	filter: brightness(1.08);
}

.fmbot-send:active:not([disabled]) {
	transform: scale(0.98);
}

.fmbot-attach {
	background: #fff;
	color: var(--fmbot-color-deep);
	border: 1px solid var(--fmbot-border);
}

/* Отправка — круглая кнопка со стрелкой вверх. Правила идут ПОСЛЕ общего
   блока с .fmbot-attach: иначе общее правило перебивает форму и радиус. */
.fmbot-send {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 50%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fmbot-send svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.fmbot-attach[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Неактивная отправка — серая, а не полупрозрачная зелёная: полупрозрачный
   фирменный цвет читается как «кнопка работает, просто бледная». */
.fmbot-send[disabled] {
	background: var(--fmbot-border);
	color: var(--fmbot-muted);
	cursor: not-allowed;
	filter: none;
	transform: none;
}

.fmbot-hint,
.fmbot-error {
	font-size: 12px;
	margin-top: 6px;
}

.fmbot-hint {
	color: var(--fmbot-muted);
}

.fmbot-error {
	color: #c62828;
}

.fmbot-file {
	display: none;
}

.fmbot-typing {
	align-self: flex-start;
	display: flex;
	gap: 4px;
	padding: 11px 14px;
	background: #fff;
	border: 1px solid var(--fmbot-border);
	border-radius: 12px;
	border-bottom-left-radius: 3px;
}

.fmbot-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fmbot-muted);
	animation: fmbot-blink 1.2s infinite ease-in-out;
}

.fmbot-typing span:nth-child(2) {
	animation-delay: 0.16s;
}

.fmbot-typing span:nth-child(3) {
	animation-delay: 0.32s;
}

@keyframes fmbot-blink {
	0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

/* Появление реплики: короткий выезд, чтобы диалог читался как живой. */
.fmbot-msg--in,
.fmbot-options {
	animation: fmbot-rise 0.2s ease-out both;
}

/* Появилось, пока панель выезжала, — показываем сразу на месте, без
   собственного всплытия (см. staticSuffix() в widget.js). */
.fmbot-static {
	animation: none !important;
}

@keyframes fmbot-rise {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Приглашение выезжает, а не появляется рывком. */
.fmbot-invite:not([hidden]) {
	animation: fmbot-rise 0.25s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.fmbot-panel,
	.fmbot-msg--in,
	.fmbot-options,
	.fmbot-invite:not([hidden]),
	.fmbot-typing span {
		animation: none;
		transition: none;
	}
}

/* Форма контактов в начале диалога. */
.fmbot-form {
	background: #fff;
	border: 1px solid var(--fmbot-border);
	border-radius: 12px;
	padding: 12px;
	gap: 9px;
}

.fmbot-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--fmbot-muted);
}

.fmbot-field-input {
	font-size: 14px;
	color: var(--fmbot-text);
}

.fmbot-field--error {
	border-color: #c62828;
}

.fmbot-form-submit {
	margin-top: 3px;
}

/* «Начать заново» — служебное действие: неприметная ссылка под вводом,
   а не иконка рядом с крестиком, где её путали с закрытием чата. */
.fmbot-restart {
	display: block;
	margin: 8px auto 0;
	border: 0;
	background: none;
	padding: 2px 6px;
	font: inherit;
	font-size: 12px;
	color: var(--fmbot-muted);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fmbot-restart:hover {
	color: var(--fmbot-color-deep);
}

/*
 * Варианты ответа — облачками в строку, как в Jivo: не столбец кнопок во
 * всю ширину, а компактные пилюли, которые переносятся по мере
 * надобности. Прижаты вправо, к стороне посетителя: это его реплика,
 * которую он ещё не произнёс.
 */
.fmbot-options--chips {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.fmbot-options--chips .fmbot-option {
	border-radius: 999px;
	padding: 8px 15px;
	text-align: center;
}

/* «Назад» отличается от вариантов ответа: это навигация, а не выбор,
   и выглядеть как равноправный пункт меню она не должна. */
.fmbot-option--back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-color: var(--fmbot-border);
	color: var(--fmbot-muted);
	font-weight: 400;
	padding: 7px 12px;
}

.fmbot-option--back svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.fmbot-option--back:hover {
	background: var(--fmbot-muted);
	border-color: var(--fmbot-muted);
	color: #fff;
	transform: none;
}

/* «Назад» — такое же облачко в общем ряду, но всегда первое: порядок
   вариантов меняется от шага к шагу, а навигация должна оставаться на
   одном месте, иначе по ней приходится целиться заново. order, а не
   расчёт на порядок в разметке: так место кнопки не зависит от того, что
   пришлёт сервер.

   align-self сбрасываем: в базовом правиле «Назад» прижималась к началу
   колонки, а здесь колонки нет — в строке это дало бы разъезд по
   вертикали. */
.fmbot-options--chips .fmbot-option--back {
	order: -1;
	align-self: auto;
	padding: 8px 15px;
}

/* «Соединить с оператором» — запасной выход, а не вариант ответа: цветом
   не спорит с самими вариантами, но и не теряется, как «Назад». Всегда
   последним по той же причине, по которой «Назад» первая: место кнопки не
   должно зависеть от того, сколько вариантов пришло на этом шаге. */
.fmbot-option--operator {
	order: 1;
	align-self: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-color: var(--fmbot-accent);
	color: var(--fmbot-accent);
	font-weight: 500;
}

.fmbot-option--operator svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.fmbot-option--operator:hover {
	background: var(--fmbot-accent);
	border-color: var(--fmbot-accent);
	color: #fff;
}

.fmbot-form-back {
	border: 0;
	background: none;
	padding: 4px;
	font: inherit;
	font-size: 13px;
	color: var(--fmbot-muted);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fmbot-form-back:hover {
	color: var(--fmbot-color-deep);
}

/* Согласие на обработку данных. */
.fmbot-consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 12px;
	color: var(--fmbot-muted);
	line-height: 1.35;
	cursor: pointer;
}

.fmbot-consent input {
	margin-top: 2px;
	flex: 0 0 auto;
	accent-color: var(--fmbot-color-deep);
}

.fmbot-consent a {
	color: var(--fmbot-accent);
}

.fmbot-consent b,
.fmbot-field b {
	color: #c62828;
	font-weight: 400;
}

.fmbot-consent--error {
	color: #c62828;
}

.fmbot-form-submit {
	width: 100%;
	border-radius: 9px;
	height: auto;
	padding: 11px 14px;
}

textarea.fmbot-field-input {
	min-height: 54px;
	max-height: 120px;
}

/* На шаге формы нижнее поле ввода прячем — ответ уходит из формы. */
.fmbot-root.is-form .fmbot-input-row,
.fmbot-root.is-form .fmbot-hint {
	display: none;
}

@media (max-width: 480px) {
	.fmbot-root {
		right: 12px;
		bottom: 12px;
	}

	/*
	 * На телефоне чат раскрывается во весь экран — так же ведёт себя
	 * Jivo на сайте клиента (замерено: 390×844, position: fixed, без
	 * скруглений). Окошко в углу на 390 px ширины оставляет полоски
	 * фона по краям и мелкие поля ввода; полноэкранный режим — то, чего
	 * человек и ждёт от чата на телефоне.
	 *
	 * Размеры задаются одним inset: 0 без width/height, чтобы не
	 * упираться в 100vh, который в мобильных браузерах считается вместе
	 * со скрывающейся адресной строкой.
	 *
	 * Селектор с двумя классами — чтобы перебить правило режима плашки,
	 * у которого такая же специфичность.
	 */
	.fmbot-root .fmbot-panel,
	.fmbot-root--pill .fmbot-panel {
		position: fixed;
		inset: 0;
		/* Выезд снизу остаётся тем же, что на десктопе: панель поднимается
		   на свою высоту — просто теперь это высота всего экрана. */
		width: auto;
		max-width: none;
		height: auto;
		max-height: none;
		border-radius: 0;
		margin: 0;
	}

	/*
	 * На телефоне плашка с подписью съедает половину экрана — сворачиваем
	 * её обратно в кружок. Кружок уходит ВЛЕВО: так на мобильной версии
	 * сайта клиента стоит Jivo (замерено — 65×65, left/bottom по 20 px), а
	 * справа внизу на телефоне обычно оказываются системные жесты и
	 * кнопки браузера. Кнопка прокрутки вверх, ради которой заводилась
	 * плашка, на мобильной вёрстке сайта скрыта вовсе.
	 */
	.fmbot-root--pill {
		left: 20px;
		right: auto;
		bottom: 20px;
	}

	.fmbot-bubble--pill {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		padding: 0;
		gap: 0;
		justify-content: center;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	}

	.fmbot-bubble-label {
		display: none;
	}

	.fmbot-bubble--pill .fmbot-bubble-icon {
		width: auto;
		height: auto;
		background: none;
	}

	.fmbot-bubble--pill svg {
		width: 28px;
		height: 28px;
	}
}

/* Загруженная иконка заполняет аватар целиком: логотип, вписанный внутрь
   с отступами, на 38 px нечитаем. Белая подложка .fmbot-avatar при этом
   не мешает — картинка её полностью перекрывает, а для варианта с
   буквами она нужна. */
.fmbot-avatar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* Заголовок формы контактов. Раньше просьба представиться приходила
   отдельной репликой бота; теперь это часть самой формы — так же, как в
   Jivo, и на один пузырь в ленте меньше. */
.fmbot-form-title {
	font-weight: 600;
	font-size: 15px;
	color: var(--fmbot-text);
	margin-bottom: 10px;
}

/* Поле-приманка от ботов: человек его не видит и не встретит ни мышью,
   ни табом. Уводим за край экрана, а не `display: none` — часть ботов
   намеренно пропускает поля, скрытые совсем. Занимать место в потоке
   форма при этом не должна, отсюда `position: absolute`. */
.fmbot-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}