/* Фото-студия (M4, screens/studio.js): шапка с персонажем, «Фото / Видео», ряды пресетов (гориз. прокрутка),
   откровенность L0–L3 (закрытые — с замком), «Опиши кадр», карточки съёмки с честным прогрессом и результатом,
   «Твои снимки»; снизу — .dock «🎲» + «📸 Снять · 💎15». Здесь же — «🎬 Видео к этому кадру» под открытым кадром
   альбома в чате и размытый тизер закрытого видео (M3а, components/lockedMedia.js blurVisual). */

.screen[data-screen="studio"] { --page-max: var(--page-narrow); }
.studio { display: flex; flex-direction: column; gap: 18px; padding-top: 12px; padding-bottom: 24px; }

/* ---------- шапка ---------- */
.studio-head { display: flex; align-items: center; gap: 14px; }
.studio-head__avatar {
  flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden;
  border-radius: 50%; border: 2px solid rgba(255, 45, 120, 0.55); box-shadow: var(--glow);
}
.studio-head__avatar img, .studio-head__avatar video { width: 100%; height: 100%; object-fit: cover; }
.studio-head__text { min-width: 0; }
.studio-head__name { margin: 0; font-size: var(--fs-lg, 18px); font-weight: var(--fw-heavy); }
.studio-head__sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.studio-notice {
  margin: 0; padding: 10px 14px; border-radius: var(--r);
  font-size: var(--fs-sm); color: var(--text-2); background: var(--glass-bg); border: 1px solid var(--line-2);
}

/* ---------- выбор ---------- */
.studio-form { display: flex; flex-direction: column; gap: 18px; }
.studio-kind { width: 100%; }
.studio-kind .seg__item { flex: 1 1 0; }
.studio-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.studio-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.studio-block__title { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.studio-row { gap: 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block: 2px; }
.studio-chip { min-height: 40px; white-space: nowrap; }
.studio-chip.is-locked { opacity: 0.5; }
.studio-chip.is-locked .icon { width: 13px; height: 13px; }
.studio-custom { margin-top: 2px; }
.studio-levels { width: 100%; }
.studio-level { flex: 1 1 0; gap: 4px; }
.studio-level.is-locked { opacity: 0.45; }
.studio-level .icon { width: 13px; height: 13px; }
.studio-note { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--muted-2); }
.studio-note--lock { color: color-mix(in srgb, var(--pink) 65%, var(--text)); }
.studio-counter { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.studio-describe { min-height: 84px; resize: vertical; }

/* ---------- съёмка ---------- */
.studio-shots { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 72px; }
.studio-shots:empty { display: none; }
.studio-shot {
  display: flex; gap: 12px; padding: 12px;
  border-radius: var(--r-lg); background: var(--grad-soft), var(--card); border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: var(--elev-1);
  animation: rise-in 320ms var(--ease-out) both;
}
.studio-shot__frame {
  position: relative; flex: 0 0 auto; width: clamp(112px, 34vw, 168px); aspect-ratio: 3 / 4; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--card-2); cursor: pointer;
}
.studio-shot__frame.is-pending { cursor: default; background: linear-gradient(110deg, var(--card-2) 30%, var(--card-3) 50%, var(--card-2) 70%); background-size: 250% 100%; animation: studio-shimmer 1.6s linear infinite; }
.studio-shot__frame.is-failed { background: var(--card-2); animation: none; opacity: 0.7; }
.studio-shot__spark { font-size: 30px; animation: studio-pulse 1.6s var(--ease) infinite; }
.studio-shot__media { width: 100%; height: 100%; object-fit: cover; }
.studio-shot__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 auto; }
.studio-shot__summary { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.studio-shot__status { margin: 0; font-size: 12.5px; color: var(--text-2); }
.studio-shot__bar { height: 6px; border-radius: var(--r-pill); background: var(--line-2); overflow: hidden; }
.studio-shot__bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width 600ms var(--ease); }
.studio-shot__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.studio-shot__actions:empty { display: none; }

/* ---------- твои снимки ---------- */
.studio-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.studio-recent__item {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: var(--card-2);
  -webkit-tap-highlight-color: transparent; transition: transform .15s ease;
}
.studio-recent__item:active { transform: scale(.97); }
.studio-recent__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.studio-recent__media { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.studio-recent__badge {
  position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 999px; font-size: 12px; line-height: 1.4;
  background: rgba(0, 0, 0, .55); color: #fff;
}
@media (prefers-reduced-motion: reduce) { .studio-recent__item { transition: none; } }

/* ---------- низ ---------- */
.studio-dock .dock__row { gap: 10px; }
.studio-dock__lucky { flex: 0 0 auto; font-size: 20px; }
.studio-dock__note { margin: 8px 0 0; font-size: 12px; line-height: 1.35; text-align: center; color: var(--muted-2); }
.studio-dock__note.is-warn { color: var(--amber); }

/* ---------- чат: «🎬 Видео к этому кадру» и тизер закрытого видео (M3а) ---------- */
.frame-video-chip {
  position: relative; margin-top: 6px; min-height: 40px;
  border-color: rgba(139, 92, 246, 0.45); background: rgba(139, 92, 246, 0.12); color: var(--text); font-weight: var(--fw-bold);
}
.frame-video-chip::before { content: ""; position: absolute; inset: -4px 0; border-radius: inherit; }
.frame-video-chip:disabled { opacity: 0.6; }
/* Ролик-«кашица» крутится под тем же размытием, что и превью: движение видно, детали — нет */
.is-teaser { pointer-events: none; }
.char-studio { align-self: center; gap: 6px; margin-top: 2px; }
.char-studio .icon, .char-mine__studio .icon { width: 16px; height: 16px; }
/* «📸 Студия» в шапке вкладки «Моё» */
.char-mine__studio { flex: 0 0 auto; gap: 6px; }

@keyframes studio-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes studio-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .studio-shot__frame.is-pending, .studio-shot__spark { animation: none; }
}