/* V37.3 TARGETED — PC/TABLET 3 CHAT ZONES + COMPACT VERTICAL SCROLLBARS
 * Scope: existing PC/tablet chat surfaces only (conversation list, chat canvas,
 * group-info panel). No JS, Firebase, navigation/menu, message/data logic.
 * Mobile <=767px intentionally untouched.
 */

@media (min-width:768px){
  /* ============================================================
     1) THREE-COLUMN CHAT SURFACES
     Keep the existing widths/flex model; only make the boundaries cleaner
     and ensure each surface can stay inside the viewport.
     ============================================================ */
  .sidebar-menu,
  .chat-main,
  .right-info-panel{
    min-width:0 !important;
    min-height:0 !important;
    box-sizing:border-box !important;
  }

  .sidebar-menu{
    border-right:1px solid color-mix(in srgb,var(--border-color) 88%,var(--text-sub) 12%) !important;
  }

  .chat-main{
    border-right:1px solid color-mix(in srgb,var(--border-color) 88%,var(--text-sub) 12%) !important;
    background:var(--bg-main) !important;
  }

  .right-info-panel{
    border-left:0 !important;
    background:var(--bg-sidebar) !important;
  }

  /* Tablet: keep the group-info panel as the third column instead of an
     overlay, matching the PC three-zone composition when it is open. */
  @media (min-width:900px) and (max-width:1023px){
    .right-info-panel.show{
      position:relative !important;
      inset:auto !important;
      top:auto !important;
      right:auto !important;
      bottom:auto !important;
      left:auto !important;
      height:100% !important;
      max-height:100% !important;
      width:320px !important;
      min-width:320px !important;
      flex:0 0 320px !important;
      z-index:35 !important;
      box-shadow:none !important;
    }
  }

  /* ============================================================
     2) COMPACT VERTICAL SCROLLBARS — all three chat zones
     ============================================================ */
  .sidebar-scroll-content,
  .chat-main .chat-window,
  .right-info-panel .panel-body{
    scrollbar-width:thin !important;
    scrollbar-color:color-mix(in srgb,var(--text-sub) 42%,transparent) transparent !important;
  }

  .sidebar-scroll-content::-webkit-scrollbar,
  .chat-main .chat-window::-webkit-scrollbar,
  .right-info-panel .panel-body::-webkit-scrollbar{
    width:4px !important;
    height:4px !important;
  }

  .sidebar-scroll-content::-webkit-scrollbar-track,
  .chat-main .chat-window::-webkit-scrollbar-track,
  .right-info-panel .panel-body::-webkit-scrollbar-track{
    background:transparent !important;
  }

  .sidebar-scroll-content::-webkit-scrollbar-thumb,
  .chat-main .chat-window::-webkit-scrollbar-thumb,
  .right-info-panel .panel-body::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--text-sub) 42%,transparent) !important;
    border:0 !important;
    border-radius:999px !important;
  }

  .sidebar-scroll-content::-webkit-scrollbar-thumb:hover,
  .chat-main .chat-window::-webkit-scrollbar-thumb:hover,
  .right-info-panel .panel-body::-webkit-scrollbar-thumb:hover{
    background:color-mix(in srgb,var(--text-sub) 58%,transparent) !important;
  }

  /* The right information column owns its vertical scroll without changing
     the existing member-list logic. */
  .right-info-panel .panel-body{
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* Avoid a second visible scrollbar on the member list; it remains usable
     when opened and keeps its own existing overflow behavior. */
  .right-info-panel .member-list-wrapper{
    scrollbar-width:thin !important;
  }
  .right-info-panel .member-list-wrapper::-webkit-scrollbar{width:4px !important;}

  /* ============================================================
     3) SMALL VISUAL SPACING — only the three requested chat surfaces
     ============================================================ */
  .sidebar-scroll-content{
    padding-right:7px !important;
  }

  .chat-main .chat-window{
    padding-right:12px !important;
  }

  .right-info-panel .panel-body{
    padding-right:9px !important;
  }
}