/**
 * SndCore Likes System Styles
 * 
 * Modern, clean styles for the likes functionality
 * 
 * @package SndCore\Assets
 * @since 2.0.0
 */

.snd-like-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 15px 0;
    padding: 12px 0;
    border-top: 1px solid #eee;
    font-size: 0.9rem;
    position: relative; /* anchor absolute .snd-like-details */
}

/* Like Button */
.snd-like-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    color: #666;
    min-width: 50px;
    justify-content: center;
}

.snd-like-button:hover {
    background: #f8f9fa;
    border-color: #8e44ad;
    color: #8e44ad;
}

.snd-like-button.liked {
    background: #8e44ad;
    border-color: #8e44ad;
    color: white;
}

.snd-like-button.liked:hover {
    background: #732d91;
    border-color: #732d91;
}

.snd-like-icon {
    font-size: 1rem;
    line-height: 1;
    color: #ccc;
    transition: color 0.2s ease;
    transform: translateX(-1px);
}

/* Ensure Font Awesome icons display properly */
.snd-like-icon::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 5 Pro";
    font-weight: 400; /* Regular/outline by default */
}

.snd-like-icon.fas::before {
    font-weight: 900; /* Solid when liked */
}

.snd-like-button:hover .snd-like-icon {
    color: #8e44ad;
}

.snd-like-button.liked .snd-like-icon {
    color: #ff6b6b;
}

/* Like Count */
.snd-like-count {
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 16px;
    text-align: center;
    transform: translateY(-1px);
}

.snd-like-button.liked .snd-like-count {
    color: white;
}

.snd-like-count:empty {
    display: none;
}

/* Like Details Toggle */
.snd-like-details-toggle {
    background: none;
    border: none;
    color: #8e44ad;
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: underline;
    padding: 0;
    margin-left: auto;
}

.snd-like-details-toggle:hover {
    color: #732d91;
}

/* Like Details Panel */
.snd-like-details {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 200px;
    max-width: 300px;
}

/* Body-overlay variant to avoid clipping in nested/overflow contexts */
.snd-like-details.snd-like-overlay {
    position: absolute; /* positioned via JS relative to page */
    z-index: 10020; /* above particles (10k) and headers */
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    max-width: 320px;
    max-height: 60vh;
    overflow-y: auto;
}

.snd-like-details .snd-liker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.85rem;
}

.snd-like-details .snd-liker-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.snd-like-details .snd-liker-name {
    font-weight: 500;
    color: #333;
}

.snd-like-details .snd-like-time {
    color: #999;
    font-size: 0.75rem;
    margin-left: auto;
}

/* Integration with Post Cards */
.snd-post-card .snd-like-container {
    margin: 10px 0 0 0;
    padding: 10px 0 0 0;
    border-top: 1px solid #f0f0f0;
}

.snd-post-card .snd-like-button {
    font-size: 0.8rem;
    padding: 4px 8px;
}

.snd-post-card .snd-like-count {
    font-size: 0.8rem;
}

/* Product Likes Integration */
.snd-product-likes {
    margin: 15px 0;
    padding: 15px 0;
    border-top: 1px solid #eee;
}

.woocommerce .snd-product-likes .snd-like-container {
    margin: 0;
    padding: 0;
    border: none;
    justify-content: flex-start;
}

.woocommerce .snd-product-likes .snd-like-button {
    background: #f8f9fa;
    border-color: #ddd;
    color: #555;
    font-size: 0.9rem;
    padding: 10px 16px;
}

.woocommerce .snd-product-likes .snd-like-button:hover {
    background: #e9ecef;
    border-color: #8e44ad;
    color: #8e44ad;
}

.woocommerce .snd-product-likes .snd-like-button.liked {
    background: #8e44ad;
    border-color: #8e44ad;
    color: white;
}

/* Chat Comment Likes */
.snd-chat-message .snd-like-container {
    margin: 8px 0 0 0;
    padding: 8px 0 0 0;
    border-top: 1px solid #f5f5f5;
    font-size: 0.8rem;
}

.snd-chat-message .snd-like-button {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    min-width: 40px;
}

.snd-chat-message .snd-like-count {
    font-size: 0.75rem;
}

.snd-chat-message .snd-like-details-toggle {
    font-size: 0.7rem;
}

/* Chat Reply Likes (smaller) */
.snd-chat-reply .snd-like-container {
    margin: 4px 0 0 0;
    padding: 4px 0 0 0;
}

.snd-chat-reply .snd-like-button {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 32px;
}

.snd-chat-reply .snd-like-count {
    font-size: 0.7rem;
}

/* Loading States */
.snd-like-container.loading .snd-like-button {
    opacity: 0.6;
    cursor: not-allowed;
}

.snd-like-container.loading .snd-like-button::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #ddd;
    border-top: 2px solid #8e44ad;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 6px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .snd-like-container {
        gap: 8px;
        font-size: 0.85rem;
    }
    
    .snd-like-button {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    
    .snd-like-details:not(.snd-like-overlay) {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 90vw;
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .snd-like-container {
        border-top-color: #333;
    }
    
    .snd-like-button {
        border-color: #555;
        color: #ccc;
    }
    
    .snd-like-button:hover {
        background: #333;
        border-color: #8e44ad;
        color: #8e44ad;
    }
    
    .snd-like-count {
        color: #ccc;
    }
    
    .snd-like-details {
        background: #222;
        border-color: #444;
    }

    .snd-like-details.snd-like-overlay {
        background: #222;
        border-color: #444;
    }
    
    .snd-like-details .snd-liker-name {
        color: #ccc;
    }
}

/* Particle Animation Styles */
.snd-heart-particle,
.snd-dopamine-particle,
.snd-brain-particle,
.snd-nooo-particle {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Heart Particle Animation - Gentle floating with fade */
@keyframes sndHeartFloat {
    0% {
        transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
        opacity: 1;
    }
    20% {
        transform: translate(-50%, -50%) scale(1) rotate(10deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--endX), var(--endY)) scale(0.8) rotate(25deg);
        opacity: 0;
    }
}

/* Dopamine Text Particle Animation - Bouncy confetti motion */
@keyframes sndDopamineBounce {
    0% {
        transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: translate(calc(var(--endX) * 0.3), calc(var(--endY) * 0.2)) scale(1.2) rotate(15deg);
        opacity: 1;
    }
    50% {
        transform: translate(calc(var(--endX) * 0.7), calc(var(--endY) * 0.6)) scale(1) rotate(-10deg);
        opacity: 0.8;
    }
    75% {
        transform: translate(calc(var(--endX) * 0.9), calc(var(--endY) * 0.8)) scale(0.9) rotate(20deg);
        opacity: 0.4;
    }
    100% {
        transform: translate(var(--endX), var(--endY)) scale(0.6) rotate(0deg);
        opacity: 0;
    }
}

/* Brain Particle Animation - Angry shake with explosive outward travel */
@keyframes sndBrainExplode {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    5% {
        transform: translate(var(--shakeIntensity), -50%) scale(1.2);
        opacity: 1;
    }
    10% {
        transform: translate(calc(var(--shakeIntensity) * -1), -50%) scale(1.2);
        opacity: 1;
    }
    15% {
        transform: translate(calc(var(--shakeIntensity) * 0.8), -50%) scale(1.1);
        opacity: 1;
    }
    20% {
        transform: translate(calc(var(--shakeIntensity) * -0.8), -50%) scale(1.1);
        opacity: 1;
    }
    25% {
        transform: translate(calc(var(--shakeIntensity) * 0.5), calc(var(--endY) * 0.1)) scale(1);
        opacity: 1;
    }
    35% {
        transform: translate(calc(var(--endX) * 0.3), calc(var(--endY) * 0.3)) scale(0.95) rotate(15deg);
        opacity: 0.9;
    }
    55% {
        transform: translate(calc(var(--endX) * 0.7), calc(var(--endY) * 0.7)) scale(0.8) rotate(-20deg);
        opacity: 0.7;
    }
    75% {
        transform: translate(calc(var(--endX) * 0.9), calc(var(--endY) * 0.9)) scale(0.6) rotate(25deg);
        opacity: 0.4;
    }
    100% {
        transform: translate(var(--endX), var(--endY)) scale(0.3) rotate(-15deg);
        opacity: 0;
    }
}

/* Brain Particle Animation - Angry shake with fade (old version - keep for backward compatibility) */
@keyframes sndBrainShake {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    10% {
        transform: translate(calc(-50% + var(--shakeDistance)), -50%) scale(1.1);
        opacity: 1;
    }
    20% {
        transform: translate(calc(-50% - var(--shakeDistance)), -50%) scale(1.1);
        opacity: 1;
    }
    30% {
        transform: translate(calc(-50% + var(--shakeDistance) * 0.8), -50%) scale(1);
        opacity: 1;
    }
    40% {
        transform: translate(calc(-50% - var(--shakeDistance) * 0.8), -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(calc(-50% + var(--shakeDistance) * 0.5), -50%) scale(0.9);
        opacity: 0.8;
    }
    60% {
        transform: translate(calc(-50% - var(--shakeDistance) * 0.5), -50%) scale(0.9);
        opacity: 0.6;
    }
    70% {
        transform: translate(calc(-50% + var(--shakeDistance) * 0.2), -50%) scale(0.8);
        opacity: 0.4;
    }
    80% {
        transform: translate(calc(-50% - var(--shakeDistance) * 0.2), -50%) scale(0.8);
        opacity: 0.2;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
}

/* Performance optimizations for animations */
.snd-heart-particle,
.snd-dopamine-particle,
.snd-brain-particle,
.snd-nooo-particle {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/* "Nooooo" Text Particle Animation - DRAMATIC falling with heavy rotation and scaling */
@keyframes sndNoooFall {
    0% {
        transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
        opacity: 1;
    }
    10% {
        transform: translate(-50%, -50%) scale(1.4) rotate(-8deg);
        opacity: 1;
    }
    25% {
        transform: translate(calc(var(--endX) * 0.3), calc(var(--endY) * 0.2)) scale(1.1) rotate(15deg);
        opacity: 0.95;
    }
    45% {
        transform: translate(calc(var(--endX) * 0.6), calc(var(--endY) * 0.5)) scale(0.95) rotate(-25deg);
        opacity: 0.8;
    }
    65% {
        transform: translate(calc(var(--endX) * 0.8), calc(var(--endY) * 0.7)) scale(0.8) rotate(35deg);
        opacity: 0.6;
    }
    85% {
        transform: translate(calc(var(--endX) * 0.95), calc(var(--endY) * 0.9)) scale(0.6) rotate(-30deg);
        opacity: 0.3;
    }
    100% {
        transform: translate(var(--endX), var(--endY)) scale(0.3) rotate(20deg);
        opacity: 0;
    }
}