/* ===== MiniEmojiPicker — Theme-aware (light/dark) ===== */
.mep{
    --mep-bg: var(--bs-body-bg, #fff);
    --mep-fg: var(--bs-body-color, #111);
    --mep-muted: var(--bs-secondary-color, #6c757d);
    --mep-border: var(--bs-border-color, #e5e7eb);
    --mep-hover: rgba(0,0,0,.06);
    --mep-shadow: 0 14px 48px rgba(0,0,0,.16);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Dark */
[data-bs-theme="dark"] .mep{
    --mep-bg: var(--bs-body-bg, #0b0f13);
    --mep-fg: var(--bs-body-color, #e9ecef);
    --mep-muted: var(--bs-secondary-color, #adb5bd);
    --mep-border: color-mix(in srgb, var(--bs-body-color, #e9ecef) 12%, transparent);
    --mep-hover: color-mix(in srgb, var(--bs-body-color, #e9ecef) 10%, transparent);
    --mep-shadow: 0 18px 48px rgba(0,0,0,.55);
}

/* Z-index au-dessus des modales Bootstrap */
.mep-backdrop{ position:fixed; inset:0; z-index:1090; background:transparent; }
.mep{
    position:fixed; z-index:1095; width:360px; max-height:520px;
    display:flex; flex-direction:column;
    background:var(--mep-bg); color:var(--mep-fg);
    border:1px solid var(--mep-border); border-radius:.6rem; box-shadow:var(--mep-shadow);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Header */
.mep__header{ display:flex; flex-direction:column; gap:.4rem; padding:.4rem .45rem .2rem; }

/* Cat bar (scrollable à l’horizontale) */
.mep__catbar{
    display:flex; gap:.2rem; overflow:auto; padding:.2rem; border-radius:.5rem;
    background:var(--bs-tertiary-bg, rgba(0,0,0,.04));
    scroll-behavior:smooth;
}
[data-bs-theme="dark"] .mep__catbar{
    background: color-mix(in srgb, var(--mep-fg) 6%, transparent);
}
.mep__catbtn{
    border:0; background:transparent; font-size:18px; line-height:1;
    padding:.28rem .34rem; border-radius:.4rem; cursor:pointer;
    transition:background-color .12s ease;
    user-select:none;
    white-space:nowrap;
}
.mep__catbtn:hover{ background:var(--mep-hover); }
.mep__catbtn.is-active{
    background: color-mix(in srgb, var(--mep-fg) 10%, transparent);
    font-weight:600;
}

/* Search */
.mep__search input{
    width:100%; padding:.45rem .55rem;
    background:var(--mep-bg); color:var(--mep-fg);
    border:1px solid var(--mep-border); border-radius:.5rem; outline:0;
}
.mep__search input::placeholder{ color: color-mix(in srgb, var(--mep-fg) 55%, transparent); }
.mep__search input:focus{
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--bs-primary, #0d6efd) 22%, transparent);
}

/* Body (un seul scroll) */
.mep__body{
    padding:.2rem .45rem .45rem; overflow:auto; flex:1 1 auto; scroll-behavior:smooth;
    border-top:1px solid var(--mep-border);
}

/* Aide au positionnement lors du scroll programmatique depuis la catbar */
.mep__section{ padding:.35rem 0 .25rem; scroll-margin-top:.35rem; }

/* Titles (sticky) */
.mep__section-title{
    position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:.35rem;
    font:600 .82rem/1.3 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--mep-muted); background:var(--mep-bg); padding:.15rem 0 .2rem;
}
.mep__section-ico{ font-size:.95rem }

/* Grid */
.mep__grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(30px, 1fr));
    gap:.2rem; padding:.2rem 0 .1rem;
}
.mep__item{
    position:relative;
    display:flex; align-items:center; justify-content:center; height:34px;
    font-size:22px; line-height:1; border:0; border-radius:.35rem; background:transparent; cursor:pointer;
    transition:transform .06s ease, background-color .06s ease, box-shadow .06s ease;
    user-select:none;
}
.mep__item:hover{ background:var(--mep-hover); transform:translateY(-1px); }
.mep__item:focus-visible{
    outline:2px solid var(--bs-primary, #0d6efd); outline-offset:1px; border-radius:.35rem;
}
.mep__item.is-hidden{ display:none; }
.mep__section.is-empty{ display:none; }

/* Indicateur favori (étoile) */
/* Étoile favori — plus grande, jaune, qui dépasse l’angle haut-droite */
.mep__item.is-favorite::after{
    content:"★";
    position:absolute;
    top:-8px;              /* dépasse vers le haut */
    right:-8px;            /* dépasse vers la droite */
    font-size:20px;        /* plus grande */
    line-height:1;
    color: var(--bs-warning, #ffc107);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    z-index: 2;
    pointer-events:none;
}

/* Mode FAVORIS : cadre jaune bien visible autour des favoris */
.mep.mep--favorites .mep__item.is-favorite{
    background: color-mix(in srgb, var(--bs-warning, #ffc107) 12%, transparent);
    box-shadow:
            0 0 0 2px var(--bs-warning, #ffc107),  /* cadre jaune */
            0 4px 10px rgba(0,0,0,.12);            /* légère ombre */
    transform:none;
}

.mep.mep--favorites .mep__item:not(.is-favorite){
    opacity:.85;
}

/* Footer — deux zones (gauche: ⭐ Favoris, droite: Fermer) */
.mep__footer{
    padding:.45rem; display:flex; justify-content:space-between; align-items:center;
    border-top:1px solid var(--mep-border);
}
.mep__footer-left,
.mep__footer-right{
    display:flex; gap:.4rem; align-items:center;
}
.mep__btn{
    border:1px solid var(--mep-border); background:var(--mep-bg); color:var(--mep-fg);
    border-radius:.45rem; padding:.32rem .55rem; cursor:pointer; transition:background-color .12s ease;
}
.mep__btn:hover{ background:var(--mep-hover); }

/* Bouton favoris actif (feedback visuel) */
.mep__btn--favorites.is-active{
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 18%, transparent);
    border-color: var(--bs-primary, #0d6efd);
    font-weight:600;
}

/* Barres externes (récents / favoris) */
#recent-emojis, .recent-emojis,
#favorites-emojis, .favorites-emojis{
    display:flex; gap:.25rem; flex-wrap:wrap; align-items:center;
}
.mep-recent, .mep-favorite{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; font-size:18px; border-radius:.35rem; cursor:pointer;
    transition:background-color .12s ease, transform .06s ease;
    user-select:none;
}
.mep-recent:hover, .mep-favorite:hover{ background:var(--mep-hover); transform:translateY(-1px); }

/* Scrollbars fines */
.mep__body::-webkit-scrollbar,
.mep__catbar::-webkit-scrollbar{ height:8px; width:8px; }
.mep__body::-webkit-scrollbar-thumb,
.mep__catbar::-webkit-scrollbar-thumb{
    background: color-mix(in srgb, var(--mep-fg) 18%, transparent); border-radius:999px;
}
.mep__body{ scrollbar-width:thin; scrollbar-color: color-mix(in srgb, var(--mep-fg) 18%, transparent) transparent; }

/* Motion */
@media (prefers-reduced-motion: reduce){
    .mep__item, .mep__catbtn{ transition:none; }
}