/*
 * Шторка умного поиска и всё, что к ней относится: свечение под строкой на
 * десктопе, пилюля-вход на мобильном, сама шторка с диалогом.
 *
 * Один файл на мероприятия и вакансии. Раньше это была копия на каждую
 * страницу, и правки приходилось делать дважды: из четырёх дефектов, найденных
 * при проверке живьём, два пришлось чинить в двух местах.
 */

.nmp-hero__search-block {
	position: relative;
	width: 100%;
}

/*
 * Свечение вокруг строки умного поиска.
 *
 * В макете (фрейм 1:2703) это обычная тень на самом поле:
 * `drop-shadow(0 0 15px rgba(108,179,204,0.6))` — без смещения и растяжки,
 * приглушённый сине-зелёный, а не насыщенный синий. Кнопка «Найти» стоит
 * отдельным элементом и не светится.
 *
 * Плотность взяли на половину вместо макетных 0.6: на белой карточке шапки
 * ореол из макета читался как подсветка ошибки. Размытие оставили как есть.
 *
 * Раньше здесь был градиентный слой с размытием на обёртке. Он захватывал и
 * кнопку, красил ореол в другой цвет и лежал поверх соседей.
 *
 * box-shadow, а не filter: у прямоугольника со скруглением они дают одну и ту
 * же картинку, но filter создаёт новый контекст наложения и приклеивает к себе
 * позиционированных потомков — плейсхолдер внутри поля абсолютный.
 */
.nmp-hero__search {
	/*
	 * Над полосой фильтров: у неё своя непрозрачная подложка, и без слоя она
	 * срезала бы нижнюю половину ореола.
	 */
	position: relative;
	z-index: 2;
	box-shadow: 0 0 15px rgba(108, 179, 204, 0.5);
	transition: box-shadow 0.2s;
}

/* В фокусе ореол чуть плотнее: поле отзывается, но не вспыхивает. */
.nmp-hero__search:focus-within {
	box-shadow: 0 0 18px rgba(108, 179, 204, 0.62);
}



/* ── Сортировка каталога ───────────────────────────────────────────────── */

/*
 * Общая для мероприятий и вакансий: см. makeSort в этом же модуле. Осей может
 * быть несколько (у вакансий дата и зарплата) — тогда переключатели стоят
 * рядом, а раскрыт всегда не больше одного списка.
 */
.ai-sort-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 8px;
}

.ai-sort {
	position: relative;
	flex-shrink: 0;
}

.ai-sort__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	color: #121217;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 100%;
	background: #FFFFFF;
	border: 1px solid #F2F2F2;
	/* В макете у переключателя скругление 16px, а не капсула. */
	border-radius: 16px;
	padding: 16px 24px;
	cursor: pointer;
	transition: border-color 0.2s;
}

.ai-sort__toggle:hover {
	border-color: #D9D9D9;
}

.ai-sort__arrow {
	flex-shrink: 0;
	transition: transform 0.2s;
}

.ai-sort--open .ai-sort__arrow {
	transform: rotate(180deg);
}

.ai-sort__dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	display: flex;
	flex-direction: column;
	min-width: 200px;
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(18, 18, 23, 0.12);
	padding: 8px;
	z-index: 20;
}

.ai-sort__option {
	color: #121217;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 16px;
	text-align: left;
	white-space: nowrap;
	background: none;
	border: 0;
	border-radius: 12px;
	padding: 12px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.ai-sort__option:hover {
	background: #F8F8F8;
}

.ai-sort__option--active {
	color: #BD0C1E;
}

@media (max-width: 992px) {
	.ai-sort__toggle {
		height: 40px;
		font-size: 14px;
		padding: 12px 20px;
		/* На узком экране переключатель круглый, скругление 16px только на
		 * десктопе. */
		border-radius: 100px;
	}
}

/* ── Шторка мобильного поиска ────────────────────────────────────────────── */
/*
 * Макет: экран 393×852, шторка 393×792 от верха 60, ручка 49×5, крестик 24×24
 * с отступом 16, чипы высотой 32. На десктопе шторки нет вовсе: там осталась
 * полная строка поиска, поэтому и пилюля, и сама шторка скрыты.
 */

.ai-search-pill {
	display: none;
}

.ai-drawer {
	display: none;
}

@media (max-width: 992px) {
	/*
	 * Полной строки поиска на мобильном в макете нет: её место заняла пилюля
	 * над таб-баром, а ввод переехал внутрь шторки. Синее свечение живёт
	 * вместе со строкой и уходит вместе с ней.
	 */
	.nmp-hero__search-block {
		display: none;
	}

	.ai-search-pill {
		position: fixed;
		/*
		 * Отступ снизу считает скрипт: у нижнего края кроме таб-бара живёт
		 * промо-баннер акции, и под ним пилюлю не видно и не нажать. 110 из
		 * макета остаётся значением по умолчанию, пока мерить нечего.
		 */
		bottom: var(--ai-pill-bottom, 110px);
		left: 50%;
		transform: translateX(-50%);
		/*
		 * Выше плавающего слоя сайта: таб-бар там 1000, промо-баннер 1010.
		 * С прежними 60 пилюля уходила под баннер целиком.
		 */
		z-index: 1020;
		transition: bottom 0.2s ease;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 32px;
		/* Тёмная пилюля со светлой подписью: над лентой из белых карточек
		 * белая на белом терялась. Иконка красится currentColor и белеет
		 * вместе с текстом. */
		color: #FFFFFF;
		font-family: inherit;
		font-size: 14px;
		line-height: 16px;
		background: #1B1B1B;
		border: 0;
		border-radius: 100px;
		box-shadow: 0 4px 16px rgba(18, 18, 23, 0.24);
		padding: 8px 16px;
		cursor: pointer;
	}

	.ai-drawer {
		position: fixed;
		inset: 0;
		/*
		 * Выше всего, что рисуют сами каталоги: на вакансиях блок фильтров
		 * липкий с z-index 9999, а карточки лежат на 100. Со значением 100
		 * каталог рисовался прямо поверх открытой шторки — фильтры,
		 * сортировка и карточки насквозь.
		 */
		z-index: 10050;
		display: block;
		/* Закрытая шторка не должна перехватывать касания у каталога. */
		pointer-events: none;
		visibility: hidden;
	}

	.ai-drawer--open {
		pointer-events: auto;
		visibility: visible;
	}

	.ai-drawer__scrim {
		position: absolute;
		inset: 0;
		/*
		 * #121217 на половину прозрачности, как в макете. С прежней четвертью
		 * каталог за шторкой оставался читаемым и спорил с разговором за
		 * внимание: видно было, что там карточки, и глаз уходил туда.
		 */
		background: rgba(18, 18, 23, 0.5);
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	.ai-drawer--open .ai-drawer__scrim {
		opacity: 1;
	}

	.ai-drawer__sheet {
		position: absolute;
		left: 0;
		right: 0;
		/* Сверху видно 60 пикселей каталога, как в макете. */
		top: 60px;
		/*
		 * Низ поднимается над клавиатурой. Высоту подставляет скрипт: на iOS
		 * клавиатура не ужимает окно, и без этого кнопка «Отправить» остаётся
		 * под ней — видно её только если догадаться пролистать.
		 */
		bottom: var(--ai-drawer-keyboard, 0px);
		transition: bottom 0.2s ease;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -8px 32px rgba(18, 18, 23, 0.16);
		/* Выезжает снизу, а не появляется. */
		transform: translateY(100%);
		transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
	}

	.ai-drawer--open .ai-drawer__sheet {
		transform: translateY(0);
	}

	/*
	 * Ручка внутри листа, первой строкой.
	 *
	 * Сам элемент — только зона касания: палец в пять пикселей не попадает,
	 * поэтому по 12 пикселей сверху и снизу. Полоску рисует псевдоэлемент.
	 *
	 * Разведено намеренно. Когда полоска была фоном самого элемента (`padding:
	 * 12px 0` плюс `background-clip: content-box`), скругление считалось от
	 * внешнего бокса 49×29: браузер ужимал заявленные 100 пикселей до вписанных
	 * в него ~14, а потом вычитал вертикальный padding. По горизонтали радиус
	 * оставался 14, по вертикали становился 2,5 — углы выходили эллиптическими,
	 * и полоска сужалась к концам линзой вместо ровной капсулы.
	 */
	.ai-drawer__handle {
		position: relative;
		flex: 0 0 auto;
		width: 49px;
		height: 29px;
		margin: 8px auto 0;
		cursor: grab;
		touch-action: none;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	/* Ровно то, что в макете: 49×5, скругление в половину высоты, #B9C0C9. */
	.ai-drawer__handle::before {
		content: "";
		position: absolute;
		top: 12px;
		left: 0;
		width: 49px;
		height: 5px;
		background: #B9C0C9;
		border-radius: 2.5px;
	}

	/*
	 * Ниже верха переписки ручка не нужна: шторку тянут за верх, а не за
	 * середину списка. Гаснет и чуть уходит вверх, а не исчезает рывком; место
	 * за собой сохраняет, иначе переписка дёргалась бы на каждой прокрутке.
	 */
	.ai-drawer__handle--gone {
		opacity: 0;
		transform: translateY(-6px);
		pointer-events: none;
	}

	.ai-drawer__close {
		position: absolute;
		top: 16px;
		right: 16px;
		z-index: 2;
		display: flex;
		/* Серый: крестик закрывает разговор, а не ведёт его. */
		color: #9D9D9D;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	.ai-drawer__body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 16px 16px 8px;
	}

	/* Первый экран: поле по центру, вокруг воздух, отправка кнопкой снизу. */
	.ai-drawer__start {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 180px;
		padding: 24px 0;
	}

	.ai-drawer__start-field-wrap {
		position: relative;
		width: 100%;
	}

	.ai-drawer__start-field {
		width: 100%;
		color: #121217;
		font-family: inherit;
		font-size: 16px;
		font-weight: 400;
		line-height: 21px;
		text-align: center;
		/* Каретка красная, как в макете. */
		caret-color: #BD0C1E;
		background: none;
		border: 0;
		outline: none;
		padding: 0;
	}

	/*
	 * Пока подсказка набирается, каретку поля прячем: её роль играет каретка
	 * машинки, а две мигающие палки в одной строке читаются как сбой.
	 */
	.ai-drawer__start-field--hinted {
		caret-color: transparent;
	}

	/*
	 * Подсказка лежит слоем поверх поля и центрируется сама.
	 *
	 * Серая, а не чёрная: чёрным она неотличима от набранного текста, и человек
	 * не понимает, лежит там его запрос или приглашение.
	 */
	.ai-drawer__start-hint {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #9D9D9D;
		font-family: inherit;
		font-size: 16px;
		font-weight: 400;
		line-height: 21px;
		text-align: center;
		pointer-events: none;
	}

	/* Каретка машинки: та же, что в строке поиска на десктопе, но красная. */
	.ai-drawer__start-hint::after {
		content: "";
		display: inline-block;
		width: 1px;
		height: 16px;
		margin-left: 2px;
		background: #BD0C1E;
		animation: ai-drawer-caret 1s step-end infinite;
	}

	.ai-drawer__start-hint._typing::after {
		animation: none;
		opacity: 1;
	}

	@keyframes ai-drawer-caret {
		0%, 49% { opacity: 1; }
		50%, 100% { opacity: 0; }
	}

	.ai-drawer__submit-row {
		flex: 0 0 auto;
		padding: 12px 16px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * Кнопка из дизайн-системы, нода 1:2251: фон #BD0C1E, отступы 16 на 24,
	 * скругление 16, подпись Factor A Regular 16/16. Раньше она была капсулой
	 * со скруглением 100 — такой кнопки в системе нет.
	 */
	.ai-drawer__submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		color: #FFFFFF;
		font-family: inherit;
		font-size: 16px;
		font-weight: 400;
		line-height: 16px;
		background: #BD0C1E;
		border: 0;
		border-radius: 16px;
		padding: 16px 24px;
		cursor: pointer;
	}

	.ai-drawer__submit:disabled {
		background: #E5E5E5;
		color: #9D9D9D;
		cursor: default;
	}

	.ai-drawer__bubble {
		max-width: 80%;
		margin: 0 0 16px auto;
		color: #121217;
		font-size: 14px;
		/*
		 * Обычное начертание. Без него текст наследовал светлое от страницы, и
		 * реплики выглядели бледнее всего остального в шторке.
		 */
		font-weight: 400;
		line-height: 18px;
		background: #F2F2F2;
		border-radius: 16px 16px 4px 16px;
		padding: 10px 14px;
	}

	.ai-drawer__answer {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		margin: 0 0 16px;
	}

	.ai-drawer__spark {
		flex: 0 0 auto;
		color: #BD0C1E;
		margin-top: 2px;
		/* Появляется с лёгким подскоком: это момент, когда пришёл ответ. */
		animation: ai-spark-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	/* Пока ждём ответ, искорка дышит: видно, что процесс идёт. */
	.ai-drawer__spark--live {
		animation: ai-spark-breathe 1.2s ease-in-out infinite;
	}

	@keyframes ai-spark-pop {
		0% { transform: scale(0.4) rotate(-25deg); opacity: 0; }
		100% { transform: scale(1) rotate(0); opacity: 1; }
	}

	@keyframes ai-spark-breathe {
		0%, 100% { transform: scale(1); opacity: 1; }
		50% { transform: scale(1.25); opacity: 0.7; }
	}

	/* Карточки проявляются друг за другом, а не вспыхивают все разом. */
	.ai-drawer__cards > * {
		animation: ai-card-in 0.32s ease-out both;
	}

	.ai-drawer__cards > *:nth-child(2) { animation-delay: 0.06s; }
	.ai-drawer__cards > *:nth-child(3) { animation-delay: 0.12s; }
	.ai-drawer__cards > *:nth-child(n+4) { animation-delay: 0.18s; }

	@keyframes ai-card-in {
		from { transform: translateY(12px); opacity: 0; }
		to { transform: translateY(0); opacity: 1; }
	}

	.ai-drawer__answer-text {
		margin: 0;
		color: #121217;
		font-size: 14px;
		/* Обычное начертание, как и у реплики человека. */
		font-weight: 400;
		line-height: 18px;
	}

	.ai-drawer__cards {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 16px;
	}

	/*
	 * Карточка на белой шторке.
	 *
	 * В ленте карточка белая на сером фоне страницы, и форму ей задаёт сам
	 * фон. Шторка белая, поэтому карточка сливалась с ней: от неё оставались
	 * только текст и теги, без границ. Возвращаем форму тонкой рамкой — так
	 * она и нарисована в макете.
	 */
	.ai-drawer__cards .new-vacancies-card,
	.ai-drawer__cards .event-card {
		border: 1px solid #F2F2F2;
	}

	/*
	 * Внутри шторки избранное не показываем. В макете сердечко нарисовано,
	 * но по решению команды его тут нет: карточка в переписке это ответ на
	 * вопрос, а не место для действий над ним.
	 *
	 * Классы у страниц разные: карточка мероприятия и карточка вакансии
	 * рисуются своими шаблонами. Перечисляем оба — иначе на одной из страниц
	 * сердечко остаётся, как и было после переноса шторки в общий модуль.
	 */
	.ai-drawer__cards .event-card__favorite,
	.ai-drawer__cards .vacancy__favorite {
		display: none;
	}

	/* Описание в карточке шторки нужно: по нему человек и выбирает. */
	.ai-drawer__cards .event-card__text {
		display: -webkit-box;
	}

	.ai-drawer__hints {
		margin-bottom: 16px;
	}

	.ai-drawer__hints-title {
		margin: 0 0 4px;
		color: #121217;
		font-size: 18px;
		font-weight: 500;
		line-height: 23px;
	}

	.ai-drawer__hints-subtitle {
		margin: 0 0 12px;
		color: #9D9D9D;
		font-size: 14px;
		line-height: 18px;
	}

	/*
	 * Под ответом подсказки стоят столбиком от левого края с отступом, а не
	 * рядами по центру: там они читаются как продолжение выдачи, а не как
	 * стартовое меню. Разделительная черта отбивает их от последней карточки.
	 */
	.ai-drawer__hints--answer {
		border-top: 1px solid #F2F2F2;
		padding: 24px 0 0;
		margin-top: 8px;
	}

	.ai-drawer__hints--answer .ai-drawer__chips {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 8px;
		padding-left: 8px;
	}

	.ai-drawer__chips {
		display: flex;
		flex-wrap: wrap;
		/* Ряды чипов и сами чипы выровнены по центру, как в макете. */
		justify-content: center;
		gap: 8px;
	}

	.ai-drawer__chip {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 32px;
		color: #121217;
		font-family: inherit;
		font-size: 14px;
		line-height: 16px;
		text-align: center;
		background: #F8F8F8;
		border: 1px solid #F2F2F2;
		border-radius: 100px;
		/*
		 * По 12, а не по 16 из макета: там экран 393, а самый узкий из ходовых
		 * — 360. На нём с макетными отступами пара чипов в ряд не помещается и
		 * раскладка рассыпается в столбик.
		 */
		padding: 8px 12px;
		cursor: pointer;
	}

	.ai-drawer__chip-icon {
		flex: 0 0 auto;
		color: #121217;
	}

	.ai-drawer__skeleton {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-bottom: 16px;
	}

	/* Скелетон стоит на месте будущего ответа, рядом с той же искоркой. */
	.ai-drawer__answer--pending .ai-drawer__skeleton {
		flex: 1 1 auto;
		min-width: 0;
		margin-bottom: 0;
	}

	.ai-drawer__skeleton-line,
	.ai-drawer__skeleton-card {
		display: block;
		background: #F2F2F2;
		border-radius: 8px;
		/* Пульсирует, а не мигает: мигание дёргает глаз. */
		animation: ai-drawer-pulse 1.4s ease-in-out infinite;
	}

	.ai-drawer__skeleton-line {
		height: 14px;
	}

	.ai-drawer__skeleton-line--short {
		width: 60%;
	}

	.ai-drawer__skeleton-card {
		height: 220px;
		border-radius: 16px;
	}

	@keyframes ai-drawer-pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.55; }
	}

	.ai-drawer__error {
		text-align: center;
		padding: 64px 16px 0;
	}

	.ai-drawer__error-emoji {
		font-size: 24px;
	}

	.ai-drawer__error-text {
		margin: 12px 0 24px;
		color: #121217;
		font-size: 14px;
		line-height: 18px;
	}

	.ai-drawer__retry {
		width: 100%;
		height: 48px;
		color: #FFFFFF;
		font-family: inherit;
		font-size: 16px;
		background: #BD0C1E;
		border: 0;
		border-radius: 16px;
		cursor: pointer;
	}

	/*
	 * Полоса под строкой ввода, нода 1:2329.
	 *
	 * Полупрозрачная серая с размытием, а не белая: сквозь неё видно край
	 * последней карточки, и понятно, что список продолжается за строкой. На
	 * белой подложке лента выглядела законченной там, где она просто уходит
	 * под строку.
	 */
	.ai-drawer__input-bar {
		flex: 0 0 auto;
		background: rgba(208, 208, 208, 0.65);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		border-radius: 16px 16px 0 0;
		/*
		 * 17 сверху по макету — воздух между перепиской и строкой. Снизу столько
		 * же плюс домашняя полоса iPhone: лежать на ней поле не должно. Отступ
		 * под нижнее меню сайта не нужен, на время разговора мы его прячем.
		 */
		padding: 17px 16px;
		padding-bottom: calc(17px + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * Само поле белое на этой подложке: так видно, куда писать. Тень из
	 * системы, `Shadow/Light`.
	 */
	.ai-drawer__input {
		display: flex;
		align-items: center;
		gap: 8px;
		background: #FFFFFF;
		border: 0;
		border-radius: 16px;
		box-shadow: 0 0 4px 0 rgba(157, 157, 157, 0.2);
		padding: 4px 4px 4px 11px;
	}

	.ai-drawer__input-icon {
		flex: 0 0 auto;
		display: flex;
		color: #9D9D9D;
	}

	.ai-drawer__field {
		flex: 1 1 auto;
		min-width: 0;
		height: 31px;
		color: #121217;
		font-family: inherit;
		/*
		 * 16, а не 12 из макета: на iOS поле со шрифтом мельче 16 заставляет
		 * браузер увеличивать всю страницу при фокусе, и шторка уезжает за край
		 * экрана. Подсказка при этом остаётся макетной.
		 */
		font-size: 16px;
		font-weight: 400;
		background: none;
		border: 0;
		outline: none;
		padding: 0;
	}

	.ai-drawer__field::placeholder {
		color: #626262;
		font-size: 12px;
		line-height: 14px;
	}

	/*
	 * Самолётик тёмный и в покое, и при нажатии: красный здесь читался как
	 * предупреждение. Отклик даёт размер, а не цвет.
	 */
	.ai-drawer__send {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		color: #121217;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.ai-drawer__send:hover:not(:disabled),
	.ai-drawer__send:focus-visible:not(:disabled) {
		transform: scale(1.15);
	}

	.ai-drawer__send:active:not(:disabled) {
		transform: scale(0.95);
	}

	.ai-drawer__send:disabled {
		color: #9D9D9D;
		cursor: default;
	}

	/* Пока шторка открыта, каталог под ней не прокручивается. */
	body.ai-drawer-open {
		overflow: hidden;
	}

	/*
	 * Промо-баннер акции живёт слоем выше шторки (1010 против 100) и ложился
	 * прямо на переписку, закрывая кнопку «Отправить». Поднимать шторку выше
	 * нельзя: над ней по макету обязан остаться таб-бар, а он ниже баннера.
	 * Поэтому на время разговора баннер убираем — реклама поверх открытого
	 * диалога неуместна в любом случае, а вернётся он сразу при закрытии.
	 */
	body.ai-drawer-open .toast-banner {
		display: none;
	}

	/*
	 * И сама пилюля тоже: она теперь выше шторки по слоям, а её работа —
	 * шторку открыть. Поверх открытого разговора она висит зря и закрывает
	 * карточки.
	 */
	body.ai-drawer-open .ai-search-pill {
		display: none;
	}

	/*
	 * И нижнее меню сайта. В макете шторка занимает экран целиком до самого
	 * низа, а меню под ней не просвечивает: разговор — отдельный режим, из
	 * которого выходят крестиком или свайпом, а не перескакивают в другой
	 * раздел. Заодно снимается вся возня с отступом под меню.
	 */
	body.ai-drawer-open .mobile-menu {
		display: none;
	}
}

/*
 * Обзор страницы: пока он идёт, промо-баннеры акции убираем.
 *
 * Их два, оба от менеджера попапов: узкая липкая полоса у верхнего края
 * (`promo-banner-short`) и всплывающий баннер (`toast-banner`). Верхняя полоса
 * на узком экране накрывала блок фильтров — то самое место, которое обзор в
 * этот момент подсвечивает и про которое рассказывает.
 *
 * Правило вне медиазапроса: на широком экране баннеры тоже висят поверх и
 * мешают шагу про фильтры, просто попадают не в каждый шаг.
 */
body.ai-tour-open .toast-banner,
body.ai-tour-open .promo-banner-short {
	display: none;
}

/*
 * У части людей движение вызывает физическое недомогание, и системный флаг
 * существует именно для этого. Шторка остаётся рабочей, просто появляется.
 */
@media (prefers-reduced-motion: reduce) {
	.ai-drawer__sheet,
	.ai-drawer__scrim {
		transition: none;
	}

	.ai-drawer__skeleton-line,
	.ai-drawer__skeleton-card,
	.ai-drawer__spark,
	.ai-drawer__spark--live,
	.ai-drawer__start-hint::after,
	.ai-drawer__cards > * {
		animation: none;
	}

	.ai-drawer__handle,
	.ai-drawer__send {
		transition: none;
	}

	.ai-drawer__send:hover:not(:disabled),
	.ai-drawer__send:focus-visible:not(:disabled),
	.ai-drawer__send:active:not(:disabled) {
		transform: none;
	}
}