feat: show call participants in room list (Discord-style)

apps/web/res/css/structures/ErrorView.pcss

@@ -0,0 +1,63 @@
+/*
+Copyright 2020-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ErrorView {
+    --width: 520px;
+    --cpd-separator-inset: calc(50% - (var(--width) / 2));
+    --cpd-separator-spacing: var(--cpd-space-8x);
+
+    font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+        "Segoe UI Emoji", "Segoe UI Symbol";
+    text-align: center;
+    color: var(--cpd-color-text-primary);
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+    padding: var(--cpd-space-20x);
+
+    background-color: var(--cpd-color-theme-bg);
+    background-image: url("../../themes/element/img/compound/fade-arc-light.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+
+    .mx_ErrorView_logo {
+        display: block;
+        margin: 0 auto;
+    }
+
+    .mx_ErrorView_container {
+        max-width: var(--width);
+        margin: 0 auto var(--cpd-space-8x);
+    }
+
+    h1,
+    h2 {
+        color: var(--cpd-color-text-primary);
+    }
+
+    h2 {
+        margin: var(--cpd-space-8x) 0;
+        font-size: var(--cpd-font-size-heading-sm);
+    }
+
+    p {
+        color: var(--cpd-color-text-secondary);
+    }
+
+    .mx_ErrorView_flexContainer {
+        margin: 0 auto;
+        max-width: max-content;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+    }
+
+    .mx_ErrorView_buttons {
+        margin-top: var(--cpd-space-6x);
+    }
+}

apps/web/res/css/structures/_AutoHideScrollbar.pcss

@@ -0,0 +1,53 @@
+/*
+Copyright 2018-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/* make any scrollbar grey and thin */
+html {
+    scrollbar-color: $scrollbar-thumb-color transparent;
+}
+/* scrollbar-width is not inherited (but -color is, why?!), */
+/* so declare it on every element */
+* {
+    scrollbar-width: thin;
+}
+
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background-color: $scrollbar-thumb-color;
+}
+
+/* make auto-hide scrollbars not transparent again on hover */
+.mx_AutoHideScrollbar:hover {
+    scrollbar-color: $scrollbar-thumb-color transparent;
+
+    &::-webkit-scrollbar-thumb {
+        background-color: $scrollbar-thumb-color;
+    }
+}
+
+/* make scrollbars transparent for autohide scrollbars */
+.mx_AutoHideScrollbar {
+    overflow-x: hidden;
+    overflow-y: auto;
+    overflow-y: overlay; /* where supported */
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+
+    &::-webkit-scrollbar {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+    }
+
+    scrollbar-color: transparent transparent;
+}

apps/web/res/css/structures/_AutocompleteInput.pcss

@@ -0,0 +1,121 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AutocompleteInput {
+    position: relative;
+}
+
+.mx_AutocompleteInput_search_icon {
+    margin-left: $spacing-8;
+    fill: $secondary-content;
+}
+
+.mx_AutocompleteInput_editor {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border: 1px solid $input-border-color;
+    border-radius: 4px;
+    transition: border-color 0.25s;
+
+    > input {
+        flex: 1;
+        min-width: 40%;
+        resize: none;
+        /* `!important` is required to bypass global input styles. */
+        margin: 0 !important;
+        padding: $spacing-8 9px;
+        border: none !important;
+        color: $primary-content !important;
+        font-weight: normal !important;
+
+        &::placeholder {
+            color: $primary-content !important;
+            font-weight: normal !important;
+        }
+    }
+}
+
+.mx_AutocompleteInput_editor--focused {
+    border-color: $links;
+}
+
+.mx_AutocompleteInput_editor--has-suggestions {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.mx_AutocompleteInput_editor_selection {
+    display: flex;
+    margin-left: $spacing-8;
+}
+
+.mx_AutocompleteInput_editor_selection_pill {
+    display: flex;
+    align-items: center;
+    border-radius: 12px;
+    padding-left: $spacing-8;
+    padding-right: $spacing-8;
+    background-color: $username-variant1-color;
+    color: #ffffff;
+    font-size: $font-12px;
+}
+
+.mx_AutocompleteInput_editor_selection_remove_button svg {
+    vertical-align: middle;
+}
+
+.mx_AutocompleteInput_matches {
+    position: absolute;
+    left: 0;
+    right: 0;
+    background-color: $background;
+    border: 1px solid $links;
+    border-top-color: $input-border-color;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    z-index: 1000;
+}
+
+.mx_AutocompleteInput_suggestion {
+    display: flex;
+    align-items: center;
+    padding: $spacing-8;
+    cursor: pointer;
+
+    > * {
+        user-select: none;
+    }
+
+    &:hover {
+        background-color: $quinary-content;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+}
+
+.mx_AutocompleteInput_suggestion--selected {
+    background-color: $quinary-content;
+
+    &:last-child {
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+}
+
+.mx_AutocompleteInput_suggestion_title {
+    margin-right: $spacing-8;
+}
+
+.mx_AutocompleteInput_suggestion_description {
+    color: $secondary-content;
+    font-size: $font-12px;
+}

apps/web/res/css/structures/_BackdropPanel.pcss

@@ -0,0 +1,29 @@
+/*
+Copyright 2021-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_BackdropPanel {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    width: 100%;
+    overflow: hidden;
+    filter: blur(var(--lp-background-blur));
+    /* Force a new layer for the backdropPanel so it's better hardware supported */
+    transform: translateZ(0);
+}
+
+.mx_BackdropPanel--image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-height: 100%;
+    z-index: 0;
+    pointer-events: none;
+    overflow: hidden;
+    user-select: none;
+}

apps/web/res/css/structures/_CompatibilityPage.pcss

@@ -0,0 +1,16 @@
+.mx_CompatibilityPage {
+    width: 100%;
+    height: 100%;
+    background-color: #e55;
+}
+
+.mx_CompatibilityPage_box {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 500px;
+    height: 300px;
+    border: 1px solid;
+    padding: 10px;
+    background-color: #fcc;
+}

apps/web/res/css/structures/_ContextualMenu.pcss

@@ -0,0 +1,117 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ContextualMenu_wrapper {
+    position: fixed;
+    z-index: 5000;
+}
+
+.mx_ContextualMenu_background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+}
+
+.mx_ContextualMenu {
+    border-radius: 12px;
+    box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
+    background-color: var(--cpd-color-bg-canvas-default);
+    border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
+    color: $primary-content;
+    position: absolute;
+    z-index: 5001;
+    width: max-content;
+}
+
+.mx_ContextualMenu_right {
+    right: 16px;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
+    right: 8px;
+}
+
+.mx_ContextualMenu_chevron_right {
+    position: absolute;
+    right: -8px;
+    top: 0px;
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-left: 8px solid $menu-bg-color;
+    border-bottom: 8px solid transparent;
+}
+
+.mx_ContextualMenu_left {
+    left: 0;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
+    left: 8px;
+}
+
+.mx_ContextualMenu_chevron_left {
+    position: absolute;
+    left: -8px;
+    top: 0px;
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-right: 8px solid $menu-bg-color;
+    border-bottom: 8px solid transparent;
+}
+
+.mx_ContextualMenu_top {
+    top: 0;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
+    top: 8px;
+}
+
+.mx_ContextualMenu_chevron_top {
+    position: absolute;
+    left: 0px;
+    top: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-bottom: 8px solid $menu-bg-color;
+    border-right: 8px solid transparent;
+}
+
+.mx_ContextualMenu_bottom {
+    bottom: 0;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
+    bottom: 8px;
+}
+
+.mx_ContextualMenu_chevron_bottom {
+    position: absolute;
+    left: 0px;
+    bottom: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-top: 8px solid $menu-bg-color;
+    border-right: 8px solid transparent;
+}
+
+.mx_ContextualMenu_rightAligned {
+    transform: translateX(-100%);
+}
+
+.mx_ContextualMenu_bottomAligned {
+    transform: translateY(-100%);
+}

apps/web/res/css/structures/_ErrorMessage.pcss

@@ -0,0 +1,17 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ErrorMessage {
+    align-items: center;
+    color: $alert;
+    display: flex;
+    font-size: $font-12px;
+    gap: $spacing-8;
+    line-height: 1.2em;
+    min-height: 2.4em;
+}

apps/web/res/css/structures/_FileDropTarget.pcss

@@ -0,0 +1,57 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+@keyframes mx_FileDropTarget_animation {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 0.95;
+    }
+}
+
+.mx_FileDropTarget {
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+
+    font-size: $font-18px;
+    text-align: center;
+
+    pointer-events: none;
+
+    background-color: $background;
+    opacity: 0.95;
+
+    position: absolute;
+    z-index: 3000;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    animation: mx_FileDropTarget_animation;
+    animation-duration: 0.5s;
+}
+
+@keyframes mx_FileDropTarget_image_animation {
+    from {
+        transform: scaleX(0);
+    }
+    to {
+        transform: scaleX(1);
+    }
+}
+
+.mx_FileDropTarget_image {
+    width: 32px;
+    animation: mx_FileDropTarget_image_animation;
+    animation-duration: 0.5s;
+    margin-bottom: 16px;
+}

apps/web/res/css/structures/_FilePanel.pcss

@@ -0,0 +1,77 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_FilePanel {
+    order: 2;
+    flex: 1 1 0;
+    overflow-y: auto;
+    display: flex;
+
+    .mx_RoomView_messageListWrapper {
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .mx_RoomView_MessageList {
+        width: 100%;
+        gap: var(--cpd-space-6x);
+    }
+
+    /* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+    /* Overrides for the attachment body tiles */
+    .mx_EventTile {
+        word-break: break-word;
+        padding-top: 0;
+
+        & + .mx_EventTile {
+            border-top: 1px solid var(--cpd-color-gray-400);
+            padding-top: var(--cpd-space-6x);
+        }
+
+        .mx_EventTile_line {
+            padding-inline-start: 0;
+        }
+
+        .mx_MFileBody [data-type="download"] {
+            margin-top: var(--cpd-space-4x);
+        }
+
+        /* anchor link as wrapper */
+        .mx_EventTile_senderDetailsLink {
+            text-decoration: none;
+            margin-bottom: var(--cpd-space-1x);
+            display: block;
+
+            .mx_EventTile_senderDetails {
+                display: flex;
+                margin-top: -2px;
+                gap: var(--cpd-space-2x);
+                align-items: center;
+
+                .mx_DisambiguatedProfile {
+                    color: $event-timestamp-color; /* for ellipsis. Color of displayName and mxid is inherited */
+                }
+
+                .mx_MessageTimestamp {
+                    margin-left: auto;
+                    font: var(--cpd-font-body-xs-regular);
+                    color: var(--cpd-color-text-secondary);
+                }
+            }
+        }
+    }
+
+    .mx_EventTile_line {
+        margin-inline-end: 0;
+        padding-inline-start: 0;
+    }
+}

apps/web/res/css/structures/_GenericDropdownMenu.pcss

@@ -0,0 +1,106 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_GenericDropdownMenu_button {
+    padding: 3px 4px 3px 8px;
+    border-radius: 4px;
+    line-height: 1.5;
+    user-select: none;
+    font-size: $font-12px;
+    color: $secondary-content;
+
+    svg {
+        width: 18px;
+        height: 18px;
+        float: right;
+    }
+}
+
+.mx_GenericDropdownMenu_button:hover,
+.mx_GenericDropdownMenu_button[aria-expanded="true"] {
+    background: $quinary-content;
+}
+
+.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper {
+    .mx_ContextualMenu {
+        position: initial;
+
+        font-size: $font-12px;
+        color: $secondary-content;
+        padding-top: 10px;
+        padding-bottom: 10px;
+
+        border: 1px solid $quinary-content;
+        box-shadow: 0 1px 3px rgb(23, 25, 28, 0.05);
+    }
+
+    .mx_ContextualMenu_chevron_top {
+        left: auto;
+        right: 22px;
+        border-bottom-color: $quinary-content;
+
+        &::after {
+            content: "";
+            border: inherit;
+            border-bottom-color: $menu-bg-color;
+            position: absolute;
+            top: 1px;
+            left: -8px;
+        }
+    }
+
+    .mx_GenericDropdownMenu_divider {
+        display: block;
+        height: 0;
+        margin-left: 4px;
+        margin-right: 19px;
+        border-top: 1px solid $quinary-content;
+    }
+
+    .mx_GenericDropdownMenu_Option {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: row;
+        align-items: center;
+        padding: 10px 20px 10px 30px;
+        position: relative;
+
+        > .mx_GenericDropdownMenu_Option--label {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+
+            margin: 0;
+
+            span:first-child {
+                color: $primary-content;
+                font-weight: var(--cpd-font-weight-semibold);
+            }
+        }
+
+        &.mx_GenericDropdownMenu_Option--header > .mx_GenericDropdownMenu_Option--label span:first-child {
+            font-size: $font-15px;
+        }
+
+        &.mx_GenericDropdownMenu_Option--item {
+            &:hover {
+                background-color: $menu-selected-color;
+            }
+
+            .mx_GenericDropdownMenu_Option--checkIcon {
+                width: 16px;
+                height: 16px;
+                margin-left: -22px;
+                margin-right: 6px;
+                color: $primary-content;
+                display: inline-block;
+                vertical-align: middle;
+            }
+        }
+    }
+}

apps/web/res/css/structures/_HomePage.pcss

@@ -0,0 +1,94 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+Copyright 2017 Vector Creations Ltd
+Copyright 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_HomePage {
+    display: grid;
+    place-items: center;
+    width: min(100% - 50px, 960px);
+    height: 100%;
+    margin: 0 auto;
+    container-type: inline-size;
+    container-name: homepage;
+}
+
+.mx_HomePage_default {
+    text-align: center;
+
+    img {
+        height: 48px;
+    }
+
+    h1 {
+        margin-bottom: 4px;
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-32px;
+        line-height: 1.375;
+    }
+
+    h2 {
+        margin-top: 4px;
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-18px;
+        line-height: $font-25px;
+        color: $muted-fg-color;
+    }
+
+    .mx_MiniAvatarUploader {
+        margin: 0 auto;
+    }
+
+    .mx_HomePage_default_buttons {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 5px 40px;
+        width: 100%;
+        margin-top: 80px;
+        margin-bottom: 20px;
+
+        .mx_AccessibleButton {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 13px;
+            box-sizing: border-box;
+            width: 160px;
+            min-height: 132px;
+            padding: 8px 15px;
+            border-radius: 8px;
+            font-weight: var(--cpd-font-weight-semibold);
+            font-size: $font-15px;
+            line-height: $font-20px;
+            color: #fff; /* on all themes */
+            background-color: $accent;
+
+            svg {
+                display: block;
+                width: 100%;
+                height: 40px;
+                object-fit: contain;
+                color: #fff; /* on all themes */
+            }
+        }
+
+        @container homepage (max-width: 559px) {
+            grid-template-columns: 1fr;
+
+            .mx_AccessibleButton {
+                flex-direction: row;
+                width: 100%;
+                min-height: 0;
+
+                svg {
+                    width: 24px;
+                }
+            }
+        }
+    }
+}

apps/web/res/css/structures/_LargeLoader.pcss

@@ -0,0 +1,29 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LargeLoader {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .mx_Spinner {
+        flex: unset;
+        height: auto;
+        margin-bottom: 32px;
+        margin-top: 33vh;
+    }
+
+    .mx_LargeLoader_text {
+        font-size: 24px;
+        font-weight: var(--cpd-font-weight-semibold);
+        padding: 0 16px;
+        position: relative;
+        text-align: center;
+    }
+}

apps/web/res/css/structures/_LeftPanel.pcss

@@ -0,0 +1,232 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MatrixChat--with-avatar {
+    .mx_LeftPanel,
+    .mx_LeftPanel .mx_LeftPanel_roomListContainer {
+        background-color: transparent;
+    }
+}
+
+.mx_LeftPanel_outerWrapper {
+    display: flex;
+    flex-direction: column;
+    max-width: 50%;
+    position: relative;
+}
+
+.mx_LeftPanel_wrapper,
+.mx_LeftPanel {
+    --collapsedWidth: 68px;
+}
+
+.mx_LeftPanel_panel {
+    .mx_LeftPanel_outerWrapper {
+        height: 100%;
+        max-width: none;
+    }
+
+    .mx_LeftPanel_wrapper--user {
+        width: 100%;
+    }
+}
+
+.mx_LeftPanel_wrapper {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    height: 100%; /* ensure space panel is still scrollable with an outer wrapper */
+
+    .mx_LeftPanel_wrapper--user {
+        background-color: $roomlist-bg-color;
+        display: flex;
+        overflow: hidden;
+        position: relative;
+        /* For enhanced visibility under contrast control */
+        outline: 1px solid transparent;
+
+        &[data-collapsed] {
+            max-width: var(--collapsedWidth);
+        }
+    }
+}
+
+.mx_LeftPanel {
+    background-color: $roomlist-bg-color;
+
+    /* Create a row-based flexbox for the space panel and the room list */
+    display: flex;
+    contain: content;
+    position: relative;
+    flex-grow: 1;
+    overflow: hidden;
+
+    /* Note: The 'room list' in this context is actually everything that isn't the tag */
+    /* panel, such as the menu options, breadcrumbs, filtering, etc */
+    .mx_LeftPanel_roomListContainer {
+        background-color: $roomlist-bg-color;
+        flex: 1 0 0;
+        min-width: 0;
+        /* Create another flexbox (this time a column) for the room list components */
+        display: flex;
+        flex-direction: column;
+
+        .mx_LeftPanel_userHeader {
+            /* 12px top, 12px sides, 20px bottom (using 13px bottom to account
+             * for internal whitespace in the breadcrumbs)
+             */
+            padding: 12px;
+            flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
+
+            /* Create another flexbox column for the rows to stack within */
+            display: flex;
+            flex-direction: column;
+        }
+
+        .mx_LeftPanel_breadcrumbsContainer {
+            overflow-y: hidden;
+            overflow-x: scroll;
+            margin: 12px 12px 0 12px;
+            flex: 0 0 auto;
+            /* Create yet another flexbox, this time within the row, to ensure items stay */
+            /* aligned correctly. This is also a row-based flexbox. */
+            display: flex;
+            align-items: center;
+            contain: content;
+
+            &.mx_IndicatorScrollbar_leftOverflow {
+                mask-image: linear-gradient(90deg, transparent, black 5%);
+            }
+
+            &.mx_IndicatorScrollbar_rightOverflow {
+                mask-image: linear-gradient(90deg, black, black 95%, transparent);
+            }
+
+            &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
+                mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
+            }
+        }
+
+        .mx_LeftPanel_filterContainer {
+            margin: 0 12px;
+            padding: 12px 0 8px;
+            border-bottom: 1px solid $quinary-content;
+
+            flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
+
+            /* Create a flexbox to organize the inputs */
+            display: flex;
+            align-items: center;
+
+            & + .mx_LegacyRoomListHeader {
+                margin-top: 12px;
+            }
+
+            .mx_LeftPanel_dialPadButton,
+            .mx_LeftPanel_exploreButton {
+                width: 20px;
+                height: 20px;
+                padding: var(--cpd-space-1-5x);
+                border-radius: 8px;
+                background-color: $panel-actions;
+                margin-left: 8px;
+                /* For enhanced visibility under contrast control */
+                outline: 1px solid transparent;
+
+                svg {
+                    width: inherit;
+                    height: inherit;
+                    display: block;
+                    color: $secondary-content;
+                }
+
+                &:hover {
+                    background-color: $tertiary-content;
+
+                    svg {
+                        color: $background;
+                    }
+                }
+            }
+        }
+
+        .mx_LegacyRoomListHeader:first-child {
+            margin-top: 12px;
+        }
+
+        .mx_LeftPanel_roomListWrapper {
+            /* Make the y-scrollbar more responsive */
+            padding-right: 2px;
+            overflow: hidden;
+            margin-top: 10px; /* so we're not up against the search/filter */
+            flex: 1 0 0; /* needed in Safari to properly set flex-basis */
+
+            &.mx_LeftPanel_roomListWrapper_stickyBottom {
+                padding-bottom: 32px;
+            }
+
+            &.mx_LeftPanel_roomListWrapper_stickyTop {
+                padding-top: 32px;
+            }
+        }
+
+        .mx_LeftPanel_actualRoomListContainer {
+            position: relative; /* for sticky headers */
+            height: 100%; /* ensure scrolling still works */
+        }
+    }
+
+    /* These styles override the defaults for the minimized (66px) layout */
+    &.mx_LeftPanel_minimized {
+        flex-grow: 0;
+        min-width: unset;
+        width: unset !important;
+
+        .mx_LeftPanel_roomListContainer {
+            width: var(--collapsedWidth);
+
+            .mx_LeftPanel_userHeader {
+                flex-direction: row;
+                justify-content: center;
+            }
+
+            .mx_LeftPanel_filterContainer {
+                /* Organize the flexbox into a centered column layout */
+                flex-direction: column;
+                justify-content: center;
+
+                .mx_LeftPanel_dialPadButton {
+                    margin-left: 0;
+                    margin-top: 8px;
+                    background-color: transparent;
+                }
+
+                .mx_LeftPanel_exploreButton {
+                    margin-left: 0;
+                    margin-top: 8px;
+                }
+            }
+        }
+    }
+}
+
+.mx_LeftPanel_newRoomList {
+    /* Thew new rooms list is not designed to be collapsed to just icons. */
+    /* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */
+    --collapsedWidth: 224px;
+    /* Important to force the color on ED titlebar until we remove the old room list */
+    background-color: var(--cpd-color-bg-canvas-default) !important;
+}
+
+#left-panel .mx_LeftPanel_wrapper--user {
+    /*
+     * Disable background when using the new room list.
+     * This background sometimes shows when the panel is resized and it looks like a thicker border.
+     */
+    background: none;
+}

apps/web/res/css/structures/_MainSplit.pcss

@@ -0,0 +1,32 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MainSplit {
+    display: flex;
+    flex-direction: row;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+}
+
+.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
+    &:hover .mx_ResizeHandle--horizontal::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-150%, -50%);
+
+        height: 64px; /* to match width of the ones on roomlist */
+        width: 4px;
+        border-radius: 4px;
+
+        content: "";
+
+        background-color: $primary-content;
+        opacity: 0.8;
+    }
+}

apps/web/res/css/structures/_MatrixChat.pcss

@@ -0,0 +1,70 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MatrixChat_splash {
+    position: relative;
+    height: 100%;
+}
+
+.mx_MatrixChat_wrapper {
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+}
+
+.mx_MatrixToolbar {
+    order: 1;
+
+    height: 40px;
+}
+
+.mx_MatrixChat {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+
+    flex: 1;
+    min-height: 0;
+}
+
+/* not the left panel, and not the resize handle, so the roomview and friends */
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) {
+    background-color: $background;
+
+    flex: 1 1 0;
+    min-width: 0;
+
+    /* To fix https://github.com/vector-im/element-web/issues/3298 where Safari
+       needed height 100% all the way down to the HomePage. Height does not
+       have to be auto, empirically.
+    */
+    height: 100%;
+}
+
+.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
+    position: relative;
+
+    &::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        height: 64px; /* to match width of the ones on roomlist */
+        width: 4px;
+        border-radius: 4px;
+
+        content: " ";
+
+        background-color: $primary-content;
+        opacity: 0.8;
+    }
+}

apps/web/res/css/structures/_NonUrgentToastContainer.pcss

@@ -0,0 +1,27 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_NonUrgentToastContainer {
+    position: absolute;
+    bottom: 30px;
+    left: 28px;
+    z-index: 101; /* same level as other toasts */
+
+    .mx_NonUrgentToastContainer_toast {
+        padding: 10px 12px;
+        border-radius: 8px;
+        width: 320px;
+        font-size: $font-13px;
+        margin-top: 8px;
+
+        /* We don't use variables on the colours because we want it to be the same */
+        /* in all themes. */
+        background-color: #17191c;
+        color: #fff;
+    }
+}

apps/web/res/css/structures/_PictureInPictureDragger.pcss

@@ -0,0 +1,20 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_PictureInPictureDragger {
+    cursor: grab;
+    user-select: none;
+    left: 0;
+    position: fixed;
+    top: 0;
+    /* Display above any widget elements */
+    z-index: 102;
+}
+
+.mx_PictureInPictureDragger:active {
+    cursor: grabbing;
+}

apps/web/res/css/structures/_QuickSettingsButton.pcss

@@ -0,0 +1,128 @@
+/*
+Copyright 2024,2025 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_QuickSettingsButton {
+    /* !important override compound */
+    border-radius: 8px !important;
+    margin: 12px auto 12px;
+
+    svg {
+        fill: $secondary-content;
+    }
+
+    &:not(.expanded):hover {
+        /**
+         * override compound default background color when hovered
+         * should disappear when the space panel will be migrated to compound
+         */
+        background-color: $quaternary-content !important;
+        color: $primary-content;
+
+        svg {
+            fill: $primary-content;
+        }
+    }
+
+    &.expanded {
+        /**
+         * override compound default background color when hovered
+         * should disappear when the space panel will be migrated to compound
+         */
+        background-color: transparent !important;
+
+        /* align with settings icon */
+        margin-left: 21px;
+        margin-right: 8px;
+        width: 100%;
+
+        /**
+         * modify internal css of the compound component
+         * dirty but we need to add the label into the indicator icon button
+         **/
+        & > div {
+            display: flex;
+            align-items: center;
+        }
+
+        svg {
+            /* align with settings label */
+            margin-right: 14px;
+            /* required to set the icon width when into a flex container */
+            width: 24px;
+            flex-shrink: 0;
+        }
+
+        & .mx_QuickSettingsButton_label {
+            /* !important override compound  */
+            color: $secondary-content !important;
+        }
+    }
+}
+
+.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu {
+    padding: 16px;
+    width: max-content;
+    min-width: 200px;
+    contain: unset; /* let the dropdown paint beyond the context menu */
+
+    > div > h2 {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: var(--cpd-color-text-secondary);
+        margin: 0 0 16px;
+    }
+
+    .mx_AccessibleButton_hasKind {
+        display: block;
+        margin-top: 4px;
+    }
+
+    > div > h4 {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-12px;
+        line-height: $font-15px;
+        text-transform: uppercase;
+        color: var(--cpd-color-text-secondary);
+        margin: 20px 0 12px;
+        position: relative;
+        display: flex;
+    }
+
+    .mx_QuickSettingsButton_moreOptionsButton {
+        margin-left: var(--cpd-space-7x);
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: var(--cpd-color-text-primary);
+        position: relative;
+        margin-bottom: 16px;
+    }
+
+    .mx_QuickSettingsButton_option {
+        margin-bottom: var(--cpd-space-3x);
+        label {
+            /* Correctly line up icons and text. */
+            display: flex;
+        }
+    }
+}
+
+.mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
+    .mx_QuickThemeSwitcher {
+        margin-top: var(--cpd-space-2x);
+    }
+}
+
+.mx_QuickSettingsButton_icon {
+    margin-right: var(--cpd-space-1x);
+    color: $secondary-content;
+    width: 18px;
+    height: 18px;
+    margin-top: auto;
+    margin-bottom: auto;
+}

apps/web/res/css/structures/_RightPanel.pcss

@@ -0,0 +1,36 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RightPanel {
+    overflow-x: hidden;
+    flex: 0 0 auto;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid $separator;
+    box-sizing: border-box;
+    height: 100%;
+    contain: strict;
+    background-color: var(--cpd-color-bg-canvas-default);
+
+    .mx_RoomView_MessageList {
+        padding: 14px 18px; /* top and bottom is 4px smaller to balance with the padding set above */
+    }
+}
+
+.mx_RightPanel .mx_MemberList,
+.mx_RightPanel .mx_MemberInfo {
+    order: 2;
+    flex: 1 1 0;
+}
+
+.mx_RightPanel .mx_RoomView_messagePanelSpinner {
+    order: 2;
+    margin: auto;
+}

apps/web/res/css/structures/_RoomSearch.pcss

@@ -0,0 +1,93 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/* Note: this component expects to be contained within a flexbox */
+.mx_RoomSearch {
+    flex: 1;
+    min-width: 0;
+    border-radius: 8px;
+    background-color: $panel-actions;
+    /* keep border thickness consistent to prevent movement */
+    border: 1px solid transparent;
+    height: 28px;
+    padding: 1px;
+
+    /* Create a flexbox for the icons (easier to manage) */
+    display: flex;
+    align-items: center;
+
+    cursor: pointer;
+
+    .mx_RoomSearch_icon {
+        width: 20px;
+        height: 20px;
+        color: $secondary-content;
+        margin-left: var(--cpd-space-2x);
+        flex-shrink: 0;
+    }
+
+    .mx_RoomSearch_spotlightTriggerText {
+        color: var(--cpd-color-text-secondary);
+        flex: 1;
+        min-width: 0;
+        /* the following rules are to match that of a real input field */
+        overflow: hidden;
+        margin: 9px;
+        font: var(--cpd-font-body-sm-semibold);
+    }
+
+    .mx_RoomSearch_shortcutPrompt {
+        border-radius: 6px;
+        background-color: $panel-actions;
+        padding: 2px 4px;
+        user-select: none;
+        font-size: $font-12px;
+        line-height: $font-15px;
+        font-family: inherit;
+        font-weight: var(--cpd-font-weight-semibold);
+        color: $light-fg-color;
+        margin-right: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &.mx_RoomSearch_minimized {
+        height: 32px;
+        min-height: 32px;
+        width: 32px;
+        box-sizing: border-box;
+
+        .mx_RoomSearch_icon {
+            margin: 0 auto;
+            padding: 1px;
+            align-self: center;
+        }
+
+        .mx_RoomSearch_shortcutPrompt {
+            display: none;
+        }
+    }
+
+    &:hover {
+        background-color: $tertiary-content;
+
+        .mx_RoomSearch_spotlightTriggerText {
+            color: $background;
+        }
+
+        .mx_RoomSearch_shortcutPrompt {
+            background-color: $background;
+            color: $secondary-content;
+        }
+
+        .mx_RoomSearch_icon {
+            color: $background;
+        }
+    }
+}

apps/web/res/css/structures/_RoomView.pcss

@@ -0,0 +1,213 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+:root {
+    --RoomView_MessageList-padding: 18px;
+}
+
+.mx_LeftPanel_panel {
+    .mx_RoomView_wrapper {
+        height: 100%;
+    }
+}
+
+.mx_RoomView_wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+    justify-content: center;
+    /* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
+    contain: strict;
+}
+
+.mx_RoomView {
+    word-wrap: break-word;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+
+    .mx_MainSplit {
+        flex: 1 1 0;
+    }
+
+    .mx_MessageComposer {
+        width: 100%;
+        flex: 0 0 auto;
+        margin-right: 2px;
+        padding-bottom: 1em;
+    }
+}
+
+.mx_RoomView_auxPanel_hiddenHighlights {
+    border-bottom: 1px solid $primary-hairline-color;
+    padding: 10px 26px;
+    color: $alert;
+    cursor: pointer;
+}
+
+.mx_RoomView_messagePanel {
+    width: 100%;
+    overflow-y: auto;
+    flex: 1 1 0;
+    overflow-anchor: none;
+}
+
+.mx_RoomView_messagePanelSearchSpinner {
+    flex: 1;
+    background-image: url("/res/img/typing-indicator-2x.gif");
+    background-position: center 367px;
+    background-size: 25px;
+    background-repeat: no-repeat;
+    position: relative;
+
+    svg {
+        color: $info-plinth-fg-color;
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        top: 286px;
+        left: calc(50% - 25px);
+    }
+}
+
+.mx_RoomView_body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    container-type: size;
+    container-name: roomview;
+
+    .mx_RoomView_messagePanel,
+    .mx_RoomView_messagePanelSpinner,
+    .mx_RoomView_messagePanelSearchSpinner {
+        order: 2;
+    }
+
+    .mx_RoomView_timeline {
+        /* offset parent for mx_RoomView_topUnreadMessagesBar  */
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        margin-right: calc(var(--container-gap-width) / 2);
+    }
+}
+
+.mx_RoomView_statusArea {
+    width: 100%;
+    flex: 0 0 auto;
+
+    max-height: 0px;
+    background-color: $background;
+    z-index: 1000;
+    overflow: hidden;
+
+    transition: all 0.2s ease-out;
+}
+
+.mx_RoomView_statusArea_expanded {
+    max-height: 100px;
+}
+
+.mx_RoomView_statusAreaBox {
+    margin: auto;
+    min-height: 50px;
+}
+
+.mx_RoomView_statusAreaBox_line {
+    margin-left: 65px;
+    border-top: 1px solid $primary-hairline-color;
+    height: 1px;
+}
+
+.mx_RoomView_messageListWrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    position: relative;
+}
+
+.mx_RoomView_searchResultsPanel {
+    .mx_RoomView_messageListWrapper {
+        justify-content: flex-start;
+
+        > .mx_RoomView_MessageList > li > ol {
+            list-style-type: none;
+        }
+    }
+
+    a {
+        text-decoration: none;
+        color: inherit;
+    }
+}
+
+.mx_RoomView_empty {
+    font-size: $font-13px;
+    padding: 0 24px;
+    margin-right: 30px;
+    text-align: center;
+    margin-bottom: 80px; /* visually center the content (intentional offset) */
+}
+
+.mx_RoomView_MessageList {
+    list-style-type: none;
+    padding: var(--RoomView_MessageList-padding); /* mx_ProfileResizer depends on this value */
+    margin: 0;
+    /* needed as min-height is set to clientHeight in ScrollPanel
+    to prevent shrinking when WhoIsTypingTile is hidden */
+    box-sizing: border-box;
+
+    li {
+        clear: both;
+    }
+
+    .mx_ScrollPanel & {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+
+        content-visibility: auto;
+        contain-intrinsic-size: 50px;
+    }
+
+    .mx_RoomView--local .mx_ScrollPanel & {
+        justify-content: center;
+    }
+}
+
+.mx_RoomView_inCall {
+    .mx_RoomView_statusAreaBox_line {
+        margin-top: 2px;
+        border: none;
+        height: 0px;
+    }
+
+    .mx_MessageComposer_wrapper {
+        border-top: 2px hidden;
+        padding-top: 1px;
+    }
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_RoomView_MessageList {
+        margin-bottom: 4px;
+
+        h2 {
+            margin-top: 6px;
+        }
+    }
+
+    .mx_RoomView_statusAreaBox {
+        min-height: 42px;
+    }
+}

apps/web/res/css/structures/_SearchBox.pcss

@@ -0,0 +1,30 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SearchBox {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 36px; /* to avoid jumping when the X to clear shows/hides */
+
+    &.mx_SearchBox_blurred:not(:hover) {
+        background-color: transparent;
+    }
+
+    .mx_SearchBox_closeButton {
+        cursor: pointer;
+        height: 16px;
+        width: 16px;
+        padding: 9px;
+
+        svg {
+            height: inherit;
+            width: inherit;
+            color: var(--cpd-color-icon-secondary);
+        }
+    }
+}

apps/web/res/css/structures/_SpaceHierarchy.pcss

@@ -0,0 +1,277 @@
+/*
+Copyright 2024,2025 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SpaceRoomView_landing {
+    .mx_AccessibleButton_kind_link {
+        font-size: inherit;
+    }
+
+    .mx_SearchBox {
+        margin: 24px 0 16px;
+    }
+
+    .mx_SpaceHierarchy_noResults {
+        text-align: center;
+
+        > div {
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $secondary-content;
+        }
+    }
+
+    .mx_SpaceHierarchy_listHeader {
+        display: flex;
+        flex-flow: wrap;
+        justify-content: space-between;
+        align-items: center;
+        gap: 12px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $primary-content;
+        margin-bottom: 12px;
+
+        .mx_SpaceHierarchy_listHeader_header {
+            grid-column-start: 1;
+            font-weight: var(--cpd-font-weight-semibold);
+            margin: 0;
+        }
+
+        .mx_SpaceHierarchy_listHeader_buttons {
+            grid-column-start: 2;
+            display: flex;
+            flex-flow: wrap;
+            gap: 12px;
+            min-height: 32px;
+
+            .mx_AccessibleButton {
+                padding: 4px 12px;
+                font-weight: normal;
+            }
+        }
+
+        .mx_AccessibleButton_kind_danger_outline,
+        .mx_AccessibleButton_kind_primary_outline {
+            padding: 3px 12px; /* to account for the 1px border */
+        }
+    }
+
+    .mx_SpaceHierarchy_error {
+        position: relative;
+        font-weight: var(--cpd-font-weight-semibold);
+        color: $alert;
+        font-size: $font-15px;
+        line-height: $font-18px;
+        margin: 20px auto 12px;
+        padding-left: 24px;
+        width: max-content;
+
+        &::before {
+            content: "";
+            position: absolute;
+            height: 16px;
+            width: 16px;
+            left: 0;
+            background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
+            background-size: cover;
+            background-repeat: no-repeat;
+        }
+    }
+
+    .mx_SpaceHierarchy_roomCount {
+        > h3 {
+            display: inline;
+            font-weight: var(--cpd-font-weight-semibold);
+            font-size: $font-18px;
+            line-height: $font-22px;
+            color: $primary-content;
+        }
+
+        > span {
+            margin-left: 8px;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $secondary-content;
+        }
+    }
+
+    .mx_SpaceHierarchy_subspace_toggle {
+        position: absolute;
+        left: -1px;
+        top: 10px;
+        height: 16px;
+        width: 16px;
+        border-radius: 4px;
+        background-color: $background;
+
+        svg {
+            width: inherit;
+            height: inherit;
+            color: $tertiary-content;
+            transform: rotate(270deg);
+        }
+
+        &.mx_SpaceHierarchy_subspace_toggle_shown svg {
+            transform: rotate(0deg);
+        }
+    }
+
+    .mx_SpaceHierarchy_subspace_children {
+        position: relative;
+        padding-left: 12px;
+    }
+
+    .mx_SpaceHierarchy_list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li.mx_SpaceHierarchy_roomTileWrapper {
+            list-style: none;
+
+            .mx_SpaceHierarchy_roomTile {
+                position: relative;
+                padding: 8px 16px;
+                border-radius: 8px;
+                box-sizing: border-box;
+
+                display: flex;
+                flex-wrap: wrap;
+                gap: 6px 12px;
+
+                .mx_SpaceHierarchy_roomTile_item {
+                    font-weight: var(--cpd-font-weight-semibold);
+                    font-size: $font-15px;
+                    line-height: $font-18px;
+                    display: grid;
+                    grid-template-columns: 20px auto;
+                    gap: 6px 8px;
+                    align-items: center;
+                    flex: 1; /* wrap action buttons */
+
+                    .mx_SpaceHierarchy_roomTile_avatar {
+                        grid-row: 1;
+                        grid-column: 1;
+                    }
+
+                    .mx_SpaceHierarchy_roomTile_name {
+                        grid-row: 1;
+                        grid-column: 2;
+
+                        .mx_InfoTooltip,
+                        .mx_SpaceHierarchy_roomTile_joined {
+                            margin-left: 12px;
+                            color: $tertiary-content;
+                            font-size: $font-12px;
+                            line-height: $font-15px;
+                        }
+
+                        .mx_InfoTooltip {
+                            display: inline-block;
+                        }
+
+                        .mx_SpaceHierarchy_roomTile_joined {
+                            display: inline-flex;
+                            align-items: center;
+                            vertical-align: middle;
+
+                            svg {
+                                width: 20px;
+                                height: 20px;
+                                color: $accent;
+                            }
+                        }
+                    }
+
+                    .mx_SpaceHierarchy_roomTile_info {
+                        grid-row: 2;
+                        grid-column: 2;
+                        font: var(--cpd-font-body-md-regular);
+                        font-weight: initial;
+                        line-height: $font-18px;
+                        color: $secondary-content;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        overflow: hidden;
+                    }
+                }
+
+                .mx_SpaceHierarchy_actions {
+                    display: flex;
+                    align-items: center;
+                    column-gap: 12px;
+                    margin-left: auto;
+
+                    .mx_AccessibleButton {
+                        line-height: $font-24px;
+                        padding: 4px 16px;
+                        display: inline-block;
+                        visibility: hidden;
+                    }
+
+                    .mx_AccessibleButton_kind_danger_outline,
+                    .mx_AccessibleButton_kind_primary_outline {
+                        padding: 3px 16px; /* to account for the 1px border */
+                    }
+                }
+
+                &:hover,
+                &:focus-within {
+                    background-color: $spacePanel-bg-color;
+
+                    .mx_AccessibleButton {
+                        visibility: visible;
+                    }
+                }
+
+                &.mx_SpaceHierarchy_joining {
+                    .mx_AccessibleButton {
+                        visibility: visible;
+                        padding: 4px 18px;
+                    }
+                }
+            }
+        }
+    }
+
+    .mx_SpaceHierarchy_roomTile,
+    .mx_SpaceHierarchy_subspace_children {
+        &::before {
+            content: "";
+            position: absolute;
+            background-color: $spacePanel-bg-color;
+            width: 1px;
+            height: 100%;
+            left: 6px;
+            top: 0;
+        }
+    }
+
+    .mx_SpaceHierarchy_actions {
+        .mx_SpaceHierarchy_actionsText {
+            font-weight: normal;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-content;
+        }
+    }
+
+    > hr {
+        border: none;
+        height: 1px;
+        background-color: rgb(141, 151, 165, 0.2);
+        margin: 20px 0;
+    }
+
+    .mx_SpaceHierarchy_createRoom {
+        display: block;
+        margin: 16px auto 0;
+        width: max-content;
+    }
+}

apps/web/res/css/structures/_SpacePanel.pcss

@@ -0,0 +1,374 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SpacePanel {
+    --activeBackground-color: $panel-actions;
+    --activeBorder-color: $primary-content;
+    --activeBorder-transparent-gap: 1px;
+    --gutterSize: 14px;
+    --height-nested: 24px;
+    --height-topLevel: 32px;
+
+    background-color: $spacePanel-bg-color;
+    flex: 0 0 auto;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    /* Fix for the blurred avatar-background */
+    z-index: 1;
+
+    /* For enhanced visibility under contrast control */
+    outline: 1px solid transparent;
+
+    /* Create another flexbox so the Panel fills the container */
+    display: flex;
+    flex-direction: column;
+
+    &.collapsed {
+        width: 68px;
+    }
+
+    &.newUi {
+        background-color: var(--cpd-color-bg-canvas-default);
+        border-right: 1px solid var(--cpd-color-bg-subtle-primary);
+    }
+
+    .mx_SpacePanel_toggleCollapse {
+        position: absolute;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background-color: $tertiary-content;
+        top: 19px; /* v-align with avatar */
+        right: -8px;
+
+        svg {
+            height: inherit;
+            width: inherit;
+            display: inline-block;
+            color: $background;
+            /* Slight alignment tweak to center the asset */
+            margin-left: 1px;
+        }
+
+        &:not(.expanded) {
+            opacity: 0;
+        }
+
+        &.expanded svg {
+            transform: rotate(180deg);
+            /* Slight alignment tweak to center the asset */
+            margin-left: -1px;
+        }
+    }
+
+    &:hover .mx_SpacePanel_toggleCollapse,
+    .mx_SpacePanel_toggleCollapse:focus-visible {
+        opacity: 1;
+        /* For enhanced visibility under contrast control */
+        outline: 1px solid transparent;
+    }
+
+    ul {
+        margin: 0;
+        list-style: none;
+        padding: 0;
+    }
+
+    .mx_SpaceButton_toggleCollapse {
+        cursor: pointer;
+    }
+
+    .mx_SpaceItem_dragging {
+        .mx_SpaceButton_toggleCollapse {
+            visibility: hidden;
+        }
+    }
+
+    .mx_SpaceItem {
+        display: inline-flex;
+        flex-flow: wrap;
+
+        &.mx_SpaceItem_narrow {
+            align-self: baseline;
+        }
+    }
+
+    .mx_SpaceItem.collapsed {
+        & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
+            padding: 0 10px;
+            margin: 0 -10px;
+        }
+
+        & > .mx_SpaceTreeLevel {
+            display: none;
+        }
+    }
+
+    .mx_SpaceItem_new {
+        position: relative;
+    }
+
+    .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
+        margin-left: var(--gutterSize);
+        min-width: 40px;
+    }
+
+    .mx_SpaceButton {
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        padding: 4px 4px 4px 0;
+        width: 100%;
+        /* Override the unlayered cursor: grab; rule from react-beautiful-dnd */
+        cursor: pointer !important;
+
+        &.mx_SpaceButton_active {
+            &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
+                background-color: var(--activeBackground-color);
+            }
+
+            &.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
+                padding: var(--activeBorder-transparent-gap);
+                border: 3px var(--activeBorder-color) solid;
+            }
+        }
+
+        .mx_SpaceButton_selectionWrapper {
+            position: relative;
+            display: flex;
+            flex: 1;
+            align-items: center;
+            border-radius: 12px;
+            padding: 4px;
+            width: calc(100% - 32px);
+            min-width: 0;
+        }
+
+        &.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
+            flex: initial;
+            width: 32px;
+        }
+
+        .mx_SpaceButton_name {
+            flex: 1;
+            margin-left: 8px;
+            white-space: nowrap;
+            display: block;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            font: var(--cpd-font-body-md-regular);
+        }
+
+        .mx_SpaceButton_toggleCollapse {
+            height: 20px;
+            width: var(--gutterSize);
+            flex-shrink: 0;
+            padding: 10px 0;
+
+            svg {
+                width: 20px;
+                height: inherit;
+                display: inline-block;
+                color: $tertiary-content;
+                /* Re-align with parent */
+                margin-left: -3px;
+            }
+        }
+
+        .mx_SpaceButton_icon {
+            /* Calculate height excluding padding to allow svg to inherit */
+            width: calc(var(--height-topLevel) - 14px);
+            height: calc(var(--height-topLevel) - 14px);
+            flex-shrink: 0;
+            border-radius: 8px;
+            padding: 7px;
+            background-color: $panel-actions;
+
+            svg {
+                width: inherit;
+                height: inherit;
+                display: block;
+                color: $secondary-content;
+            }
+        }
+
+        &.mx_SpaceButton_new .mx_SpaceButton_icon {
+            background-color: unset;
+
+            svg {
+                color: $primary-content;
+                transition: all 0.2s ease-in-out; /* TODO transition */
+            }
+        }
+
+        &.mx_SpaceButton_newCancel .mx_SpaceButton_icon svg {
+            transform: rotate(45deg);
+        }
+
+        .mx_SpaceButton_menuButton {
+            width: 16px;
+            height: 16px;
+            padding: var(--cpd-space-0-5x);
+            flex-shrink: 0;
+            margin-top: auto;
+            margin-bottom: auto;
+            display: none;
+            position: absolute;
+            right: 4px;
+
+            svg {
+                width: inherit;
+                height: inherit;
+                display: block;
+                color: $primary-content;
+            }
+        }
+    }
+
+    .mx_SpaceTreeLevel {
+        display: flex;
+        flex-direction: column;
+        max-width: 250px;
+        min-width: 0;
+        flex-grow: 1;
+
+        .mx_SpaceTreeLevel {
+            /* Indent subspaces */
+            padding-left: 16px;
+        }
+    }
+
+    .mx_SpaceButton_avatarWrapper {
+        position: relative;
+        line-height: 0;
+    }
+
+    .mx_SpacePanel_badgeContainer {
+        /* Create a flexbox to make aligning dot badges easier */
+        display: flex;
+        align-items: center;
+        position: absolute;
+        right: -3px;
+        top: -3px;
+
+        .mx_NotificationBadge {
+            margin: 0 2px; /* centering */
+            background-clip: padding-box;
+        }
+
+        .mx_NotificationBadge_dot {
+            /* make the smaller dot occupy the same width for centering */
+            margin: 0 -1px 0 0;
+            border: 3px solid $spacePanel-bg-color;
+        }
+
+        .mx_NotificationBadge_2char,
+        .mx_NotificationBadge_3char {
+            margin: -5px -5px 0 0;
+            border: 2px solid $spacePanel-bg-color;
+        }
+    }
+
+    .mx_SpaceButton:hover,
+    .mx_SpaceButton:focus-within,
+    .mx_SpaceButton_hasMenuOpen {
+        &:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton {
+            display: block;
+        }
+    }
+
+    .mx_SpaceItem:not(.mx_SpaceItem_new) {
+        .mx_SpaceButton:hover,
+        .mx_SpaceButton:focus-within,
+        .mx_SpaceButton_hasMenuOpen {
+            &:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_name {
+                max-width: calc(100% - 56px);
+            }
+        }
+    }
+
+    /* root space buttons are bigger and not indented */
+    & > .mx_AutoHideScrollbar {
+        flex: 1;
+        padding: 0 0 16px 0;
+        scrollbar-gutter: stable;
+
+        &.mx_IndicatorScrollbar_topOverflow {
+            mask-image: linear-gradient(to bottom, transparent, black 16px);
+        }
+
+        &.mx_IndicatorScrollbar_bottomOverflow {
+            mask-image: linear-gradient(
+                to top,
+                transparent,
+                rgb(255, 255, 255, 30%) 4px,
+                rgb(255, 255, 255, 55%) 8px,
+                rgb(255, 255, 255, 75%) 12px,
+                black 16px
+            );
+        }
+
+        &.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow {
+            /* This stacks two gradients on top of one another, which lets us
+               have a fixed pixel offset from both top and bottom for the colour stops.
+               Note the top fade is much smaller because the spaces start close to the top,
+               so otherwise a large gradient suddenly appears when you scroll down.
+             */
+            mask-image:
+                linear-gradient(to bottom, transparent, black 16px),
+                linear-gradient(
+                    to top,
+                    transparent,
+                    rgb(255, 255, 255, 30%) 4px,
+                    rgb(255, 255, 255, 55%) 8px,
+                    rgb(255, 255, 255, 75%) 12px,
+                    black 16px
+                );
+            mask-position:
+                0% 0%,
+                0% 100%;
+            mask-size:
+                calc(100% - 10px) 50%,
+                calc(100% - 10px) 50%;
+            mask-repeat: no-repeat;
+        }
+    }
+}
+
+.mx_SpacePanel_contextMenu {
+    max-width: 360px;
+
+    .mx_SpacePanel_contextMenu_header {
+        margin: 12px 16px 12px;
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-15px;
+        line-height: $font-18px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .mx_SpacePanel_contextMenu_separatorLabel {
+        color: $tertiary-content;
+        font-size: $font-10px;
+        line-height: $font-12px;
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+}
+
+.mx_SpacePanel_sharePublicSpace {
+    margin: 0;
+}
+
+.mx_SpacePanel_Tooltip_KeyboardShortcut {
+    kbd {
+        font-family: inherit;
+        text-transform: capitalize;
+    }
+}

apps/web/res/css/structures/_SpacePillButton.pcss

@@ -0,0 +1,48 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SpacePillButton {
+    position: relative;
+    padding: 16px 32px 16px 72px;
+    width: 432px;
+    box-sizing: border-box;
+    border-radius: 8px;
+    border: 1px solid $input-border-color;
+    font-size: $font-17px;
+    font-weight: var(--cpd-font-weight-semibold);
+    margin: 20px 0;
+
+    > div {
+        margin-top: 4px;
+        font-weight: normal;
+        font-size: $font-15px;
+        color: $secondary-content;
+    }
+
+    svg {
+        position: absolute;
+        content: "";
+        width: 28px;
+        height: 28px;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 22px;
+        color: $tertiary-content;
+    }
+
+    &:hover {
+        border-color: var(--cpd-color-bg-action-primary-rest);
+
+        svg {
+            color: var(--cpd-color-icon-primary);
+        }
+
+        > span {
+            color: $primary-content;
+        }
+    }
+}

apps/web/res/css/structures/_SpaceRoomView.pcss

@@ -0,0 +1,224 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SpaceRoomView {
+    --innerWidth: 428px;
+
+    overflow-y: auto;
+    flex: 1;
+
+    .mx_MainSplit > div:first-child {
+        padding: 80px 60px;
+        flex-grow: 1;
+        max-height: 100%;
+        overflow-y: auto;
+
+        h1 {
+            margin: 0;
+            font-size: $font-24px;
+            font-weight: var(--cpd-font-weight-semibold);
+            color: $primary-content;
+            width: max-content;
+        }
+
+        .mx_SpaceRoomView_description {
+            font-size: $font-15px;
+            color: $secondary-content;
+            margin-top: 12px;
+            margin-bottom: 24px;
+            max-width: var(--innerWidth);
+        }
+
+        .mx_AddExistingToSpace {
+            max-width: var(--innerWidth);
+
+            .mx_AddExistingToSpace_content {
+                height: calc(100vh - 360px);
+                max-height: 400px;
+            }
+        }
+
+        .mx_SpaceRoomView_buttons {
+            display: block;
+            margin-top: 44px;
+            width: var(--innerWidth);
+            text-align: right; /* button alignment right */
+
+            .mx_AccessibleButton_hasKind {
+                padding: 8px 22px;
+                margin-left: 16px;
+            }
+
+            input.mx_AccessibleButton {
+                border: none; /* override default styles */
+            }
+        }
+
+        .mx_Field {
+            max-width: var(--innerWidth);
+
+            & + .mx_Field {
+                margin-top: 28px;
+            }
+        }
+
+        .mx_SpaceRoomView_errorText {
+            font-weight: var(--cpd-font-weight-semibold);
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $alert;
+            margin-bottom: 28px;
+        }
+
+        .mx_AccessibleButton_disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    .mx_SpaceRoomView_landing {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+
+        .mx_SpaceRoomView_landing_header {
+            display: flex;
+            justify-content: space-between;
+
+            .mx_BaseAvatar {
+                width: 80px;
+            }
+        }
+
+        .mx_SpaceRoomView_landing_name {
+            margin: 24px 0 16px;
+            font-size: $font-15px;
+            color: $secondary-content;
+
+            > span {
+                display: flex;
+                flex-flow: column;
+                gap: 12px 0;
+
+                h1 {
+                    display: inline-block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    width: 100%;
+                }
+            }
+
+            .mx_SpaceRoomView_landing_inviter {
+                .mx_BaseAvatar {
+                    margin-right: 4px;
+                    vertical-align: middle;
+                }
+            }
+        }
+
+        .mx_SpaceRoomView_landing_infoBar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            flex-wrap: wrap;
+            line-height: $font-24px;
+
+            .mx_SpaceRoomView_landing_infoBar_interactive {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                gap: 12px 12px;
+
+                .mx_FacePile {
+                    display: inline-block;
+                    cursor: pointer;
+                    /* For enhanced visibility under contrast control */
+                    outline: 1px solid transparent;
+                }
+
+                .mx_SpaceRoomView_landing_inviteButton,
+                .mx_SpaceRoomView_landing_settingsButton {
+                    position: relative;
+
+                    svg {
+                        position: absolute;
+                    }
+                }
+
+                .mx_SpaceRoomView_landing_inviteButton {
+                    padding: 4px 18px 4px 40px;
+                    height: min-content;
+
+                    svg {
+                        left: 8px;
+                        height: 16px;
+                        width: 16px;
+                        color: var(--cpd-color-icon-on-solid-primary);
+                    }
+                }
+
+                .mx_SpaceRoomView_landing_settingsButton {
+                    width: 24px;
+                    height: 24px;
+
+                    svg {
+                        left: 0;
+                        top: 0;
+                        height: 24px;
+                        width: 24px;
+                        color: $tertiary-content;
+                    }
+                }
+            }
+        }
+
+        .mx_SpaceRoomView_landing_topic {
+            font-size: $font-15px;
+            margin-top: 12px;
+            margin-bottom: 16px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        .mx_SearchBox {
+            margin: 0 0 20px;
+            flex: 0;
+        }
+    }
+
+    .mx_SpaceRoomView_inviteTeammates {
+        .mx_SpaceRoomView_inviteTeammates_buttons {
+            color: $secondary-content;
+            margin-top: 28px;
+
+            .mx_AccessibleButton {
+                position: relative;
+                display: inline-block;
+                padding-left: 32px;
+                line-height: 24px; /* to center icons */
+                color: var(--cpd-color-text-primary);
+                font-weight: var(--cpd-font-weight-semibold);
+                text-decoration: underline;
+
+                svg {
+                    position: absolute;
+                    height: 24px;
+                    width: 24px;
+                    top: 0;
+                    left: 0;
+                    color: var(--cpd-color-icon-primary);
+                }
+
+                & + .mx_AccessibleButton {
+                    margin-left: 32px;
+                }
+            }
+        }
+    }
+}

apps/web/res/css/structures/_SplashPage.pcss

@@ -0,0 +1,41 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SplashPage {
+    position: relative;
+    height: 100%;
+
+    &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: -1;
+        opacity: 0.6;
+        background-image:
+            radial-gradient(
+                53.85% 66.75% at 87.55% 0%,
+                hsl(250deg, 76%, 71%, 0.261) 0%,
+                hsl(250deg, 100%, 88%, 0) 100%
+            ),
+            radial-gradient(41.93% 41.93% at 0% 0%, hsl(222deg, 29%, 20%, 0.28) 0%, hsl(250deg, 100%, 88%, 0) 100%),
+            radial-gradient(100% 100% at 0% 0%, hsl(250deg, 100%, 88%, 0.174) 0%, hsl(0deg, 100%, 86%, 0) 100%),
+            radial-gradient(106.35% 96.26% at 100% 0%, hsl(250deg, 100%, 88%, 0.4) 0%, hsl(167deg, 76%, 82%, 0) 100%);
+        /* blur to reduce color banding issues due to alpha-blending multiple gradients */
+        filter: blur(8px);
+        inset: -9px;
+        mask:
+            /* mask to dither resulting combined gradient */
+            url("/res/img/noise.png"),
+            /* gradient to apply different amounts of dithering to different parts of the gradient */
+            linear-gradient(
+                    to bottom,
+                    /* 10% dithering at the top */ rgb(0, 0, 0, 0.9) 20%,
+                    /* 80% dithering at the bottom */ rgb(0, 0, 0, 0.2) 100%
+                );
+    }
+}

apps/web/res/css/structures/_TabbedView.pcss

@@ -0,0 +1,143 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2019 New Vector Ltd
+Copyright 2017 Travis Ralston
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_TabbedView {
+    margin: 0;
+    padding: 0 0 0 var(--cpd-space-8x);
+    display: flex;
+    flex-direction: column;
+    inset: 0;
+    margin-top: 8px;
+}
+
+.mx_TabbedView_tabsOnLeft {
+    flex-direction: column;
+    position: absolute;
+
+    .mx_TabbedView_tabLabels {
+        width: 220px;
+        max-width: 220px;
+        position: fixed;
+        margin: 0; /* Remove the default value */
+        padding: 0; /* Remove the default value */
+    }
+
+    .mx_TabbedView_tabPanel {
+        margin-left: 280px; /* 220px sidebar + 60px padding */
+        flex-direction: column;
+    }
+
+    .mx_TabbedView_tabLabel:hover,
+    .mx_TabbedView_tabLabel_active {
+        color: $tab-label-active-fg-color;
+    }
+
+    .mx_TabbedView_tabLabel_active {
+        background-color: var(--cpd-color-bg-subtle-secondary);
+        /* For enhanced visibility under contrast control */
+        outline: 1px solid transparent;
+    }
+}
+
+.mx_TabbedView_tabsOnTop {
+    flex-direction: column;
+
+    .mx_TabbedView_tabLabels {
+        display: flex;
+        margin-bottom: 8px;
+    }
+
+    .mx_TabbedView_tabLabel {
+        padding-left: 0px;
+        padding-right: 52px;
+
+        .mx_TabbedView_tabLabel_text {
+            font-size: 15px;
+            color: $tertiary-content;
+        }
+    }
+
+    .mx_TabbedView_tabPanel {
+        flex-direction: row;
+    }
+
+    .mx_TabbedView_tabLabel_active {
+        color: $accent;
+        .mx_TabbedView_tabLabel_text {
+            color: $accent;
+        }
+    }
+}
+
+.mx_TabbedView_tabLabels {
+    color: $tab-label-fg-color;
+}
+
+.mx_TabbedView_tabLabel {
+    display: flex;
+    align-items: center;
+    vertical-align: text-top;
+    cursor: pointer;
+    padding-block: var(--cpd-space-2x);
+    padding-inline: var(--cpd-space-3x) var(--cpd-space-4x);
+    box-sizing: border-box;
+    min-block-size: 40px;
+    min-inline-size: 40px;
+    border-radius: 24px;
+    font: var(--cpd-font-body-md-medium);
+    position: relative;
+    transition:
+        color 0.1s,
+        background-color 0.1s;
+
+    svg {
+        width: 20px;
+        height: 20px;
+        margin-right: var(--cpd-space-3x);
+    }
+}
+
+.mx_TabbedView_tabLabel_text {
+    vertical-align: middle;
+}
+
+.mx_TabbedView_tabPanel {
+    flex-grow: 1;
+    display: flex;
+    min-height: 0; /* firefox */
+}
+
+.mx_TabbedView_tabPanelContent {
+    flex-grow: 1;
+    overflow: auto;
+    min-height: 0; /* firefox */
+}
+
+/* Hide the labels on tabs, showing only the icons, on narrow viewports. */
+@media (max-width: 1024px) {
+    .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive {
+        .mx_TabbedView_tabLabel_text {
+            display: none;
+        }
+        .mx_TabbedView_tabPanel {
+            margin-left: 72px; /* 40px sidebar + 32px padding */
+        }
+        .mx_TabbedView_tabLabels {
+            width: auto;
+        }
+        .mx_TabbedView_tabLabel {
+            padding-inline: 0 0;
+            justify-content: center;
+            svg {
+                margin-right: 0;
+            }
+        }
+    }
+}

apps/web/res/css/structures/_ThreadsActivityCentre.pcss

@@ -0,0 +1,102 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_ThreadsActivityCentre_container {
+    display: flex;
+}
+
+.mx_ThreadsActivityCentreButton {
+    /* !important override compound */
+    border-radius: 8px !important;
+    margin: 18px auto auto auto;
+
+    &.expanded {
+        /**
+         * override compound default background color when hovered
+         * should disappear when the space panel will be migrated to compound
+         */
+        background-color: transparent !important;
+
+        /* align with settings icon */
+        margin-left: 21px;
+        margin-right: 8px;
+        width: 100%;
+
+        /**
+         * modify internal css of the compound component
+         * dirty but we need to add the `Threads` label into the indicator icon button
+         **/
+        & > div {
+            display: flex;
+            align-items: center;
+
+            &::before {
+                inline-size: 8px;
+                block-size: 8px;
+                left: 17px;
+            }
+        }
+
+        & .mx_ThreadsActivityCentreButton_Icon {
+            /* align with settings label */
+            margin-right: 14px;
+            /* required to set the icon width when into a flex container */
+            width: 24px;
+            flex-shrink: 0;
+        }
+
+        & .mx_ThreadsActivityCentreButton_Text {
+            /* !important override compound  */
+            color: $secondary-content !important;
+        }
+    }
+
+    &:not(.expanded) {
+        &:hover,
+        &:hover .mx_ThreadsActivityCentreButton_Icon {
+            /* !important override compound */
+            background-color: $quaternary-content !important;
+            fill: $primary-content;
+        }
+    }
+
+    & .mx_ThreadsActivityCentreButton_Icon {
+        fill: $secondary-content;
+    }
+}
+
+.mx_ThreadsActivityCentre_rows {
+    overflow-y: scroll;
+    /* Let some space at the top and the bottom of the pop-up */
+    max-height: calc(100vh - 200px);
+
+    .mx_ThreadsActivityCentreRow {
+        height: 48px;
+
+        /* Make the label of the MenuItem stay on one line and truncate with ellipsis if needed */
+        & > span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            /* Arbitrary size, keep the TAC as the wanted width */
+            width: 202px;
+        }
+
+        /* Hide the notification badge on hover — compound's `nav-hint ~ *` rule would normally
+         * do this, but the app-web CSS layer overrides compound-web regardless of specificity. */
+        &:hover .mx_NotificationBadge {
+            display: none;
+        }
+    }
+}
+
+.mx_ThreadsActivityCentre_emptyCaption {
+    padding-left: 16px;
+    padding-right: 16px;
+    font-size: 13px;
+}

apps/web/res/css/structures/_ToastContainer.pcss

@@ -0,0 +1,112 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ToastContainer {
+    position: absolute;
+    top: 0;
+    left: 70px;
+    z-index: 101;
+    padding: 4px;
+    display: grid;
+    grid-template-rows: 1fr 28px 8px;
+
+    &.mx_ToastContainer_stacked::before {
+        content: "";
+        margin: 0 var(--cpd-space-1-5x);
+        grid-row: 2 / -1;
+        grid-column: 1;
+        background-color: $system;
+        box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.5);
+        border-radius: var(--cpd-space-6x);
+    }
+
+    .mx_Toast_toast {
+        grid-row: 1 / 3;
+        grid-column: 1;
+        background-color: var(--cpd-color-bg-canvas-default);
+        color: $primary-content;
+        box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
+        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
+        border-radius: calc(var(--cpd-space-6x) - var(--cpd-border-width-1));
+        overflow: hidden;
+        display: grid;
+        grid-template-columns: 20px 1fr auto;
+        column-gap: var(--cpd-space-2x);
+        row-gap: 4px;
+        align-items: center;
+        padding: calc(var(--cpd-space-5x) - var(--cpd-border-width-1));
+
+        &.mx_Toast_hasIcon {
+            svg {
+                width: 20px;
+                height: 20px;
+                grid-column: 1;
+            }
+
+            .mx_Toast_title {
+                grid-column: 2;
+            }
+
+            .mx_Toast_closebutton {
+                grid-column: 3;
+            }
+        }
+        &:not(.mx_Toast_hasIcon) .mx_Toast_title {
+            grid-column: 1 / -1;
+        }
+
+        .mx_Toast_title {
+            display: flex;
+            align-items: center;
+            column-gap: var(--cpd-space-2x);
+            width: 100%;
+            box-sizing: border-box;
+
+            h2 {
+                margin: 0;
+                font: var(--cpd-font-body-lg-semibold);
+                display: inline;
+                width: auto;
+            }
+        }
+
+        .mx_Toast_body {
+            grid-column: 1 / -1;
+            grid-row: 2;
+        }
+
+        .mx_Toast_buttons {
+            display: flex;
+            justify-content: flex-end;
+            column-gap: var(--cpd-space-2x);
+
+            .mx_AccessibleButton {
+                min-width: 96px;
+                box-sizing: border-box;
+            }
+        }
+
+        .mx_Toast_description {
+            max-width: 272px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin: var(--cpd-space-1x) 0 11px 0;
+            color: $secondary-content;
+            font: var(--cpd-font-body-sm-regular);
+
+            a {
+                text-decoration: none;
+            }
+        }
+
+        .mx_Toast_deviceID {
+            font-size: $font-10px;
+        }
+    }
+}

apps/web/res/css/structures/_UploadBar.pcss

@@ -0,0 +1,55 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 , 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UploadBar {
+    /* line up with the shield area in the composer */
+    padding: 5px 21px 0;
+    position: relative;
+
+    display: grid;
+    grid-template:
+        "icon     filename cancel" auto
+        "progress progress progress" auto
+        / min-content auto min-content;
+    gap: var(--cpd-space-1-5x);
+
+    & > svg {
+        grid-area: icon;
+        height: 18px;
+        width: 18px;
+        color: $muted-fg-color;
+        align-self: center;
+    }
+
+    .mx_UploadBar_filename {
+        grid-area: filename;
+        color: $muted-fg-color;
+        position: relative;
+        font-size: $font-15px;
+        vertical-align: middle;
+    }
+
+    .mx_UploadBar_cancel {
+        grid-area: cancel;
+        height: 16px;
+        width: 16px;
+        color: $muted-fg-color;
+        align-self: center;
+    }
+
+    .mx_ProgressBar {
+        grid-area: progress;
+        width: 100%;
+    }
+}
+
+.mx_ThreadView {
+    .mx_UploadBar {
+        padding-left: 0;
+    }
+}

apps/web/res/css/structures/_ViewSource.pcss

@@ -0,0 +1,44 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ViewSource {
+    pre {
+        font-size: $font-12px;
+        padding: 0.5em 1em;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+    }
+
+    .mx_ViewSource_header {
+        border-bottom: 1px solid $quinary-content;
+        padding-bottom: $spacing-12;
+        margin-bottom: $spacing-12;
+        font-family: monospace;
+
+        .mx_CopyableText {
+            word-break: break-all;
+        }
+    }
+
+    .mx_ViewSource_heading {
+        font-size: $font-17px;
+        font-weight: 400;
+        color: $primary-content;
+        margin-top: $spacing-12;
+    }
+
+    .mx_ViewSource_details {
+        margin-top: $spacing-12;
+    }
+
+    .mx_CopyableText_border {
+        box-sizing: border-box;
+        width: 100%;
+    }
+}

apps/web/res/css/structures/auth/_CompleteSecurity.pcss

@@ -0,0 +1,53 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_CompleteSecurity_header {
+    display: flex;
+    align-items: center;
+}
+
+.mx_E2EIcon.mx_CompleteSecurity_headerIcon {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+    display: inline-block;
+}
+
+.mx_E2EIcon.mx_CompleteSecurity_heroIcon {
+    width: 128px;
+    height: 128px;
+    margin: 0 auto;
+}
+
+.mx_CompleteSecurity_skip {
+    @mixin customisedCancelButton;
+    position: absolute;
+    right: 24px;
+}
+
+.mx_CompleteSecurity_body {
+    font-size: $font-15px;
+}
+
+.mx_CompleteSecurity_waiting {
+    color: $tertiary-content;
+}
+
+.mx_CompleteSecurity_actionRow {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: $font-28px;
+
+    .mx_AccessibleButton {
+        margin-inline-start: 18px;
+
+        &.warning {
+            color: $alert;
+        }
+    }
+}

apps/web/res/css/structures/auth/_ConfirmSessionLockTheftView.pcss

@@ -0,0 +1,22 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019-2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ConfirmSessionLockTheftView {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_ConfirmSessionLockTheftView_body {
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    align-items: center;
+}

apps/web/res/css/structures/auth/_Login.pcss

@@ -0,0 +1,87 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_Login_submit {
+    width: 100%;
+    margin-top: 24px;
+    margin-bottom: 24px;
+}
+
+.mx_Login_loader {
+    display: inline;
+    position: relative;
+    top: 2px;
+    left: 8px;
+}
+
+.mx_Login_loader .mx_Spinner {
+    display: inline;
+}
+
+.mx_Login_loader .mx_Spinner img {
+    width: 16px;
+    height: 16px;
+}
+
+.mx_Login_error {
+    color: $alert;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.mx_Login_error.mx_Login_serverError {
+    text-align: left;
+    font-weight: normal;
+}
+
+.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
+    color: #ff8d13; /* Only used here */
+}
+
+.mx_Login_type_container {
+    display: flex;
+    align-items: center;
+    color: $authpage-primary-color;
+
+    .mx_Field {
+        margin: 0;
+    }
+}
+
+.mx_Login_type_label {
+    flex: 1;
+}
+
+.mx_Login_underlinedServerName {
+    width: max-content;
+    border-bottom: 1px dashed $accent;
+}
+
+div.mx_AccessibleButton_kind_link.mx_Login_forgot {
+    display: block;
+    margin-top: 24px;
+
+    &.mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+    }
+}
+
+.mx_Login_spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    padding: 14px;
+}
+
+.mx_Login_fullWidthButton {
+    width: 100%;
+    margin-bottom: 16px;
+}

apps/web/res/css/structures/auth/_LoginSplashView.pcss

@@ -0,0 +1,43 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015-2024 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LoginSplashView_migrationProgress {
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .mx_ProgressBar {
+        height: 8px;
+        width: 600px;
+
+        @mixin ProgressBarBorderRadius 8px;
+    }
+}
+
+.mx_LoginSplashView_splashButtons {
+    text-align: center;
+    width: 100%;
+    position: absolute;
+    bottom: 30px;
+}
+
+.mx_LoginSplashView_syncError {
+    color: $accent-fg-color;
+    background-color: #df2a8b; /* Only used here */
+    border-radius: 5px;
+    display: table;
+    padding: 30px;
+    position: absolute;
+    top: 100px;
+    left: 50%;
+    transform: translateX(-50%);
+}

apps/web/res/css/structures/auth/_MobileRegistration.pcss

@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MobileRegister_body {
+    padding: 32px;
+    height: 100vh;
+    overflow-y: auto;
+    box-sizing: border-box;
+}

apps/web/res/css/structures/auth/_Registration.pcss

@@ -0,0 +1,45 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_Register_mainContent {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: 270px;
+
+    p {
+        font: var(--cpd-font-body-md-regular);
+        color: $authpage-primary-color;
+
+        &.secondary {
+            color: $authpage-secondary-color;
+        }
+    }
+
+    > img:first-child {
+        margin-bottom: 16px;
+        width: max-content;
+    }
+
+    .mx_Login_submit {
+        margin-bottom: 0;
+    }
+}
+
+.mx_Register_footerActions {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-top: 16px;
+    margin-top: 16px;
+    border-top: 1px solid rgb(141, 151, 165, 0.2);
+
+    > * {
+        flex-basis: content;
+    }
+}

apps/web/res/css/structures/auth/_SessionLockStolenView.pcss

@@ -0,0 +1,22 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SessionLockStolenView {
+    h1 {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-32px;
+        text-align: center;
+    }
+
+    h2 {
+        margin: 0;
+        font-weight: 500;
+        font-size: $font-24px;
+        text-align: center;
+    }
+}

apps/web/res/css/structures/auth/_SetupEncryptionBody.pcss

@@ -0,0 +1,11 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SetupEncryptionBody {
+    width: 600px;
+}