/* ==========================================================================
   Бесплатная ИИ-генерация из статьи — обвязка вокруг компонентов макета.
   ТЗ: docs/TZ-blog-ai-generation.md, §6.

   Здесь только то, чего в макете нет: секция вокруг виджета, sticky-обёртка
   кнопки, список выбранных файлов, промо-блок и текст ошибки. Компоненты
   design/components/* не правим — их классы .tt-* остаются слепком макета
   (design/README.md, «Правила при доработке»).

   Требует: design/tokens.css, design/components/buttons.css,
            design/components/generation-widget.css
   ========================================================================== */

.blog-ai {
	margin: 28px 0;
	font-family: var(--tt-font-ui);
	scroll-margin-top: 24px;
}

.blog-ai__head {
	margin-bottom: 14px;
}

.blog-ai__title {
	margin: 0 0 4px;
	font: var(--tt-t-24b);
	color: var(--tt-h1);
}

.blog-ai__lead {
	margin: 0;
	font: var(--tt-t-14m);
	color: var(--tt-h3);
}

/* Плашка для автора: статья ещё не опубликована */
.blog-ai__draft-note {
	margin: 8px 0 0;
	padding: 8px 12px;
	font: var(--tt-t-12m);
	color: var(--tt-h2);
	background: var(--tt-yellow);
	border-radius: var(--tt-radius-sm);
}

/* Виджет по макету — 465px; в узкой колонке статьи растягиваем по месту. */
.blog-ai__widget {
	max-width: 560px;
}

/* --------------------------------------------------------------------------
   Тело виджета. Фон, паддинги и радиус берём из компонента как есть — здесь
   только зазор между экраном состояния и промо-блоком, которого в макете нет.
   -------------------------------------------------------------------------- */

.blog-ai__widget .tt-gen__body {
	gap: 12px;
}

/* Пилюли «Нейросеть» и «Режим» у нас справочные, а не селекты: из статьи
   разрешена одна модель. Убираем курсор и ховер, чтобы не выглядели кнопками. */
.blog-ai__widget .tt-gen__control {
	cursor: default;
}

.blog-ai__widget .tt-gen__control:hover {
	background: var(--tt-bg);
}

/* --------------------------------------------------------------------------
   Выбранные файлы
   -------------------------------------------------------------------------- */

.blog-ai-files {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tt-gap-tag);
	width: 100%;
}

.blog-ai-files__item {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: var(--tt-radius-img);
	overflow: hidden;
	background: var(--tt-placeholder);
}

.blog-ai-files__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-ai-files__drop {
	position: absolute;
	top: 2px;
	right: 2px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 18px;
	height: 18px;
	padding: 0;

	color: var(--tt-bg);
	font: var(--tt-t-10m);
	line-height: 1;

	background: rgba(17, 16, 28, .62);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Кнопка «Сгенерировать» и ошибка
   -------------------------------------------------------------------------- */

.blog-ai-submit[hidden] {
	display: none;
}

.blog-ai-error {
	margin: 0;
	font: var(--tt-t-12m);
	color: var(--tt-accent);
	text-align: center;
}

.blog-ai-error[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Кнопки поверх карточки результата и в просмотрщике.
   Отдельный класс рядом с .tt-btn, а не правка компонента: в макете кнопок на
   результате нет, а accent/blue на фотографии читаются плохо
   (design/README.md, правило 3).
   -------------------------------------------------------------------------- */

.blog-ai-btn--glass {
	min-height: 32px;
	padding: 6px 12px;
	gap: 6px;
	font: var(--tt-t-14b);
	color: var(--tt-bg);

	background: rgba(17, 21, 30, .58);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.blog-ai-btn--glass:hover {
	background: rgba(17, 21, 30, .78);
}

.blog-ai-btn--glass:active {
	transform: translateY(1px);
}

/* Кликабельный результат — открывается на весь экран */
.blog-ai-result {
	cursor: zoom-in;
}

/* Оверлей компонента растянут на всю карточку (inset: 0) и без этого
   перехватывал бы клик по самой картинке — пробрасываем его насквозь,
   оставляя кликабельными только теги и кнопки. */
.blog-ai__widget .tt-card__overlay {
	pointer-events: none;
}

.blog-ai__widget .tt-card__overlay .tt-tags,
.blog-ai__widget .tt-card__overlay .tt-card__actions {
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Просмотр результата на весь экран
   -------------------------------------------------------------------------- */

.blog-ai-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1060;              /* поверх sticky-кнопки (1040) */
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 24px;
}

.blog-ai-lightbox[hidden] {
	display: none;
}

.blog-ai-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 14, 25, .88);
	cursor: zoom-out;
}

.blog-ai-lightbox__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

/* Картинка в натуральном размере, но не крупнее экрана */
.blog-ai-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 110px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--tt-radius-img);
	background: var(--tt-placeholder);
}

.blog-ai-lightbox__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tt-gap-tag);
}

/* Пока просмотрщик открыт, страница под ним не скроллится */
body.blog-ai-lightbox-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Промо-блок: показываем под результатом (done) и вместо виджета, когда
   бесплатная генерация уже израсходована (promo)
   -------------------------------------------------------------------------- */

.blog-ai-promo {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: var(--tt-pad-card);
	text-align: center;

	background: var(--tt-bg);
	border-radius: var(--tt-radius-card);
	box-shadow: var(--tt-shadow-blue);
}

.tt-gen[data-state='done'] .blog-ai-promo,
.tt-gen[data-state='promo'] .blog-ai-promo {
	display: flex;
}

.blog-ai-promo__text {
	margin: 0;
	font: var(--tt-t-16b);
	color: var(--tt-h1);
}

/* Предупреждение об одной бесплатной попытке. Живёт внутри состояния empty,
   поэтому после запуска генерации скрывается вместе с ним. */
.blog-ai-once {
	margin: 0;
	max-width: 330px;
	font: var(--tt-t-12m);
	color: var(--tt-h3);
	text-align: center;
}

.blog-ai-once b {
	color: var(--tt-h1);
	font-weight: 700;
}

.blog-ai-once a {
	color: var(--tt-accent, #d9004e);
	text-decoration: underline;
}

/* В состоянии promo прячем и поле промта: генерировать больше нечего. */
.tt-gen[data-state='promo'] .tt-gen__prompt-wrap {
	display: none;
}

/* --------------------------------------------------------------------------
   Sticky-кнопка «Начать творить»
   z-index ниже модалей Bootstrap (1050), иначе кнопка ляжет поверх логина.
   -------------------------------------------------------------------------- */

.blog-ai-sticky {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 1040;
	transform: translateX(-50%);
}

.blog-ai-sticky[hidden] {
	display: none;
}

.blog-ai-sticky__btn {
	box-shadow: var(--tt-shadow-accent);
}

/* Мобайл: кнопка на всю ширину и высотой 52px — как в макете 2116:44320.
   Виджет стоит сразу за ads_footer.php, а кнопка убирается, как только виджет
   попадает во вьюпорт, — баннер она не перекрывает. */
@media (max-width: 560px) {
	.blog-ai-sticky {
		left: 12px;
		right: 12px;
		transform: none;
	}

	.blog-ai-sticky__btn {
		width: 100%;
		min-height: 52px;
		font: var(--tt-t-18b);
	}

	.blog-ai__title {
		font: var(--tt-t-18b);
	}

	/* На узком экране кнопки поверх карточки прижимаем и уменьшаем, иначе они
	   перекрывают сам результат. */
	.blog-ai-btn--glass {
		min-height: 28px;
		padding: 5px 10px;
		font: var(--tt-t-12m);
		font-weight: 700;
	}

	.blog-ai-lightbox {
		padding: 12px;
	}

	.blog-ai-lightbox__img {
		max-height: calc(100vh - 96px);
	}
}