/* ============================================================
   File card (Frame 53594) — карточка-misfit: сложный адаптив + состояния.
   Обёртка списка и шапка таблицы переехали в Tailwind (см. _file-table.php,
   _header.php). Здесь остаётся карточка целиком.
   ============================================================ */

/* Шапка таблицы: сортировка по «Дате» — шеврон вниз = desc (новые сверху),
   вверх = asc. Крутим так же, как стрелку сворачивания архива (см. ниже). */
[data-lk-sort] svg { transition: transform 140ms; }
[data-lk-sort][data-dir="asc"] svg { transform: rotate(180deg); }

/* Шапка таблицы: раньше правый столбец «Плеер с таймкодами» упирался в скруглённый угол
   (текст шире своего w-[127px], вылезал за край), чинили асимметричным padding-right:40px
   (при px-5=20px слева) — из-за этого весь правый блок колонок сидел не по центру своей
   рамки. Настоящая причина — сам текст (150px) шире объявленной колонки (127px); увеличили
   колонку в _header.php до w-[150px], текст умещается — padding снова симметричный (px-5). */

/* Карточка файла (Frame 53594) */
.lk-file-card {
    background-color: var(--lk-white);
    border-radius: 16px;
    padding: 0 20px;
    box-shadow: 0 1px 3px rgba(21, 21, 21, 0.04), 0 0 0 1px rgba(var(--lk-slate), 0.06);
}

.lk-file-card__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0;
}

/* Верхняя строка карточки. align-items:flex-start (не center) — иначе .main и .actions-top
   центрируются друг относительно друга по высоте и съезжают при любой разнице их высот
   (например, когда включён AI-отчёт), из-за чего плавает и разделительная полоса ниже. */
.lk-file-card__top {
    position: relative;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

/* Разделительная полоса между строкой файла (имя/плеер/AI-отчёт/скачать) и строкой мета
   (Audio/Video, язык/спикеры, обсудить с ИИ+готовые отчёты, саммари+удалить). Раньше сидела
   бордером в самом низу .lk-file-card__top (под обеими строками сразу) — подняли абсолютным
   позиционированием. 52px — после нижнего края .lk-file-card__file-duration (46px) и перед
   стартом второй строки (62px: и Audio/Video — см. margin-top у .lk-file-card__media-group,
   и остальные колонки actions-top — 36px кнопка + 26px гэп, см. .lk-file-card__player-group
   и соседние) — подобрано так, чтобы не наезжать на контент ни слева, ни справа. */
.lk-file-card__row-divider {
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(var(--lk-slate), 0.08);
}

.lk-file-card__main {
    display: flex;
    gap: 20px;
    /* stretch (не flex-start): .lk-file-card__date-col ниже растягивается на высоту всей строки,
       чтобы прижать площадку (Zoom/Ссылка) к низу, на одну линию с Audio/Video — см. комментарий
       там же. Высоту задаёт колонка файла (.lk-file-card__file), у остальных детей (иконки со
       своей фиксированной шириной/высотой, .lk-file-card__file с auto-высотой) это ничего не меняет. */
    align-items: stretch;
    /* Ширина ровно как первый блок шапки (дата 82px + gap 72px + файл 300px, см. _header.php) —
       иначе всё, что идёт после (.lk-file-card__actions-top), уезжает относительно колонок шапки. */
    width: 512px;
    flex-shrink: 0;
}

/* Колонка даты: сверху дата, снизу — площадка источника (Zoom/Телемост/…/«Ссылка»), см.
   .lk-file-card__platform. Тот же приём, что и у карточки встречи (meetings.css): подпись
   переменной длины не должна раздвигать колонку файла, поэтому ширина фиксирована (бейдж 24 +
   gap 10 + дата «04.08.2026» 14px ≈ 72 + запас); длинная подпись переносится в отступ до колонки
   файла визуально, ничего не раздвигая. */
.lk-file-card__date-col {
    display: flex;
    flex-direction: column;
    flex: 0 0 112px;
    width: 112px;
    /* Пока файл не распознан, у .lk-file-card__file нет строки Audio/Video (короче: только имя +
       длительность) — без этого пола площадка, прижатая margin-top:auto, вставала бы выше линии
       разделителя. 76px = 52 (row-divider) + 6 + ~18 (строка площадки), как у карточки встречи. */
    min-height: 76px;
}

.lk-file-card__date-block {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* Площадка источника — на одну линию с Audio/Video (см. .lk-file-card__row-divider: вторая
   строка карточки стартует на 62px, margin-top:auto дотягивает подпись туда без ручных отступов).
   :empty скрывает — у обычной загрузки (не по ссылке) подписи нет вообще. */
.lk-file-card__platform {
    margin-top: auto;
    color: var(--lk-violet);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.lk-file-card__platform:empty {
    display: none;
}

.lk-file-card__platform:hover {
    text-decoration: underline;
}

/* Иконка «внешняя ссылка» после подписи. Псевдоэлемент, а не тег внутри ссылки: file-list.js
   подставляет подпись через data-bind (textContent), любой вложенный <svg> стёрся бы при
   перерисовке. mask + currentColor — цвет иконки следует за цветом текста. */
.lk-file-card__platform::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    vertical-align: -2px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 2.6H13v3.6M13 2.6 7.8 7.8'/%3E%3Cpath d='M12.4 9.6v2.6a1.4 1.4 0 0 1-1.4 1.4H3.8a1.4 1.4 0 0 1-1.4-1.4V5a1.4 1.4 0 0 1 1.4-1.4h2.6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 2.6H13v3.6M13 2.6 7.8 7.8'/%3E%3Cpath d='M12.4 9.6v2.6a1.4 1.4 0 0 1-1.4 1.4H3.8a1.4 1.4 0 0 1-1.4-1.4V5a1.4 1.4 0 0 1 1.4-1.4h2.6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Бейдж статуса (фон + иконка по статусу), заполняется в file-list.js */
.lk-file-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 4px;
    background-color: var(--lk-bg);
}

.lk-file-card__status-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.lk-file-card__status-icon svg { width: 100%; height: 100%; display: block; }

.lk-file-card__status--recognized { background-color: #C9FFEF; }
.lk-file-card__status--recognized .lk-file-card__status-icon { color: #40DB88; }

.lk-file-card__status--error { background-color: #FDE9E9; }
.lk-file-card__status--error .lk-file-card__status-icon { color: #FF122E; }

.lk-file-card__status--in-progress { background-color: #FDF8E9; }
.lk-file-card__status--in-progress .lk-file-card__status-icon { color: #FFD400; }

.lk-file-card__status--pause { background-color: var(--lk-bg); }
.lk-file-card__status--pause .lk-file-card__status-icon { color: #B7BFCA; }

.lk-file-card__status--payment { background-color: #FDF2E9; }
.lk-file-card__status--payment .lk-file-card__status-icon { color: #FF9317; }

.lk-file-card__date {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 5px;
}

.lk-file-card__date-day {
    font-size: 14px;
    line-height: 1.1;
    color: var(--lk-text);
    white-space: nowrap;
}

.lk-file-card__date-time {
    font-size: 14px;
    line-height: 1.3;
    color: var(--lk-grey-light);
    white-space: nowrap;
}

/* Иконка ссылки на источник — для файлов по ссылке и встреч (есть url источника).
   Показываем/прячем через visibility, а не display: скрытая иконка остаётся флекс-элементом и
   резервирует своё место (16px + gap), поэтому имя файла у файлов БЕЗ иконки выровнено по той же
   вертикали, что и у файлов с иконкой (иначе display:none схлопывал и бокс, и gap — имя уезжало влево). */
.lk-file-card__link-icon {
    display: inline-flex;
    visibility: hidden;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--lk-icon-grey);
}

.lk-file-card[data-url-file="1"] .lk-file-card__link-icon,
.lk-file-card[data-meeting="1"] .lk-file-card__link-icon {
    visibility: visible;
}

.lk-file-card__link-icon svg,
.lk-file-card__link-icon img { width: 100%; height: 100%; display: block; }

/* Иконка Telegram — файл прислан через бота (is_file_from_messenger). Тот же приём, что у
   .lk-file-card__link-icon: скрываем через visibility, а не display, чтобы не сдвигать имя файла.
   Обе иконки (link-icon и telegram-icon) — переключаемые «слоты» в одном и том же ряду: у
   каждого файла видна максимум одна из них, но раньше они сидели в РАЗНЫХ зарезервированных
   позициях (link-icon — сразу после даты, telegram — на 36px правее), поэтому при пролистывании
   списка иконка «прыгала» то левее, то правее в зависимости от типа файла.
   margin-left: -36px возвращает telegram-icon точно в позицию link-icon (совпадает по факту
   измерений), чтобы все файлы, независимо от типа, показывали свою иконку на одной вертикали. */
.lk-file-card__telegram-icon {
    display: inline-flex;
    visibility: hidden;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 3px;
    margin-left: -36px;
}

.lk-file-card[data-from-messenger="1"] .lk-file-card__telegram-icon {
    visibility: visible;
}

.lk-file-card__telegram-icon svg,
.lk-file-card__telegram-icon img { width: 100%; height: 100%; display: block; }

.lk-file-card__file {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Фиксированная ширина как у колонки «Исходный файл» в шапке (300px) — иначе flex:1 растягивает
       блок на всю освободившуюся ширину .lk-file-card__main и между (коротким) именем и кнопками
       действий справа зияет пустота. */
    width: 300px;
    flex: none;
    min-width: 0;
}

.lk-file-card__file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    /* min-width:0 — иначе flex-цепочка не сжимает длинное имя ниже его «естественной» ширины
       (актуально для архивов: у обычного файла .lk-file-card__file-name дополнительно ограничен
       max-width, а у .lk-file-card__archive-name такого предела нет — без этого длинное имя
       архива наезжало на статус обработки справа, см. .lk-file-card__archive-head рядом). */
    min-width: 0;
}

.lk-file-card__file-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--lk-dark-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Ограничиваем длину имени — длинные названия обрезаются многоточием (long-filenam…),
       чтобы не растягивать строку. Полное имя видно в подсказке (title) и в режиме переименования. */
    max-width: 220px;
}

/* Режим инлайн-редактирования названия */
.lk-file-card__file-name[contenteditable="true"] {
    overflow: visible;
    text-overflow: clip;
    outline: none;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 6px;
    background-color: var(--lk-white);
    box-shadow: 0 0 0 1.5px var(--lk-violet);
    cursor: text;
}

.lk-file-card__file-duration {
    font-size: 14px;
    line-height: 1.3;
    color: var(--lk-grey-light);
}

/* Правая часть верхней строки — действия. justify-content:space-between с ровно теми же
   колонками, что и в шапке (Результат/AI-отчёт/Плеер), — первый и последний элемент садятся
   точно на левый/правый край этого блока, так же как соответствующие подписи в _header.php. */
.lk-file-card__actions-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    gap: 12px;
    /* Группа «Результат» с Саммари внутри (см. .lk-file-card__result-group) не всегда помещается
       в одну линию с «Открыть плеер» без переполнения карточки — переносим по необходимости,
       а не даём вылезти за край. */
    flex-wrap: wrap;
    row-gap: 10px;
}

/* Завершённый файл: выравниваем действия по верху, чтобы «Скачать»/AI-отчёт/плеер стояли в одну
   линию с верхней кнопкой (Audio), а стопка Audio/Video росла вниз (Video под Audio).
   justify-content НЕ переопределяем — на нём и держится выравнивание по колонкам шапки.
   Статусы обработки (downloading/converting/transcript/recording) — та же причина: без
   flex-start спиннер+текст (.lk-file-card__processing) центрируются по высоте всей строки
   и наезжают на .lk-file-card__row-divider. */
.lk-file-card[data-status="completed"] .lk-file-card__actions-top,
.lk-file-card:not(.lk-file-card--archive)[data-status="downloading"] .lk-file-card__actions-top,
.lk-file-card:not(.lk-file-card--archive)[data-status="converting"] .lk-file-card__actions-top,
.lk-file-card:not(.lk-file-card--archive)[data-status="transcript"] .lk-file-card__actions-top,
.lk-file-card:not(.lk-file-card--archive)[data-status="recording"] .lk-file-card__actions-top,
.lk-file-card:not(.lk-file-card--archive)[data-status="error"] .lk-file-card__actions-top {
    align-items: flex-start;
}

/* Три колонки actions-top (player/ai/result-group) сидят через justify-content:space-between —
   значит их позиция зависит от ширины ВСЕХ трёх (общий свободный остаток делится поровну между
   зазорами). Без фиксированной width колонка «Результат» то у́же (только «Скачать»), то шире
   (когда появляется Саммари) — из-за этого «Создать AI-отчёт» между ними плавает то влево, то
   вправо от карточки к карточке. width + flex-shrink:0 держат все три колонки одного размера
   независимо от контента строки — тогда всё стабильно. Ширины — по самому широкому реальному
   контенту (Саммари+иконка+удалить) с небольшим запасом. */
/* align-items ВСЕГДА flex-start — «Скачать» должен стоять на одном и том же месте (под
   «РЕЗУЛЬТАТ» в шапке) независимо от того, есть в строке саммари или нет. Раньше здесь было
   условное flex-end «без саммари» — но align-items двигает ОБА элемента колонки (и «Скачать»
   сверху тоже), из-за чего сама кнопка «Скачать» прыгала между двумя позициями. Правильное
   место для условной логики — только нижняя строка, см. .lk-file-card__result-group-bottom
   ниже. */
.lk-file-card__result-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    width: 215px;
    flex-shrink: 0;
}

.lk-file-card__result-group-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* width: 100% (= 215px .lk-file-card__result-group) — та же ширина и то же левое выравнивание
   (align-items: flex-start), что у .lk-file-card__download-wrap сверху, поэтому «Саммари» садится
   левым краем ровно под «Скачать». justify-content: space-between разводит «Саммари» влево и
   мусорку вправо, к правому краю колонки. Без саммари в строке остаётся одна мусорка — она тоже
   идёт к правому краю (правило ниже переключает на flex-end, иначе одинокая мусорка стояла бы
   слева, там же, где встала бы «Саммари»).
   Раньше строка была узкой (130px, под ширину «Скачать») и мусорка стояла под стрелкой скачивания,
   а «Саммари» — тоже там, вплотную к мусорке: узкая строка не давала развести их по разным краям
   колонки, «Саммари» с иконками шире 130px и упиралась в мусорку/съезжала левее «Скачать». */
.lk-file-card__result-group-bottom {
    width: 100%;
    justify-content: space-between;
}

.lk-file-card__result-group-bottom:not(:has(.lk-file-card__summary-wrap)) {
    justify-content: flex-end;
}

/* Колонка «Плеер с таймкодами»: плеер+поделиться сверху, язык/спикеры снизу.
   gap/width — см. комментарий у .lk-file-card__result-group. */
.lk-file-card__player-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    width: 270px;
    flex-shrink: 0;
}

.lk-file-card__player-group-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Колонка «AI-отчёт»: «Обсудить с ИИ» сверху — самостоятельное действие, gap:26px отделяет его
   заметным промежутком от пары «Создать AI-отчёт»/«Готовые AI-отчёты» ниже (см. следующий блок).
   width — см. комментарий у .lk-file-card__result-group. */
.lk-file-card__ai-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    width: 160px;
    flex-shrink: 0;
}

/* «Создать AI-отчёт» и «Готовые AI-отчёты» — плотная пара (gap:6px): «Готовые» это прямой
   результат «Создать», логически они рядом. Колонка узкая (160px) — «Создать» и бейдж «Готовые»
   в ряд не помещались бы, ставим друг под другом. «Готовые AI-отчёты» показывается только если
   есть завершённые отчёты, поэтому чаще всего тут всего один элемент — column ничего не меняет
   визуально в этом случае. */
.lk-file-card__ai-group-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* «Готовые AI-отчёты» (.lk-ready-reports, ниже) — иконка в 24px-бейдже вместо обычных 16px у
   «Обсудить с ИИ»/«Создать AI-отчёт»: текст всех трёх строк не совпадал по левому краю (бейдж+gap
   шире, чем просто иконка+gap). Раздвигаем слот иконки у обеих обычных строк до тех же 24px (сама
   иконка внутри остаётся 16px, просто центрируется) — общий gap:4px у .lk-btn-text не трогаем,
   итоговый отступ (24+4=28px) совпадает с уменьшенным бейджем ниже. Без media-query — действует
   и на десктопе, и на мобиле (там колонки уже одна под другой). Важно выровнять именно все три:
   «Обсудить с ИИ» сверху отделена от пары «Создать»/«Готовые» большим gap'ом (см.
   .lk-file-card__ai-group), но по левому краю иконки всё равно должна быть с ними на одной
   вертикали — иначе разъезжается сама с собой при переходе через gap. */
.lk-file-card__ai-group [data-lk-ai-report] > .lk-btn-text__icon,
.lk-file-card__ai-group [data-lk-ai-chat] > .lk-btn-text__icon {
    width: 24px;
    justify-content: center;
}

/* Сам svg внутри — base-правило .lk-btn-text__icon svg{width:100%} растягивало значок вслед
   за расширенным до 24px слотом (был 16px) — иконка визуально "поплыла"/раздулась. Фиксируем
   её на исходных 16px, слот вокруг просто центрирует. */
.lk-file-card__ai-group [data-lk-ai-report] > .lk-btn-text__icon svg,
.lk-file-card__ai-group [data-lk-ai-report] > .lk-btn-text__icon img,
.lk-file-card__ai-group [data-lk-ai-chat] > .lk-btn-text__icon svg,
.lk-file-card__ai-group [data-lk-ai-chat] > .lk-btn-text__icon img {
    width: 16px;
    flex-shrink: 0;
}

/* «Создать AI-отчёт»/«Готовые AI-отчёты» переиспользуют .lk-btn-text (36px, из-за padding для
   области клика) — та же высота, что и у «Обсудить с ИИ» сверху, но здесь, в плотной паре,
   36px+padding визуально разрежали бы и без того узкий gap:6px. Прижимаем высоту и убираем
   padding только в этом контексте — пара выглядит компактной, как и задумано. */
.lk-file-card__ai-group-bottom .lk-btn-text {
    height: 24px;
    padding: 0;
}

/* Кнопка "Скачать" — фиолетовый сплит (по образцу саммари): основная часть качает,
   стрелка открывает поп-ап настроек. Внутренние отступы дают сами кнопки-половинки. */
.lk-file-card__download {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    background: var(--lk-violet);
    border-radius: 12px;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* «Саммари» (то же слово длиной, но шире по начертанию — двойная «м») выходит заметно шире
   «Скачать» при одинаковых отступах — добавляем немного паддинга, чтобы пилюли визуально
   сравнялись по ширине. */
.lk-file-card__download-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px 8px 16px;
    background: transparent;
    border: 0;
    border-radius: 12px 0 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lk-white);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms;
}

.lk-file-card__download-btn:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

.lk-file-card__download-arrow {
    display: inline-flex;
    align-items: center;
    padding: 8px;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0 12px 12px 0;
    color: var(--lk-white);
    cursor: pointer;
    transition: background-color 120ms;
}

.lk-file-card__download-arrow:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

.lk-file-card__btn-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--lk-white);
}

.lk-file-card__btn-icon svg { width: 100%; height: 100%; display: block; }

.lk-file-card__download-chevron {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    color: var(--lk-white);
}

.lk-file-card__download-chevron svg { width: 16px; height: 16px; display: block; }

/* Кнопки скачивания исходной медиа «Audio» / «Video» — теперь под именем файла (колонка
   «Исходный файл»), в один ряд. Тот же приглушённый формат, что и «Поделиться»
   (.lk-file-card__share) — сплошной фиолетовый фон смотрелся слишком тяжело. */
.lk-file-card__media-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* Доп. отступ сверху (сверх обычного 4px-гэпа .lk-file-card__file) — чтобы кнопки Audio/Video
       начинались вровень со второй строкой остальных колонок (62px, см. .lk-file-card__row-divider
       и .lk-file-card__result-group), иначе разделительная полоса наезжает на кнопку. */
    margin-top: 12px;
}

/* Плейсхолдер до заполнения JS (fillMediaDownload заменяет его на .lk-file-card__media-group) —
   резервирует высоту строки, чтобы карточки без аудио/видео (архив и т.п.) не прыгали. */
.lk-file-card__media-row:empty {
    display: none;
}

.lk-file-card__media-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background-color: var(--lk-bg);
    color: rgba(var(--lk-slate), 0.9);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    box-sizing: border-box;
}

.lk-file-card__media-btn:hover { color: var(--lk-text); }

/* .lk-file-card__btn-icon зашит белым для тёмных (фиолетовых) кнопок — на светлом фоне
   media-btn нужен цвет самой кнопки (наследуется через currentColor у SVG). */
.lk-file-card__media-btn .lk-file-card__btn-icon { color: inherit; }

/* ============================================================
   Поп-ап скачивания файла (под кнопкой "Скачать")
   ============================================================ */
.lk-file-card__download-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* Компактные отступы: раньше поп-ап выходил за ~600px и на низких экранах (аноним) кнопка
   «Скачать» не влезала без прокрутки страницы. */
.lk-file-card__download-pop {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 40;
    display: none;
    width: 373px;
    max-width: calc(100vw - 24px);
    background-color: var(--lk-white);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(55, 54, 56, 0.18);
    box-sizing: border-box;
    cursor: default;
}

.lk-file-card__download-wrap.is-open .lk-file-card__download-pop {
    display: block;
}

/* стрелка вверх к кнопке */
.lk-file-card__download-pop::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 28px;
    width: 14px;
    height: 14px;
    background-color: var(--lk-white);
    transform: rotate(45deg);
    border-radius: 3px;
}

/* Раскрытие вверх, когда снизу не хватает места до края вьюпорта (класс ставит
   positionDownloadPop в file-list.js при каждом открытии). Ромбик — снизу, к кнопке. */
.lk-file-card__download-wrap.is-up .lk-file-card__download-pop {
    top: auto;
    bottom: calc(100% + 12px);
}

.lk-file-card__download-wrap.is-up .lk-file-card__download-pop::before {
    top: auto;
    bottom: -6px;
}

/* Поп-ап не влезает целиком ни вниз, ни вверх — высоту ограничил JS (inline max-height),
   внутри прокрутка; торчащий за рамку ромбик при overflow был бы срезан — прячем. */
.lk-file-card__download-pop.is-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lk-file-card__download-pop.is-scroll::before {
    display: none;
}

.lk-file-card__download-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--lk-text);
}

.lk-file-card__download-section {
    margin-bottom: 16px;
}

.lk-file-card__download-section:last-of-type {
    margin-bottom: 0;
}

.lk-file-card__download-subtitle {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--lk-grey);
}

.lk-file-card__download-formats {
    display: flex;
    gap: 6px;
}

.lk-file-card__download-format {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    padding: 8px 12px;
    background-color: #f8fafc;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    color: var(--lk-grey);
    transition: border-color 120ms, background-color 120ms;
}

.lk-file-card__download-format:hover:not([disabled]):not(.is-selected) {
    border-color: var(--lk-violet);
}

.lk-file-card__download-format.is-selected {
    background-color: var(--lk-violet);
    border-color: var(--lk-violet);
    color: var(--lk-white);
}

.lk-file-card__download-format[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.lk-file-card__download-format-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.lk-file-card__download-format-icon svg { width: 100%; height: 100%; display: block; }

.lk-file-card__download-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 36px;
    padding: 6px 12px;
    margin-bottom: 4px;
    background-color: var(--lk-bg);
    border-radius: 10px;
    font-size: 14px;
    color: var(--lk-text);
    cursor: pointer;
}

.lk-file-card__download-option:last-child {
    margin-bottom: 0;
}

/* переключатель-пилюля из чекбокса */
.lk-dl-toggle {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 100px;
    background-color: var(--lk-stroke);
    cursor: pointer;
    transition: background-color 140ms;
}

.lk-dl-toggle::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--lk-white);
    transition: transform 140ms;
}

.lk-dl-toggle:checked {
    background-color: var(--lk-violet);
}

.lk-dl-toggle:checked::before {
    transform: translateX(18px);
}

.lk-file-card__download-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(154, 166, 178, 0.12);
    cursor: pointer;
}

.lk-file-card__download-remember-check {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    accent-color: var(--lk-violet);
    cursor: pointer;
}

.lk-file-card__download-remember span {
    font-size: 14px;
    font-weight: 600;
    color: var(--lk-text);
}

/* Кнопки действия скачивания */
.lk-file-card__download-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.lk-file-card__download-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border: 0;
    white-space: nowrap;
    box-sizing: border-box;
}

.lk-file-card__download-action--primary {
    background: var(--lk-violet);
    color: var(--lk-white);
}

.lk-file-card__download-action--secondary {
    background: transparent;
    border: 1px solid var(--lk-violet);
    color: var(--lk-violet);
}

.lk-file-card__download-action[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.lk-file-card__download-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lk-file-card__download-action-icon--google {
    width: 22px;
    height: 20px;
}

.lk-file-card__download-action-icon svg,
.lk-file-card__download-action-icon img { width: 100%; height: 100%; display: block; }

/* Планшет/мобайл: поп-ап по центру экрана, без привязки к кнопке */
@media (max-width: 640px) {
    .lk-file-card__download-pop,
    /* .is-up мог остаться с десктопной ширины (ресайз при открытом поп-апе) — центр важнее */
    .lk-file-card__download-wrap.is-up .lk-file-card__download-pop {
        position: fixed;
        top: 50%;
        bottom: auto;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        transform: translateY(-50%);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .lk-file-card__download-pop::before {
        display: none;
    }
}

/* Текстовые кнопки (AI-отчет, плеер) */
.lk-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 6px 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--lk-grey);
    white-space: nowrap;
    text-decoration: none;
}

/* color-change тут почти незаметен (--lk-grey и --lk-text — близкие оттенки серого) — добавляем
   подчёркивание, чтобы наведение было видно однозначно, без изменений раскладки. */
.lk-btn-text:hover {
    color: var(--lk-text);
    text-decoration: underline;
}

.lk-btn-text__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lk-btn-text__icon svg,
.lk-btn-text__icon img { width: 100%; height: 100%; display: block; }

/* Нижняя строка карточки */
.lk-file-card__bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Саммари (.lk-file-card__result-group) и Готовые AI-отчёты (.lk-file-card__ai-group-bottom)
   переехали в верхнюю строку карточки, каждый в свою колонку (см. _row-templates.php) — здесь
   просто flex-элементы без позиционирования, старая абсолютная grid-раскладка не нужна. */
.lk-file-card__summary-wrap {
    display: flex;
    align-items: center;
}

.lk-file-card__ready-reports-wrap {
    display: flex;
    align-items: center;
}

/* Раньше строка меты шла отдельным полноширинным рядом внизу карточки (язык и спикеры в одну
   линию) и padding-left выравнивал её под колонку «Исходный файл» (154px). Теперь чипы вложены
   в .lk-file-card__player-group (своя колонка, язык и спикеры — друг под другом), старый
   горизонтальный отступ и раскладка не нужны. */
.lk-file-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.lk-file-card__lang,
.lk-file-card__speakers {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* Вся строка кликабельна (role=button, см. _row-templates.php), но и чип-иконка, и текст
   («Изменить язык»/«Имена спикеров») выглядели статично при наведении. Приглушаем всю строку
   целиком на hover — тот же приём, что и у .lk-recognition__setting-value. */
.lk-file-card__lang:hover,
.lk-file-card__speakers:hover {
    opacity: 0.7;
}

/* Подсказка «Поменять язык» / «Переименовать спикеров» при наведении (тот же стиль, что у
   ошибки саммари — стилизованная, без нативного title, без задержки) */
.lk-file-card__lang[data-tooltip]:not([data-tooltip=""])::after,
.lk-file-card__speakers[data-tooltip]:not([data-tooltip=""])::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    width: max-content;
    max-width: 220px;
    padding: 8px 11px;
    border-radius: 8px;
    background-color: var(--lk-text);
    color: var(--lk-white);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    box-shadow: 0 6px 20px rgba(21, 21, 21, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.lk-file-card__lang[data-tooltip]:not([data-tooltip=""])::before,
.lk-file-card__speakers[data-tooltip]:not([data-tooltip=""])::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    border: 5px solid transparent;
    border-top-color: var(--lk-text);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.lk-file-card__lang[data-tooltip]:not([data-tooltip=""]):hover::after,
.lk-file-card__lang[data-tooltip]:not([data-tooltip=""]):hover::before,
.lk-file-card__speakers[data-tooltip]:not([data-tooltip=""]):hover::after,
.lk-file-card__speakers[data-tooltip]:not([data-tooltip=""]):hover::before {
    opacity: 1;
    visibility: visible;
}

.lk-file-card__chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background-color: var(--lk-violet-bg);
    color: var(--lk-violet);
    flex-shrink: 0;
    box-sizing: border-box;
}

.lk-file-card__chip-icon svg { width: 16px; height: 16px; display: block; }

/* Флаг языка (flag-icons), как в модалке выбора языка */
.lk-file-card__chip-icon .fi {
    font-size: 12px;
    border-radius: 2px;
}

.lk-file-card__meta-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--lk-violet);
    white-space: nowrap;
}

/* «Изменить язык» / «Имена спикеров» — видимая ссылка-действие рядом с чипом (замена подсказки
   по наведению, см. _row-templates.php: раньше это было только в data-tooltip на hover). */
.lk-file-card__meta-link {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--lk-violet);
    text-decoration: underline;
    white-space: nowrap;
}

.lk-file-card__actions-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Всегда прижимаем «Поделиться»/«Ещё» вправо. Когда у файла нет языка и спикеров, слот meta
       удаляется из DOM (buildMeta → null), и при одном flex-потомке justify-content:space-between
       прижал бы кнопки влево — margin-left:auto держит их справа в любом случае. */
    margin-left: auto;
}

/* Меню "Ещё" с действием удаления */
.lk-file-card__menu {
    position: relative;
    display: inline-flex;
}

.lk-file-card__menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: none;
    padding: 10px 24px;
    background-color: var(--lk-white);
    border-radius: 16px;
    box-shadow: 0 0 7.5px rgba(12, 7, 32, 0.08);
}

.lk-file-card__menu.is-open .lk-file-card__menu-panel {
    display: block;
}

/* стрелка вверх к кнопке "Ещё" */
.lk-file-card__menu-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 12px;
    width: 14px;
    height: 14px;
    background-color: var(--lk-white);
    transform: rotate(45deg);
    border-radius: 3px;
}

.lk-file-card__menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 40px;
    padding: 8px 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: var(--lk-text);
    white-space: nowrap;
    text-align: left;
    box-sizing: border-box;
}

.lk-file-card__menu-item--danger {
    color: #ff122e;
}

.lk-file-card__menu-item-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.lk-file-card__menu-item-icon svg { width: 100%; height: 100%; display: block; }

/* Кнопка "Поделиться" */
.lk-file-card__share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background-color: var(--lk-bg);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(var(--lk-slate), 0.9);
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.lk-file-card__share:hover { color: var(--lk-text); }

.lk-file-card__share-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lk-file-card__share-icon svg { width: 100%; height: 100%; display: block; }

/* Серые квадратные кнопки-иконки */
.lk-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--lk-bg);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: var(--lk-icon-grey);
    flex-shrink: 0;
}

.lk-icon-btn:hover { color: var(--lk-text); }

.lk-icon-btn svg { width: 16px; height: 16px; display: block; }

/* Кнопка удаления строки: серая в покое, краснеет при наведении (сигнал опасного действия) */
.lk-icon-btn--danger:hover {
    color: #ff122e;
    background-color: #fff5f5;
}

.lk-icon-btn--xs {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

/* Маленький чекбокс (шапка/массовый выбор) */
.lk-checkbox {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(var(--lk-slate), 0.4);
    border-radius: 4px;
    background-color: var(--lk-white);
    flex-shrink: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.lk-checkbox[aria-checked="true"] {
    background-color: var(--lk-violet);
    border-color: var(--lk-violet);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 6.5l2.5 2.5 4.5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
}

/* ============================================================
   Архивная карточка (Figma 1024:16160) — папка с дочерними файлами.
   Переиспользует .lk-file-card (фон/радиус/паддинг) и блок скачивания.
   ============================================================ */

/* Архивная карточка: .lk-file-card__bottom--archive — отдельный блок-сосед (не часть .top,
   как в обычной карточке), поэтому разделитель ему нужен свой собственный (в отличие от обычной
   карточки, где полосу подняли выше через .lk-file-card__row-divider — см. базовый .top). */
.lk-file-card--archive .lk-file-card__top {
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--lk-slate), 0.08);
}

/* Фиолетовая иконка ZIP — только для архива */
.lk-file-card__archive-zip {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--lk-violet);
}

.lk-file-card__archive-zip svg,
.lk-file-card__archive-zip img { width: 100%; height: 100%; display: block; }

/* Колонка с заголовком архива, деревом детей и подписью. .lk-file-card__archive-player и
   .lk-file-card__archive-download вынуты из потока (position: absolute, см. ниже) и НЕ раздвигают
   эту колонку через обычное flex-распределение — раньше вместо max-width колонка держалась на
   margin-right (270px), который лишь съедал место у flex:1 из общего свободного места в строке;
   при длинном имени архива flex:1 разрастал колонку заметно шире, чем 532px до .archive-player —
   имя заезжало под «Обработано N из M»/«Поделиться», а карандаш редактирования вообще переставал
   быть кликабельным (клик перехватывал .archive-player поверх него). max-width жёстко
   ограничивает правый край колонки до .archive-player (162px — фиксированный отступ архивной
   колонки от .top, те же toggle+folder-иконки, что и в .lk-file-card__archive-head; 532-162=370,
   минус 20px зазор — те же 20px, что и в комментарии у .archive-player). */
.lk-file-card__archive-file {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
    max-width: 350px;
}

.lk-file-card__archive-head {
    display: flex;
    align-items: center;
    gap: 8px;
    /* min-width:0 — см. комментарий у .lk-file-card__file-row: без него длинное имя архива
       не сжималось flex'ом и наезжало на статус обработки (.lk-file-card__archive-player). */
    min-width: 0;
}

/* Стрелка-переключатель (вверх — раскрыто, вниз — свёрнуто) */
.lk-file-card__archive-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--lk-icon-grey);
    flex-shrink: 0;
}

.lk-file-card__archive-toggle-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
    transition: transform 140ms;
}

.lk-file-card__archive-toggle-icon svg { width: 100%; height: 100%; display: block; }

/* В свёрнутом виде стрелка смотрит вниз */
.lk-file-card--archive.is-collapsed .lk-file-card__archive-toggle-icon {
    transform: rotate(0deg);
}

/* Иконка открытой папки в фиолетовом боксе */
.lk-file-card__archive-folder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: var(--lk-violet-bg);
    color: var(--lk-violet);
    flex-shrink: 0;
}

.lk-file-card__archive-folder svg { width: 14px; height: 14px; display: block; }

.lk-file-card__archive-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--lk-dark-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lk-file-card__archive-name[contenteditable="true"] {
    overflow: visible;
    text-overflow: clip;
    outline: none;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 6px;
    background-color: var(--lk-white);
    box-shadow: 0 0 0 1.5px var(--lk-violet);
    cursor: text;
}

/* Список дочерних файлов с деревом-связкой слева */
.lk-file-card__archive-children {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    padding-left: 40px;
}

/* Вертикальная линия дерева */
.lk-file-card__archive-children::before {
    content: "";
    position: absolute;
    left: 24px;
    top: -2px;
    bottom: 14px;
    width: 1px;
    background-color: #DDE1E5;
}

.lk-file-card--archive.is-collapsed .lk-file-card__archive-children {
    display: none;
}

/* Строка дочернего файла */
.lk-file-card__child-row {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* Горизонтальный «усик» дерева к каждому ребёнку */
.lk-file-card__child-row::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    width: 12px;
    height: 1px;
    background-color: #DDE1E5;
}

/* Бейдж статуса 20px */
.lk-file-card__child-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.lk-file-card__child-badge-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.lk-file-card__child-badge-icon svg { width: 100%; height: 100%; display: block; }

.lk-file-card__child-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Варианты статуса: фон бейджа + цвет иконки + цвет имени */
.lk-file-card__child-row--recognized .lk-file-card__child-badge { background-color: #C9FFEF; }
.lk-file-card__child-row--recognized .lk-file-card__child-badge-icon { color: #40DB88; }
.lk-file-card__child-row--recognized .lk-file-card__child-name { color: var(--lk-grey); }

.lk-file-card__child-row--error .lk-file-card__child-badge { background-color: #FDE9E9; }
.lk-file-card__child-row--error .lk-file-card__child-badge-icon { color: #FF122E; }
.lk-file-card__child-row--error .lk-file-card__child-name { color: #FF122E; }

.lk-file-card__child-row--in-progress .lk-file-card__child-badge { background-color: #FDF8E9; }
.lk-file-card__child-row--in-progress .lk-file-card__child-badge-icon { color: #FFD400; }
.lk-file-card__child-row--in-progress .lk-file-card__child-name { color: var(--lk-grey-light); }

.lk-file-card__child-row--pause .lk-file-card__child-badge { background-color: var(--lk-bg); }
.lk-file-card__child-row--pause .lk-file-card__child-badge-icon { color: #B7BFCA; }
.lk-file-card__child-row--pause .lk-file-card__child-name { color: var(--lk-grey-light); }

.lk-file-card__child-row--payment .lk-file-card__child-badge { background-color: #FDF2E9; }
.lk-file-card__child-row--payment .lk-file-card__child-badge-icon { color: #FF9317; }
.lk-file-card__child-row--payment .lk-file-card__child-name { color: var(--lk-grey-light); }

/* Подсказка при наведении на дочерний файл архива — в стиле лк (светлая карточка, фиолетовые акценты).
   Строка-родитель уже position:relative, контейнеры не режут overflow — всплывает над строкой. */
.lk-child-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 6px;
    z-index: 40;
    width: max-content;
    min-width: 216px;
    max-width: 340px;
    padding: 12px 14px;
    border-radius: 12px;
    background-color: var(--lk-white);
    border: 1px solid rgba(var(--lk-slate), 0.12);
    box-shadow: 0 16px 36px rgba(21, 21, 21, 0.14);
    color: var(--lk-text);
    font-size: 13px;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Стрелка — повёрнутый квадрат, чтобы держать рамку и тень как у карточки */
.lk-child-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 22px;
    width: 12px;
    height: 12px;
    margin-top: -7px;
    background-color: var(--lk-white);
    border-right: 1px solid rgba(var(--lk-slate), 0.12);
    border-bottom: 1px solid rgba(var(--lk-slate), 0.12);
    transform: rotate(45deg);
}

.lk-file-card__child-row:hover .lk-child-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Заголовок: подпись-eyebrow + имя файла */
.lk-child-tooltip__head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(var(--lk-slate), 0.10);
}

.lk-child-tooltip__caption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--lk-violet);
}

.lk-child-tooltip__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--lk-text);
    word-break: break-word;
}

/* Список характеристик (длительность / язык / спикеры) */
.lk-child-tooltip__specs {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lk-child-tooltip__spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lk-child-tooltip__spec dt {
    font-size: 12px;
    font-weight: 500;
    color: var(--lk-grey-light);
    white-space: nowrap;
}

.lk-child-tooltip__spec dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--lk-text);
    text-align: right;
}

.lk-child-tooltip__lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lk-child-tooltip__flag {
    display: inline-flex;
}

.lk-child-tooltip__flag .fi {
    font-size: 13px;
    border-radius: 3px;
}

/* Строка статуса — только для незавершённых файлов (в процессе / ошибка / ожидание) */
.lk-child-tooltip__status {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--lk-slate), 0.10);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--lk-grey);
}

.lk-child-tooltip__status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--lk-grey-light);
    flex-shrink: 0;
}

.lk-child-tooltip__status--in-progress::before { background-color: #FFD400; }
.lk-child-tooltip__status--error::before { background-color: #FF122E; }
.lk-child-tooltip__status--error { color: #FF122E; }

/* Подпись «Распознано за …» */
.lk-file-card__archive-caption {
    margin: 0;
    padding-left: 24px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--lk-grey-light);
}

.lk-file-card--archive.is-collapsed .lk-file-card__archive-caption {
    display: none;
}

/* «Поделиться» в верхней строке архива, на одном уровне со «Скачать» — под колонкой «ПЛЕЕР С
   ТАЙМКОДАМИ», как и у обычных файлов. .archive-file — flex:1 и рос бы шире, съедая место под
   «Поделиться» (у архива нет фиксированной 300px-колонки имени файла, как в обычной строке) —
   в потоке колонка всё время немного «плыла» от точки, где она стоит у обычных файлов.
   position: absolute с фиксированным left:532px (512px колонка даты/файла + 20px gap — те же
   цифры, что у .lk-file-card__player-group) даёт стабильное совпадение независимо от того, как
   flex посчитал ширину .archive-file. .lk-file-card__top — position: relative (базовое правило),
   так что left отсчитывается от его левого края. */
.lk-file-card__archive-player {
    position: absolute;
    left: 532px;
    top: 0;
    display: flex;
    align-items: center;
    width: 270px;
}

/* Блок скачивания справа в верхней строке. position:absolute + left:1058px (тот же приём и то
   же обоснование, что у .lk-file-card__archive-player чуть выше) — раньше блок держался в потоке
   через flex-shrink:0 и margin-right:270px у .archive-file, из-за чего его позиция зависела от
   того, сколько места фактически занимала колонка с именем архива: как только у .archive-file
   появился max-width (см. выше), освободившееся место превращалось в пустой промежуток ПЕРЕД
   .archive-download вместо того, чтобы прижимать его к правому краю — кнопка «Скачать» съезжала
   влево относительно обычных файлов. Фиксированный left отвязывает позицию от ширины соседней
   колонки: 1058px — тот же x, на котором «Скачать» стоит в обычной (не архивной) строке
   (.lk-file-card__download-wrap), измерено относительно .lk-file-card__top. */
.lk-file-card__archive-download {
    position: absolute;
    left: 1058px;
    top: 0;
    width: 215px;
}

/* Нижняя строка архива — теперь только мусорка («Поделиться» переехала в верхнюю строку, см.
   .lk-file-card__archive-player); флеш к правому краю карточки, как и во всех остальных строках. */
.lk-file-card__bottom--archive {
    justify-content: flex-end;
}

.lk-file-card__bottom--archive .lk-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--lk-bg);
}

.lk-file-card__archive-player .lk-file-card__share {
    border-radius: 8px;
    background-color: var(--lk-bg);
}

/* «Обработка архива…» — пока архив распаковывается и дочерних файлов ещё нет
   (file-list.js рисует этот блок в слот children только для live-статуса). */
.lk-file-card__archive-processing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}

.lk-file-card__archive-processing-msg {
    font-size: 14px;
    line-height: 1.3;
    color: var(--lk-grey-light);
}

/* Для одиночной строки «Обработка архива…» (дочерних файлов ещё нет) вертикальную
   линию-дерево не рисуем — она сжалась бы в короткий обрубок. */
.lk-file-card__archive-children:has(.lk-file-card__archive-processing)::before {
    display: none;
}

/* ============================================================
   Стадии обработки (downloading | converting | transcript | recording, нода Figma 1024:16126).
   Блок процесса и нижняя полоса всегда в DOM; видимость переключается по data-status карточки.
   ============================================================ */

/* Блок «спиннер + текст» — прижат к началу правой части (фикс. позиция для всех строк) */
.lk-file-card__processing {
    display: none;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    flex-shrink: 0;
}

.lk-file-card__processing-msg {
    font-size: 14px;
    line-height: 1.3;
    color: var(--lk-grey-light);
}

/* Число минут внутри сообщения приходит уже завёрстанным в <b> из перевода */
.lk-file-card__processing-msg b {
    font-weight: 600;
    color: var(--lk-text);
}

/* Кнопка «Остановить запись» на карточке встречи. Своя (не .lk-btn-text) — та в actions-top
   скрывается в статусе recording (см. правило ниже). Данжер-стиль красным. file-list.js рисует
   её только когда бот запущен и запись идёт (meet.can_stop). */
.lk-file-card__stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid rgba(255, 18, 46, 0.35);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #FF122E;
    white-space: nowrap;
    transition: background-color .15s;
}

.lk-file-card__stop:hover { background: rgba(255, 18, 46, 0.08); }

.lk-file-card__stop:disabled { opacity: .5; cursor: default; }

/* Кнопка «Остановить запись» стоит вплотную к мусорке — в её же строке, слева от неё, мусорка
   остаётся последней и потому прижата justify-content:flex-end к правому краю
   .lk-file-card__result-group-bottom (130px) — ровно там же, где она стоит и во всех остальных
   строках (под стрелкой «Скачать»). flex-shrink:0 не даёт узкой 130px-строке сжать кнопку/обрезать
   текст — кнопка шире доступного места и переполняет строку влево, не трогая ширину самой строки
   (а значит и позицию мусорки).
   На узком экране правило снимается (responsive.css) — там карточка в колонку и места хватает. */
.lk-file-card__result-group-bottom > [data-slot="zoom_stop"] {
    flex-shrink: 0;
}

/* Круглый фиолетовый спиннер ~32px (Progress bar/Stroke/Violet на дорожке #CFD5DC) */
.lk-file-card__spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #cfd5dc;
    border-top-color: var(--lk-violet);
    animation: lk-file-card-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes lk-file-card-spin {
    to { transform: rotate(360deg); }
}

/* Индикатор генерации AI-отчёта рядом с кнопкой «Создать AI-отчет» */
.lk-ai-report-status {
    display: none;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.lk-ai-report-status[data-generating="1"],
.lk-ai-report-status[data-failed="1"] {
    display: inline-flex;
}

.lk-ai-report-status__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #cfd5dc;
    border-top-color: var(--lk-violet);
    animation: lk-file-card-spin 0.8s linear infinite;
    flex-shrink: 0;
}

.lk-ai-report-status[data-generating="1"] .lk-ai-report-status__spinner {
    display: inline-block;
}

/* Ошибка генерации ИИ-отчёта: красный маркер «!», виден когда у файла есть упавшие отчёты. */
.lk-ai-report-status__failed {
    display: none;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecec;
    color: #d92d20;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.lk-ai-report-status[data-failed="1"] .lk-ai-report-status__failed {
    display: inline-flex;
}

/* Строки шаблонов и вкладки тематик в модалке AI-отчёта: у Tailwind-класса leading-[0.9]
   строчный бокс (0.9em) ниже глифов, а truncate (overflow:hidden) на названии обрезает верх/низ
   высоких кириллических букв (й, р, у) в длинных названиях. Даём читаемый интервал. Правило
   грузится после Tailwind (LkAsset depends on TailwindAsset), одинаковая специфичность → выигрывает. */
.lk-ai-tpl,
.lk-ai-cat {
    line-height: 1.3;
}

/* Шаблон в модалке AI-отчёта, у которого последняя генерация упала: красный акцент, но выбираемый. */
.lk-ai-tpl--failed {
    color: #d92d20;
}

/* Сердечко «Избранное» на промпте в модалке AI-отчёта (у сценариев и саммари сердечка нет).
   Контур — по умолчанию, заливка — когда промпт в избранном (data-fav="1" на строке шаблона). */
.lk-ai-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex-shrink: 0;
    color: #cfd5dc;
    transition: color 0.15s ease;
}

.lk-ai-fav svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

.lk-ai-fav:hover {
    color: var(--lk-violet);
}

.lk-ai-tpl[data-fav="1"] .lk-ai-fav {
    color: var(--lk-violet);
}

.lk-ai-tpl[data-fav="1"] .lk-ai-fav svg {
    fill: currentColor;
}

.lk-ai-report-status__label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--lk-grey);
    white-space: nowrap;
}

/* Кнопка «Сгенерировать» в модалке AI-отчёта, пока POST в полёте: спиннер + курсор ожидания
   (кнопка при этом disabled — двойной сабмит невозможен; класс ставит ai-report-modal.js). */
.lk-ai-generate--busy {
    cursor: progress;
    pointer-events: none;
}

.lk-ai-generate--busy::before {
    content: '';
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: lk-file-card-spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* Кнопка «Саммари» (только для встреч): pending — спиннер генерации, error — иконка ошибки */
.lk-summary-status {
    display: none;
    align-self: center;
    align-items: center;
    height: 16px;
    line-height: 0;
    flex-shrink: 0;
    margin-left: 2px;
}

.lk-summary[data-summary-state="pending"] .lk-summary-status,
.lk-summary[data-summary-state="error"] .lk-summary-status {
    display: inline-flex;
}

.lk-summary-status__spinner,
.lk-summary-status__error {
    display: none;
    align-self: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lk-summary[data-summary-state="pending"] .lk-summary-status__spinner {
    display: inline-block;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #cfd5dc;
    border-top-color: var(--lk-violet);
    animation: lk-file-card-spin 0.8s linear infinite;
}

.lk-summary[data-summary-state="error"] .lk-summary-status__error {
    display: inline-flex;
    color: #FF122E;
}

.lk-summary-status__error svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* В состоянии ready — кнопка-ссылка в виде фиолетовой outline-кнопки (как «Скачать», но контурная) */
/* Рамка/фон теперь на .lk-summary-wrap (см. ниже) — общая на «Саммари» и кнопку-стрелку скачивания,
   сплит-пилюля по образцу .lk-file-card__download (та же граница между сегментами, только в
   контурном, а не заливном исполнении — контур уже был у «Саммари», просто раньше каждый сегмент
   рисовал его отдельно, и между пилюлями был зазор 6px). */
/* gap/padding — ровно как у .lk-file-card__download-btn («Скачать»), чтобы при похожей длине
   текста («Саммари»/«Скачать») пилюли выходили примерно одной ширины. */
.lk-summary[data-summary-state="ready"] {
    gap: 4px;
    height: 100%;
    padding: 8px 8px 8px 12px;
    border: 0;
    border-radius: 12px 0 0 12px;
    color: var(--lk-violet);
    background: transparent;
    transition: background-color 0.15s ease;
}

.lk-summary[data-summary-state="ready"]:hover {
    color: var(--lk-violet);
    background: var(--lk-violet-bg);
}

/* Кнопка «Готовые AI-отчёты» — текстовая (как «Создать AI-отчёт»): без контура, серый текст,
   иконка в светло-фиолетовом бейдже-квадрате. Базовый вид берётся от .lk-btn-text.
   gap:4px (был 8px) + бейдж 24px (был 26px) — тот же итоговый отступ до текста (28px), что и
   у «Создать AI-отчёт»/«Обсудить с ИИ» выше в этой же колонке (см. комментарий у
   .lk-file-card__ai-group-bottom) — иначе три строки не совпадали по левому краю текста. */
.lk-ready-reports {
    gap: 4px;
    color: var(--lk-violet);
    transition: color 0.15s ease;
}

.lk-ready-reports .lk-btn-text__icon {
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--lk-violet-bg);
    color: var(--lk-violet);
}

.lk-ready-reports .lk-btn-text__icon svg,
.lk-ready-reports .lk-btn-text__icon img {
    width: 16px;
    height: 16px;
}

.lk-ready-reports:hover {
    color: var(--lk-violet);
}

/* В состояниях pending/error ведущую иконку скачивания скрываем —
   остаётся «Саммари» + спиннер (генерация) либо + иконка ошибки. Иконка есть только в ready. */
.lk-summary[data-summary-state="pending"] .lk-btn-text__icon,
.lk-summary[data-summary-state="error"] .lk-btn-text__icon {
    display: none;
}

/* В pending/error после «Саммари» добавляем двоеточие (в ready — без него) */
.lk-summary[data-summary-state="pending"] .lk-summary__label::after,
.lk-summary[data-summary-state="error"] .lk-summary__label::after {
    content: ":";
}

/* В состоянии pending ссылка не ведёт никуда — обычный курсор */
.lk-summary[data-summary-state="pending"] {
    cursor: default;
}

/* В состоянии error — курсор-подсказка; причину показываем стилизованной подсказкой (см. ниже) */
.lk-summary[data-summary-state="error"] {
    position: relative;
    cursor: help;
}

/* Стилизованная подсказка причины ошибки саммари (без нативного title, без задержки) */
.lk-summary[data-summary-state="error"][data-tooltip]:not([data-tooltip=""])::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    width: max-content;
    max-width: 260px;
    padding: 8px 11px;
    border-radius: 8px;
    background-color: var(--lk-text);
    color: var(--lk-white);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    box-shadow: 0 6px 20px rgba(21, 21, 21, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

/* Стрелка подсказки */
.lk-summary[data-summary-state="error"][data-tooltip]:not([data-tooltip=""])::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    border: 5px solid transparent;
    border-top-color: var(--lk-text);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.lk-summary[data-summary-state="error"][data-tooltip]:not([data-tooltip=""]):hover::after,
.lk-summary[data-summary-state="error"][data-tooltip]:not([data-tooltip=""]):hover::before {
    opacity: 1;
    visibility: visible;
}

/* ⚠️ «файл обрезан до 15 мин» (аноним). Скрыт по умолчанию, показывается классом .is-visible из
   file-list.js только для реально обрезанных распознанных файлов. НЕ используем атрибут [hidden] +
   Tailwind-класс display: любой .inline-flex перебивает [hidden] (авторский стиль > UA), и иконка
   висела бы на всех карточках. */
.lk-file-card__trimmed {
    display: none;
    position: relative;
    align-items: center;
    color: #FF122E;
    cursor: help;
}

.lk-file-card__trimmed.is-visible {
    display: inline-flex;
}

/* Подсказка — тот же стиль, что у ошибки саммари (мгновенная, без нативного title). Прижата к
   правому краю иконки (::after right), т.к. иконка стоит у правого края таблицы и центрированная
   подсказка уезжала бы за экран. */
.lk-file-card__trimmed[data-tooltip]:not([data-tooltip=""])::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 9px);
    right: -6px;
    z-index: 40;
    width: max-content;
    max-width: 185px;
    padding: 8px 11px;
    border-radius: 8px;
    background-color: #424242;
    color: var(--lk-white);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    box-shadow: 0 6px 20px rgba(21, 21, 21, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.lk-file-card__trimmed[data-tooltip]:not([data-tooltip=""])::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    right: 3px;
    z-index: 40;
    border: 5px solid transparent;
    border-top-color: #424242;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.lk-file-card__trimmed[data-tooltip]:not([data-tooltip=""]):hover::after,
.lk-file-card__trimmed[data-tooltip]:not([data-tooltip=""]):hover::before {
    opacity: 1;
    visibility: visible;
}

/* Нижняя полоса прогресса распознавания (скрыта по умолчанию). Пока «Примерное время
   распознавания» ещё не рассчиталось (нет data-estimate-seconds) — тонкая пустая дорожка.
   Как только оценка появилась — становится толще и заполняется фиолетовым; ширину
   .lk-file-card__progress-fill в реальном времени ведёт file-list.js (updateTranscriptProgress),
   от момента, когда data-estimate-seconds впервые пришёл с сервера. */
.lk-file-card__progress {
    display: none;
    height: 3px;
    border-radius: 100px;
    background-color: #f9f5ff;
    overflow: hidden;
    transition: height 0.2s ease;
}

.lk-file-card__progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 100px;
    background-color: var(--lk-violet);
    transition: width 1s linear;
}

.lk-file-card__progress:not([data-estimate-seconds=""]) {
    height: 6px;
    background-color: var(--lk-violet-bg);
}

/* Когда карточка в одной из стадий обработки — показываем индикатор процесса и прячем кнопку
   скачивания. Кнопка удаления при этом остаётся доступной, чтобы файл можно было удалить
   прямо во время обработки (как у архивной карточки, см. ниже).
   Архивная карточка (--archive) исключена: у неё свой дизайн (список дочерних + «Распознано за»). */
.lk-file-card:not(.lk-file-card--archive)[data-status="downloading"] .lk-file-card__processing,
.lk-file-card:not(.lk-file-card--archive)[data-status="converting"] .lk-file-card__processing,
.lk-file-card:not(.lk-file-card--archive)[data-status="transcript"] .lk-file-card__processing,
.lk-file-card:not(.lk-file-card--archive)[data-status="recording"] .lk-file-card__processing {
    display: inline-flex;
}

.lk-file-card:not(.lk-file-card--archive)[data-status="downloading"] .lk-file-card__progress,
.lk-file-card:not(.lk-file-card--archive)[data-status="converting"] .lk-file-card__progress,
.lk-file-card:not(.lk-file-card--archive)[data-status="transcript"] .lk-file-card__progress,
.lk-file-card:not(.lk-file-card--archive)[data-status="recording"] .lk-file-card__progress {
    display: block;
}

/* Прячем только кнопку скачивания (результатов ещё нет). Нижнюю строку с кнопкой удаления
   НЕ трогаем — она должна оставаться видимой во время обработки. */
.lk-file-card:not(.lk-file-card--archive)[data-status="downloading"] .lk-file-card__download-wrap,
.lk-file-card:not(.lk-file-card--archive)[data-status="converting"] .lk-file-card__download-wrap,
.lk-file-card:not(.lk-file-card--archive)[data-status="transcript"] .lk-file-card__download-wrap,
.lk-file-card:not(.lk-file-card--archive)[data-status="recording"] .lk-file-card__download-wrap {
    display: none;
}

/* AI-отчёт и плеер недоступны до завершения обработки */
.lk-file-card:not(.lk-file-card--archive)[data-status="downloading"] .lk-file-card__actions-top .lk-btn-text,
.lk-file-card:not(.lk-file-card--archive)[data-status="converting"] .lk-file-card__actions-top .lk-btn-text,
.lk-file-card:not(.lk-file-card--archive)[data-status="transcript"] .lk-file-card__actions-top .lk-btn-text,
.lk-file-card:not(.lk-file-card--archive)[data-status="recording"] .lk-file-card__actions-top .lk-btn-text {
    display: none;
}

/* Колонки «Плеер» и «AI-отчёт» во время обработки пустуют (кнопки внутри скрыты правилом выше),
   но сами колонки — flex-элементы с фиксированной шириной (270px/160px, см. .lk-file-card__player-group
   и .lk-file-card__ai-group) и продолжают её занимать, даже будучи пустыми. Из-за этого
   .lk-file-card__processing не помещается на одну строку с оставшейся .lk-file-card__result-group
   (кнопка удаления) и переносится на вторую — прямо на .lk-file-card__row-divider. Прячем
   колонки целиком, чтобы освободить место. */
.lk-file-card:not(.lk-file-card--archive)[data-status="downloading"] .lk-file-card__player-group,
.lk-file-card:not(.lk-file-card--archive)[data-status="converting"] .lk-file-card__player-group,
.lk-file-card:not(.lk-file-card--archive)[data-status="transcript"] .lk-file-card__player-group,
.lk-file-card:not(.lk-file-card--archive)[data-status="recording"] .lk-file-card__player-group,
.lk-file-card:not(.lk-file-card--archive)[data-status="downloading"] .lk-file-card__ai-group,
.lk-file-card:not(.lk-file-card--archive)[data-status="converting"] .lk-file-card__ai-group,
.lk-file-card:not(.lk-file-card--archive)[data-status="transcript"] .lk-file-card__ai-group,
.lk-file-card:not(.lk-file-card--archive)[data-status="recording"] .lk-file-card__ai-group {
    display: none;
}

/* .lk-file-card__processing в разметке идёт ПОСЛЕ .lk-file-card__result-group — пока колонки
   «Плеер»/«AI-отчёт» видимы, это не важно (space-between расставляет всех четверых по местам).
   Но когда они спрятаны (правило выше), из видимых flex-элементов первым в DOM остаётся
   .lk-file-card__result-group — и justify-content:space-between сажает его СЛЕВА, а не справа
   (мусорка уезжает под «Плеер» вместо «Результата»). order:-1 возвращает индикатор визуально
   на первое место, не трогая разметку. */
.lk-file-card:not(.lk-file-card--archive)[data-status="downloading"] .lk-file-card__processing,
.lk-file-card:not(.lk-file-card--archive)[data-status="converting"] .lk-file-card__processing,
.lk-file-card:not(.lk-file-card--archive)[data-status="transcript"] .lk-file-card__processing,
.lk-file-card:not(.lk-file-card--archive)[data-status="recording"] .lk-file-card__processing {
    order: -1;
}

/* Ошибка: вместо действий показываем сообщение, мусорку оставляем — файл с ошибкой должно быть
   можно удалить (как и битый архив). margin-top: 16px — дефолт для остальных мест, где error-top
   ещё встречается ниже разделителя (см. архивный случай); для обычной строки (правило ниже)
   переопределяем в 0 — сообщение теперь в ПЕРВОЙ строке, вторая ему не нужна. */
.lk-file-card__error-top {
    display: none;
    margin: 0;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.3;
    color: #FF122E;
}

.lk-file-card:not(.lk-file-card--archive)[data-status="error"] .lk-file-card__download-wrap,
.lk-file-card:not(.lk-file-card--archive)[data-status="error"] .lk-file-card__actions-top .lk-btn-text {
    display: none;
}

/* Нижнюю строку оставляем ради кнопки удаления; прячем только мету и блок саммари —
   при ошибке от них толку нет, а share и так скрыт (JS отдаёт его только готовым файлам). */
.lk-file-card:not(.lk-file-card--archive)[data-status="error"] .lk-file-card__meta,
.lk-file-card:not(.lk-file-card--archive)[data-status="error"] .lk-file-card__bottom-actions {
    display: none;
}

/* Сообщение об ошибке — в ПЕРВУЮ строку карточки, на одном уровне с мусоркой (была на второй,
   под разделителем: колонки «Плеер»/«AI-отчёт» пустовали, но продолжали резервировать 270+160px
   в actions-top, и длинному тексту ошибки не хватало места на первой строке — он переносился
   вниз). Прячем пустые колонки целиком (тот же приём, что у downloading/converting/…), сообщению
   отдаём освободившееся место через flex:1 + order:-1 (встаёт перед мусоркой, как раньше «Скачать»
   вставал перед ней), а разделитель, которому теперь нечего разделять, тоже прячем. */
.lk-file-card:not(.lk-file-card--archive)[data-status="error"] .lk-file-card__player-group,
.lk-file-card:not(.lk-file-card--archive)[data-status="error"] .lk-file-card__ai-group {
    display: none;
}

.lk-file-card:not(.lk-file-card--archive)[data-status="error"] .lk-file-card__error-top {
    display: block;
    order: -1;
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.lk-file-card:not(.lk-file-card--archive)[data-status="error"] .lk-file-card__row-divider {
    display: none;
}

/* Ошибка на уровне архива (например, внутри нет аудио/видео — status 510): показываем
   сообщение под именем вместо подписи «Распознано за …». Нижнюю строку (кнопку удаления)
   оставляем, чтобы пользователь мог удалить битый архив. */
.lk-file-card--archive[data-status="error"] .lk-file-card__error-top {
    display: block;
    margin-top: 4px;
}

.lk-file-card--archive[data-status="error"] .lk-file-card__archive-caption {
    display: none;
}

/* ============================================================
   Блок оплаты файла (нода Figma 1012:14091)
   ============================================================ */
.lk-file-card__payment {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    max-width: 420px;
}

.lk-file-card__payment-count {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--lk-text);
}

.lk-file-card__payment-msg {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--lk-grey);
}

/* Текст лимита анонима крупнее обычного сообщения об оплате (просили увеличить) — только
   в .lk-file-card__register, .lk-file-card__payment (баланс/оплата) не трогаем. */
.lk-file-card__register .lk-file-card__payment-msg {
    font-size: 16px;
    line-height: 1.4;
}

/* .lk-file-card__payment задаёт width:100%/max-width:420px. Текст лимита садится под колонку
   «Плеер» (см. [data-need-pay="1"] .actions-top, justify-content:space-between), а мусорка —
   под «Результат», крайней правой. 480px — предел: .actions-top всего 741px, 215 из них уходят
   под .result-group, и при ширине больше ~510px строке уже не хватает места на двоих —
   .result-group целиком переносится на новую строку и снова уезжает под «Плеер» (тот же баг,
   что и с .lk-file-card__processing выше по файлу). 480px укладывает сообщение в 3 строки и
   оставляет запас ~45px до .result-group. */
.lk-file-card__payment.lk-file-card__register {
    width: 480px;
    max-width: 480px;
}

/* Кнопка/ссылка действия — фиолетовая обводка */
.lk-file-card__pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 24px;
    border: 1px solid var(--lk-violet);
    border-radius: 8px;
    background: transparent;
    color: var(--lk-violet);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms, color 120ms;
}

.lk-file-card__pay:hover {
    background-color: var(--lk-violet);
    color: var(--lk-white);
}

.lk-file-card__pay[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.lk-file-card__payment-tariff {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--lk-grey);
}

.lk-file-card__payment-tariff-link {
    color: var(--lk-violet);
    font-weight: 500;
    text-decoration: none;
}

.lk-file-card__payment-tariff-link:hover {
    text-decoration: underline;
}

/* Строка «Распознать без ограничений»: файл обрезан до бесплатного лимита в анонимной сессии.
   Полноширинная строка между верхом карточки и метой (как в легаси-списке); кнопка встроена
   внутрь предложения и течёт вместе с текстом, на узких экранах переносится. Кнопка
   переиспользует .lk-file-card__pay (фиолетовая обводка, как у блока оплаты). */
.lk-file-card__reconvert {
    width: 100%;
}

.lk-file-card__reconvert-msg {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--lk-grey);
}

/* Кнопка заметно компактнее, чем в блоке оплаты (32px): она встроена в предложение,
   и вся фраза вместе с кнопкой должна помещаться в одну строку на десктопе. */
.lk-file-card__reconvert .lk-file-card__pay {
    height: 22px;
    padding: 0 10px;
    font-size: 12px;
    vertical-align: middle;
    margin: 0 2px;
}

.lk-file-card__reconvert-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: -3px;
    color: #d92d20;
}

.lk-file-card__reconvert-icon svg {
    width: 100%;
    height: 100%;
}

/* Файл требует оплаты/регистрации — вместо действий показываем блок оплаты. Нижнюю строку целиком
   НЕ прячем: оставляем кнопку удаления (неоплаченный/незарегистрированный файл всё равно можно
   удалить). Скрываем только мету (язык/спикеры) и нижние действия (саммари/AI-отчёты). */
.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__download-wrap,
.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__actions-top .lk-btn-text,
.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__processing,
.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__progress,
.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__meta,
.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__bottom-actions {
    display: none;
}

/* Те же пустые-но-фиксированной-ширины колонки «Плеер»/«AI-отчёт» (см. аналогичный комментарий
   у статусов обработки чуть выше по файлу) не дают тексту регистрации/оплаты и мусорке встать
   рядом — текст либо переносится на отдельную строку, либо мусорка повисает где-то посередине.
   Прячем колонки целиком. */
.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__player-group,
.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__ai-group {
    display: none;
}

/* В режиме оплаты текст многострочный (2-3 строки) — align-items:center (а не flex-start)
   центрирует мусорку по высоте относительно всего текста, а не прижимает её к первой строке
   (визуально «оторвано» от текста). justify-content: space-between — как в обычной шапке: текст
   регистрации садится на место скрытой колонки «Плеер» (крайний левый элемент), а .result-group
   (мусорка) — крайний правый, под «Результат». order на .result-group держит его ПОСЛЕ текста
   визуально (текст первым в DOM не идёт — без order мусорка встала бы первой, слева, под
   «Плеер», см. комментарий выше по файлу про аналогичный баг с .lk-file-card__processing). */
.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__actions-top {
    align-items: center;
    justify-content: space-between;
}

.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__result-group {
    order: 1;
}

/* Мусорка должна стоять на одном и том же месте независимо от состояния строки — под кнопкой
   «Скачать» (130px-подзона колонки «Результат»), как в уже готовых файлах. Раньше здесь стояла
   width:100% (полная колонка 215px) — из-за отсутствия кнопки «Скачать» в режиме оплаты казалось,
   что без неё не на что ориентироваться, но 130px и без «Скачать» рядом остаётся тем же самым
   x-координатом колонки — просто фиксированная ширина-ориентир, а не подгонка под соседнюю
   кнопку. Так мусорка не «уезжает» вправо по сравнению с обычной строкой. */
.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__result-group-bottom {
    width: 130px;
    justify-content: flex-end;
}

/* Высота блока оплаты/регистрации — переменная (сообщение переносится на 2-3 строки в зависимости
   от ширины), поэтому разделительная полоса на фиксированной высоте (.lk-file-card__row-divider)
   тут не подходит — либо проходит по тексту, либо повисает не на своём месте. Прячем её целиком. */
.lk-file-card:not(.lk-file-card--archive)[data-need-pay="1"] .lk-file-card__row-divider {
    display: none;
}

/* Архив требует оплаты: блок оплаты справа, дерево детей/подпись/скачивание скрыты */
.lk-file-card__archive-payment {
    flex: 1 1 0;
    min-width: 0;
}

/* Левый столбец архива при оплате ~ 512px (как __main одиночного файла),
   чтобы блок оплаты начинался на той же вертикали справа. max-width переопределён —
   иначе базовые 350px (см. .lk-file-card__archive-file выше) обрезали бы flex-basis:366px. */
.lk-file-card--archive[data-need-pay="1"] .lk-file-card__archive-file {
    flex: 0 0 366px;
    min-width: 0;
    max-width: 366px;
}

/* .lk-file-card__bottom (мусорка) намеренно НЕ в списке — архив, ожидающий оплаты, должен
   оставаться удаляемым, если пользователь передумал его распознавать. Раньше здесь пряталась
   вся .bottom целиком: было нормально, пока в ней жили и «Поделиться», и мусорка вместе, но
   после переноса «Поделиться» в верхнюю строку (.lk-file-card__archive-player) в .bottom
   осталась только мусорка — и архив с оплатой оказывался неудаляемым. */
.lk-file-card--archive[data-need-pay="1"] .lk-file-card__archive-download,
.lk-file-card--archive[data-need-pay="1"] .lk-file-card__archive-caption {
    display: none;
}

/* Стрелку разворачивания и список дочерних файлов прячем при need_gate ТОЛЬКО пока распаковка
   архива не дошла до отдельных файлов (список действительно пуст). Как только дочерние файлы
   появились (.lk-file-card--has-children-list — см. file-list.js), список остаётся доступен,
   даже если ни один из них ещё не готов — иначе те, что готовы, будет не открыть и не скачать,
   пока не оплатишь оставшиеся. */
.lk-file-card--archive[data-need-pay="1"]:not(.lk-file-card--has-children-list) .lk-file-card__archive-toggle,
.lk-file-card--archive[data-need-pay="1"]:not(.lk-file-card--has-children-list) .lk-file-card__archive-children {
    display: none;
}

/* ============================================================
   Пустое состояние списка — стильный баннер вместо голого текста.
   Мотив «звук → текст»: мягкий сиреневый фон в светлой палитре лк,
   живой эквалайзер и водяной знак.
   ============================================================ */
.lk-empty-banner {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(122deg, #f5f0ff 0%, #ede7ff 52%, #e8eaff 100%);
    border: 1px solid rgba(var(--lk-violet-rgb), .12);
    color: var(--lk-text);
    padding: 30px 30px 32px;
    display: flex;
    align-items: center;
    gap: 26px;
}

.lk-empty-banner__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    opacity: .5;
    pointer-events: none;
}

.lk-empty-banner__blob--1 { width: 210px; height: 210px; background: #dcccff; right: -50px; top: -80px; }
.lk-empty-banner__blob--2 { width: 160px; height: 160px; background: #cdd6ff; left: 40%; bottom: -90px; opacity: .5; }

.lk-empty-banner__eq {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 60px;
    width: 78px;
}

.lk-empty-banner__eq span {
    width: 7px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--lk-violet-light), var(--lk-violet));
    transform-origin: bottom;
    animation: lk-empty-eq 1.15s ease-in-out infinite;
}

.lk-empty-banner__eq span:nth-child(1) { height: 24px; animation-delay: 0s; }
.lk-empty-banner__eq span:nth-child(2) { height: 46px; animation-delay: .16s; }
.lk-empty-banner__eq span:nth-child(3) { height: 60px; animation-delay: .32s; }
.lk-empty-banner__eq span:nth-child(4) { height: 38px; animation-delay: .1s; }
.lk-empty-banner__eq span:nth-child(5) { height: 52px; animation-delay: .24s; }

@keyframes lk-empty-eq {
    0%, 100% { transform: scaleY(.35); }
    50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .lk-empty-banner__eq span { animation: none; }
}

.lk-empty-banner__body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.lk-empty-banner__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--lk-text);
}

.lk-empty-banner__subtitle {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--lk-grey);
    max-width: 44ch;
}

.lk-empty-banner__cta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(120deg, #9160fb, #7b41f6);
    color: var(--lk-white);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: filter .15s ease;
}

.lk-empty-banner__cta:hover { filter: brightness(1.06); }
.lk-empty-banner__cta:focus-visible { outline: 2px solid var(--lk-violet); outline-offset: 2px; }
.lk-empty-banner__cta:disabled { opacity: .6; cursor: default; }
.lk-empty-banner__cta:disabled:hover { filter: none; }
.lk-empty-banner__cta-icon { display: inline-flex; }
.lk-empty-banner__cta-icon svg { display: block; width: 15px; height: 15px; }

@media (max-width: 560px) {
    .lk-empty-banner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 22px 26px; }
    .lk-empty-banner__eq { height: 48px; }
}

/* ============================================================
   Модалка пароля встречи: состояние ошибки поля ввода.
   Красная рамка при неверном пароле (класс вешает/снимает
   setZoomModalError в file-list.js), текст ошибки — под полем.
   ============================================================ */
[data-lk-zoom-password-input].lk-input-error {
    border-color: #dc2626; /* = text-red-600 текста ошибки */
}

/* ============================================================
   Скачивание саммари: иконка рядом с кнопкой «Саммари» + мини-поповер docx/pdf.
   Кнопка «Саммари» только ОТКРЫВАЕТ саммари (страница интерактива), файл отдают
   отдельные маршруты — поэтому это два разных контрола.
   ============================================================ */
.lk-summary-wrap {
    display: inline-flex;
    align-items: stretch;
    box-sizing: border-box;
}

/* Пока саммари не готово, .lk-summary-dl в DOM нет смысла окаймлять — рамка стоит на обёртке
   ТОЛЬКО когда рядом реально есть кнопка-стрелка (ready), иначе вокруг обычной текстовой ссылки
   («Саммари: …» / ошибка) появлялась бы лишняя пилюля. */
.lk-summary-wrap:has(.lk-summary[data-summary-state="ready"]) {
    height: 36px;
    border: 1.5px solid var(--lk-violet);
    border-radius: 12px;
    background: var(--lk-white);
}

/* Скачивать нечего, пока саммари не готово: показываем иконку только рядом с ready-кнопкой.
   Соседний селектор — .lk-summary-dl идёт сразу за .lk-summary, состояние ставит JS. */
.lk-summary-dl {
    position: relative;
    display: none;
    flex-shrink: 0;
}

.lk-summary[data-summary-state="ready"] + .lk-summary-dl {
    display: inline-flex;
}

/* width: 32px — как у .lk-file-card__download-arrow (стрелка «Скачать»): паддинг 8px + иконка 16px
   с обеих сторон, та же геометрия. */
.lk-summary-dl__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    padding: 0;
    border: 0;
    border-left: 1.5px solid var(--lk-violet);
    border-radius: 0 12px 12px 0;
    background: transparent;
    color: var(--lk-violet);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lk-summary-dl__toggle:hover {
    background: var(--lk-violet-bg);
}

.lk-summary-dl__toggle svg {
    width: 16px;
    height: 16px;
}

.lk-summary-dl__pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    display: none;
    flex-direction: column;
    min-width: 132px;
    padding: 8px;
    background-color: var(--lk-white);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(55, 54, 56, 0.18);
    box-sizing: border-box;
    cursor: default;
}

.lk-summary-dl.is-open .lk-summary-dl__pop {
    display: flex;
}

/* стрелка вверх к иконке — как у поп-апа скачивания файла */
.lk-summary-dl__pop::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 13px;
    width: 14px;
    height: 14px;
    background-color: var(--lk-white);
    transform: rotate(45deg);
    border-radius: 3px;
}

.lk-summary-dl__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--lk-text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lk-summary-dl__item:hover {
    background: var(--lk-violet-bg);
    color: var(--lk-violet);
}

.lk-summary-dl__item-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.lk-summary-dl__item-icon svg {
    width: 100%;
    height: 100%;
}

/* ============================================================
   Пагинация списка файлов (_pagination.php) — клиентская: размер страницы (10/20/30)
   + вперёд/назад. Логика в file-list.js.
   ============================================================ */
.lk-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lk-pagination__size {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lk-pagination__size-label {
    font-size: 14px;
    color: var(--lk-grey);
    white-space: nowrap;
}

.lk-pagination__size-options {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background-color: var(--lk-bg);
}

.lk-pagination__size-btn {
    padding: 4px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--lk-grey);
}

.lk-pagination__size-btn:hover {
    color: var(--lk-text);
}

.lk-pagination__size-btn.is-active {
    background-color: var(--lk-violet);
    color: var(--lk-white);
}

.lk-pagination__nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lk-pagination__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--lk-stroke);
    border-radius: 8px;
    background: var(--lk-white);
    color: var(--lk-grey);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lk-pagination__nav-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.lk-pagination__nav-btn:hover:not(:disabled) {
    background-color: var(--lk-bg);
}

.lk-pagination__nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.lk-pagination__nav-info {
    min-width: 56px;
    text-align: center;
    font-size: 14px;
    color: var(--lk-grey);
}