/* ==========================================================================
   mobile.css — телефон. Подключается последним, поверх всех слоёв.

   Что было не так на экране 390px:
   1. Превью сайтов и интерфейсов показывали десктоп 1280px, уменьшенный
      вчетверо, — текст внутри не читался. Теперь script.js рисует демо в
      их родной мобильной вёрстке, а здесь окна стали выше под неё.
   2. Списки вкладок стояли столбиком: семь сайтов занимали полтора экрана,
      и само превью оказывалось далеко внизу. Теперь это лента, которая
      листается пальцем, а превью сразу под ней.
   3. Схема агента шириной в тысячу точек обрезалась краем экрана. На
      телефоне её заменяет вертикальный список шагов (собирает agents.js).
   4. В полноэкранном просмотре были кнопки Desktop / Tablet / Mobile,
      которые на телефоне ничего не меняют, и поля по 22px с каждой стороны.
   5. В мобильном меню не было кнопки связи — только три якоря.
   6. Появление первого экрана шло через filter: blur на крупных блоках —
      на слабом телефоне это первые полсекунды рывков.
   ========================================================================== */

/* --- подписи, которые на телефоне звучат иначе --------------------------- */

.label-narrow {
  display: none;
}

@media (max-width: 760px) {
  .label-wide {
    display: none;
  }

  .label-narrow {
    display: inline;
  }
}

/* --- кнопка связи в мобильном меню --------------------------------------- */

.nav .nav-cta {
  display: none;
}

@media (max-width: 980px) {
  .nav .nav-cta {
    display: flex;
    justify-content: center;
    min-height: 52px;
    margin-top: 18px;
    color: var(--paper);
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    font-size: 15px;
  }

  .nav .nav-cta::after {
    display: none;
  }
}

/* --- первый экран без размытия ------------------------------------------- */
/* Прозрачность и подъём остаются, размытие уходит: на телефоне blur(14px)
   по заголовку и крупной картинке пересчитывается каждый кадр появления. */

@media (max-width: 900px) {
  .rise,
  .is-in .rise {
    filter: none;
  }

  .theme-original .hero[data-arrive] .system-image,
  .theme-original .hero[data-arrive] .system-composite,
  .theme-original .hero[data-arrive="run"] .system-image,
  .theme-original .hero[data-arrive="run"] .system-composite {
    filter: none;
  }
}

/* --- ленты вкладок -------------------------------------------------------- */

@media (max-width: 760px) {
  .tpl-site-index,
  .tpl-ui-tabs,
  .ui-pane .tpl-mobile-list {
    position: relative;   /* offsetLeft вкладок считается от ленты */
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 0 -20px;
    padding: 2px 20px 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    border-top: 0;
    /* Край ленты гаснет — видно, что дальше есть ещё. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }

  .tpl-site-index::-webkit-scrollbar,
  .tpl-ui-tabs::-webkit-scrollbar,
  .ui-pane .tpl-mobile-list::-webkit-scrollbar {
    display: none;
  }

  .tpl-ui-tabs {
    margin-bottom: 18px;
  }

  .tpl-site-tab,
  .tpl-ui-tab,
  .ui-pane .tpl-mobile-list button {
    flex: 0 0 auto;
    max-width: 78vw;
    min-height: 0;
    gap: 5px;
    padding: 12px 16px 13px;
    scroll-snap-align: start;
    background: color-mix(in srgb, var(--tpl-panel) 62%, transparent);
    border: 1px solid var(--tpl-line);
  }

  .tpl-site-tab:hover,
  .tpl-site-tab:focus-visible,
  .tpl-site-tab.is-active,
  .tpl-ui-tab:hover,
  .tpl-ui-tab:focus-visible,
  .tpl-ui-tab.is-active,
  .ui-pane .tpl-mobile-list button:hover,
  .ui-pane .tpl-mobile-list button:focus-visible,
  .ui-pane .tpl-mobile-list button.is-active {
    transform: none;
    border-color: var(--tpl-line);
  }

  .tpl-site-tab.is-active,
  .tpl-ui-tab.is-active,
  .ui-pane .tpl-mobile-list button.is-active {
    background: color-mix(in srgb, #5c7fa6 16%, transparent);
    border-color: var(--tpl-accent);
  }

  .tpl-site-tab:last-child,
  .ui-pane .tpl-mobile-list button:last-child {
    border-bottom: 1px solid var(--tpl-line);
  }

  .tpl-site-tab.is-active:last-child,
  .ui-pane .tpl-mobile-list button.is-active:last-child {
    border-bottom-color: var(--tpl-accent);
  }

  .tpl-site-tab strong {
    font-size: 19px;
    white-space: nowrap;
  }

  /* Подзаголовок вкладки повторял абзац под превью — в ленте он лишний. */
  .tpl-site-tab small {
    display: none;
  }

  .tpl-ui-tab b,
  .ui-pane .tpl-mobile-list button b {
    font-size: 17px;
    white-space: nowrap;
  }

  .tpl-ui-tab span,
  .ui-pane .tpl-mobile-list button span {
    white-space: nowrap;
  }

  .tpl-site-explorer {
    gap: 18px;
  }

  /* Лента не должна распирать колонку: колонка 1fr растёт до ширины
     содержимого, и телефонная сцена рядом с лентой уезжала за край. */
  .tpl-site-explorer,
  .tpl-ui-layout,
  .tpl-mobile-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* В template-sections.css здесь align-items: start — лента сжималась
     по содержимому (846px), ей было нечего листать, и выбранный пункт
     оставался за краем экрана. */
  .tpl-mobile-control {
    min-width: 0;
    align-items: stretch;
  }
}

/* --- окна с живыми демо --------------------------------------------------- */
/* Внутри теперь мобильная вёрстка в масштабе ~0,9 — окно выше, чтобы
   влезал первый экран демо целиком, а не полоска шапки. */

@media (max-width: 760px) {
  .tpl-browser.browser-preview {
    height: min(140vw, 600px);
    min-height: 0;
  }

  /* В works.css высота задана самому стенду и на телефоне оставляла
     пустую полосу под ним — здесь стенд просто занимает окно. */
  .tpl-crm-live .preview-stage {
    height: auto;
  }

  .tpl-ui-panel.ui-live {
    height: min(140vw, 600px);
  }

  .tpl-ui-window > header {
    padding: 0 16px;
  }

  .tpl-ui-window > header small {
    display: none;
  }

  .theme-original .preview-open,
  .ui-live .preview-open {
    right: 50%;
    bottom: 16px;
    min-width: 0;
    transform: translateX(50%);
    white-space: nowrap;
  }

  .theme-original .browser-preview:hover .preview-open,
  .theme-original .preview-open:focus-visible {
    transform: translateX(50%);
  }

  .tpl-site-panel > p {
    margin-top: 16px;
  }

  /* Кнопка «Исследовать» стоит поверх демо и спорила с его собственными
     кнопками («Записаться», формы). Низ кадра глубже уходит в тень —
     кнопка лежит на тёмном, а не на чужом интерфейсе. */
  .theme-original .tpl-browser .preview-stage::after,
  .ui-live-stage::after {
    content: "";
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    height: 150px;
    background: linear-gradient(to top,
      color-mix(in srgb, var(--paper) 94%, transparent) 22%,
      color-mix(in srgb, var(--paper) 55%, transparent) 60%,
      transparent);
    pointer-events: none;
  }

  /* Телефонная рамка: ровно по центру, без сдвига из старого шаблона. */
  .tpl-phone-front {
    margin-left: 0;
  }

  .tpl-phone-scene {
    min-height: 0;
    padding: 28px 8px;
  }

  .tpl-mobile-control {
    gap: 16px;
  }
}

/* --- полноэкранный просмотр ---------------------------------------------- */

@media (max-width: 700px) {
  .viewer-header {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .viewer-tools {
    width: auto;
    overflow: visible;
  }

  /* Переключатель ширины на телефоне ничего не меняет: окно уже узкое. */
  .viewer-tools [data-size] {
    display: none;
  }

  .viewer-canvas {
    padding: 0;
  }

  .viewer-canvas iframe {
    width: 100% !important;
  }
}

/* --- агенты: шаги столбиком вместо широкой схемы ------------------------- */

.agent-steps {
  display: none;
}

@media (max-width: 760px) {
  .agent-flow-scroll {
    display: none;
  }

  .agent-steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .agent-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px 9px 32px;
    border: 1px solid transparent;
    transition: background-color 420ms var(--tpl-ease), border-color 420ms var(--tpl-ease);
  }

  /* Пунктир между шагами — тот же, что у линий схемы. */
  .agent-steps li::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    border-left: 1.5px dashed #46648c;
  }

  .agent-steps li:first-child::before {
    top: 50%;
  }

  .agent-steps li:last-child::before {
    bottom: 50%;
  }

  .agent-steps li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    background: #0c1626;
    border: 1px solid #46648c;
    border-radius: 50%;
    transition: background-color 420ms var(--tpl-ease), border-color 420ms var(--tpl-ease), box-shadow 420ms var(--tpl-ease);
  }

  .agent-steps b {
    color: #c9d6e8;
    font: 300 16.5px/1.15 var(--display);
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: color 420ms var(--tpl-ease);
  }

  .agent-steps small {
    color: #8698b3;
    font-size: 13px;
    line-height: 1.4;
  }

  .agent-steps li.is-on {
    background: color-mix(in srgb, #12233d 70%, transparent);
    border-color: rgba(125, 156, 192, .45);
  }

  .agent-steps li.is-on::after {
    background: #7d9cc0;
    border-color: #7d9cc0;
    box-shadow: 0 0 0 4px rgba(125, 156, 192, .2);
  }

  .agent-steps li.is-on b {
    color: #fff;
  }

  .agent-steps li.is-on small {
    color: #b8cbe6;
  }

  /* Петля «дособирает» у агента документооборота — подписью под шагами. */
  .agent-steps[data-loop]::after {
    content: "↺  " attr(data-loop);
    padding: 8px 0 0 32px;
    color: #8fa3bf;
    font-size: 13px;
  }
}

/* --- «Обо мне» и контакт -------------------------------------------------- */

@media (max-width: 980px) {
  /* Абзац стоял вплотную под «Никитой» — отбивка как у остальных секций. */
  .theme-original .about-lead {
    margin-top: 24px;
  }
}

@media (max-width: 700px) {
  /* Кнопка связи во всю ширину, как на первом экране: в styles.css это уже
     задано, но колонка контакта прижимала блок к содержимому. */
  .theme-original .contact-action {
    align-self: stretch;
  }
}

/* --- чат ботов ------------------------------------------------------------ */

@media (max-width: 760px) {
  .tpl-chat > footer button {
    padding: 0 16px;
    font-size: 13px;
  }

  .tpl-messages {
    height: 400px;
  }
}