/* Анимация блока заявки #cta_form — 05.09.2026.
   Подключается из functions.php (lc_cta_assets) вместе с js/lc-cta.js на шаблонах
   с формой (lc_has_cta_form). Левая колонка появляется каскадом при прокрутке,
   картинка чата 04_form_feedback.png в правой рамке заменяется живым чатом
   тех же размеров (613×650, масштаб под рамку через --lcs).
   Без JS ничего не скрывается: правила раздела 1 действуют только при классе
   lc-cta-js, который ставит скрипт. Откат: убрать lc_cta_assets в functions.php. */

/* 1. Появление левой колонки. Порядок и задержки задаёт скрипт (transition-delay). */
#cta_form.lc-cta-js .lc-rv {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
#cta_form.lc-cta-js .form_media.lc-rv { transform: translateY(18px) scale(.97); }
#cta_form.lc-cta-js.lc-on .lc-rv { opacity: 1; transform: none; }

/* 2. Блик, медленно плывущий по синей рамке. Лежит между фоном рамки (фон элемента)
   и белой карточкой (:before, z-index 1). */
#cta_form .form_media { overflow: hidden; }
#cta_form .form_media::after {
	content: '';
	position: absolute;
	z-index: 0;
	left: -20%;
	top: -20%;
	width: 140%;
	height: 140%;
	pointer-events: none;
	background: radial-gradient(ellipse 34% 26% at 50% 50%, rgba(255,255,255,.32), rgba(255,255,255,0) 100%);
	animation: lcGlow 16s ease-in-out infinite alternate;
}
@keyframes lcGlow {
	from { transform: translate(-24%, -22%); }
	to   { transform: translate(24%, 22%); }
}

/* 3. Живой чат. Сначала снимаем правило темы «#cta_form .form_media *»
   (position: relative; z-index: 3; border-radius: 40px / 12px), потом свои стили. */
#cta_form .form_media .lcchat,
#cta_form .form_media .lcchat * {
	position: static;
	z-index: auto;
	border-radius: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
#cta_form .form_media .lcchat {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	width: 613px;
	height: 650px;
	margin: -325px 0 0 -306.5px;
	transform: scale(var(--lcs, 1));
	overflow: hidden;
	border-radius: 24px;
	background: #fff;
	font-family: SFPro, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.2;
	color: #152237;
	text-align: left;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Лента сообщений */
#cta_form .form_media .lcchat .lcchat__log {
	position: absolute;
	left: 22px;
	right: 24px;
	top: 33px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}
#cta_form .form_media .lcchat .lcchat__msg {
	display: none;
	max-width: 392px;
	padding: 15px 16px;
	border-radius: 12px;
	background: #EDF0F3;
	color: #152237;
	font-size: 17px;
	line-height: 1.2;
	opacity: 0;
	transform: translateY(12px) scale(.94);
	transform-origin: 0 100%;
	transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
#cta_form .form_media .lcchat .lcchat__msg--user {
	align-self: flex-end;
	background: #0070F3;
	color: #fff;
	transform-origin: 100% 100%;
}
#cta_form .form_media .lcchat .lcchat__msg.lc-vis { display: block; }
#cta_form .form_media .lcchat .lcchat__msg.lc-in { opacity: 1; transform: none; }

/* «Собеседник печатает» */
#cta_form .form_media .lcchat .lcchat__typing {
	display: none;
	gap: 5px;
	padding: 18px 16px;
	border-radius: 12px;
	background: #EDF0F3;
}
#cta_form .form_media .lcchat .lcchat__typing.lc-vis {
	display: inline-flex;
	animation: lcPop .3s ease-out;
}
#cta_form .form_media .lcchat .lcchat__typing i {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #9CAAC2;
	animation: lcDot 1.1s ease-in-out infinite;
}
#cta_form .form_media .lcchat .lcchat__typing i:nth-child(2) { animation-delay: .15s; }
#cta_form .form_media .lcchat .lcchat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes lcDot {
	0%, 60%, 100% { transform: translateY(0); opacity: .5; }
	30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes lcPop {
	from { opacity: 0; transform: translateY(8px) scale(.94); }
}

/* Строка ввода с прикреплёнными резюме */
#cta_form .form_media .lcchat .lcchat__bar {
	position: absolute;
	left: 22px;
	right: 24px;
	top: 445px;
	height: 187px;
	padding: 18px 24px 0 26px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 -6px 28px rgba(21,34,55,.06), 0 4px 16px rgba(21,34,55,.05), 0 0 0 1px rgba(21,34,55,.035);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
#cta_form .form_media .lcchat .lcchat__bar.lc-in { opacity: 1; transform: none; }

#cta_form .form_media .lcchat .lcchat__prompt {
	display: flex;
	align-items: flex-start;
	gap: 17px;
	min-height: 46px;
}
#cta_form .form_media .lcchat .lcchat__pico {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: #9CAAC2;
}
#cta_form .form_media .lcchat .lcchat__pico svg { display: block; width: 20px; height: 20px; }
#cta_form .form_media .lcchat .lcchat__ptext {
	flex: 1 1 auto;
	min-height: 45px;
	font-size: 15px;
	line-height: 1.5;
	color: #152237;
	word-break: normal;
	overflow-wrap: anywhere;
}
#cta_form .form_media .lcchat .lcchat__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 3px;
	color: #9CAAC2;
	vertical-align: -3px;
	white-space: nowrap;
	opacity: 0;
	transform: scale(.85);
	transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
#cta_form .form_media .lcchat .lcchat__chip.lc-in { opacity: 1; transform: none; }
#cta_form .form_media .lcchat .lcchat__chip svg { display: block; width: 14px; height: 16px; }
#cta_form .form_media .lcchat .lcchat__caret {
	display: inline-block;
	width: 1.5px;
	height: 15px;
	margin-left: 1px;
	background: #152237;
	vertical-align: -2px;
	animation: lcCaret 1s steps(2, start) infinite;
}
#cta_form .form_media .lcchat .lcchat__caret.lc-off { display: none; }
@keyframes lcCaret { 50% { opacity: 0; } }

#cta_form .form_media .lcchat .lcchat__files {
	display: flex;
	gap: 40px;
	height: 40px;
	margin-top: 16px;
}
#cta_form .form_media .lcchat .lcchat__file {
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
#cta_form .form_media .lcchat .lcchat__file.lc-in { opacity: 1; transform: none; }
#cta_form .form_media .lcchat .lcchat__fico { flex: 0 0 28px; width: 28px; height: 40px; }
#cta_form .form_media .lcchat .lcchat__fico svg { display: block; width: 28px; height: 40px; }
#cta_form .form_media .lcchat .lcchat__fname {
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: #152237;
	white-space: nowrap;
}
#cta_form .form_media .lcchat .lcchat__ftype {
	display: block;
	margin-top: 4px;
	font-size: 9px;
	line-height: 1.2;
	color: #A8B5CA;
}

#cta_form .form_media .lcchat .lcchat__foot {
	display: flex;
	align-items: center;
	height: 40px;
	margin-top: 16px;
}
#cta_form .form_media .lcchat .lcchat__clip {
	flex: 0 0 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #EDF0F3;
	color: #152237;
}
#cta_form .form_media .lcchat .lcchat__clip svg { display: block; width: 15px; height: 15px; }
#cta_form .form_media .lcchat .lcchat__models {
	flex: 0 0 132px;
	width: 132px;
	height: 36px;
	margin-left: 18px;
	background: url(img/lc-cta-models.png) no-repeat 0 0 / 132px 36px;
}
#cta_form .form_media .lcchat .lcchat__demo {
	display: flex;
	align-items: center;
	height: 40px;
	margin-left: auto;
	padding: 0 16px;
	border-radius: 8px;
	background: #EDF0F3;
	color: #152237;
	font-size: 15px;
	white-space: nowrap;
}
#cta_form .form_media .lcchat .lcchat__demo.lc-pulse { animation: lcPulse 1s cubic-bezier(.2,.8,.2,1) 1; }
@keyframes lcPulse {
	0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(0,112,243,.45); }
	40%  { transform: scale(1.06); }
	100% { transform: scale(1);    box-shadow: 0 0 0 14px rgba(0,112,243,0); }
}

/* Между циклами: реплики и запрос гаснут, потом набираются заново */
#cta_form .form_media .lcchat.lc-out .lcchat__log,
#cta_form .form_media .lcchat.lc-out .lcchat__ptext,
#cta_form .form_media .lcchat.lc-out .lcchat__files {
	opacity: 0;
	transition: opacity .4s ease;
}

/* Кому движение мешает — сразу конечное состояние, без движения */
@media (prefers-reduced-motion: reduce) {
	#cta_form.lc-cta-js .lc-rv { opacity: 1; transform: none; transition: none; }
	#cta_form .form_media::after { animation: none; }
	#cta_form .form_media .lcchat * { animation: none !important; transition: none !important; }
}