body.eitaa-added-to-home-screen .add-to-home-screen .when-missed,
body:not(.eitaa-added-to-home-screen) .add-to-home-screen .when-added {
    display: none !important;
}

body.eitaa-write-access-allowed .btn-request-write-access {
    display: none !important;
}


/* region: fullscreen */


/* content-wrapper */
body.eitaa-fullscreen .layout-menu.menu-vertical,
html.layout-menu-fixed body.eitaa-fullscreen .content-wrapper {
    padding-top: calc(var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top));
}

body.eitaa-fullscreen .layout-page > .content-wrapper {
    padding-bottom: calc(var(--tg-safe-area-inset-bottom) + var(--tg-content-safe-area-inset-bottom)) !important;
}

/* /content-wrapper */


/* additional-shadow */
.additional-shadow-top,
.additional-shadow-bottom {
    display: none;
}

@media (max-width: 1200px) {
    html:not(.dark-style) body.eitaa-fullscreen .additional-shadow-top,
    html:not(.dark-style) body.eitaa-fullscreen .additional-shadow-bottom {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
    }

    html:not(.dark-style) body.eitaa-fullscreen .additional-shadow-top {
        top: 0;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.17) 0,
            transparent 100%
        );
        height: calc(var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top));
    }

    html:not(.dark-style) body.eitaa-fullscreen .additional-shadow-bottom {
        bottom: 0;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.17) 0,
            transparent 100%
        );
        height: calc(var(--tg-safe-area-inset-bottom) + var(--tg-content-safe-area-inset-bottom));
    }
}

/* /additional-shadow */


/* navbar */
html.layout-menu-fixed body.eitaa-fullscreen .layout-page > .layout-navbar {
    --navbar-height: 3.875rem;

    top: 0;
    padding-top: calc(var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top) + (var(--navbar-height) * 0.5));
    padding-bottom: calc(var(--navbar-height) * 0.5);
}

/*
tip: there is no way to change system clock color in top bar to dark/light,
then we need to add a dark gradient below navbar in light theme, to create a contrast for system clock color
*/
@media (max-width: 1200px) {
    html.layout-navbar-fixed:not(.dark-style) body.eitaa-fullscreen .layout-wrapper:not(.layout-horizontal) .layout-navbar {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.17) var(--tg-safe-area-inset-top),
            rgba(243, 244, 244, 0.8) 100%
        );
    }

    html.layout-navbar-fixed:not(.dark-style) body.eitaa-fullscreen .layout-wrapper:not(.layout-horizontal) .layout-navbar.navbar-elevated {
        border-bottom-color: transparent !important;
    }
}

/* /navbar */


/* btn-support-channel */
body.eitaa-fullscreen .btn-support-channel-fixed-container {
    bottom: calc(var(--tg-safe-area-inset-bottom) + var(--tg-content-safe-area-inset-bottom) + 0.5rem) !important;
    left: 1.5rem !important;
    right: 1.5rem !important;
}

@media (min-width: 1199.98px) {
    body.eitaa-fullscreen .btn-support-channel-fixed-container {
        right: calc(1.5rem + 16.25rem) !important;
    }
}

body.eitaa-fullscreen .btn-support-channel-fixed-container > .btn {
    border-radius: 0.5rem !important;
    box-shadow: 0 0.125rem 3rem 20px rgba(255, 255, 255, 0.8) !important;
}

.dark-style body.eitaa-fullscreen .btn-support-channel-fixed-container > .btn {
    box-shadow: 0 0.125rem 3rem 20px rgba(0, 0, 0, 0.35) !important;
}

/* /btn-support-channel */


/* modal */
body.eitaa-fullscreen .modal-fullscreen .modal-header {
    margin-top: calc(var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top));
}

body.eitaa-fullscreen .modal-fullscreen .modal-footer {
    margin-bottom: calc(var(--tg-safe-area-inset-bottom) + var(--tg-content-safe-area-inset-bottom));
}

/* /modal */


/* endregion: fullscreen */