.vs-emoji-btn{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:34px;height:34px;border-radius:50%;border:none;background:transparent;
  color:var(--muted);cursor:pointer;transition:background .15s,color .15s;
}
.vs-emoji-btn:hover{background:var(--surface);color:var(--text)}
.vs-emoji-btn--active{background:var(--surface);color:var(--primary)}

.vs-emoji-panel{
  position:fixed;z-index:99999;width:300px;height:280px;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  display:flex;flex-direction:column;overflow:hidden;
  animation:vsEmojiIn .12s ease-out both;
}
@keyframes vsEmojiIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.vs-emoji-panel--below{animation:vsEmojiInDown .12s ease-out both}
@keyframes vsEmojiInDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.vs-emoji-tabs{
  display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto;
}
.vs-emoji-tab{
  flex:1;min-width:32px;padding:5px 0;border:none;background:none;border-radius:8px;
  font-size:16px;cursor:pointer;transition:background .15s;
}
.vs-emoji-tab:hover{background:var(--surface)}
.vs-emoji-tab.active{background:rgba(var(--primary-rgb),.14)}

.vs-emoji-grid{
  flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(6,1fr);
  gap:2px;padding:8px;align-content:start;
}
.vs-emoji-cell{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1;border:none;background:none;border-radius:8px;
  font-size:20px;cursor:pointer;transition:background .12s;line-height:1;
}
.vs-emoji-cell:hover{background:var(--surface)}

/* Mobile — full-width bottom sheet instead of a floating popover. Opening it
   doesn't blur the comment/chat input behind it (mousedown preventDefault
   keeps focus there), so the on-screen keyboard usually stays up — bottom
   uses the same 100vh-100dvh trick as the lightbox comment sheet and chat
   dock so it sits above the keyboard instead of partly behind it, with no
   JS viewport tracking needed. */
.vs-emoji-panel--sheet{
  position:fixed;left:0;right:0;bottom:calc(100vh - 100dvh);top:auto;width:auto;
  height:min(46vh,340px);border-radius:16px 16px 0 0;
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -8px 32px rgba(0,0,0,.45);
  animation:vsEmojiSheetIn .16s ease-out both;
}
@keyframes vsEmojiSheetIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.vs-emoji-panel--sheet .vs-emoji-tab{font-size:19px;padding:8px 0}
.vs-emoji-panel--sheet .vs-emoji-grid{grid-template-columns:repeat(7,1fr)}
.vs-emoji-panel--sheet .vs-emoji-cell{font-size:24px}