/* ============================================================================
   STEOS WebApp v2.0 — дизайн-система (по Figma "STEOS v2.0 Re-Design")
   Все цвета — токены из v2-tokens.css (fig-tokens из макета).
   Базовая ширина макета 352px; вёрстка резиновая, отступы фиксированные.
   ========================================================================== */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-white-0);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-strong-950);
  overscroll-behavior-y: none;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; border: none; background: none; padding: 0; cursor: pointer; }

.v2-page {
  position: relative;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg-white-0);
  /* место под фиксированные нижние табы */
  padding-bottom: calc(60px + var(--tg-safe-area-inset-bottom, 0px));
}
.v2-page--tabbed {
  /* Последний блок можно прокрутить выше плавающего переключателя. */
  padding-bottom: calc(96px + var(--tg-safe-area-inset-bottom, 0px));
}

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Горизонтальные ленты (табы, чипы, карусели): скролл ТОЛЬКО по горизонтали,
   без вертикального «резинового» смещения на iOS (баг №9). Если контент
   помещается — лента статична. */
.v2-tabs, .v2-cats, .v2-voice-cats, .v2-tpls, .v2-frames, .v2-chars, .v2-part__thumbs, .v2-segs {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
}

/* ===== Header: аватар + чип «СТУДИЯ» =====================================
   Sticky: следует за пользователем при скролле (баг №1).
   Как в Twitch mini app: в fullscreen (Bot API 8.0) нативные кнопки Telegram
   (Закрыть/Назад слева, ⌄… справа) занимают полосу высотой
   --tg-content-safe-area-inset-top сразу под статус-баром — ряд
   аватар+СТУДИЯ центрируется В ТОЙ ЖЕ полосе, а не на следующей строке.
   Вне fullscreen обе переменные 0 → фолбэк-высота 44px. */
.v2-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: var(--tg-safe-area-inset-top, 0px) 16px 0;
}
.v2-studio__swap {
  width: 16px;
  height: 16px;
  color: var(--state-information-base);
}
.v2-studio {
  display: flex;
  align-items: center;
  gap: 7px;
  /* высота ряда = полоса нативных кнопок Telegram в fullscreen */
  height: max(44px, var(--tg-content-safe-area-inset-top, 0px));
}
.v2-studio__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.v2-studio__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 500px;
  background: var(--state-information-lighter);
  overflow: hidden;
}
.v2-studio__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--bg-white-0);
  color: var(--state-information-base);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 0.02em;
}
.v2-studio__chevron {
  width: 16px;
  height: 16px;
  color: var(--state-information-base);
}

/* ===== Hero ============================================================== */
.v2-hero {
  padding: 16px 40px;
  text-align: center;
}
.v2-hero__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.006em;
  color: var(--text-strong-950);
}

/* ===== Чипы быстрых действий ============================================
   Блок по ширине кнопки «Выбрать голос для озвучки» — 288px (баг №2). */
.v2-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 288px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 8px 0 24px;
}
.v2-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 28px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  white-space: nowrap;
}
.v2-chip i, .v2-chip svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.v2-chip span { padding: 0 4px; }
.v2-chip--primary {
  width: 288px;
  max-width: 100%;
  background: var(--bg-surface-800);
  color: var(--text-white-0);
}
.v2-chip--stroke {
  background: var(--bg-white-0);
  color: var(--text-sub-600);
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200), 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
}
.v2-chip--voice-list { background: #000; color: #fff; }
.v2-chip--primary:active { opacity: .85; }
.v2-chip--stroke:active { background: var(--bg-weak-50); }

/* ===== Заголовок секции ==================================================
   Лейбл — единый текстовый поток (заголовок + подпись + ⓘ): на узких экранах
   переносится как текст, не разваливаясь на отдельные блоки (баг №5). */
.v2-section-h {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 16px 8px;
}
.v2-section-h__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
}
.v2-section-h__title {
  display: inline;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-strong-950);
}
.v2-section-h__sub {
  display: inline;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-sub-600);
}
.v2-section-h__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -5px;
  width: 20px;
  height: 20px;
  color: var(--icon-disabled-300, #D1D1D1);
  margin-left: 1px;
}
.v2-section-h__info svg { width: 20px; height: 20px; }

/* ===== Апки: постеры 3 колонки (full-bleed) ============================== */
.v2-posters-wrap { position: relative; }
.v2-posters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}
.v2-poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 117 / 190;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-weak-50);
}
.v2-poster img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-poster__shade {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(rgba(38, 38, 38, 0) 49.52%, rgba(38, 38, 38, 0.29) 73.56%, rgb(38, 38, 38) 100%);
}
.v2-poster__caption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  color: var(--text-disabled-300);
  font-size: 10px;
  line-height: 12px;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* белый градиент-фейд с кнопкой «Смотреть все» поверх нижнего ряда */
.v2-posters-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 138px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 41.83%, rgb(255, 255, 255) 100%);
}
.v2-btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 32px;
  padding: 6px;
  border-radius: 8px;
  background: var(--bg-surface-800);
  color: var(--text-white-0);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
}
.v2-btn-dark i, .v2-btn-dark svg, .v2-btn-dark .v2-ico-ai { width: 20px; height: 20px; }
.v2-btn-dark span { padding: 0 4px; }
.v2-btn-dark:active { opacity: .85; }

/* ===== Задачи: карточки 2 колонки ======================================== */
.v2-tasks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 16px;
}
.v2-task {
  display: flex;
  flex-direction: column;
  height: 130px;
  border-radius: 8px;
  background: var(--bg-weak-50);
  overflow: hidden;
  text-align: center;
}
/* Верх карточки: брендовые иконки 40×40 с внутренним отступом (баг №4) */
.v2-task__icons {
  flex: 0 0 65px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px 4px;
}
.v2-task__cluster {
  display: flex;
  align-items: center;
}
.v2-task__brand {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}
.v2-task__brand--top { position: relative; z-index: 1; }
/* «Социальные сети»: единый фрейм TikTok+Instagram+YouTube от дизайнера (баг №4) */
.v2-task__brand--social { width: auto; height: 44px; }
.v2-task__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4px 8px 9px;
}
.v2-task__title {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-strong-950);
}
.v2-task__sub {
  font-size: 10px;
  line-height: 12px;
  color: var(--text-soft-400, #A3A3A3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-task:active { background: var(--bg-soft-200); }

/* ===== Лента категорий =================================================== */
.v2-cats {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 14px 16px 0;
  margin-top: 8px;
  overflow-x: auto;
  background: var(--bg-white-0);
}
.v2-cat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  padding-bottom: 13px;
  border-bottom: 2px solid transparent;
  color: var(--text-sub-600);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
}
.v2-cat i, .v2-cat svg { width: 15px; height: 15px; }
.v2-cat--active {
  color: var(--text-strong-950);
  border-bottom-color: var(--text-strong-950);
}

/* ===== Карточки инструментов (ИИ секции) ================================= */
.v2-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 16px;
}
.v2-tool {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-weak-50);
  text-align: left;
}
.v2-tool img.v2-tool__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-tool__shade {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(rgba(38, 38, 38, 0) 49.52%, rgba(38, 38, 38, 0.29) 73.56%, rgb(38, 38, 38) 100%);
}
.v2-tool__text {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
}
.v2-tool__title {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-white-0);
}
.v2-tool__sub {
  font-size: 10px;
  line-height: 12px;
  color: var(--text-disabled-300);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== FAQ =============================================================== */
.v2-faq-title {
  margin: 0;
  /* верхний отступ блока по макету (баг №6) */
  padding: 24px 40px 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.006em;
  text-align: center;
  color: var(--text-strong-950);
}
.v2-faq {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px;
}
.v2-faq-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bg-weak-50);
  overflow: hidden;
  text-align: left;
  width: 100%;
}
.v2-faq-item__num {
  width: 20px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  text-align: center;
  color: var(--text-soft-400);
}
.v2-faq-item__body { flex: 1 1 auto; min-width: 0; }
.v2-faq-item__q {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-sub-600);
}
.v2-faq-item__a {
  display: none;
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-sub-600);
  white-space: pre-wrap;
}
.v2-faq-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-soft-400);
}
.v2-faq-item__icon svg { width: 14px; height: 14px; }
.v2-faq-item.open .v2-faq-item__q { color: var(--text-strong-950); }
.v2-faq-item.open .v2-faq-item__a { display: block; }
.v2-faq-item.open .v2-faq-item__icon { color: var(--icon-sub-600); }
.v2-faq-item .v2-faq-item__icon .icon-minus { display: none; }
.v2-faq-item.open .v2-faq-item__icon .icon-plus { display: none; }
.v2-faq-item.open .v2-faq-item__icon .icon-minus { display: block; }

/* ===== Плавающие табы (Главная / Баланс / История) ======================== */
.v2-tabbar {
  position: fixed;
  left: 50%;
  bottom: max(36px, var(--tg-safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 452px;
  padding: 0 16px;
  pointer-events: none;
}
.v2-tabbar__track {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 420px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(18, 35, 104, 0.08);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: auto;
}
.v2-tabbar__seg {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 4px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-soft-400);
}
.v2-tabbar__seg--active {
  background: var(--bg-white-0);
  color: var(--text-strong-950);
  box-shadow: rgba(14, 18, 27, 0.06) 0px 6px 10px 0px, rgba(14, 18, 27, 0.03) 0px 2px 4px 0px;
}

/* ============================================================================
   Озвучка v2 (/voices-v2) — студия реплик
   ========================================================================== */

/* Шапка sub-страницы: СТУДИЯ по центру; шапка sticky ВЕЗДЕ (баг №1).
   Кастомная стрелка «<» показывается только там, где нет нативной
   BackButton Telegram (браузер/MAX) — иначе она дублирует нативную. */
.tg-native-back .v2-back { display: none; }
.v2-back {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text-strong-950);
}
.v2-back svg { width: 18px; height: 18px; }

/* Сегментные табы режимов (как нижние табы, но в потоке) */
.v2-segs {
  display: flex;
  gap: 4px;
  margin: 8px 16px 0;
  padding: 4px;
  border-radius: 10px;
  background: rgba(18, 35, 104, 0.06);
}
.v2-segs__seg {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 4px;
  border-radius: 6px;
  color: var(--text-sub-600);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
}
.v2-segs__seg i, .v2-segs__seg svg { width: 17px; height: 17px; }
/* Текст таба никогда не переносится (баг 29 «Клон голоса» в 2 строки);
   активная пилюля берёт ширину по контенту, иконки делят остаток */
.v2-segs__seg span { display: none; white-space: nowrap; }
.v2-segs__seg--active {
  flex: 0 0 auto;
  padding: 4px 10px;
  background: var(--bg-white-0);
  color: var(--text-strong-950);
  box-shadow: rgba(14, 18, 27, 0.06) 0px 6px 10px 0px, rgba(14, 18, 27, 0.03) 0px 2px 4px 0px;
}
.v2-segs__seg--active span { display: inline; }
.v2-segs__seg--active i, .v2-segs__seg--active svg { display: none; }

/* Карточка реплики */
.v2-replica { padding: 16px 16px 20px; }
.v2-replica:nth-child(even) { background: var(--bg-weak-25, #FBFBFB); }
.v2-replica__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v2-replica__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-weak-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-soft-400);
  overflow: hidden;
}
.v2-replica__avatar img { width: 100%; height: 100%; object-fit: cover; }
.v2-replica__avatar svg { width: 16px; height: 16px; }
.v2-replica__meta { flex: 1 1 auto; min-width: 0; }
.v2-replica__title {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-strong-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-replica__voice-btn {
  display: block;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* «Выбрать голос» — синий по макету (баг №12) */
  color: var(--primary-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.v2-replica__voice-btn--set { color: var(--primary-base); }

/* Ручка перетаскивания реплики (баг №12) */
.v2-replica__drag {
  width: 28px;
  height: 28px;
  margin-left: -8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub-600);
  cursor: grab;
  touch-action: none;
  /* iOS: long-press вызывал выделение/callout и ломал жест перетаскивания */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.v2-replica__drag svg { width: 20px; height: 20px; }
.v2-replica--dragging {
  position: relative;
  z-index: 5;
  background: var(--bg-white-0);
  box-shadow: 0 6px 20px rgba(14, 18, 27, 0.14);
  border-radius: 12px;
}

/* Тулбар иконок (joined-кнопки) */
.v2-toolbar {
  display: flex;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200);
  background: var(--bg-white-0);
}
.v2-toolbar button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub-600);
  box-shadow: inset 0 0 0 0.5px var(--stroke-soft-200);
}
.v2-toolbar button:disabled { color: var(--icon-disabled-300); }
.v2-toolbar button svg { width: 13px; height: 13px; }
.v2-toolbar button:active:not(:disabled) { background: var(--bg-weak-50); }

/* Поле текста реплики */
.v2-replica__body { margin-top: 12px; }
.v2-textarea {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
  background: var(--bg-white-0);
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200), 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
}
.v2-textarea:focus-within {
  box-shadow: inset 0 0 0 1px var(--text-strong-950), 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
}
.v2-textarea textarea {
  width: 100%;
  min-height: 52px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-strong-950);
}
.v2-textarea textarea::placeholder { color: var(--text-soft-400); }
.v2-textarea__counter {
  align-self: flex-end;
  font-size: 11px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.02em;
  color: var(--text-soft-400);
}
.v2-replica__hint {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-sub-600);
}
.v2-replica__hint svg { width: 12px; height: 12px; margin-top: 2px; flex-shrink: 0; color: var(--icon-soft-400); }

/* Синяя tinted-кнопка (Загрузить аудио / Изменить голос) */
.v2-btn-tint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 28px;
  margin-top: 12px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(71, 108, 255, 0.1);
  color: var(--primary-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
}
.v2-btn-tint:active { background: rgba(71, 108, 255, 0.18); }

/* Кнопка «Новая реплика» */
.v2-new-replica {
  display: flex;
  justify-content: center;
  padding: 10px 16px 24px;
}

/* ===== Шторка (bottom sheet) ============================================= */
.v2-scrim {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 60;
  background: rgba(15, 17, 20, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: v2fade .2s ease;
}
@keyframes v2fade { from { opacity: 0; } }
.v2-sheet {
  width: 100%;
  max-width: 768px;
  /* не выше низа фуллскрин-шапки Telegram (баг 3) */
  max-height: min(86%, calc(100vh - var(--tg-safe-area-inset-top, 0px) - max(44px, var(--tg-content-safe-area-inset-top, 0px)) - 8px));
  display: flex;
  flex-direction: column;
  background: var(--bg-white-0);
  border-radius: 20px 20px 0 0;
  animation: v2slideup .28s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
}
@keyframes v2slideup { from { transform: translateY(100%); } }
/* Шторки выбора модели: min-height, чтобы с 1-2 пунктами не смотрелись
   «огрызком» у нижнего края (правка 22 — во всей системе) */
#gm-model-scrim .v2-sheet,
#llm-model-scrim .v2-sheet {
  min-height: 300px;
}
.v2-sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: var(--bg-soft-200);
  margin: 10px auto 4px;
  flex-shrink: 0;
}
.v2-sheet__title {
  margin: 8px 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.011em;
  color: var(--text-strong-950);
  text-align: center;
  flex-shrink: 0;
}
.v2-sheet__body { overflow-y: auto; flex: 1 1 auto; padding-bottom: calc(16px + var(--tg-safe-area-inset-bottom, 0px)); }

/* Поиск */
.v2-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-weak-50);
  flex-shrink: 0;
}
.v2-search svg { width: 16px; height: 16px; color: var(--icon-soft-400); flex-shrink: 0; }
.v2-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-strong-950);
}
.v2-search input::placeholder { color: var(--text-soft-400); }

/* Чипы категорий в шторке */
.v2-voice-cats {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px;
  overflow-x: auto;
  flex-shrink: 0;
}
.v2-voice-cat {
  flex-shrink: 0;
  height: 28px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--bg-white-0);
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200);
  color: var(--text-sub-600);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.v2-voice-cat--active {
  background: var(--bg-surface-800);
  color: var(--text-white-0);
  box-shadow: none;
}

/* Строка голоса */
.v2-voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  text-align: left;
}
.v2-voice-row:active { background: var(--bg-weak-50); }
.v2-voice-row__img {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-weak-50);
}
.v2-voice-row__meta { flex: 1 1 auto; min-width: 0; }
.v2-voice-row__name, .v2-voice-row__desc { display: block; }
.v2-voice-row__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-strong-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-voice-row__desc {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-sub-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-voice-row__play {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200);
  color: var(--text-sub-600);
  background: var(--bg-white-0);
}
.v2-voice-row__play svg { width: 14px; height: 14px; }
.v2-voice-row__play--playing { background: var(--bg-surface-800); color: var(--text-white-0); box-shadow: none; }

/* Форма клона голоса */
.v2-clone { padding: 16px; }
#v2-clone-contact-gate {
  margin: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-white-0);
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200);
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-sub-600);
}
#v2-clone-contact-gate p { margin: 0 0 12px; }
#v2-clone-contact-gate button { width: 100%; }
#v2-clone-contact-check { margin-top: 8px; }
.v2-clone__label {
  display: block;
  margin: 12px 0 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-strong-950);
}
.v2-input {
  width: 100%;
  padding: 10px 12px;
  border: none;
  outline: none;
  border-radius: 12px;
  background: var(--bg-white-0);
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200), 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-strong-950);
}
.v2-input:focus { box-shadow: inset 0 0 0 1px var(--text-strong-950), 0px 1px 2px 0px rgba(10, 13, 20, 0.03); }
.v2-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 96px;
  border-radius: 12px;
  border: 2px dashed var(--stroke-soft-200);
  color: var(--text-sub-600);
  font-size: 13px;
  line-height: 18px;
  padding: 12px;
  text-align: center;
}
.v2-dropzone svg { width: 20px; height: 20px; color: var(--icon-soft-400); }
.v2-dropzone--filled { border-style: solid; border-color: var(--primary-base); color: var(--text-strong-950); }
.v2-clone__submit { width: 100%; margin-top: 16px; height: 36px; }
.v2-clone__msg {
  margin-top: 10px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-sub-600);
}
.v2-clone__msg--error { color: #FB3748; }
.v2-clone__msg--ok { color: #1FC16B; }

/* Тост */
.v2-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--tg-safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 10200;
  max-width: 90%;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg-surface-800);
  color: var(--text-white-0);
  font-size: 13px;
  line-height: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.v2-toast--show { opacity: 1; }

/* ============================================================================
   Фотосессии и Reels v2 (/photosessions-v2, /reels-v2)
   ========================================================================== */

/* Заголовок секции с действием справа */
/* Link Button из макета (1:4736): Inter Medium 12/16 #5C5C5C + шеврон 16 */
.v2-section-h__action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-sub-600, #5C5C5C);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  flex-shrink: 0;
}
.v2-section-h__action svg { width: 16px; height: 16px; }
/* вариант Style=Primary из макета (напр. «Скачать всё» на Озвучке) */
.v2-section-h__action--primary { color: var(--primary-base, #335CFF); }

/* Карусель шаблонов */
.v2-tpls {
  display: flex;
  gap: 8px;
  padding: 4px 16px 8px;
  overflow-x: auto;
}
.v2-tpl {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 90px;
  text-align: left;
}
/* display:block обязателен: это <span>, и старые вебвью (iOS/Android у
   заказчика) не применяют к inline-элементу width/height/overflow/radius —
   карточка раздувалась до natural-size картинки, рамка выбора схлопывалась
   в вертикальную полоску, а крестик уезжал за соседний шаблон (баг 16). */
.v2-tpl__cover {
  display: block;
  position: relative;
  width: 90px;
  height: 130px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-weak-50);
}
.v2-tpl__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-tpl__shade {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(rgba(38, 38, 38, 0) 49.52%, rgba(38, 38, 38, 0.29) 73.56%, rgb(38, 38, 38) 100%);
}
.v2-tpl__caption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  color: var(--text-disabled-300, #D1D1D1); /* как в макете (Info block #D1D1D1) */
  font-size: 10px;
  line-height: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Рамка выбора — ::after-слой, а не outline: на Android WebView outline
   не скругляется по border-radius и рисовался квадратом (баг 16) */
.v2-tpl--selected .v2-tpl__cover::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border: 2px solid var(--primary-base);
  border-radius: 8px;
  pointer-events: none;
}
.v2-tpl__price {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 12px;
  color: var(--text-sub-600);
}
/* Крестик снятия выбора на выбранном шаблоне (баг №14); z-index — чтобы не
   уходил «за шаблон» (баг 16) */
.v2-tpl__x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  color: #5C5C5C;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(10, 13, 20, 0.03);
}
.v2-tpl__x svg { width: 12px; height: 12px; }
/* Спец-карточки «Свой шаблон» / «Смотреть все» (баг №14) */
.v2-tpl--special .v2-tpl__specialbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 90px;
  height: 130px;
  padding: 16px 8px 12px;
  border-radius: 8px;
  background: var(--bg-weak-50);
}
.v2-tpl--special .v2-tpl__specialbox { position: relative; }
.v2-tpl--special-selected .v2-tpl__specialbox::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border: 2px solid var(--primary-base);
  border-radius: 8px;
  pointer-events: none;
}
.v2-tpl__specialico {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--state-information-lighter, #EBF1FF);
  color: var(--state-information-base, #335CFF);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-tpl__specialico svg { width: 20px; height: 20px; }
.v2-tpl__speciallabel {
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: var(--text-strong-950);
}

/* Лента кадров-примеров «Как будет выглядеть фотосессия» */
.v2-frames {
  display: flex;
  gap: 8px;
  padding: 4px 16px 8px;
  overflow-x: auto;
}
.v2-frame {
  position: relative;
  flex-shrink: 0;
  width: 90px;
  height: 130px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-weak-50);
}
.v2-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-frame__caption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  color: var(--text-disabled-300);
  font-size: 10px;
  line-height: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-frame__shade {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(rgba(38, 38, 38, 0) 60%, rgba(38, 38, 38, 0.7) 100%);
}

/* Участники фотосессии */
.v2-part {
  padding: 10px 16px;
}
.v2-part__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.v2-part__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--bg-weak-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub-600);
  flex-shrink: 0;
}
.v2-part__icon svg { width: 18px; height: 18px; }
.v2-part__meta { flex: 1 1 auto; min-width: 0; }
.v2-part__title, .v2-part__sub { display: block; }
.v2-part__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-strong-950);
}
.v2-part__sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-sub-600);
}
/* Кнопка загрузки участника — квадратная 32×32 с иконкой (баг №14) */
.v2-part__upload {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-white-0);
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200), 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
  color: var(--text-sub-600);
}
.v2-part__upload svg { width: 18px; height: 18px; }
.v2-part__photolabel {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-sub-600);
}
.v2-part__side {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.v2-part__avas { display: inline-flex; align-items: center; }
.v2-part__ava {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  margin-left: -6px;
  flex-shrink: 0;
}
.v2-part__ava:first-child { margin-left: 0; }
.v2-part__ava img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px var(--bg-white-0);
}
/* Группа кнопок [загрузить][удалить] в одной белой рамке (макет 1:12572) */
.v2-part__btns {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  background: var(--bg-white-0);
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200), 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
  overflow: hidden;
}
.v2-part__btns .v2-part__upload {
  box-shadow: none;
  background: none;
  border-radius: 0;
}
.v2-part__remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-sub-600);
  box-shadow: inset 1px 0 0 var(--stroke-soft-200);
}
.v2-part__remove svg { width: 18px; height: 18px; }
.v2-part__thumbs {
  display: flex;
  gap: 8px;
  padding: 8px 0 0 50px;
  overflow-x: auto;
}
.v2-thumb {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}
.v2-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.v2-thumb--frame img { border-radius: 8px; }
.v2-thumb__x {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--bg-surface-800);
  color: var(--text-white-0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-thumb__x svg { width: 10px; height: 10px; }

/* Карточка-блок с тоггл-настройкой */
.v2-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 16px;
  padding: 12px;
  border-radius: 16px;
  background: var(--bg-white-0);
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200), 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
}
.v2-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--bg-weak-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v2-card__icon svg { width: 20px; height: 20px; }
/* Иконка-бренд по верхней границе карточки (баг №14) */
.v2-card--top { align-items: flex-start; }
.v2-card__icon--brand { background: none; border-radius: 10px; overflow: hidden; }
.v2-card__icon--brand img { width: 40px; height: 40px; display: block; }
.v2-card__meta { flex: 1 1 auto; min-width: 0; }
.v2-card__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-strong-950);
}
.v2-card__sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-sub-600);
}

/* Переключатель — Figma Switch [1.1] (баг №24): 32×20, трек 28×16,
   кноб 12×12 с точкой 4×4 в цвет трека */
.v2-switch { position: relative; flex-shrink: 0; width: 32px; height: 20px; cursor: pointer; }
.v2-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.v2-switch__knob {
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: var(--bg-soft-200, #EBEBEB);
  transition: background .2s ease;
}
.v2-switch__knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(14, 18, 27, 0.08), 0 4px 8px rgba(27, 28, 29, 0.06);
  transition: transform .2s ease;
}
.v2-switch__knob::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 6px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--bg-soft-200, #EBEBEB);
  transition: transform .2s ease, background .2s ease;
}
.v2-switch input:checked + .v2-switch__knob { background: var(--primary-base); }
.v2-switch input:checked + .v2-switch__knob::after { transform: translateX(12px); }
.v2-switch input:checked + .v2-switch__knob::before { transform: translateX(12px); background: var(--primary-base); }

/* Строка настройки */
.v2-setting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
}
.v2-setting__meta { flex: 1 1 auto; min-width: 0; }
.v2-setting__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-strong-950);
}
.v2-setting__sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-sub-600);
}

/* Фиксированный футер с кнопками */
.v2-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  background: var(--bg-white-0);
  box-shadow: 0 -1px 0 var(--stroke-soft-200);
}
.v2-footer__inner {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 768px;
  padding: 16px 16px calc(16px + var(--tg-safe-area-inset-bottom, 0px));
}
/* Кнопки «Создать»/«Купить» — Figma Buttons Medium (баг №15): 40px, r10 */
.v2-btn-primary {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  padding: 10px;
  border-radius: 10px;
  background: var(--primary-base);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
}
.v2-btn-primary:disabled { opacity: .6; }
.v2-btn-primary svg { width: 20px; height: 20px; }
.v2-btn-primary span { padding: 0 4px; }
.v2-btn-primary:active:not(:disabled) { opacity: .85; }
.v2-footer .v2-btn-dark { flex: 1 1 0; min-width: 0; height: 40px; border-radius: 10px; padding: 10px; background: var(--bg-surface-800); }
.v2-footer .v2-btn-dark i, .v2-footer .v2-btn-dark svg { width: 20px; height: 20px; }

/* Пустые состояния */
.v2-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-sub-600);
}

/* Грид всех шаблонов в шторке */
.v2-tpl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 16px;
}
.v2-tpl-grid .v2-tpl { width: 100%; }
.v2-tpl-grid .v2-tpl__cover { width: 100%; height: auto; aspect-ratio: 110 / 150; }

/* ============================================================================
   Кружки v2 (/circles-v2)
   ========================================================================== */

/* Карточка-сценарий */
.v2-scenario {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 8px;
  padding: 14px 12px;
  border-radius: 16px;
  background: var(--bg-white-0);
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200), 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
  text-align: left;
}
.v2-scenario:active { background: var(--bg-weak-50); }
.v2-scenario__icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--bg-weak-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-strong-950);
  flex-shrink: 0;
}
.v2-scenario__icon svg { width: 20px; height: 20px; }
.v2-scenario__meta { flex: 1 1 auto; min-width: 0; }
.v2-scenario__title, .v2-scenario__sub { display: block; }
.v2-scenario__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-strong-950);
}
.v2-scenario__sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-sub-600);
}
.v2-scenario__chevron { color: var(--icon-soft-400); flex-shrink: 0; }
.v2-scenario__chevron svg { width: 16px; height: 16px; }

/* Карусель персонажей */
.v2-chars {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  overflow-x: auto;
}
.v2-chars[hidden] { display: none; }
#cv-photo-picker[hidden], #cv-photo-preview[hidden] { display: none; }
#cv-photo-preview { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; }
.v2-photo-status { padding: 0 16px 8px; text-align: center; font-size: 12px; color: var(--text-sub-600); }
.v2-char {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-weak-50);
}
.v2-char img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-char--selected { outline: 3px solid var(--primary-base); outline-offset: 1px; }
.v2-char--add {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-base);
  border: 2px dashed var(--stroke-soft-200);
  background: var(--bg-white-0);
}
.v2-char--add svg { width: 22px; height: 22px; }

/* Поле-лейбл в шторках */
.v2-field { padding: 8px 16px; }
.v2-field__label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-strong-950);
}
.v2-field__label .req { color: var(--primary-base); }
.v2-field__label svg { width: 13px; height: 13px; color: var(--icon-soft-400); }
.v2-field__hint {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-sub-600);
}
.v2-field__hint svg { width: 12px; height: 12px; margin-top: 2px; flex-shrink: 0; color: var(--icon-soft-400); }

/* Кнопка-селект (выбор голоса) */
.v2-select {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-white-0);
  box-shadow: inset 0 0 0 1px var(--stroke-soft-200), 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-strong-950);
  text-align: left;
}
.v2-select__placeholder { color: var(--text-soft-400); }
.v2-select__value { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-select svg { width: 16px; height: 16px; color: var(--icon-soft-400); flex-shrink: 0; }
/* Левая иконка инпута-селекта — 20px, как в макете (Select [1.1]) */
.v2-select .v2-select__lead, .v2-select svg.v2-select__lead { width: 20px; height: 20px; }
.v2-select img { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }

/* Футер внутри шторки */
.v2-sheet__footer {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + var(--tg-safe-area-inset-bottom, 0px));
  box-shadow: 0 -1px 0 var(--stroke-soft-200);
  background: var(--bg-white-0);
}

/* ===== Подчёркнутые табы категорий (Figma «Tab Menu Horizontal») ========= */
.v2-tabs {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 0 16px;
  border-bottom: 1px solid var(--stroke-soft-200);
  background: var(--bg-white-0);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.v2-tabs::-webkit-scrollbar { display: none; }
.v2-tab {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 14px 0;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--text-sub-600);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s ease;
}
.v2-tab--active {
  color: var(--text-strong-950);
  border-bottom-color: var(--primary-base);
}
.v2-tab:active { opacity: .7; }

/* ===== Карусель персонажей в модалке кружка (Figma «Round Start») ======== */
.tm__carousel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 8px 0 0;
  overflow: hidden;
}
.tm__carousel[hidden] { display: none; }
.tm__carousel-side {
  width: 80px; height: 80px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-weak-50);
}
/* Боковые аватары наполовину уходят за края экрана (Figma Round Start) */
.tm__carousel-side--prev { margin-left: -40px; }
.tm__carousel-side--next { margin-right: -40px; }
.tm__carousel-side img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm__carousel-center {
  position: relative;
  width: 150px; height: 150px;
  flex-shrink: 0;
}
.tm__carousel-center img {
  width: 100%; height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.tm__carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 999px;
  border: none;
  background: #fff;
  box-shadow: 0 0 0 1px #EBEBEB inset, 0 1px 2px rgba(10,13,20,.08);
  color: #5C5C5C;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.tm__carousel-nav svg { width: 16px; height: 16px; }
.tm__carousel-nav--prev { left: -36px; }
.tm__carousel-nav--next { right: -36px; }

/* ===== Фирменные иконки из макета (маски, цвет = currentColor) ============ */
.v2-ico-info, .v2-ico-ai, .v2-ico-card, .v2-ico-swap {
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}
.v2-ico-info {
  width: 16px; height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11.5 18.5C15.366 18.5 18.5 15.366 18.5 11.5C18.5 7.634 15.366 4.5 11.5 4.5C7.634 4.5 4.5 7.634 4.5 11.5C4.5 15.366 7.634 18.5 11.5 18.5ZM12.75 15.094L12.862 14.637C12.804 14.664 12.71 14.695 12.582 14.73C12.454 14.766 12.339 14.784 12.237 14.784C12.021 14.784 11.869 14.748 11.781 14.677C11.693 14.606 11.649 14.472 11.649 14.276C11.649 14.198 11.662 14.082 11.69 13.93C11.717 13.778 11.748 13.642 11.782 13.523L12.199 12.046C12.24 11.911 12.268 11.761 12.283 11.599C12.298 11.436 12.306 11.323 12.306 11.258C12.306 10.947 12.196 10.694 11.978 10.499C11.76 10.304 11.448 10.207 11.045 10.207C10.821 10.207 10.584 10.247 10.333 10.326C10.082 10.406 9.819 10.501 9.545 10.613L9.433 11.07C9.514 11.04 9.612 11.008 9.726 10.974C9.839 10.94 9.951 10.923 10.059 10.923C10.28 10.923 10.429 10.961 10.507 11.035C10.585 11.11 10.625 11.242 10.625 11.431C10.625 11.536 10.612 11.653 10.587 11.779C10.561 11.906 10.529 12.041 10.492 12.183L10.073 13.666C10.036 13.822 10.009 13.962 9.991 14.085C9.974 14.209 9.966 14.331 9.966 14.449C9.966 14.753 10.079 15.005 10.304 15.203C10.529 15.401 10.845 15.5 11.251 15.5C11.515 15.5 11.747 15.465 11.947 15.396C12.147 15.327 12.414 15.226 12.75 15.094ZM12.675 9.092C12.87 8.911 12.967 8.692 12.967 8.434C12.967 8.177 12.87 7.957 12.675 7.774C12.481 7.592 12.247 7.5 11.973 7.5C11.698 7.5 11.462 7.591 11.266 7.774C11.07 7.957 10.971 8.177 10.971 8.434C10.971 8.692 11.07 8.911 11.266 9.092C11.463 9.274 11.698 9.364 11.973 9.364C12.247 9.364 12.481 9.274 12.675 9.092Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11.5 18.5C15.366 18.5 18.5 15.366 18.5 11.5C18.5 7.634 15.366 4.5 11.5 4.5C7.634 4.5 4.5 7.634 4.5 11.5C4.5 15.366 7.634 18.5 11.5 18.5ZM12.75 15.094L12.862 14.637C12.804 14.664 12.71 14.695 12.582 14.73C12.454 14.766 12.339 14.784 12.237 14.784C12.021 14.784 11.869 14.748 11.781 14.677C11.693 14.606 11.649 14.472 11.649 14.276C11.649 14.198 11.662 14.082 11.69 13.93C11.717 13.778 11.748 13.642 11.782 13.523L12.199 12.046C12.24 11.911 12.268 11.761 12.283 11.599C12.298 11.436 12.306 11.323 12.306 11.258C12.306 10.947 12.196 10.694 11.978 10.499C11.76 10.304 11.448 10.207 11.045 10.207C10.821 10.207 10.584 10.247 10.333 10.326C10.082 10.406 9.819 10.501 9.545 10.613L9.433 11.07C9.514 11.04 9.612 11.008 9.726 10.974C9.839 10.94 9.951 10.923 10.059 10.923C10.28 10.923 10.429 10.961 10.507 11.035C10.585 11.11 10.625 11.242 10.625 11.431C10.625 11.536 10.612 11.653 10.587 11.779C10.561 11.906 10.529 12.041 10.492 12.183L10.073 13.666C10.036 13.822 10.009 13.962 9.991 14.085C9.974 14.209 9.966 14.331 9.966 14.449C9.966 14.753 10.079 15.005 10.304 15.203C10.529 15.401 10.845 15.5 11.251 15.5C11.515 15.5 11.747 15.465 11.947 15.396C12.147 15.327 12.414 15.226 12.75 15.094ZM12.675 9.092C12.87 8.911 12.967 8.692 12.967 8.434C12.967 8.177 12.87 7.957 12.675 7.774C12.481 7.592 12.247 7.5 11.973 7.5C11.698 7.5 11.462 7.591 11.266 7.774C11.07 7.957 10.971 8.177 10.971 8.434C10.971 8.692 11.07 8.911 11.266 9.092C11.463 9.274 11.698 9.364 11.973 9.364C12.247 9.364 12.481 9.274 12.675 9.092Z'/%3E%3C/svg%3E");
}
.v2-ico-ai {
  width: 20px; height: 20px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath fill-rule='evenodd' d='M22.133 10.527L22.38 9.961C22.82 8.953 23.611 8.15 24.599 7.71L25.359 7.373C25.769 7.19 25.769 6.592 25.359 6.409L24.641 6.09C23.628 5.64 22.822 4.807 22.39 3.764L22.137 3.153C21.961 2.727 21.372 2.727 21.196 3.153L20.943 3.764C20.511 4.807 19.705 5.64 18.692 6.09L17.975 6.409C17.564 6.592 17.564 7.19 17.975 7.373L18.734 7.71C19.722 8.15 20.514 8.953 20.953 9.961L21.2 10.527C21.38 10.941 21.953 10.941 22.133 10.527ZM7.467 17.833L9.621 17.833L10.221 16.333L13.113 16.333L13.713 17.833L15.867 17.833L12.667 9.833L10.667 9.833L7.467 17.833ZM11.667 12.719L12.313 14.333L11.021 14.333L11.667 12.719ZM16.667 17.833L16.667 9.833L18.667 9.833L18.667 17.833L16.667 17.833ZM4.667 4.833C4.114 4.833 3.667 5.281 3.667 5.833L3.667 21.833C3.667 22.386 4.114 22.833 4.667 22.833L22.667 22.833C23.219 22.833 23.667 22.386 23.667 21.833L23.667 12.833L21.667 12.833L21.667 20.833L5.667 20.833L5.667 6.833L15.667 6.833L15.667 4.833L4.667 4.833Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath fill-rule='evenodd' d='M22.133 10.527L22.38 9.961C22.82 8.953 23.611 8.15 24.599 7.71L25.359 7.373C25.769 7.19 25.769 6.592 25.359 6.409L24.641 6.09C23.628 5.64 22.822 4.807 22.39 3.764L22.137 3.153C21.961 2.727 21.372 2.727 21.196 3.153L20.943 3.764C20.511 4.807 19.705 5.64 18.692 6.09L17.975 6.409C17.564 6.592 17.564 7.19 17.975 7.373L18.734 7.71C19.722 8.15 20.514 8.953 20.953 9.961L21.2 10.527C21.38 10.941 21.953 10.941 22.133 10.527ZM7.467 17.833L9.621 17.833L10.221 16.333L13.113 16.333L13.713 17.833L15.867 17.833L12.667 9.833L10.667 9.833L7.467 17.833ZM11.667 12.719L12.313 14.333L11.021 14.333L11.667 12.719ZM16.667 17.833L16.667 9.833L18.667 9.833L18.667 17.833L16.667 17.833ZM4.667 4.833C4.114 4.833 3.667 5.281 3.667 5.833L3.667 21.833C3.667 22.386 4.114 22.833 4.667 22.833L22.667 22.833C23.219 22.833 23.667 22.386 23.667 21.833L23.667 12.833L21.667 12.833L21.667 20.833L5.667 20.833L5.667 6.833L15.667 6.833L15.667 4.833L4.667 4.833Z'/%3E%3C/svg%3E");
}
.v2-ico-card {
  width: 20px; height: 20px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 3.9L22 3.9C22.265 3.9 22.52 4.005 22.707 4.193C22.895 4.38 23 4.635 23 4.9L23 20.9C23 21.165 22.895 21.42 22.707 21.607C22.52 21.795 22.265 21.9 22 21.9L4 21.9C3.735 21.9 3.48 21.795 3.293 21.607C3.105 21.42 3 21.165 3 20.9L3 4.9C3 4.635 3.105 4.38 3.293 4.193C3.48 4.005 3.735 3.9 4 3.9L4 3.9ZM21 11.9L5 11.9L5 19.9L21 19.9L21 11.9ZM21 9.9L21 5.9L5 5.9L5 9.9L21 9.9ZM15 15.9L19 15.9L19 17.9L15 17.9L15 15.9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 3.9L22 3.9C22.265 3.9 22.52 4.005 22.707 4.193C22.895 4.38 23 4.635 23 4.9L23 20.9C23 21.165 22.895 21.42 22.707 21.607C22.52 21.795 22.265 21.9 22 21.9L4 21.9C3.735 21.9 3.48 21.795 3.293 21.607C3.105 21.42 3 21.165 3 20.9L3 4.9C3 4.635 3.105 4.38 3.293 4.193C3.48 4.005 3.735 3.9 4 3.9L4 3.9ZM21 11.9L5 11.9L5 19.9L21 19.9L21 11.9ZM21 9.9L21 5.9L5 5.9L5 9.9L21 9.9ZM15 15.9L19 15.9L19 17.9L15 17.9L15 15.9Z'/%3E%3C/svg%3E");
}
.v2-ico-swap {
  width: 16px; height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 23C7.477 23 3 18.523 3 13C3 7.477 7.477 3 13 3C18.523 3 23 7.477 23 13C23 18.523 18.523 23 13 23ZM8 10L10 10L10 14L12 14L12 10L14 10L11 6.5L8 10ZM18 16L16 16L16 12L14 12L14 16L12 16L15 19.5L18 16Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 23C7.477 23 3 18.523 3 13C3 7.477 7.477 3 13 3C18.523 3 23 7.477 23 13C23 18.523 18.523 23 13 23ZM8 10L10 10L10 14L12 14L12 10L14 10L11 6.5L8 10ZM18 16L16 16L16 12L14 12L14 16L12 16L15 19.5L18 16Z'/%3E%3C/svg%3E");
}
.v2-section-h__info .v2-ico-info { width: 20px; height: 20px; }
.v2-field__label .v2-ico-info { width: 20px; height: 20px; color: var(--icon-disabled-300, #D1D1D1); }
.v2-field__hint .v2-ico-info, .v2-replica__hint .v2-ico-info { width: 16px; height: 16px; flex-shrink: 0; }

/* ===== Reels: квадратные ключевые кадры (баг №16) ========================
   display:block — это <span>; без него старые вебвью рисуют кадр по
   natural-size фото (прямоугольник вместо квадрата 90×90) и ломают крестик. */
.re-frame {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-weak-50);
}
.re-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.re-frame__shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(38, 38, 38, 0) 0%, rgba(38, 38, 38, 0.29) 48%, #262626 100%);
  pointer-events: none;
}
.re-frame__caption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  color: var(--text-disabled-300, #D1D1D1);
  font-size: 9px;
  line-height: 11px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}