body #chatReactions { display:none; }
body.writing #chatReactions:not([hidden]) { grid-column:1 / -1; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; border-top:1px solid #e3caac; padding-top:5px; }
#chatReactions button { min-width:0; min-height:54px; border:0; border-radius:12px; padding:3px; background:transparent; color:#56364b; cursor:pointer; font:500 11px Rubik,Arial,sans-serif; display:grid; justify-items:center; gap:0; }
#chatReactions canvas { width:40px; height:40px; pointer-events:none; }
#chatReactions button:hover, #chatReactions button:focus-visible { background:#f5d5b7; }
#chatReactions button:active { transform:translateY(1px); }
#chatReactions button:disabled { opacity:.45; cursor:default; }
#chatReactionTarget { grid-column:1 / -1; text-align:center; color:#86674d; font-size:10px; min-height:13px; }
body.writing #chat.compact-writing #chatReactions:not([hidden]) { grid-template-columns:repeat(7,minmax(0,1fr)); padding:0; }
body.writing #chat.compact-writing #chatReactions button { min-height:30px; }
body.writing #chat.compact-writing #chatReactions canvas { width:28px; height:28px; }
body.writing #chat.compact-writing #chatReactions span, body.writing #chat.compact-writing #chatReactionTarget { display:none; }
body.writing #chat.reaction-tray-small #chatReactions { display:none !important; }
#reactionGift { position:fixed; inset:0; z-index:24; pointer-events:none; overflow:hidden; }
#reactionGift img { position:absolute; width:clamp(36px,6vw,72px); height:auto; bottom:20%; opacity:0; }
#reactionGift.on img { animation:received-heart 2.8s ease-out both; animation-delay:calc(var(--i) * 90ms); }
#reactionGift img:nth-child(odd) { left:calc(5% + var(--i) * 2%); }
#reactionGift img:nth-child(even) { right:calc(5% + var(--i) * 2%); }
@keyframes received-heart { 0% {opacity:0;transform:translateY(22px) rotate(-12deg) scale(.65)} 18%{opacity:.9} 70%{opacity:.8} 100%{opacity:0;transform:translateY(-150px) rotate(12deg) scale(1.08)} }
@media (prefers-reduced-motion:reduce) { #reactionGift.on img { animation:received-heart-still 2s ease-out both; } @keyframes received-heart-still {0%,100%{opacity:0}20%,70%{opacity:.8}} }

@media(max-width:420px){#chatReactions canvas{width:32px;height:32px}#chatReactions button{font-size:10px;min-height:46px}}