.message-actions{display:flex;gap:5px;margin-top:5px;opacity:0;transition:opacity .2s}
.message-bubble:hover .message-actions{opacity:1}
.reaction-btn{background:none;border:none;cursor:pointer;padding:2px 5px;border-radius:3px;font-size:16px;opacity:.5;transition:all .2s ease;position:absolute;top:4px;right:35px}
.reaction-btn:hover{opacity:1;transform:scale(1.3)}
.message-reactions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;position:absolute;bottom:3px;right:50%;transform:translateX(50%);z-index:1}
.reaction-item{display:inline-flex;align-items:center;border-radius:12px;background-color:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);cursor:pointer;transition:all .2s ease;position:relative;transform-origin:center}
.reaction-item:hover{background:rgba(0,0,0,0.1)}
.reaction-item.user-reacted{background:rgba(74,144,226,0.2);border:1px solid rgba(74,144,226,0.5)}
.reaction-username{font-size:10px;color:#666;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.reaction-emoji{font-size:16px;margin-bottom:1px;transition:transform .2s ease}
.reaction-emoji:hover{transform:scale(1.5)}
.emoji-picker-item.current-emoji{background-color:rgba(0,123,255,0.2);border:2px solid rgba(0,123,255,0.5);transform:scale(1.1)}
.dark-theme .emoji-picker-item.current-emoji{background-color:rgba(0,123,255,0.3);border-color:rgba(0,123,255,0.7)}
.emoji-picker-remove{background:transparent;color:#d38a8a;border:none;font-size:13px;cursor:pointer;transition:all .2s ease}
.emoji-picker-remove:hover{transform:scale(1.15)}
.current-reaction-hint{padding:8px;margin-bottom:8px;background:rgba(0,123,255,0.1);border-radius:8px;font-size:14px;text-align:center}
.dark-theme .current-reaction-hint{background:rgba(0,123,255,0.2)}
.reaction-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-5px);background:rgba(0,0,0,0.2);color:white;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none;z-index:1000}
.dark-theme .reaction-tooltip{background:rgba(255,255,255,0.75);color:#000}
.reaction-item:hover .reaction-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-10px)}
.emoji-picker-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;animation:fadeIn .2s ease-out forwards;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.emoji-picker{position:relative;background:white;border:1px solid #ddd;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.15);z-index:10001;max-width:320px;width:90%;max-height:400px;overflow:hidden;transform:scale(0.9);animation:scaleIn .2s ease-out forwards}
.emoji-picker-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #eee;font-weight:500;font-size:14px;background:#f8f9fa}
.emoji-picker-header span{font-size:14px;color:#333;font-weight:600}
.emoji-picker-close{background:none;border:none;font-size:38px;cursor:pointer;opacity:.6;padding:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}
.emoji-picker-close:hover{opacity:1;background:rgba(0,0,0,0.1)}
.emoji-picker-content{max-height:320px;overflow-y:auto;padding:8px}
.emoji-picker-favorites{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:8px 0;border-bottom:1px solid #f0f0f0;margin-bottom:8px}
.emoji-picker-all{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:8px 0}
.emoji-picker-item{background:none;border:none;font-size:20px;cursor:pointer;padding:6px;border-radius:6px;transition:all .2s ease;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.emoji-picker-item:hover{background:rgba(0,123,255,0.1);transform:scale(1.2)}
@keyframes reaction-appear {
0%{transform:scale(0.5);opacity:0}
70%{transform:scale(1.1)}
100%{transform:scale(1);opacity:1}
}
@keyframes reaction-disappear {
0%{transform:scale(1);opacity:1}
100%{transform:scale(0.5);opacity:0}
}
.reaction-item.adding{animation:reaction-appear .3s ease forwards}
.reaction-item.removing{animation:reaction-disappear .3s ease forwards}
@keyframes fadeIn {
from{opacity:0}
to{opacity:1}
}
@keyframes scaleIn {
from{transform:scale(0.9);opacity:0}
to{transform:scale(1);opacity:1}
}
@keyframes fadeOut {
from{opacity:1}
to{opacity:0}
}
@keyframes scaleOut {
from{transform:scale(1);opacity:1}
to{transform:scale(0.9);opacity:0}
}
.emoji-picker-overlay.closing{animation:fadeOut .15s ease-in forwards}
.emoji-picker-overlay.closing .emoji-picker{animation:scaleOut .15s ease-in forwards}
.dark-theme .emoji-picker{background:#2d2d2d;border-color:#444;color:white}
.dark-theme .emoji-picker-header{background:#3d3d3d;border-bottom-color:#444;color:#ccc}
.dark-theme .emoji-picker-header span{color:#ccc}
.dark-theme .emoji-picker-favorites{border-bottom-color:#444}
.dark-theme .emoji-picker-item:hover{background:rgba(255,255,255,0.1)}
.dark-theme .reaction-emoji{opacity:.75}
.dark-theme .emoji-picker-close{filter:invert(1)}
@media (max-width: 480px) {
.emoji-picker{max-width:90%;max-height:70vh}
.emoji-picker-item{width:32px;height:32px;font-size:18px}
}
body.emoji-picker-open{overflow:hidden}
.dark-theme .reaction-item{background-color:rgba(183,183,183,0.1);border-color:rgba(167,167,167,0.3);color:white}
.dark-theme .reaction-item.user-reacted{background-color:rgba(0,123,255,0.2);border-color:rgba(0,123,255,0.4)}
.dark-theme .reaction-item:hover{background:rgba(255,255,255,0.1)}
.reaction-item.user-reacted:hover{background-color:rgba(0,123,255,0.2)}
.dark-theme .reaction-item.user-reacted:hover{background-color:rgba(0,123,255,0.3)}
.dark-theme .reaction-count{color:#ccc}
.dark-theme .reaction-btn{color:#ccc}