/* iOS standalone and landscape: reserve space inside the header, including chat. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
.topbar {
  box-sizing: border-box;
  height: calc(44px + var(--safe-top));
  padding-top: var(--safe-top);
  flex-shrink: 0;
}
.auth-form {
  padding-top: max(36px, calc(var(--safe-top) + 16px));
  padding-bottom: max(36px, calc(var(--safe-bottom) + 16px));
}
dialog {
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);
}
@media (max-width: 760px), (display-mode: standalone) and (orientation: landscape) {
  .topbar, .chat-page .topbar {
    height: calc(46px + var(--safe-top));
    padding-top: calc(var(--safe-top) + 6px);
    padding-bottom: 0;
  }
  .main {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
  .chat-page .topbar, .chat-page .chat-head, .chat-page .composer {
    padding-left: max(10px, var(--safe-left));
    padding-right: max(10px, var(--safe-right));
  }
  .mobile-nav {
    padding-left: max(8px, var(--safe-left));
    padding-right: max(8px, var(--safe-right));
  }
}