/* Rosebud — shared responsive shell.
   On desktop the app shows inside a 380x800 "phone" frame. On a real phone that
   fixed frame got cut off at the top and bottom in portrait. These rules make the
   frame fill the actual screen on phone-width viewports, hide the fake status bar
   (the real one shows through), and keep clear of the notch / home indicator. */
@media (max-width: 480px) {
  html, body { height: auto; }
  body {
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  .phone {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
  }
  /* the fake "9:41 / signal" row — the phone draws the real one */
  .phone > .status { display: none !important; }
  /* keep the header clear of the notch; keep the footer above the home bar */
  .phone > .brand,
  .phone > .topbar { padding-top: calc(env(safe-area-inset-top) + 12px) !important; }
  .footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
}