/*
	=====================================================================
	==== ПРИМЕРКА ЛАМИНАТА: ОКНО ПОВЕРХ САЙТА (префикс `stt-`) =========
	=====================================================================
	HLAS Devs, 2026-08-22.

	СВЯЗЬ С ТЕМОЙ САЙТА — ЧЕРЕЗ ПЕРЕМЕННЫЕ, А НЕ ЧЕРЕЗ ОБЩИЕ КЛАССЫ
	(то же правило, что у виджета ассистента): `--stt-*` с запасным
	значением из `--st-*` темы и жестким цветом в конце цепочки. Окно
	обязано выглядеть прилично там, где темы нет вовсе, — например
	в конструкторе поверх холста.

	ЖЕСТКИХ ЗАВИСИМОСТЕЙ НЕТ НИ ОДНОЙ: ни Metronic, ни stheme.css.
	Единственное, что окно берет снаружи, — шрифт страницы
*/

/* Показ и скрытие идут АТРИБУТОМ: свойства `hidden` у SVG нет,
   а сетка разметки пола — это <svg> (подробности в sttryon.js) */
.stt [hidden] {
	display: none !important;
}

.stt {
	--stt-bg: 			var(--st-surface, #ffffff);
	--stt-fg: 			var(--st-text, #1a1d21);
	--stt-muted: 		var(--st-muted, #6b7280);
	--stt-line: 		var(--st-border, rgba(0, 0, 0, 0.12));
	--stt-accent: 		var(--st-accent, #2f6fed);
	--stt-accent-fg: 	var(--st-accent-fg, #ffffff);
	--stt-radius: 		var(--st-radius, 14px);

	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	color: var(--stt-fg);
	/*
		ШРИФТ ОБЪЯВЛЯЕТСЯ ЯВНО, А НЕ НАСЛЕДУЕТСЯ (2026-08-22).

		Окно `position: fixed`, и хотя лежит оно внутри корня сайта,
		полагаться на наследование нельзя: ровно так же поступают окна
		самого сайта (`.st-ov`). Запасное значение — на случай, когда
		модуль поднялся там, где темы нет вовсе
	*/
	font-family: var(--st-font, 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif);
	font-size: 14px;
	line-height: 1.45;
}

.stt.stt--on {
	display: flex;
}

/* Прокрутка страницы под окном выключается: на телефоне жест
   перетаскивания угла иначе уезжает в прокрутку документа */
html.stt-lock,
html.stt-lock body {
	overflow: hidden;
}

.stt__scrim {
	position: absolute;
	inset: 0;
	background: rgba(12, 14, 18, 0.72);
	backdrop-filter: blur(2px);
}

.stt__win {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1080px;
	max-height: 94vh;
	background: var(--stt-bg);
	border-radius: var(--stt-radius);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

/* ==== ШАПКА ==== */

.stt__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--stt-line);
}

.stt__head-text {
	flex: 1 1 auto;
	min-width: 0;
}

.stt__title {
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stt__note {
	margin-top: 2px;
	font-size: 12px;
	color: var(--stt-muted);
}

/*
	КНОПКА ЗАКРЫТИЯ — КВАДРАТНАЯ СО СКРУГЛЕНИЕМ, как `btn-icon`
	в модалках сервиса и как кнопки самого сайта. Круглая выбивалась
	из ряда: круг в интерфейсе проекта означает аватар или значок
	статуса, а не действие
*/
.stt__x {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: var(--st-radius-sm, 10px);
	background: transparent;
	color: var(--stt-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.stt__x i {
	color: inherit;
}

.stt__x:hover {
	background: var(--stt-line);
	color: var(--stt-fg);
}

/* ==== ТЕЛО ==== */

.stt__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 18px;
}

/* ==== ЭКРАН 1: ЗАГРУЗКА ФОТО ==== */

.stt__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 260px;
	padding: 24px;
	border: 2px dashed var(--stt-line);
	border-radius: var(--stt-radius);
	text-align: center;
	cursor: pointer;
}

.stt__drop--over {
	border-color: var(--stt-accent);
	background: rgba(47, 111, 237, 0.06);
}

/* Значок из набора KeenIcons: цвет акцентный — это единственная
   подсказка «сюда нажимать», и серым она читается как заглушка */
.stt__drop-icon {
	font-size: 38px;
	line-height: 1;
	color: var(--stt-accent);
}

.stt__drop-title {
	font-size: 15px;
	font-weight: 600;
}

.stt__drop-note {
	max-width: 420px;
	font-size: 12px;
	color: var(--stt-muted);
}

.stt__file {
	display: none;
}

/* ==== ЭКРАНЫ 2-3: ХОЛСТ ==== */

/*
	==== РАМКА ОБЯЗАНА БЫТЬ РОВНО ПО ХОЛСТУ ====

	ГРАБЛИ, КОТОРЫЕ ЭТО ЗАКРЫВАЕТ (и они не очевидны): точки углов
	и сетка разметки позиционируются по РАМКЕ (`inset: 0`), а скрипт
	переводит пиксели фотографии в пиксели экрана коэффициентом
	`canvas.clientWidth / canvas.width`. Стоит рамке оказаться шире
	холста — и точки уезжают от углов пола, причем сама разметка при этом
	верная. Искать причину такого расхождения посетитель не станет.

	Поэтому: рамка — `inline-block` (ширина по содержимому), холст —
	`width: auto` с двумя потолками. Ни `width: 100%`, ни `object-fit`
	здесь недопустимы: первое ломает пропорции снимка, второе оставляет
	`clientWidth` прежним и врет коэффициенту
*/
.stt__stage {
	display: flex;
	justify-content: center;
}

/*
	РАМКА НЕ РЕЖЕТ СОДЕРЖИМОЕ (исправлено 2026-08-22).

	Было `overflow: hidden` — и точки, стоящие у самого края кадра,
	обрезались ровно наполовину: ухватить их было физически нельзя,
	а нижние углы пола почти всегда стоят именно там. Скругление
	перенесено НА ХОЛСТ, где ему и место, а рамка снова пропускает
	все, что вылезает за нее
*/
.stt__frame {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.stt__canvas {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	/* Полная высота снимка не должна выталкивать панель управления
	   за край окна: вертикальный кадр иначе занимает его целиком */
	max-height: 62vh;
	border-radius: 10px;
	background: #0d0f12;
}

/* СЕТКА РАЗМЕТКИ ПОЛА. `viewBox` задает скрипт в пикселях фотографии,
   поэтому линия не толстеет и не тончает от размера окна */
.stt__net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.stt__net polygon {
	fill: rgba(47, 111, 237, 0.16);
	stroke: #ffffff;
	stroke-width: 3;
	stroke-dasharray: 12 8;
	vector-effect: non-scaling-stroke;
}

.stt__pins {
	position: absolute;
	inset: 0;
}

/*
	ТОЧКА УГЛА.

	РАЗМЕР ВЗЯТ ПОД ПАЛЕЦ, А НЕ ПОД КУРСОР: 28 пикселей — нижняя граница
	комфортной цели на телефоне, а именно с телефона и приходят
	фотографии комнат. `touch-action: none` обязателен — без него
	перетаскивание уезжает в прокрутку страницы на первом же движении
*/
.stt__pin {
	position: absolute;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid #ffffff;
	border-radius: 50%;
	background: var(--stt-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	cursor: grab;
	touch-action: none;
}

.stt__pin--drag {
	cursor: grabbing;
	transform: scale(1.15);
}

/*
	ПЛЮС МЕЖДУ ТОЧКАМИ — ДОБАВИТЬ УГОЛ.

	МЕНЬШЕ И ПРИГЛУШЕННЕЕ САМОЙ ТОЧКИ, и это не экономия места:
	перетаскивание — основное действие, добавление — редкое. Сделай их
	одного веса, и палец начнет промахиваться в «плюс» там, где хотел
	подвинуть угол
*/
.stt__add {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: rgba(12, 14, 18, 0.55);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
	touch-action: none;
}

.stt__add:hover {
	opacity: 1;
	background: var(--stt-accent);
}

/* ==== ОЖИДАНИЕ ОТВЕТА НЕЙРОСЕТИ ==== */

.stt__busy {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: rgba(12, 14, 18, 0.62);
	color: #ffffff;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

.stt__spin {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: stt-spin 0.8s linear infinite;
}

@keyframes stt-spin {
	to { transform: rotate(360deg); }
}

/* Просьбу уменьшить движение уважаем: вращение — единственная
   анимация окна, и без нее оно остается работоспособным */
@media (prefers-reduced-motion: reduce) {
	.stt__spin {
		animation: none;
	}
}

/* ==== ОШИБКА ==== */

.stt__err {
	margin-top: 14px;
	padding: 10px 12px;
	border: 1px solid rgba(220, 53, 69, 0.35);
	border-radius: 10px;
	background: rgba(220, 53, 69, 0.08);
	color: #b02a37;
	font-size: 13px;
}

/* ==== ПАНЕЛЬ УПРАВЛЕНИЯ ==== */

.stt__tools {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px 20px;
	padding: 14px 18px;
	border-top: 1px solid var(--stt-line);
}

/* Ряд раскладок занимает всю ширину: чипсов бывает шесть,
   и в колонке они переносились бы по одному */
.stt__row:first-child:has(.stt__chips) {
	grid-column: 1 / -1;
}

.stt__row-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}

.stt__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--stt-muted);
}

.stt__value {
	font-size: 12px;
	color: var(--stt-muted);
	font-variant-numeric: tabular-nums;
}

.stt__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.stt__chip {
	padding: 6px 12px;
	border: 1px solid var(--stt-line);
	border-radius: 999px;
	background: transparent;
	color: var(--stt-fg);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.stt__chip:hover {
	border-color: var(--stt-accent);
}

.stt__chip--on {
	border-color: var(--stt-accent);
	background: var(--stt-accent);
	color: var(--stt-accent-fg);
}

.stt__range {
	width: 100%;
	accent-color: var(--stt-accent);
}

/* ==== ПОДВАЛ ==== */

.stt__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px;
	border-top: 1px solid var(--stt-line);
}

.stt__foot-right {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.stt__btn {
	padding: 9px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.stt__btn--main {
	background: var(--stt-accent);
	color: var(--stt-accent-fg);
}

.stt__btn--ai {
	background: transparent;
	border-color: var(--stt-accent);
	color: var(--stt-accent);
}

.stt__btn--ghost {
	background: transparent;
	border-color: var(--stt-line);
	color: var(--stt-muted);
}

.stt__btn:hover {
	filter: brightness(0.96);
}

/* ==== ТЕЛЕФОН ==== */

@media (max-width: 640px) {
	.stt {
		padding: 0;
	}

	.stt__win {
		max-width: none;
		max-height: 100%;
		height: 100%;
		border-radius: 0;
	}

	.stt__canvas {
		max-height: 48vh;
	}

	.stt__tools {
		grid-template-columns: 1fr;
	}

	/* Подпись «Другое фото» на узком экране уезжает под кнопки:
	   в один ряд три кнопки не помещаются, а главная обязана
	   оставаться справа */
	.stt__foot {
		flex-wrap: wrap;
	}
}