/* Webcam test (cam_check) — стили. Каркас на Bootstrap, вид догоняется здесь поверх токенов theme.css.
   Дизайн — по согласованному макету (.tmp): светлая карточка-превью со скруглением, отдельная белая
   карточка-индикатор справа (прямые пилюли-сегменты + микрофон), карточка статуса из 3 ячеек с круглыми
   иконками и точками Active/Inactive, карточка «How it works». Цвета — пипеткой из макета, как токены.
   Размеры/пороги/число сегментов — из config.php → window.CAMCHK. */

/* Палитра/токены инструмента — в :root, т.к. ими пользуются и соседи .camchk (напр. inline-ширина
   рабочей зоны), а не только его потомки. Префикс --camchk- исключает коллизии. */
:root {
    /* геометрия */
    --camchk-stage-w: 760px;          /* стартовая ширина превью (переопределяется inline из config) */
    --camchk-meter-w: 56px;
    --camchk-gap: .75rem;
    --camchk-radius: 16px;            /* скругление карточек по макету */
    --camchk-radius-sm: 10px;         /* скругление кнопок */

    /* палитра — белая подложка, обозначенная границей (без голубых оттенков) */
    --camchk-wrap-bg:   #ffffff;      /* общая обложка — белая, отделяется границей и тенью */
    --camchk-card-bg:   #f4f5f7;      /* область превью — нейтральный светло-серый */
    --camchk-surface:   #ffffff;      /* белые панели (ячейки Camera/Sound, индикатор, how-it-works) */
    --camchk-border:    #dcdfe5;      /* граница панелей (нейтральная) */
    --camchk-divider:   #dcdfe5;
    --camchk-shadow:    0 1px 2px rgba(17, 24, 39, .05), 0 6px 18px rgba(17, 24, 39, .06); /* глубина обложки */

    --camchk-blue:      #2059ee;      /* CTA и синие иконки (как в макете) */
    --camchk-blue-dark: #1746cc;      /* hover кнопки */
    --camchk-blue-tint: #e8eefc;      /* фон синей иконки */
    --camchk-red:       #d22f27;      /* крестик «нет сигнала» */

    /* активное состояние — сочная зелёная заливка ячейки */
    --camchk-green:      #18b15c;
    --camchk-green-dark: #129a4f;
    --camchk-green-fill: linear-gradient(135deg, #1bbd63, #12a352);

    --camchk-seg-off:   #e4e6ea;      /* погашенный сегмент индикатора */
    --camchk-mic:       #2059ee;      /* микрофон в карточке индикатора (синий, как в макете) */
    --camchk-test-off-bg: var(--camchk-blue-tint);  /* фон иконки неактивной ячейки */
    --camchk-test-off-ic: var(--camchk-blue);       /* синяя иконка неактивной ячейки */

    --camchk-text:      #111827;      /* основной тёмный текст */
    --camchk-muted:     #5b6275;      /* приглушённый текст */

    /* индикатор уровня (зоны активных сегментов) */
    --camchk-lvl-green: #45ab3e;
    --camchk-lvl-yellow:#f2c037;
    --camchk-lvl-red:   #d0392b;
}

.camchk {
    --camchk-pad: 18px;               /* внутренний отступ обложки */
    display: flex;
    flex-direction: column;
    gap: var(--camchk-gap);
    /* Всё приложение — в одной общей обложке (карточке) */
    width: 100%;
    max-width: calc(var(--camchk-stage-w) + var(--camchk-meter-w) + var(--camchk-gap) + 2 * var(--camchk-pad));
    margin-inline: auto;
    padding: var(--camchk-pad);
    background: var(--camchk-wrap-bg);
    border: 1px solid var(--camchk-border);
    border-radius: 20px;
    box-shadow: var(--camchk-shadow);
    color: var(--camchk-text);
}

/* --- Селекты устройств: над панелью, по ширине колонки, без подписи --- */
.camchk__device-sel { width: 100%; max-width: none; }
.camchk__device-sel.is-hidden { display: none; }

/* --- Рабочая область: превью + карточка-индикатор --- */
.camchk__stage {
    display: flex;
    align-items: stretch;
    gap: var(--camchk-gap);
    width: 100%;
}

.camchk__preview {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    aspect-ratio: 4 / 3;
    background: var(--camchk-card-bg);
    border: 1px solid var(--camchk-border);
    border-radius: var(--camchk-radius);
    box-shadow: var(--camchk-shadow);
    overflow: hidden;
}

.camchk__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #111;
    display: none;                    /* показываем, когда поток запущен */
    transform: scaleX(-1);            /* зеркало — привычнее для «селфи» */
}
.camchk[data-state="live"] .camchk__video { display: block; }

/* Зум — две круглые кнопки-лупы слева сверху поверх превью */
.camchk__zoom {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.camchk__zoom-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--camchk-blue);
    background: var(--camchk-surface);
    border: 1px solid var(--camchk-border);
    border-radius: var(--camchk-radius-sm);
    box-shadow: 0 1px 4px rgba(17, 24, 39, .10);
    cursor: pointer;
    transition: background .12s ease;
}
.camchk__zoom-btn:hover { background: #f3f5f9; }
.camchk__zoom-btn:focus,
.camchk__zoom-btn:focus-visible { outline: none; box-shadow: 0 1px 4px rgba(17, 24, 39, .10); }
.camchk__zoom-btn[disabled] { opacity: .4; cursor: default; }

/* Плейсхолдер до запуска (поверх области превью) */
.camchk__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    text-align: center;
    padding: 1.25rem;
}
.camchk[data-state="live"] .camchk__placeholder { display: none; }

/* Круг с иконкой камеры над кнопкой */
.camchk__cam-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--camchk-surface);
    border: 1px solid var(--camchk-border);
    color: var(--camchk-blue);
    font-size: 26px;
    margin-bottom: .75rem;
    box-shadow: 0 1px 4px rgba(17, 24, 39, .06);
}

.camchk__placeholder-text { margin: .35rem 0 0; font-size: 15px; color: var(--camchk-text); max-width: 30rem; }
.camchk__placeholder-note {
    margin: .15rem 0 0;
    font-size: 13px;
    color: var(--camchk-muted);
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Кнопка запуска — синяя, как в макете (свой синий поверх btn-primary) */
.camchk__start.btn-primary {
    --bs-btn-bg: var(--camchk-blue);
    --bs-btn-border-color: var(--camchk-blue);
    --bs-btn-hover-bg: var(--camchk-blue-dark);
    --bs-btn-hover-border-color: var(--camchk-blue-dark);
    --bs-btn-active-bg: var(--camchk-blue-dark);
    --bs-btn-active-border-color: var(--camchk-blue-dark);
    --bs-btn-disabled-bg: var(--camchk-blue);
    --bs-btn-disabled-border-color: var(--camchk-blue);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    padding: .6rem 1.5rem;
    border-radius: var(--camchk-radius-sm);
}
.camchk__start .bi { font-size: 1.15em; }
.camchk__start[disabled] { opacity: .7; }

/* На десктопе кнопка запуска крупнее */
@media (min-width: 576px) {
    .camchk__start.btn-primary {
        font-size: 1.15rem;
        font-weight: 700;
        padding: .85rem 2.25rem;
        gap: .6rem;
    }
}

/* Компактная кнопка остановки оверлеем (правый верх превью), только в live */
.camchk__stop {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: none;
    align-items: center;
    gap: .4rem;
    font-size: 13px;
    border-radius: var(--camchk-radius-sm);
    box-shadow: 0 1px 4px rgba(17, 24, 39, .12);
}
.camchk[data-state="live"] .camchk__stop { display: inline-flex; }
.camchk__stop-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--camchk-lvl-red); }

/* --- Карточка-индикатор звука --- */
.camchk__meter {
    flex: 0 0 var(--camchk-meter-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    background: var(--camchk-surface);
    border: 1px solid var(--camchk-border);
    border-radius: var(--camchk-radius);
    box-shadow: var(--camchk-shadow);
}
.camchk__bars {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 0;
    min-height: 0;
}
.camchk__bar {
    flex: 1 1 0;
    width: 50%;
    min-height: 6px;
    border-radius: 4px;
    background: var(--camchk-seg-off);
    transition: background .05s linear;
}
.camchk__bar.is-on.is-green  { background: var(--camchk-lvl-green); }
.camchk__bar.is-on.is-yellow { background: var(--camchk-lvl-yellow); }
.camchk__bar.is-on.is-red    { background: var(--camchk-lvl-red); }

.camchk__mic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--camchk-mic);
    padding-top: 2px;
}

/* --- Статус-ряд: два отдельных поля Camera | Sound (тесты сигнала) --- */
.camchk__status {
    display: flex;
    gap: var(--camchk-gap);
    align-items: start;
}
/* Колонка = селект сверху (по ширине) + панель снизу. Равные колонки и на мобайле. */
.camchk__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.camchk__status-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem .9rem;
    background: var(--camchk-surface);
    border: 1px solid var(--camchk-border);
    border-radius: 14px;
    /* плавный переход в активное (зелёное) состояние */
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Иконка-плашка ячейки */
.camchk__ic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 18px;
    background: var(--camchk-test-off-bg);       /* по умолчанию — светло-синяя плашка */
    color: var(--camchk-test-off-ic);            /* синяя иконка */
    transition: background-color .25s ease, color .25s ease;
}

.camchk__test-body { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.camchk__test-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--camchk-text);
    transition: color .2s ease, font-size .2s ease;
}
.camchk__test-sub {
    font-size: 12px;
    color: var(--camchk-red);            /* «Not detected» — красным */
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s ease;
}

/* Активный вид — сообщение во всю ширину поля (скрыт в idle) */
.camchk__test-ok {
    display: none;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}
.camchk__test-ok .bi { font-size: 22px; -webkit-text-stroke: 1px #fff; }

/* === Активное состояние: вся ячейка заливается зелёным, idle-вид прячется === */
.camchk__test[data-active="1"] {
    background: var(--camchk-green);
    background: var(--camchk-green-fill);
    border-color: var(--camchk-green-dark);
    box-shadow: 0 4px 14px rgba(16, 163, 82, .35);
    justify-content: center;
}
.camchk__test[data-active="1"] .camchk__ic,
.camchk__test[data-active="1"] .camchk__test-body { display: none; }
.camchk__test[data-active="1"] .camchk__test-ok { display: flex; animation: camchk-pop .28s ease; }

@keyframes camchk-pop {
    0%   { transform: scale(.6); opacity: 0; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .camchk__test, .camchk__ic, .camchk__test-name, .camchk__test-sub { transition: none; }
    .camchk__test[data-active="1"] .camchk__test-ok { animation: none; }
}

/* Тех-данные под экраном — второстепенная подпись одной строкой, без заголовка */
.camchk__info {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin: .1rem 0 0;
    padding: 0 .25rem;
    font-size: 12px;
    color: var(--camchk-muted);
    line-height: 1.4;
}
.camchk__info-item { min-width: 0; }
.camchk__info-item span { color: var(--camchk-text); }

/* --- Ошибки (резервируют место — без прыжков) --- */
.camchk__error { margin: 0; min-height: 1.25rem; color: var(--tls-danger); font-size: 14px; }
.camchk__error:empty::before { content: "\00a0"; }

/* «How it works» — общий блок движка (.tool-explain), стили в assets/css/app.css. */

.is-hidden { display: none !important; }

/* --- Мобайл: раскладка адаптируется под узкий экран --- */
@media (max-width: 575.98px) {
    :root { --camchk-meter-w: 46px; --camchk-radius: 14px; }
    .camchk { --camchk-pad: 12px; border-radius: 16px; }
    .camchk__col { gap: .35rem; }
    .camchk__device-sel { font-size: 12px; }

    /* На узком экране жёсткое 4/3 делает превью слишком низким для круга+кнопки+подсказок —
       даём минимальную высоту, карточка-индикатор тянется по ней (align stretch). */
    .camchk__preview { aspect-ratio: auto; min-height: 340px; }

    /* Camera/Sound остаются В РЯД (две равные колонки), а не в столбик — компактнее под мобайл-макет. */
    .camchk__status-cell { gap: .45rem; padding: .5rem .55rem; }
    .camchk__ic { width: 32px; height: 32px; font-size: 14px; }
    .camchk__test-name { font-size: 14px; }
    .camchk__test-sub { font-size: 11px; }
    .camchk__test[data-active="1"] .camchk__test-name { font-size: 15px; }
}