/* Video recorder (video_recorder) — оформление рабочей области.
   Порода cam_shutter (Photo Booth): индиго-карточка, крупное скруглённое превью, круглая кнопка на
   нижней кромке превью. Только круглая кнопка здесь — кнопка ЗАПИСИ (красная, классический record).
   Сайтовые токены/шапку не трогаем (см. .tool_conventions/for_webcam.md + _common.md «Подложка
   инструмента»). Каркас — Bootstrap, кастом (кнопка записи, оверлеи, плеер) — согласован категорией
   for_webcam, поверх Bootstrap. Префикс .vdr (.vr занят Bootstrap-утилитой, .vrec — voice_recorder). */

.vdr {
    --vdr-accent:      #5b66e6;
    --vdr-accent-2:    #7280f0;  /* светлее — для градиента */
    --vdr-accent-dark: #4751c9;  /* hover */
    --vdr-soft:        #eceefe;  /* светлая индиго-заливка чипов/иконок */
    --vdr-bg:          #f4f4f8;  /* подложка рабочих блоков */
    --vdr-card:        #ffffff;
    --vdr-stage:       #1f1f2b;  /* фон пустого превью */
    --vdr-text:        #2a2a38;
    --vdr-muted:       #8a8a9a;
    --vdr-line:        #e6e6ef;
    --vdr-danger:      #d6483b;
    --vdr-rec:         #e23b3b;  /* красный записи */
    --vdr-rec-dark:    #c62f2f;
    --vdr-radius:      18px;
    --vdr-radius-sm:   11px;

    max-width: var(--vdr-stage-w, 760px);
    margin-inline: auto;
    color: var(--vdr-text);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--vdr-card);
    border: 1px solid var(--vdr-line);
    border-radius: var(--vdr-radius);
    box-shadow: 0 2px 10px rgba(40, 40, 90, .05);
    padding: 1.1rem 1.25rem 1.25rem;
}

/* hidden-атрибут скрывает даже элементы с заданным display */
.vdr [hidden] { display: none !important; }

/* Снимаем браузерное/bootstrap обрамление фокуса (правило CLAUDE.md) */
.vdr input:focus,
.vdr button:focus,
.vdr select:focus,
.vdr .form-check-input:focus,
.vdr [tabindex]:focus {
    outline: none;
    box-shadow: none;
}

/* ---------- Шапка карточки ---------- */
.vdr__head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.vdr__logo {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--vdr-accent), var(--vdr-accent-2));
    color: #fff; font-size: 1.05rem;
}
.vdr__title { font-weight: 700; font-size: 1.15rem; }
.vdr__head-actions { margin-left: auto; display: flex; gap: .5rem; }
.vdr__headbtn {
    display: inline-flex; align-items: center; gap: .35rem;
    background: 0; border: 1px solid var(--vdr-line); border-radius: var(--vdr-radius-sm);
    color: var(--vdr-muted); font-size: .85rem; padding: .4rem .75rem; cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}
.vdr__headbtn:hover { color: var(--vdr-accent); border-color: #c7ccf5; background: var(--vdr-soft); }
.vdr__headbtn[aria-expanded="true"] { color: var(--vdr-accent); border-color: var(--vdr-accent); background: var(--vdr-soft); }
/* Settings бессмысленны до доступа к камере — показываем только когда камера открыта */
.vdr[data-state="idle"] #vdr-settings-btn { display: none; }

/* ---------- Панель настроек ---------- */
.vdr__settings {
    background: var(--vdr-bg); border: 1px solid var(--vdr-line); border-radius: var(--vdr-radius-sm);
    padding: .9rem 1rem; margin-bottom: 1rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem 1.4rem; align-items: start;
}
.vdr__setting { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.vdr__setting-cap { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vdr-muted); }
.vdr__device-sel { border-color: var(--vdr-line); }
.vdr__setting-toggle { gap: .3rem; }
.vdr__switch { padding-left: 2.6em; min-height: auto; margin: 0; }
.vdr__switch .form-check-input { width: 2.1em; height: 1.1em; margin-left: -2.6em; cursor: pointer; background-color: #d3d3e2; border-color: #d3d3e2; }
.vdr__switch .form-check-input:checked { background-color: var(--vdr-accent); border-color: var(--vdr-accent); }
.vdr__switch .form-check-label { font-weight: 600; font-size: .92rem; cursor: pointer; }
.vdr__setting-hint { font-size: .82rem; color: var(--vdr-muted); margin: 0; }

/* ====================================================================
   Рабочая область: превью / плеер
   ==================================================================== */
/* z-index создаёт у stage СОБСТВЕННЫЙ stacking-контекст — видео-слой заперт внутри него и не может
   «всплыть» поверх круглой кнопки (как в cam_shutter с затвором). */
.vdr__stage { position: relative; z-index: 1; margin-bottom: 84px; }
.vdr__preview {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--vdr-stage);
    border-radius: var(--vdr-radius);
    /* overflow VISIBLE — нижняя половина кнопки записи выступает за край; углы держат медиа-слои сами */
    overflow: visible;
}
/* клип-обёртка: скруглённые углы */
.vdr__media {
    position: absolute; inset: 0;
    overflow: hidden; border-radius: var(--vdr-radius);
}
.vdr__video, .vdr__review-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    background: var(--vdr-stage);
}
/* Зеркалим ТОЛЬКО живое видео (сырой поток превью). Записанное видео — как камера видит (без зеркала). */
.vdr[data-mirror="1"] .vdr__video { transform: scaleX(-1); }

/* видимость слоёв по состоянию */
.vdr[data-state="idle"]   .vdr__video,
.vdr[data-state="review"] .vdr__video { display: none; }
.vdr[data-state="idle"]      .vdr__review-video,
.vdr[data-state="live"]      .vdr__review-video,
.vdr[data-state="recording"] .vdr__review-video { display: none; }
.vdr[data-state="live"]      .vdr__placeholder,
.vdr[data-state="recording"] .vdr__placeholder,
.vdr[data-state="review"]    .vdr__placeholder { display: none; }

/* плейсхолдер (idle) */
.vdr__placeholder {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem;
    text-align: center; padding: 1.25rem; color: #e8e8f2;
}
.vdr__cam-circle {
    display: inline-grid; place-items: center;
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--vdr-accent), var(--vdr-accent-2));
    color: #fff; font-size: 1.9rem; box-shadow: 0 8px 22px rgba(91, 102, 230, .45);
}
.vdr__start {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; color: var(--vdr-accent); font-weight: 600;
    border: 0; border-radius: var(--vdr-radius-sm); padding: .6rem 1.4rem;
}
.vdr__start:hover { background: var(--vdr-soft); color: var(--vdr-accent-dark); }
.vdr__placeholder-text { margin: 0; font-size: .95rem; }
.vdr__placeholder-note { margin: 0; font-size: .8rem; color: #b9b9cc; display: flex; flex-direction: column; }

/* ---- оверлеи поверх живого видео ---- */
.vdr__ovl {
    position: absolute; z-index: 3;
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(20, 18, 36, .55); color: #fff;
    border: 0; border-radius: 999px; padding: .4rem .7rem; font-size: .82rem; cursor: pointer;
    backdrop-filter: blur(2px);
}
.vdr__ovl:hover { background: rgba(20, 18, 36, .72); }
.vdr__mirror { top: .7rem; right: .7rem; }
.vdr__mirror[aria-pressed="true"] { background: var(--vdr-accent); }
.vdr__flip { bottom: .7rem; right: .7rem; width: 42px; height: 42px; justify-content: center; padding: 0; font-size: 1.1rem; }
.vdr__settings-ovl { display: none; top: .7rem; right: .7rem; width: 42px; height: 42px; justify-content: center; padding: 0; font-size: 1.05rem; }
.vdr__settings-ovl[aria-expanded="true"] { background: var(--vdr-accent); }
/* mirror/flip/settings-ovl — только пока показано живое видео (live/recording). В recording прячем
   mirror и flip (менять зеркало/камеру на ходу нельзя — поток уже пишется), оставляем чистый кадр. */
.vdr[data-state="idle"]      .vdr__mirror,
.vdr[data-state="review"]    .vdr__mirror,
.vdr[data-state="recording"] .vdr__mirror,
.vdr[data-state="idle"]      .vdr__flip,
.vdr[data-state="review"]    .vdr__flip,
.vdr[data-state="recording"] .vdr__flip,
.vdr[data-state="idle"]      .vdr__settings-ovl,
.vdr[data-state="review"]    .vdr__settings-ovl,
.vdr[data-state="recording"] .vdr__settings-ovl { display: none; }

/* ---- индикатор записи (recording) ---- */
.vdr__rec-badge {
    position: absolute; top: .7rem; left: .7rem; z-index: 4;
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(20, 18, 36, .6); color: #fff;
    border-radius: 999px; padding: .32rem .7rem; font-size: .82rem; font-weight: 600;
    font-variant-numeric: tabular-nums; backdrop-filter: blur(2px);
}
.vdr__rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vdr-rec); animation: vdr-blink 1s steps(2, start) infinite; }
.vdr__rec-label { letter-spacing: .04em; }
@keyframes vdr-blink { 50% { opacity: .25; } }

/* ---- подсказка-стрелка (live, до первой записи) ---- */
/* Стоит ВЫШЕ выступающей кнопки записи (не налезает на неё) и ПОВЕРХ всего (z-index выше кнопки),
   чтобы текст/стрелка не уходили ЗА кнопку. Плашка статична — покачивается только стрелка-указатель,
   «ведёт» взгляд вниз к кнопке. bottom подобран так, чтобы остриё стрелки было над белым ореолом
   кнопки с небольшим зазором (верх кнопки ~42px + ореол 7px от низа превью). */
.vdr__hint {
    position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 8;
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    pointer-events: none; text-align: center;
}
.vdr__hint-text {
    background: var(--vdr-accent); color: #fff; font-size: .82rem; font-weight: 600;
    padding: .38rem .8rem; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(40, 30, 90, .35);
}
.vdr__hint-arrow {
    color: var(--vdr-accent); font-size: 1.9rem; line-height: 1; margin-top: -2px;
    filter: drop-shadow(0 2px 3px rgba(40, 30, 90, .4));
    animation: vdr-bob 1.1s ease-in-out infinite;
}
@keyframes vdr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* hint виден только в live (JS дополнительно скрывает после первой записи) */
.vdr:not([data-state="live"]) .vdr__hint { display: none; }

/* ---- большая центральная кнопка Play (review, на паузе) ---- */
.vdr__bigplay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
    width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(20, 18, 36, .55); color: #fff; font-size: 2.1rem;
    display: grid; place-items: center; backdrop-filter: blur(2px);
    transition: background .12s, transform .08s;
}
.vdr__bigplay:hover { background: rgba(20, 18, 36, .72); }
.vdr__bigplay:active { transform: translate(-50%, -50%) scale(.93); }
/* видна только в review и только когда видео на паузе (класс is-playing убирает её) */
.vdr:not([data-state="review"]) .vdr__bigplay { display: none; }
.vdr.is-playing .vdr__bigplay { display: none; }

/* ====================================================================
   Круглая кнопка ЗАПИСИ (на нижней кромке превью)
   ==================================================================== */
.vdr__rec-wrap {
    position: absolute; top: calc(100% - 42px); left: 50%; transform: translateX(-50%); z-index: 6;
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.vdr__rec {
    position: relative;
    width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
    background: #fff; display: grid; place-items: center;
    transition: transform .08s ease, background .15s ease;
}
/* Белый ореол — ОТДЕЛЬНЫЙ НЕПРОЗРАЧНЫЙ круг-подложка, а НЕ box-shadow (над живым <video> в Chrome
   box-shadow пропадает; см. .tool_conventions/for_webcam.md). Тело кнопки + ореол читаются как один
   белый диск с тенью, внутри — красный record-глиф. */
.vdr__rec::before {
    content: ""; position: absolute; inset: -7px; z-index: -1;
    border-radius: 50%; background: #fff;
    border: 1px solid rgba(54, 54, 84, .18);
    box-shadow: 0 6px 18px rgba(20, 20, 50, .30);
}
.vdr__rec:active { transform: scale(.93); }
/* глиф: в режиме записи (live/idle) — красный кружок; в recording — белый квадрат «стоп» */
.vdr__rec-glyph {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--vdr-rec); transition: width .18s ease, height .18s ease, border-radius .18s ease, background .18s ease;
}
.vdr__rec:hover .vdr__rec-glyph { background: var(--vdr-rec-dark); }
/* recording: тело кнопки красное, глиф — белый квадрат, лёгкая пульсация */
.vdr[data-state="recording"] .vdr__rec { background: var(--vdr-rec); animation: vdr-pulse 1.4s ease-in-out infinite; }
.vdr[data-state="recording"] .vdr__rec:hover { background: var(--vdr-rec-dark); }
.vdr[data-state="recording"] .vdr__rec-glyph { width: 26px; height: 26px; border-radius: 5px; background: #fff; }
@keyframes vdr-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 59, 59, .0); } 50% { box-shadow: 0 0 0 7px rgba(226, 59, 59, .22); } }
.vdr__rec-cap { font-size: .82rem; color: var(--vdr-muted); margin-top: .1rem; }
.vdr[data-state="recording"] .vdr__rec-cap { color: var(--vdr-rec); font-weight: 600; }
/* в review управление — через плеер, круглую кнопку записи прячем */
.vdr[data-state="review"] .vdr__rec-wrap { display: none; }
/* …а вместе с ней убираем резерв под её выступ снизу stage (иначе зияет пустота под плеером).
   Перебивает и базовое значение, и мобильные media-правки (выше специфичность). */
.vdr[data-state="review"] .vdr__stage { margin-bottom: 0; }

/* ====================================================================
   Панель воспроизведения (review)
   ==================================================================== */
.vdr__playbar {
    display: flex; align-items: center; gap: .7rem;
    margin-top: 1rem;
    background: var(--vdr-bg); border: 1px solid var(--vdr-line); border-radius: var(--vdr-radius-sm);
    padding: .6rem .85rem;
}
.vdr__playbtn {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--vdr-accent), var(--vdr-accent-2));
    color: #fff; font-size: 1.35rem; display: grid; place-items: center;
}
.vdr__playbtn:hover { background: linear-gradient(135deg, var(--vdr-accent-dark), var(--vdr-accent)); }
.vdr__time { font-size: .82rem; color: var(--vdr-muted); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; }

/* ползунок воспроизведения — стилизованный range, перетаскиваемый (и клавиатурой: стрелки) */
.vdr__seek {
    flex: 1 1 auto; -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 999px; cursor: pointer;
    background: linear-gradient(to right, var(--vdr-accent) 0%, var(--vdr-accent) var(--vdr-seek-pct, 0%), #d7d8e6 var(--vdr-seek-pct, 0%), #d7d8e6 100%);
}
.vdr__seek::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    border: 2px solid var(--vdr-accent); cursor: pointer;
    box-shadow: 0 1px 4px rgba(40, 30, 90, .3);
}
.vdr__seek::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    border: 2px solid var(--vdr-accent); cursor: pointer; box-shadow: 0 1px 4px rgba(40, 30, 90, .3);
}
.vdr__seek::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }

/* ====================================================================
   Нижние действия (review): Download + Record again
   ==================================================================== */
/* Видны только в review — пока не записали, кнопок нет */
.vdr:not([data-state="review"]) .vdr__actions,
.vdr:not([data-state="review"]) .vdr__playbar { display: none; }

.vdr__actions { display: flex; gap: .8rem; margin-top: 1rem; }
.vdr__download {
    flex: 1 1 auto;
    background: linear-gradient(135deg, var(--vdr-accent), var(--vdr-accent-2));
    border: 0; color: #fff; font-weight: 600; border-radius: var(--vdr-radius-sm);
    padding: .8rem 1.4rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.vdr__download:hover { background: linear-gradient(135deg, var(--vdr-accent-dark), var(--vdr-accent)); color: #fff; }
.vdr__again {
    flex: 0 0 auto;
    background: #fff; border: 1px solid var(--vdr-line); color: var(--vdr-text);
    border-radius: var(--vdr-radius-sm); padding: .8rem 1.3rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.vdr__again:hover { background: var(--vdr-bg); border-color: #c7ccf5; color: var(--vdr-accent); }

/* ошибка / предупреждение */
.vdr__error { margin: .85rem 0 0; min-height: 0; color: var(--vdr-danger); font-size: .9rem; text-align: center; }
.vdr__error:empty { margin: 0; }
.vdr__error.is-warn { color: #8a6d1a; }

/* ====================================================================
   Мобайл — крупное превью «как камера телефона», минимум текста.
   ==================================================================== */
@media (max-width: 640px) {
    .vdr { padding: .7rem .6rem .8rem; }
    .vdr__head { display: none; }
    .vdr__rec-cap { display: none; }
    /* Settings — оверлеем в верхнем правом углу превью, справа от Mirror (только live) */
    .vdr[data-state="live"] .vdr__settings-ovl { display: inline-flex; }
    /* Mirror на мобайле — круглая иконка БЕЗ подписи, левее Settings */
    .vdr__mirror { right: calc(.7rem + 50px); width: 42px; height: 42px; padding: 0; gap: 0; justify-content: center; font-size: 1.05rem; }
    .vdr__mirror span { display: none; }
    .vdr__placeholder-text, .vdr__placeholder-note { display: none; }
    .vdr__settings { grid-template-columns: 1fr; gap: .8rem; }
    .vdr__headbtn span { display: none; }
    .vdr__headbtn { padding: .45rem .6rem; }
    /* крупное превью; ПОРТРЕТ когда телефон стоя */
    .vdr__preview { aspect-ratio: 3 / 4; max-height: 62vh; }
    .vdr__stage { margin-bottom: 54px; }   /* подпись убрана → меньше резерв под выступ кнопки */
    .vdr__actions { flex-direction: column; }
    .vdr__again { width: 100%; }
}
/* телефон/планшет ЛЁЖА — широкое превью */
@media (max-width: 900px) and (orientation: landscape) {
    .vdr__logo, .vdr__title { display: none; }
    .vdr__rec-cap { display: none; }
    .vdr__placeholder-text, .vdr__placeholder-note { display: none; }
    .vdr__preview { aspect-ratio: 16 / 9; max-height: 78vh; }
}
@media (max-width: 380px) {
    .vdr__rec { width: 64px; height: 64px; }
    .vdr__rec-glyph { width: 26px; height: 26px; }
    .vdr[data-state="recording"] .vdr__rec-glyph { width: 22px; height: 22px; }
    .vdr__rec-wrap { top: calc(100% - 32px); }   /* кнопка 64px → половина 32px на кромке */
    .vdr__stage { margin-bottom: 46px; }
}