@layer app-web {
    @media (min-width: 769px) {
        .mx_MatrixChat {
            --rv-space-rail-width: 80px;
            --rv-space-panel-expanded-width: min(280px, 24vw);
            --rv-left-panel-min-width: 304px;
            --rv-left-panel-default-width: clamp(312px, 23vw, 344px);
            --rv-left-panel-max-width: min(380px, 34vw);
            align-items: stretch;
            background-color: #f7f9fc;
        }

        .mx_MatrixChat > .mx_SpacePanel {
            flex: 0 0 var(--rv-space-rail-width);
            width: var(--rv-space-rail-width);
            min-width: var(--rv-space-rail-width);
            height: 100%;
            box-sizing: border-box;
            background-color: #f4f8fd;
            border-inline-end: 1px solid #dbe5f0;
            box-shadow: inset -1px 0 0 rgb(255 255 255 / 72%);
        }

        .mx_MatrixChat > .mx_SpacePanel:not(.collapsed) {
            flex-basis: var(--rv-space-panel-expanded-width);
            width: var(--rv-space-panel-expanded-width);
            min-width: 220px;
        }

        .mx_MatrixChat > .mx_LeftPanel_outerWrapper {
            flex: 0 1 var(--rv-left-panel-default-width);
            width: var(--rv-left-panel-default-width);
            min-width: var(--rv-left-panel-min-width);
            max-width: var(--rv-left-panel-max-width);
            height: 100%;
            box-sizing: border-box;
            background-color: #ffffff;
            border-inline-end: 1px solid #d7e1ec;
            box-shadow: 8px 0 24px rgb(17 48 79 / 5%);
            isolation: isolate;
            z-index: 2;
        }

        .mx_LeftPanel_outerWrapper > .mx_LeftPanel_wrapper,
        .mx_LeftPanel_wrapper > .mx_LeftPanel_wrapper--user,
        .mx_LeftPanel_wrapper--user > .mx_LeftPanel,
        .mx_LeftPanel .mx_LeftPanel_roomListContainer {
            min-width: 0;
            height: 100%;
            box-sizing: border-box;
        }

        .mx_LeftPanel_wrapper--user > .mx_LeftPanel,
        .mx_LeftPanel .mx_LeftPanel_roomListContainer {
            background-color: #ffffff;
        }

        .mx_MatrixChat > .mx_ResizeHandle--horizontal {
            flex: 0 0 1px;
            width: 1px;
            margin-inline: -1px 0;
        }

        .mx_MatrixChat > .mx_RoomView_panel {
            min-width: 0;
            height: 100%;
            background-color: var(--cpd-color-bg-canvas-default);
        }
    }
}