[data-native-app] .native-hidden {
  display: none !important;
}

/* Public API for app CSS. Android's WebView doesn't populate
   env(safe-area-inset-*) from system bars (only display cutouts), so the
   native shell pushes the real heights into the internal -inset- variables;
   iOS leaves them undefined and falls back to env(). */
:root {
  --ruby-native-safe-area-top: var(--ruby-native-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --ruby-native-safe-area-bottom: var(--ruby-native-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}

.native-inset-top::before,
.native-inset::before {
  content: "";
  display: block;
  height: var(--ruby-native-safe-area-top);
}

.native-inset-bottom::after,
.native-inset::after {
  content: "";
  display: block;
  height: var(--ruby-native-safe-area-bottom);
}

/* In-app defaults so pages feel native without any setup: no gray tap flash,
   no selecting button labels on long-press, no double-tap zoom on controls.
   Pair with :active styles for pressed feedback; the bridge makes them apply
   instantly on touch. */
[data-native-app] * {
  -webkit-tap-highlight-color: transparent;
}

[data-native-app] button,
[data-native-app] [role="button"] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

[data-native-app] a,
[data-native-app] button,
[data-native-app] input,
[data-native-app] label,
[data-native-app] [role="button"] {
  touch-action: manipulation;
}

.native-back-button {
  display: none;
}

body.can-go-back .native-back-button {
  display: inline;
}