/* === Animations & Keyframes === */

/* Chat title fade-out */
@keyframes fadeOutOpacity {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeOutHeight {
    from { height: 28px; }
    to { height: 0; padding: 0; }
}

@keyframes fadeOutMargin {
    from { margin-top: 16px; }
    to { margin-top: 0; }
}

/* Glowing icons */
.glowing-red-icon {
    color: red;
    animation: shimmer-red 3s infinite ease-in-out;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5), 0 0 10px rgba(255, 0, 0, 0.4), 0 0 15px rgba(255, 0, 0, 0.3);
    transition: color 1s ease-in-out;
}

.glowing-green-icon {
    color: #4CAF50;
    animation: shimmer-green 3s infinite ease-in-out;
    text-shadow: 0 0 5px rgba(76, 175, 80, 0.5), 0 0 10px rgba(76, 175, 80, 0.4), 0 0 15px rgba(76, 175, 80, 0.3);
    transition: color 1s ease-in-out;
}

@keyframes shimmer-red {
    0%, 100% {
        opacity: 0.7;
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.5), 0 0 10px rgba(255, 0, 0, 0.4), 0 0 15px rgba(255, 0, 0, 0.3);
    }
    50% {
        opacity: 0.5;
        text-shadow: 0 0 8px rgba(255, 0, 0, 0.6), 0 0 12px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.4);
    }
}

@keyframes shimmer-green {
    0%, 100% {
        opacity: 0.7;
        text-shadow: 0 0 5px rgba(76, 175, 80, 0.5), 0 0 10px rgba(76, 175, 80, 0.4), 0 0 15px rgba(76, 175, 80, 0.3);
    }
    50% {
        opacity: 0.5;
        text-shadow: 0 0 8px rgba(76, 175, 80, 0.6), 0 0 12px rgba(76, 175, 80, 0.5), 0 0 20px rgba(76, 175, 80, 0.4);
    }
}

/* Spinner */
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    margin-bottom: 4px;
}

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

/* Install prompt */
#install-prompt {
    opacity: 0;
    animation: fadeInOut 15s ease forwards;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    5% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}