/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-nxnulpl8f3],
.components-reconnect-repeated-attempt-visible[b-nxnulpl8f3],
.components-reconnect-failed-visible[b-nxnulpl8f3],
.components-pause-visible[b-nxnulpl8f3],
.components-resume-failed-visible[b-nxnulpl8f3],
.components-rejoining-animation[b-nxnulpl8f3] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-nxnulpl8f3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-nxnulpl8f3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-nxnulpl8f3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-nxnulpl8f3],
#components-reconnect-modal.components-reconnect-retrying[b-nxnulpl8f3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-nxnulpl8f3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-nxnulpl8f3],
#components-reconnect-modal.components-reconnect-failed[b-nxnulpl8f3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-nxnulpl8f3] {
    display: block;
}


#components-reconnect-modal[b-nxnulpl8f3] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-nxnulpl8f3 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-nxnulpl8f3 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-nxnulpl8f3 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-nxnulpl8f3]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-nxnulpl8f3 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-nxnulpl8f3 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-nxnulpl8f3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-nxnulpl8f3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-nxnulpl8f3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-nxnulpl8f3] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-nxnulpl8f3] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-nxnulpl8f3] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-nxnulpl8f3] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-nxnulpl8f3] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-nxnulpl8f3] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-nxnulpl8f3 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-nxnulpl8f3] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-nxnulpl8f3 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Panels/Guest.razor.rz.scp.css */
/* Поворот гостевой страницы — тот же приём, что у показа в «Обзоре»
   (Overview.razor.css), и по той же причине: телефон подключили к широкому
   экрану, а система по-прежнему отдаёт портретный кадр. Определить это нечем,
   поэтому поворачивает рука — кнопкой.

   Отличие одно: угол хранится в самом телефоне, а не в базе. */

/* Экран меряется сам собой: повёрнутая рама берёт стороны отсюда, крест-накрест. */
.экран[b-3xd2sqy5g8] {
    container-type: size;
    overflow: hidden;
}

.экран > .кадр[b-3xd2sqy5g8] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Четверть: стороны меняются местами, потом разворот вокруг середины. */
.экран > .кадр.поворот-90[b-3xd2sqy5g8],
.экран > .кадр.поворот-270[b-3xd2sqy5g8] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100cqh;
    height: 100cqw;
}

.экран > .кадр.поворот-90[b-3xd2sqy5g8] {
    transform: translate(-50%, -50%) rotate(90deg);
}

.экран > .кадр.поворот-270[b-3xd2sqy5g8] {
    transform: translate(-50%, -50%) rotate(-90deg);
}

.экран > .кадр.поворот-180[b-3xd2sqy5g8] {
    transform: rotate(180deg);
}

/* Переписка: лента на месте лица. Цвета те же, что у остальной страницы —
   золото «Говорить» для своих сообщений, тёмный камень для её. Правила
   MudX переопределяются по классу ленты: их фон — из палитры темы, а
   страница живёт своим цветом. */
.чат[b-3xd2sqy5g8] {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 3.25rem 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.чат-шапка[b-3xd2sqy5g8] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.75rem;
    background: linear-gradient(#0d0d10 45%, rgba(13, 13, 16, 0));
    pointer-events: none;
    z-index: 1;
}

.чат[b-3xd2sqy5g8]  .моё .mudx-chat-bubble {
    background: #c8963e;
    color: #1a1a1e;
}

.чат[b-3xd2sqy5g8]  .её .mudx-chat-bubble {
    background: #1a1a20;
    color: #e8e8ea;
    border: 1px solid #2a2a34;
}

.чат[b-3xd2sqy5g8]  .mudx-chat-header {
    color: #9a9aa4;
}

.чат[b-3xd2sqy5g8]  .mudx-chat-footer {
    color: #55555f;
}

.чат[b-3xd2sqy5g8]  .сбой {
    color: #c88;
}

/* Три точки, пока ответ считается: дешевле слов «думает…» и понятнее. */
.чат[b-3xd2sqy5g8]  .печатает {
    display: inline-flex;
    gap: 4px;
    padding: 4px 2px;
}

.чат[b-3xd2sqy5g8]  .печатает i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9a9aa4;
    animation: точка-b-3xd2sqy5g8 1.2s infinite ease-in-out;
}

.чат[b-3xd2sqy5g8]  .печатает i:nth-child(2) { animation-delay: 0.2s; }
.чат[b-3xd2sqy5g8]  .печатает i:nth-child(3) { animation-delay: 0.4s; }

@keyframes точка-b-3xd2sqy5g8 {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .чат[b-3xd2sqy5g8]  .печатает i { animation: none; opacity: 0.6; }
}
/* /Components/Panels/Knowledge.razor.rz.scp.css */
/* Правка документа держится у верхней кромки окна.

   Список справочника длиннее экрана — полсотни документов, — и выбранный
   почти всегда оказывается внизу. Без липкости работа выглядела так: выбрал
   запись, уехал наверх читать, вернулся вниз выбирать следующую.

   Три условия, и все обязательные:

   align-self — иначе колонка сетки растягивается на всю высоту строки, и
   двигаться липкому блоку внутри неё некуда; это самая частая причина, по
   которой position: sticky «не работает».

   top — под шапкой, а не под кромкой окна: шапка закреплена и перекрыла бы
   первую строку полей. Высоту берём переменной MudBlazor и умножаем на 3/4:
   шапка у нас плотная (Dense), и MudBlazor отводит ей ровно эту долю.

   И одно условие снаружи: предок не должен обрезать содержимое. У скруглённых
   вкладок MudBlazor ставит overflow: hidden, и внутри «Профиля» липкость
   не работала вовсе — снято в Profile.razor.css.

   max-height и прокрутка — на случай низкого окна: правка вместе с текстовым
   полем выше многих экранов, и без своей прокрутки нижняя кромка с кнопками
   «сохранить» и «удалить» ушла бы за край без всякой возможности до неё
   добраться. */
.правка[b-zfcis3d2b2] {
    position: sticky;
    top: calc(var(--mud-appbar-height, 64px) * 0.75 + 8px);
    align-self: start;
    max-height: calc(100vh - var(--mud-appbar-height, 64px) * 0.75 - 32px);
    overflow-y: auto;
}
/* /Components/Panels/Overview.razor.rz.scp.css */
/* Показ во весь экран и его поворот.

   Ориентацию приложение не выбирает и выбирать не должно: раскладка считается
   от сторон кадра (см. AvatarVideo.razor.css), и узкое высокое окно она
   разбирает сама. Монитор, повёрнутый в настройках системы, и планшет с
   датчиком приходят сюда именно так — узким окном, — и никакого участия не
   требуют.

   Здесь только случай, которого система не видит: панель повесили боком, а
   выход у неё один и всегда горизонтальный. Тогда картинку разворачивает
   консоль — рукой, кнопкой, как в телефоне. */

/* Рама поворота вне полного экрана не существует: display: contents убирает
   сам элемент, оставляя детей на своих местах в раскладке. Так добавленный
   предок ничего не меняет в свёрнутом виде — а он нужен постоянно, потому что
   появись он по нажатию, видео пересоздалось бы вместе с ним. */
.кадр[b-jsr084x9zv] {
    display: contents;
}

/* Кадр меряется сам собой, а не окном: повёрнутая рама берёт свои стороны
   отсюда — крест-накрест. Через vh/vw это считалось бы по окну и разъезжалось
   бы на ширину полосы прокрутки. */
.показ[b-jsr084x9zv] {
    container-type: size;
    overflow: hidden;
}

.показ > .кадр[b-jsr084x9zv] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

/* Поворот на четверть: стороны меняются местами — ширина рамы равна высоте
   экрана и наоборот, — и только потом она разворачивается вокруг середины.
   Сделай наоборот, разверни раму прежних размеров, и содержимое легло бы в
   лежачий кадр, поставленный стоймя: лицо в узкой полосе, поля сверху и
   снизу. */
.показ > .кадр.поворот-90[b-jsr084x9zv],
.показ > .кадр.поворот-270[b-jsr084x9zv] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100cqh;
    height: 100cqw;
}

.показ > .кадр.поворот-90[b-jsr084x9zv] {
    transform: translate(-50%, -50%) rotate(90deg);
}

.показ > .кадр.поворот-270[b-jsr084x9zv] {
    transform: translate(-50%, -50%) rotate(-90deg);
}

/* Вверх ногами стороны не меняются — панель просто повесили другим краем
   вверх. Такое бывает с потолочным креплением. */
.показ > .кадр.поворот-180[b-jsr084x9zv] {
    transform: rotate(180deg);
}
/* /Components/Panels/Profile.razor.rz.scp.css */
/* Вкладки не обрезают содержимое — иначе внутри них не липнет ничего.

   MudBlazor у скруглённых вкладок ставит overflow: hidden, чтобы углы
   содержимого шли по скруглению рамки. Побочное следствие этого правила
   тяжелее его пользы: любой overflow, кроме visible, делает предка точкой
   отсчёта для position: sticky у всего, что внутри. Вкладки при этом сами
   не прокручиваются — высота у них по содержимому, — и липкий блок вместо
   того, чтобы держаться у кромки окна, уезжает вверх вместе со страницей.

   Так и вышло со справочником: правка документа липнет исправно, если
   открыть панель отдельной страницей, и не липнет ни разу внутри «Профиля».
   Обрезкой углов здесь жертвовать не жалко — фон у панелей вкладок тот же,
   что у страницы, и скругление на нём не читается. */
.вкладки[b-688dr6bq1t]  .mud-tabs {
    overflow: visible;
}
/* /Components/Shared/AvatarVideo.razor.rz.scp.css */
/* Раскладка видео-фигуры. Числа перенесены из показа «Бизнес Баттл»
   (components/hud/hud.module.css там же, где разметка склейки): фигура снята
   под этот кадр, и своя посадка ей не нужна. */

/* Кадр меряется сам собой: посадка фигуры считается от его сторон, а не от
   окна. Иначе на повёрнутом показе (Overview.razor.css) фигура считала бы
   себя по неповёрнутому окну и легла бы поперёк кадра. */
.фигура[b-m38glmf39c] {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
    container-type: size;
}

/* Рубка заполняет кадр целиком, но БЕЗ растяжения — по краям срезается
   лишнее. Растянутая, она разъезжается с фигурой: та привязана к высоте и
   пропорций не теряет.

   На узком кадре срезается как раз ширина: рубка снята вдвое шире, чем нужна
   портретному экрану, и лишнее уходит за края. Это правильная жертва — фон
   обстановка, его края никто не считает. */
.фон[b-m38glmf39c] {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Стан фигуры: по центру кадра, снизу уходит за край — в исходных роликах
   фигура обрезана по нижней кромке, полей нет.

   Масштаб привязан к ВЫСОТЕ кадра, ширина следует пропорционально: фигура
   вытягивается вместе с окном по вертикали, но не деформируется — лицо не
   расплывается, когда окно уходит от 16:9. Пропорции заданы явно: у <video>
   до загрузки метаданных своих размеров нет, и бокс на первых кадрах уехал
   бы. Числа — фактические размеры роликов (1202 × 1312, замер в браузере);
   высота и вынос за кромку те же, что в показе.

   ВТОРОЙ ПРЕДЕЛ — по ширине, и он про экран, поставленный стоймя. Одной
   высоты хватало, пока кадр был шире себя: в 16:9 фигура занимает 38% ширины
   и до боков ей далеко. В портретном кадре 9:16 те же 75% высоты дают фигуру
   вдвое шире экрана — от неё остаётся полоса посередине, обрезанная по
   плечам. Резать положено фон, он для того и снят с запасом; фигура должна
   помещаться целиком. Отсюда min(): что меньше — три четверти высоты или
   81% ширины, — то и берётся, и перелом между двумя пределами приходится на
   кадр 1 : 1.17, где обе величины совпадают. Широкий кадр остаётся ровно
   таким, каким был.

   Проценты остались строкой выше нарочно: движок без cq-единиц отбросит
   min() и покажет прежнюю посадку, а не фигуру без высоты. */
.стан[b-m38glmf39c] {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 75.32%;
    height: min(75.32cqh, 88cqw);
    aspect-ratio: 1202 / 1312;
    /* Вынос за нижнюю кромку — долей от самой фигуры, а не от кадра: в
       высоком кадре те же 2.26% его высоты срезали бы ей полступни. 3% от
       роста фигуры — это ровно прежние 2.26% кадра при широком окне. */
    transform: translate(-50%, 3%);
    pointer-events: none;
}

/* Два ролика лежат друг на друге. Речь проявляется и тает — этим и сделан
   переход; сто сорок миллисекунд согласованы с ФЕЙД_МС в js/avatar-video.js,
   где по ним отмеряется убирание покоя. */
.ролик[b-m38glmf39c] {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    max-width: none;
    transition: opacity 140ms linear;
}

.ролик[data-видно='off'][b-m38glmf39c] {
    opacity: 0;
}

/* Покой под речью гаснет мгновенно: растворять его нельзя — на середине
   растворения оба слоя полупрозрачны, и сквозь фигуру видно рубку. */
.мгновенно[b-m38glmf39c] {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .ролик[b-m38glmf39c] {
        transition: none;
    }
}