/* Mobile split view: video grid and chat remain visible together. */
@media (max-width: 768px) {
    .room-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 3fr);
        min-height: 0;
        overflow: hidden;
    }

    .video-grid-container,
    .video-grid-container.multi-layout {
        grid-row: 1;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 6px;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--panel-border);
        scrollbar-width: none;
    }

    .video-grid-container::-webkit-scrollbar {
        display: none;
    }

    #video-grid,
    #video-grid.single,
    #video-grid.double,
    #video-grid.multi {
        height: 100%;
        min-height: 0;
        width: 100%;
        grid-template-columns: none;
        grid-template-rows: minmax(0, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 12px) / 3);
        grid-auto-rows: auto;
        align-content: stretch;
        gap: 6px;
    }

    #video-grid .video-card:not(.pinned),
    #video-grid.double .video-card.local:not(.pinned),
    #video-grid.double .video-card:not(.local):not(.pinned),
    #video-grid.multi .video-card:not(.pinned) {
        height: 100%;
        min-height: 0;
        aspect-ratio: auto;
        scroll-snap-align: start;
    }

    #sidebar,
    #sidebar.active {
        position: relative;
        inset: auto;
        grid-row: 2;
        display: flex !important;
        width: 100%;
        height: 100%;
        min-height: 0;
        border-top: 1px solid var(--panel-border);
        border-left: 0;
        box-shadow: none;
        animation: none;
        background: rgba(7, 12, 21, 0.98);
    }

    .sidebar-header {
        min-height: 42px;
        padding: 8px 12px;
    }

    .sidebar-header h3 {
        font-size: 0.88rem;
    }

    #btn-close-sidebar,
    #btn-toggle-chat {
        display: none;
    }

    #chat-messages {
        padding: 10px 12px;
        gap: 10px;
    }

    .chat-input-area {
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    }

    .input-actions {
        min-height: 42px;
        padding-block: 3px;
    }

    .chat-msg {
        max-width: 88%;
    }
}