/* css/components/settings-panel.css — Панель Settings в боковой колонке.
   Порядок подключения всех стилей задан в layout/head.php — он важен. */
/* =============================================================
   ПАНЕЛЬ SETTINGS В БОКОВОЙ ПАНЕЛИ
   Разметка под узкую колонку ~300px внутри .batch-tools-panel
   (см. $settingsPanelHtml на каждой странице + pages/modal/panels.php).
   ============================================================= */

.settings-mirror-card {
  max-width: 100% !important;
  width: 100% !important;
  border: none;
  padding: 0;
}

/* ---- Title/Description/Keywords/Top keywords — 2 колонки в узкой панели ---- */
.settings-mirror-card #settingsPanel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin: 0 0 18px;
}

/* Output language — на всю ширину панели (2026-08-25,
   КРОМЕ Pro Photo (там осознанно остаётся в паре с Media Resolution).
   :last-child — единственный надёжный признак разницы между генераторами:
   #settingsPanel строится ОДНИМ И ТЕМ ЖЕ initSettingsUI() (common/settings/
   settings-panel.js) на Free / Pro Image / Pro Video — разметка одна, но
   pro-video/main.js удаляет #mediaResolutionField из DOM сразу после создания (видео
   его не показывает), из-за чего Output language становится последним
   реальным ребёнком грида на Free/Video, но НЕ на Pro Photo (там после
   него всегда идёт Media Resolution). Считать чётность/нечётность позиции
   было бы ненадёжно — #settingsPanelShortfall (isPro) добавляет ещё один
   элемент только на Pro-страницах, сдвигая чётность по-разному. */
.settings-mirror-card #settingsPanel [data-field="outputLanguage"]:last-child {
  grid-column: 1 / -1;
}

/* ---- /pro-audio: Output language + Existing metadata (langBpmRow, см.
   settings-audio.js). Detect BPM здесь раньше делил строку с языком,
   переехал под "Use Custom Platform" в #select-model (2026-08-25, по
   — тумблеры не должны делить строку ни с чем); название
   класса ("lang-bpm") осталось по истории.
   Раскладка — та же сетка 1fr 1fr с теми же зазорами, что у #settingsPanel
   выше: те же два поля на Free/Pro Photo/Pro Video лежат именно в ней, и
   flex-строка со своими зазорами читалась как чужеродная (2026-08-27, по
   — единый вид панели во всех генераторах). */
.settings-mirror-card .settings-lang-bpm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin: 0 0 18px;
}
/* Одинокое поле (если Existing metadata когда-нибудь скроют для платформы)
   занимает строку целиком — та же full-width трактовка, что у
   #settingsPanel [data-field=outputLanguage]:last-child выше. */
.settings-mirror-card .settings-lang-bpm-row .settings-field:only-child {
  grid-column: 1 / -1;
}

/* ---- /pro-audio: платформо-специфичные секции (BPM-заглушка/Freesound
   license+AI / Apple AI-toggle) — вертикальный список,
   пусто и без отступа, если у активной платформы таких секций нет. */
.settings-mirror-card #audioPlatformExtras {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 18px;
}
.settings-mirror-card #audioPlatformExtras:empty {
  margin: 0;
}

/* ---- AI Model / Platform селекты ---- */
.settings-mirror-card #select-model {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding-top: 0;
  margin-bottom: 18px;
}

.settings-mirror-card .sel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-left: 0;
  /* Отменяем flex-basis/min/max-width из базового .sel (см. выше) — там
     это нужно, чтобы 2-3 селекта ужимались в один ряд на /img-pro, а
     здесь #select-model и так column — каждый .sel уже на своей
     строке, пусть просто тянется на всю ширину узкой боковой панели. */
  flex: none;
  min-width: 0;
  max-width: none;
}

.settings-mirror-card .sel span {
  font-size: 12px;
  color: var(--text-muted);
  padding-right: 0;
}

/* Custom Platform — select и кнопка "Manage Custom Platforms" были в один
   ряд (унаследовано от инлайн-версии, где кнопка — иконка-квадрат рядом с
   узким селектом). В боковой панели ей тесно — переносим кнопку под селект,
   обе на всю ширину панели. */
.settings-mirror-card .custom-platform-select-wrap {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* Видимая часть select'а — не сам <select> (он скрыт нативно, см.
   .custom-select-native в common/ui/custom-select.js), а его обёртка с
   кнопкой-триггером. .custom-select-wrap здесь и так width:100% по базовому
   правилу, но сам триггер внутри — нет: есть отдельное более специфичное
   button.custom-select-trigger {width:230px}, которое иначе перебивает
   базовый width:100% у .custom-select-trigger (та же ловушка, что уже
   чинили для .batch-tools-panel — см. ниже по файлу). */
.settings-mirror-card .custom-platform-select-wrap .custom-select-wrap {
  width: 100%;
}

.settings-mirror-card .custom-platform-select-wrap .custom-select-trigger {
  width: 100%;
}

.settings-mirror-card .puter-stats-btn.custom-platform-manage-btn {
  width: 100%;
  margin: 0;
}

/* ---- Keyword Rules ---- */
.settings-mirror-card .keyword-rules-panel {
  margin-top: 0;
  padding-top: 24px;
}

.settings-mirror-card .kr-field textarea {
  font-size: 12px;
	field-sizing: content ; /* сбрасываем к обычному поведению */
  box-sizing: border-box;  /* чтобы border учитывался внутри height, а не поверх */
	max-height: none;
}

/* В узкой боковой панели (340px) 2 колонки слишком тесно — оставляем
   Keyword Rules в одну колонку, как было изначально */
.settings-mirror-card .kr-body {
  grid-template-columns: 1fr;
}

.settings-mirror-card .kr-body .kr-field-wide {
  grid-column: auto;
}