.editor-emoji-picker-wrapper {
    background: var(--bg-card);
    border: 1px solid rgba(212, 168, 83, 0.2);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    width: 260px;
    max-width: 260px;
    overflow: hidden;
    z-index: 999;
    /* Appended to document.body, outside the editor — RTL must be explicit */
    direction: rtl;
    text-align: right;
}

.editor-emoji-tab-strip {
    display: flex;
    border-bottom: 1px solid rgba(212, 168, 83, 0.15);
    background: var(--bg-secondary);
}

.editor-emoji-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    padding: 8px 4px;
    text-align: center;
}

.editor-emoji-tab.active {
    border-bottom-color: var(--accent-primary);
    color: var(--text-primary);
}

.editor-emoji-tab:hover {
    color: var(--text-primary);
}

.editor-sticker-panel {
    background: var(--bg-card);
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
}

.editor-sticker-grid,
.editor-system-sticker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
}

.editor-sticker-section-label {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 4px 2px 2px;
    text-align: right;
    letter-spacing: 0.03em;
}

.editor-sticker-section-divider {
    height: 1px;
    background: rgba(212, 168, 83, 0.15);
    margin: 6px 0;
}

.editor-sticker-tile {
    width: 56px;
    height: 56px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-secondary);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.editor-sticker-tile:hover {
    border-color: var(--accent-primary);
}

.editor-sticker-tile-broken {
    background-image: none !important;
    background: repeating-linear-gradient(
        45deg,
        var(--bg-secondary),
        var(--bg-secondary) 6px,
        rgba(212, 168, 83, 0.08) 6px,
        rgba(212, 168, 83, 0.08) 12px
    );
    opacity: 0.55;
}

.editor-sticker-add-tile {
    color: var(--accent-primary);
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Discord-style hover affordance for the native emoji grid cells -- .bem has
   no hover rule at all in the vendored quill-emoji.css. Scoped under
   .editor-emoji-picker-wrapper so it only ever applies inside our picker. */
.editor-emoji-picker-wrapper #emoji-palette {
    direction: rtl;
    text-align: right;
    width: 100%;
    max-width: none;
}

/* Without this, once the native emoji grid (#tab-panel, vendored with
   overflow-y: scroll) is scrolled to its end, further wheel/touch scroll
   chains to the page itself (standard browser scroll-chaining for nested
   scrollables). That page scroll then moves the toolbar's .ql-emoji button,
   which correctly -- but visibly -- drags the picker along with it. Scoped
   here rather than in the vendored quill-emoji.css. */
.editor-emoji-picker-wrapper #tab-panel {
    overscroll-behavior: contain;
}

.editor-emoji-picker-wrapper #tab-toolbar {
    direction: rtl;
}

.editor-emoji-picker-wrapper #tab-toolbar ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

#emoji-palette .bem:hover {
    background: var(--bg-hover);
    border-radius: 4px;
}