/* Local overrides for the pinned Element Web 1.12.33; desktop stays unchanged. */
#imming-mobile-toolbar { display: none; }
.imming-message-menu { display: none; }

/* Keep branding assets same-origin under the existing restrictive CSP. */
.mx_AuthPage { background: url('/imming/background.webp') center center / cover fixed !important; }
.mx_AuthPage .mx_AuthFooter { display: none !important; }
.mx_DefaultWelcome_logo { pointer-events: none; }
.mx_DefaultWelcome_logo img { content: url('/imming/logo.svg'); width: 64px; height: 64px; }
.mx_AuthHeaderLogo img { content: url('/imming/logo.svg'); width: 48px; height: 48px; }

@media (max-width: 767px), (max-width: 1100px) and (hover: none) and (pointer: coarse) {
    html, body {
        width: 100%;
        min-width: 0;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        touch-action: auto;
        overflow-x: hidden;
    }

    #matrixchat { max-width: 100%; overflow-x: hidden; }
    /* Hover-only portals can stay positioned outside a resized phone viewport. */
    [role="tooltip"], .mx_Tooltip,
    [data-radix-popper-content-wrapper]:has([role="tooltip"]) { display: none !important; }

    .mx_AuthPage {
        height: auto !important;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .mx_AuthPage .mx_AuthPage_modal {
        box-sizing: border-box;
        width: calc(100% - 24px) !important;
        min-width: 0 !important;
        max-width: 480px;
        margin: max(24px, env(safe-area-inset-top)) auto 32px !important;
        flex: 0 0 auto;
    }

    .mx_AuthPage .mx_AuthPage_modalContent {
        width: 100% !important;
        min-width: 0;
        flex-direction: column;
    }

    .mx_AuthPage_modalContent > div:has(> .mx_Welcome) {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 8px;
    }

    .mx_AuthPage .mx_Welcome {
        width: 100%;
        min-width: 0;
        padding: 28px 20px 20px;
        border-radius: 20px;
    }

    .mx_AuthPage .mx_DefaultWelcome,
    .mx_AuthPage .mx_DefaultWelcome_buttons {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .mx_AuthPage .mx_DefaultWelcome_buttons a {
        box-sizing: border-box;
        width: 100% !important;
        min-height: 44px;
    }

    .mx_AuthPage .mx_DefaultWelcome_buttons a[href$="#/register"] {
        display: none;
    }

    .mx_AuthPage .mx_DefaultWelcome h1 {
        font-size: clamp(22px, 6vw, 28px);
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .mx_AuthPage .mx_AuthHeader {
        width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        padding: 16px 24px;
    }

    .mx_AuthPage .mx_AuthBody {
        width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        padding: 24px !important;
    }

    .mx_AuthPage input, .mx_AuthPage select, .mx_AuthPage textarea {
        font-size: 16px;
        min-width: 0;
        box-sizing: border-box;
    }

    .mx_AuthPage .mx_AuthFooter {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 20px;
        width: 100%;
        margin-top: auto;
        padding: 20px 16px max(20px, env(safe-area-inset-bottom));
    }

    .mx_AuthPage .mx_AuthFooter a {
        display: block;
        margin: 0;
        white-space: normal;
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .mx_Dialog, .mx_ContextualMenu {
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
    }
    .mx_ContextualMenu > * { max-width: 100% !important; box-sizing: border-box; }

    .mx_MatrixChat_wrapper {
        position: relative;
        box-sizing: border-box;
        height: min(var(--imming-app-height, 100dvh), 100dvh);
        min-width: 0;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom);
    }

    #imming-mobile-toolbar {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 4px;
        min-height: 52px;
        padding: env(safe-area-inset-top) 8px 0;
        background: var(--cpd-color-bg-canvas-default, white);
        color: var(--cpd-color-text-primary, #17191c);
        border-bottom: 1px solid var(--cpd-color-bg-subtle-primary, #e5e7eb);
        z-index: 10;
    }

    #imming-mobile-toolbar button {
        flex: 0 0 auto;
        min-width: 48px;
        min-height: 44px;
        padding: 8px 12px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: inherit;
        font: inherit;
        font-size: 15px;
        touch-action: manipulation;
    }

    #imming-mobile-toolbar button:focus-visible {
        outline: 2px solid var(--cpd-color-text-action-accent, #007a64);
        outline-offset: -2px;
    }

    #imming-mobile-toolbar .imming-mobile-title {
        flex: 1;
        min-width: 0;
        font-size: 17px;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #imming-mobile-toolbar button[hidden] { display: none; }

    /* Use Element's real account trigger: Radix menus do not open from a synthetic click. */
    #imming-mobile-toolbar button[aria-label="打开账户菜单"] { display: none; }
    html[data-imming-mobile-view="list"] #imming-mobile-toolbar { padding-right: 56px; }
    html[data-imming-mobile-view="list"] #imming-mobile-toolbar [data-action="back"] { display: none; }
    html[data-imming-mobile-view="list"] .mx_SpacePanel {
        position: absolute !important;
        z-index: 15;
        top: calc(52px + env(safe-area-inset-top));
        bottom: 0;
        left: 0;
        height: auto !important;
        visibility: hidden;
        pointer-events: none;
        box-shadow: 8px 0 24px #0003;
    }
    html[data-imming-mobile-view="list"][data-imming-spaces="open"] .mx_SpacePanel {
        visibility: visible;
        pointer-events: auto;
    }
    html[data-imming-mobile-view="list"] .mx_SpacePanel .mx_UserMenu {
        position: fixed;
        top: calc(4px + env(safe-area-inset-top));
        right: 8px;
        z-index: 25;
        visibility: visible;
        pointer-events: auto;
    }
    html[data-imming-mobile-view="chat"] #imming-mobile-toolbar {
        position: absolute;
        top: env(safe-area-inset-top);
        left: 0;
        width: 64px;
        min-height: 64px;
        box-sizing: border-box;
        padding: 0 0 0 4px;
        background: transparent;
        border: 0;
        pointer-events: none;
    }
    html[data-imming-mobile-view="chat"] #imming-mobile-toolbar [data-action="back"] { pointer-events: auto; padding: 8px 4px; }
    html[data-imming-mobile-view="chat"] #imming-mobile-toolbar :is(.imming-mobile-title, [data-action="spaces"], [data-action="chat"]) { display: none; }
    /* The room/details panel already has its own back and close controls. */
    html[data-imming-mobile-view="chat"] .mx_MatrixChat_wrapper:has(.mx_RightPanel_ResizeWrapper) #imming-mobile-toolbar { visibility: hidden; }
    html[data-imming-mobile-view="chat"] .mx_MatrixChat_wrapper { padding-top: env(safe-area-inset-top); }

    .mx_MatrixChat { flex: 1 1 0; min-height: 0; }

    /* The upstream resizable desktop panels disable pinch zoom via pan-y. */
    .mx_MatrixChat > [data-group],
    .mx_MatrixChat [data-panel],
    .mx_LeftPanel_panel {
        touch-action: pan-x pan-y pinch-zoom !important;
    }

    html[data-imming-mobile-view] .mx_MatrixChat > [data-group] > [role="separator"],
    html[data-imming-mobile-view] .mx_SpacePanel_toggleCollapse {
        display: none !important;
    }

    html[data-imming-mobile-view="list"] .mx_MatrixChat > [data-group] > [data-panel]:not([data-testid="left-panel"]) {
        display: none !important;
    }

    html[data-imming-mobile-view="list"] [data-testid="left-panel"] {
        display: flex !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
    }

    html[data-imming-mobile-view="list"] .mx_SpacePanel {
        width: 56px !important;
        flex: 0 0 56px !important;
    }

    html[data-imming-mobile-view="list"] .mx_LeftPanel_outerWrapper,
    html[data-imming-mobile-view="list"] .mx_LeftPanel_wrapper,
    html[data-imming-mobile-view="list"] .mx_LeftPanel_wrapper--user {
        width: 100% !important;
        min-width: 0;
        max-width: 100% !important;
    }

    html[data-imming-mobile-view="chat"] .mx_MatrixChat > [data-group] > .mx_SpacePanel,
    html[data-imming-mobile-view="chat"] [data-testid="left-panel"] {
        display: none !important;
    }

    html[data-imming-mobile-view="chat"] .mx_MatrixChat > [data-group] > [data-panel]:not([data-testid="left-panel"]) {
        flex: 1 1 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .mx_RoomView .mx_RoomHeader { padding: 8px 8px 8px 64px; gap: 4px; }

    .mx_RoomView .mx_RoomHeader_name { min-width: 0; }

    .mx_RoomView .mx_MessageComposer {
        box-sizing: border-box;
        margin-right: 0;
        padding-bottom: 8px;
    }

    .mx_MessageComposer [contenteditable="true"] { font-size: 16px; }
    .mx_RoomView_statusArea, .mx_RoomView_statusAreaBox { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

    .mx_RightPanel_ResizeWrapper {
        position: absolute !important;
        inset: 0;
        z-index: 20;
        width: 100% !important;
        max-width: 100% !important;
        background: var(--cpd-color-bg-canvas-default, white);
    }

    .mx_ToastContainer {
        box-sizing: border-box;
        top: calc(60px + env(safe-area-inset-top)) !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px);
    }

    .mx_Toast_toast { box-sizing: border-box; max-width: 100%; }
    .mx_Toast_body { max-height: 45dvh; overflow-y: auto; }
    .mx_Toast_body [data-testid="toast-buttons"] { flex-wrap: wrap; gap: 8px; }

    .imming-mobile-floating {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top)) !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(var(--imming-app-height, 100dvh) - 88px) !important;
        box-sizing: border-box;
        overflow-y: auto;
    }

    .imming-mobile-floating > [role="dialog"],
    .imming-mobile-floating > [role="menu"] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mx_ContextualMenu {
        position: fixed !important;
        top: calc(60px + env(safe-area-inset-top)) !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(var(--imming-app-height, 100dvh) - 76px);
        overflow: auto;
        overflow-wrap: anywhere;
    }
    .mx_ContextualMenu .mx_SpacePillButton { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }

    .mx_Dialog {
        min-width: 0;
        max-height: calc(var(--imming-app-height, 100dvh) - 24px);
        padding: 24px 20px;
        overflow-y: auto;
        overflow-wrap: anywhere;
    }
    .mx_CompoundDialog .mx_Dialog { padding: 0; }
    .mx_Dialog:has(> .mx_Dialog_fixedWidth) { width: calc(100vw - 24px); }
    .mx_Dialog > .mx_Dialog_fixedWidth { box-sizing: border-box; min-width: 0; max-width: 100%; width: 100%; }
    .mx_Dialog input, .mx_Dialog textarea, .mx_Dialog select { max-width: 100%; min-width: 0; font-size: 16px; }
    .mx_Dialog_buttons .mx_Dialog_buttons_row { flex-wrap: wrap; gap: 8px; }
    .mx_Dialog_buttons button.mx_LegacyDialogButton { min-width: 96px !important; min-height: 44px; }
    .mx_UploadConfirmDialog { --MediaPreview-width: 100%; box-sizing: border-box; min-width: 0; width: 100%; max-width: 100%; }
    .mx_UploadConfirmDialog_previewOuter { width: 100%; max-width: 100%; }
    .mx_UploadConfirmDialog .mx_UploadConfirmDialog_previewInner { display: block; width: 100%; max-width: 100%; }
    .mx_UploadConfirmDialog_previewInner img { max-width: 100%; height: auto; max-height: 40dvh; object-fit: contain; }

    :is(.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog) {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: calc(min(var(--imming-app-height, 100dvh), 100dvh) - 24px);
        max-height: calc(min(var(--imming-app-height, 100dvh), 100dvh) - 24px);
        padding: 20px 16px 0;
        overflow: hidden;
    }
    .mx_Dialog_border:has(.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog) {
        box-sizing: border-box;
        width: calc(100% - 8px);
        max-width: 640px;
        padding: 4px;
    }
    .mx_Dialog:has(> :is(.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog)) {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        max-height: calc(min(var(--imming-app-height, 100dvh), 100dvh) - 16px);
        padding: 0;
        overflow: hidden;
    }
    .mx_SettingsDialog_content { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; }
    :is(.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog) .mx_Dialog_header {
        flex: 0 0 auto;
        min-width: 0;
        padding-bottom: 12px;
    }
    :is(.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog) .mx_Dialog_title {
        font-size: 22px;
        line-height: 1.3;
        padding-right: 36px;
    }
    :is(.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog) .mx_TabbedView {
        position: static;
        inset: auto;
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    :is(.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog) .mx_TabbedView_tabLabels {
        position: static;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        width: 100%;
        flex: 0 0 auto;
        padding: 8px 0;
    }
    :is(.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog) .mx_TabbedView_tabLabel {
        flex: 0 0 auto;
        width: auto;
        min-height: 44px;
        padding: 10px 12px;
        white-space: nowrap;
    }
    :is(.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog) .mx_TabbedView_tabLabel_text { display: inline; }
    :is(.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog) .mx_TabbedView_tabPanel {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        width: auto;
        margin: 0;
        padding: 16px 4px 24px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    :is(.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog) .mx_TabbedView .mx_SettingsTab {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        padding: 0 0 32px;
        overflow-wrap: anywhere;
    }
    .mx_SettingsTab_section { min-width: 0; }
    .mx_SettingsTab .mx_CopyableText { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
    .mx_SettingsTab .mx_CopyableText > :not(.mx_CopyableText_copyButton) { min-width: 0; flex: 1 1 0; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
    .mx_SettingsTab .mx_CopyableText_copyButton { flex: 0 0 32px; }
    .mx_SettingsTab .mx_DisambiguatedProfile { display: block; max-width: min(100%, calc(100vw - 144px)); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
    .mx_EncryptionUserSettingsTab .mx_SettingsSection_newUi { align-items: stretch; min-width: 0; }
    .mx_EncryptionUserSettingsTab .mx_SettingsSection_header { min-width: 0; max-width: 100%; }
    .mx_EncryptionUserSettingsTab .mx_SettingsHeader { max-width: 100%; flex-wrap: wrap; }
    .mx_RoomProfileSettings_profile { flex-direction: column; gap: 16px; }
    .mx_RoomProfileSettings .mx_RoomProfileSettings_profile .mx_RoomProfileSettings_profile_controls { min-width: 0; width: 100%; margin-inline-end: 0; }
    .mx_RoomProfileSettings_profile .mx_AvatarSetting_avatar { order: -1; align-self: center; }
    .mx_RoomProfileSettings_buttons { flex-wrap: wrap; }
    .mx_SettingsTab pre, .mx_SettingsTab table { max-width: 100%; overflow-x: auto; }
    .mx_SettingsTab table { display: block; }
    .mx_SecurityUserSettingsTab_bulkOptions { flex-wrap: wrap; gap: 8px; }
    .mx_InviteDialog_addressBar { margin-right: 0; flex-wrap: wrap; gap: 8px; }
    .mx_InviteDialog_addressBar .mx_InviteDialog_goButton { margin: 0; }
    .mx_InviteDialog_editor { min-width: 0; }
    .mx_InviteDialog_selectedUsers { max-width: 100%; overflow-wrap: anywhere; }
    .mx_NewRoomIntro { max-width: calc(100% - 32px); margin: 24px 16px; padding: 0; box-sizing: border-box; }
    .mx_NewRoomIntro h2 { font-size: 22px; line-height: 1.3; }
    .mx_EventTile .mx_EventTile_content { min-width: 0; overflow-wrap: anywhere; line-height: 1.6; }
    .mx_EventTile:has(> .imming-message-menu) { position: relative; }
    .mx_EventTile:has(> .imming-message-menu) .mx_EventTile_content { padding-inline-end: 36px; box-sizing: border-box; }
    .imming-message-menu {
        display: block;
        position: absolute;
        inset-inline-end: 4px;
        top: 2px;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: var(--cpd-color-bg-canvas-default, white);
        color: var(--cpd-color-text-secondary, #62676b);
        font-size: 22px;
        line-height: 1;
    }
    .imming-message-menu:focus-visible { outline: 2px solid var(--cpd-color-text-action-accent, #007a64); }
    .mx_EventTile img, .mx_EventTile video { max-width: 100%; height: auto; }
}