/* ==========================================================================
   Виджет генерации ИИ-контента («Галерея ИИ контента ТТ»)
   Состояния: выбор нейросети → отправка на генерацию → результат.

   Что откуда:
   • Цвета, шрифты, радиусы, тени, паддинги — из CSS-дампа Figma (Frame 329).
   • Карточка результата, теги, лайк, плеер — компоненты «ИИ контент» /
     «Тег» / «button/Лайк» / «Frame 98» из того же дампа, 1:1.
   • Панель управления (Нейросеть / Режим / формат / Дополнительно) и блок
     загрузки фото в дампе отсутствуют — собраны по скриншоту на токенах
     макета. Размеры пилюль выведены из компонента «Таб» (padding 6px 10px,
     radius 90px, «14M»).

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

.tt-gen {
  --tt-gen-width: 465px;   /* ширина карточки «ИИ контент» из макета */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: var(--tt-gen-width);
  font-family: var(--tt-font-ui);
  box-sizing: border-box;
}

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

/* ==========================================================================
   1. Панель управления — выбор нейросети и параметров
   ========================================================================== */

.tt-gen__controls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 2px;
  background: var(--tt-bg);
  border-radius: var(--tt-radius-pill);
  box-shadow: var(--tt-shadow-tabs);
}

/* Пилюля-селект */
.tt-gen__control {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: var(--tt-pad-tab);
  min-height: 32px;

  font: var(--tt-t-14m);
  color: var(--tt-h1);
  text-align: left;
  white-space: nowrap;

  background: var(--tt-bg);
  border: none;
  border-radius: var(--tt-radius-pill);
  cursor: pointer;
  transition: background .16s ease;
}

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

.tt-gen__control[aria-expanded='true'] {
  background: var(--tt-bg-soft);
}

/* «Нейросеть:» — подпись перед значением */
.tt-gen__control-label {
  color: var(--tt-h3);
  font-weight: 500;
}

.tt-gen__control-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--tt-h1);
  font-weight: 500;
}

/* Флажок страны / логотип модели перед названием */
.tt-gen__control-flag {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
}

/* Иконка формата (1:1, 16:9 …) */
.tt-gen__control-ratio {
  flex: none;
  width: 13px;
  height: 13px;
  border: 1.4px solid var(--tt-h3);
  border-radius: 2px;
}

.tt-gen__chevron {
  flex: none;
  width: 9px;
  height: 9px;
  color: var(--tt-h4);
  transition: transform .16s ease;
}

.tt-gen__control[aria-expanded='true'] .tt-gen__chevron {
  transform: rotate(180deg);
}

/* «Дополнительно ⋮» — вынесено вправо, с разделителем */
.tt-gen__control--more {
  margin-left: auto;
}

.tt-gen__dots {
  flex: none;
  width: 3px;
  height: 13px;
  color: var(--tt-h4);
}

/* Выпадающий список */
.tt-gen__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;

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

.tt-gen__menu[hidden] {
  display: none;
}

.tt-gen__menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;

  font: var(--tt-t-14m);
  color: var(--tt-h1);
  text-align: left;

  background: none;
  border: none;
  border-radius: var(--tt-radius-tab);
  cursor: pointer;
}

.tt-gen__menu-item:hover {
  background: var(--tt-bg-soft);
}

.tt-gen__menu-item[aria-selected='true'] {
  background: var(--tt-accent);
  color: var(--tt-bg);
}

/* Обёртка, чтобы меню позиционировалось от своей пилюли */
.tt-gen__control-wrap {
  position: relative;
  display: inline-flex;
}

/* ==========================================================================
   2. Тело виджета — общий контейнер для всех состояний
   ========================================================================== */

.tt-gen__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 174px;              /* высота карточки-плеера из макета */
  padding: 24px var(--tt-pad-card);

  background: var(--tt-bg);
  border-radius: var(--tt-radius-card);
  overflow: hidden;
}

/* Крестик закрытия — правый верхний угол */
.tt-gen__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  padding: 0;

  color: var(--tt-h3);
  background: var(--tt-bg);
  border: none;
  border-radius: var(--tt-radius-pill);
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}

.tt-gen__close:hover {
  color: var(--tt-h1);
  background: var(--tt-bg-soft);
}

.tt-gen__close svg {
  width: 11px;
  height: 11px;
}

/* Переключение состояний: data-state="empty | loading | done" */
.tt-gen__state {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.tt-gen[data-state='empty']   .tt-gen__state--empty,
.tt-gen[data-state='loading'] .tt-gen__state--loading,
.tt-gen[data-state='done']    .tt-gen__state--done {
  display: flex;
}

/* ==========================================================================
   3. Состояние «empty» — загрузка исходного фото
   ========================================================================== */

.tt-gen__state--empty {
  gap: 14px;
  padding: 12px 0;
  text-align: center;
}

.tt-gen__hint {
  margin: 0;
  font: var(--tt-t-12m);
  color: var(--tt-h3);
  text-align: center;
  max-width: 330px;
}

/* Активная зона drag&drop.
   В мобильном макете рамка зоны загрузки пунктирная по умолчанию
   («Frame 356»: 1px dashed #CCD3DF), см. блок адаптива ниже. */
.tt-gen__body.is-dragover {
  outline: 2px dashed var(--tt-accent);
  outline-offset: -8px;
}

/* ==========================================================================
   3.1 Поле ввода промта — компонент «Поле ввода» из макета
   box-sizing: border-box, padding 12px, gap 6px, фон #FDFEFE,
   рамка 1px solid #CCD3DF, радиус 25px.
   Обязательно для эндпоинтов, где `content` — required.
   ========================================================================== */

.tt-gen__prompt-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: var(--tt-pad-card);

  background: var(--tt-bg);
  border: 1px solid var(--tt-stroke);
  border-radius: var(--tt-radius-tab);
}

.tt-gen__prompt {
  display: block;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 0;
  resize: vertical;

  font: var(--tt-t-12m);
  color: var(--tt-h1);

  background: none;
  border: none;
  outline: none;
}

.tt-gen__prompt::placeholder {
  color: var(--tt-stroke);
}

/* Счётчик символов / подпись под полем */
.tt-gen__prompt-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font: var(--tt-t-10m);
  color: var(--tt-h4);
}

/* ==========================================================================
   4. Состояние «loading» — данные ушли на генерацию
   ========================================================================== */

.tt-gen__state--loading {
  gap: 14px;
  padding: 12px 0;
  text-align: center;
}

.tt-gen__status {
  margin: 0;
  font: var(--tt-t-14m);
  color: var(--tt-h1);
}

.tt-gen__status-sub {
  margin: 0;
  font: var(--tt-t-12m);
  color: var(--tt-h4);
}

/* Полоса прогресса на акцентном цвете и stroke макета */
.tt-gen__progress {
  position: relative;
  width: 100%;
  max-width: 330px;
  height: 4px;
  background: var(--tt-stroke);
  border-radius: var(--tt-radius-pill);
  overflow: hidden;
}

.tt-gen__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tt-progress, 0%);
  background: var(--tt-accent);
  border-radius: inherit;
  transition: width .3s ease;
}

/* Неопределённый прогресс, пока сервер не отдал процент */
.tt-gen__progress--indeterminate .tt-gen__progress-bar {
  width: 40%;
  animation: tt-gen-slide 1.2s ease-in-out infinite;
}

@keyframes tt-gen-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .tt-gen__progress--indeterminate .tt-gen__progress-bar {
    animation: none;
    width: 100%;
    opacity: .4;
  }
}

/* ==========================================================================
   5. Состояние «done» — результат генерации
   Компонент «ИИ контент»: картинка на всю площадь, теги сверху,
   лайк снизу справа, всё внутри Frame 98 с паддингом 12px.
   ========================================================================== */

.tt-gen__state--done {
  padding: 0;
}

.tt-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  border-radius: var(--tt-radius-card);
  overflow: hidden;
  background: var(--tt-placeholder);
}

.tt-card__media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tt-radius-card);
}

/* Оверлей с тегами и кнопками — «Frame 98» */
.tt-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--tt-pad-card);
  border-radius: var(--tt-radius-card);
}

/* --- Теги --------------------------------------------------------------- */
.tt-tags {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--tt-gap-tag);
}

.tt-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--tt-pad-tag);
  gap: 10px;

  font: var(--tt-t-14m);
  color: var(--tt-h2);

  background: var(--tt-bg-soft);
  border-radius: var(--tt-radius-pill);
}

/* --- Нижний ряд: кнопки слева, лайк справа ------------------------------- */
.tt-card__actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--tt-gap-tag);
  width: 100%;
}

/* Группа кнопок слева — «Frame 318», gap 6px */
.tt-gen__result-buttons {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--tt-gap-tag);
}

/* Лайк — в макете текст и иконка идут mix-blend-mode: difference,
   чтобы читаться на любой картинке */
.tt-like {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0;

  background: none;
  border: none;
  border-radius: var(--tt-radius-pill);
  cursor: pointer;
}

.tt-like__count {
  font: var(--tt-t-14b);
  color: var(--tt-bg);
  mix-blend-mode: difference;
}

.tt-like__icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--tt-bg);
  mix-blend-mode: difference;
}

.tt-like[aria-pressed='true'] .tt-like__icon {
  color: var(--tt-accent);
  mix-blend-mode: normal;
  fill: currentColor;
}

/* --- Текстовый результат (карточка «Идеи постов для соцсетей») ----------- */
.tt-card--text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 64px 12px 58px;
  background: var(--tt-bg);
}

.tt-card__title {
  margin: 0;
  align-self: stretch;
  font: var(--tt-t-24b);
  color: var(--tt-h1);
}

.tt-card__prompt {
  margin: 0;
  align-self: stretch;
  font: var(--tt-t-12m);
  color: var(--tt-h3);
}

/* --- Аудио-результат: плеер «Frame 98» ---------------------------------- */
.tt-player {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  width: 100%;
  padding: 0;
  background: var(--tt-bg);
  border-radius: var(--tt-radius-pill);
}

.tt-player__play {
  flex: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  padding: 0;

  color: var(--tt-bg);
  background: var(--tt-accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.tt-player__play svg {
  width: 12px;
  height: 12px;
}

.tt-player__time {
  flex: none;
  font: var(--tt-t-10m);
  color: var(--tt-h4);
}

/* Волна: активные полосы — акцент, оставшиеся — stroke */
.tt-player__wave {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  height: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-player__bar {
  flex: none;
  width: 0;
  height: var(--tt-bar, 7.21px);
  border: 2px solid var(--tt-stroke);
  border-radius: var(--tt-radius-pill);
}

.tt-player__bar.is-played {
  border-color: var(--tt-accent);
}

.tt-player__volume {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--tt-h4);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ==========================================================================
   6. Адаптив — мобильный макет «Окно ввода промта», node 2116:44320
   Экран 375px, контент 343px с отступами по 16px.
   Мобильная версия — не просто сжатый десктоп, отличия существенные:
   • пилюли настроек не лежат в общем белом контейнере, у каждой своя тень;
   • зона загрузки — пунктирная рамка 1px dashed #CCD3DF, радиус 25px;
   • главная кнопка на всю ширину, высота 52px, текст «18B»;
   • подсказка — «16 M» тёмным (#11101C), а не мелким серым;
   • контейнер табов радиус 15px, активный таб — 8px.
   ========================================================================== */

@media (max-width: 560px) {
  .tt-gen {
    --tt-gen-width: 343px;
    gap: 8px;
  }

  /* Общий контейнер-пилюля превращается в простой ряд */
  .tt-gen__controls {
    gap: 6px;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Каждая пилюля — самостоятельная, с собственной тенью */
  .tt-gen__control {
    min-height: 34px;
    padding: 6px 6px 6px 12px;
    font: var(--tt-t-16b);
    background: var(--tt-bg);
    border-radius: var(--tt-radius-tab);
    box-shadow: var(--tt-shadow-soft);
  }

  .tt-gen__control-label {
    font-weight: 700;
  }

  .tt-gen__control--more {
    margin-left: 0;
  }

  /* Кружок «Ещё» */
  .tt-gen__dots {
    width: 2.29px;
    height: 11.47px;
    padding: 0;
    color: var(--tt-h3);
  }

  /* Зона загрузки: пунктир по умолчанию */
  .tt-gen__body {
    gap: 16px;
    min-height: 289px;
    padding: var(--tt-pad-card);
    border: 1px dashed var(--tt-stroke);
    border-radius: var(--tt-radius-tab);
  }

  .tt-gen__state--empty,
  .tt-gen__state--loading {
    gap: 16px;
    padding: 0;
  }

  /* Подсказка крупнее и тёмная */
  .tt-gen__hint {
    max-width: 342px;
    font: var(--tt-t-16m);
    color: var(--tt-h1);
  }

  /* Главная кнопка растягивается на всю ширину */
  .tt-gen__state--empty .tt-btn,
  .tt-gen__state--loading .tt-btn {
    width: 100%;
    min-height: 52px;
    padding: 18px 22px;
    font: var(--tt-t-18b);
  }

  .tt-gen__state--empty .tt-btn__icon,
  .tt-gen__state--loading .tt-btn__icon {
    width: 22px;
    height: 22px;
  }

  /* Крестик — белый кружок 34px с тенью табов */
  .tt-gen__close {
    width: 34px;
    height: 34px;
    box-shadow: var(--tt-shadow-tabs);
  }

  .tt-gen__prompt {
    font: var(--tt-t-16m);
  }

  .tt-card--text {
    padding: 32px 12px;
  }
}

/* ==========================================================================
   7. Модификатор «нижняя панель» — виджет прижат к низу экрана
   Из мобильного макета: панель на 20px от низа, поверх затемняющий градиент
   («Подложка под кнопку»: 375×426, linear-gradient до rgba(10,14,25,.72)).
   Использовать, когда виджет работает как sticky-панель, а не блоком в потоке.
   ========================================================================== */

.tt-gen--sheet {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 1030;              /* ниже модалей Bootstrap (1050) */
  transform: translateX(-50%);
}

.tt-gen--sheet::before {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 426px;
  z-index: -1;
  pointer-events: none;
  background: var(--tt-overlay-bottom);
}