/*
 * Montemeet: layout overrides.
 *
 * Strip view for anchored pin-view rooms (group lessons): the pinned video
 * on the RIGHT, the tile strip on the LEFT; tiles keep a fixed aspect ratio
 * (stock resizeVideoMedia writes inline px sizes — the !important rules here
 * intentionally win over them), vertical scroll when there are many tiles,
 * DOM order is never re-shuffled by who is speaking.
 *
 * Both classes are managed by MontemeetLayout.js:
 *   .montemeet-strip  — the room profile has layout.view 'pin';
 *   .montemeet-pinned — a video is currently pinned.
 */

body.montemeet-strip.montemeet-pinned #videoPinMediaContainer {
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    width: 78% !important;
    height: 100% !important;
}

body.montemeet-strip.montemeet-pinned #videoMediaContainer {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 22% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* clear the big video's button bar (Ivan, 2026-08-05) */
    padding-top: 48px !important;
}

/* Пара «кнопка + стрелка» распадается, когда стрелку прячут ролью: сток
   скругляет кнопке только левый край, а правый оставляет прямым — под стрелку,
   которой уже нет (Иван, 2026-08-19). Одинокой кнопке возвращаем обычный вид. */
#bottomButtons .split-btn.montemeet-lone > button:not(.device-dropdown-toggle) {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* the view-cycle button: center the inline SVG */
#montemeetSpeakerViewBtn svg {
    display: block;
    margin: 0 auto;
}

/*
 * Tile-button trims (Appendix A) — CSS by id suffix is race-proof: the
 * BUTTONS overrides can lose to early-built tiles, these rules cannot.
 * Body classes are set by MontemeetRoles.js.
 */
body.montemeet-lesson [id$='__pictureInPicture'],
body.montemeet-concert [id$='__pictureInPicture'],
body.montemeet-lesson [id$='__fullScreen'],
body.montemeet-concert [id$='__fullScreen'],
body.montemeet-lesson [id$='__snapshot'],
body.montemeet-concert [id$='__snapshot'],
body.montemeet-lesson [id$='__hideALL'],
body.montemeet-concert [id$='__hideALL'],
body.montemeet-lesson [id$='__draw'],
body.montemeet-concert [id$='__draw'],
body.montemeet-lesson [id$='__hideMe'],
body.montemeet-concert [id$='__hideMe'],
body.montemeet-lesson [id$='___geoLocation'],
body.montemeet-concert [id$='___geoLocation'],
body.montemeet-lesson [id$='___sendFile'],
body.montemeet-concert [id$='___sendFile'],
body.montemeet-lesson [id$='___sendMsg'],
body.montemeet-concert [id$='___sendMsg'],
body.montemeet-lesson [id$='___sendVideo'],
body.montemeet-concert [id$='___sendVideo'],
body.montemeet-student [id$='__mirror'],
body.montemeet-student [id$='__videoMirror'],
body.montemeet-concert [id$='__mirror'],
body.montemeet-concert [id$='__videoMirror'] {
    display: none !important;
}

/* the participants list is a PEOPLE list — the Public chat row is not a person */
body.montemeet-lesson #participantsList li#all,
body.montemeet-concert #participantsList li#all {
    display: none !important;
}

/*
 * Final tile-button matrix (Ivan, 2026-08-06):
 * - students and everyone at concerts: no tile buttons at all;
 * - teacher, own tile: no buttons (mic/cam controls live in the toolbar);
 * - teacher, remote tiles: volume, mute-mic, mute-cam, mirror, ban/eject —
 *   everything else (incl. privacy, pin) is hidden; pins are made by
 *   clicking the video itself, the hidden __pin buttons still work
 *   programmatically for the layout owner.
 */
body.montemeet-student [id$='__vb'],
body.montemeet-concert [id$='__vb'],
body.montemeet-teacher .montemeet-self [id$='__vb'] {
    display: none !important;
}

body.montemeet-lesson [id$='__vp'],
body.montemeet-lesson [id$='__pin'],
body.montemeet-concert [id$='__pin'] {
    display: none !important;
}

/* a MANUAL pin shows its unpin button on the big video (mode pins do not) */
body.montemeet-manualpin #videoPinMediaContainer [id$='__pin'] {
    display: inline-block !important;
}

/*
 * The three-dots dropdown wraps the real buttons into labeled items — hiding
 * the button alone leaves the clickable label, so hide the wrapper itself.
 * Kept for the teacher: Mirror, Ban, Kick Out.
 */
body.montemeet-lesson .navbar-dropdown-item:has([id$='__fullScreen']),
body.montemeet-lesson .navbar-dropdown-item:has([id$='___sendMsg']),
body.montemeet-lesson .navbar-dropdown-item:has([id$='___geoLocation']),
body.montemeet-lesson .navbar-dropdown-item:has([id$='___sendFile']),
body.montemeet-lesson .navbar-dropdown-item:has([id$='___sendVideo']),
body.montemeet-concert .navbar-dropdown-item:has([id$='__fullScreen']),
body.montemeet-concert .navbar-dropdown-item:has([id$='___sendMsg']),
body.montemeet-concert .navbar-dropdown-item:has([id$='___geoLocation']),
body.montemeet-concert .navbar-dropdown-item:has([id$='___sendFile']),
body.montemeet-concert .navbar-dropdown-item:has([id$='___sendVideo']),
body.montemeet-student .navbar-dropdown-item:has([id$='__mirror']),
body.montemeet-student .navbar-dropdown-item:has([id$='__videoMirror']) {
    display: none !important;
}

/* Строка меню, снятая из кода (бан и отключение на своей же копии и на плитке
   демонстрации). Через класс, а не инлайном: у стока `display: flex !important`,
   и инлайновый display ему проигрывает (Иван, 2026-08-14). */
.navbar-dropdown-item.montemeet-row-off,
.videoMenuBar div.navbar-dropdown-item.montemeet-row-off {
    display: none !important;
}

/* computer-sound button: green while streaming, attention pulse in dance rooms */
#montemeetPcSoundBtn svg {
    display: block;
    margin: 0 auto;
}
#montemeetPcSoundBtn.montemeet-on {
    color: lime !important;
}

/* the chat alone in the panel takes its full width (the split hides plist —
   the stock 300px margin was reserved for the list on the left) */
body.montemeet-lesson #plist.hidden ~ #chat,
body.montemeet-concert #plist.hidden ~ #chat {
    width: 100% !important;
    margin-left: 0 !important;
}
/* «звук компьютера» на танцах: подпрыгивает как иконка в доке макоси —
   цветовую пульсацию было почти не видно на тёмном фоне (Иван, 2026-08-08) */
#montemeetPcSoundBtn.montemeet-attention {
    animation: montemeet-bounce 1.9s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
    color: lime;
    transform-origin: bottom center;
}
@keyframes montemeet-bounce {
    0%,
    38%,
    100% {
        transform: translateY(0);
    }
    12% {
        transform: translateY(-11px) scaleY(1.06);
    }
    22% {
        transform: translateY(-4px);
    }
    30% {
        transform: translateY(-2px) scaleY(0.98);
    }
}

body.montemeet-strip.montemeet-pinned #videoMediaContainer .Camera {
    width: 86% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    flex: 0 0 auto !important;
    margin: 4px 0 !important;
}

/*
 * Окошки в углу: своя картинка и — во время демонстрации — лицо того, кто её
 * ведёт. Сток в режиме фокуса гасит соседние плитки инлайновым display:none,
 * поэтому !important ниже возвращает нужные обратно.
 *
 * На телефоне ленты плиток нет вовсе, и без второго окошка автора показа не
 * видно совсем, а в группе не было видно и себя (Иван, 2026-08-19). Кому висеть
 * в углу, решает MontemeetLayout — классов на body правилам больше не нужно.
 */
:root {
    --mm-pip-bottom: 96px; /* от нижней грани экрана до своего окошка */
    --mm-pip-step: 120px; /* высота окошка с зазором: второе встаёт над первым */
}
.montemeet-self-pip,
.montemeet-peer-pip {
    display: block !important;
    position: fixed !important;
    right: 16px;
    bottom: var(--mm-pip-bottom);
    width: 200px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    z-index: 8;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.montemeet-peer-pip {
    bottom: calc(var(--mm-pip-bottom) + var(--mm-pip-step));
}

/* Скрытая панель не должна ловить нажатия: сток прячет её прозрачностью, и тап
   по пустому месту внизу экрана попадал по невидимой кнопке.
   Только на сенсорных экранах: на компьютере панель показывается по наведению,
   и запрет ломал бы наведение мышью (а заодно и клики автотеста) */
@media (hover: none) and (pointer: coarse) {
    body:not(.montemeet-bar-visible) #bottomButtons {
        pointer-events: none !important;
    }
}

/* Окошки в углу на телефоне: меньше и выше панели кнопок */
@media screen and (max-width: 1024px) {
    :root {
        --mm-pip-bottom: 20px;
        --mm-pip-step: 74px;
    }
    /* панель открыта — приподнимаем, закрылась — возвращаем на место */
    body.montemeet-bar-visible {
        --mm-pip-bottom: 145px;
    }
    .montemeet-self-pip,
    .montemeet-peer-pip {
        width: 118px !important;
        right: 10px;
        border-radius: 12px;
        transition: bottom 0.25s ease-in-out;
    }
}
@media screen and (max-width: 380px) {
    :root {
        --mm-pip-bottom: 16px;
        --mm-pip-step: 62px;
    }
    body.montemeet-bar-visible {
        --mm-pip-bottom: 128px;
    }
    .montemeet-self-pip,
    .montemeet-peer-pip {
        width: 96px !important;
    }
}

/* Мобильный тулбар: сток ужимает кнопки до 38px, а ниже 360px — до 28px,
   потому что в стоке их полтора десятка. У нас набор урезан ролями, места
   хватает — возвращаем комфортный размер нажатия (Иван, 2026-08-09).
   Бар переносится на вторую строку, если кнопки всё же не помещаются. */
@media screen and (max-width: 1024px) {
    body.montemeet-teacher #bottomButtons,
    body.montemeet-student #bottomButtons {
        gap: 0.4rem !important;
        padding: 7px 9px !important;
        flex-wrap: wrap !important;
        max-width: 100vw !important;
        row-gap: 0.4rem !important;
    }
    body.montemeet-teacher #bottomButtons button,
    body.montemeet-student #bottomButtons button {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.35rem !important;
        padding: 10px !important;
        margin: 0 !important;
    }
    body.montemeet-teacher #bottomButtons .device-dropdown-toggle,
    body.montemeet-student #bottomButtons .device-dropdown-toggle {
        width: 24px !important;
        height: 48px !important;
    }
    body.montemeet-teacher #bottomButtons .device-dropdown-toggle i,
    body.montemeet-student #bottomButtons .device-dropdown-toggle i {
        font-size: 0.95rem !important;
    }
}

/* Панель занимает всю ширину экрана, а не узкий островок посередине —
   кнопки распределяются равномерно и попадать в них проще (Иван, 2026-08-09) */
@media screen and (max-width: 1024px) {
    body.montemeet-teacher #bottomButtons,
    body.montemeet-student #bottomButtons {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: translateY(var(--bottom-btns-translate-Y, 0)) !important;
        justify-content: space-evenly !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    /* открытый чат или список участников: тулбар не должен лежать поверх поля
       ввода и мешать листать список */
    body.montemeet-panel-open #bottomButtons {
        display: none !important;
    }
}

@media screen and (max-width: 380px) {
    body.montemeet-teacher #bottomButtons button,
    body.montemeet-student #bottomButtons button {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
    }
    body.montemeet-teacher #bottomButtons .device-dropdown-toggle,
    body.montemeet-student #bottomButtons .device-dropdown-toggle {
        height: 44px !important;
    }
}

/* Список «Выйти / Завершить для всех» — не кнопка тулбара, а меню над ним.
   Наша мобильная правка размеров ужимала и его строки до квадратика 48px, и
   надпись переносилась на вторую строку, хотя ширины экрана хватало с запасом
   (Иван, 2026-08-14). Возвращаем строкам их ширину, а меню — свою. */
@media screen and (max-width: 1024px) {
    body.montemeet-teacher #bottomButtons #exitMenu,
    body.montemeet-student #bottomButtons #exitMenu {
        width: max-content !important;
        max-width: min(94vw, 360px) !important;
    }
    body.montemeet-teacher #bottomButtons #exitMenu button,
    body.montemeet-student #bottomButtons #exitMenu button {
        width: 100% !important;
        height: auto !important;
        font-size: 0.95rem !important;
        padding: 12px 16px !important;
        white-space: nowrap !important;
    }
}

/* Заставка сцены концерта: появляется и уходит плавно (Иван, 2026-08-09) */
.montemeet-splash {
    position: fixed;
    inset: 0;
    z-index: 6;
    background-color: #000;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.45s ease-in-out;
    pointer-events: none;
}
.montemeet-splash.is-on {
    opacity: 1;
}

/* Перечёркнутая иконка: заставка снята вручную. Косую чертим сами — в
   бесплатном FontAwesome 6.1.1 fa-image-slash нет (Иван, 2026-08-14) */
#bottomButtons button.montemeet-slashed {
    position: relative;
}
#bottomButtons button.montemeet-slashed::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.25em;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(-45deg);
    box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

/* Тулбар доски: на узких экранах кнопки не влезали в строку и правый край с
   крестиком уезжал за пределы окна. Переносим на вторую строку и растим саму
   модалку, а не отнимаем высоту у полотна (Иван, 2026-08-09) */
@media screen and (max-width: 1024px) {
    /* Шапка доски: ровно две зоны — крестик закреплён в правом верхнем углу,
       всё остальное переносится единым блоком, без рваных «полутора» рядов */
    #whiteboardHeader,
    #whiteboard .whiteboard-header {
        position: relative !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 44px 8px 10px !important;
    }
    #whiteboardHeader > *,
    #whiteboard .whiteboard-header > * {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: flex-start !important;
    }
    #whiteboardCloseBtn {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        margin: 0 !important;
        z-index: 2 !important;
    }
    /* полотно занимает всё, что осталось после выросшей шапки.
       ВАЖНО: только у открытой доски — иначе display перебивает .hidden
       и доска не закрывается вовсе */
    #whiteboard:not(.hidden) {
        display: flex !important;
        flex-direction: column !important;
        max-height: 96dvh !important;
    }
    #whiteboard main {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
}

/* Заголовок ожидания: сток задаёт жёсткие 60px, и «Завантаження» на телефоне
   не помещается и обрезается. Размер теперь по ширине экрана, а длинное слово
   при самом узком экране переносится, а не уезжает (Иван, 2026-08-10). */
#loadingDiv {
    max-width: 96vw;
    box-sizing: border-box;
}
#loadingDiv h1 {
    /* переносить слово нельзя — рваное «Завантаження» хуже мелкого, поэтому
       строка одна, а размер считается от ширины экрана (Иван, 2026-08-10).
       Свои боковые поля у заголовка убираем: вместе с полями самой карточки
       они съедали ширину, слово вылезало вправо и переставало быть по центру */
    font-size: min(60px, 9vw) !important;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    margin: 0 auto;
    line-height: 1.15;
}
@media screen and (max-width: 520px) {
    #loadingDiv {
        padding: 24px 12px;
    }
}

/* Панель кнопок появляется СРАЗУ, без проявления. Сначала оно длилось секунду,
   потом мы ускорили его вдвое (Иван, 2026-08-10) — но дело было не в скорости:
   пока панель проявляется, кнопки уже полностью нажимаются, оставаясь почти
   невидимыми. Нажатие в это окно молча выключало камеру и на телефоне, и мышью
   на компьютере (Иван, 2026-08-14). Состояния «прозрачная, но рабочая» больше
   нет ни на одном устройстве. */
#bottomButtons.fadein {
    animation: none !important;
    -webkit-animation: none !important;
    opacity: 1 !important;
}

/* Кружочки говорящих (телефон, студент на групповом уроке): одноклассник,
   когда заговорил, выезжает из-за левой грани поверх крупного видео педагога
   и туда же уходит, замолчав. Одновременно — до трёх (Иван, 2026-08-09). */
.montemeet-circles {
    position: fixed;
    top: 14px;
    left: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.montemeet-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--body-bg, #14161a);
    border: 2px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    /* стартовая позиция — за левой гранью экрана */
    transform: translateX(-120%);
    opacity: 0;
    transition:
        transform 0.35s ease,
        opacity 0.35s ease,
        height 0.35s ease,
        margin-bottom 0.35s ease,
        border-width 0.35s ease;
}
/* пока кружок не выехал (или уже уезжает) он не занимает места в колонке —
   иначе оставшиеся дёргаются на его высоту, стоило кому-то замолчать */
.montemeet-circle:not(.is-in) {
    height: 0;
    margin-bottom: 0;
    border-width: 0;
}
.montemeet-circle.is-in {
    transform: translateX(10px);
    opacity: 1;
}
.montemeet-circle video,
.montemeet-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.montemeet-circle span {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}
@media screen and (max-width: 380px) {
    .montemeet-circle {
        width: 54px;
        height: 54px;
    }
    .montemeet-circle span {
        font-size: 20px;
    }
}

/* Кнопка входа педагога — слева от «Присоединиться» и один в один с ней по
   геометрии. Замеры родной кнопки: радиус 0.25em, рамки нет. У нашей радиус
   обнулялся, а при наведении подскакивал до 10px — стоковые правила для кнопок
   в этом окне; поэтому закрепляем жёстко и в покое, и под курсором. Белый на
   тёмно-зелёном горел ярче фиолетовой кнопки и перетягивал внимание студента,
   так что фон приглушён (Иван, 2026-08-11). На узких экранах ряд переносится. */
.swal2-actions {
    flex-wrap: wrap;
    gap: 10px;
}
.montemeet-signin,
.montemeet-signin:hover,
.montemeet-signin:focus,
.montemeet-signin:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0 !important;
    border-radius: 0.25em !important;
    color: #1f2328 !important;
    /* под курсором надпись жирнела от стокового правила — текст не трогаем
       вовсе, меняется только фон (Иван, 2026-08-11) */
    font-weight: 700 !important;
    font-size: 1em !important;
    letter-spacing: normal !important;
    transform: none !important;
}
.montemeet-signin {
    background: #dee2e6 !important;
}
.montemeet-signin:hover {
    background: #fff !important;
}
/* родная кнопка окна входа — той же жирности, что наша (Иван, 2026-08-11) */
.init-modal-size .swal2-confirm {
    font-weight: 700 !important;
}
.montemeet-signin[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* Окно входа на телефоне: превью, десяток кнопок и два списка устройств не
   помещались в экран, и кнопка «Присоединиться» оказывалась под нижним краем —
   до неё надо было прокручивать (Иван, 2026-08-14). Прокручиваем СОДЕРЖИМОЕ,
   а поле имени и кнопка остаются на виду. */
@media screen and (max-width: 1024px) {
    .swal2-popup.init-modal-size {
        max-height: 94vh !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 12px 0 10px !important;
    }
    .swal2-popup.init-modal-size .swal2-html-container {
        max-height: 46vh !important;
        overflow-y: auto !important;
        margin: 6px 12px !important;
    }
    .swal2-popup.init-modal-size .swal2-title {
        padding: 4px 12px !important;
        font-size: 1.2rem !important;
    }
    .swal2-popup.init-modal-size .swal2-actions {
        margin: 8px auto 0 !important;
    }
    .init-video-container video {
        height: 150px !important;
    }
    .init-user button {
        margin-top: 8px !important;
        margin-bottom: 4px !important;
    }
    .init-user select {
        margin-top: 8px !important;
        padding: 8px !important;
    }
}