/* Autocorrect Suggestions Styling */

.suggestion-item.autocorrect-suggestion {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    font-weight: 600;
    animation: pulseAutocorrect 2s ease-in-out infinite;
}

.suggestion-item.autocorrect-suggestion:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    transform: scale(1.02);
}

@keyframes pulseAutocorrect {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
}

.suggestion-item.autocorrect-suggestion .suggestion-icon {
    font-size: 1.2em;
    animation: sparkle 1.5s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(10deg);
    }
    75% {
        transform: scale(1.2) rotate(-10deg);
    }
}

.suggestion-item.autocorrect-suggestion .suggestion-text {
    color: #92400e;
}

.suggestion-item.autocorrect-suggestion .suggestion-desc {
    color: #b45309;
    font-size: 0.85em;
    font-style: italic;
}

.suggestion-item.autocorrect-suggestion .suggestion-type {
    background: #f59e0b;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 700;
}

/* Enhanced suggestion highlighting */
.suggestion-text strong {
    color: #1e40af;
    font-weight: 700;
}

.suggestion-item.enhanced {
    transition: all 0.2s ease;
    cursor: pointer;
}

.suggestion-item.enhanced:hover {
    background: #f0f9ff;
    transform: translateX(4px);
}