/* ================================================================
   V5.3 Chat panel polish — search + group member panel
   Final override layer. Keeps PC/tablet/mobile rules isolated.
   ================================================================ */

/* ---------- Message search: always available on desktop/tablet ---------- */
.msg-search-wrapper{
  position:relative;
  display:flex !important;
  align-items:center;
  flex:0 0 auto;
}
.msg-search-wrapper::before{
  content:'⌕';
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-52%);
  color:#94a3b8;
  font-size:18px;
  line-height:1;
  pointer-events:none;
  z-index:2;
}
.msg-search-box{
  width:220px !important;
  height:38px !important;
  min-height:38px !important;
  box-sizing:border-box !important;
  padding:0 14px 0 34px !important;
  border-radius:11px !important;
  background:var(--input-bg) !important;
  border:1px solid var(--border-color) !important;
  color:var(--text-main) !important;
  font-size:13px !important;
  transition:border-color .18s ease, box-shadow .18s ease, width .18s ease !important;
}
.msg-search-box:focus{
  width:260px !important;
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) .13, transparent) !important;
  outline:none !important;
}
.msg-search-box::placeholder{ color:#94a3b8 !important; opacity:1 !important; }

/* ---------- Right group information panel ---------- */
.right-info-panel{
  width:360px !important;
  min-width:360px !important;
}
.panel-body{
  min-height:0 !important;
  overflow:hidden !important;
}
.panel-body > div:last-child{
  display:flex !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  flex-direction:column !important;
}
.member-dropdown-header{
  flex:0 0 auto !important;
  min-height:42px !important;
  box-sizing:border-box !important;
  padding:10px 12px !important;
}
.member-list-wrapper{
  display:none;
  flex:1 1 auto !important;
  min-height:180px !important;
  max-height:none !important;
  height:auto !important;
  margin-top:8px !important;
  padding-right:4px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:thin;
}
.member-list-wrapper.show{ display:flex !important; }
.member-list-wrapper::-webkit-scrollbar{ width:6px; }
.member-list-wrapper::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.38);
  border-radius:999px;
}
.member-row{
  min-height:48px !important;
  padding:8px 10px !important;
  box-sizing:border-box !important;
  flex:0 0 auto !important;
}
.member-left{ gap:10px !important; }
.member-name-wrap{ gap:2px !important; }
.member-name-wrap > div:first-child{ font-size:13px !important; }
.member-name-wrap > div:last-child{ font-size:11px !important; }

/* Give the panel enough room while keeping the chat center usable. */
@media (min-width:1200px){
  .right-info-panel{ width:380px !important; min-width:380px !important; }
}

/* ---------- Tablet ---------- */
@media (min-width:768px) and (max-width:1199px){
  .msg-search-box{ width:190px !important; }
  .msg-search-box:focus{ width:220px !important; }
  .right-info-panel{ width:320px !important; min-width:320px !important; }
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  /* Keep message search accessible without crowding the header. */
  .msg-search-wrapper{ display:flex !important; }
  .msg-search-box{
    width:44px !important;
    padding-left:34px !important;
    padding-right:8px !important;
    color:transparent !important;
    cursor:pointer !important;
  }
  .msg-search-box:focus,
  .msg-search-box:not(:placeholder-shown){
    width:min(210px, calc(100vw - 120px)) !important;
    color:var(--text-main) !important;
    padding-right:10px !important;
  }
  .msg-search-box::placeholder{ color:transparent !important; }
  .msg-search-wrapper::before{ left:13px; font-size:20px; }

  .right-info-panel{
    width:100% !important;
    min-width:0 !important;
  }
  .panel-body{ overflow:hidden !important; }
  .member-list-wrapper{ min-height:140px !important; }
}