/* Overrides for quill-emoji (CDN) so it fits the dark theme and doesn't clip/cut off.
   This file MUST be loaded after quill-emoji.css. */

/* Prevent clipping inside the editor wrapper */
.forum-editor,
.forum-editor .ql-toolbar,
.forum-editor .ql-container{
  overflow: visible !important;
}

/* The picker is injected near the toolbar. Make it float above everything. */
.ql-emoji-picker{
  position: fixed !important;
  z-index: 100000 !important;
  background: #0f1a2b !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
}

/* Make the grid scroll instead of being cut off */
.ql-emoji-picker .ql-emoji-mart,
.ql-emoji-picker .emoji-mart,
.ql-emoji-picker .emoji-mart-scroll,
.ql-emoji-picker .emoji-mart-scroll > div,
.ql-emoji-picker .emoji-container{
  max-height: 260px !important;
  overflow-y: auto !important;
}

/* Smaller frames around emoji items */
.ql-emoji-picker .emoji-mart-emoji,
.ql-emoji-picker .emoji-item,
.ql-emoji-picker .emoji{
  padding: 2px !important;
  margin: 1px !important;
  border-radius: 8px !important;
}

/* If the library uses buttons */
.ql-emoji-picker button{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Tweak category/tabs row spacing */
.ql-emoji-picker .emoji-mart-bar,
.ql-emoji-picker .emoji-mart-anchors{
  padding: 4px 6px !important;
}

/* Dark search/input if present */
.ql-emoji-picker input,
.ql-emoji-picker .emoji-mart-search input{
  background: #0b1320 !important;
  color: #c7d5e0 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
}