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

html.tt-pwa-standalone,
html.tt-pwa-ios-standalone,
html.tt-pwa-android-standalone,
html.app-ios,
html.app-android,
html.app-twa,
html.app-mobile,
body.app-ios,
body.app-android,
body.app-twa,
body.app-mobile {
  min-height: 100%;
  background: #F1EFF0;
}

.tt-pwa-safe-top {
  padding-top: max(var(--xx22-safe-top), 0px) !important;
}

.tt-pwa-safe-bottom {
  padding-bottom: max(var(--xx22-safe-bottom), 0px) !important;
}

.tt-pwa-safe-x {
  padding-left: max(var(--xx22-safe-left), 0px) !important;
  padding-right: max(var(--xx22-safe-right), 0px) !important;
}

.tt-pwa-app-frame {
  min-height: 100dvh;
  padding-top: var(--xx22-safe-top);
  padding-right: var(--xx22-safe-right);
  padding-bottom: var(--xx22-safe-bottom);
  padding-left: var(--xx22-safe-left);
}

html.tt-pwa-standalone .bp-messages-full-screen,
html.tt-pwa-standalone .bp-messages-full-screen-thread-wrap,
html.app-ios .bp-messages-full-screen,
html.app-ios .bp-messages-full-screen-thread-wrap,
html.app-android .bp-messages-full-screen,
html.app-android .bp-messages-full-screen-thread-wrap {
  min-height: 100dvh;
}

html.app-ios .hide-in-ios-app,
body.app-ios .hide-in-ios-app,
html.app-android .hide-in-android-app,
body.app-android .hide-in-android-app,
html.app-mobile .hide-in-mobile-app,
body.app-mobile .hide-in-mobile-app {
  display: none !important;
}