/* V37.5 TARGETED FINAL — PC/TABLET CHAT ZONES + WHEEL-ACTIVE SCROLLBARS
 * Only visual/interaction polish for the existing 3 chat surfaces at 768px+.
 * No menu, navigation, data, Firebase, message, upload, voice or composer logic.
 */
@media (min-width:768px){
  /* 1) Make the three outer chat columns physically touch: no visual gaps. */
  body{gap:0 !important;}
  .sidebar-menu,
  .chat-main,
  .right-info-panel{
    margin:0 !important;
    gap:0 !important;
    box-sizing:border-box !important;
  }

  /* Remove the older 8px inset from the message surface so the three zones
     meet cleanly. Keep header/composer behavior otherwise unchanged. */
  .chat-main .chat-window{
    margin:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }

  /* 2) One continuous theme surface for chat-list / messages / group info.
     This intentionally uses the existing theme variables in both modes. */
  .sidebar-menu,
  .sidebar-scroll-content,
  .chat-main,
  .chat-main .chat-window,
  .right-info-panel,
  .right-info-panel .panel-body{
    background:var(--bg-main) !important;
  }

  /* Do not let legacy desktop chat-window colors re-introduce a different
     light/dark surface. */
  :root[data-theme="light"] .chat-main,
  :root[data-theme="light"] .chat-main .chat-window,
  :root[data-theme="dark"] .chat-main,
  :root[data-theme="dark"] .chat-main .chat-window{
    background:var(--bg-main) !important;
  }

  /* Keep text readable against the unified surface in both themes. */
  .sidebar-menu,
  .sidebar-scroll-content,
  .chat-main,
  .chat-main .chat-window,
  .right-info-panel,
  .right-info-panel .panel-body{
    color:var(--text-main) !important;
  }

  /* 3) Scrollbars are invisible normally. They become visible ONLY after a
     mouse/trackpad wheel interaction occurs inside that specific zone, then
     fade back after a short idle period (JS toggles .v37-scroll-active). */
  .sidebar-scroll-content,
  .chat-main .chat-window,
  .right-info-panel .panel-body{
    scrollbar-width:thin !important;
    scrollbar-color:transparent transparent !important;
    overflow-y:auto !important;
    overflow-x:hidden !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;
  }

  .sidebar-scroll-content.v37-scroll-active,
  .chat-main .chat-window.v37-scroll-active,
  .right-info-panel .panel-body.v37-scroll-active{
    scrollbar-color:color-mix(in srgb,var(--text-sub) 48%,transparent) transparent !important;
  }

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

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

  /* Nested member list follows the same visual rule without forcing a second
     scrollbar to remain visible. */
  .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.v37-scroll-active{
    scrollbar-color:color-mix(in srgb,var(--text-sub) 48%,transparent) transparent !important;
  }
  .right-info-panel .member-list-wrapper.v37-scroll-active::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--text-sub) 48%,transparent) !important;
  }
}