.emo-wrap{ position:relative; flex:0 0 auto; align-self:flex-end; }
.emo-btn{
  width:44px; height:44px; padding:0; flex:0 0 44px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1; cursor:pointer;
  border:1px solid var(--ch-line, #E7EAF1); border-radius:10px;
  background:var(--ch-bg, #F5F6FA); color:inherit; font-family:inherit;
}
.emo-btn:hover,.emo-btn.is-on{
  background:var(--ch-brand-soft, rgba(60,1,175,.07));
  border-color:var(--ch-brand, #3C01AF);
}
.emo-pop{
  position:absolute; bottom:calc(100% + 8px); inset-inline-start:0; z-index:40;
  width:min(320px, calc(100vw - 28px));
  background:var(--ch-paper, #fff); border:1px solid var(--ch-line, #E7EAF1);
  border-radius:14px; box-shadow:0 18px 40px -18px rgba(19,21,44,.45);
  overflow:hidden; display:flex; flex-direction:column;
}
.emo-tabs{
  display:flex; gap:2px; padding:6px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--ch-line, #E7EAF1); flex:0 0 auto;
}
.emo-tabs::-webkit-scrollbar{ display:none; }
.emo-tab{
  flex:0 0 auto; padding:7px 11px; border-radius:8px; border:0;
  background:none; cursor:pointer; font-family:inherit; font-size:12px;
  font-weight:700; color:var(--ch-ink3, #7A8394); white-space:nowrap;
  min-height:34px;
}
.emo-tab:hover{ background:var(--ch-brand-soft, rgba(60,1,175,.07)); }
.emo-tab.is-on{ background:var(--ch-brand-soft, rgba(60,1,175,.07)); color:var(--ch-brand, #3C01AF); }
.emo-body{ overflow-y:auto; max-height:min(46vh, 260px); overscroll-behavior:contain; }
.emo-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(42px, 1fr));
  gap:2px; padding:8px;
}
.emo-item{
  aspect-ratio:1; min-height:42px; display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; border:0; border-radius:9px;
  background:none; cursor:pointer; font-family:inherit; padding:0;
}
.emo-item:hover{ background:var(--ch-brand-soft, rgba(60,1,175,.07)); }
.emo-item:active{ transform:scale(.92); }

html[data-theme="dark"] .emo-btn{ background:#1A1D33; border-color:rgba(255,255,255,.14); }
html[data-theme="dark"] .emo-pop{ background:#14162B; border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .emo-tab.is-on{ color:#B9A2FF; }

@media (max-width: 620px){
  .emo-btn{ width:40px; height:40px; flex:0 0 40px; font-size:17px; }
  .emo-pop{ width:min(300px, calc(100vw - 20px)); }
  .emo-grid{ grid-template-columns:repeat(auto-fill, minmax(40px, 1fr)); }
  .emo-item{ min-height:40px; font-size:20px; }
  .emo-body{ max-height:min(40vh, 220px); }
}

/* hidden باید بر display غلبه کند */
.emo-pop[hidden],
.emo-grid[hidden]{ display:none !important; }