html:has(.web-shell),
body:has(.web-shell) {
    height: auto;
    min-height: 100%;
    overflow: visible;
}

.workspace.web-shell {
    align-items: flex-start;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
}

.web-shell > .app-sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
}

.web-shell-content {
    flex: 1;
    min-width: 0;
}

.web-shell .app-sidebar button {
    border: 0;
    background: transparent;
}

.web-shell .profile:not(:has(.connection-status[data-realtime])) .profile-connection-dot {
    display: none;
}

.web-shell-content > .mobile-shell-bar:where(.web-shell, .web-shell *) {
    position: sticky;
    top: 0;
}

@media (max-width: 768px) {
    .workspace.web-shell {
        display: block;
    }

    .web-shell > .app-sidebar {
        position: fixed;
        bottom: 0;
        height: 100dvh;
        max-height: 100dvh;
    }

    body:has(.mobile-bottom-nav) .web-shell-content {
        padding-bottom: var(--mobile-nav-height);
    }
}