/*
 * 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;
}

/* 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;
}

/* 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;
}

/*
 * Solo (1:1) lesson layout, Google-Meet style: the companion is focused
 * fullscreen by MontemeetLayout, the own tile floats as a small overlay
 * (the stock focus mode hides siblings with inline display:none — the
 * !important below wins it back for the own tile only).
 */
body.montemeet-solo .montemeet-self-pip {
    display: block !important;
    position: fixed !important;
    right: 16px;
    bottom: 96px;
    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);
}