/* Keep the installed iPhone shell clear of the notch and home indicator. */
@media (max-width: 650px) {
  .device { min-height: 100vh; min-height: 100dvh; }
  .device-head { padding-top: env(safe-area-inset-top, 0px); }
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .opening-copy { padding-top: max(20px, env(safe-area-inset-top, 0px)); }
}

/* Keep these after all startup rules: earlier Safari safeguards were overridden. */
@supports (-webkit-touch-callout: none) {
  .opening-aura .opening-depth { perspective: none; }
  .opening-aura .matrix-nebula { filter: none; transform: translate(-50%, -50%); }
  .opening-aura .matrix-stars { transform: none; }
  .opening-aura .opening-foundation.aura-formation,
  .opening-aura.is-leaving .opening-foundation.aura-formation { transform: none; filter: none; }
  .aura-formation-space { filter: none; }
  .opening-aura:not([hidden]) ~ main.device { box-shadow: none; }
}

/* On Safari, avoid compositing the whole welcome over the newly painted Box. */
@supports (-webkit-touch-callout: none) {
  body.is-opening main.device { visibility: hidden; }
  .opening-aura.is-leaving { opacity: 1; visibility: visible; transition: none; }
  .opening-aura.is-leaving .opening-copy,
  .opening-aura.is-leaving .opening-state { opacity: 0; transition: opacity 900ms ease; }
  .opening-aura.is-leaving .matrix-nebula,
  .opening-aura.is-leaving .matrix-stars,
  .opening-aura.is-leaving .matrix-depth-light { display: none; }
  .aura-formation { isolation: auto; }
  .activity-list:not(:has(.empty)) { perspective: none; }
  .activity-list:not(:has(.empty)) li { transform: none; }
  .reborn-zone::before { -webkit-mask-image: none; mask-image: none; opacity: .08; }
  .presence-beam, .contact-beam { filter: none; }
  .reborn-dialog::backdrop, .circle-profile-dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  @media (prefers-reduced-motion: reduce) {
    .opening-aura.is-leaving .opening-copy, .opening-aura.is-leaving .opening-state { transition: none; }
  }
}
.startup-check { position: fixed; z-index: 1000; right: 10px; bottom: 10px; width: min(320px, calc(100vw - 20px)); padding: 12px; border: 1px solid #b5f5cf; border-radius: 8px; background: #10291e; color: #fff; font-size: 12px; }
.startup-check textarea { display: block; width: 100%; height: 120px; margin: 8px 0; padding: 6px; font-size: 10px; }
.startup-check button { padding: 6px 10px; background: #e9f7ef; color: #10291e; border: 0; }

.offline-status { margin: 0; padding: 10px 18px; background: #10291e; color: #bce8cd; font-size: .72rem; line-height: 1.5; border-bottom: 1px solid #234a35; }
.is-offline .offline-status { color: #e6f8ec; }