/* Мобильный /create: комикс сверху, сюжет и настройки под ним (с 12.10.2026
   у всех; до этого — бета mobile_scroll_editor). Всё под body.scroll-layout
   и только на телефоне, цвета и кнопки — из creator.css. */

/* Свои блоки раскладки на компьютере не нужны: там прежний редактор. */
@media (min-width: 721px) {
  .sl-settings,
  .sl-more-settings,
  .sl-dock-settings,
  .sl-sheet-head,
  .sl-coach { display: none !important; }
}

@media (max-width: 720px) {
  /* Распорка под закреплённой панелью больше не нужна: панель в потоке. */
  body.scroll-layout .creator-shell::after { display: none; }

  /* Размер холста считает creator-scroll.js один раз на состояние, а не на каждую
     прокрутку: на iPhone высота окна гуляет вместе с панелями Safari. */
  body.scroll-layout .comic-canvas {
    width: var(--sl-canvas-w, min(calc(100vw - 24px), 360px)) !important;
    transition: width 460ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  /* Переход «пустая ⇄ готовая»: холст растёт или сжимается, карточка
     сюжета едет вниз или поднимается — одной кривой и одной длительностью. */
  body.scroll-layout .left-panel {
    transition:
      margin-top 460ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 160ms ease,
      box-shadow 180ms ease;
  }
  body.sl-measuring .comic-canvas,
  body.sl-measuring .left-panel { transition: none !important; }
  /* Отступы вокруг комикса — поменьше: место отдаём самой странице. */
  body.scroll-layout .app-bar { margin-bottom: 4px; }
  body.scroll-layout .comic-stage { padding-bottom: 0; }
  body.scroll-layout .page-dots { margin-top: 2px; }

  /* ── Композер: та же карточка, только в потоке под комиксом ── */
  body.scroll-layout .left-panel {
    position: relative;
    inset: auto;
    /* Без своего z-index: иначе панель становится контекстом наложения, и
       док с меню «⋯» оказывается под затемнением этого меню. */
    z-index: auto;
    /* Под холстом — кружочки страниц и ярлык «Начните здесь» над полем. */
    margin: 46px 12px 0;
    max-height: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    scroll-margin-top: 12px;
  }
  body.scroll-layout .left-panel.has-active-prompt {
    box-shadow: 0 0 0 2px rgba(86, 167, 255, 0.08);
  }
  body.scroll-layout .left-panel .story-wrap textarea { max-height: 220px; }

  /* Стиль и модель — шторкой снизу: стили плиткой
     в три колонки, модели карточками. Внутри — настоящие списки редактора,
     поэтому выбор работает по‑настоящему. Пока шторка открыта, карточка
     поднимается над затемнением (z-index как у боевой панели). */
  body.scroll-layout.mobile-dropdown-open .left-panel { z-index: 34; }
  body.scroll-layout .left-panel .dropdown-menu,
  body.scroll-layout .left-panel [data-dropdown="model"] .dropdown-menu.wide {
    position: fixed;
    top: auto;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px !important;
    width: auto;
    min-width: 0;
    max-height: calc(100svh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    padding: 0 8px 8px;
    background: var(--panel-strong);
    box-shadow: 0 -10px 44px rgba(0, 0, 0, 0.5);
    transform-origin: 50% 100%;
    animation: sl-sheet-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  body.scroll-layout .left-panel [data-dropdown="style"] .dropdown-menu:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  @keyframes sl-sheet-in { from { transform: translateY(40px); opacity: 0; } }

  .sl-sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    margin: 0 -8px;
    padding: 6px 4px 4px 18px;
    background: var(--panel-strong);
  }
  .sl-sheet-head h3 { margin: 0; color: var(--soft); font-size: 13px; font-weight: 700; }
  .sl-sheet-head button {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--muted);
  }
  .sl-sheet-head svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

  /* Плитка стиля: картинка квадратом, подпись под ней, выбранная — в рамке. */
  body.scroll-layout .left-panel .style-option {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: start;
    min-height: 0;
    gap: 0;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    background: var(--panel);
    text-align: left;
  }
  body.scroll-layout .left-panel .style-option img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    flex: none;
    border: 0;
    border-radius: 0;
    outline: 0;
  }
  body.scroll-layout .left-panel .style-option span {
    padding: 7px 8px 8px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
  }
  body.scroll-layout .left-panel .style-option.is-selected {
    border-color: var(--cyan);
    box-shadow: inset 0 0 0 1px var(--cyan);
  }

  /* Карточки моделей: те же, что в списке редактора, только просторнее. */
  body.scroll-layout .left-panel .model-option {
    margin-top: 8px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 12px;
  }
  body.scroll-layout .left-panel .model-option.is-selected {
    border-color: var(--cyan);
    box-shadow: inset 0 0 0 1px var(--cyan);
  }
  body.scroll-layout .left-panel .model-description { font-size: 12.5px; }

  /* Шестерёнку заменили строки ниже, «Улучшить» на телефоне нет. */
  body.scroll-layout .mobile-v2-settings-button,
  body.scroll-layout .mobile-v2-enhance-button { display: none !important; }
  body.scroll-layout .left-panel .left-panel-head {
    grid-template-columns: 44px 44px minmax(32px, 1fr) auto;
  }
  /* Кнопка генерации с подписью, а не голая стрелка: по стрелке не
     угадывалось, что она рисует страницу. */
  body.scroll-layout .mobile-v2-generate-button {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 6px;
    padding: 0 12px 0 15px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }
  body.scroll-layout .mobile-v2-generate-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  body.scroll-layout .mobile-v2-generate-button svg { flex: none; width: 18px; height: 18px; }

  /* ── Док: блок «Что дальше?» становится панелью у нижнего края ── */
  body.scroll-layout .left-panel > .mobile-page-more {
    position: fixed;
    /* Прижат к самому краю экрана: щели под ним нет, и прокручиваемый
       текст не выглядывает снизу, даже когда Safari прячет панели. */
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 34;
    display: block;
    height: auto;
    border: 1px solid var(--line-strong);
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    padding: 8px 8px calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-soft) 97%, transparent);
    box-shadow: 0 -8px 34px rgba(0, 0, 0, 0.42);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    container-type: inline-size;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
  }
  /* Док не пропадает, а уезжает вниз: у пустой страницы редактор ставит ему
     hidden. Появляется с задержкой — когда карточка сюжета уже ушла. */
  body.scroll-layout .left-panel > .mobile-page-more[hidden] {
    display: block;
    transform: translateY(calc(100% + 16px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 260ms cubic-bezier(0.4, 0, 1, 1),
      opacity 200ms ease,
      visibility 0s linear 260ms;
  }
  body.scroll-layout .left-panel > .mobile-page-more:not([hidden]) {
    transition:
      transform 380ms cubic-bezier(0.16, 1, 0.3, 1) 160ms,
      opacity 240ms ease 160ms,
      visibility 0s;
  }
  /* Страница рисуется: док на месте, но кнопки приглушены и не нажимаются. */
  body.scroll-layout.sl-ready .left-panel > .mobile-page-more[hidden] {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1) 160ms, opacity 240ms ease 160ms, visibility 0s;
  }
  body.scroll-layout .left-panel > .mobile-page-more[hidden] .mobile-page-next-toolbar {
    opacity: 0.45;
    pointer-events: none;
  }
  body.scroll-layout .mobile-page-next-toolbar { transition: opacity 200ms ease; }

  /* Долистали до настроек — док уходит сразу, без задержки появления. */
  body.scroll-layout.sl-studio-in-view .left-panel > .mobile-page-more,
  body.scroll-layout.sl-ready.sl-studio-in-view .left-panel > .mobile-page-more[hidden] {
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
    transition: transform 260ms cubic-bezier(0.4, 0, 1, 1), opacity 200ms ease;
  }

  body.scroll-layout .mobile-page-next-head,
  body.scroll-layout .mobile-page-delete-button { display: none !important; }

  body.scroll-layout .mobile-page-next-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
  }
  body.scroll-layout .mobile-page-next-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
  }
  body.scroll-layout .mobile-page-next-button,
  body.scroll-layout .mobile-page-more-toggle {
    height: 46px;
    min-height: 46px;
    border-radius: 12px;
    font-size: 14px;
    min-width: 0;
  }
  body.scroll-layout .mobile-page-next-button { padding-inline: 12px; gap: 7px; }
  body.scroll-layout .mobile-page-next-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.scroll-layout .mobile-page-next-button svg { width: 18px; height: 18px; flex: none; }
  body.scroll-layout .mobile-page-more-toggle { width: 44px; }
  body.scroll-layout [data-mobile-continue-story] {
    border-color: color-mix(in srgb, var(--cyan) 52%, var(--blue));
    background: var(--blue);
    color: #fff;
    box-shadow: 0 8px 20px rgba(13, 95, 199, 0.28);
  }
  body.scroll-layout [data-mobile-continue-story] svg { stroke: #fff; }
  /* «Продолжить с ИИ» не обрезается вплоть до экрана 320px: ширина дока
     здесь = экран − 16px. До 376px — компактнее, до 346px у «Самому»
     пропадает иконка и отдаёт место главной кнопке. */
  @container (max-width: 360px) {
    body.scroll-layout .mobile-page-next-toolbar,
    body.scroll-layout .mobile-page-next-actions { gap: 6px; }
    body.scroll-layout .mobile-page-next-button { padding-inline: 9px; font-size: 13px; gap: 5px; }
  }
  @container (max-width: 330px) {
    body.scroll-layout [data-mobile-continue-manual] svg { display: none; }
  }
  /* Уведомления — сразу над доком, а без дока — у нижнего края. */
  body.scroll-layout .toast {
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 36;
  }
  /* Высота дока уже включает safe-area — второй раз её не прибавляем. */
  body.scroll-layout.sl-docked .toast { bottom: calc(var(--sl-dock-h, 110px) + 10px); }

  /* Меню «⋯» раскрывается вверх от дока. */
  body.scroll-layout .mobile-page-more-menu { bottom: calc(100% + 8px); right: 0; }

  .sl-dock-settings {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    margin-top: 6px;
    border: 0;
    border-radius: 10px;
    padding: 0 6px 0 10px;
    background: transparent;
    color: var(--soft);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
  }
  /* Пустая страница: «Расширенные настройки» — нижний ряд карточки сюжета,
     а не отдельная полоса: та же рамка и фон, отделены тонкой линией.
     min-width: 0 — иначе строка с nowrap растягивает колонку раскладки. */
  body.scroll-layout:not(.sl-ready) .left-panel {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  body.scroll-layout:not(.sl-ready) .left-panel .left-panel-head { border-radius: 0; }
  .sl-more-settings {
    width: auto;
    min-width: 0;
    max-width: calc(100vw - 24px);
    height: 46px;
    /* −11px: 10px — шаг сетки .workspace, ещё 1px — общая граница. */
    margin: -11px 12px 0;
    border: 1px solid var(--line-strong);
    border-top-color: var(--line);
    border-radius: 0 0 18px 18px;
    padding: 0 9px 0 14px;
    background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
    transition: border-color 160ms ease;
  }
  .left-panel.has-active-prompt + .sl-more-settings {
    border-right-color: rgba(86, 167, 255, 0.72);
    border-bottom-color: rgba(86, 167, 255, 0.72);
    border-left-color: rgba(86, 167, 255, 0.72);
  }
  body.scroll-layout.sl-ready .sl-more-settings { display: none; }
  .sl-settings { scroll-margin-top: 12px; }
  .sl-dock-settings:active { background: rgba(86, 167, 255, 0.08); }
  .sl-dock-settings b { color: var(--ink); font-weight: 700; white-space: nowrap; }
  .sl-dock-settings span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sl-dock-settings i {
    display: grid;
    width: 28px;
    height: 28px;
    flex: none;
    place-items: center;
    border-radius: 8px;
    background: var(--btn-action-bg);
    color: var(--cyan);
  }
  .sl-dock-settings svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .sl-dock-settings.is-nudging svg { animation: sl-nudge 1.1s cubic-bezier(0.16, 1, 0.3, 1) 3; }
  @keyframes sl-nudge { 40% { transform: translateY(4px); } }

  /* Подсказка «сюжет и настройки — под комиксом», один раз. */
  .sl-coach {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 10px);
    left: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    padding: 12px 8px 12px 14px;
    background: var(--panel-strong);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.4;
    animation: sl-coach-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .sl-coach[hidden] { display: none; }
  .sl-coach b { color: var(--ink); }
  .sl-coach p { flex: 1; margin: 0; }
  .sl-coach::after {
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-right: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: var(--panel-strong);
    content: "";
    transform: rotate(45deg);
  }
  .sl-coach button {
    display: grid;
    width: 30px;
    height: 30px;
    flex: none;
    place-items: center;
    margin: -6px 0 0;
    border: 0;
    background: none;
    color: var(--soft);
  }
  .sl-coach svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  @keyframes sl-coach-in { from { opacity: 0; transform: translateY(8px); } }

  /* ── Окно настроек: «Персонажи» и «Места» — отдельные разделы ── */
  body.scroll-layout.sl-sheet-characters .comic-places { display: none; }
  body.scroll-layout.sl-sheet-places #settingsPanelCharacters > :not(.comic-places) { display: none !important; }
  body.scroll-layout.sl-sheet-places .comic-places { margin-top: 0; border-top: 0; padding-top: 0; }
  body.scroll-layout.sl-sheet-places .comic-places-head { display: none; }
  /* Назад в общий список не нужно: в разделы входят прямо из строк. */
  body.scroll-layout [data-mobile-settings-back] { visibility: hidden; }

  /* ── Настройки под композером: строки как в окне настроек ── */
  .sl-settings {
    display: grid;
    gap: 18px;
    margin: 18px 12px 0;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .sl-settings .mobile-settings-group { margin: 0; }
  .sl-settings .mobile-settings-row.is-danger strong { color: var(--danger); }
  /* У строк display: flex — без этого атрибут hidden их не прячет. */
  .sl-settings .mobile-settings-row[hidden] { display: none; }

  @media (prefers-reduced-motion: reduce) {
    body.scroll-layout .comic-canvas,
    body.scroll-layout .left-panel,
    body.scroll-layout .left-panel > .mobile-page-more,
    body.scroll-layout .left-panel > .mobile-page-more[hidden],
    body.scroll-layout .left-panel > .mobile-page-more:not([hidden]),
    .sl-coach { transition: none !important; animation: none; }
    .sl-dock-settings.is-nudging svg { animation: none; }
  }
}

/* Узкие телефоны (SE): подпись «Сгенерировать» без стрелки, иначе кнопка
   выходит за край карточки. */
@media (max-width: 359px) {
  body.scroll-layout .mobile-v2-generate-button {
    padding: 0 12px;
    font-size: 13px;
  }
  body.scroll-layout .mobile-v2-generate-button svg { display: none; }
}