/* Messaging Enhancements CSS */

/* Typing indicator animation */
.typing-dots {
    display: inline-flex;
    gap: 2px;
}

.typing-dots .dot {
    animation: typingDot 1.4s infinite ease-in-out both;
}

.typing-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typingDot {
    0%, 80%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

/* Message highlight effect */
.highlight-message {
    animation: highlight 2s ease-out;
}

@keyframes highlight {
    0% {
        background-color: rgba(6, 182, 212, 0.3);
    }
    100% {
        background-color: transparent;
    }
}

/* Message action buttons - always visible with colored backgrounds */
.message-item .message-actions {
    opacity: 1;
}

/* Emoji picker animation */
#emoji-picker-popup {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Reaction buttons */
.message-reactions button:hover {
    transform: scale(1.1);
}

/* Search results */
#search-results {
    border: 1px solid rgb(71, 85, 105);
}

#search-results > div:hover {
    background-color: rgb(51, 65, 85);
}