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

html,
body {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  padding-left: max(0px, var(--safe-left));
  padding-right: max(0px, var(--safe-right));
}

.topbar {
  padding-top: calc(12px + var(--safe-top));
}

.nav {
  padding-bottom: calc(18px + var(--safe-bottom));
}

.chat-window {
  inset: calc(60px + var(--safe-top)) 0 calc(90px + var(--safe-bottom)) 0;
}

input,
button,
.nav-item,
.btn-start,
.btn-done,
.btn-smoked,
.btn-quote,
.chat-send,
.chat-back {
  min-height: 44px;
}

@media (max-width: 430px) {
  body {
    max-width: 430px;
    margin: 0 auto;
  }
}

@media (display-mode: standalone) {
  body {
    overscroll-behavior-y: contain;
  }
}