/* Webapp-only overrides on top of popup.css.
   popup.css hard-codes 340x440 for the Chrome extension popup frame;
   on a phone we want the same layout to fill the viewport with safe-area
   padding for the iOS status bar (top) and home indicator (bottom). */

html, body, #root {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Allow scrolling inside the body area if content overflows the viewport. */
.body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Prevent iOS Safari from auto-zooming when an input is focused.
   Safari triggers the zoom when the input's font-size is below 16px.
   The popup uses 13px because it sizes for a 340px Chrome popup;
   on phone we use 16px to keep the input usable without zoom-in. */
input, select, textarea {
  font-size: 16px;
}