/* ── Emoji picker ──────────────────────────────────────────────────────────
   Shared component: photo Titre + Sommaire (photo-info) and the folder
   Sommaire (folder management). Deliberately page-agnostic and self-contained
   — the trigger does NOT borrow .data-box__kword-btn, because that class is
   styled per-page and the two pages would drift apart (and a page-scoped rule
   would out-specify anything set here). Everything the button needs is below.

   Palette markup is generated by public/js/modules/emojiPicker.js. */

.data-box__emoji-list {
    display: inline-block;
    position: relative;
}

/* Field + trigger as one unit, so the icon sits at the right END of the field.
   Needed because the surrounding form floats a 20%-wide label and pins the wide
   fields to a fixed width that already reaches the form's right edge — an
   inline-block trigger simply wrapped to the next line. Inside the flex row the
   field shrinks by exactly the icon's width, so the unit still ends on the same
   right edge as every other row on the page. */
.data-box__field-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    vertical-align: top;
}

/* min-width:0 lets the field shrink below its declared width inside the row. */
.data-box__field-row > input,
.data-box__field-row > textarea {
    flex: 1 1 auto;
    min-width: 0;
}

/* Multi-row fields: put the icon at the field's TOP-right, not its middle. */
.data-box__field-row--top {
    align-items: flex-start;
}

/* Icon-only everywhere: a labelled "Ajouter un émoji" pill was tried first and
   was too heavy next to the fields — it read as another dropdown. Keep the
   accessible name on title/aria-label instead of on screen. */
.data-box__emoji-btn {
    box-sizing: border-box;
    width: 34px;
    height: 30px;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: var(--warm-brown);
    background-color: var(--warm-cream-soft, #FEFBF6);
    border: 1px solid var(--warm-tan);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* The shared page CSS decorates sibling pill buttons with a ▾ caret; this is a
   popover trigger, not a select, and it must never inherit one. */
.data-box__emoji-btn::after {
    content: none;
}

.data-box__emoji-btn:hover,
.data-box__emoji-btn:focus-visible {
    border-color: var(--warm-terracotta);
    background-color: var(--warm-cream);
}

/* z-index: on photo-info the Save button and the exit are position:absolute
   z-index:2, so an unstacked popover renders underneath them. */
.emoji-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 336px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 12px;
    background-color: var(--warm-cream);
    border: 1px solid var(--warm-tan);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(60, 40, 25, 0.18);
}

.emoji-panel[hidden] {
    display: none;
}

/* Set by emojiPicker.js when a left-anchored panel would overflow the window. */
.emoji-panel--flip {
    left: auto;
    right: 0;
}

.emoji-panel__group + .emoji-panel__group {
    margin-top: 10px;
}

.emoji-panel__label {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--warm-brown);
    opacity: 0.75;
    margin-bottom: 4px;
}

.emoji-panel__row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

/* Emoji render from the system emoji font, not the page's --font-sans, or
   several glyphs fall back to a monochrome outline on Windows. */
.emoji-panel__btn {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 20px;
    line-height: 1;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.emoji-panel__btn:hover,
.emoji-panel__btn:focus-visible {
    background-color: var(--warm-sand, #F3E6D6);
    border-color: var(--warm-terracotta);
}

@media (max-width: 480px) {
    .emoji-panel {
        width: min(300px, calc(100vw - 40px));
    }
}