/* Keep the original icons, colors and selected-button styling. */
:root {
  --replica-navigation-height: calc(74px + env(safe-area-inset-bottom, 0px));
}

html {
  scroll-padding-bottom: var(--replica-navigation-height);
}

#app .app-shell {
  padding-bottom: var(--replica-navigation-height);
}

#app .bottom-nav {
  position: fixed;
  inset: auto 0 0;
  height: var(--replica-navigation-height);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
}

#app .nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

#app .confirm-page .bottom-bar {
  bottom: var(--replica-navigation-height);
}

#app .lottery-page .bottom-bar-inner {
  margin-bottom: var(--replica-navigation-height);
}

#app .chat-page {
  height: calc(100vh - var(--replica-navigation-height));
  height: calc(100dvh - var(--replica-navigation-height));
}

#app input, #app textarea, #app button {
  scroll-margin-bottom: calc(var(--replica-navigation-height) + 16px);
}