/* Mobile-native shell layer. Keep it separate from product layout so the
   install/safe-area/soft-keyboard contracts remain small and auditable. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --visual-viewport-height: 100dvh;
  --keyboard-inset: 0px;
}

html {
  min-height: 100%;
  scroll-padding-bottom: calc(var(--keyboard-inset) + var(--safe-bottom) + 24px);
}

body.native-web-shell {
  min-height: 100vh;
  min-height: var(--visual-viewport-height, 100dvh);
}

body.native-web-shell > .bar {
  padding-left: max(22px, var(--safe-left));
  padding-right: max(22px, var(--safe-right));
}

body.native-web-shell > main {
  padding-left: max(20px, var(--safe-left));
  padding-right: max(20px, var(--safe-right));
}

body.native-web-shell > footer {
  padding-right: max(20px, var(--safe-right));
  padding-bottom: max(18px, var(--safe-bottom));
  padding-left: max(20px, var(--safe-left));
}

@media (display-mode: standalone) {
  body.native-web-shell > .bar {
    padding-top: calc(12px + var(--safe-top));
  }

  body.native-web-shell > footer {
    padding-bottom: calc(18px + var(--safe-bottom));
  }
}

html[data-display-mode="standalone"] body.native-web-shell {
  overscroll-behavior-y: none;
}

/* Fixed bottom navigation must not sit between the focused field and the
   software keyboard. JS derives this state from the visual viewport. */
html[data-keyboard-open="true"] .mobile-tabbar {
  visibility: hidden;
  pointer-events: none;
}

.key-reveal-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.key-reveal-controls .btn {
  min-width: 112px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.key-reveal.is-concealed {
  -webkit-user-select: none;
  user-select: none;
}

.secret-privacy-note {
  margin: 8px 0 0;
}

@media (max-width: 620px) {
  /* 16px prevents focus zoom on iOS and keeps the focused control stable
     while the visual viewport contracts for the software keyboard. */
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  button,
  .btn,
  summary {
    min-height: 44px;
  }

  body.native-web-shell > .bar {
    padding-left: max(14px, var(--safe-left));
    padding-right: max(14px, var(--safe-right));
  }

  body.native-web-shell > main {
    padding-left: max(14px, var(--safe-left));
    padding-right: max(14px, var(--safe-right));
    padding-bottom: calc(16px + var(--safe-bottom));
  }

  .key-reveal-controls,
  .key-reveal-controls .btn {
    width: 100%;
  }

  :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    scroll-margin-top: calc(var(--safe-top) + 84px);
    scroll-margin-bottom: calc(var(--keyboard-inset) + var(--safe-bottom) + 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}