.emoji-picker {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; justify-content: center;
    background: color(srgb 0.2411 0.2917 0.2476); padding: 0; border-radius: 10px; border: 3px solid white;
}
.emoji-picker [hidden] { display: none !important; }
.emoji-picker .emoji-search-bar {
    display: flex; align-items: center; gap: 8px; width: calc(100% - 20px);
    box-sizing: border-box; margin: 10px 10px 0; padding: 4px 9px;
    color: #cee4d4; background: #123d32; border: 1px solid #9bbda3; border-radius: 7px;
}
.emoji-picker .emoji-search-bar:focus-within { border-color: white; box-shadow: 0 0 0 1px white; }
.emoji-picker .emoji-search-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.emoji-picker .emoji-search-icon svg { display: block; width: 100%; height: 100%; }
.emoji-picker .emoji-search-input {
    flex: 1; width: 0; min-width: 0; padding: 7px 0; margin: 0; border: 0; border-radius: 0;
    color: white; background: transparent; box-shadow: none; outline: none; font: inherit; font-size: 16px;
    appearance: none; -webkit-appearance: none;
}
.emoji-picker .emoji-search-input::placeholder { color: #d5e6da; opacity: 1; }
.emoji-picker .emoji-search-input:focus-visible { outline: none; box-shadow: none; }
.emoji-picker .emoji-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.emoji-picker .emoji-search-clear { flex: 0 0 30px; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; color: white; background: transparent; line-height: 1; font-size: 24px; }
.emoji-picker .emoji-search-clear:hover { background: #38694d; }
.emoji-picker .emoji-search-results { width: 100%; padding: 0 10px 12px; box-sizing: border-box; }
.emoji-picker .emoji-search-status { min-height: 20px; margin: 0 0 10px; font-size: 14px; color: #e1ede3; text-align: center; }
.emoji-picker .panelChoiceBtn { box-sizing: border-box; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 7px 7px 0 0; }
.emoji-picker .panelChoiceBtn button { margin: 0; padding: 10px 14px; }
.emoji-picker [role="tab"][aria-selected="true"] { box-shadow: inset 0 0 0 2px white; background: #4caf50; }
.emoji-picker .emoji-panel { width: 100%; padding: 4px 10px 12px; box-sizing: border-box; }
.emoji-picker .emoji-item { flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; line-height: 1; }
.emoji-picker .emoji-item[aria-pressed="true"] { box-shadow: 0 0 0 3px white; }
.emoji-picker .emoji-item:hover,
.emoji-picker .emoji-item:active { transform: none; }
.emoji-picker .emoji-item { transition: background-color .15s; }
/* Render one glyph at its final size. No scale, filter, animation, canvas or
   permanent layer per button; the same element serves every photo/video grid. */
.emoji-hover-preview {
    position: fixed; z-index: 1; box-sizing: border-box;
    width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;
    padding: 0; margin: 0; border: 1px solid #ccc; border-radius: 7px;
    background: #eee; color: #333; pointer-events: none; user-select: none;
    font: 60px / 1 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    transform: none; transition: none; contain: layout paint;
}
.emoji-hover-preview[hidden] { display: none; }
.emoji-picker .people-panel { width: 100%; padding: 0; }
.emoji-picker .people-list { gap: 8px; justify-content: center; }
.emoji-picker .emoji-skin-tones { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; width: 100%; padding: 10px 4px; box-sizing: border-box; background: #5e8460; }
.emoji-picker .emoji-skin-tones button { margin: 0; padding: 4px 8px; border: 1px solid #888; }
.emoji-picker .emoji-skin-tones button.active { background: #ccc; color: #025753; }
.emoji-picker .emoji-category-tabs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 5px;
    width: 100%; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid #78937d;
}
.emoji-picker .emoji-category-tab {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-width: 0; min-height: 44px; margin: 0; padding: 8px 4px;
    font: inherit; font-size: 13px; line-height: 1.2; color: white; background: #244f38;
    border: 1px solid #93ad99; border-radius: 5px; cursor: pointer;
}
.emoji-picker .emoji-category-tab:hover { background: #38694d; }
.emoji-picker .emoji-category-tab:hover, .emoji-picker .emoji-category-tab:active { transform: none; }
.emoji-picker .emoji-category-tab:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.emoji-picker .emoji-category-panel { width: 100%; min-width: 0; }
.emoji-picker .emoji-other-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.emoji-picker .emoji-page-controls { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin-top: 8px; font-variant-numeric: tabular-nums; }
.emoji-picker .emoji-page-controls button { margin: 0; padding: 4px 16px; font-size: 26px; }
.emoji-picker .emoji-page-controls button:disabled { opacity: .45; cursor: default; }
/* The photo overlays and native video dialog share one bounded, centered box.
   Scroll its contents when necessary, keeping a margin within the viewport. */
#emojiModal, #emojiModalTool { height: 100vh; height: 100dvh; overflow: hidden; }
#emojiModal .modal-content, #emojiModalTool .modal-content,
.emoji-picker-dialog {
    box-sizing: border-box; width: calc(100% - 40px); max-width: 842px;
    max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
    margin: auto; padding: 20px; overflow: auto; overscroll-behavior: contain;
    color: white; background: #023432; border: 1px solid #888; border-radius: 0;
    box-shadow: 0 0 32px rgba(0, 20, 18, .24), 0 20px 56px -8px rgba(0, 0, 0, .55);
}
#emojiModal .modal-content, #emojiModalTool .modal-content {
    position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%);
}
.emoji-picker-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.emoji-picker-dialog h2 { padding-right: 28px; }
.emoji-picker-dialog .close { display: block; margin: 0; padding: 0; border: 0; background: transparent; line-height: 1; width: 28px; height: 28px; }
.masking-picker-controls { margin: 14px 0; }
/* Both face dialogs keep their palette intact while changing masking mode. */
.masking-picker-controls[data-effect]:not([data-effect="emoji"]) ~ .emoji-picker,
.masking-picker-controls[data-effect]:not([data-effect="emoji"]) ~ .emoji-dialog-actions,
.masking-picker-controls[data-effect]:not([data-effect="emoji"]) ~ .video-emoji-image-status { display: none !important; }
.masking-picker-effects, .masking-picker-effects .video-effect-buttons { display: flex; justify-content: center; gap: 8px; }
.masking-picker-effects button {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 8px;
    border: 2px solid transparent; border-radius: 6px; background: #c2d5c3; color: #025753;
}
.masking-picker-effects button[aria-pressed="true"] { background: #025753; color: white; border-color: white; }
.masking-picker-effects button:hover { background: #4caf50; color: white; transform: none; }
.masking-picker-effects button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.masking-picker-effects svg { width: 26px; height: 26px; pointer-events: none; }
.masking-picker-effects .masking-picker-emoji { font-size: 26px; line-height: 1; }
.masking-picker-strength { display: flex; align-items: center; gap: 12px; max-width: 370px; margin: 14px auto; color: white; }
.masking-picker-strength[hidden] { display: none !important; }
.masking-picker-strength input { flex: 1; min-width: 0; margin: 0; accent-color: #4caf50; }
.masking-picker-strength output { min-width: 2ch; font-variant-numeric: tabular-nums; }
.emoji-picker-dialog :focus-visible { outline: 2px solid white; outline-offset: 3px; }
/* Modal actions share their dimensions, without the upload area's fixed height. */
.emoji-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 0; }
.emoji-dialog-actions [hidden] { display: none !important; }
.emoji-dialog-actions .emoji-dialog-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    box-sizing: border-box; min-height: 44px; max-width: 100%; height: auto; margin: 0; padding: 10px 16px;
    border: 1px solid #85a8a4; border-radius: 6px; background: #025753; color: white;
    font: 500 16px / 1.25 'Roboto', sans-serif; text-align: center; cursor: pointer;
    box-shadow: none; transform: none; transition: background-color .15s, border-color .15s;
}
.emoji-dialog-actions .emoji-image-import { background: #4caf50; border-color: #4caf50; }
.emoji-dialog-actions .emoji-dialog-action svg { flex: 0 0 20px; width: 20px; height: 20px; }
.emoji-dialog-actions .emoji-dialog-action span { min-width: 0; }
.emoji-dialog-actions .emoji-dialog-action:hover:not(:disabled) { background: #126d66; border-color: #acc8b7; transform: none; }
.emoji-dialog-actions .emoji-image-import:hover:not(:disabled) { background: #409b44; border-color: #409b44; }
.emoji-dialog-actions .emoji-dialog-action:active:not(:disabled) { transform: none; background: #164d42; }
.emoji-dialog-actions .emoji-dialog-action:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.emoji-dialog-actions .emoji-dialog-action:disabled { opacity: .5; cursor: wait; }
@media (max-width: 600px) {
    .emoji-picker .panelChoiceBtn button { padding: 9px 10px; font-size: 14px; }
    #emojiModal .modal-content, #emojiModalTool .modal-content,
    .emoji-picker-dialog {
        width: calc(100% - 24px); padding: 12px;
        max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    }
}