/* ═══════════════════════════════════════════════════
   Emoji Autocomplete Popup
   ═══════════════════════════════════════════════════ */

.emoji-autocomplete {
    position: absolute;
    z-index: 500;
    min-width: 180px;
    max-width: 260px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;

    background: var(--color-secondary);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    padding: 4px 0;

    scrollbar-width: thin;
    scrollbar-color: #6b7280 transparent;

    /* Appear animation */
    animation: emoji-ac-in 120ms ease-out;
}

@keyframes emoji-ac-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Row ── */
.emoji-ac-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 80ms ease;
    border-left: 2px solid transparent;
}

.emoji-ac-row:hover,
.emoji-ac-row.emoji-ac-active {
    background-color: rgba(255, 255, 255, 0.07);
    border-left-color: var(--color-accent);
}

/* ── Emoji character ── */
.emoji-ac-emoji {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
    width: 1.4em;
    text-align: center;
}

/* ── Shortcode label ── */
.emoji-ac-label {
    font-size: 0.8rem;
    color: var(--color-text);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Inconsolata', monospace;
}