/* V37.7 TARGETED — Emoji panel theme parity + compact drag-only scrollbar.
 * Scope: emoji/sticker chooser only. PC/tablet scroll behavior matches V37.6.
 * No chat/data/menu/mobile logic changes.
 */

/* Keep the picker visually tied to the active workspace theme. */
.emoji-panel{
  background:var(--bg-header) !important;
  color:var(--text-main) !important;
  border-color:var(--border-color) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.28) !important;
}
.emoji-panel .zalo-popup-tabs,
.emoji-panel .zalo-popup-footer{
  background:var(--bg-main) !important;
  color:var(--text-main) !important;
  border-color:var(--border-color) !important;
}
.emoji-panel .zp-tab{
  color:var(--text-sub) !important;
}
.emoji-panel .zp-tab.active{
  color:var(--text-main) !important;
  background:var(--bg-header) !important;
  border-bottom-color:var(--active-bg) !important;
}
.emoji-panel .zalo-popup-footer span:hover,
.emoji-panel .emoji-cell:hover,
.emoji-panel .emoji-cell:focus-visible{
  background:color-mix(in srgb,var(--text-main) 8%,transparent) !important;
  color:var(--text-main) !important;
}

/* PC/tablet: the picker scrollbar uses the same compact 4px language as chat.
   It remains invisible until the actual scrollbar is pressed and dragged. */
@media (min-width:768px){
  .emoji-panel .emoji-grid,
  .emoji-panel .sticker-grid{
    scrollbar-width:thin !important;
    scrollbar-color:transparent transparent !important;
  }

  .emoji-panel .emoji-grid::-webkit-scrollbar,
  .emoji-panel .sticker-grid::-webkit-scrollbar{
    width:4px !important;
    height:0 !important;
  }
  .emoji-panel .emoji-grid::-webkit-scrollbar-track,
  .emoji-panel .sticker-grid::-webkit-scrollbar-track{
    background:transparent !important;
  }
  .emoji-panel .emoji-grid::-webkit-scrollbar-thumb,
  .emoji-panel .sticker-grid::-webkit-scrollbar-thumb{
    background:transparent !important;
    border:0 !important;
    border-radius:999px !important;
    min-height:28px !important;
  }

  .emoji-panel .emoji-grid.v37-scroll-active,
  .emoji-panel .sticker-grid.v37-scroll-active{
    scrollbar-color:color-mix(in srgb,var(--text-sub) 46%,transparent) transparent !important;
  }
  .emoji-panel .emoji-grid.v37-scroll-active::-webkit-scrollbar-thumb,
  .emoji-panel .sticker-grid.v37-scroll-active::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--text-sub) 46%,transparent) !important;
  }
  .emoji-panel .emoji-grid.v37-scroll-active::-webkit-scrollbar-thumb:hover,
  .emoji-panel .sticker-grid.v37-scroll-active::-webkit-scrollbar-thumb:hover{
    background:color-mix(in srgb,var(--text-sub) 62%,transparent) !important;
  }
}

/* Explicit theme fallbacks ensure older hard-coded picker rules cannot force
   a white picker in dark mode. */
:root[data-theme="dark"] .emoji-panel{
  background:var(--bg-header) !important;
  color:var(--text-main) !important;
  border-color:var(--border-color) !important;
}
:root[data-theme="light"] .emoji-panel{
  background:var(--bg-header) !important;
  color:var(--text-main) !important;
  border-color:var(--border-color) !important;
}