/**
 * Push animation feedback for chat links
 * Provides immediate tactile feedback when clicking chat items
 */

/* Chat link hover and active states */
.chat-link-item,
.match-chat-link,
.all-chats-item,
[href*="/chat"],
.chat-item {
    transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    transform: translateZ(0) !important; /* Hardware acceleration */
    will-change: transform, box-shadow !important;
}

/* Immediate feedback on touch/click */
.chat-link-item:active,
.match-chat-link:active,
.all-chats-item:active,
[href*="/chat"]:active,
.chat-item:active {
    transform: scale(0.98) translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Hover effect for desktop */
@media (hover: hover) {
    .chat-link-item:hover,
    .match-chat-link:hover,
    .all-chats-item:hover,
    [href*="/chat"]:hover,
    .chat-item:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        background: rgba(255, 255, 255, 0.03) !important;
    }
}

/* Enhanced push animation for mobile */
@media (max-width: 768px) {
    .chat-link-item:active,
    .match-chat-link:active,
    .all-chats-item:active,
    [href*="/chat"]:active,
    .chat-item:active {
        transform: scale(0.96) translateY(2px) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Faster animation on mobile for instant feedback */
    .chat-link-item,
    .match-chat-link,
    .all-chats-item,
    [href*="/chat"],
    .chat-item {
        transition: all 0.1s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    }
}

/* Specific styling for all chats page */
.all-chats-container .card,
.all-chats-container .list-group-item {
    transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    transform: translateZ(0) !important;
}

.all-chats-container .card:active,
.all-chats-container .list-group-item:active {
    transform: scale(0.98) translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Match list chat buttons */
.match-actions .btn[href*="/chat"],
.match-item .btn[href*="/chat"] {
    transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.match-actions .btn[href*="/chat"]:active,
.match-item .btn[href*="/chat"]:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.4) !important;
}

/* Ripple effect animation */
@keyframes ripple {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* Add ripple effect to chat links */
.chat-link-item::after,
.match-chat-link::after,
.all-chats-item::after,
[href*="/chat"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Trigger ripple on active state */
.chat-link-item:active::after,
.match-chat-link:active::after,
.all-chats-item:active::after,
[href*="/chat"]:active::after {
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    animation: ripple 0.6s ease-out;
}

/* Ensure parent elements have relative positioning for ripple */
.chat-link-item,
.match-chat-link,
.all-chats-item,
[href*="/chat"] {
    position: relative;
    overflow: hidden;
}