.mu-mobile-room-actions-toggle {
    display: none;
}

@media (max-width: 767px) {
    .chat > header {
        position: relative;
        overflow: visible !important;
    }

    .chat > header .mu-mobile-room-title {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px;
        grid-template-areas:
            "title toggle"
            "subtitle subtitle";
        align-items: center;
        column-gap: 5px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .chat > header .mu-mobile-room-title > #title {
        grid-area: title;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat > header .mu-mobile-room-title > p {
        grid-area: subtitle;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat > header .mu-mobile-room-actions-toggle:not([hidden]) {
        grid-area: toggle;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0 0 4px;
        border: 1px solid #355471;
        border-radius: 11px;
        background: #132943;
        color: #c7dced;
        font: inherit;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        touch-action: manipulation;
    }

    .chat > header .mu-mobile-room-actions-toggle:active,
    .chat > header .mu-mobile-room-actions-toggle[aria-expanded="true"] {
        background: #1d3b5b;
        border-color: #5b8ab2;
    }

    .chat > header > #directRoomActions {
        display: none !important;
    }

    .chat > header > #directRoomActions.mu-mobile-actions-open:not([hidden]) {
        display: flex !important;
        position: absolute !important;
        top: calc(100% - 5px) !important;
        right: auto !important;
        left: var(--mu-mobile-actions-left, 8px) !important;
        z-index: 1200 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        width: max-content !important;
        min-width: 190px !important;
        max-width: calc(100% - 16px) !important;
        margin: 0 !important;
        padding: 7px !important;
        border: 1px solid #355471 !important;
        border-radius: 13px !important;
        background: #0e2239 !important;
        box-shadow: 0 16px 38px rgba(0, 0, 0, .42) !important;
    }

    .chat > header > #directRoomActions.mu-mobile-actions-open > button {
        display: block !important;
        width: 100% !important;
        min-height: 43px !important;
        margin: 0 !important;
        padding: 9px 13px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #c7dced !important;
        text-align: left !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    .chat > header > #directRoomActions.mu-mobile-actions-open > button:hover,
    .chat > header > #directRoomActions.mu-mobile-actions-open > button:focus-visible {
        background: #1b3856 !important;
        outline: none !important;
    }

    .chat > header > #directRoomActions.mu-mobile-actions-open > #directDelete {
        color: #f0bdc9 !important;
    }

    .chat > header > #directRoomActions.mu-mobile-actions-open > #directDelete:hover,
    .chat > header > #directRoomActions.mu-mobile-actions-open > #directDelete:focus-visible {
        background: #3a202d !important;
    }

    .chat > header .secure {
        flex: 0 0 auto;
        margin-left: 5px !important;
    }
}