.cailev-emoji { position: relative; margin: -.4rem 0 1rem; font-family: system-ui, sans-serif; font-size: .875rem; }
.cailev-emoji button { cursor: pointer; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 4px; padding: .45rem .7rem; line-height: 1.3; }
.cailev-emoji-panel { position: absolute; z-index: 20; inset-inline-start: 0; top: 100%; width: min(320px, calc(100vw - 48px)); box-sizing: border-box; padding: 12px; background: #191614; color: #f0e9df; box-shadow: 0 8px 28px #0005; border: 1px solid #807368; border-radius: 6px; }
.cailev-emoji-panel[hidden] { display: none; }
.cailev-emoji-panel input[type=search], .cailev-emoji-panel select { box-sizing: border-box; width: 100%; min-width: 0; margin: 0 0 8px; padding: 8px; color: #f0e9df; background: #292420; border: 1px solid #807368; font: inherit; }
.cailev-emoji-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-height: 200px; overflow-y: auto; gap: 3px; }
.cailev-emoji-grid button { border: 0; padding: 6px 0; font-size: 23px; min-height: 40px; }
.cailev-emoji button:hover { background: #88715b33; }
.cailev-emoji :focus-visible { outline: 2px solid #cfae88; outline-offset: 2px; }
.cailev-emoji-remember { display: flex !important; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12px; letter-spacing: normal; text-transform: none; }
.cailev-emoji-remember input { width: auto !important; }
.cailev-emoji-status { font-size: 12px; margin: 6px 0; }