/* Keep the public support chat inside the visual viewport when a mobile keyboard opens. */
:root {
  --web-visual-viewport-height: 100dvh;
  --web-visual-viewport-width: 100vw;
  --web-visual-viewport-offset-top: 0px;
  --web-visual-viewport-offset-left: 0px;
}

@media (max-width: 760px) {
  html.support-keyboard-active,
  html.support-keyboard-active body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #webApp .support-chat__composer textarea {
    font-size: 16px !important;
  }

  #webApp .panel--support {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    height: calc(var(--web-visual-viewport-height, 100dvh) - 86px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #webApp .panel--support .support-chat {
    grid-template-rows: minmax(0, 1fr) auto auto auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 10px 8px !important;
    overflow: hidden !important;
  }

  #webApp .mobile-shell.support-keyboard-open {
    position: fixed !important;
    top: var(--web-visual-viewport-offset-top, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--web-visual-viewport-offset-left, 0px) !important;
    width: var(--web-visual-viewport-width, 100vw) !important;
    height: var(--web-visual-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #webApp .mobile-shell.support-keyboard-open .panel--support {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #webApp .mobile-shell.support-keyboard-open .support-chat {
    grid-template-rows: minmax(0, 1fr) auto auto auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 10px 8px !important;
    overflow: hidden !important;
  }

  #webApp .mobile-shell.support-keyboard-open .support-chat__messages {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  #webApp .mobile-shell.support-keyboard-open .support-chat__composer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}