/* css/components/model-platform-bar.css — Шапка генератора: выбор модели ИИ и платформы.
   Порядок подключения всех стилей задан в layout/head.php — он важен. */
/* =============================================================
   ШАПКА ВЫБОРА МОДЕЛИ И ПЛАТФОРМЫ
   Горизонтальный ряд с двумя <select>: модель и платформа.
   ============================================================= */

/* Контейнер всей строки выбора — ряд селектов сверху, ряд кнопок снизу */
.select-model {
  padding: 20px 0 0 0;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* Обёртка одного <select> с подписью НАД полем («AI Model:» / «Platform:» / «Custom:») */
.sel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  margin-left: 5px;
  /* Сжимается вместе с соседями (2 на /img-free, 3 на /img-pro) вместо
     фиксированной ширины кастомного триггера (230px по умолчанию, см.
     .custom-select-trigger) — иначе 3 колонки не влезают ни в какую
     разумную ширину панели. Полный текст — по title на самом триггере
     (JS проставляет в custom-select.js), урезанный текст — многоточием. */
  flex: 1 1 120px;
  min-width: 100px;
  max-width: 220px;
}

.sel span {
  white-space: nowrap;
	font-size: 12px;
	padding-right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-model .custom-select-wrap {
  max-width: 100%;
}

.select-model .custom-select-trigger {
  width: 100%;
}

/* Строка тумблеров под селектами (AI Model/Platform/Custom Platform) —
   "Use Custom Platform" (статичный, pages/generators/pro-image.php) и "Suggest categories"
   (добавляется из common/settings/settings-panel.js, если isPro). Отдельный блок (не
   часть .select-model), чтобы разрыв строки был гарантированным независимо
   от того, сколько .sel влезло в первый ряд. */
.toggles-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;
  gap: 20px;
}

/* Кнопка открытия попапа "Categories (Universal)" — та же строка, что и
   тумблеры, но прижата к правому краю (см. #togglesRow в pages/generators/pro-image.php).
   Двойной селектор — .puter-stats-btn задаёт margin: 8px 0 и идёт ПОЗЖЕ в
   файле (строка ~1530), при равной специфичности перебивал бы margin-left
   отсюда (та же ловушка, что уже задокументирована у .custom-platform-manage-btn). */
.puter-stats-btn.universal-categories-btn {
  margin-left: auto;
}

/* #universalCategoriesModal — textarea растягивается на всё свободное место
   между вступительным текстом и всегда открытой подсказкой форматов внизу
   (см. #universalCategoriesModal .uc-format-hint ниже) — но НЕ через
   flex:1/flex-basis:0%. Вложенный flex:1 в flex:1 (лейбл в .pstats-body,
   textarea в лейбле) пересчитывает высоту textarea заново на каждый layout
   "заполнить остаток" — ручной resize за уголок тут же откатывался назад,
   расти вручную было физически некуда. Вместо этого common/settings/settings-panel.js
   при открытии модалки один раз вычисляет доступную высоту и ставит
   textarea.style.height явным px — дальше это обычное поле, resize:vertical
   работает как везде, а если руками растянуть больше — .pstats-body
   (overflow-y:auto) просто скроллит. */
.uc-modal-textarea-field {
  flex-shrink: 0;
}

/* Двойной селектор (.uc-modal-textarea-field .uc-modal-textarea, специфичность
   0,2,0) — .kr-field textarea (строка ~566, специфичность 0,1,1: элемент+класс)
   иначе перебивает field-sizing/max-height/overflow отсюда независимо от
   порядка в файле (та же ловушка с равной/более высокой специфичностью,
   что уже задокументирована у .puter-stats-btn.universal-categories-btn). */
.uc-modal-textarea-field .uc-modal-textarea {
  height: 260px; /* дефолт до расчёта в JS (открытие модалки/узкий экран) */
  min-height: 120px;
  resize: vertical;
  field-sizing: fixed; /* переопределяет field-sizing:content у .kr-field textarea — здесь высота держится обычным height, не контентом */
  max-height: none;
  /* Шорткат overflow (не только overflow-y) — .kr-field textarea ставит
     overflow:hidden (обе оси) той же специфичностью 0,1,1; resize-ручка по
     спеке не рисуется вовсе, если overflow вычисляется в visible хоть по
     одной оси. */
  overflow: auto;
  line-height: 1.6;
}

/* Текст-подсказка форматов Adobe/Shutterstock/Dreamstime — компактные
   абзацы, а не голая простыня текста. */
.uc-format-hint {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* В #universalCategoriesModal подсказка всегда открыта (не под <details>,
   в отличие от Custom Platforms) — оформлена как card-блок и не должна
   схлопываться под давлением растянутого textarea выше. */
#universalCategoriesModal .uc-format-hint {
  flex-shrink: 0;
  margin-top: 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(124, 92, 255, 0.15);
  background: rgba(124, 92, 255, 0.05);
}

.uc-format-hint-title {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
}

.uc-format-hint code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(124, 92, 255, 0.12);
  padding: 1px 5px;
  border-radius: 5px;
}

/* Обёртка select + маленькая кнопка-шестерёнка управления профилями рядом.
   align-items: stretch — кнопка тянется на ту же высоту, что и
   .custom-select-trigger (12px 14px паддинг, 14px шрифт), вместо того
   чтобы подгонять паддинги кнопки под селект вручную числами. */
.custom-platform-select-wrap {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0; /* даёт .custom-select-wrap внутри реально сжаться, не только "жаться" на бумаге */
}

.custom-platform-select-wrap .custom-select-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

/* Квадратная кнопка в размер соседнего .custom-select-trigger. Раньше была
   на aspect-ratio + align-items:stretch — при живом пересчёте (смена текста
   в select, ре-рендер списка профилей) высота/ширина плавали друг за другом
   и кнопка "танцевала". Фиксированные px без стретча — статичный размер,
   без взаимной зависимости. 44px = высота .custom-select-trigger (padding
   12px*2 + line-height 14px-шрифта + border 1px*2). */
/* Двойной селектор — специально с большей специфичностью, чем один
   класс .puter-stats-btn (который в файле идёт ПОЗЖЕ и при равной
   специфичности перебивал бы padding/margin отсюда, сводя фикс к нулю). */
.puter-stats-btn.custom-platform-manage-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0 0 0 4px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1;
}

/* В боковой панели Settings кнопка с текстом "Manage Custom Platforms"
   (не просто иконка-квадрат) — фиксированный квадрат 42×42 обрезал бы
   текст. Специфичность выше базового правила (0,3,0 против 0,2,0) —
   не завязано на порядок в файле. */
.settings-mirror-card .puter-stats-btn.custom-platform-manage-btn {
  width: auto;
  height: auto;
  padding: 10px 14px;
  font-size: 12px;
}

/* Тумблер Вкл/Выкл кастомной платформы — переиспользует существующий
   .settings-toggle-switch (checkbox), т.к. только input/select/textarea
   автоматически синхронизируются с зеркалом в боковой панели (см.
   common/settings/settings-panel.js) — обычная <button> для этого не подошла бы.
   flex-direction: row ОБЯЗАТЕЛЕН явно (2026-08-25, живой баг) — базовое
   правило `label { flex-direction: column }` выше не перебивается только
   за счёт более высокой специфичности .custom-toggle-label по display:
   flex-direction — отдельное свойство, и раз здесь оно раньше не
   указывалось явно, побеждало ЕДИНСТВЕННОЕ правило, которое его вообще
   трогало — базовое column. Из-за этого подпись и переключатель рисовались
   друг под другом по центру, а не рядом — незаметно с одним тумблером,
   но бросилось в глаза, когда на Pro Audio их стало по 3-5 сразу. */
.custom-toggle-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

/* /pro-video: "Use Custom Platform" перенесён из отдельного #togglesRow
   прямо в ряд #select-model (см. pages/generators/pro-video.php), рядом с селектом
   "Custom Platform:" — по умолчанию (align-items:flex-end у .select-model)
   тумблер подравнялся бы по нижнему краю столбца .sel (уровень самого
   <select>). align-self:flex-start вместо этого ставит его на уровень
   текстовых подписей "AI Model:"/"Platform:"/"Custom Platform:" сверху ряда. */
.custom-toggle-label-inline {
  align-self: flex-start;
}