:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Keep content clear of notch and home bar */
body{
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
}

/* Your sticky Bootstrap header should get extra top space */
.sticky-top,
.header-fixed{
  top: var(--safe-top) !important;
  padding-top: calc(12px + var(--safe-top));
}

/* If you ever use a fixed footer or bottom bar */
.footer-fixed, .bottom-bar{
  padding-bottom: calc(12px + var(--safe-bottom));
}

/* Floating chat button (or any FAB) */
.fab{
  position: fixed;
  right: calc(16px + var(--safe-right));
  bottom: calc(16px + var(--safe-bottom));
  z-index: 1050;
}