/* Installed-app pieces: the offline page and the "install" pill. Colours come from the theme tokens (system colours when a CRM page has none). */
.pwa-offline-page { margin: 0; min-height: 100vh; background: var(--ay-bg); color: var(--ay-text, CanvasText); font-family: var(--ay-font); }
.pwa-offline { max-width: 26rem; margin: 0 auto; padding: 16vh var(--ay-space-4) var(--ay-space-6); text-align: center; }
.pwa-offline img { border-radius: var(--ay-r-xl); box-shadow: var(--ay-shadow-md); }
.pwa-offline h1 { margin: var(--ay-space-4) 0 var(--ay-space-2); font-size: 1.4rem; }
.pwa-offline p { margin: 0 0 var(--ay-space-4); line-height: 1.9; color: var(--ay-text-base, CanvasText); }

.pwa-btn {
  min-height: 2.75rem; padding: 0 var(--ay-space-6); border: 0; border-radius: var(--ay-r-pill); cursor: pointer;
  background: var(--ay-accent-fill, Highlight); color: var(--ay-on-accent, HighlightText); font: inherit; font-weight: 700;
}
.pwa-btn:focus-visible { outline: 2px solid var(--ay-focus); outline-offset: 2px; }

.pwa-install {
  position: fixed; z-index: 60; inset-inline: var(--ay-space-4); bottom: calc(5.5rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--ay-space-3); max-width: 24rem; margin-inline: auto;
  padding: var(--ay-space-2) var(--ay-space-3); border: 1px solid var(--ay-border, GrayText); border-radius: var(--ay-r-pill);
  background: var(--ay-surface, Canvas); color: var(--ay-text, CanvasText); box-shadow: var(--ay-shadow-lg);
}
.pwa-install[hidden] { display: none; }
.pwa-install .pwa-btn { min-height: 2.25rem; padding: 0 var(--ay-space-4); }
.pwa-install-label { flex: 1; font-size: .9rem; }
.pwa-install-close { min-width: 2.75rem; min-height: 2.75rem; border: 0; background: transparent; color: var(--ay-text-base, CanvasText); font-size: 1.25rem; cursor: pointer; }
@media (min-width: 900px) { .pwa-install { inset-inline-start: auto; inset-inline-end: var(--ay-space-6); bottom: var(--ay-space-6); } }
@media (display-mode: standalone) { .pwa-install { display: none; } }