html, body {
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.safe-top {
  padding-top: max(env(safe-area-inset-top), 12px);
}

.safe-bottom {
  padding-bottom: max(env(safe-area-inset-bottom), 8px);
}

input, textarea, select {
  font-size: 16px !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}

.scrollable {
  -webkit-overflow-scrolling: touch;
}

.chats-list {
  overscroll-behavior: contain;
}

button, .tab-button, .btn {
  touch-action: manipulation;
}

.header-title, .tab-button, .profile-label {
  user-select: none;
}

.screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.screen.active {
  transform: translateX(0);
}

.screen.slide-left {
  transform: translateX(-30%);
}