/* Compatibility layer for the latest deployable preview build. */
:root {
  --app-frame-height: var(--app-height);
  --bottom-bar-height-adjustment: 0px;
  --bottom-bar-position-shift: 0px;
  --bottom-bar-positive-shift: max(0px, var(--bottom-bar-position-shift));
  --top-bar-offset: 0px;
  --top-bar-height-adjustment: 0px;
  --top-bar-position-shift: 0px;
  --top-bar-positive-shift: max(0px, var(--top-bar-position-shift));
}

body,
#app {
  min-height: var(--app-frame-height);
  height: var(--app-frame-height);
}

@media (min-width: 640px) {
  #app {
    min-height: min(var(--app-frame-height), 900px);
    height: min(var(--app-frame-height), 900px);
  }
}

#app .mobile-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) max-content;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  height: 100%;
}

#app .mobile-shell > :not(.bottom-tabs) {
  grid-row: 1;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

#app .mobile-shell > .bottom-tabs {
  position: relative;
  inset: auto;
  grid-row: 2;
  align-self: end;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--tab-height);
  height: calc(var(--tab-height) + var(--bottom-bar-safe-bottom));
  box-sizing: border-box;
  flex: 0 0 auto;
  transform: translate3d(0, var(--bottom-bar-positive-shift), 0);
}

#app .mobile-shell-has-bottom-tabs > .screen {
  padding-bottom: var(--bottom-bar-safe-bottom);
}

#app [data-link-bottom-bar] {
  --link-bottom-bar-inset: var(--bottom-bar-safe-bottom);
  --link-bottom-bar-extra-bottom: 0px;
  min-width: 0;
  max-width: 100%;
}

#app [data-link-bottom-bar='navigation'],
#app [data-link-bottom-bar='navigation-overlay'],
#app [data-link-bottom-bar='action'],
#app [data-link-bottom-bar='composer'] {
  padding-bottom: calc(var(--link-bottom-bar-extra-bottom) + var(--link-bottom-bar-inset));
}

#app [data-link-bottom-bar='navigation'],
#app [data-link-bottom-bar='navigation-overlay'],
#app [data-link-bottom-bar='action'] {
  transform: translate3d(0, var(--bottom-bar-positive-shift), 0);
}

#app [data-link-bottom-bar='composer'] {
  transform: translate3d(0, calc(var(--bottom-bar-positive-shift) - var(--keyboard-inset)), 0);
}

#app [data-link-bottom-bar='overlay'] {
  bottom: calc(var(--tab-height) + var(--link-bottom-bar-inset));
  transform: translate3d(0, var(--bottom-bar-positive-shift), 0);
}

#app [data-link-top-bar] {
  min-width: 0;
  max-width: 100%;
  margin-block-end: var(--top-bar-position-shift);
  translate: 0 var(--top-bar-position-shift);
}

html[data-top-bar-height-adjusted] #app [data-link-top-bar] {
  min-height: calc(var(--link-top-bar-base-height, 0px) + var(--top-bar-height-adjustment)) !important;
}

#app .forum-bottom-tabs,
#app .theater-bottom-tabs,
#app .profile-theme-bottom-tabs,
#app .offline-settings-tabs,
#app .settings-tabs,
#app .chat-settings-tabs,
#app .manage-tabs,
#app .mcp-service-tabs,
#app .themes-tabs,
#app .service-utility-tabs,
#app .ringtone-tabs,
#app .image-module-tabs,
#app .add-tabs,
#app .wizard-footer,
#app .offline-dock,
#app .save-dock,
#app .gobang-room-composer,
#app .comments-bottom-panel {
  transform: translate3d(0, var(--bottom-bar-positive-shift), 0);
}

#app .couple-tabs {
  bottom: calc(9px + var(--link-bottom-bar-inset));
  transform: translateY(var(--bottom-bar-positive-shift));
}

@media (min-width: 680px) {
  #app .couple-tabs {
    transform: translateX(50%) translateY(var(--bottom-bar-positive-shift));
  }
}