/* ===========================================================================
   my-ui — модальное окно (движение и слои) и лист снизу на телефоне

   Само окно (.ui-modal, крестик, шапка, прокручиваемая форма) описано
   в forms.css, раздел 6. Здесь — то, что вокруг: появление/исчезновение,
   класс на <html>, лист снизу с приклеенной кнопкой.

   Классы состояний ставят modal.js и sheet.js:
     html.ui-modal-open      окно открыто, страница не крутится
     .ui-cta.is-ready        кнопка у нижнего края приехала
     .ui-cta.is-hidden       кнопка уехала (форма на экране или лист открыт)
     .ui-sheet.is-open       лист выехал
     html.ui-sheet-open      страница под листом не крутится
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Модальное окно: слои и появление

   Показ — прозрачностью за 400 мс, скриптом (modal.js): display меняется
   на block, потом opacity 0 → значение из таблицы стилей. У вуали это 0.45,
   поэтому скрипт в конце ставит пустую строку, а не «1».
   --------------------------------------------------------------------------- */

.ui-modal,
.ui-modal__veil {
	display: none;
}

html.ui-modal-open,
html.ui-modal-open body {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   2. Телефон: кнопка у нижнего края и лист с формой

   На странице с длинной плитой формы (карточка компании) кнопка «Написать»
   приклеена к низу экрана над содержимым, с затухающей подложкой цвета
   страницы — строки под ней не обрываются по резкой кромке. Уезжает вниз,
   когда плита с формой сама на экране или когда открыт лист.
   На большом экране обоих узлов нет.
   --------------------------------------------------------------------------- */

.ui-cta,
.ui-sheet {
	display: none;
}

@media (max-width: 900px) {
	.ui-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		display: block;
		padding: 18px var(--ui-edge) calc(12px + env(safe-area-inset-bottom));
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--ui-page) 0%, transparent) 0%,
			var(--ui-page) 45%);
		pointer-events: none;
		/* Не стоит на первом экране с самого начала, а приезжает снизу,
		   когда страница уже показана (класс is-ready через 400 мс) */
		transform: translate3d(0, 110%, 0);
		transition: transform 0.4s var(--ui-ease);
	}

	.ui-cta.is-ready {
		transform: none;
	}

	.ui-cta.is-hidden {
		transform: translate3d(0, 110%, 0);
	}

	/* Синяя, как кнопка отправки формы, к которой ведёт. Без тени:
	   на светлом листе она читалась свечением. */
	.ui-cta__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		min-height: 54px;
		padding: 12px 20px;
		border: 0;
		border-radius: 16px;
		background: var(--ui-accent);
		color: var(--ui-on-accent);
		font-family: var(--ui-font);
		font-weight: var(--ui-w-strong);
		font-size: 17px;
		line-height: 1.2;
		cursor: pointer;
		pointer-events: auto;
		transition: background-color var(--ui-base) var(--ui-ease);
	}

	.ui-cta__btn:active {
		background: var(--ui-accent-active);
	}

	/* Подвал такой страницы заканчивается выше кнопки, иначе последние
	   строки под ней не прочитать */
	.ui-has-cta .ui-footer {
		padding-bottom: 76px;
	}

	/* --- лист ------------------------------------------------------------
	   Выезжает снизу на тёмно-синей вуали, скруглён сверху, с «ручкой»
	   по центру, как системные листы телефона. Прокручивается форма,
	   а не лист; шапка листа — заголовок формы. */
	.ui-sheet {
		position: fixed;
		inset: 0;
		z-index: 60;
		display: block;
	}

	.ui-sheet[hidden] {
		display: none;
	}

	.ui-sheet__veil {
		position: absolute;
		inset: 0;
		background: color-mix(in srgb, var(--ui-accent-active) 45%, transparent);
		opacity: 0;
		transition: opacity var(--ui-turn) var(--ui-ease);
	}

	.ui-sheet__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		max-height: calc(100dvh - 28px);
		background: var(--ui-card);
		border-radius: 24px 24px 0 0;
		box-shadow: var(--ui-shadow-lg);
		transform: translate3d(0, 100%, 0);
		transition: transform 0.44s var(--ui-ease);
	}

	.ui-sheet.is-open .ui-sheet__veil {
		opacity: 1;
	}

	.ui-sheet.is-open .ui-sheet__panel {
		transform: none;
	}

	.ui-sheet__grip {
		flex: 0 0 auto;
		width: 40px;
		height: 4px;
		margin: 10px auto 0;
		border-radius: 2px;
		background: var(--ui-line);
	}

	/* Крестик листа — светлый круг, не акцентный: лист и так стоит на
	   вуали, вторая синяя цель рядом с кнопкой отправки не нужна */
	.ui-sheet__close {
		position: absolute;
		top: 14px;
		right: 14px;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--ui-surface);
		color: var(--ui-heading);
		cursor: pointer;
	}

	.ui-sheet__close svg {
		width: 18px;
		height: 18px;
	}

	.ui-sheet__close:active {
		background: var(--ui-line);
	}

	.ui-sheet__scroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 14px var(--ui-edge) calc(22px + env(safe-area-inset-bottom));
	}

	/* Заголовок формы не залезает под крестик */
	.ui-sheet .ui-form__head {
		padding-right: 44px;
	}

	.ui-sheet .ui-form__head > .ui-form__title {
		margin-top: 6px;
	}

	html.ui-sheet-open {
		overflow: hidden;
	}

	@media (prefers-reduced-motion: reduce) {
		.ui-cta,
		.ui-sheet__veil,
		.ui-sheet__panel {
			transition-duration: 0.01s;
		}
	}
}