/* ================================================================
   REACTION EFFECTS  —  Neon Super Reactions v4
   Animated · Transition · Neon
   Purely additive — does not break existing layout/logic
   ================================================================ */

@property --neon-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* ================================================================
   KEYFRAMES
   ================================================================ */

/* Chip entrance: scale-up + neon flash */
@keyframes chipEnter {
    0% {
        transform: scale(0.35) translateY(10px);
        opacity: 0;
        filter: brightness(3) saturate(0) blur(2px);
    }

    50% {
        transform: scale(1.15) translateY(-4px);
        opacity: 1;
        filter: brightness(1.5) saturate(1.6);
    }

    75% {
        transform: scale(0.93) translateY(1px);
        filter: none;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: none;
    }
}

/* Neon halo orbit */
@keyframes neonOrbit {
    to {
        --neon-angle: 360deg;
    }
}

/* Own-reaction sustained neon pulse */
@keyframes neonPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 3px #60a5fa) drop-shadow(0 0 6px #818cf8);
    }

    50% {
        filter: drop-shadow(0 0 9px #a78bfa) drop-shadow(0 0 18px #38bdf8) drop-shadow(0 0 28px #60a5fa);
    }
}

/* Own-reaction chip pop */
@keyframes chipPop {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.55) rotate(-4deg);
    }

    34% {
        transform: scale(0.84) rotate(3deg);
    }

    54% {
        transform: scale(1.22) rotate(-1deg);
    }

    72% {
        transform: scale(0.95);
    }

    88% {
        transform: scale(1.07);
    }

    100% {
        transform: scale(1);
    }
}

/* Chip hover bounce */
@keyframes chipBounce {
    0% {
        transform: scale(1) translateY(0);
    }

    22% {
        transform: scale(1.1) translateY(-7px);
    }

    52% {
        transform: scale(0.95) translateY(1px);
    }

    74% {
        transform: scale(1.04) translateY(-2px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

/* Reaction bar/popup wave */
@keyframes reactionWave {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    30% {
        transform: translateY(-9px) scale(1.2);
    }

    60% {
        transform: translateY(2px) scale(0.93);
    }

    82% {
        transform: translateY(-3px) scale(1.06);
    }
}

/* Reaction button hover jump */
@keyframes reactionJump {
    0% {
        transform: scale(1) translateY(0);
    }

    25% {
        transform: scale(1.3) translateY(-12px);
    }

    55% {
        transform: scale(0.9) translateY(2px);
    }

    75% {
        transform: scale(1.1) translateY(-4px);
    }

    90% {
        transform: scale(0.97) translateY(0);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

/* Super reaction: large emoji floats up with neon glow trail */
@keyframes superFloat {
    0% {
        transform: scale(0.1) translateY(10px) rotate(-15deg);
        opacity: 0;
        filter: blur(5px);
    }

    18% {
        transform: scale(1.35) translateY(-60px) rotate(7deg);
        opacity: 1;
        filter: drop-shadow(0 0 20px #a78bfa) drop-shadow(0 0 40px #38bdf8) drop-shadow(0 0 60px #60a5fa);
    }

    55% {
        transform: scale(1.1) translateY(-140px) rotate(-3deg);
        opacity: 0.9;
        filter: drop-shadow(0 0 28px #818cf8) drop-shadow(0 0 50px #a78bfa);
    }

    100% {
        transform: scale(0.4) translateY(-240px) rotate(0deg);
        opacity: 0;
        filter: blur(3px);
    }
}

/* Neon concentric ring expand */
@keyframes neonRing {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    65% {
        opacity: 0.5;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* Sparkle / confetti diamond particle */
@keyframes sparkle {
    0% {
        transform: translate(0, 0) scale(1.2) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translate(var(--sdx, 0px), var(--sdy, -50px)) scale(0) rotate(270deg);
        opacity: 0;
    }
}

/* Neon burst dot particle */
@keyframes neonBurst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    40% {
        opacity: 0.85;
    }

    100% {
        transform: translate(var(--dx, 0px), var(--dy, -40px)) scale(0);
        opacity: 0;
    }
}

/* Emoji img shimmer on first render inside reaction buttons */
@keyframes emojiShimmer {
    0% {
        filter: brightness(1) saturate(1);
    }

    30% {
        filter: brightness(1.5) saturate(1.8) drop-shadow(0 0 5px rgba(167, 139, 250, 0.75));
    }

    65% {
        filter: brightness(1.3) saturate(1.4) drop-shadow(0 0 5px rgba(56, 189, 248, 0.65));
    }

    100% {
        filter: brightness(1) saturate(1);
    }
}

/* ================================================================
   TWEMOJI / NEON-EMOJI IMAGES
   (NeonEmojiShim output — replaces canvas pixel-art)
   ================================================================ */

img.rx-emoji,
img.px-emoji {
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
    border: none;
    background: transparent;
}

/* Inside message text */
.twemoji-msg,
img.emoji {
    display: inline;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.2em;
    pointer-events: none;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.twemoji-msg:hover {
    transform: scale(1.35);
    filter: brightness(1.1) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22));
    cursor: default;
}

/* Inside emoji picker grid */
.twemoji-panel {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    pointer-events: none;
    transition: transform 0.1s ease;
}

.ep-emoji:hover .twemoji-panel,
.ep-cat-btn:hover .twemoji-panel {
    transform: scale(1.25);
}

/* Inside reaction chips — crisp at 18 px */
img.chip-px-emoji,
img.chip-rx-emoji {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    pointer-events: none;
    transition: filter 0.15s ease;
}

/* Inside the quick-react bar — 26 px */
img.reaction-bar-emoji {
    width: 26px;
    height: 26px;
    vertical-align: middle;
    pointer-events: none;
}

/* Reaction-button emoji: shimmer on first render */
.reaction-btn img.rx-emoji,
.reaction-btn img.px-emoji {
    animation: emojiShimmer 0.5s ease-out forwards;
}

/* Hover: neon glow */
.reaction-btn:hover img.rx-emoji,
.reaction-btn:hover img.px-emoji {
    animation: none !important;
    filter: brightness(1.35) saturate(1.6) drop-shadow(0 0 6px rgba(167, 139, 250, 0.85)) drop-shadow(0 0 12px rgba(56, 189, 248, 0.65));
    transition: filter 0.15s ease;
}

/* ================================================================
   EMOJI PICKER
   ================================================================ */

.ep-emoji {
    transition: transform 0.1s ease, background 0.1s ease;
}

.ep-emoji:hover {
    transform: scale(1.2);
}

.ep-emoji:active {
    transform: scale(0.92);
}

/* ================================================================
   REACTION CHIPS  —  neon orbit + entrance + own highlight
   ================================================================ */

.reaction-chip {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    border: none !important;
    transform-origin: bottom center;
    transition: transform 0.18s ease, filter 0.18s ease;
    animation: chipEnter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Neon orbit halo layer */
.reaction-chip::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: conic-gradient(from var(--neon-angle, 0deg),
            transparent 0%,
            #818cf8 5%,
            #38bdf8 15%,
            #34d399 24%,
            transparent 34%);
    z-index: -2;
    animation: neonOrbit 2s linear infinite;
    animation-delay: var(--neon-delay, 0s);
    will-change: --neon-angle;
    transition: filter 0.3s ease;
}

/* Chip fill (between halo and content) */
.reaction-chip::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: var(--bg-sidebar);
    border-radius: 10.5px;
    z-index: -1;
}

/* Own-reaction: vivid multi-colour orbit + neon pulse */
.reaction-chip.own-reaction::before {
    background: conic-gradient(from var(--neon-angle, 0deg),
            transparent 0%,
            #60a5fa 5%,
            #a78bfa 14%,
            #38bdf8 22%,
            #f472b6 30%,
            transparent 40%);
    filter: brightness(1.5) saturate(1.35);
}

.reaction-chip.own-reaction img.chip-px-emoji,
.reaction-chip.own-reaction img.chip-rx-emoji {
    animation: none;
    filter: none;
    transition: filter 0.2s ease;
}

/* Beating neon light — only on hover */
.reaction-chip.own-reaction:hover img.chip-px-emoji,
.reaction-chip.own-reaction:hover img.chip-rx-emoji {
    animation: neonPulse 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.7));
}

/* Hover bounce */
.reaction-chip:hover {
    animation: chipBounce 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* Own-reaction pop (transient JS class) */
.reaction-chip.reaction-own-pop {
    animation: chipPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    transform-origin: center center;
}

/* ================================================================
   REACTION EMOJI MENU  (context-menu quick-react row)
   ================================================================ */

#reactionEmojiMenu.show .reaction-btn {
    animation: reactionWave 1.2s ease-in-out infinite;
    transform-origin: bottom center;
    will-change: transform;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(1) {
    animation-delay: 0.00s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(2) {
    animation-delay: -0.12s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(3) {
    animation-delay: -0.24s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(4) {
    animation-delay: -0.36s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(5) {
    animation-delay: -0.48s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(6) {
    animation-delay: -0.60s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(7) {
    animation-delay: -0.72s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(8) {
    animation-delay: -0.84s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(9) {
    animation-delay: -0.96s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(10) {
    animation-delay: -1.08s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(11) {
    animation-delay: -1.20s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(12) {
    animation-delay: -1.32s;
}

#reactionEmojiMenu.show .reaction-btn:nth-child(13) {
    animation-delay: -1.44s;
}

#reactionEmojiMenu .reaction-btn {
    transform-origin: bottom center;
    transition: background 0.15s ease;
}

#reactionEmojiMenu .reaction-btn:hover {
    animation: reactionJump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* ================================================================
   REACTION POPUP BAR  (hover quick-react)
   ================================================================ */

.reaction-popup.show .reaction-btn {
    animation: reactionWave 1.2s ease-in-out infinite;
    transform-origin: bottom center;
    will-change: transform;
}

.reaction-popup.show .reaction-btn:nth-child(1) {
    animation-delay: 0.00s;
}

.reaction-popup.show .reaction-btn:nth-child(2) {
    animation-delay: -0.12s;
}

.reaction-popup.show .reaction-btn:nth-child(3) {
    animation-delay: -0.24s;
}

.reaction-popup.show .reaction-btn:nth-child(4) {
    animation-delay: -0.36s;
}

.reaction-popup.show .reaction-btn:nth-child(5) {
    animation-delay: -0.48s;
}

.reaction-popup.show .reaction-btn:nth-child(6) {
    animation-delay: -0.60s;
}

.reaction-popup.show .reaction-btn:nth-child(7) {
    animation-delay: -0.72s;
}

.reaction-popup.show .reaction-btn:nth-child(8) {
    animation-delay: -0.84s;
}

.reaction-popup.show .reaction-btn:nth-child(9) {
    animation-delay: -0.96s;
}

.reaction-popup.show .reaction-btn:nth-child(10) {
    animation-delay: -1.08s;
}

.reaction-popup .reaction-btn {
    transform-origin: bottom center;
    transition: background 0.15s ease;
}

.reaction-popup .reaction-btn:hover {
    transform: none;
    background: var(--border-color);
    animation: reactionJump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* ================================================================
   SUPER REACTION OVERLAY  (fixed elements created/destroyed by JS)
   ================================================================ */

/* Large floating emoji — centrepiece of the burst */
.super-reaction-emoji {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    line-height: 1;
    user-select: none;
    animation: superFloat 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transform-origin: center bottom;
    will-change: transform, filter, opacity;
}

.super-reaction-emoji img {
    width: 52px;
    height: 52px;
    pointer-events: none;
    display: block;
}

.super-reaction-emoji:not(:has(img)) {
    font-size: 48px;
}

/* Neon concentric rings */
.super-reaction-ring {
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: neonRing 0.7s ease-out forwards;
    will-change: transform, opacity;
}

.super-reaction-ring.ring-1 {
    border-color: #818cf8;
    box-shadow: 0 0 8px #818cf8, 0 0 16px #818cf840;
    animation-delay: 0.00s;
}

.super-reaction-ring.ring-2 {
    border-color: #38bdf8;
    box-shadow: 0 0 8px #38bdf8, 0 0 16px #38bdf840;
    border-width: 2px;
    animation-delay: 0.07s;
}

.super-reaction-ring.ring-3 {
    border-color: #f472b6;
    box-shadow: 0 0 8px #f472b6, 0 0 16px #f472b640;
    border-width: 1.5px;
    animation-delay: 0.14s;
}

/* Neon burst dot particle */
.super-burst-particle {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: neonBurst 0.65s ease-out forwards;
    animation-delay: var(--bd, 0s);
    will-change: transform, opacity;
}

/* Sparkle diamond particle */
.super-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    width: 6px;
    height: 6px;
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    animation: sparkle 0.75s ease-out forwards;
    animation-delay: var(--sd, 0s);
    will-change: transform, opacity;
}