/* The page background follows the browser's layout viewport. */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: transparent;
}

/* Full-bleed Flutter canvas. BrowserSafeArea supplies CSS env() insets to
   MediaQuery; body padding would move the canvas and its pointer coordinates. */
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* iOS PWA uses Flutter's supported custom-element embedding. Its dimensions
   provider measures this real CSS box, avoiding WebKit's shorter root viewport.
   Large viewport units remain stable when the software keyboard opens;
   BrowserSafeArea supplies the obscured area separately as viewInsets. */
#aeria-flutter-host,
#aeria-boot.is-standalone {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}

@media (display-mode: standalone) {
  /* The hosted canvas alone cannot grow WebKit's paintable viewport. Keep
     the in-flow document screen-tall too, capped once the viewport recovers.
     https://bugs.webkit.org/show_bug.cgi?id=301108 */
  html {
    min-height: min(100lvh, calc(100% + env(safe-area-inset-top, 0px)));
  }

  body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
  }
}

/* Static boot mark shown until Flutter paints its first frame. It mirrors
   AeriaBrandTile (96 px tile, 28 px radius, 56 px glyph) at the exact centre
   used by LaunchIntroScreen, so the hand-off is invisible. */
#aeria-boot {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FCF8F8;
  pointer-events: none;
  opacity: 1;
  transition: opacity 160ms ease-out;
}

#aeria-boot.is-done {
  opacity: 0;
}

.aeria-boot-tile {
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  border-radius: 28px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: #FFFFFF;
  box-shadow: 0 8px 29px rgba(28, 27, 27, 0.073);
  color: #1C1B1B;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aeria-boot-tile svg {
  display: block;
  width: 56px;
  height: 56px;
}

/* Dark "Cocoa" tokens: background, surfaceElevated, surfaceBorder, ink. */
html[data-aeria-theme="dark"] #aeria-boot {
  background: #13100E;
}

html[data-aeria-theme="dark"] .aeria-boot-tile {
  border-color: rgba(255, 241, 224, 0.09);
  background: #28221E;
  box-shadow: none;
  color: #F3EDE6;
}

@media (prefers-reduced-motion: reduce) {
  #aeria-boot {
    transition: none;
  }
}