/* =========================================================
   WAHAI v6.8.5 - Conversation Viewport Stabilization
   Tujuan: header, daftar chat, isi chat, composer, dan detail
   selalu muat penuh pada zoom 100% tanpa terpotong.
   ========================================================= */

/* Kunci halaman Percakapan ke viewport aplikasi, bukan ke tinggi isi. */
body.conversation-mode{
  height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.conversation-mode #appView{
  height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.conversation-mode .main-area{
  height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:var(--top) minmax(0,1fr)!important;
}
body.conversation-mode .topbar{
  position:relative!important;
  top:auto!important;
  height:var(--top)!important;
  min-height:var(--top)!important;
  max-height:var(--top)!important;
}
body.conversation-mode .content{
  min-height:0!important;
  height:auto!important;
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  padding:12px 16px 16px!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr)!important;
}
body.conversation-mode #view-conversations.active{
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr)!important;
}
body.conversation-mode #view-conversations .inbox-shell{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  align-self:stretch!important;
  overflow:hidden!important;
}

/* Kolom kiri: kepala, pencarian, filter, lalu daftar yang benar-benar scroll. */
body.conversation-mode .inbox-list-pane{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto auto auto minmax(0,1fr)!important;
}
body.conversation-mode .inbox-pane-head{
  min-height:72px!important;
  height:auto!important;
}
body.conversation-mode .conversation-list{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scroll-behavior:auto!important;
  overflow-anchor:none!important;
  scrollbar-width:thin!important;
  scrollbar-gutter:stable!important;
}

/* Kolom tengah: 68px header + isi fleksibel + composer selalu terlihat. */
body.conversation-mode .conversation-main{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
}
body.conversation-mode .conversation-active{
  min-height:0!important;
  height:100%!important;
  width:100%!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:68px minmax(0,1fr) auto!important;
}
body.conversation-mode .conversation-active[hidden]{
  display:none!important;
}
body.conversation-mode .conversation-header{
  height:68px!important;
  min-height:68px!important;
  max-height:68px!important;
  position:relative!important;
  top:auto!important;
}
body.conversation-mode .conversation-scroll-wrap{
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  position:relative!important;
  display:block!important;
}
body.conversation-mode .conversation-scroll-wrap>.conversation-messages{
  min-height:0!important;
  height:100%!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scroll-behavior:auto!important;
  overflow-anchor:none!important;
  scrollbar-width:thin!important;
  scrollbar-gutter:stable!important;
}
body.conversation-mode .reply-composer{
  min-height:0!important;
  max-height:min(260px,42dvh)!important;
  overflow-y:auto!important;
  position:relative!important;
  bottom:auto!important;
  flex:none!important;
  z-index:4!important;
}

/* Panel detail kanan harus punya scroll sendiri, bukan dipotong oleh shell. */
body.conversation-mode .contact-detail-pane{
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-gutter:stable!important;
}

/* Scrollbar cukup terlihat untuk memastikan posisi atas/bawah jelas. */
body.conversation-mode .conversation-list::-webkit-scrollbar,
body.conversation-mode .conversation-scroll-wrap>.conversation-messages::-webkit-scrollbar,
body.conversation-mode .contact-detail-pane::-webkit-scrollbar{
  width:8px!important;
  height:8px!important;
}
body.conversation-mode .conversation-list::-webkit-scrollbar-thumb,
body.conversation-mode .conversation-scroll-wrap>.conversation-messages::-webkit-scrollbar-thumb,
body.conversation-mode .contact-detail-pane::-webkit-scrollbar-thumb{
  background:#c7ceda!important;
  border-radius:999px!important;
  border:2px solid transparent!important;
  background-clip:padding-box!important;
}
body.conversation-mode .conversation-list::-webkit-scrollbar-track,
body.conversation-mode .conversation-scroll-wrap>.conversation-messages::-webkit-scrollbar-track,
body.conversation-mode .contact-detail-pane::-webkit-scrollbar-track{
  background:transparent!important;
}

/* Pemilih grup/kontak tetap scroll normal dari baris pertama. */
.recipient-picker{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scroll-behavior:auto!important;
  overflow-anchor:none!important;
  scrollbar-width:thin!important;
  scrollbar-gutter:stable!important;
}

@media(max-width:1280px){
  body.conversation-mode .contact-detail-pane{display:none!important}
}
@media(max-width:900px){
  body.conversation-mode .content{
    padding:8px!important;
    padding-bottom:calc(8px + 66px + env(safe-area-inset-bottom))!important;
  }
  body.conversation-mode #view-conversations .inbox-shell{border-radius:14px!important}
  body.conversation-mode .conversation-main{
    position:absolute!important;
    inset:0!important;
  }
  body.conversation-mode .conversation-main.mobile-open{display:flex!important}
  body.conversation-mode .conversation-header{position:relative!important}
  body.conversation-mode .reply-composer{position:relative!important;padding-bottom:10px!important}
  body.conversation-mode .contact-detail-pane.open{
    display:block!important;
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
  }
}


/* UX-CONVERSATION-PANELS-V1 */
@media(min-width:901px){
 body.conversation-mode #view-conversations .inbox-shell{grid-template-columns:330px minmax(460px,1fr) 250px!important;transition:grid-template-columns .18s ease!important}
 body.conversation-mode #view-conversations .inbox-shell.ux-left-hidden{grid-template-columns:0 minmax(460px,1fr) 250px!important}
 body.conversation-mode #view-conversations .inbox-shell.ux-right-hidden{grid-template-columns:330px minmax(460px,1fr) 0!important}
 body.conversation-mode #view-conversations .inbox-shell.ux-left-hidden.ux-right-hidden{grid-template-columns:0 minmax(460px,1fr) 0!important}
 body.conversation-mode #view-conversations .inbox-shell.ux-left-hidden>.inbox-list-pane{display:none!important}
 body.conversation-mode #view-conversations .inbox-shell.ux-right-hidden>.contact-detail-pane{display:none!important}
 body.conversation-mode #view-conversations .inbox-shell:not(.ux-right-hidden)>.contact-detail-pane{display:block!important}
}
@media(max-width:900px){#conversationListToggle{display:none!important}}