/* V37.4 TARGETED — PC/TABLET 3 CHAT ZONES + INTERACTION SCROLLBARS
 * Scope: PC/tablet chat surfaces only (768px+).
 * Visual-only: no JS, Firebase, navigation, menu, message or composer logic.
 * Mobile <=767px is intentionally untouched.
 */

@media (min-width:768px){
  /* ============================================================
     1) THREE ZONES — stable, aligned columns
     ============================================================ */
  .sidebar-menu,
  .chat-main,
  .right-info-panel{
    box-sizing:border-box !important;
    min-width:0 !important;
    min-height:0 !important;
    color:var(--text-main) !important;
  }

  /* One continuous surface across chat list / messages / group info. */
  .sidebar-menu,
  .chat-main,
  .right-info-panel,
  .sidebar-scroll-content,
  .chat-window,
  .right-info-panel .panel-body{
    background:var(--bg-main) !important;
  }

  /* Clean, consistent vertical boundaries. */
  .sidebar-menu{
    border-right:1px solid var(--border-color) !important;
  }
  .chat-main{
    border-right:1px solid var(--border-color) !important;
  }
  .right-info-panel{
    border-left:0 !important;
  }

  /* Desktop: balanced three-column proportions close to the reference. */
  @media (min-width:1024px){
    .sidebar-menu{
      width:300px !important;
      flex:0 0 300px !important;
    }
    .right-info-panel{
      width:340px !important;
      min-width:340px !important;
      flex:0 0 340px !important;
    }
  }

  /* Tablet: keep the group panel in the third column, not as an overlay. */
  @media (min-width:768px) and (max-width:1023px){
    .sidebar-menu{
      width:230px !important;
      flex:0 0 230px !important;
    }

    .right-info-panel.show{
      position:relative !important;
      inset:auto !important;
      top:auto !important;
      right:auto !important;
      bottom:auto !important;
      left:auto !important;
      width:280px !important;
      min-width:280px !important;
      max-width:280px !important;
      height:100% !important;
      max-height:100% !important;
      flex:0 0 280px !important;
      z-index:35 !important;
      box-shadow:none !important;
      transform:none !important;
    }
  }

  /* Keep all three vertical surfaces flush to the same top/bottom edges. */
  .sidebar-menu,
  .chat-main,
  .right-info-panel{
    height:100% !important;
    max-height:100% !important;
    overflow:hidden !important;
  }

  /* ============================================================
     2) COMPACT SCROLLBAR — invisible until the user interacts
     Hovering/scrolling inside the zone reveals only the 4px thumb.
     ============================================================ */
  .sidebar-scroll-content,
  .chat-main .chat-window,
  .right-info-panel .panel-body{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:thin !important;
    scrollbar-color:transparent transparent !important;
    overscroll-behavior:contain !important;
  }

  .sidebar-scroll-content::-webkit-scrollbar,
  .chat-main .chat-window::-webkit-scrollbar,
  .right-info-panel .panel-body::-webkit-scrollbar{
    width:4px !important;
    height:0 !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:transparent !important;
    border:0 !important;
    border-radius:999px !important;
    min-height:28px !important;
  }

  /* The scrollbar appears only while the pointer is working inside that zone. */
  .sidebar-scroll-content:hover,
  .chat-main .chat-window:hover,
  .right-info-panel .panel-body:hover{
    scrollbar-color:color-mix(in srgb,var(--text-sub) 46%,transparent) transparent !important;
  }

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

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

  /* Member list is a nested scroll surface: same compact language. */
  .right-info-panel .member-list-wrapper{
    scrollbar-width:thin !important;
    scrollbar-color:transparent transparent !important;
  }
  .right-info-panel .member-list-wrapper::-webkit-scrollbar{
    width:4px !important;
    height:0 !important;
  }
  .right-info-panel .member-list-wrapper::-webkit-scrollbar-thumb{
    background:transparent !important;
    border:0 !important;
    border-radius:999px !important;
  }
  .right-info-panel .member-list-wrapper:hover{
    scrollbar-color:color-mix(in srgb,var(--text-sub) 46%,transparent) transparent !important;
  }
  .right-info-panel .member-list-wrapper:hover::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--text-sub) 46%,transparent) !important;
  }

  /* ============================================================
     3) LIGHT/DARK TEXT CONTRAST — use existing theme variables
     ============================================================ */
  .sidebar-menu .room-title,
  .sidebar-menu .room-info,
  .chat-main .chat-header-name,
  .right-info-panel .room-title,
  .right-info-panel .member-dropdown-header,
  .right-info-panel .member-row,
  .right-info-panel .panel-section-title,
  .right-info-panel .panel-body{
    color:var(--text-main) !important;
  }

  .sidebar-menu .room-sub,
  .chat-main .msg-sender,
  .chat-main .msg-status,
  .right-info-panel .room-sub,
  .right-info-panel .panel-section-title{
    color:var(--text-sub) !important;
  }

  .chat-main .chat-header,
  .sidebar-menu .search-box-area,
  .sidebar-menu .filter-tabs,
  .right-info-panel .panel-top{
    color:var(--text-main) !important;
  }

  /* Preserve the existing light/dark input readability. */
  .sidebar-menu .search-input,
  .chat-main .msg-search-box,
  .right-info-panel .add-input{
    color:var(--text-main) !important;
    -webkit-text-fill-color:var(--text-main) !important;
  }

  .sidebar-menu .search-input::placeholder,
  .chat-main .msg-search-box::placeholder,
  .right-info-panel .add-input::placeholder{
    color:var(--text-sub) !important;
    opacity:1 !important;
  }
}