/* ==========================================================================
   Видео-генерация в статье и на хабе (ai/video.php, js/blog-ai-video.js).
   Обычный блок в потоке статьи: у видео нет закреплённой панели картинок —
   форма длинная (режим, версия, длительность, файлы), и прятать её в строку
   у нижней кромки окна некуда.
   ========================================================================== */

.blog-ai-video {
	margin: 24px 0;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--tt-stroke, #CCD3DF);
	border-radius: var(--tt-radius-card, 15px);
	color: var(--tt-h1, #11101C);
	scroll-margin-top: 100px;   /* под закреплённой шапкой сайта */
	position: relative;   /* подсказка по наведению ставится от виджета */
}
.blog-ai-video__title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}
/* Нейросеть в заголовке — переключатель: «Создать видео в Kling Video ▾» */
.blog-ai-video__model { display: inline-block; vertical-align: baseline; }
.blog-ai-video__model-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0 0 1px;
	border: 0;
	border-bottom: 2px dashed rgba(246, 12, 43, .45);
	background: none;
	font: inherit;
	color: var(--tt-accent, #F60C2B);
	cursor: pointer;
	text-align: left;
}
.blog-ai-video__model-btn:hover { border-bottom-color: var(--tt-accent, #F60C2B); }
.blog-ai-video__model-btn:focus-visible { outline: 2px solid var(--tt-accent, #F60C2B); outline-offset: 3px; border-radius: 4px; }
.blog-ai-video__model-btn.is-loading { opacity: .5; cursor: progress; }
.blog-ai-video__model-arrow {
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border: solid currentColor;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}
.blog-ai-video__menu--models { font-weight: 400; line-height: 1.3; }
.blog-ai-video__opt.blog-ai-video__opt--model { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; }
.blog-ai-video__opt-p { font-size: 12px; color: var(--tt-h4, #9CA2AD); white-space: nowrap; }

.blog-ai-video__lead,
.blog-ai-video__note {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--tt-h3, #5B5C66);
}
.blog-ai-video__note {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--tt-h4, #9CA2AD);
}

/* Рамка промпта: текст, под ним чипсы «✎ По тексту ⧉ v2.5 ▭ 720p … ♪» и строка
   остальных параметров. Кнопка «Создать» — под рамкой во всю ширину. */
.blog-ai-video__box {
	position: relative;
	margin-bottom: 10px;
	padding: 12px;
	border: 1px solid var(--tt-stroke, #CCD3DF);
	border-radius: var(--tt-radius-card, 15px);
	background: #fff;
	transition: border-color .15s linear;
}
.blog-ai-video__box:focus-within { border-color: var(--tt-h4, #9CA2AD); }

.blog-ai-video__prompt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 10px;
}
.blog-ai-video__prompt[hidden] { display: none; }
.blog-ai-video__prompt textarea {
	width: 100%;
	min-height: 84px;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	color: inherit;
	resize: vertical;
}

.blog-ai-video__opts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	min-width: 0;
}
.blog-ai-video__opts:empty { display: none; }
.blog-ai-video__dropdown { position: relative; min-width: 0; }

/* Чипс: иконка + значение, у режима — «Режим: значение» */
.blog-ai-video__pick {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	height: 32px;
	padding: 0 8px;
	border: 1px solid transparent;
	border-radius: var(--tt-radius-pill, 90px);
	background: #F2F6FA;
	color: var(--tt-h2, #30333B);
	font: inherit;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s linear, background-color .15s linear;
}
.blog-ai-video__pick:hover,
.blog-ai-video__pick[aria-expanded=true] { border-color: var(--tt-stroke, #CCD3DF); background: #E9EEF5; }
.blog-ai-video__pick-k { font-weight: 600; color: var(--tt-h3, #5B5C66); white-space: nowrap; }
.blog-ai-video__pick-v {
	min-width: 0;
	max-width: 180px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.blog-ai-video__pick::after {
	content: '';
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	margin: -3px 0 0 0;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg);
	opacity: .7;
}
.blog-ai-video__pick[aria-expanded=true]::after { margin-top: 3px; transform: rotate(-135deg); }
.blog-ai-video__ico { display: inline-flex; flex: 0 0 auto; color: var(--tt-h3, #5B5C66); }
.blog-ai-video__ico svg { display: block; width: 15px; height: 15px; }

/* Переключатель-иконка: ♪ звук, HD. Выключен — серый и перечёркнут */
.blog-ai-video__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid transparent;
	border-radius: var(--tt-radius-pill, 90px);
	background: #F2F6FA;
	color: var(--tt-h4, #9CA2AD);
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	transition: border-color .15s linear, background-color .15s linear, color .15s linear;
}
.blog-ai-video__toggle .blog-ai-video__ico { color: inherit; }
.blog-ai-video__toggle:not(.is-on)::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 2px;
	margin: -1px 0 0 -10px;
	border-radius: 1px;
	background: currentColor;
	box-shadow: 0 0 0 1.5px #F2F6FA;
	transform: rotate(-45deg);
}
.blog-ai-video__toggle:hover { border-color: var(--tt-stroke, #CCD3DF); }
/* Переключатель надписью («HD»): без перечёркивания, выключен — серый */
.blog-ai-video__toggle--text { padding: 0 10px; font-size: 13px; }
.blog-ai-video__toggle--text:not(.is-on)::after { content: none; }
.blog-ai-video__toggle.is-on {
	background: #FFE7EA;
	color: var(--tt-accent, #F60C2B);
}

/* Подсказка по наведению */
.blog-ai-video__tip {
	position: absolute;
	z-index: 30;
	max-width: min(320px, calc(100% - 16px));
	padding: 8px 10px;
	border-radius: var(--tt-radius-sm, 8px);
	background: var(--tt-h1, #11101C);
	color: #fff;
	font-size: 12px;
	line-height: 1.45;
	white-space: pre-line;
	pointer-events: none;
	box-shadow: 0 6px 20px rgba(17, 16, 28, .2);
}
.blog-ai-video__tip[hidden] { display: none; }
.blog-ai-video__tip b { display: block; font-size: 13px; }
.blog-ai-video__tip span { display: block; white-space: pre-line; }
.blog-ai-video__tip b + span { margin-top: 2px; color: rgba(255, 255, 255, .82); }

/* Список чипса; у режима у каждого пункта своё описание */
.blog-ai-video__menu {
	position: absolute;
	z-index: 20;
	left: 0;
	top: calc(100% + 6px);
	min-width: 100%;
	width: max-content;
	max-width: min(320px, calc(100vw - 48px));
	max-height: 360px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	background: #fff;
	border: 1px solid var(--tt-stroke, #CCD3DF);
	border-radius: var(--tt-radius-sm, 8px);
	box-shadow: 0 10px 30px rgba(17, 16, 28, .14);
}
.blog-ai-video__menu--wide { width: min(400px, calc(100vw - 48px)); max-width: none; }
.blog-ai-video__menu.is-right { left: auto; right: 0; }
.blog-ai-video__menu[hidden] { display: none; }
.blog-ai-video__opt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	outline: 0;
}
.blog-ai-video__opt + .blog-ai-video__opt { margin-top: 2px; }
.blog-ai-video__opt:hover,
.blog-ai-video__opt:focus { background: #F2F6FA; }
.blog-ai-video__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--tt-h4, #9CA2AD); }
.blog-ai-video__opt-t {
	font-size: 14px;
	font-weight: 700;
	color: var(--tt-h2, #30333B);
	white-space: nowrap;
}
.blog-ai-video__opt.is-active .blog-ai-video__opt-t { color: var(--tt-accent, #F60C2B); }
/* Голос: имя слева, «▶ послушать» справа */
.blog-ai-video__opt.blog-ai-video__opt--voice { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.blog-ai-video__listen {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #FFE7EA;
	color: var(--tt-accent, #F60C2B);
	cursor: pointer;
}
.blog-ai-video__listen:hover,
.blog-ai-video__listen.is-playing { background: var(--tt-accent, #F60C2B); color: #fff; }
.blog-ai-video__opt.is-active .blog-ai-video__opt-t::after { content: ' ✓'; }
.blog-ai-video__opt-d {
	font-size: 12px;
	line-height: 1.4;
	white-space: pre-line;
	color: var(--tt-h3, #5B5C66);
}

/* Остальное (длительность, черновик…) — строкой в рамке под чипсами */
.blog-ai-video__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin: 10px 0 0;
	padding: 10px 2px 0;
	border-top: 1px solid #EDF1F6;
}
.blog-ai-video__fields[hidden] { display: none; }

.blog-ai-video__field {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	margin: 0;
	font-size: 14px;
}
.blog-ai-video__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
}
.blog-ai-video__check input { margin: 0; accent-color: var(--tt-accent, #F60C2B); }
.blog-ai-video__label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--tt-h3, #5B5C66);
	white-space: nowrap;
}
.blog-ai-video__field .blog-ai-video__label { display: inline-flex; font-size: 14px; }
.blog-ai-video__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.blog-ai-video__info {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid var(--tt-h4, #9CA2AD);
	border-radius: 50%;
	background: #fff;
	color: var(--tt-h3, #5B5C66);
	font: italic 700 11px/1 Georgia, serif;
	cursor: help;
}
.blog-ai-video__info:hover,
.blog-ai-video__info:focus-visible {
	border-color: var(--tt-accent, #F60C2B);
	color: var(--tt-accent, #F60C2B);
}
.blog-ai-video__field--input { flex: 1 1 280px; }
.blog-ai-video__field input[type=text] {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--tt-stroke, #CCD3DF);
	border-radius: var(--tt-radius-sm, 8px);
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: inherit;
}
.blog-ai-video__range {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 4px;
}
.blog-ai-video__range input { width: 150px; min-width: 0; margin: 0; accent-color: var(--tt-accent, #F60C2B); }
.blog-ai-video__range output {
	min-width: 34px;
	font-weight: 700;
	white-space: nowrap;
}

/* Файлы */
.blog-ai-video__media {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}
.blog-ai-video__media:empty { display: none; }
.blog-ai-video__file {
	display: flex;
	flex: 1 1 220px;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
/* Зона загрузки — заметная: пунктир фирменного цвета, иконка в круге */
.blog-ai-video__file-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 12px 16px;
	border: 2px dashed rgba(246, 12, 43, .45);
	border-radius: var(--tt-radius, 12px);
	background: #FFF6F7;
	color: var(--tt-h2, #30333B);
	cursor: pointer;
	margin: 0;
	transition: border-color .15s linear, background-color .15s linear;
}
.blog-ai-video__file-btn:hover,
.blog-ai-video__file-btn.is-drag { border-color: var(--tt-accent, #F60C2B); background: #FFECEF; }
.blog-ai-video__file-btn:focus-visible { outline: 2px solid var(--tt-accent, #F60C2B); outline-offset: 2px; }
.blog-ai-video__file-btn.is-filled { border-style: solid; border-color: var(--tt-stroke, #CCD3DF); background: #F7F9FC; }
.blog-ai-video__file-ico {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--tt-accent, #F60C2B);
	box-shadow: 0 1px 3px rgba(17, 16, 28, .08);
}
.blog-ai-video__file-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blog-ai-video__file-t { font-size: 15px; font-weight: 700; line-height: 1.3; }
.blog-ai-video__file-s { font-size: 12px; line-height: 1.35; color: var(--tt-h4, #9CA2AD); }
.blog-ai-video__file-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.blog-ai-video__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 240px;
	padding: 2px 4px 2px 10px;
	border-radius: var(--tt-radius-pill, 90px);
	background: var(--tt-bg-soft, #E4E9F1);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.blog-ai-video__chip-x {
	border: 0;
	background: none;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: var(--tt-h3, #5B5C66);
}

.blog-ai-video__error {
	margin: 0 0 12px;
	color: var(--tt-accent, #F60C2B);
	font-size: 14px;
}
.blog-ai-video__error[hidden] { display: none; }
.blog-ai-video__tariffs { margin-left: 4px; padding: 4px 14px; font-size: 14px; }

.blog-ai-video__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}
.blog-ai-video__submit {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 11px 18px;
	font-size: 16px;
	white-space: nowrap;
}
.blog-ai-video__submit[disabled] { opacity: .6; cursor: progress; }
.blog-ai-video__price:not(:empty) { margin-left: 8px; }
.blog-ai-video__promo { font-size: 14px; }
.blog-ai-video__form.is-busy .blog-ai-video__fields,
.blog-ai-video__form.is-busy .blog-ai-video__opts,
.blog-ai-video__form.is-busy .blog-ai-video__media { opacity: .6; pointer-events: none; }

/* Результат */
.blog-ai-video__result { margin-top: 18px; }
.blog-ai-video__result[hidden] { display: none; }
.blog-ai-video__player {
	display: block;
	width: 100%;
	max-height: 70vh;
	border-radius: var(--tt-radius-sm, 8px);
	background: #000;
}
/* Под роликом: плашки (нейросеть, длительность, размер, списано) и «Скачать» */
.blog-ai-video__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 10px 0 0;
	padding: 12px;
	border-radius: var(--tt-radius-sm, 8px);
	background: #F7F9FC;
}
.blog-ai-video__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.blog-ai-video__fact {
	padding: 5px 10px;
	border-radius: var(--tt-radius-pill, 90px);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--tt-stroke, #CCD3DF);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--tt-h2, #30333B);
	white-space: nowrap;
}
.blog-ai-video__fact[hidden] { display: none; }
.blog-ai-video__download .blog-ai-video__ico { color: inherit; }
.blog-ai-video__done-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-ai-video__cabinet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--tt-h4, #9CA2AD);
	background: #fff;
	color: var(--tt-h1, #11101C);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}
.blog-ai-video__cabinet:hover,
.blog-ai-video__cabinet:focus-visible { border-color: var(--tt-h2, #30333B); background: #F2F6FA; color: var(--tt-h1, #11101C); }
.blog-ai-video__cabinet .blog-ai-video__ico { color: inherit; }
.blog-ai-video__fact--model { background: #FFE7EA; box-shadow: none; color: var(--tt-accent, #F60C2B); }
.blog-ai-video__download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}
.blog-ai-video__wait {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border-radius: var(--tt-radius-sm, 8px);
	background: #F7F9FC;
	font-size: 14px;
}
.blog-ai-video__spinner {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border: 3px solid var(--tt-bg-soft, #E4E9F1);
	border-top-color: var(--tt-accent, #F60C2B);
	border-radius: 50%;
	animation: blog-ai-video-spin 1s linear infinite;
}
@keyframes blog-ai-video-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.blog-ai-video__spinner { animation-duration: 3s; }
}

/*
  Телефон. Чипсы — одной строкой с прокруткой вбок (а не в три ряда),
  списки чипсов и нейросетей — шторкой снизу экрана: в прокручиваемой
  строке выпадающее меню обрезалось бы. Кнопки — под палец (36–44px).
*/
@media (max-width: 575px) {
	.blog-ai-video { padding: 14px; margin-left: -4px; margin-right: -4px; }
	.blog-ai-video__title { font-size: 19px; }
	.blog-ai-video__lead { font-size: 13px; margin-bottom: 12px; }
	.blog-ai-video__box { padding: 10px 10px 10px; }

	.blog-ai-video__opts {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 -10px;
		padding: 0 10px 2px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		/* край строки тает — видно, что чипсы листаются дальше */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	}
	.blog-ai-video__opts::-webkit-scrollbar { display: none; }
	.blog-ai-video__opts > * { flex: none; }
	.blog-ai-video__pick { height: 36px; padding: 0 10px; }
	.blog-ai-video__toggle { min-width: 36px; height: 36px; }

	.blog-ai-video__menu,
	.blog-ai-video__menu.is-right,
	.blog-ai-video__menu--wide {
		position: fixed;
		z-index: 1000;
		left: 8px;
		right: 8px;
		top: auto;
		bottom: 8px;
		width: auto;
		min-width: 0;
		max-width: none;
		max-height: 65vh;
		padding: 8px;
		border-radius: 16px;
		box-shadow: 0 0 0 100vmax rgba(17, 16, 28, .35), 0 8px 24px rgba(17, 16, 28, .2);
	}
	.blog-ai-video__opt { padding: 12px; }
	.blog-ai-video__listen { width: 36px; height: 36px; }

	.blog-ai-video__fields { gap: 10px 16px; }
	.blog-ai-video__range input { width: 120px; }

	.blog-ai-video__file-btn { min-height: 56px; padding: 10px 12px; gap: 10px; }
	.blog-ai-video__file-ico { width: 36px; height: 36px; }
	.blog-ai-video__file-t { font-size: 14px; }
	.blog-ai-video__file-dnd { display: none; }

	.blog-ai-video__submit { padding: 12px 16px; }

	.blog-ai-video__meta { flex-direction: column; align-items: stretch; padding: 10px; }
	.blog-ai-video__done-actions { flex-direction: column-reverse; }
	.blog-ai-video__download,
	.blog-ai-video__cabinet { width: 100%; }
}


/* Хаб после смены нейросети без статей: вместо списка руководств — пометка */
.hub__empty {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--tt-radius-sm, 8px);
	background: #F7F9FC;
	font-size: 15px;
	line-height: 1.5;
	color: #44596D;
}