/* ============================================================
   Recognition form — settings column (misfit).
   Контейнер, дропзона и поле ссылки переехали в Tailwind
   (см. _recognition-form.php). Здесь — колонка настроек:
   display:contents-трюк, стрелка, тоггл с ::before и состояние раскрытия.
   ============================================================ */

/* Левая колонка — настройки распознавания */
.lk-recognition__settings {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 370px;
    flex-shrink: 0;
}

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

/* На десктопе обёртки прозрачны для лейаута — иконка/лейбл/значение в один ряд */
.lk-recognition__setting-body,
.lk-recognition__setting-head {
    display: contents;
}

/* Стрелка-вправо и тоггл доп. настроек видны только на мобиле */
.lk-recognition__setting-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--lk-icon-grey);
}

.lk-recognition__setting-arrow svg { width: 24px; height: 24px; display: block; }

.lk-recognition__settings-toggle {
    display: none;
    position: relative;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.lk-recognition__settings-toggle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: var(--lk-stroke);
}

.lk-recognition__settings-toggle-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 1000px;
    background-color: var(--lk-white);
    border: 1.5px solid var(--lk-stroke);
    color: var(--lk-icon-grey);
    transition: transform 140ms ease-out;
}

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

.lk-recognition__settings.is-expanded .lk-recognition__settings-toggle-icon {
    transform: rotate(180deg);
}

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

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

.lk-recognition__setting-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--lk-grey);
    white-space: nowrap;
}

.lk-recognition__setting-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    /* min-width:0 позволяет пилюле сжимать значение (иначе длинная подпись, напр.
       «только левый канал», выдавливается за пределы блока); overflow прячет хвост. */
    min-width: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--lk-violet);
    white-space: nowrap;
}

.lk-recognition__setting-value [data-lk-setting-label] {
    text-decoration: underline;
    /* Длинное значение обрезаем многоточием, не ломая ряд настройки */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lk-recognition__setting-value-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

.lk-recognition__setting-value-icon:empty {
    display: none;
}

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

.lk-recognition__setting-value-icon .fi { border-radius: 2px; }

/* ============================================================
   Состояние загрузки файла: прогресс по периметру рамки +
   блокировка формы. Управляется recognition-form.js
   (класс .is-uploading + переменная --lk-upload-progress).
   ============================================================ */

/* Регистрируем переменную прогресса как анимируемую (<percentage>),
   чтобы заполнение рамки плавно перетекало между значениями, а не прыгало. */
@property --lk-upload-progress {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

/* Контейнер формы — точка отсчёта для кольца-прогресса.
   transition на --lk-upload-progress сглаживает шаги uploadprogress (per-file,
   монотонный 0→100; значение наследуется в ::before и анимируется вместе с ним). */
[data-lk-recognition] {
    position: relative;
    transition: --lk-upload-progress 0.45s ease-out;
}

/* Кольцо-прогресс по периметру (трюк «градиентная рамка» через mask).
   Заполненная дуга — фиолетовый градиент до --lk-upload-progress,
   остаток прозрачен: сквозь него виден статичный бордюр-«трек». */
[data-lk-recognition].is-uploading::before,
[data-lk-recognition].is-url-loading::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 25px;            /* = rounded-3xl (1.5rem) + смещение inset */
    padding: 6px;                   /* толщина кольца */
    background: conic-gradient(from 0deg,
        #E3D3FB,
        #B79CF7 calc(var(--lk-upload-progress, 0%) * 0.5),
        #8752FA var(--lk-upload-progress, 0%),
        transparent var(--lk-upload-progress, 0%));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Отправка ссылки: процента прогресса нет (короткий POST, дальше работает серверная
   очередь), поэтому вместо заполняющейся дуги — «змейка»: короткая фиолетовая дуга
   бежит по периметру. Угол — регистрируемая переменная, иначе conic не анимируется. */
@property --lk-url-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

[data-lk-recognition].is-url-loading::before {
    background: conic-gradient(from var(--lk-url-angle),
        transparent 0turn,
        #E3D3FB 0.08turn,
        #B79CF7 0.16turn,
        #8752FA 0.24turn,
        transparent 0.24turn);
    animation: lk-url-snake 1.1s linear infinite;
}

@keyframes lk-url-snake {
    to { --lk-url-angle: 360deg; }
}

/* Блокировка интерактива на время загрузки файла или обработки ссылки */
[data-lk-recognition].is-uploading [data-lk-settings],
[data-lk-recognition].is-uploading [data-lk-dropzone],
[data-lk-recognition].is-uploading [data-lk-url-input],
[data-lk-recognition].is-uploading [data-lk-recognize-btn],
[data-lk-recognition].is-url-loading [data-lk-settings],
[data-lk-recognition].is-url-loading [data-lk-dropzone],
[data-lk-recognition].is-url-loading [data-lk-url-input],
[data-lk-recognition].is-url-loading [data-lk-recognize-btn] {
    opacity: 0.5;
    pointer-events: none;
}

/* Скрываем дефолтное превью Dropzone (файл/размер/галочка-крестик) */
[data-lk-dropzone] .dz-preview { display: none !important; }

/* Подсветка рамки при перетаскивании файла над зоной — была в легаси (.dropzone.dz-drag-hover,
   theme-default.css). Класс dz-drag-hover навешивает сама библиотека Dropzone.js по
   dragenter/dragleave, здесь только стиль под новый дизайн. */
[data-lk-dropzone].dz-drag-hover {
    border-color: var(--lk-violet);
    background-color: var(--lk-violet-bg);
}