/* These insets apply only inside an installed app. Existing global styles own
   all colours, typography, cards, navigation and responsive layouts. */
html[data-vorta-installed] {
  --vorta-pwa-top: env(safe-area-inset-top, 0px);
  --vorta-pwa-left: env(safe-area-inset-left, 0px);
  --vorta-pwa-right: env(safe-area-inset-right, 0px);
  --vorta-pwa-bottom: env(safe-area-inset-bottom, 0px);
  --vorta-pwa-height: calc(100dvh - var(--vorta-pwa-top));
}
html[data-vorta-installed] body {
  padding-top: var(--vorta-pwa-top);
  padding-left: var(--vorta-pwa-left);
  padding-right: var(--vorta-pwa-right);
}
html[data-vorta-installed] [data-vorta-portal-shell="true"],
html[data-vorta-installed] [data-vorta-desktop-sidebar="true"],
html[data-vorta-installed] [data-vorta-engineer-shell="true"] > aside {
  height: var(--vorta-pwa-height);
  max-height: var(--vorta-pwa-height);
}
html[data-vorta-installed] [data-vorta-auth-page="true"] {
  min-height: var(--vorta-pwa-height);
}
html[data-vorta-installed] [data-vorta-engineer-bottom-nav="true"] {
  left: calc(0.75rem + var(--vorta-pwa-left)) !important;
  right: calc(0.75rem + var(--vorta-pwa-right)) !important;
  bottom: max(0.35rem, var(--vorta-pwa-bottom)) !important;
}
/* Drawers now sit inside the app shell beneath its persistent 4rem header.
   Do not override their local top/height with a viewport-wide safe-area rule. */
html[data-vorta-installed] [data-vorta-mobile-navigation-overlay="true"] {
  left: var(--vorta-pwa-left);
  right: var(--vorta-pwa-right);
}
html[data-vorta-installed] [role="dialog"][aria-label="Engineer menu"] {
  right: var(--vorta-pwa-right);
}

/* Installed PWA navigation: retain the existing website launcher styling. */
html[data-vorta-installed] [data-vorta-pwa-back="true"] {
  display: none !important;
  /* Match the Ask Vorta right edge, one 48px button plus 8px gap above it. */
  right: 0.75rem;
  bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + 3.5rem);
}
html[data-vorta-installed] [data-vorta-maintenance-portal="true"]:has([data-vorta-shared-mobile-ai-launcher="true"]) [data-vorta-pwa-back="true"],
html[data-vorta-installed] [data-vorta-maintenance-portal="true"]:has([data-vorta-global-ai-launcher="true"]) [data-vorta-pwa-back="true"],
html[data-vorta-installed] [data-vorta-engineer-shell="true"]:has([data-vorta-global-ai-launcher="true"]) [data-vorta-pwa-back="true"] {
  display: inline-flex !important;
}
html[data-vorta-installed] [data-vorta-global-ai-launcher="true"],
html[data-vorta-installed] [data-vorta-shared-mobile-ai-launcher="true"] {
  display: inline-flex !important;
  box-sizing: border-box;
  width: 3rem !important;
  height: 3rem !important;
  min-width: 3rem;
  gap: 0 !important;
  align-items: center;
  justify-content: center;
  right: 0.75rem;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  border-radius: 9999px !important;
  padding: 0 !important;
}
html[data-vorta-installed] [data-vorta-global-ai-launcher="true"] svg,
html[data-vorta-installed] [data-vorta-shared-mobile-ai-launcher="true"] svg {
  width: 1.25rem;
  height: 1.25rem;
}
html[data-vorta-installed] [data-vorta-ai-launcher-label="true"],
html[data-vorta-installed] [data-vorta-mobile-ai-launcher-label="true"] {
  display: none !important;
}
/* Engineer phones already have a five-item bottom bar; float above it. */
@media (max-width: 767px) {
  html[data-vorta-installed] [data-vorta-engineer-shell="true"] [data-vorta-pwa-back="true"] {
    bottom: calc(10.2rem + env(safe-area-inset-bottom));
  }
  html[data-vorta-installed] [data-vorta-engineer-shell="true"] [data-vorta-global-ai-launcher="true"] {
    bottom: calc(6.7rem + env(safe-area-inset-bottom));
  }
}