/* Pack11E (ADD-ONLY)
   Fixes:
   1) Left + Right panes are independently scrollable (like messages pane)
   2) @ mention suggestions render as a compact dropdown anchored to the composer
   Safe: CSS overrides only; no removal of existing rules.
*/

/* Ensure grid children can shrink so inner overflow works */
.slk-shell > *{ min-height: 0; }

/* LEFT PANE: make it a proper flex column and let the scroll area consume remaining height */
.slk-left{ display:flex !important; flex-direction:column !important; min-height:0 !important; }
.slk-left-head{ flex:0 0 auto; }
.slk-left-scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:auto !important;
  -webkit-overflow-scrolling: touch;
}

/* RIGHT PANE: constrain body and make it scroll */
.slk-right{ display:flex !important; flex-direction:column !important; min-height:0 !important; }
.slk-right-head, .slk-tabs{ flex:0 0 auto; }
.slk-right-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  -webkit-overflow-scrolling: touch;
}

/* If any tab-pane has its own overflow lists, allow them to shrink */
.slk-right-body .slk-tabpane{ min-height:0; }

/* Mention dropdown: anchor to composer box (JS moves #mentionPop inside .slk-compose-box) */
#sendForm{ position:relative !important; }
#sendForm .slk-compose-box{ position:relative !important; }

#mentionPop.slk-mention-pop{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom: calc(100% + 8px) !important;
  max-height: 240px !important;
  overflow:auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(16, 22, 18, .92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;
  z-index: 9999 !important;
}

#mentionPop .slk-mention-item{
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
}
#mentionPop .slk-mention-item .n{ font-size:13px; font-weight:600; }
#mentionPop .slk-mention-item .e{ font-size:12px; opacity:.75; }
#mentionPop .slk-mention-item:hover,
#mentionPop .slk-mention-item.active{ background: rgba(255,255,255,.06); }