/* ux_studio.css — small polish fixes for Studio/Gallery discovered during a
   UX audit of studio.js/gallery.js. Loaded after style.css/cards_premium.css
   (NOT wired into index.html by this change — see audit notes for the
   <link> that still needs to be added there).
   Scope: only rules needed to support studio.js/gallery.js runtime states
   that style.css doesn't already cover. */

/* Gallery upload button — gallery.js's upload() toggles a "disabled" class
   on the <label class="cmp-upload-btn"> while a file is in flight (a plain
   <label>/<input type=file> has no native disabled affordance, unlike a
   <button>) so a second drop/click can't fire a duplicate upload. */
.cmp-upload-btn.disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Wide-screen layout pass (wave 2) ─────────────────────────────────────
   Studio's step panels and Gallery were stretching edge-to-edge on wide
   viewports (index.html's .workspace has no max-width of its own). The
   templates now wrap their content in style.css's .page-mid (1180px) —
   form-like Studio steps (1/3/4) additionally sit in a nested .page-narrow
   (920px) for a tighter, more "form"-like column — while the media-grid
   steps (2/5) and the Gallery grid keep the wider 1180px column since their
   cards are already equal-sized via grid-template-columns: auto-fill. */

/* Gallery 7-day summary strip — reads as a proper stat bar instead of a
   loose line of text now that its container is capped in width. */
.gal-report{
  justify-content: flex-start;
  font-variant-numeric: tabular-nums;
}
.gal-report-text{ color: var(--text); }

/* Step-3 cost line + step-6 publish form: align their inner controls to the
   same left edge as everything above them so the eye doesn't have to hunt
   for where the "real" column starts on a wide monitor. */
.st-panel.page-narrow{ margin-left: auto; margin-right: auto; width: 100%; }

/* Step-6 (publish). Форма не має розтягуватись на всі 1180px — рядок вводу
   заголовка шириною в екран виглядає безглуздо. Але й фіксовані 640px були
   не краще: між колонкою форми та 300-піксельною бічною панеллю зяяла порожня
   смуга на пів екрана, бо grid-колонка `1fr` лишалась широкою, а вміст у ній
   упирався в max-width. Тепер ширину обмежує САМА КОЛОНКА (minmax), тож
   зайвого простору між колонками просто не виникає. */
#stPanel6 .st-ready-grid{ grid-template-columns: minmax(0, 680px) 300px; justify-content: start; gap: 26px; }
@media (max-width: 860px){
  #stPanel6 .st-ready-grid{ grid-template-columns: 1fr; }
  #stPanel6 .st-ready-main{ max-width: none; }
}

/* Текст поста — головне поле цього кроку, а не однорядкова примітка: у ньому
   читають те, що зараз піде в соцмережу. */
#stPanel6 #stCaptionInput{ min-height: 240px; line-height: 1.6; resize: vertical; }

/* Один ряд дій замість двох із протилежним вирівнюванням (див.
   studio.js::ensureStep6Actions). Головна дія — ліворуч, як і скрізь у
   застосунку, тому підвал цього кроку не притискає кнопки праворуч. */
#stPanel6 .st-panel-foot{ justify-content: flex-start; align-items: center; gap: var(--sp-10); margin-top: 14px; }
#stPanel6 .st-step6-actions{ display: contents; }   /* кнопки стають дітьми підвалу */
/* 🛑 Обов'язково після display:contents. Бар ховається атрибутом [hidden]
   (studio.js), а `display:contents` із вищою специфічністю перебиває
   браузерне `[hidden]{display:none}` — без цього рядка «Опублікувати зараз»
   світилася б на кроці, де публікувати ще нічого. */
#stPanel6 .st-step6-actions[hidden]{ display: none; }
#stPanel6 #stScheduleBtn{ order: -1; }              /* «Запланувати» першою */

/* ── Step-3 «Розширені налаштування» (advanced settings accordion) ───────────
   21 always-visible fields collapsed into 4 always-shown "Основне" fields +
   one collapsed accordion holding the rest in 3 semantic strips. Shell/summary
   pattern deliberately mirrors style.css's .st-autopilot details/summary (same
   collapse idiom, just tucked inside a wizard step instead of under Recent
   Sessions) — kept here rather than in style.css since this pass is scoped to
   studio.js/studio.html/ux_studio.css only. */
.st-advanced{
  margin: 18px 0 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--panel-2);
  overflow: hidden;
}
.st-advanced > summary{
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-12);
  padding: 13px 16px; user-select: none; transition: background var(--t-fast) var(--ease);
}
.st-advanced > summary::-webkit-details-marker{ display: none; }
.st-advanced > summary:hover{ background: var(--elevated); }
.st-advanced-summary .ic{ font-size: 17px; line-height: 1; color: var(--text-dim); flex: 0 0 auto; }
.st-advanced-summary-text{
  display: flex; align-items: baseline; gap: var(--sp-8); flex: 1; min-width: 0;
}
.st-advanced-summary-text .lbl{ font: 700 var(--fs-13)/1.3 var(--sans); color: var(--text); flex: 0 0 auto; }
.st-advanced-summary-text .sub{
  font: 500 var(--fs-12)/1.3 var(--sans); color: var(--text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto;
}
.st-advanced-badge{
  font: 700 var(--fs-11)/1 var(--sans); color: var(--text-dim); background: var(--panel);
  border: 1px solid var(--border); padding: 3px 7px; border-radius: 999px;
  flex: 0 0 auto;
}
.st-advanced-summary .chev{ font-size:  var(--fs-13); color: var(--text-dim); transition: transform var(--t-fast) var(--ease); flex: 0 0 auto; }
.st-advanced[open] > summary .chev{ transform: rotate(180deg); }
.st-advanced[open] > summary{ border-bottom: 1px solid var(--border-soft); }
.st-advanced .st-advanced-card{ margin: 0; border: none; border-radius: 0; background: transparent; padding: 16px; }

/* Semantic strips inside the accordion — small caps subheading + thin rule +
   a tighter-gapped grid than the "Основне" block above (compact, one level
   of nesting only — no nested <details>). A strip whose fields are ALL hidden
   for the current format (e.g. "Звук" while format === "image") is hidden
   entirely by studio.js's updateAdvancedStripVisibility(), not by CSS, so it
   doesn't leave an empty heading floating in the accordion. */
.st-adv-strip + .st-adv-strip{ margin-top: 18px; }
.st-adv-strip-head{
  font: 700 var(--fs-11)/1 var(--sans);
  color: var(--text-mute); margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.st-adv-grid{ gap: 12px 16px; }
.st-adv-grid > .st-field{ margin: 0; }

.st-adv-reset-row{ margin-top: 18px; }
.st-adv-reset-btn{
  font: 600 var(--fs-12)/1 var(--sans); color: var(--text-mute); background: none; border: none;
  padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
.st-adv-reset-btn:hover{ color: var(--text); }

@media (max-width: 680px){
  .st-advanced-summary-text{ flex-wrap: wrap; row-gap: var(--sp-2); }
  .st-advanced-summary-text .sub{ flex-basis: 100%; }
}

/* ── Жива панель прогону (studio_progress) ─────────────────────────────────
   Показує, ЩО саме зараз робить режисер, скільки ще чекати, який сюжет він
   пише і які картинки вже згенеровано. До неї на кроці 4 було лише слово
   «Генерація варіантів…» і згорнутий журнал сирого тексту. */
.st-live{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-14); margin: 12px 0 6px; align-items: start; }
@media (max-width: 900px){ .st-live{ grid-template-columns: 1fr; } }

.st-live-stage{ display: flex; align-items: center; gap: var(--sp-8); font: 700 var(--fs-14)/1.35 var(--sans); color: var(--text); }
.st-live-stage .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: stPulse 1.1s ease-in-out infinite; flex: 0 0 auto; }
.st-live-stage .note{ font-weight: 600; color: var(--text-dim); }
.st-live-eta{ margin-top: 4px; font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Драбина стадій — користувач бачить не лише поточний крок, а й що попереду. */
.st-ladder{ list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.st-ladder li{ font: 600 var(--fs-11)/1 var(--sans); padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--panel-2); color: var(--text-dim); }
.st-ladder li.done{ opacity: .5; }
.st-ladder li.now{ border-color: var(--accent); color: var(--text); background: var(--panel); }

/* Стрічка згенерованих медіа. Скрол — ВСЕРЕДИНІ стрічки, сторінка вбік не їде. */
.st-strip{ display: flex; gap: var(--sp-8); overflow-x: auto; overflow-y: hidden; padding: 10px 2px 6px; scrollbar-width: thin; }
.st-strip-item{ flex: 0 0 auto; text-decoration: none; display: block; max-width: 150px; }
.st-strip-item img{ display: block; height: 104px; width: auto; max-width: 150px; object-fit: cover; border-radius: var(--ctl-radius-sm); border: 1px solid var(--border-soft); background: var(--panel-2); }
.st-strip-item .cap{ display: block; margin-top: 4px; font: 600 var(--fs-10)/1.25 var(--sans); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-strip-item:hover img{ border-color: var(--accent); }
.st-strip-empty{ font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); padding: 8px 2px; }

/* Сюжет збоку — те, що агент уже вирішив: тема, гак, формат, сцени. */
.st-story{ background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; }
.st-story h4{ margin: 0 0 8px; font: 700 var(--fs-12)/1 var(--sans);letter-spacing: .06em; color: var(--text-dim); }
.st-story .row{ margin-bottom: 9px; }
.st-story .row:last-child{ margin-bottom: 0; }
.st-story .k{ display: block; font: 600 var(--fs-10)/1 var(--sans);letter-spacing: .05em; color: var(--text-dim); margin-bottom: 3px; }
.st-story .v{ font: 600 var(--fs-13)/1.4 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.st-story .hook-type{ display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--accent); font: 700 var(--fs-10)/1.5 var(--sans); color: var(--text); vertical-align: middle; }
.st-story ol{ margin: 0; padding-left: 18px; }
.st-story ol li{ font: 600 var(--fs-12)/1.45 var(--sans); color: var(--text); margin-bottom: 3px; }
.st-story-empty{ font: 600 var(--fs-12)/1.45 var(--sans); color: var(--text-dim); }

/* ── Керування живим прогоном: пауза + вільний текст ─────────────────────── */
.st-ctl{ margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.st-ctl-row{ display: flex; align-items: center; gap: var(--sp-8); margin-bottom: 8px; flex-wrap: wrap; }
.st-ctl-row:last-of-type{ margin-bottom: 0; }
.st-ctl-btn{ flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--panel-2); color: var(--text); font: 700 var(--fs-12)/1 var(--sans); cursor: pointer; }
.st-ctl-btn:hover:not(:disabled){ border-color: var(--accent); }
.st-ctl-btn:disabled{ opacity: .55; cursor: default; }
.st-ctl-btn.primary{ border-color: var(--accent); }
.st-ctl-hint{ font: 600 var(--fs-11)/1.4 var(--sans); color: var(--text-dim); flex: 1 1 200px; min-width: 0; }
.st-ctl-input{ flex: 1 1 240px; min-width: 0; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--panel-2); color: var(--text); font: 600 var(--fs-12)/1.2 var(--sans); }
.st-ctl-input:focus{ outline: none; border-color: var(--accent); }
.st-ctl-sent{ margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.st-ctl-msg{ font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text); background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--ctl-radius-sm); padding: 6px 10px; overflow-wrap: anywhere; }
.st-ctl-msg .st{ display: block; margin-top: 2px; font: 600 var(--fs-10)/1 var(--sans); color: var(--text-dim);letter-spacing: .05em; }
.st-ctl-msg.pending{ border-color: var(--accent); }

/* ── Крок 6: медіа-прев'ю на всю ширину + розкриття ────────────────────── */
/* Контейнер #stSelectedMedia — сітка мініатюр (.media-grid, ~97px колонки).
   Розтягуємось на ВСІ колонки замість того, щоб перевизначати саму сітку:
   вона використовується й в інших місцях. Розмір веде висота, бо ролики
   вертикальні 9:16 — при width:100% вони вийшли б абсурдно високими. */
.st-pub-media{ position: relative; margin: 0 0 12px; grid-column: 1 / -1; justify-self: center; }
.st-pub-media img, .st-pub-media video{ display: block; height: auto; max-height: 62vh; width: auto; max-width: 100%;
  border-radius: var(--radius); border: 1px solid var(--border-soft); background: #000; }
.st-pub-expand{ position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: var(--sp-6);
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: rgba(0,0,0,.62);
  color: #fff; font: 700 var(--fs-11)/1 var(--sans); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.st-pub-expand:hover{ border-color: var(--accent); }

/* Дії кроку 6 — «зараз» і «переписати текст» поруч, над плануванням. */
.st-step6-actions{ display: flex; gap: var(--sp-8); flex-wrap: wrap; margin: 4px 0 12px; }

/* ── Рецензія розкадровки ─────────────────────────────────────────────────
   Один екран, дві ролі. Коли прогін чекає рішення — це ворота: питання,
   кнопки, ціна дії. Коли прогін автономний — це запис: ті самі кадри й
   вердикт судді, але без жодної кнопки, бо рішення вже ухвалене.
   Тому виділяємо його рамкою кольору акценту й ставимо ПЕРШИМ у кроці 4:
   поки ворота відкриті, все інше на екрані другорядне. */
.st-review{
  margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--accent);
}
.st-rev-head{ display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; margin-bottom: 8px; }
.st-rev-title{ font: 700 var(--fs-14)/1.3 var(--sans); color: var(--text); }
.st-rev-round{
  font: 700 var(--fs-11)/1 var(--sans);
  color: var(--text-mute); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border-soft);
}
.st-rev-badge{
  font: 700 var(--fs-11)/1 var(--sans); padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border-soft); color: var(--text-dim); white-space: nowrap;
}
.st-rev-badge.v-ok{ border-color: var(--ok); color: var(--ok); }
.st-rev-badge.v-warn{ border-color: var(--warn); color: var(--warn); }
.st-rev-badge.v-fail{ border-color: var(--danger); color: var(--danger); }
.st-rev-summary{ font: 600 var(--fs-13)/1.5 var(--sans); color: var(--text); margin-bottom: 12px; overflow-wrap: anywhere; }

/* Аркуш цілком — те, що бачить суддя. Обмежений по висоті, щоб не з'їдати
   екран: деталі дивляться в новій вкладці. */
.st-rev-sheet{ display: block; margin-bottom: 12px; }
.st-rev-sheet img{
  display: block; width: 100%; max-height: 320px; object-fit: contain;
  border-radius: var(--ctl-radius-sm); border: 1px solid var(--border-soft); background: var(--panel-2);
}

.st-rev-frames{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-12); }
.st-rev-frame{
  display: flex; flex-direction: column; border-radius: var(--ctl-radius-sm); overflow: hidden;
  border: 1px solid var(--border-soft); background: var(--panel-2);
}
.st-rev-frame.v-warn{ border-color: var(--warn); }
.st-rev-frame.v-fail{ border-color: var(--danger); }
.st-rev-frame-img{ display: block; }
.st-rev-frame-img img{ display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 280px; object-fit: cover; background: var(--panel); }
.st-rev-frame-body{ padding: 9px 11px 11px; }
.st-rev-frame-head{ display: flex; align-items: center; gap: 7px; font: 700 var(--fs-12)/1 var(--sans); color: var(--text); }
.st-rev-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.st-rev-dot.v-warn{ background: var(--warn); }
.st-rev-dot.v-fail{ background: var(--danger); }
.st-rev-scene{ margin-top: 5px; font: 600 var(--fs-12)/1.45 var(--sans); color: var(--text-dim); overflow-wrap: anywhere; }
.st-rev-issues{ margin: 7px 0 0; padding-left: 16px; }
.st-rev-issues li{ font: 600 var(--fs-11)/1.4 var(--sans); color: var(--warn); margin-bottom: 2px; overflow-wrap: anywhere; }

.st-rev-frame-act{ margin-top: 9px; }
.st-rev-regen, .st-rev-regen-go, .st-rev-opt{
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border-soft);
  background: var(--panel); color: var(--text); font: 700 var(--fs-12)/1 var(--sans); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.st-rev-regen:hover, .st-rev-regen-go:hover, .st-rev-opt:hover:not(:disabled){ border-color: var(--accent); }
.st-rev-opt:disabled{ opacity: .55; cursor: default; }
.st-rev-opt.primary{ border-color: var(--accent); background: var(--panel-2); }
.st-rev-regen-form{ margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.st-rev-note{ width: 100%; }

/* Ціна поруч із кнопкою, а не в рахунку. Червона — коли кредитів бракує:
   краще дізнатись до натискання, ніж після. */
.st-rev-price{
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border-soft); font: 700 var(--fs-10)/1.5 var(--mono);
  color: var(--text-dim); font-variant-numeric: tabular-nums; vertical-align: middle;
}
.st-rev-price.short{ border-color: var(--danger); color: var(--danger); }

.st-rev-gate{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.st-rev-q{ font: 700 var(--fs-13)/1.45 var(--sans); color: var(--text); margin-bottom: 10px; overflow-wrap: anywhere; }
.st-rev-gate-btns{ display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.st-rev-gate-note{ margin-top: 9px; font: 600 var(--fs-11)/1.45 var(--sans); color: var(--text-dim); }
.st-rev-auto{ margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); font: 600 var(--fs-12)/1.45 var(--sans); color: var(--text-dim); }

@media (max-width: 680px){
  .st-review{ padding: 12px; }
  .st-rev-frames{ grid-template-columns: 1fr 1fr; gap: 9px; }
  .st-rev-frame-img img{ max-height: 200px; }
  .st-rev-sheet img{ max-height: 220px; }
}