/* =========================================================
   Mobile chat composer fit
   ---------------------------------------------------------
   Removes the old bottom-nav clearance from the open chat
   screen, so the message field and send button sit at the
   bottom of the visible chat instead of leaving a blank block.
   Mobile only; conversation list and desktop are untouched.
   ========================================================= */

@media (max-width: 820px) {
  body.mobile-chat-open #messagesTab,
  body.mobile-chat-open #messagesTab.app-tab-panel,
  body.mobile-chat-open #messagesTab.app-tab-panel.active {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  body.mobile-chat-open #messagesTab .chat-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  body.mobile-chat-open #messagesTab .chat-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 18px !important;
  }

  body.mobile-chat-open #messagesTab .message-composer,
  body.mobile-chat-open #messageForm {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    margin-bottom: 0 !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}