:root {
  --wt-stable-viewport-height: 100vh;
  --wt-visual-viewport-height: 100vh;
  --wt-viewport-offset-top: 0px;
  --wt-keyboard-inset: 0px;
}

@supports (height: 100dvh) {
  :root {
    --wt-stable-viewport-height: 100dvh;
    --wt-visual-viewport-height: 100dvh;
  }
}

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-height: var(--wt-stable-viewport-height);
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

@supports (overflow: clip) {
  html,
  body,
  #app {
    overflow-x: clip;
  }
}

#app,
.app-shell,
.container,
main {
  min-width: 0;
  max-width: 100%;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

:where(button, a, input, textarea, select, summary, label[for]) {
  touch-action: manipulation;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select
  ) {
    /* iOS Safari zooms the whole page when a smaller form control receives focus. */
    font-size: 16px !important;
  }

  :where(input, textarea, select, [contenteditable="true"]) {
    scroll-margin-top: max(72px, calc(env(safe-area-inset-top) + 58px));
    scroll-margin-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  }

  .app-shell {
    min-height: var(--wt-stable-viewport-height);
  }

  body.wt-keyboard-open .mobile-tabbar {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.wt-keyboard-open :where(.ui-dialog-card, .community-create-dialog, .note-editor) {
    max-height: var(--wt-visual-viewport-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.wt-keyboard-open .mobile-tabbar {
    transition: none !important;
  }
}

/* Keep touch-first landscape devices on the mobile navigation model even when
   their CSS viewport is wider than the compact-layout breakpoint. */
@media (min-width: 821px) and (hover: none) and (pointer: coarse) {
  body:not(.has-live-quiz):not(.is-messenger-photo-drafting):not(.is-messenger-photo-viewing)
    .app-shell:not(.has-note-editor):not([data-view="quiz-host"]):not([data-view="quiz-live"]) {
    padding-bottom: calc(var(--polish-mobile-tab-h, 60px) + env(safe-area-inset-bottom) + 12px);
  }

  body:not(.has-live-quiz):not(.is-messenger-photo-drafting):not(.is-messenger-photo-viewing)
    .app-shell:not(.has-note-editor):not([data-view="quiz-host"]):not([data-view="quiz-live"])
    > .topbar :is(.primary-nav, .nav) {
    display: none;
  }

  body:not(.has-live-quiz):not(.is-messenger-photo-drafting):not(.is-messenger-photo-viewing)
    .app-shell:not(.has-note-editor):not([data-view="quiz-host"]):not([data-view="quiz-live"])
    > .mobile-tabbar {
    position: fixed;
    z-index: 50;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: grid;
    width: 100% !important;
    max-width: none !important;
    height: calc(var(--polish-mobile-tab-h, 60px) + env(safe-area-inset-bottom));
    min-height: calc(var(--polish-mobile-tab-h, 60px) + env(safe-area-inset-bottom));
    grid-template-columns: repeat(var(--mobile-tab-count, 5), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: initial;
    overflow: visible !important;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.98);
    padding: 2px 6px env(safe-area-inset-bottom) !important;
    box-shadow: 0 -4px 16px rgba(20, 45, 34, 0.06);
    backdrop-filter: blur(14px);
    transform: none;
  }

  body:not(.has-live-quiz):not(.is-messenger-photo-drafting):not(.is-messenger-photo-viewing)
    .app-shell:not(.has-note-editor):not([data-view="quiz-host"]):not([data-view="quiz-live"])
    > .mobile-tabbar
    > button {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    height: 56px;
    min-height: 56px;
    place-content: center;
    gap: 2px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 4px 2px 3px;
    color: #707b75;
    font-size: 10px;
    font-weight: 550;
  }

  body:not(.has-live-quiz):not(.is-messenger-photo-drafting):not(.is-messenger-photo-viewing)
    .app-shell:not(.has-note-editor):not([data-view="quiz-host"]):not([data-view="quiz-live"])
    > .mobile-tabbar
    > button.active {
    background: transparent;
    color: var(--brand);
  }
}