:root{--app-height:100vh}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
#app{height:100%;overflow:hidden}
.app-shell{height:100%;overflow:hidden}

@media(max-width:980px){
  .sidebar-panel{height:100%}

  body.chat-open .chat-panel{
    height:100%;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  /* Header: fixed to top */
  body.chat-open .chat-header-mobile{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:999 !important;
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
  }
  /* Input: always fixed to bottom of visual viewport */
  body.chat-open .input-area-mobile{
    position:fixed !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:999 !important;
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
  }

  /* Messages: leave room for fixed header and input */
  body.chat-open .messages-list-mobile{
    flex:1;min-height:0;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-top:calc(var(--topbar-h) + 8px) !important;
    padding-bottom:calc(var(--composer-h) + 8px) !important;
  }
  /* Prevent body/chat-panel from scrolling */
  body.chat-open{
    position:fixed !important;
    width:100%;height:100%;
    overflow:hidden !important;
  }
  body.chat-open .chat-panel{
    position:fixed !important;
    top:0;left:0;right:0;bottom:0;
  }
}

@media(display-mode:standalone){
  html,body{position:fixed;top:0;left:0;right:0;bottom:0}
}