/*
Copyright 2025 New Vector Ltd.
Copyright 2020 Bruno Windels <bruno@windels.cloud>
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

html {
    height: 100%;
}

/* unknown element in IE11 that defaults to inline */
main {
    display: block;
}

@media screen and (min-width: 600px) {
    .PreSessionScreen {
        width: 600px;
        box-sizing: border-box;
        margin: 0 auto;
        margin-top: 50px;
    }
}

.room-placeholder {
    display: flex;
    flex-direction: row;
}

.SessionView {
    /* this takes into account whether or not the url bar is hidden on mobile
    (have tested Firefox Android and Safari on iOS),
    see https://developers.google.com/web/updates/2016/12/url-bar-resizing */
    position: fixed;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template:
        "status status" auto
        "left   middle" 1fr /
        320px   1fr;
    min-height: 0;
    min-width: 0;
}

.right-shown{
    grid-template:
        "status status status" auto
        "left   middle right" 1fr /
        320px   1fr 300px;
}

/* resize and reposition session view to account for mobile Safari which shifts
the layout viewport up without resizing it when the keyboard shows */
.hydrogen.ios .SessionView {
    height: var(--ios-viewport-height, 100%);
    top: var(--ios-viewport-top, 0);
}

/* hide back button in middle section by default */
.middle .close-middle { display: none; }
/* mobile layout */
@media screen and (max-width: 800px) {
    .SessionView:not(.middle-shown):not(.right-shown) {
        grid-template:
            "status" auto
            "left" 1fr /
            1fr;
    }

    .SessionView.middle-shown {
        grid-template:
            "status" auto
            "middle" 1fr /
            1fr;
    }

    .SessionView.right-shown{
        grid-template:
            "status" auto
            "right" 1fr /
            1fr;
    }

    .SessionView:not(.middle-shown):not(.right-shown) .room-placeholder { display: none; }
    .SessionView.middle-shown .LeftPanel { display: none; }
    .SessionView.right-shown .middle, .SessionView.right-shown .LeftPanel { display: none; }

    /* show back button */
    .middle .close-middle { display: block !important; }
    /* hide grid button */
    .LeftPanel .grid { display: none !important; }

    .VerificationReadyTileView {
        flex-direction: column;
    }

    .VerificationTileView__actions {
        justify-content: center;
    }
}

.LeftPanel {
    grid-area: left;
    min-width: 0;
    min-height: 0;
}

.room-placeholder, .middle {
    min-width: 0;
    grid-area: middle;
    /* when room view is inside of a grid,
    grid-area middle won't be found,
    so set width manually */
    width: 100%;
    /* otherwise we don't get scrollbars and the content grows as large as it can */
    min-height: 0;
}

.middle {
    display: flex;
    flex-direction: column;
}

.SessionStatusView {
    grid-area: status;
}

.lightbox {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    /* Safari requires an explicit height on the container to prevent picture content from collapsing */
    box-sizing: border-box;
    height: 100%;
}

.RoomView_body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.RoomView_body .Timeline, .RoomView_body .TimelineLoadingView {
    flex: 1 0 0;
}

.middle-header {
    display: flex;
}

.RoomGridView {
    display: grid;
}

.RoomGridView.layout3x2 {
    grid-template:
        "t0  t1  t2" 1fr
        "t3  t4  t5" 1fr /
         1fr 1fr 1fr;
}

.RoomGridView > .tile0 {grid-area: t0;}
.RoomGridView > .tile1 {grid-area: t1;}
.RoomGridView > .tile2 {grid-area: t2;}
.RoomGridView > .tile3 {grid-area: t3;}
.RoomGridView > .tile4 {grid-area: t4;}
.RoomGridView > .tile5 {grid-area: t5;}

.RoomGridView > div {
    display: flex;
    min-width: 0;
    min-height: 0;
}

.RoomGridView > div.focus-ring {
    z-index: 1;
    pointer-events: none;
}

.menu {
    position: absolute;
    z-index: 2;
}

.menu .menu-item{
    box-sizing: border-box;
    width: 100%;
}

.Settings {
    display: flex;
    flex-direction: column;
}

.SettingsBody {
    min-height: 0;
    overflow-y: auto;
}

.LazyListParent {
    flex: 1;
    flex-basis: 0;
    margin-top: 15px;
}

.LoadingView {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vertical-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.vertical-layout > .stretch {
    flex: 1 0 0;
}
