/* Video session layout */

.session-wrap .video-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
    gap: 16px;
    width: 100%;
    position: relative;
}

/* ────────── FULLSCREEN ────────── */
.session-wrap .video-board.fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background: #000;
    z-index: 1000;
    overscroll-behavior: contain;
}

.fullscreen .video-box {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
}

.fullscreen .video-box video {
    object-fit: contain;
}

.fullscreen.local-main .local-box,
.fullscreen.remote-main .remote-box {
    position: static;
    grid-column: 1 / -1;
}

/* PiP thumbnail inside fullscreen */
.fullscreen .video-pip {
    position: absolute;
    width: clamp(260px, 32%, 360px);
    height: calc(var(--pip-w, 360px) * 0.5625);
    top: 8px;
    right: 8px;
    z-index: 3;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 4px 12px #0006;
    background: #8094a9 url(../brand.png) center / 40% no-repeat;
}

/* ────────── DEFAULT GRID ────────── */
.video-box {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Управляем режимом подгонки через переменную (работает стабильнее на iOS) */
.video-board {
    --fit-mode: cover;
}

.video-board video {
    width: 100%;
    height: 100%;
    object-fit: var(--fit-mode) !important;
    border-radius: 12px;
    box-shadow: 0 2px 8px #0003;
}

.video-board.fit-contain {
    --fit-mode: contain;
}

.video-board.fit-contain video {
    background: #000;
}

video.mirror {
    transform: scaleX(-1);
}

.video-board.fit-contain video {
    object-fit: contain !important;
    background: #000;
}

.video-box::after {
    content: attr(data-label);
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #8094a9;
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transition: .2s;
}

.video-box:hover::after {
    opacity: 1;
}

.video-pip {
    position: absolute;
    width: clamp(180px, 23%, 240px);
    height: calc(var(--pip-w, 240px) * 0.5625);
    top: 8px;
    left: 8px;
    z-index: 3;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 4px 12px #0006;
    background: #8094a9 url(../brand.png) center / 40% no-repeat;
}

@supports (width: clamp(0px, 0%, 0px)) {
    .video-pip,
    .fullscreen .video-pip {
        --pip-w: clamp(260px, 32%, 420px);
    }
}

/* Toolbar shown only in fullscreen */
.pip-toolbar {
    position: absolute;
    bottom: 8px; /* ↓ */
    right: 8px; /* → */
    top: auto; /* на всякий */
    z-index: 4;
    display: flex;
    gap: 8px;
}

.vid-controls {
    margin-top: 18px;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ────────── MOBILE OVERRIDES (<768) ────────── */
@media (max-width: 767.98px) {
    .session-wrap .video-board {
        max-width: none; /* по ширине — 100% */
    }
    .video-board:not(.fullscreen) {
        grid-template-columns: 1fr;
    }

    .video-box:not(.fullscreen .video-box) {
        aspect-ratio: auto;
    }

    .video-pip {
        --pip-w: 280px;
        width: var(--pip-w);
        height: calc(var(--pip-w) * 0.5625);
    }

    /* PiP inside fullscreen on mobile → LEFT TOP */
    .fullscreen .video-pip {
        --pip-w: 240px;
        width: clamp(320px, 34%, 520px);
        height: calc(var(--pip-w, 480px) * 0.5625);
        left: 8px; /* override position */
        right: auto; /* override position */
        background: #8094a9 url(../brand.png) center / 40% no-repeat;
    }
}

/* ────────── CHAT BOX ────────── */
.stt-chat {
    height: 180px;
    max-height: 180px;
    overflow: auto;
    margin-top: 12px;
    font: 14px/1.3 sans-serif;
    background: #f6f8ff;
    padding: 6px 8px;
    border-radius: 8px;
    box-shadow: 0 0 4px #0002;
}

.stt-chat .line {
    margin-bottom: 4px
}

.stt-chat .therapist {
    color: #155;
}

.stt-chat .client {
    color: #511;
}

/* ────────── EMPTY SLOT BRANDING ────────── */
.video-box.empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #8094a9 url(../brand.png) center / 40% no-repeat;
    z-index: 2;
    border: outset 1px;
    border-radius: 15px;
}

.video-box.empty video {
    visibility: hidden;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    font-size: .85rem
}

.status-row .sep {
    opacity: .4
}

.badge {
    padding: 2px 6px;
    border-radius: 6px;
    color: #fff
}

.badge-ex {
    background: #4caf50
}

.badge-good {
    background: #8bc34a
}

.badge-fair {
    background: #ffc107
}

.badge-poor {
    background: #ff5722
}

.badge-vpoor {
    background: #f44336
}

.badge-new {
    background: #9e9e9e
}

.fullscreen.video-board.fit-contain video {
    object-fit: contain !important;
    background: #000;
}


.grid-top-scroll {
    height: 14px;
    width: 100%;
    overflow-x: scroll;           /* было auto */
    overflow-y: hidden;
    scrollbar-gutter: stable both-edges;
    border-bottom: 1px solid var(--rz-base-200, #e5e7eb);
    margin-bottom: 6px;
}
.grid-top-scroll .spacer { display:block; height:1px; min-height:1px; }


button, .rz-button, .rz-button * {
    -webkit-touch-callout: none !important; /* отключает меню при долгом тапе */
    -webkit-user-select: none !important;   /* запрет выделения */
    user-select: none !important;
    touch-action: manipulation;             /* предотвращает двойное срабатывание */
}

.mic-indicator {
    position: absolute;
    right: 10px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 12px;
    gap: 4px;
    z-index: 5;
}

/* любой icon внутри (RadzenIcon рендерит <i> … >) */
.mic-indicator i {
    font-size: 18px;
}

.mic-indicator.mic-on i {
    color: #4caf50;
}

.mic-indicator.mic-off i {
    color: #f44336;
}


.video-board.fullscreen .video-pip {
    touch-action: none;
}