/* V35.5 TARGETED — Admin Message Management scrolling only.
 * Scope: #messagesPane only. No bottom navigation/menu selectors.
 * Goal: show ALL messages of the selected group with one reliable vertical
 * scrollbar on PC, tablet and mobile; prevent the outer admin modal from
 * stealing the scroll.
 */

/* When Message Management is active, its pane owns the available height. */
#adminModal .admin-modal-body:has(#messagesPane.active){
  min-height:0 !important;
  overflow:hidden !important;
}

#adminModal #messagesPane.active{
  display:flex !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
}

#adminModal #messagesPane .msg-mgmt-container{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
}

#adminModal #messagesPane .msg-mgmt-content{
  flex:1 1 auto !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
}

#adminModal #messagesPane .msg-mgmt-content > div:first-child{
  flex:0 0 auto !important;
  min-height:0 !important;
}

#adminModal #messagesPane .admin-message-scroll{
  flex:1 1 0 !important;
  min-height:0 !important;
  height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
}

#adminModal #messagesPane .admin-table{
  margin:0 !important;
}

/* Tablet + mobile: room selector remains horizontal; message list is the
   single vertical scrolling area underneath it. */
@media (max-width:1024px){
  #adminModal #messagesPane.active{
    min-height:0 !important;
  }

  #adminModal #messagesPane .msg-mgmt-container{
    flex-direction:column !important;
  }

  #adminModal #messagesPane .msg-mgmt-sidebar{
    flex:0 0 auto !important;
    width:100% !important;
    min-height:58px !important;
    max-height:96px !important;
    height:68px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }

  #adminModal #messagesPane .msg-mgmt-content{
    flex:1 1 0 !important;
    min-height:0 !important;
    height:0 !important;
  }

  #adminModal #messagesPane .admin-message-scroll{
    flex:1 1 0 !important;
    min-height:0 !important;
    height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:auto !important;
  }
}

@media (max-width:767px){
  #adminModal #messagesPane .msg-mgmt-sidebar{
    flex-basis:62px !important;
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
  }

  #adminModal #messagesPane .msg-mgmt-content > div:first-child{
    padding:7px 8px !important;
  }

  #adminModal #messagesPane .admin-message-scroll{
    overflow-y:auto !important;
    overflow-x:auto !important;
    scrollbar-width:auto !important;
  }

  /* Keep the table inside the scroller so every row remains reachable. */
  #adminModal #messagesPane .admin-table{
    height:auto !important;
    max-height:none !important;
  }
}