/* ============================================================ EMOJI CHAT — shared emoji picker + button (emoji-chat.js) Used by any chat input EmojiChat.attach() is called on. Token-driven throughout so it auto-fits whichever card/panel it's dropped into (landing chat, MP lobby chat, and later Elimination/Versus). ============================================================ */ .emoji-chat-btn { flex: 0 0 auto; margin-left: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .emoji-chat-btn:hover, .emoji-chat-btn[aria-expanded="true"] { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); } .emoji-chat-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .emoji-chat-popup { /* Fixed, not absolute — appended to and positioned via JS against the button's getBoundingClientRect() (see attach()/positionPopup()). This is what lets it escape an ancestor's overflow:hidden (e.g. .lobby-chat-main below 768px, which otherwise clipped the popup out of view entirely in MP lobby chat) and what makes the viewport-edge clamping in positionPopup() possible in the first place. */ position: fixed; width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 8px; display: none; z-index: 500; overflow: hidden; /* safety net — no scrollbar in either direction, ever, regardless of content */ } .emoji-chat-popup.open { display: block; } /* Category tabs instead of one long scrolling list — no vertical or horizontal scrollbar needed at all, and switching categories is a single click. */ .emoji-chat-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 6px; } .emoji-chat-tab { flex: 1; background: none; border: none; border-radius: var(--r-sm); font-size: 1.1rem; line-height: 1; padding: 5px 0; cursor: pointer; opacity: 0.55; transition: background 0.1s, opacity 0.1s; } .emoji-chat-tab:hover { opacity: 0.85; background: var(--surface-2); } .emoji-chat-tab.active { opacity: 1; background: var(--primary); } .emoji-chat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; /* Fixed to the tallest category's height (Smileys, 22 emoji / 5 cols = 5 rows) so switching tabs to a shorter category (e.g. Game & Party, 12 emoji = 3 rows) doesn't visibly resize the popup — it just leaves quiet empty space below instead. */ min-height: 153px; } .emoji-chat-grid button { background: none; border: none; border-radius: 6px; font-size: 1.2rem; line-height: 1; padding: 5px 0; cursor: pointer; transition: background 0.1s; } .emoji-chat-grid button:hover { background: var(--surface-2); } @media (max-width: 480px) { .emoji-chat-popup { /* Narrower on small screens per user request ("more narrow but taller") — combined with position:fixed + viewport-edge clamping in positionPopup(), this is what stops the picker running off the right edge of the screen. */ width: 200px; } .emoji-chat-grid { /* Fewer, wider columns instead of cramming 5 narrow ones into 200px — reflows taller (7 rows for Smileys, now 25 emoji / 4 cols) rather than squeezing each emoji smaller. */ grid-template-columns: repeat(4, 1fr); min-height: 216px; } }