.pwa-install-button {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 11px 17px;
  color: #fff;
  background: linear-gradient(135deg, #0b766e, #0f9f91);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
  font: 700 14px/1 system-ui, sans-serif;
  cursor: pointer;
}

.pwa-install-button[hidden],
.pwa-install-message[hidden] {
  display: none;
}

.pwa-install-button:focus-visible {
  outline: 3px solid #9bf3e9;
  outline-offset: 3px;
}

.pwa-install-message {
  position: fixed;
  left: 50%;
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px));
  z-index: 10001;
  width: min(88vw, 360px);
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 12px 14px;
  color: #fff;
  background: #10251f;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
  font: 500 14px/1.45 system-ui, sans-serif;
  text-align: center;
}

@media (max-width: 640px) {
  body { padding-bottom: max(78px, calc(env(safe-area-inset-bottom) + 70px)); }
  .pwa-install-button { bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* Patient dashboard keeps a persistent bottom navigation through tablet width. */
body.patient-dashboard-active {
  --patient-bottom-nav-height: 66px;
  --patient-install-offset: 12px;
}

@media (max-width: 900px) {
  body.patient-dashboard-active .pwa-install-button {
    bottom: calc(
      var(--patient-bottom-nav-height) +
      env(safe-area-inset-bottom) +
      var(--patient-install-offset)
    );
  }

  body.patient-dashboard-active .pwa-install-message {
    bottom: calc(
      var(--patient-bottom-nav-height) +
      env(safe-area-inset-bottom) +
      64px
    );
  }
}