.us-emoji {
  display: inline-block;
  width: 38px;
  height: 38px;
  vertical-align: middle;
  background-image: url('/brand/just-us-mochi.png');
  background-size: 400% 300%;
}
.msg.emoji-only { background: transparent; padding: 4px 0; max-width: 100%; }
.emoji-only .us-emoji { width: 88px; height: 88px; }
.emoji-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.emoji-choice { min-width: 0; border: 1px solid transparent; border-radius: 18px; background: var(--bg2); padding: 8px 2px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.emoji-choice .us-emoji { width: 76px; height: 76px; }
.emoji-choice .emoji-label { font-size: 12px; color: var(--muted); }
.emoji-choice:hover, .emoji-choice:focus-visible { border-color: var(--accent2); background: var(--raised); }
#emojiBtn { flex-shrink: 0; align-self: flex-end; }
#emojiBtn .us-emoji { width: 34px; height: 34px; }
@media (max-width: 380px) {
  #composer { gap: 5px; padding-left: 8px; padding-right: 8px; }
  #input { min-width: 0; }
  #sendBtn { padding-left: 12px; padding-right: 12px; }
}

.us-emoji-love { background-position: 0% 0%; }
.us-emoji-laugh { background-position: 33.333333333333336% 0%; }
.us-emoji-kiss { background-position: 66.66666666666667% 0%; }
.us-emoji-wink { background-position: 100% 0%; }
.us-emoji-eyeroll { background-position: 0% 50%; }
.us-emoji-hug { background-position: 33.333333333333336% 50%; }
.us-emoji-yes { background-position: 66.66666666666667% 50%; }
.us-emoji-party { background-position: 100% 50%; }
.us-emoji-sad { background-position: 0% 100%; }
.us-emoji-shock { background-position: 33.333333333333336% 100%; }
.us-emoji-sleep { background-position: 66.66666666666667% 100%; }
.us-emoji-smug { background-position: 100% 100%; }
#input { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; min-height: 44px; overflow-y: auto; }
#input:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
#input .us-emoji { width: 32px; height: 32px; vertical-align: middle; user-select: all; }
.emoji-grid { max-height: 52dvh; overflow-y: auto; overscroll-behavior: contain; }
.reaction-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; max-width: 85%; }
.reaction-bar.me { align-self: flex-end; }
.reaction-bar.them { align-self: flex-start; }
.reaction-chip, .reaction-add { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 34px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--muted); font-size: 12px; gap: 3px; }
.reaction-chip[aria-pressed="true"] { border-color: var(--accent2); background: #342e53; color: var(--ink); }
.reaction-chip .us-emoji { width: 28px; height: 28px; }
.reaction-add:hover { color: var(--ink); border-color: var(--accent2); }
@media (pointer: coarse) { .reaction-chip, .reaction-add { min-height: 44px; min-width: 44px; } }