/* V37.6 TARGETED — PC/TABLET ONLY
 * 1) Scrollbar stays invisible until the user presses the actual scrollbar/thumb.
 * 2) PC/tablet composer surface follows the exact message-canvas background.
 * 3) Theme-aware text contrast; mobile intentionally untouched.
 */
@media (min-width:768px){
  /* ===== SCROLLBAR: hidden until scrollbar/thumb interaction ===== */
  .sidebar-scroll-content,
  .chat-main .chat-window,
  .right-info-panel .panel-body,
  .right-info-panel .member-list-wrapper{
    scrollbar-color:transparent transparent !important;
  }

  .sidebar-scroll-content:hover,
  .chat-main .chat-window:hover,
  .right-info-panel .panel-body:hover,
  .right-info-panel .member-list-wrapper:hover{
    scrollbar-color:transparent transparent !important;
  }

  .sidebar-scroll-content::-webkit-scrollbar-thumb,
  .chat-main .chat-window::-webkit-scrollbar-thumb,
  .right-info-panel .panel-body::-webkit-scrollbar-thumb,
  .right-info-panel .member-list-wrapper::-webkit-scrollbar-thumb{
    background:transparent !important;
    border:0 !important;
    border-radius:999px !important;
  }

  /* JS adds this only when the pointer presses the scrollbar area/thumb. */
  .sidebar-scroll-content.v37-scroll-active,
  .chat-main .chat-window.v37-scroll-active,
  .right-info-panel .panel-body.v37-scroll-active,
  .right-info-panel .member-list-wrapper.v37-scroll-active{
    scrollbar-color:color-mix(in srgb,var(--text-sub) 46%,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,
  .right-info-panel .member-list-wrapper.v37-scroll-active::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--text-sub) 46%,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,
  .right-info-panel .member-list-wrapper.v37-scroll-active::-webkit-scrollbar-thumb:hover{
    background:color-mix(in srgb,var(--text-sub) 62%,transparent) !important;
  }

  /* ===== PC/TABLET COMPOSER: same surface as message canvas ===== */
  .chat-main .chat-input-zone,
  .chat-main .chat-input-zone .zalo-toolbar,
  .chat-main .chat-input-zone .zalo-input-area{
    background:var(--bg-main) !important;
    background-color:var(--bg-main) !important;
    background-image:none !important;
    color:var(--text-main) !important;
  }

  .chat-main .chat-input-zone{
    border-top-color:var(--border-color) !important;
  }

  .chat-main .chat-input-zone .z-tool-icon{
    color:var(--text-sub) !important;
  }

  .chat-main .chat-input-zone .zalo-input-box{
    color:var(--text-main) !important;
  }

  .chat-main .chat-input-zone .chat-input{
    color:var(--text-main) !important;
    -webkit-text-fill-color:var(--text-main) !important;
    caret-color:var(--active-bg,#25D366) !important;
  }

  .chat-main .chat-input-zone .chat-input::placeholder{
    color:var(--text-sub) !important;
    -webkit-text-fill-color:var(--text-sub) !important;
    opacity:1 !important;
  }
}