/* ReklamAI - Flow (Генерация / Результаты) — Pencil HpbiT + J2f81T.
   Restyles the reklamai.js-driven .st-flow inside create.html into the warm
   2×2 "набор" view. Loaded AFTER studio.css + stage.css. Literal hex, scoped
   under body.ra-generation-room so it only applies in the flow. All [data-flow-*]
   hooks preserved; non-Pencil workbench panels are hidden (display:none), not removed. */

/* panel shell — Pencil Stage Panel #F4F2ED */
body.ra-generation-room .st-flow { background: #F4F2ED; border: 1px solid #DCD8D0; border-radius: 16px; padding: 40px clamp(20px,4vw,64px) 56px; }
/* Pencil flow shows no 6-step rail — progress bar conveys generating */
body.ra-generation-room .st-steps { display: none; }

/* ── Gen Prog header (Генерация) ── */
body.ra-generation-room .st-flow-head { display: block; max-width: 812px; margin: 0 auto 28px; }
.flow-prog-row { display: flex; align-items: center; gap: 10px; }
.flow-prog-dot { width: 9px; height: 9px; border-radius: 50%; background: #F1581E; flex: none; animation: flow-pulse 1.4s ease-in-out infinite; }
@keyframes flow-pulse { 0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(241,88,30,.35); } 50% { opacity: .55; transform: scale(.82); box-shadow: 0 0 0 6px rgba(241,88,30,0); } }
body.ra-generation-room [data-flow-main-title] { font-family: "Inter", system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; color: #28241E; margin: 0; }
.flow-prog-count { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 13px; color: #615C53; }
.flow-track { height: 6px; border-radius: 999px; background: #EAE7E0; overflow: hidden; margin: 14px 0 10px; }
.flow-track > [data-flow-bar-images] { display: block; height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg,#F8743E,#F1581E 55%,#E04E18); transition: width .5s cubic-bezier(.16,1,.3,1); }
.flow-eta { font-family: "Inter", system-ui, sans-serif; font-size: 12px; color: #8E887D; margin: 0; }
body.ra-generation-room [data-flow-substatus], body.ra-generation-room [data-flow-image-progress] { display: none; }

/* ── collapse 2-col workbench → single centered набор column ── */
body.ra-generation-room .st-workbench { display: block; max-width: 812px; margin: 0 auto; }
body.ra-generation-room .st-col { display: contents; }
/* hide non-Pencil panels (keep hooks in DOM) */
body.ra-generation-room [data-flow-strategy], body.ra-generation-room [data-flow-audience],
body.ra-generation-room [data-flow-angles], body.ra-generation-room [data-flow-copy],
body.ra-generation-room [data-flow-visual-style], body.ra-generation-room .st-director,
body.ra-generation-room .ra-result-director-summary { display: none !important; }
body.ra-generation-room .ra-artifact-card:has([data-flow-strategy]),
body.ra-generation-room .ra-artifact-card:has([data-flow-audience]),
body.ra-generation-room .ra-artifact-card:has([data-flow-angles]),
body.ra-generation-room .ra-artifact-card:has([data-flow-copy]),
body.ra-generation-room .ra-artifact-card:has([data-flow-visual-style]),
body.ra-generation-room .ra-artifact-card:has(.st-director),
body.ra-generation-room .ra-artifact-card:has([data-flow-preview-media]) { display: none !important; }

/* the 'Варианты визуала' card becomes the bare набор */
body.ra-generation-room .ra-artifact-card:has([data-flow-images]) { background: transparent; border: 0; padding: 0; backdrop-filter: none; box-shadow: none; }
body.ra-generation-room .ra-artifact-card:has([data-flow-images]) .ra-artifact-head { display: none; }

/* ── 2×2 gallery: cards 392 white border radius14 ── */
body.ra-generation-room [data-flow-images] { display: grid; grid-template-columns: repeat(2,392px); gap: 28px; justify-content: center; margin: 0 auto; }
body.ra-generation-room [data-flow-images] [data-flow-image-id] { position: relative; width: 392px; padding: 0; background: #FFF; border: 1px solid #DCD8D0; border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: 0 14px 36px -22px rgba(40,36,30,.18); transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .25s; }
body.ra-generation-room [data-flow-images] [data-flow-image-id] img { width: 100%; height: 268px; object-fit: cover; display: block; }
body.ra-generation-room [data-flow-images] [data-flow-image-id]:hover { transform: translateY(-4px); border-color: #C5C0B6; box-shadow: 0 18px 44px -20px rgba(40,36,30,.22); }
body.ra-generation-room [data-flow-images] [data-flow-image-id].create-selected-ring { border-color: #F1581E; box-shadow: 0 0 0 2px #FCEFE7, 0 16px 40px -16px rgba(241,88,30,.4); }
body.ra-generation-room [data-flow-images] [data-flow-image-id] span { position: absolute; bottom: 12px; left: 12px; z-index: 2; padding: 4px 9px; border-radius: 999px; background: rgba(251,250,247,.9); border: 1px solid #C5C0B6; font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #403C35; }
body.ra-generation-room [data-flow-images] [data-flow-image-id].create-selected-ring span { background: #F1581E; border-color: #F1581E; color: #FFF; }
body.ra-generation-room [data-flow-images] .ra-artifact-placeholder { grid-column: 1/-1; text-align: center; color: #8E887D; font-size: 13px; padding: 24px; }

/* ── skeleton (Генерация waiting) ── */
body.ra-generation-room [data-flow-images] .grid.grid-cols-3 { display: grid; grid-template-columns: repeat(2,392px); gap: 28px; justify-content: center; }
body.ra-generation-room .ra-image-waiting-tile { position: relative; width: 392px; min-height: 268px; background: #EAE7E0; border: 1px solid #DCD8D0; border-radius: 14px; overflow: hidden; }
body.ra-generation-room .ra-image-waiting-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg,transparent 20%,rgba(255,255,255,.7) 50%,transparent 80%); background-size: 220% 100%; animation: flow-shimmer 1.6s linear infinite; }
@keyframes flow-shimmer { from { background-position: 220% 0; } to { background-position: -120% 0; } }
body.ra-generation-room .ra-image-waiting-tile span { position: absolute; bottom: 14px; left: 14px; z-index: 1; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #8E887D; background: none; border: 0; padding: 0; }

/* ── Результаты: receipt + overline (static, gated by result classes) ── */
.flow-receipt { display: none; align-items: center; gap: 8px; max-width: 812px; margin: 0 auto 8px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .04em; color: #615C53; }
.flow-receipt .chk { width: 14px; height: 14px; color: #2F9D5B; flex: none; }
.flow-receipt .brief { font-family: "Inter", system-ui, sans-serif; font-size: 13px; letter-spacing: 0; }
.flow-overline { display: none; max-width: 812px; margin: 0 auto 16px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #8E887D; }
body.ra-flow-result .flow-receipt, body.ra-flow-export-ready .flow-receipt, body.ra-flow-selection-required .flow-receipt,
body.ra-flow-result .flow-overline, body.ra-flow-export-ready .flow-overline, body.ra-flow-selection-required .flow-overline { display: flex; }
body.ra-flow-result .flow-overline, body.ra-flow-export-ready .flow-overline, body.ra-flow-selection-required .flow-overline { display: block; }
/* hide live Генерация progress once in result state */
body.ra-flow-result .st-flow-head, body.ra-flow-export-ready .st-flow-head, body.ra-flow-selection-required .st-flow-head { display: none; }

/* ── export row (Результаты) ── */
body.ra-generation-room [data-flow-export-panel] { background: none; border: 0; border-radius: 0; padding: 0; backdrop-filter: none; box-shadow: none; max-width: 812px; margin: 24px auto 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.ra-generation-room [data-flow-selection-title], body.ra-generation-room [data-flow-selection-meta] { display: none; }
body.ra-generation-room [data-shelf-mockup] { display: none; }
body.ra-generation-room button[data-flow-export-btn] { width: auto; margin: 0; height: 48px; padding: 0 22px; border-radius: 10px; border: 1px solid transparent; border-image: linear-gradient(180deg,#FFD9C4,#E26A38 55%,#B83E12) 1; background: linear-gradient(180deg,#F8743E,#F1581E 55%,#E04E18); color: #FFF; font-family: "Inter", system-ui, sans-serif; font-size: 15px; font-weight: 600; box-shadow: 0 1px 0 rgba(255,217,196,.65), 0 6px 16px -2px rgba(241,88,30,.32); transition: transform .15s cubic-bezier(.16,1,.3,1), box-shadow .15s; }
body.ra-generation-room button[data-flow-export-btn]:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,217,196,.65), 0 10px 22px -4px rgba(241,88,30,.4); }
body.ra-generation-room button[data-flow-export-btn]:disabled { opacity: .55; cursor: not-allowed; }
.flow-or-each { font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 500; color: #615C53; }
body.ra-generation-room [data-flow-export-panel] button[data-flow-postpro-btn],
body.ra-generation-room [data-flow-export-panel] button[data-flow-library-btn] { width: auto; margin: 0; height: 48px; padding: 0 18px; border-radius: 10px; border: 1px solid #DCD8D0; background: #FFF; color: #403C35; font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 500; }
body.ra-generation-room [data-flow-export-panel] button[data-infographic-btn],
body.ra-generation-room [data-flow-export-panel] button[data-flow-retry-btn],
body.ra-generation-room [data-flow-export-panel] button[data-flow-back-to-brief-btn] { width: auto; margin: 0; }

@media (max-width: 900px) {
  body.ra-generation-room [data-flow-images], body.ra-generation-room [data-flow-images] .grid.grid-cols-3 { grid-template-columns: 1fr; }
  body.ra-generation-room [data-flow-images] [data-flow-image-id], body.ra-generation-room .ra-image-waiting-tile { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .flow-prog-dot, body.ra-generation-room .ra-image-waiting-tile::after { animation: none; } }


/* ── motion polish (auto) ── */

/* entrance: 2×2 набор fades up softly when the gallery container mounts */
body.ra-generation-room [data-flow-images] {
  animation: flow-gallery-in .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes flow-gallery-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* reveal cascade: each result preview eases in, gently staggered */
body.ra-generation-room [data-flow-images] [data-flow-image-id] {
  animation: flow-card-in .5s cubic-bezier(.16,1,.3,1) both;
}
body.ra-generation-room [data-flow-images] [data-flow-image-id]:nth-child(2) { animation-delay: .07s; }
body.ra-generation-room [data-flow-images] [data-flow-image-id]:nth-child(3) { animation-delay: .14s; }
body.ra-generation-room [data-flow-images] [data-flow-image-id]:nth-child(4) { animation-delay: .21s; }
@keyframes flow-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* card press + focus ring (hover lift already defined above) */
body.ra-generation-room [data-flow-images] [data-flow-image-id]:active {
  transform: translateY(-1px) scale(.992);
}
body.ra-generation-room [data-flow-images] [data-flow-image-id]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(241,88,30,.4), 0 18px 44px -20px rgba(40,36,30,.22);
}

/* selected набор: one soft accent breath to draw the eye, then rests */
body.ra-generation-room [data-flow-images] [data-flow-image-id].create-selected-ring {
  animation: flow-selected-breath 5.5s ease-in-out infinite;
}
@keyframes flow-selected-breath {
  0%, 100% { box-shadow: 0 0 0 2px #FCEFE7, 0 16px 40px -16px rgba(241,88,30,.4); }
  50%      { box-shadow: 0 0 0 2px #FCEFE7, 0 18px 46px -14px rgba(241,88,30,.52); }
}

/* primary export CTA: subtle sheen sweep on hover + press + focus ring */
body.ra-generation-room button[data-flow-export-btn] {
  position: relative;
  overflow: hidden;
}
body.ra-generation-room button[data-flow-export-btn]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
body.ra-generation-room button[data-flow-export-btn]:hover:not(:disabled)::after {
  animation: flow-cta-sheen .9s cubic-bezier(.16,1,.3,1);
}
@keyframes flow-cta-sheen {
  to { transform: translateX(120%); }
}
body.ra-generation-room button[data-flow-export-btn]:active:not(:disabled) {
  transform: scale(.98);
}
body.ra-generation-room button[data-flow-export-btn]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(241,88,30,.4), 0 1px 0 rgba(255,217,196,.65), 0 10px 22px -4px rgba(241,88,30,.4);
}

/* secondary export buttons: previously static — give them designed states */
body.ra-generation-room [data-flow-export-panel] button[data-flow-postpro-btn],
body.ra-generation-room [data-flow-export-panel] button[data-flow-library-btn] {
  transition: transform .15s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1), border-color .2s, background-color .2s;
}
body.ra-generation-room [data-flow-export-panel] button[data-flow-postpro-btn]:hover:not(:disabled),
body.ra-generation-room [data-flow-export-panel] button[data-flow-library-btn]:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #C5C0B6;
  box-shadow: 0 10px 24px -16px rgba(40,36,30,.32);
}
body.ra-generation-room [data-flow-export-panel] button[data-flow-postpro-btn]:active:not(:disabled),
body.ra-generation-room [data-flow-export-panel] button[data-flow-library-btn]:active:not(:disabled) {
  transform: translateY(0) scale(.98);
}
body.ra-generation-room [data-flow-export-panel] button[data-flow-postpro-btn]:focus-visible,
body.ra-generation-room [data-flow-export-panel] button[data-flow-library-btn]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(241,88,30,.4);
}

/* export row eases in under the набор once results land */
body.ra-generation-room [data-flow-export-panel] {
  animation: flow-export-in .55s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .12s;
}
@keyframes flow-export-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* result receipt: gentle fade-in + one settling pop on the success check */
body.ra-flow-result .flow-receipt,
body.ra-flow-export-ready .flow-receipt {
  animation: flow-receipt-in .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes flow-receipt-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.flow-receipt .chk {
  animation: flow-chk-pop .55s cubic-bezier(.16,1,.3,1) .18s both;
  transform-origin: center;
}
@keyframes flow-chk-pop {
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* prog dot: soft accent halo breathing alongside the existing pulse */
.flow-prog-dot {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  body.ra-generation-room [data-flow-images],
  body.ra-generation-room [data-flow-images] [data-flow-image-id],
  body.ra-generation-room [data-flow-images] [data-flow-image-id].create-selected-ring,
  body.ra-generation-room button[data-flow-export-btn]::after,
  body.ra-generation-room [data-flow-export-panel],
  body.ra-flow-result .flow-receipt,
  body.ra-flow-export-ready .flow-receipt,
  .flow-receipt .chk {
    animation: none !important;
    transform: none !important;
  }
  body.ra-generation-room [data-flow-images] [data-flow-image-id]:active,
  body.ra-generation-room button[data-flow-export-btn]:active:not(:disabled),
  body.ra-generation-room [data-flow-export-panel] button[data-flow-postpro-btn],
  body.ra-generation-room [data-flow-export-panel] button[data-flow-library-btn],
  body.ra-generation-room [data-flow-export-panel] button[data-flow-postpro-btn]:hover:not(:disabled),
  body.ra-generation-room [data-flow-export-panel] button[data-flow-library-btn]:hover:not(:disabled),
  body.ra-generation-room [data-flow-export-panel] button[data-flow-postpro-btn]:active:not(:disabled),
  body.ra-generation-room [data-flow-export-panel] button[data-flow-library-btn]:active:not(:disabled) {
    transition: none !important;
    transform: none !important;
  }
}