/* ============================================================
   Адаптив: планшет (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
    /* Навбар вынесен из .lk-page в собственный sticky-контейнер (lk.php) — отступы контейнера
       и спейсера над ним должны совпадать с боковыми отступами .lk-page, верхний у .lk-page — 0. */
    .lk-page {
        padding: 0 16px 16px;
    }

    .lk-header-container {
        padding: 0 16px;
    }

    .lk-header-spacer {
        height: 16px;
    }

    /* Контент в одну колонку, сайдбар сверху горизонтально */
    .lk-content {
        flex-direction: column;
        min-width: 0;
    }

    /* Основная колонка не должна быть шире контейнера */
    .lk-content__main {
        width: 100%;
        min-width: 0;
    }

    /* Сайдбар сворачивается: виден только активный пункт (база — Tailwind,
       состояние :not(.is-open) — misfit, остаётся в CSS) */
    .lk-menu-left:not(.is-open) .lk-menu-left__item:not(.is-active) {
        display: none;
    }

    .lk-menu-left:not(.is-open) .lk-menu-left__item.is-active {
        background-color: transparent;
        color: var(--lk-text);
    }

    /* Колонка настроек распознавания на всю ширину (контейнер/строка — Tailwind) */
    .lk-recognition__settings {
        width: 100%;
    }

    /* Карточка файла: паддинг 16px, верх в две строки (дата/файл, затем действия) */
    .lk-file-card {
        padding: 0 16px;
    }

    .lk-file-card__top {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .lk-file-card__main {
        width: 100%;
        min-width: 0;
    }

    /* Дата и время в одну строку (в макете: «26.10.25 22:48») */
    .lk-file-card__date {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }

    /* Имя занимает строку целиком — снимаем десктопный лимит 220px, обрезаем только по ширине карточки */
    .lk-file-card__file-name {
        max-width: none;
        min-width: 0;
    }

    /* Действия в столбик по макету: «Открыть плеер», «Создать AI-отчёт», затем ряд Video/Audio
       (по пол-ширины), внизу «Скачать» во всю ширину. Разделители отделяют имя от действий и
       текстовые действия от кнопок скачивания. Единый макет для планшета и мобильного. */
    .lk-file-card__actions-top {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        border-top: 1px solid rgba(var(--lk-slate), 0.08);
        padding-top: 16px;
    }

    /* Открыть плеер (ссылка) — первым, Создать AI-отчёт (кнопка) — вторым */
    .lk-file-card__actions-top > a.lk-btn-text {
        order: 1;
    }

    .lk-file-card__actions-top > button.lk-btn-text {
        order: 2;
    }

    .lk-btn-text {
        height: 40px;
    }

    /* Video/Audio в один ряд, каждая на пол-ширины. Порядок: Video слева, Audio справа
       (в DOM Audio идёт первой, поэтому задаём order). Сверху — разделитель. */
    .lk-file-card__media-group {
        order: 3;
        flex-direction: row;
        width: 100%;
        gap: 12px;
        margin-top: 10px;
        padding-top: 16px;
        border-top: 1px solid rgba(var(--lk-slate), 0.08);
    }

    .lk-file-card__media-btn[data-slot="video-btn"] {
        order: 1;
    }

    .lk-file-card__media-btn[data-slot="audio-btn"] {
        order: 2;
    }

    .lk-file-card__media-btn {
        flex: 1;
        height: 40px;
        justify-content: center;
    }

    /* Если кнопка одна (только аудио или только видео) — не растягиваем на всю ширину:
       остаётся на пол-ряда и прижата влево (как в макете). */
    .lk-file-card__media-btn:only-child {
        flex: 0 0 auto;
        width: calc(50% - 6px);
    }

    /* «Скачать» — во всю ширину, в самом низу блока действий */
    .lk-file-card__download-wrap {
        order: 4;
        width: 100%;
        margin-left: 0;
    }

    .lk-file-card__download {
        width: 100%;
        height: 40px;
        justify-content: center;
    }

    .lk-file-card__download-btn {
        flex: 1;
        justify-content: center;
    }

    .lk-file-card__meta {
        padding-left: 0;
    }

    /* Карточка перестроена в колонку. bottom-actions разворачиваем (display:contents), чтобы
       «Саммари» и «Готовые AI-отчёты» попали в общий поток нижней строки по отдельности.
       position:static — фолбэк, если display:contents не поддержан (тогда как раньше). */
    .lk-file-card__bottom-actions {
        position: static;
        transform: none;
        display: contents;
    }

    /* «Саммари» — отдельной строкой во всю ширину сразу под «Скачать» (как в макете), а не
       в нижней строке рядом с языком/спикерами. «Готовые AI-отчёты» остаётся в нижней строке.
       На десктопе bottom-actions спозиционирован absolute — эти правила действуют только здесь. */
    .lk-file-card__bottom {
        flex-wrap: wrap;
    }

    .lk-file-card__summary-wrap {
        order: -1;
        flex: 1 0 100%;
        display: flex;      /* десктоп-версия закомментировала display:flex — на мобиле он нужен для кнопки во всю ширину */
        margin-left: 0;     /* сбрасываем десктопный сдвиг (margin-left:55px), иначе «Саммари» уезжает вправо на мобиле */
    }

    .lk-file-card__summary-wrap .lk-summary {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   Адаптив: мобильный (≤640px)
   ============================================================ */
@media (max-width: 640px) {
    .lk-page {
        padding: 0 8px 8px;
    }

    .lk-header-container {
        padding: 0 8px;
    }

    .lk-header-spacer {
        height: 8px;
    }

    /* Настройки → двухстрочные карточки со стрелкой вправо */
    .lk-recognition__setting {
        justify-content: space-between;
        padding: 12px 12px 12px 16px;
    }

    .lk-recognition__setting-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .lk-recognition__setting-head {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .lk-recognition__setting-value {
        margin-left: 0;
    }

    .lk-recognition__setting-arrow {
        display: inline-flex;
    }

    /* Показываем только первые 2 настройки + тоггл */
    .lk-recognition__settings-toggle {
        display: flex;
    }

    .lk-recognition__settings:not(.is-expanded) .lk-recognition__setting--more {
        display: none;
    }

    /* Карточка файла — линеаризуется */
    .lk-file-card__top {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    /* Дата + иконка-источник в один ряд, имя файла переносится ниже */
    .lk-file-card__main {
        width: 100%;
        flex-wrap: wrap;
        gap: 12px 8px;
    }

    .lk-file-card__link-icon {
        margin-left: auto;
    }

    .lk-file-card__file {
        flex: 1 1 100%;
    }

    /* Раскладка действий (плеер/AI, ряд Video/Audio, «Скачать» во всю ширину), инлайн-дата и
       снятие лимита имени — общие для планшета и мобильного и живут в блоке
       @media (max-width: 1024px) выше. Здесь — только специфика мобильного (низ карточки). */

    /* Низ карточки: язык/спикеры слева, кнопки справа (в строку) */
    .lk-file-card__bottom {
        align-items: flex-end;
        gap: 20px;
    }

    .lk-file-card__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .lk-file-card__actions-bottom {
        margin-left: auto;
    }
}

/* ============================================================
   Адаптив новых состояний строки (оплата, ошибка, процесс, архив).
   Мобильный макет — нода Figma 1220:18977 (карточка вертикально).
   ============================================================ */
@media (max-width: 1024px) {
    /* Отступы карточки как в мобильном макете */
    .lk-file-card__inner {
        padding: 16px 0;
        gap: 16px;
    }

    /* Блок оплаты — на всю ширину, действие во всю строку */
    .lk-file-card__payment {
        max-width: none;
        width: 100%;
    }

    .lk-file-card__payment-action {
        width: 100%;
    }

    .lk-file-card__pay {
        width: 100%;
        height: 40px;
    }

    /* Сообщение об ошибке и блок процесса — на всю ширину */
    .lk-file-card__error-top {
        width: 100%;
    }

    .lk-file-card__processing {
        width: 100%;
        margin: 0;
        justify-content: flex-start;
    }

    /* Архив: верх в строку с переносом — дата+ZIP в ряд, имя/оплата ниже */
    .lk-file-card--archive .lk-file-card__top {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px 8px;
    }

    .lk-file-card--archive .lk-file-card__archive-zip {
        margin-top: 0;
        margin-left: auto;
        order: 1;
    }

    .lk-file-card--archive .lk-file-card__date-block {
        order: 0;
    }

    /* Имя архива, блок оплаты и скачивание — каждый на своей строке во всю ширину */
    .lk-file-card--archive .lk-file-card__archive-file,
    .lk-file-card--archive[data-need-pay="1"] .lk-file-card__archive-file {
        flex: 1 1 100%;
        order: 2;
    }

    .lk-file-card__archive-payment {
        flex: 1 1 100%;
        order: 3;
    }

    .lk-file-card__archive-download {
        flex: 1 1 100%;
        order: 3;
    }

    .lk-file-card__archive-download .lk-file-card__download-wrap {
        width: 100%;
    }

    .lk-file-card__archive-download .lk-file-card__download {
        width: 100%;
        height: 40px;
        justify-content: center;
    }

    /* В мобильном макете у архива с оплатой нижние действия видны */
    .lk-file-card--archive[data-need-pay="1"] .lk-file-card__bottom {
        display: flex;
    }
}