html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
}
body {
    position: fixed;
    inset: 0;
    touch-action: manipulation;
}
*, *::before, *::after {
    box-sizing: border-box;
}
.app, .xevander-app, .shell, .layout, .chat-shell, main, #app {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}
.chat, .messages, .thread, .conversation, .message-list, .chat-messages {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.sidebar, .contacts, .contact-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}
.composer, .message-composer, form.composer, form#composer, .chat-input {
    flex-shrink: 0 !important;
    position: sticky;
    bottom: 0;
    z-index: 20;
}
textarea, input, button {
    font-size: 16px;
}
img, video {
    max-width: 100%;
    height: auto;
}
@media (max-width: 760px) {
    body {
        width: 100vw;
        height: 100dvh;
    }
    .app, .xevander-app, .shell, .layout, .chat-shell, main, #app {
        display: flex !important;
        flex-direction: column !important;
    }
    .sidebar, .contacts {
        max-width: 100vw !important;
    }
    .right-panel, .tools-panel, .settings-panel {
        display: none;
    }
}