/**
 * Forum Mention Styles
 * Professional styling for @username mentions and autocomplete
 */

/* Mention Links in Content */
.mention {
    @apply inline-flex items-center px-2 py-1 rounded-md text-sm font-medium;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.mention:hover {
    @apply transform scale-105 shadow-md;
    filter: brightness(1.1);
}

.mention:focus {
    @apply outline-none ring-2 ring-purple-500 ring-opacity-50;
}

/* Invalid mentions (users not found) */
.mention-invalid {
    @apply bg-gray-400 text-white cursor-not-allowed opacity-75;
    background: #9ca3af;
}

.mention-invalid:hover {
    @apply transform-none scale-100 shadow-none;
    filter: none;
}

/* Mention Badge Variants */
.mention.mention-admin {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.mention.mention-moderator {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.mention.mention-vip {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Mention Suggestions Dropdown */
.mention-suggestions {
    font-family: inherit;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
}

.mention-suggestions::-webkit-scrollbar {
    width: 6px;
}

.mention-suggestions::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.mention-suggestions::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.mention-suggestions::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Suggestion Items */
.mention-suggestion-item {
    @apply flex items-center p-3 cursor-pointer transition-all duration-150;
    border-bottom: 1px solid #f1f5f9;
}

.mention-suggestion-item:last-child {
    border-bottom: none;
}

.mention-suggestion-item:hover {
    @apply bg-gray-50;
    transform: translateX(2px);
}

.mention-suggestion-item.selected {
    @apply bg-purple-50 border-l-4 border-l-purple-500;
}

.mention-suggestion-item .avatar {
    @apply w-8 h-8 rounded-full mr-3 flex-shrink-0 flex items-center justify-center text-sm font-semibold;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.mention-suggestion-item .avatar img {
    @apply w-full h-full rounded-full object-cover;
}

.mention-suggestion-item .user-info {
    @apply flex-1 min-w-0;
}

.mention-suggestion-item .user-name {
    @apply font-semibold text-gray-900 text-sm truncate;
}

.mention-suggestion-item .user-email {
    @apply text-gray-500 text-xs truncate;
}

.mention-suggestion-item .user-badge {
    @apply ml-2 px-2 py-1 text-xs rounded-full font-medium;
}

.mention-suggestion-item .user-badge.admin {
    @apply bg-yellow-100 text-yellow-800;
}

.mention-suggestion-item .user-badge.moderator {
    @apply bg-green-100 text-green-800;
}

.mention-suggestion-item .user-badge.vip {
    @apply bg-purple-100 text-purple-800;
}

/* Loading State */
.mention-suggestions .loading {
    @apply flex items-center justify-center p-4 text-gray-500;
}

.mention-suggestions .loading::before {
    content: '';
    @apply w-4 h-4 border-2 border-gray-300 border-t-purple-600 rounded-full mr-2;
    animation: spin 1s linear infinite;
}

/* Empty State */
.mention-suggestions .empty {
    @apply p-4 text-center text-gray-500 text-sm;
}

/* Textarea Enhancement for Mentions */
.mention-enabled {
    @apply relative;
}

.mention-enabled:focus {
    @apply ring-2 ring-purple-500 ring-opacity-50 border-purple-300;
}

/* Mention Statistics in User Profile */
.mention-stats {
    @apply grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6;
}

.mention-stat {
    @apply bg-white rounded-lg p-4 shadow-sm border;
}

.mention-stat-value {
    @apply text-2xl font-bold text-gray-900 mb-1;
}

.mention-stat-label {
    @apply text-sm text-gray-600;
}

/* Mention History List */
.mention-list {
    @apply space-y-3;
}

.mention-item {
    @apply bg-white rounded-lg p-4 shadow-sm border hover:shadow-md transition-shadow;
}

.mention-item.unread {
    @apply border-l-4 border-l-purple-500 bg-purple-50;
}

.mention-item-header {
    @apply flex items-center justify-between mb-2;
}

.mention-item-user {
    @apply flex items-center;
}

.mention-item-avatar {
    @apply w-8 h-8 rounded-full mr-3;
}

.mention-item-name {
    @apply font-semibold text-gray-900 text-sm;
}

.mention-item-time {
    @apply text-xs text-gray-500;
}

.mention-item-content {
    @apply text-sm text-gray-700 mb-2;
}

.mention-item-context {
    @apply bg-gray-100 rounded-md p-2 text-sm font-mono text-gray-600;
}

.mention-item-actions {
    @apply flex items-center space-x-2 mt-3;
}

.mention-item-action {
    @apply text-xs text-purple-600 hover:text-purple-700 font-medium;
}

/* Responsive Design */
@media (max-width: 640px) {
    .mention-suggestions {
        @apply left-4 right-4 max-w-none;
        width: auto !important;
    }
    
    .mention-suggestion-item {
        @apply p-2;
    }
    
    .mention-suggestion-item .avatar {
        @apply w-6 h-6 text-xs mr-2;
    }
    
    .mention-stats {
        @apply grid-cols-2;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .mention-suggestions {
        @apply bg-gray-800 border-gray-700;
    }
    
    .mention-suggestion-item {
        @apply border-gray-700;
    }
    
    .mention-suggestion-item:hover {
        @apply bg-gray-700;
    }
    
    .mention-suggestion-item.selected {
        @apply bg-gray-700 border-l-purple-400;
    }
    
    .mention-suggestion-item .user-name {
        @apply text-white;
    }
    
    .mention-suggestion-item .user-email {
        @apply text-gray-400;
    }
    
    .mention-item {
        @apply bg-gray-800 border-gray-700;
    }
    
    .mention-item.unread {
        @apply bg-gray-800 border-l-purple-400;
    }
    
    .mention-item-name {
        @apply text-white;
    }
    
    .mention-item-content {
        @apply text-gray-300;
    }
    
    .mention-item-context {
        @apply bg-gray-700 text-gray-300;
    }
}

/* Animation Keyframes */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mention-popup {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mention-suggestions {
    animation: mention-popup 0.15s ease-out;
}

/* Accessibility */
.mention:focus-visible,
.mention-suggestion-item:focus-visible {
    @apply outline-2 outline-purple-500 outline-offset-2;
}

.mention-suggestion-item[aria-selected="true"] {
    @apply bg-purple-100 border-l-4 border-l-purple-500;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mention {
        @apply border border-current;
    }
    
    .mention-suggestions {
        @apply border-2 border-black;
    }
}