/* Слотовые режимы композера (reels, stories) и общее правило [hidden].
   [hidden] стоит ПОСЛЕДНИМ во всей таблице намеренно: у него та же
   специфичность (0,1,0), что и у одноклассовых правил с display, поэтому он
   побеждает только порядком. Эта часть обязана подключаться последней.
   Часть styles.css; порядок подключения в HTML = порядок каскада, менять нельзя. */

/* --- Слотовые режимы композера (reels и далее) --- */

/* Выбор режима: заголовок с подсказкой сверху, кнопки под ним на всю ширину.
   Не в одну строку, как у прочих .toggle-row: там справа стоит узкий тумблер, а
   здесь три ТЕКСТОВЫЕ кнопки. Рядом с заголовком в панели 296px они не
   помещаются, и .segments с overflow: hidden молча обрезал последнюю — режим
   Stories переставал быть виден и доступен. */
.composer-mode-row {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.composer-mode-row .segments {
  width: 100%;
}

/* Подсказка живёт под заголовком и в узкой колонке переносится на две строки —
   без ограничения она растягивала бы блок. */
.composer-mode-row .meta-text {
  margin: 2px 0 0;
}

#composer-mode-body {
  margin-top: 6px;
}

.reels-face-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

/* Подпись сжимается, кнопка — нет. Flex-item по умолчанию не уходит уже своего
   min-content, и подпись выдавливала бы кнопку за край колонки: именно её жмут,
   чтобы задать общую картинку, и уехавшую за край не достать. */
.reels-face-label {
  min-width: 0;
}

.reels-face-label strong {
  display: block;
  font-size: 13px;
}

.reels-face-row .reels-slot {
  flex: none;
}

.reels-dropzone {
  display: grid;
  gap: 5px;
  place-items: center;
  width: 100%;
  margin-top: 6px;
  padding: 16px 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  text-align: center;
}

.reels-dropzone.dragover {
  border-color: rgba(47, 125, 255, 0.58);
  background: rgba(47, 125, 255, 0.08);
}

/* Список растёт неограниченно — десять папок это десять строк, полсотни это
   полсотни. Без потолка он выталкивает промпт и кнопку генерации вниз, поэтому
   ограничиваем и скроллим внутри: остальная часть панели остаётся на виду. */
.reels-legend {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
}

/* Без overscroll-behavior: contain намеренно. Список короче своего потолка
   (шесть строк влезают в 40vh) не скроллится сам, а contain не пускал бы колесо
   дальше — над списком получалась мёртвая зона, где не скроллилось ничего. */
.reels-list {
  margin-top: 4px;
  display: grid;
  gap: 4px;
  align-content: start;
  /* Строка стала выше (две линии), поэтому потолок щедрее: иначе видно ~4 набора.
     Остальное добирается скроллом сайдбара, который теперь работает. */
  max-height: 46vh;
  overflow-y: auto;
}

/* Строка в две линии: имя набора сверху во всю ширину, слоты снизу. В одну
   линию имя зажималось между номером, тремя слотами по 44px и крестиком — в
   столбце 296px ему оставалось меньше 70px, а имя папки здесь несёт смысл. */
.reels-row {
  display: grid;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

/* Трек номера — auto, а не фикс: при сотне наборов «100» не влезло бы в 16px и
   распёрло бы строку. */
.reels-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 26px;
  align-items: center;
  gap: 6px;
}

/* .icon-button задаёт min-height: 32px и padding: 0 11px — min-content около
   29px. В треке 26px он бы не сжался (grid-элементы не уходят ниже min-content),
   вылез бы за строку, а .reels-list из-за overflow-y: auto получил бы за это
   горизонтальный скроллбар: overflow-x: visible вычисляется в auto, когда вторая
   ось не visible. Поэтому здесь кнопке нужен явный компактный размер. */
.reels-row-main .icon-button {
  width: 26px;
  min-height: 26px;
  padding: 0;
}

.reels-row-slots {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Повтор набора прижат вправо, подальше от слотов: это единственная кнопка в
   строке, которая что-то запускает, а не редактирует. */
.reels-repeat {
  width: 28px;
  min-height: 28px;
  padding: 0;
  margin-left: auto;
}

.reels-repeat svg {
  width: 15px;
  height: 15px;
}

.reels-row.is-incomplete {
  border-color: rgba(239, 102, 102, 0.5);
}

.reels-cell-num {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
  font-size: 11px;
}

.reels-name-input {
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
}

.reels-name-input:hover,
.reels-name-input:focus {
  border-color: var(--line);
  outline: none;
}

.reels-slot {
  appearance: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  overflow: hidden;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
}

.reels-slot.is-empty:hover {
  border-color: rgba(47, 125, 255, 0.58);
}

.reels-slot.is-static {
  cursor: default;
}

.reels-face-row .reels-slot {
  width: 52px;
  height: 52px;
}

.reels-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reels-thumb.is-pending {
  opacity: 0.45;
}

.reels-plan-list {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.reels-plan-list strong {
  color: var(--text);
}

/* Единственное место панели, куда попадает произвольная строка пользователя:
   уведомление перечисляет имена незаполненных наборов, а они приходят из имён
   файлов и папок и сплошь и рядом идут одним словом без пробелов. Дефолтный
   overflow-wrap: normal такое слово не разрывает — оно вылезало за колонку 296px
   и превращало сайдбар в горизонтально скроллящийся. */
.reels-notice {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.reels-notice-ok {
  color: var(--muted);
}

.reels-notice-warn {
  border-color: rgba(239, 102, 102, 0.5);
}

.reels-notice-error {
  border-color: rgba(239, 102, 102, 0.5);
  color: var(--danger);
}

/* Атрибут hidden — это всего лишь display: none из UA-стилей браузера, поэтому
   ЛЮБОЕ авторское правило с display его перебивает независимо от специфичности.
   В проекте display задан у .tab-row, .composer-block, .panel-header-actions,
   .field-group и .segments — на этих узлах element.hidden = true не делал
   ровно ничего, хотя JS на него рассчитывал.

   Правило стоит последним намеренно: у [hidden] та же специфичность (0,1,0), что
   и у одноклассовых правил, поэтому оно побеждает порядком в файле.

   Следы прежних столкновений с этой же ловушкой — .reference-hover-preview-nav[hidden]
   и .media-viewer-nav[hidden] ниже по специфичности не конфликтуют. */
[hidden] {
  display: none;
}