/*
 * Native app (Capacitor) adjustments. platform.js adds .is-native and
 * .is-ios / .is-android to <html> only inside the app, so every rule here
 * is inert in a browser except the .native-ios-only hide, which keeps
 * iOS-only controls out of the website.
 *
 * Safe-area insets: Capacitor 8 SystemBars can inject --safe-area-inset-*
 * on Android WebViews without env() support; env() covers iOS.
 * No backdrop-filter on floating controls (iOS WebKit drops the layer).
 */

html.is-native {
    --ts-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --ts-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    --ts-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
    --ts-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}

html:not(.is-ios) .native-ios-only,
html:not(.has-apple-signin) #btn-signin-apple {
    display: none !important;
}

.is-native .web-purchase-only {
    display: none !important;
}

/* Full-screen surfaces keep their content clear of the notch and home bar. */
.is-native #login-screen,
.is-native #beta-screen,
.is-native #splash-screen,
.is-native #upgrade-modal,
.is-native #tos-modal,
.is-native .acct-overlay {
    padding-top: calc(20px + var(--ts-safe-top));
    padding-bottom: calc(20px + var(--ts-safe-bottom));
    padding-left: calc(20px + var(--ts-safe-left));
    padding-right: calc(20px + var(--ts-safe-right));
}

.is-native #login-screen,
.is-native #beta-screen,
.is-native #splash-screen {
    padding-left: var(--ts-safe-left);
    padding-right: var(--ts-safe-right);
}

/* The app shell starts below the status bar; the full-screen map goes
 * edge to edge because its floating controls already offset by env(). */
.is-native #app {
    padding-top: var(--ts-safe-top);
    padding-left: var(--ts-safe-left);
    padding-right: var(--ts-safe-right);
    background: var(--chat-header-bg);
}

.is-native #app.map-fullscreen {
    padding-top: 0;
}

/* Wide layouts (landscape / tablet): composer and sidebar footer sit at the bottom edge. */
@media (min-width: 769px) {
    .is-native #chat-form,
    .is-native #sidebar-footer {
        padding-bottom: calc(12px + var(--ts-safe-bottom));
    }
}

/* App chrome behaves like native UI: no text selection, no rubber-band scroll. */
.is-native,
.is-native body {
    overscroll-behavior: none;
}

.is-native #chat-header,
.is-native #sidebar,
.is-native #map-controls,
.is-native .settings-tabs,
.is-native button {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Sign in with Apple (iOS app only): white style on the dark login card. */
.is-ios #btn-signin-apple {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    background: #fff;
    color: #000;
    font-weight: 500;
    font-size: 15px;
    border: 1px solid #fff;
    border-radius: 8px;
    cursor: pointer;
}

.is-ios #btn-signin-apple[hidden] {
    display: none;
}

.is-ios #btn-signin-apple svg {
    width: 16px;
    height: 18px;
    fill: currentColor;
}

/* Native-only "Share..." button beside Copy in the share-link panel. */
.is-native .route-link-share {
    flex: none;
}

/* Touch: no stuck tap flash, no double-tap zoom delay on controls. */
.is-native button,
.is-native [role="button"],
.is-native a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}