/* Keep private navigation below the sliding mobile topbar on wide phones. */
@media (max-width: 768px) {
  #typingIndicator:not(.is-active) {
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .main-room-guide-pin {
    padding-top: 0 !important;
  }

  #main,
  #composer,
  #form,
  #form .composer-input-shell,
  #input {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #main,
  #composer,
  #form,
  #form .composer-input-shell {
    width: 100% !important;
  }

  #composer {
    overflow-x: clip !important;
  }

  #composer > .composer-right {
    min-width: 0 !important;
    max-width: 42px !important;
  }

  body.mobile-topbar-visible #mobileTopbar,
  body.menu-open #mobileTopbar {
    z-index: 1800 !important;
  }

  body.mobile-topbar-visible #sidebar,
  body.menu-open #sidebar {
    top: calc(var(--mobileHeaderH, 72px) + env(safe-area-inset-top, 0px)) !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    height: calc(var(--mobileViewportH, 100dvh) - var(--mobileHeaderH, 72px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(var(--mobileViewportH, 100dvh) - var(--mobileHeaderH, 72px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1700 !important;
  }

  body.private-open #privatePanel,
  body.main-collapsed #privatePanel {
    top: env(safe-area-inset-top, 0px) !important;
    height: calc(var(--mobileViewportH, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(var(--mobileViewportH, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    transition: transform .2s ease !important;
  }

  body.private-open.mobile-topbar-visible #privatePanel,
  body.private-open.menu-open #privatePanel,
  body.main-collapsed.mobile-topbar-visible #privatePanel,
  body.main-collapsed.menu-open #privatePanel {
    top: max(calc(var(--mobileHeaderH, 72px) + env(safe-area-inset-top, 0px)), var(--mobileTopbarMeasuredH, 0px)) !important;
    height: calc(var(--mobileViewportH, 100dvh) - max(calc(var(--mobileHeaderH, 72px) + env(safe-area-inset-top, 0px)), var(--mobileTopbarMeasuredH, 0px)) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(var(--mobileViewportH, 100dvh) - max(calc(var(--mobileHeaderH, 72px) + env(safe-area-inset-top, 0px)), var(--mobileTopbarMeasuredH, 0px)) - env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mobile-topbar-visible #privatePanel,
  body.menu-open #privatePanel {
    top: max(calc(var(--mobileHeaderH, 72px) + env(safe-area-inset-top, 0px)), var(--mobileTopbarMeasuredH, 0px)) !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  body.private-open #privateDialogTabs,
  body.main-collapsed #privateDialogTabs {
    position: relative !important;
    top: auto !important;
    z-index: 32 !important;
    flex-shrink: 0 !important;
    overflow-x: auto !important;
    background: rgba(255,255,255,.96) !important;
  }

  body.private-open #privateHeader,
  body.main-collapsed #privateHeader {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 34 !important;
    background: rgba(255,255,255,.97) !important;
  }

  body.private-open #privateDialogs,
  body.main-collapsed #privateDialogs {
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  body #main #chatContainer {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #composer {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    gap: 8px !important;
    align-items: center !important;
    bottom: 58px !important;
  }

  #form {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    align-items: center !important;
    transform: translateY(2px) !important;
  }

  #composer > .composer-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    min-height: 0 !important;
  }

  #emojiBtn {
    align-self: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    transform: translateY(2px) !important;
  }

  #form #roomSendBtn {
    right: 7px !important;
    bottom: 6px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    --send-offset-x: 0px !important;
    --send-offset-y: 0px !important;
  }

  body.private-open #privatePanel,
  body.main-collapsed #privatePanel {
    padding-bottom: 0 !important;
  }

  body.private-open #privateComposer,
  body.main-collapsed #privateComposer {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    gap: 2px !important;
    background: rgba(255,255,255,.97) !important;
  }

  body.private-open #privateMobileVideoHint,
  body.main-collapsed #privateMobileVideoHint {
    display: none !important;
  }

  body.private-open #privateSendBtn,
  body.main-collapsed #privateSendBtn {
    right: 7px !important;
    bottom: 4px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    --send-offset-x: 0px !important;
    --send-offset-y: 0px !important;
  }
}

/* iOS Safari aligns the standalone emoji button lower than the textarea. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) and (orientation: portrait) {
    body #main #composer > .composer-right {
      position: relative !important;
      top: -18px !important;
    }

    body #main #emojiBtn {
      transform: none !important;
    }
  }
}

@media (min-width: 769px) and (max-width: 1024px) and (max-height: 520px) and (pointer: coarse) and (orientation: landscape) {
  #mobileTopbar {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    min-height: var(--mobileHeaderH, 52px) !important;
  }

  #privatePanel {
    position: fixed !important;
    right: 0 !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    width: min(90vw, 420px) !important;
    max-width: min(90vw, 420px) !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(110%) !important;
    overflow: hidden !important;
  }

  body.private-open #privatePanel,
  body.main-collapsed #privatePanel {
    transform: translateX(0) !important;
  }

  body.main-collapsed #privatePanel {
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  #privateDesktopToggle {
    display: none !important;
  }

  #privateChatContainer {
    min-height: 0 !important;
    padding-bottom: 2px !important;
  }

  #privateComposer {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 4px max(2px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 4px !important;
    background: rgba(255,255,255,.94) !important;
  }

  #privateForm.composer-form {
    min-height: 0 !important;
    gap: 4px !important;
    align-items: center !important;
  }

  #privateInput {
    height: 36px !important;
    min-height: 36px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #privateEmojiBtn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px !important;
  }

  body.private-open #privatePanel,
  body.main-collapsed #privatePanel {
    top: env(safe-area-inset-top, 0px) !important;
    height: calc(var(--mobileViewportH, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(var(--mobileViewportH, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    transition: top .2s ease, height .2s ease, max-height .2s ease !important;
  }

  body.private-open.mobile-topbar-visible #privatePanel,
  body.private-open.menu-open #privatePanel,
  body.main-collapsed.mobile-topbar-visible #privatePanel,
  body.main-collapsed.menu-open #privatePanel {
    top: max(calc(var(--mobileHeaderH, 52px) + env(safe-area-inset-top, 0px)), var(--mobileTopbarMeasuredH, 0px)) !important;
    height: calc(var(--mobileViewportH, 100dvh) - max(calc(var(--mobileHeaderH, 52px) + env(safe-area-inset-top, 0px)), var(--mobileTopbarMeasuredH, 0px)) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(var(--mobileViewportH, 100dvh) - max(calc(var(--mobileHeaderH, 52px) + env(safe-area-inset-top, 0px)), var(--mobileTopbarMeasuredH, 0px)) - env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mobile-topbar-visible #privatePanel,
  body.menu-open #privatePanel {
    top: max(calc(var(--mobileHeaderH, 52px) + env(safe-area-inset-top, 0px)), var(--mobileTopbarMeasuredH, 0px)) !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  body.private-open #privateDialogTabs,
  body.main-collapsed #privateDialogTabs {
    position: relative !important;
    top: auto !important;
    z-index: 32 !important;
    flex: 0 0 31px !important;
    min-height: 31px !important;
    gap: 4px !important;
    padding: 3px 6px !important;
    overflow-x: auto !important;
    background: rgba(255,255,255,.96) !important;
  }

  body.private-open #privateDialogTabs button,
  body.main-collapsed #privateDialogTabs button {
    min-height: 25px !important;
    height: 25px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}