/* Mobile additions for the self-hosted Element Web client. */

#bf-mobile-nav-toggle,
#bf-mobile-nav-backdrop {
    display: none;
}

@media (max-width: 700px) {
    html,
    body,
    #matrixchat,
    .mx_MatrixChat_wrapper,
    .mx_MatrixChat {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 100%;
        height: 100dvh;
    }

    body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    #bf-mobile-nav-toggle:not([hidden]) {
        display: grid;
        place-items: center;
        position: fixed;
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        z-index: 5002;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        color: white;
        background: var(--cpd-color-bg-action-primary-rest, #0dbd8b);
        box-shadow: 0 4px 18px rgb(0 0 0 / 32%);
        font: 700 26px/1 system-ui, sans-serif;
        cursor: pointer;
        touch-action: manipulation;
    }

    #bf-mobile-nav-toggle:focus-visible {
        outline: 3px solid var(--cpd-color-border-focused, #0dbd8b);
        outline-offset: 3px;
    }

    #bf-mobile-nav-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 4998;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgb(0 0 0 / 42%);
    }

    .mx_MatrixChat .mx_SpacePanel,
    .mx_MatrixChat .mx_Separator {
        display: none !important;
    }

    /* Turn the room list into an off-canvas drawer. */
    .mx_MatrixChat .mx_LeftPanel_panel:has(.mx_LeftPanel_outerWrapper),
    .mx_MatrixChat > .mx_LeftPanel_outerWrapper {
        position: fixed !important;
        inset: 0 auto 0 0;
        z-index: 4999;
        width: min(88vw, 360px) !important;
        max-width: min(88vw, 360px) !important;
        min-width: 0 !important;
        height: 100dvh !important;
        flex: none !important;
        transform: translateX(-102%);
        transition: transform 180ms ease-out;
        pointer-events: none;
        box-shadow: 8px 0 28px rgb(0 0 0 / 24%);
        background: var(--cpd-color-bg-canvas-default, white);
    }

    html.bf-mobile-nav-open .mx_MatrixChat .mx_LeftPanel_panel:has(.mx_LeftPanel_outerWrapper),
    html.bf-mobile-nav-open .mx_MatrixChat > .mx_LeftPanel_outerWrapper {
        transform: translateX(0);
        pointer-events: auto;
    }

    .mx_LeftPanel_outerWrapper,
    .mx_LeftPanel_wrapper,
    .mx_LeftPanel_wrapper--user,
    .mx_LeftPanel {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Let the active page use every remaining pixel. */
    .mx_MatrixChat .mx_LeftPanel_panel:has(.mx_RoomView_wrapper),
    .mx_RoomView_wrapper,
    .mx_RoomView,
    .mx_MainSplit,
    .mx_RoomView_body,
    .mx_RoomView_timeline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }

    /* Details, members and threads become a full-screen layer. */
    .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
        position: absolute !important;
        inset: 0 !important;
        z-index: 3000;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        background: var(--cpd-color-bg-canvas-default, white);
    }

    .mx_RightPanel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-left: 0;
    }

    .mx_RoomHeader {
        padding-inline: 8px;
    }

    .mx_RoomHeader_info {
        min-width: 0;
        padding-right: 4px;
    }

    .mx_RoomHeader .mx_FacePile {
        display: none;
    }

    :root {
        --RoomView_MessageList-padding: 8px;
    }

    .mx_MessageComposer_wrapper {
        padding-left: 12px;
        padding-right: 8px;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mx_MessageComposer_avatar,
    .mx_MessageComposer_e2eIconWrapper {
        display: none !important;
    }

    .mx_MessageComposer_actions {
        gap: 2px;
    }

    /* Dialogs and settings must not retain desktop minimum widths. */
    .mx_Dialog {
        box-sizing: border-box;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 8px !important;
    }

    /* The first-login security / emoji verification flow reuses the desktop
       auth card. Remove its fixed desktop widths and oversized dark header. */
    .mx_AuthPage {
        min-height: 100dvh;
        height: 100dvh;
    }

    .mx_AuthPage_modal {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        background: transparent;
    }

    .mx_AuthPage_modalContent {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        border-radius: 0;
    }

    .mx_AuthBody,
    .mx_CompleteSecurityBody,
    .mx_SetupEncryptionBody {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 0;
        box-sizing: border-box;
    }

    .mx_AuthBody {
        padding: 20px 16px 28px;
    }

    .mx_CompleteSecurityBody {
        padding: 16px 16px 32px;
    }

    .mx_CompleteSecurity_header {
        max-width: 100%;
        padding-right: 36px;
        font-size: 20px;
        line-height: 1.25;
    }

    .mx_CompleteSecurity_skip {
        right: 12px;
    }

    .mx_CompleteSecurity_heroIcon {
        width: 88px !important;
        height: 88px !important;
    }

    .mx_CompleteSecurity_actionRow {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: stretch;
        margin-top: 20px;

        .mx_AccessibleButton {
            flex: 1 1 140px;
            margin-inline-start: 0;
        }
    }

    .mx_VerificationShowSas_emojiSas {
        margin: 12px 0;
        gap: 8px;
    }

    .mx_VerificationShowSas_buttonRow {
        gap: 8px;
    }

    .mx_UserSettingsDialog,
    .mx_RoomSettingsDialog,
    .mx_SpaceSettingsDialog,
    .mx_SpacePreferencesDialog {
        width: calc(100vw - 16px) !important;
        height: calc(100dvh - 16px) !important;
    }

    .mx_TabbedView {
        padding-left: 8px;
    }

    .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabPanel {
        margin-left: 48px;
        min-width: 0;
    }

    .mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab,
    .mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
    .mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab,
    .mx_SpacePreferencesDialog .mx_TabbedView .mx_SettingsTab {
        box-sizing: border-box;
        min-width: 0 !important;
        width: 100%;
        padding-right: 12px;
        padding-bottom: 48px;
    }

    .mx_ContextualMenu,
    [role="menu"],
    [role="dialog"] {
        max-width: calc(100vw - 16px) !important;
    }

    table {
        max-width: 100%;
    }

    img,
    video,
    canvas {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .mx_RoomHeader .mx_BaseAvatar {
        display: none;
    }

    .mx_MessageComposer_button {
        margin-inline: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx_MatrixChat .mx_LeftPanel_panel:has(.mx_LeftPanel_outerWrapper),
    .mx_MatrixChat > .mx_LeftPanel_outerWrapper {
        transition: none;
    }
}

/* The private mobile presentation has one conversation only. */
@media (max-width: 700px) {
    html.bf-mobile-private-mode,
    html.bf-mobile-private-mode body {
        overflow: hidden;
        overscroll-behavior-x: none;
        touch-action: pan-y;
    }

    html.bf-mobile-private-mode #bf-mobile-nav-toggle,
    html.bf-mobile-private-mode #bf-mobile-nav-backdrop,
    html.bf-mobile-private-mode .mx_SpacePanel,
    html.bf-mobile-private-mode .mx_Separator,
    html.bf-mobile-private-mode .mx_LeftPanel_panel:has(.mx_LeftPanel_outerWrapper),
    html.bf-mobile-private-mode > body > .mx_LeftPanel_outerWrapper,
    html.bf-mobile-private-mode .mx_HomePage {
        display: none !important;
    }

    html.bf-mobile-private-mode .mx_MatrixChat .mx_LeftPanel_panel:has(.mx_RoomView_wrapper),
    html.bf-mobile-private-mode .mx_RoomView_wrapper,
    html.bf-mobile-private-mode .mx_RoomView,
    html.bf-mobile-private-mode .mx_MainSplit,
    html.bf-mobile-private-mode .mx_RoomView_body,
    html.bf-mobile-private-mode .mx_RoomView_timeline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        touch-action: pan-y;
        overscroll-behavior-x: none;
    }

    /* Keep the room name and call controls in the compact header. Clicking
       the room name opens the summary/settings panel. */
    html.bf-mobile-private-mode .mx_RoomHeader > div:first-child,
    html.bf-mobile-private-mode .mx_RoomHeader > button:not(.mx_RoomHeader_infoWrapper):not([data-bf-mobile-call-control="true"]),
    html.bf-mobile-private-mode .mx_RoomHeader > [role="button"]:not(.mx_RoomHeader_infoWrapper):not([data-bf-mobile-call-control="true"]) {
        display: none !important;
    }

    html.bf-mobile-private-mode .mx_RoomHeader [data-bf-mobile-call-control="true"] {
        display: inline-flex !important;
        flex: 0 0 auto;
    }

    html.bf-mobile-private-mode .mx_RoomHeader {
        min-height: 48px;
        height: 48px;
        padding: 0 12px;
        gap: 4px;
        touch-action: pan-y;
    }

    html.bf-mobile-private-mode .mx_RoomHeader_infoWrapper {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        text-align: center;
    }

    html.bf-mobile-private-mode .mx_RoomHeader_info {
        min-width: 0;
        padding: 0;
        text-align: center;
    }

    html.bf-mobile-private-mode .mx_RoomHeader_heading {
        justify-content: center;
    }

    html.bf-mobile-private-mode .mx_MessageComposer_wrapper,
    html.bf-mobile-private-mode .mx_RoomView_messagePanel {
        touch-action: pan-y;
        overscroll-behavior-x: none;
    }

    /* A summary/settings panel is opened from the conversation title and
       should replace the conversation on a phone, without a second column. */
    html.bf-mobile-private-mode .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
        position: absolute !important;
        inset: 0 !important;
        z-index: 3000;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        background: var(--cpd-color-bg-canvas-default, white);
    }
}