/* Авторизация браузера агента: карточка профиля, экран управляемого браузера
   и строка ручного ввода. Используем переменные и классы кабинета
   (.card, .btn, .section-head, .input) — новых цветов и шрифтов не заводим.
   Этот же файл подключает и cabinet.html: там он задаёт размер iframe раздела. */

.ba-body { background: var(--bg); }
.ba-page { max-width: 1040px; margin: 0 auto; padding: 16px; }

.ba-card { margin-bottom: 16px; }

.ba-status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ba-label { font-size: 12px; color: var(--muted); }
.ba-project { max-width: 420px; min-width: 220px; flex: 1 1 260px; }

.ba-status {
    display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 10px;
    background: var(--hover); color: var(--muted); white-space: nowrap;
}
.ba-status-ok { background: rgba(46, 160, 67, .15); color: #7fe0a3; }
.ba-status-pending { background: rgba(255, 206, 92, .15); color: #ffce5c; }
.ba-status-none { background: var(--hover); color: var(--muted2); }

.ba-meta { font-size: 12px; color: var(--muted2); margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.ba-meta b { color: var(--muted); font-weight: 500; }
.ba-meta code { color: var(--text); word-break: break-all; }

.ba-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.ba-notice {
    font-size: 12px; color: var(--accent); background: var(--hover);
    border-radius: var(--radius); padding: 8px 10px; margin-top: 10px;
}
.ba-notice-error { color: var(--danger); }

/* Экран управляемого браузера: кадры приходят потоком с рантайма. */
.ba-stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ba-stage-title { font-size: 15px; font-weight: 600; color: var(--text); }
.ba-frame-meta { font-size: 12px; color: var(--muted2); }

.ba-stage {
    position: relative; margin-top: 10px;
    /* Высоту задаёт сам контейнер, а не картинка: с абсолютным кадром (см.
       .ba-shot) площадь иначе схлопнулась бы. 16:10 — привычная пропорция
       экрана; кадр вписывается в неё с сохранением пропорций. */
    aspect-ratio: 16 / 10; min-height: 180px;
    display: flex; align-items: center; justify-content: center;
    background: var(--input); border: 1px solid var(--border); border-radius: var(--radius);
    /* Кадр вписан (scale-down) — обычно полос нет; при нехватке места область
       прокручивается сама по вертикали (колесо при управлении «я» уходит в
       удалённую страницу и гасится, двух прокруток сразу нет). */
    overflow-y: auto; overflow-x: hidden;
}
/* Кадр вписан в площадь С сохранением пропорций (object-fit: scale-down:
   вписывание по меньшей стороне без апскейла выше 1:1, с центрированием) —
   размер области задаёт контейнер, а не картинка. Раньше стояло fill: кадр
   растягивался на площадь и искажался, пока не приходила подгонка размера.
   Доли клика (framePoint) считаются по прямоугольнику изображения с учётом
   полей letterbox. */
.ba-shot {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: scale-down; display: block; cursor: crosshair;
}
/* Правило класса сильнее [hidden] из UA-стилей: без этой строки «ожидание
   кадра» показывало бы пустую картинку вместо подсказки. */
.ba-shot[hidden] { display: none; }
.ba-stage-empty { font-size: 13px; color: var(--muted2); padding: 24px; text-align: center; }
.ba-url { font-size: 12px; color: var(--muted); margin-top: 8px; word-break: break-all; min-height: 15px; }

.ba-input-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ba-text { flex: 1 1 260px; min-width: 180px; }

.ba-keys { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ba-keys-label { font-size: 12px; color: var(--muted2); }
.ba-keys .btn { padding: 4px 10px; font-size: 12px; }

/* Раздел кабинета держит эту страницу в iframe: во всю высоту рабочей области. */
.ba-iframe {
    width: 100%; height: calc(100vh - 104px); min-height: 480px;
    border: 0; display: block; background: var(--bg);
}