:root {
    --flashchat-shell-height: var(--app-height, 100dvh);
    --flashchat-layer-sidebar: 20;
    --flashchat-layer-sidebar-panel: 30;
    --flashchat-layer-nav-rail: 50;
    --flashchat-layer-chat-ui: 70;
    --flashchat-layer-menu-overlay: 1200;
    --flashchat-layer-message-menu: 1210;
    --flashchat-layer-image: 1300;
    --flashchat-layer-sheet: 1400;
    --flashchat-layer-dialog: 1450;
    --flashchat-layer-settings: 1500;
    --flashchat-layer-privacy: 1550;
    --flashchat-layer-transfer: 1600;
    --flashchat-layer-onboarding: 1650;
    --flashchat-layer-toast: 1700;
    --flashchat-layer-drop-zone: 1750;
}

:where(
    #RESPONSIVE-VIEWER-ROOT,
    [id^="RESPONSIVE-VIEWER-ROOT"],
    [id*="RESPONSIVE-VIEWER-ROOT"]
) {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    isolation: isolate;
    background: #0f172a;
}

html,
body,
#app {
    min-height: 100%;
}

body,
#app,
#sidebar,
#chatArea {
    isolation: isolate;
}

body[data-responsive-viewer="true"] {
    min-height: var(--flashchat-shell-height);
    overflow: hidden;
}

body[data-responsive-viewer="true"] #app {
    height: var(--flashchat-shell-height);
    max-height: var(--flashchat-shell-height);
}

#sidebar {
    z-index: var(--flashchat-layer-sidebar);
}

.nav-rail {
    z-index: var(--flashchat-layer-nav-rail);
}

#sidebarMain,
.sidebar-topbar {
    position: relative;
    z-index: var(--flashchat-layer-sidebar-panel);
}

.chat-header {
    position: relative;
    z-index: var(--flashchat-layer-chat-ui);
}

.menu-overlay {
    z-index: var(--flashchat-layer-menu-overlay);
}

.message-menu {
    z-index: var(--flashchat-layer-message-menu);
}

#imageModal {
    z-index: var(--flashchat-layer-image) !important;
}

#imageModal > .absolute {
    z-index: calc(var(--flashchat-layer-image) + 1);
}

.forward-modal {
    z-index: var(--flashchat-layer-sheet);
}

#groupModal,
#addModal,
#qrAcceptModal,
#permissionsModal {
    z-index: var(--flashchat-layer-dialog) !important;
}

.settings-modal {
    z-index: var(--flashchat-layer-settings);
}

.privacy-shield {
    z-index: var(--flashchat-layer-privacy);
}

#transferReceiveModal,
#transferSendModal {
    z-index: var(--flashchat-layer-transfer) !important;
}

.onboarding-overlay {
    z-index: var(--flashchat-layer-onboarding);
}

#toast {
    z-index: var(--flashchat-layer-toast);
}

#dropZone {
    position: fixed;
    inset: 0;
    z-index: var(--flashchat-layer-drop-zone);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, rgba(59, 130, 246, 0.2), transparent 32%),
        rgba(2, 6, 23, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#dropZone:not(.hidden) {
    display: flex;
}

:is(
    #imageModal,
    .forward-modal,
    .settings-modal,
    #groupModal,
    #addModal,
    #qrAcceptModal,
    #permissionsModal,
    #transferReceiveModal,
    #transferSendModal,
    .privacy-shield,
    .onboarding-overlay,
    #dropZone
) {
    overscroll-behavior: contain;
}

body.has-blocking-layer #app {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

body.has-blocking-layer :is(
    #imageModal,
    #groupModal,
    #forwardModal,
    #settingsModal,
    #addModal,
    #qrAcceptModal,
    #permissionsModal,
    #transferReceiveModal,
    #transferSendModal,
    #privacyShield,
    #onboardingOverlay
) {
    pointer-events: auto;
}

body.has-floating-layer :is(
    #messageMenu,
    #menuOverlay,
    #toast,
    #dropZone
) {
    pointer-events: auto;
}

@media (max-width: 767px) {
    body[data-responsive-viewer="true"] .settings-content {
        height: var(--flashchat-shell-height);
    }

    body[data-responsive-viewer="true"] #imageModal img {
        max-height: calc(var(--flashchat-shell-height) - 32px);
    }
}