/* Mobile override: strips phone frame on narrow viewports */
@media (max-width: 430px) {
  /* Body: remove centering and gray bg */
  body {
    background: white !important;
    padding: 0 !important;
    display: block !important;
    min-height: 100dvh !important;
  }

  /* Outer frame wrapper: full width */
  body > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Inner frame: remove border, rounding, fixed height, shadow */
  body > div > div {
    border: none !important;
    border-radius: 0 !important;
    height: 100dvh !important;
    box-shadow: none !important;
  }

  /* Hide the notch container */
  .notch {
    display: none !important;
  }

  /* Top safe area for pages without a sticky top bar */
  .mobile-top-pad {
    padding-top: 16px !important;
  }

  /* Compact header spacing for pages with generous top padding */
  .mobile-compact-header {
    padding-top: 1.5rem !important;
  }

  /* Smaller icon circle on mobile */
  .mobile-compact-icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 0.5rem !important;
  }

  /* Fix content height for pages using calc(100% - 34px) for notch offset */
  div[style*="calc(100% - 34px)"] {
    height: 100% !important;
  }

}