/**
 * Мобильная вёрстка (< 768px) — по макетам iPhone 17 (Frames 1–8).
 * Принцип: фрейм 1920×1080 не масштабируется, всё переводится в обычный
 * поток документа со скроллом. Десктоп не затрагивается.
 */
@media (max-width: 767px) {

    /* ===== База: возвращаем документу поток и скролл ===== */
    html,
    body {
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: auto;
    }

    /* Фрейм — flex-контейнер; обёртка «растворяется», чтобы чат
       (сосед обёртки) встал в общий поток по order */
    .figma-frame {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        padding: 16px 20px 64px; /* снизу — место под фикс-кнопку */
        overflow-x: hidden;      /* ничего не вылезает за край экрана */
    }

    .main-content-wrapper {
        display: contents !important;
    }

    /* Разделы прижаты к верху, чат — к низу экрана */
    .robot-dock {
        margin-top: auto;
    }

    /* Линии-пунктиры десктопа (SVG в координатах 1920×1080) не нужны */
    .connection-lines {
        display: none !important;
    }

    /* Закладка онлайн-сервисов и её подложка — скрыты на мобиле */
    .online-services-tab,
    .online-services-backdrop,
    .blog-tab,
    .blog-article-tab,
    .blog-panel,
    .blog-backdrop {
        display: none !important;
    }

    /* ===== Header: лого слева + ai_status + подпись/название раздела ===== */
    .header {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        order: 1;
    }

    .theme-toggle {
        position: fixed !important;
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
        z-index: 300;
    }

    /* Сетка: треугольник слева, справа колонка ai_status + подпись/раздел */
    .header-brand {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: 56px 1fr;
        column-gap: 14px;
        align-items: start;
        width: auto !important;
        padding-right: 44px; /* не заезжать под кнопку темы */
    }

    .logo {
        display: contents !important;
    }

    .logo-pyramid {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 56px !important;
        height: 44px !important;
    }

    .logo-image {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }

    .line-origin {
        display: none !important;
    }

    .logo-text {
        position: static !important;
        left: auto !important;
        top: auto !important;
        grid-column: 2;
        grid-row: 1;
        font-size: 18px !important;
        line-height: 1.2 !important;
        width: auto !important;
    }

    .tagline {
        position: static !important;
        left: auto !important;
        top: auto !important;
        grid-column: 2;
        grid-row: 2;
        margin-top: 4px;
        font-size: 12px !important;
        line-height: 1.4 !important;
        width: auto !important;
        max-width: 230px;
    }

    .section-title-in-header {
        position: static !important;
        left: auto !important;
        top: auto !important;
        grid-column: 2;
        grid-row: 2;
        margin-top: 2px;
        font-size: 24px !important;
        letter-spacing: var(--letter-spacing-wide);
        color: #A5A5A5 !important;
        width: auto !important;
        transform: none !important;
    }

    /* На главной элемент заголовка раздела пуст — не занимает место */
    .state-home .section-title-in-header {
        display: none !important;
    }

    /* В состоянии раздела подпись прячем — вместо неё имя раздела */
    .state-section-create .tagline,
    .state-section-implement .tagline,
    .state-section-train .tagline {
        display: none !important;
    }

    /* ===== Main / разделы (главная, Frame 1) ===== */
    .main {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        order: 2;
        flex: 0 0 auto;
    }

    .sections {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 14px;                /* плотнее по вертикали между названиями */
        margin: 20px 0 0 26px;    /* стык с лого */
        padding-left: 22px;
        transform: none !important;
    }

    /* Вертикальный пунктир от лого вниз */
    .sections::before {
        content: '';
        position: absolute;
        left: 0;
        top: -14px;
        bottom: 14px;
        border-left: 1.5px dashed var(--color-gray-light);
    }

    /* Точка в начале вертикального пунктира (под лого) */
    .sections::after {
        content: '';
        position: absolute;
        left: -1.5px;
        top: -20px;
        width: 4.5px;
        height: 4.5px;
        border-radius: 50%;
        background: var(--color-gray-light);
    }

    .section {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        transform: none !important;
        opacity: 1 !important;
        cursor: pointer;
    }

    /* Горизонтальный пунктир-ответвление к каждому разделу */
    .section::before {
        content: '';
        position: absolute;
        left: -22px;
        top: 0.75em;
        width: 16px;
        border-top: 1.5px dashed var(--color-gray-light);
    }

    /* Точка на конце ответвления */
    .section::after {
        content: '';
        position: absolute;
        left: -8px;
        top: calc(0.75em - 1.5px);
        width: 4.5px;
        height: 4.5px;
        border-radius: 50%;
        background: var(--color-gray-light);
    }

    .section-title {
        font-size: 22px !important;
        line-height: 1.1 !important;
        letter-spacing: var(--letter-spacing-wide);
        margin-bottom: 0 !important;  /* убираем крупный десктопный отступ 17px */
    }

    .section-description {
        margin-top: 6px;
        font-size: 12.5px !important;
        line-height: 1.55 !important;
        color: var(--color-gray-medium);
        width: auto !important;
        max-width: 300px;
    }

    /* В состоянии раздела и в чате на главной список разделов скрыт */
    .state-section-create #sections,
    .state-section-implement #sections,
    .state-section-train #sections,
    .state-home.state-chat #sections .section-description {
        display: none !important;
    }

    /* Frame 2: главная + чат — заголовки плотнее по вертикали */
    .state-home.state-chat .sections {
        gap: 2px !important;
        margin-top: 8px !important;
    }

    .state-home.state-chat .sections .section .section-title {
        margin: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1.05 !important;
    }

    .state-home.state-chat .sections .section {
        margin: 0 !important;
        padding: 0 !important;
    }

    .state-home.state-chat #sections .section-description {
        display: none !important;
        margin: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* ===== Открытый раздел (Frames 3, 5, 7) ===== */
    .section-details {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        order: 3;
    }

    .subsections {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 26px;
        margin: 22px 0 0 26px;
        padding-left: 22px;
        transform: none !important;
    }

    .subsections::before {
        content: '';
        position: absolute;
        left: 0;
        top: -14px;
        bottom: 14px;
        border-left: 1.5px dashed var(--color-gray-light);
    }

    .subsections::after {
        content: '';
        position: absolute;
        left: -1.5px;
        top: -20px;
        width: 4.5px;
        height: 4.5px;
        border-radius: 50%;
        background: var(--color-gray-light);
    }

    .subsection {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
    }

    .subsection::before {
        content: '';
        position: absolute;
        left: -22px;
        top: 0.75em;
        width: 16px;
        border-top: 1.5px dashed var(--color-gray-light);
    }

    .subsection::after {
        content: '';
        position: absolute;
        left: -8px;
        top: calc(0.75em - 1.5px);
        width: 4.5px;
        height: 4.5px;
        border-radius: 50%;
        background: var(--color-gray-light);
    }

    .subsection-title {
        font-size: 19px !important;
        letter-spacing: var(--letter-spacing-wide);
        width: auto !important;
    }

    ul.subsection-content {
        margin: 10px 0 0 0 !important;
        padding-left: 16px !important;
        font-size: 12.5px !important;
        line-height: 1.55 !important;
        width: auto !important;
        color: var(--color-text-muted);
    }

    .subsection-content-f6 {
        display: none !important; /* краткое описание — только в десктоп-чате */
    }

    .price-info {
        display: inline-block;
        margin-top: 12px !important;
        font-size: 12px !important;
        padding: 6px 14px !important;
        border-radius: 999px !important;
        width: auto !important;
    }

    /* Чат открыт в разделе (Frames 4, 6, 8): только заголовки подразделов */
    .state-chat .subsection .subsection-content,
    .state-chat .subsection .price-info {
        display: none !important;
    }

    .state-chat .subsections {
        gap: 8px;
        margin-top: 10px;
    }

    /* ===== Footer + robot-dock: подпись робота как подводка к чату ===== */
    .footer {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        order: 4;
        display: none !important; /* контент футера на мобайле не нужен; робот в .robot-dock */
        padding: 0 !important;
        opacity: 1 !important;
    }

    .footer-left {
        display: none !important; /* tg/email — во всплывашке контактов */
    }

    .footer-nav {
        display: none !important; /* ссылки о компании/блог — внизу под чатом */
    }

    .footer-right {
        display: none;
    }

    .robot-dock {
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        order: 4;
        display: block;
        margin-top: auto;
        padding: 24px 0 8px;
        pointer-events: auto;
        gap: 0;
    }

    .robot-label {
        display: block;
        font-size: 11px !important;
        letter-spacing: 0.25em;
        color: var(--color-gray-medium);
        opacity: 1 !important;
        width: auto !important;
        margin-bottom: 8px;
        text-align: left;
    }

    .robot-tab {
        display: none !important;
    }

    /* Подпись прячем, когда чат уже открыт */
    .state-chat .robot-label {
        display: none !important;
    }

    /* ===== Чат (мятный блок; свёрнут = поле ввода, развёрнут = полный) ===== */
    .chat-wrapper {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        pointer-events: auto !important;
        order: 5;
        /* чат шире остального контента: 5px от краёв экрана.
           Паддинг фрейма по бокам 20px, поэтому -15px даёт зазор 5px. */
        width: auto !important;
        margin: 0 -15px 8px;
    }

    .chat-in-frame {
        width: 100% !important;
        height: auto !important;
        min-height: 150px;
        border-radius: var(--radius-lg) !important;
        position: relative;
    }

    /* Кружок с крестиком — на середине верхней границы чата */
    .chat-collapse-btn {
        display: none;
        position: absolute;
        top: 0;
        right: 12px;
        z-index: 40;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: var(--color-primary);
        color: var(--color-black, #000);
        box-shadow: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        line-height: 0;
        transform: translateY(-50%);
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }

    .chat-collapse-btn svg {
        display: block;
        flex-shrink: 0;
        pointer-events: none;
    }

    .state-chat .chat-collapse-btn {
        display: flex;
    }

    body:not(.state-chat) .chat-collapse-btn {
        display: none !important;
    }

    /* Без «подложки»: поле ввода сливается с фоном чата, как в макете */
    .chat-in-frame-input-area {
        padding: 12px !important;
        background: none !important;
    }

    .chat-input-bar {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 4px 6px !important;
    }

    #chat-input {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        font-size: 14px !important;
    }

    /* Свёрнутый чат: только поле-приглашение, без иконок и служебных блоков */
    body:not(.state-chat) .chat-in-frame-messages,
    body:not(.state-chat) .chat-voice-area,
    body:not(.state-chat) .chat-in-frame-quick-buttons,
    body:not(.state-chat) .chat-attachments-preview,
    body:not(.state-chat) .chat-attach-btn,
    body:not(.state-chat) .chat-megaphone-btn,
    body:not(.state-chat) .chat-send-btn {
        display: none !important;
    }

    body:not(.state-chat) .chat-in-frame {
        cursor: pointer;
    }

    body:not(.state-chat) .chat-in-frame-input-area {
        flex: 1;
    }

    body:not(.state-chat) #chat-input {
        min-height: 110px;
        pointer-events: none; /* тап открывает чат, а не клавиатуру */
    }

    /* ===== Режим чата: чат зафиксирован, страница не скроллится ===== */
    body.state-chat {
        overflow: hidden !important;
        height: 100dvh !important;
    }

    .state-chat .figma-frame {
        height: 100dvh !important;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 44px; /* вплотную к кнопке назад/контакты */
    }

    .state-chat .chat-wrapper {
        position: relative !important;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        overflow: visible !important;
        z-index: 30;
        pointer-events: auto !important;
    }

    .state-chat .chat-in-frame {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: auto !important;
        min-height: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        overflow: hidden; /* скругление; кнопка снаружи, в .chat-wrapper */
    }

    /* Не перехватывать клики по крестику, который выступает вверх */
    .state-chat .footer {
        pointer-events: none !important;
    }

    /* Скроллится только переписка */
    .chat-in-frame-messages {
        padding: 16px 16px 8px !important;
        font-size: 14px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Компактнее межстрочный интервал и отступы в сообщениях */
    .chat-in-frame-messages .message {
        line-height: 1.1;
        padding: 8px 12px;
        margin-bottom: 6px;
    }
    .chat-in-frame-messages .message-text p,
    .chat-in-frame-messages .message-text ul,
    .chat-in-frame-messages .message-text ol {
        margin-bottom: 0.25em;
    }
    .chat-in-frame-messages .message-text p:last-child {
        margin-bottom: 0;
    }

    .chat-in-frame-quick-buttons {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 4px 4px;
    }

    .quick-btn {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }

    /* ===== Нижние кнопки: контакты (главная) / назад (раздел, чат) ===== */
    .back-button {
        height: 44px;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    .mobile-contacts-btn {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 44px;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        background-color: var(--color-primary);
        align-items: center;
        justify-content: center;
        padding: 0;
        box-shadow: none;
        cursor: pointer;
        z-index: 200;
    }

    .mobile-contacts-btn span {
        font-size: var(--font-size-small);
        letter-spacing: var(--letter-spacing-wide);
        color: var(--color-black);
    }

    /* Главная (и главная+чат, Frame 2): полоса «контакты» */
    .state-home .mobile-contacts-btn {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .state-home .back-button {
        display: none !important;
    }

    /* Раздел (± чат, Frames 3–8): полоса «назад», контакты скрыты */
    .state-section-create .mobile-contacts-btn,
    .state-section-implement .mobile-contacts-btn,
    .state-section-train .mobile-contacts-btn {
        display: none !important;
    }

    .state-section-create .back-button,
    .state-section-implement .back-button,
    .state-section-train .back-button {
        display: flex !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    /* Фикс редкого пропадания текста «назад»/«контакты»: на iOS элементы
       position:fixed с transform иногда не перекрашивают вложенный текст,
       пока не тронешь экран. Убираем анимацию перехода и форсируем
       отдельный слой отрисовки у текста, чтобы он всегда был виден. */
    .back-button,
    .mobile-contacts-btn {
        transition: none !important;
    }
    .back-button span,
    .mobile-contacts-btn span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* ===== Контакты-всплывашка ===== */
    .contacts-popup {
        width: calc(100% - 40px);
        max-width: 360px;
    }

    /* ===== Клавиатура открыта: остаётся только чат ===== */
    .state-keyboard .header,
    .state-keyboard .main,
    .state-keyboard .footer,
    .state-keyboard .back-button,
    .state-keyboard .mobile-contacts-btn {
        display: none !important;
    }

    /* Клавиатура открыта: фрейм с чатом жёстко прибит к верху ВИДИМОЙ области
       (var(--vvh) = visualViewport.height, без клавиатуры). Так поле ввода
       оказывается прямо над клавиатурой, и страница никуда не «улетает». */
    .state-keyboard .figma-frame {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--vvh, 100dvh) !important;
        min-height: 0 !important;
        padding: 8px 5px !important;   /* 5px по бокам — как просили */
        overflow: hidden;
    }

    .state-keyboard .chat-wrapper {
        order: 1;
        flex: 1 1 auto;
        min-height: 0;
        margin: 0 !important;          /* сбрасываем -15px, фрейм уже 5px */
    }

    .state-keyboard .chat-in-frame {
        height: 100% !important;
        min-height: 0;
    }

    /* Отключаем десктопные состояния прозрачности при чате */
    .state-chat .header {
        opacity: 1 !important;
    }

    .state-chat .main {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .state-chat .footer {
        opacity: 1 !important;
        pointer-events: none !important;
    }

    /* =========================================================
       Переопределения десктопных правил с высокой специфичностью
       (states.css использует #id + !important — здесь зеркальные
       селекторы, mobile.css подключён последним и побеждает)
       ========================================================= */

    /* Подразделы: сброс десктопных координат 1920×1080 */
    .state-section-create:not(.state-chat) #section-create .subsection:nth-child(1),
    .state-section-implement:not(.state-chat) #section-implement .subsection:nth-child(1),
    .state-section-train:not(.state-chat) #section-train .subsection:nth-child(1),
    .state-section-create:not(.state-chat) #section-create .subsection:nth-child(2),
    .state-section-implement:not(.state-chat) #section-implement .subsection:nth-child(2),
    .state-section-train:not(.state-chat) #section-train .subsection:nth-child(2),
    .state-section-create:not(.state-chat) #section-create .subsection:nth-child(3),
    .state-section-implement:not(.state-chat) #section-implement .subsection:nth-child(3),
    .state-section-train:not(.state-chat) #section-train .subsection:nth-child(3),
    .state-section-create.state-chat #section-create .subsection:nth-child(1),
    .state-section-implement.state-chat #section-implement .subsection:nth-child(1),
    .state-section-train.state-chat #section-train .subsection:nth-child(1),
    .state-section-create.state-chat #section-create .subsection:nth-child(2),
    .state-section-implement.state-chat #section-implement .subsection:nth-child(2),
    .state-section-train.state-chat #section-train .subsection:nth-child(2),
    .state-section-create.state-chat #section-create .subsection:nth-child(3),
    .state-section-implement.state-chat #section-implement .subsection:nth-child(3),
    .state-section-train.state-chat #section-train .subsection:nth-child(3) {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        transform: none !important;
    }

    /* Заголовок раздела в шапке: не 80px, а мобильный размер */
    .state-section-create .header-brand .section-title-in-header,
    .state-section-implement .header-brand .section-title-in-header,
    .state-section-train .header-brand .section-title-in-header {
        position: static !important;
        left: auto !important;
        top: auto !important;
        font-size: 24px !important;
        width: auto !important;
    }

    /* Лого: всегда один размер, без анимаций увеличения
       (включая фазу закрытия раздела state-section-closing) */
    .state-section-create .header-brand .logo-pyramid,
    .state-section-implement .header-brand .logo-pyramid,
    .state-section-train .header-brand .logo-pyramid,
    body.state-section-closing .header-brand .logo-pyramid,
    body.state-section-closing.state-section-transition .header-brand .logo-pyramid {
        width: 56px !important;
        height: 44px !important;
    }

    .logo-pyramid,
    .logo-text,
    .header-brand {
        transition: none !important;
    }

    /* Главная + чат: разделы без десктопных координат */
    .state-home.state-chat .sections .section:nth-child(1),
    .state-home.state-chat .sections .section:nth-child(2),
    .state-home.state-chat .sections .section:nth-child(3) {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* Раздел + чат: подразделы компактные, без ограничений высоты */
    .state-section-create.state-chat .subsection,
    .state-section-implement.state-chat .subsection,
    .state-section-train.state-chat .subsection {
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* Подпись робота — по левому краю */
    .robot-label {
        text-align: left !important;
    }

    /* ===== Мобайл: без анимации «перелетающего» заголовка ===== */
    /* Прячем летящее слово полностью */
    .section-title-fly,
    .section-title-fly.active {
        display: none !important;
    }
    /* Заголовок в шапке показываем сразу во время перехода (и вперёд, и назад),
       чтобы не было пустого промежутка, пока слово «летело» */
    .state-section-transition .header-brand .section-title-in-header {
        opacity: 1 !important;
        transition: none !important;
    }
}