/* 1pix Chat Widget — фронтенд-стили. Все цвета через CSS-переменные из настроек. */

.pixchat {
	position: fixed;
	z-index: var(--pixchat-z, 999995);
	--pixchat-header-height: 48px;
	font-family: inherit;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

/* Режим по умолчанию: иконка стоит ровно на верхней кромке будущей панели,
   то есть на высоте panel-height от низа экрана. Чат разворачивается от неё
   вниз и упирается в нижний край вьюпорта. */
/* Иконка опущена так, чтобы её центр совпал с центром крестика в шапке:
   одно и то же место под курсором открывает и закрывает чат без движения мыши. */
.pixchat--v-panel {
	bottom: calc(
		var(--pixchat-panel-height, 520px) + var(--pixchat-panel-bottom, 0px)
		- (var(--pixchat-header-height, 48px) + var(--pixchat-launcher-size, 44px)) / 2
	);
}

.pixchat--v-bottom { bottom: var(--pixchat-offset-y, 20px); }

/* Центрирование через margin, а не transform: transform на родителе сделал бы
   его containing block для position:fixed панели. */
.pixchat--v-center {
	top: calc(50% + var(--pixchat-center-shift, 0px));
	margin-top: calc(var(--pixchat-launcher-size, 44px) / -2);
}

.pixchat--right { right: var(--pixchat-offset-x, 10px); }
.pixchat--left  { left: var(--pixchat-offset-x, 10px); }

.pixchat *,
.pixchat *::before,
.pixchat *::after { box-sizing: border-box; }

.pixchat__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.pixchat__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ------------------------------------------------------------------ Лаунчер */

.pixchat__launcher {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pixchat-launcher-size, 44px);
	height: var(--pixchat-launcher-size, 44px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--pixchat-launcher-radius, 4px);
	background: var(--pixchat-launcher-bg, #133d65);
	color: var(--pixchat-launcher-icon, #fff);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(16, 32, 51, .22);
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.pixchat--right .pixchat__launcher { margin-left: auto; }

.pixchat__launcher:hover  { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 32, 51, .28); }
.pixchat__launcher:active { transform: translateY(0); }
.pixchat__launcher:focus-visible { outline: 2px solid var(--pixchat-launcher-bg); outline-offset: 3px; }

.pixchat__launcher-icon { display: flex; width: var(--pixchat-icon-scale, 68%); }
.pixchat__launcher svg { display: block; width: 100%; height: auto; }

/* Виджет спрятан, пока открыта мини-корзина / модалка темы. */
.pixchat.is-suppressed { pointer-events: none; }

.pixchat.is-suppressed .pixchat__launcher {
	opacity: 0;
	transform: scale(.85);
	pointer-events: none;
}

.pixchat.is-suppressed .pixchat__panel { display: none; }

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

/* Панель — fixed относительно вьюпорта во всех режимах: она не должна зависеть
   от положения иконки, чтобы всегда доставать до нижнего края экрана. */
.pixchat__panel {
	position: fixed;
	width: var(--pixchat-width, 320px);
	max-width: calc(100vw - 24px);
	height: var(--pixchat-panel-height, 520px);
	max-height: calc(100vh - var(--pixchat-panel-bottom, 0px) - 8px);
	max-height: calc(100dvh - var(--pixchat-panel-bottom, 0px) - 8px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--pixchat-panel-bg, #fff);
	border-radius: var(--pixchat-radius-top, 12px) var(--pixchat-radius-top, 12px) var(--pixchat-radius, 4px) var(--pixchat-radius, 4px);
	box-shadow: 0 -4px 32px rgba(16, 32, 51, .16), 0 2px 8px rgba(16, 32, 51, .08);
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease;
	color: var(--pixchat-text, #222222);
}

/* Основной режим: приклеены к низу, нижние углы без скругления. */
.pixchat--v-panel .pixchat__panel {
	bottom: var(--pixchat-panel-bottom, 0px);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	transform: translateY(14px);
}

.pixchat--v-bottom .pixchat__panel {
	bottom: calc(var(--pixchat-offset-y, 20px) + var(--pixchat-launcher-size, 44px) + 12px);
	max-height: calc(100dvh - var(--pixchat-launcher-size, 44px) - 48px);
	transform: translateY(8px);
}

.pixchat--v-center .pixchat__panel {
	top: 50%;
	max-height: calc(100dvh - 32px);
	transform: translateY(-50%) scale(.98);
}

.pixchat--v-center[data-state="open"] .pixchat__panel { transform: translateY(-50%) scale(1); }

/* Сторона панели задаётся отдельно от стороны иконки. */
.pixchat--panel-right .pixchat__panel { right: var(--pixchat-offset-x, 10px); left: auto; }
.pixchat--panel-left  .pixchat__panel { left: var(--pixchat-offset-x, 10px); right: auto; }

.pixchat[data-state="open"] .pixchat__panel { opacity: 1; transform: translateY(0); }
.pixchat--v-center[data-state="open"] .pixchat__panel { transform: translateY(-50%) scale(1); }

/* Открытая панель перекрывает место иконки — саму иконку убираем. */
.pixchat[data-state="open"] .pixchat__launcher {
	opacity: 0;
	pointer-events: none;
}

.pixchat__panel[hidden] { display: none; }

/* ------------------------------------------------------------------- Шапка */

.pixchat__header {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: var(--pixchat-header-height, 48px);
	padding: 10px 12px;
	background: var(--pixchat-header-bg, #b6c5d1);
	color: var(--pixchat-header-text, #fff);
	transition: background-color .18s ease;
}

.pixchat--screen-2 .pixchat__header { background: var(--pixchat-header-bg-form, #7f97ad); }

.pixchat__header-title {
	flex: 1 1 auto;
	text-align: center;
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
	/* -4% из макета: проценты в letter-spacing невалидны, em считается от font-size. */
	letter-spacing: -0.04em;
	color: inherit;
}

.pixchat__icon-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	border-radius: 3px;
	opacity: .95;
	-webkit-appearance: none;
	appearance: none;
}

.pixchat__icon-btn:hover { opacity: 1; background: rgba(255, 255, 255, .16); }
.pixchat__icon-btn[hidden] { display: none; }
.pixchat__back { order: -1; }

/* Резервируем место слева, когда кнопки «назад» нет — заголовок остаётся по центру. */
.pixchat__header::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 1px;
}

.pixchat--screen-2 .pixchat__header::before { display: none; }

/* -------------------------------------------------------------------- Тело */

.pixchat__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 18px 16px 40px;
	overflow-y: auto;
	/* Докрутив содержимое панели до конца, не тянем за собой страницу. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.pixchat__screen[hidden] { display: none; }

.pixchat__screen {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.pixchat__title {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
	color: var(--pixchat-text, #222222);
}

.pixchat__subtitle {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 18px;
	color: var(--pixchat-muted, #727272);
}

.pixchat .pixchat__textarea,
.pixchat .pixchat__input {
	width: 100%;
	padding: 11px 14px;
	font-family: inherit;
	/* 16px = размер плейсхолдера из макета; заодно iOS не зумит страницу при фокусе. */
	font-size: 16px;
	line-height: 20px;
	color: var(--pixchat-text, #222222);
	background: var(--pixchat-input-bg, #fff);
	border: 1px solid var(--pixchat-border, #d4d9df);
	border-radius: var(--pixchat-control-radius, 4px);
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Высота поля вопроса фиксирована: тянуть его нельзя, при длинном тексте
   появляется прокрутка внутри самого поля, вёрстка панели не разъезжается. */
.pixchat .pixchat__textarea {
	height: var(--pixchat-textarea-height, 240px);
	min-height: var(--pixchat-textarea-height, 240px);
	max-height: var(--pixchat-textarea-height, 240px);
	resize: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pixchat .pixchat__textarea::placeholder,
.pixchat .pixchat__input::placeholder {
	font-size: 16px;
	line-height: 20px;
	color: var(--pixchat-placeholder, #787b7f);
	opacity: 1;
}

.pixchat .pixchat__textarea:focus,
.pixchat .pixchat__input:focus {
	outline: none;
	border-color: var(--pixchat-btn-bg, #133d65);
	box-shadow: 0 0 0 2px rgba(18, 58, 94, .1);
}

/* Поля и кнопка одной высоты — 48px по макету. */
.pixchat .pixchat__input {
	height: var(--pixchat-control-height, 48px);
	padding-top: 0;
	padding-bottom: 0;
}

.pixchat__field { margin-bottom: 12px; }
.pixchat__field--message { margin-bottom: 14px; }

.pixchat .pixchat__input.is-invalid,
.pixchat .pixchat__textarea.is-invalid {
	border: 1px solid var(--pixchat-error, #cf2e2e);
	box-shadow: none;
}

.pixchat__error {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 18px;
	color: var(--pixchat-error, #cf2e2e);
}

.pixchat__error[hidden] { display: none; }
.pixchat__errors {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 8px;
}

.pixchat__errors[hidden] { display: none; }
.pixchat__errors .pixchat__error { margin-top: 0; }

/* ------------------------------------------------------------------ Кнопки */

.pixchat .pixchat__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 100%;
	height: var(--pixchat-control-height, 48px);
	margin-top: auto;
	padding: 0 24px;
	font-family: inherit;
	font-size: 18px;
	line-height: 20px;
	font-weight: 700;
	text-align: center;
	color: var(--pixchat-btn-text, #fff);
	background: var(--pixchat-btn-bg, #133d65);
	border: 0;
	border-radius: var(--pixchat-control-radius, 4px);
	cursor: pointer;
	transition: background-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.pixchat__btn:hover:not(:disabled) { background: var(--pixchat-btn-hover, #0e2e4c); }

/* Многие темы гасят disabled-кнопки прозрачностью — из-за этого серая
   неактивная кнопка выглядела бледнее макета. Держим цвет как задан. */
.pixchat .pixchat__btn:disabled,
.pixchat .pixchat__btn.is-loading {
	opacity: 1 !important;
	background: var(--pixchat-btn-disabled-bg, #dee1e3);
	color: var(--pixchat-btn-disabled-text, #ffffff);
	cursor: default;
}

.pixchat__screen--2 .pixchat__btn { margin-top: auto; }
.pixchat__screen--2 .pixchat__field:last-of-type { margin-bottom: 4px; }

/* --------------------------------------------------------------- Спасибо */

.pixchat__thanks {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 26px 6px 34px;
}

.pixchat__check { display: block; margin-bottom: 16px; }
.pixchat__check svg { display: block; }

.pixchat__thanks-title {
	margin: 0 0 8px;
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
	color: var(--pixchat-text, #222222);
}

.pixchat__thanks-line1 {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 20px;
	color: var(--pixchat-text, #222222);
}

.pixchat__thanks-line2 {
	margin: 0;
	font-size: 14px;
	line-height: 18px;
	color: var(--pixchat-muted, #727272);
}

/* -------------------------------------------------------------- Мобильные */

@media (max-width: 600px) {
	/* Мобильные: во всю ширину экрана, без боковых отступов, приклеены к низу. */
	.pixchat .pixchat__panel,
	.pixchat--v-panel .pixchat__panel,
	.pixchat--v-center .pixchat__panel,
	.pixchat--v-bottom .pixchat__panel {
		top: auto;
		right: 0;
		left: 0;
		bottom: var(--pixchat-panel-bottom, 0px);
		width: 100%;
		max-width: none;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		transform: translateY(14px);
	}

	.pixchat[data-state="open"] .pixchat__panel,
	.pixchat--v-panel[data-state="open"] .pixchat__panel,
	.pixchat--v-center[data-state="open"] .pixchat__panel,
	.pixchat--v-bottom[data-state="open"] .pixchat__panel {
		transform: translateY(0);
	}

	.pixchat__body { padding: 18px 16px 40px; }
	.pixchat__header-title { font-size: 16px; line-height: 20px; }
	.pixchat__title { font-size: 18px; }
}

@media (max-width: 360px) {
	.pixchat__subtitle { margin-bottom: 12px; }
}

/* Страховка: если класс блокировки остался от прошлой версии — нейтрализуем. */
body.pixchat-locked { overflow: visible !important; }

@media (prefers-reduced-motion: reduce) {
	.pixchat__panel,
	.pixchat__launcher,
	.pixchat__header { transition: none; }
}