/* The iOS wrapper uses the full container; reserve each system inset here once. */
html.rcr-native-ios {
  --rcr-safe-top: env(safe-area-inset-top, 0px);
  --rcr-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rcr-header-height: 64px;
  --rcr-nav-height: 64px;
}

@media (max-width: 680px), (max-height: 500px) and (pointer: coarse) {
  html.rcr-native-ios body,
  html.rcr-native-ios body.auth-active {
    padding-top: calc(var(--rcr-safe-top) + var(--rcr-header-height));
    min-height: 100dvh;
  }

  html.rcr-native-ios .topbar,
  html.rcr-native-ios .auth-active .topbar {
    box-sizing: border-box;
    position: fixed;
    inset: 0 0 auto;
    height: calc(var(--rcr-safe-top) + var(--rcr-header-height));
    padding: calc(var(--rcr-safe-top) + 10px) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  }

  html.rcr-native-ios .topbar .brand {
    height: 44px;
  }

  html.rcr-native-ios .topbar .brand img {
    max-height: 44px;
  }

  html.rcr-native-ios .auth-active .topbar .brand {
    width: min(170px, 52vw);
  }

  html.rcr-native-ios .app-nav {
    box-sizing: border-box;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: calc(var(--rcr-nav-height) + var(--rcr-safe-bottom));
    padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + var(--rcr-safe-bottom)) max(8px, env(safe-area-inset-left));
    transform: none;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
  }

  html.rcr-native-ios .app-nav button {
    min-height: 44px;
  }

  html.rcr-native-ios .workspace {
    padding-bottom: calc(var(--rcr-nav-height) + var(--rcr-safe-bottom) + 20px);
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  html.rcr-native-ios .property-dialog {
    inset: max(12px, var(--rcr-safe-top)) max(12px, env(safe-area-inset-right)) max(12px, var(--rcr-safe-bottom)) max(12px, env(safe-area-inset-left));
    max-height: calc(100dvh - max(12px, var(--rcr-safe-top)) - max(12px, var(--rcr-safe-bottom))) !important;
  }

  /* Override the generic dialog width cap as well as its inner height cap. */
  html.rcr-native-ios .message-dialog,
  html.rcr-native-android .message-dialog {
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--card);
  }

  /* The message article already reserves the top and bottom system areas. */
  html.rcr-native-ios .message-dialog > article,
  html.rcr-native-android .message-dialog > article {
    height: 100%;
    max-height: 100%;
  }

  /* Android already reserves system bars outside the WebView. */
  html.rcr-native-android .message-dialog > article {
    padding: 0 !important;
  }

  html.rcr-native-ios .message-composer {
    padding-bottom: 8px !important;
  }
}