:root {
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-viewport-height: 100dvh;
}

html.native-shell,
html.native-shell body {
    min-height: var(--app-viewport-height);
}

html.native-shell body {
    padding-bottom: var(--app-safe-bottom);
}

.native-shell input,
.native-shell select,
.native-shell textarea { font-size: 16px; }

.native-shell .bottom-nav { padding-bottom: max(10px, var(--app-safe-bottom)); }
.native-shell .sidebar,
.native-shell .notification-modal { padding-bottom: var(--app-safe-bottom); }

#nativeConnectionStatus {
    position: fixed; z-index: 11000; top: calc(var(--app-safe-top) + 10px); left: 50%;
    transform: translate(-50%, -140%); display: flex; align-items: center; gap: 8px;
    max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 999px;
    background: rgba(25, 31, 45, .92); color: #fff; font-size: 13px; font-weight: 600;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22); transition: transform .25s ease; pointer-events: none;
}
#nativeConnectionStatus.is-visible { transform: translate(-50%, 0); }
.native-shell #installAppItem { display: none !important; }
@media (display-mode: standalone) { body { padding-bottom: var(--app-safe-bottom); } }