/* ============================================================ ROLLIT — EMOJI PICKER (css/emojipicker.b4d8c9ec.css) ============================================================ */ /* Trigger button — sits next to an input/textarea. */ .emoji-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; line-height: 1; background: var(--bg3); border: 0.5px solid var(--border2); border-radius: 8px; color: var(--text); font-size: 15px; cursor: pointer; transition: border-color .18s, background .18s, transform .06s; } .emoji-btn:hover { border-color: var(--gold, #f0b429); background: var(--surface2); } .emoji-btn:active { transform: scale(.94); } /* Round variant for the frame-comment pill row. */ .emoji-btn.emoji-btn-round { border-radius: 50%; } /* Popover panel — appended to , positioned in JS. */ .emoji-panel { position: fixed; z-index: 9500; width: 268px; background: var(--surface); border: 0.5px solid var(--border2); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.42); padding: 6px; box-sizing: border-box; animation: emojiPop .12s ease-out; } @keyframes emojiPop { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } } .emoji-tabs { display: flex; gap: 2px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 0.5px solid var(--border); } .emoji-tab { flex: 1; height: 30px; background: none; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; opacity: .55; transition: opacity .15s, background .15s; } .emoji-tab:hover { opacity: 1; background: var(--bg3); } .emoji-tab.active { opacity: 1; background: var(--surface2); } .emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; max-height: 180px; overflow-y: auto; overscroll-behavior: contain; } .emoji-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 7px; font-size: 19px; line-height: 1; cursor: pointer; transition: background .1s, transform .06s; } .emoji-cell:hover { background: var(--bg3); } .emoji-cell:active { transform: scale(.85); } .emoji-grid::-webkit-scrollbar { width: 7px; } .emoji-grid::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }