/* ==========================================================================
   ux_library.css — small, targeted UX fixes for Library / Brand / Plan
   Wizard / Manager (see library.js, brand.js, plan_wizard.js, manager.js).
   Loaded AFTER style.css and cards_premium.css (append the <link> after
   cards_premium.css in index.html — not done here per instructions).
   ========================================================================== */

/* ── Library detail modal: media "make cover" button ─────────────────────
   library.js's mediaItemHtml() reveals the ★ cover button only via
   mouseenter/mouseleave (inline opacity toggle in wireDetail). On touch
   devices hover never fires, so the button was unreachable — same class of
   bug cards_premium.css already guards against for gallery/lib grid cards
   (see its "@media (hover: none)" block). Mirror that fix here. */
@media (hover: none){
  .lib-media-item .mi-cover{ opacity: 1 !important; }
}

/* Delete (✕) button on media thumbnails: same story — it has no explicit
   hover-reveal here (visible by default per the base .mi-del styling), but
   make sure it never shrinks below a comfortably tappable size on touch. */
@media (hover: none){
  .lib-media-item .mi-del{ min-width: 26px; min-height: 26px; }
}

/* ── "Догенерувати фото" inline count+run row ─────────────────────────────
   On narrow screens the inline row (number input + Запустити + ✕) was laid
   out with `display:flex` unconditionally via inline style in library.js —
   force a wrap and full-width run button so it doesn't get clipped next to
   the pillar/badge chips on the same actions row. */
@media (max-width: 480px){
  .lib-genphoto-inline{ width: 100%; }
  .lib-genphoto-inline #libGenPhotoRunBtn{ flex: 1 1 auto; }
}

/* ── Plan Wizard bulk-regenerate / feedback boxes on mobile — stack actions
   full width like the rest of the wizard's card actions do at 768px, so the
   "Скасувати / Надіслати" pair never wraps into two mismatched sizes. */
@media (max-width: 480px){
  .pw-feedback-actions, .bs-actions{
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .pw-feedback-actions .btn, .bs-actions .btn{ width: 100%; }
}

/* ── Manager: template form actions — same full-width stacking on mobile,
   matching the pattern above (form is otherwise unstyled by style.css). */
@media (max-width: 480px){
  #mgTplFormWrap .lib-actions-row{ flex-direction: column-reverse; }
  #mgTplFormWrap .lib-actions-row .btn{ width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Wave 2 — wide-screen layout pass (Огляд / Бібліотека / Інформація / Чат)
   style.css can't be touched for this pass, so the shared page-width
   utilities live here instead: apply .page-narrow / .page-mid to a view's
   root wrapper in the template to stop content from smearing edge-to-edge
   on wide monitors. .workspace itself stays full-bleed (untouched) so any
   view that still wants full width (Studio, Calendar, …) is unaffected.
   ═══════════════════════════════════════════════════════════════════════ */
.page-narrow{ max-width: 920px; margin: 0 auto; }
.page-mid{ max-width: 1180px; margin: 0 auto; }

/* Simple two-column form layout helper for detail modals / add forms that
   want to pair short fields side by side instead of stacking every field
   full-width. Collapses to one column under 640px like every other grid
   in this app. */
.form-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 640px){ .form-grid-2{ grid-template-columns: 1fr; } }

/* ── Огляд: keep the tile/connection grids from stretching into a few
   oversized cards on ultra-wide screens. The .page-mid wrapper on the
   view root (see overview.html) already caps the row width; this just
   stops each tile individually ballooning past a comfortable reading
   size once auto-fit has fewer columns to work with. */
@media (min-width: 1180px){
  .tiles{ grid-template-columns: repeat(auto-fit, minmax(190px, 320px)); }
  .conn-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 340px)); }
}

/* ── Бібліотека: same idea — .lib-grid already uses auto-fill so cards
   keep their intended size and just add more columns on wide screens;
   the .page-mid wrapper keeps the whole toolbar+grid block from spanning
   an unreasonably wide row past ~6 columns. */

/* ── Чат: cap the conversation column so message bubbles (already 78%
   max-width) don't blow up to an uncomfortable reading width on wide
   monitors. Sidebar stays flush-left of this centered column. */
@media (min-width: 1180px){
  .chat-shell{ max-width: 860px; margin: 0 auto; width: 100%; }
}

/* ── Entity detail modal (library.js renderDetail): the modal is a flat
   stack of .modal-field / .lib-actions-row blocks with no visual grouping.
   Add a subtle divider between each block so "Опис", "Фото", "Дослідження"
   and "Профіль" read as distinct sections instead of one long list —
   purely presentational, no markup/class changes needed. */
.lib-detail-card > .modal-field,
.lib-detail-card > .lib-actions-row,
.lib-detail-card > .lib-run-panel{
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.lib-detail-card > .lib-detail-head{ margin-bottom: 2px; }
.lib-detail-card > .modal-field:first-of-type,
.lib-detail-card > .lib-actions-row:first-of-type{
  padding-top: 0; margin-top: 0; border-top: none;
}

/* ── Plan Wizard: give the config-form fields (.pw-field) and the
   card-action button rows a touch more breathing room / consistent sizing
   on wide screens so buttons in .pw-card-actions don't stretch to
   noticeably different widths between cards on the same row. */
@media (min-width: 900px){
  .pw-card-actions .btn{ flex: 1 1 auto; min-width: 0; }
}