/* Desktop shell background (shown only when body has .body-bg) */
body.body-bg {
  margin: 0;
  overflow: hidden;
  background-color: #0b1020;
  background-image: url(./assets/bg.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#viewport-container {
  display: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Desktop phone chrome must never exceed the viewport (RESP-001).
   Inline width (SSR fallback ~346px) is capped by max-width; min-width:0
   lets the flex item shrink below its 346px min-content size. */
#app-frame {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

/* Inside phone iframe / real mobile */
body.app-viewport {
  margin: 0;
  padding: 0 !important;
}

#root {
  min-height: 100%;
}