/* =================================================================
   Emoji picker — reusable floating panel.
   Attach to any textarea by calling EmojiPicker.attach(textarea, button).
   ================================================================= */

.emoji-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 5px; border: 1px solid var(--border);
    background: var(--paper); font-size: 1.1rem; cursor: pointer;
    transition: background .12s ease;
    flex-shrink: 0;
}
.emoji-trigger:hover { background: var(--border); }

.emoji-panel {
    position: fixed; z-index: 9000;
    width: 320px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 5px;
    box-shadow: 0 8px 32px -8px rgba(0,0,0,.2);
    display: flex; flex-direction: column;
    overflow: hidden;
    opacity: 0; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
.emoji-panel.is-open {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}

/* Search */
.emoji-search-wrap { padding: .55rem .6rem; border-bottom: 1px solid var(--border); }
.emoji-search {
    width: 100%; padding: .45rem .65rem; border: 1px solid var(--border);
    border-radius: 5px; background: var(--paper); font-size: .85rem;
    font-family: inherit;
}
.emoji-search:focus { outline: 2px solid var(--marigold, #f4a300); outline-offset: 1px; }

/* Category tabs */
.emoji-cats {
    display: flex; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.emoji-cats::-webkit-scrollbar { display: none; }
.emoji-cat-btn {
    flex-shrink: 0; padding: .45rem .6rem; font-size: 1rem;
    background: none; border: none; cursor: pointer; opacity: .5;
    border-bottom: 2px solid transparent; transition: opacity .12s ease;
}
.emoji-cat-btn:hover,
.emoji-cat-btn.is-active { opacity: 1; border-bottom-color: var(--marigold, #f4a300); }

/* Emoji grid */
.emoji-grid-wrap {
    flex: 1; overflow-y: auto; padding: .4rem .5rem;
    max-height: 220px;
}
.emoji-section-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-soft);
    padding: .3rem .2rem .15rem; display: block;
}
.emoji-grid { display: flex; flex-wrap: wrap; gap: 1px; }
.emoji-btn {
    width: 32px; height: 32px; border: none; background: none;
    border-radius: 5px; font-size: 1.1rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: background .1s ease;
}
.emoji-btn:hover { background: var(--paper); }

/* Custom emoji images in the grid */
.emoji-btn img {
    width: 22px; height: 22px; object-fit: contain;
}

/* Rendered custom emoji in message bodies */
.msg-custom-emoji {
    width: 20px; height: 20px; object-fit: contain;
    vertical-align: middle; display: inline-block;
    margin: 0 1px;
}

/* Empty/loading states */
.emoji-empty { padding: 1rem; text-align: center; color: var(--ink-soft); font-size: .85rem; }

/* Trigger + panel wrapper so panel positions relative to button */
.emoji-anchor {
    position: relative; display: inline-block;
}

/* Mobile: full-width panel at bottom */
@media (max-width: 420px) {
    .emoji-panel {
        left: 0 !important; right: 0; bottom: 0;
        top: auto !important;
        width: 100%; max-width: 100%;
        border-radius: 5px 5px 0 0;
    }
    .emoji-grid-wrap { max-height: 50vh; }
}