.backstage-app-nav {
    display: none;
}

@media (max-width: 900px) {
    html.backstage-app-mode,
    html.backstage-app-mode body {
        background: #05141f !important;
    }

    html.backstage-app-mode body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html.backstage-app-mode .backstage-app-nav {
        align-items: stretch;
        background: #05141f;
        border-top: 1px solid rgba(39, 213, 223, 0.42);
        bottom: 0;
        box-shadow: none;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: calc(72px + env(safe-area-inset-bottom, 0px));
        left: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        position: fixed;
        right: 0;
        z-index: 2147483000;
    }

    .backstage-app-nav__item {
        align-items: center;
        appearance: none;
        background: transparent;
        border: 0;
        color: #dffcff;
        display: flex;
        flex-direction: column;
        font: 600 12px/1.2 system-ui, sans-serif;
        gap: 4px;
        justify-content: center;
        margin: 0;
        min-width: 0;
        padding: 9px 4px 8px;
        text-decoration: none;
    }

    .backstage-app-nav__item[aria-current="page"] {
        background: #082331;
        color: #ffffff;
    }

    .backstage-app-nav__item:focus-visible {
        outline: 2px solid #27d5df;
        outline-offset: -3px;
    }

    .backstage-app-nav__icon {
        color: #27d5df;
        fill: none;
        height: 23px;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
        width: 23px;
    }

    .backstage-app-nav__item[data-app-section="account"] .backstage-app-nav__icon {
        fill: currentColor;
        stroke: none;
    }

    /* O acesso já está disponível na barra inferior do aplicativo. */
    html.backstage-app-mode .bksg-header .bksg-user-button {
        display: none !important;
    }

    /* Mantém o atendimento acima da navegação fixa. */
    html.backstage-app-mode .joinchat {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Rodapé compacto e integrado à barra, seguindo o visual do aplicativo. */
    html.backstage-app-mode .bksg-public-footer {
        background: #05141f !important;
        border-bottom: 1px solid rgba(39, 213, 223, 0.42) !important;
        color: #a9bdc9 !important;
        margin: 0 !important;
        padding: 24px 18px 20px !important;
        text-align: center;
    }

    html.backstage-app-mode .bksg-public-footer__inner {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0 auto !important;
        max-width: 720px;
    }

    html.backstage-app-mode .bksg-public-footer__inner strong {
        color: #ffffff;
    }

    html.backstage-app-mode .bksg-public-footer__inner address {
        font-style: normal;
        margin: 0;
    }

    html.backstage-app-mode .bksg-public-footer__legal {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        justify-content: center;
        margin-top: 8px;
    }

    html.backstage-app-mode .bksg-public-footer__legal a {
        color: #dffcff;
    }
}