/**
 * TagCategoryInput Component Styles
 * 
 * WordPress-style tag input system with visual category tags,
 * suggestion dropdown, and responsive design.
 * 
 * Features:
 * - Full integration with admin design system
 * - Dynamic category color themes
 * - Enhanced animations and transitions
 * - Comprehensive responsive design
 * - Advanced accessibility support
 * - Performance optimizations
 * - Dark/light theme support
 * - High contrast mode support
 * 
 * Requirements: 3.1, 3.2, 4.3, 6.5
 */

/* Import design system - ensures all variables are available */
@import url('../../css/design-system.css');

/* Component-specific CSS custom properties that extend the design system */
:root {
    /* TagCategoryInput theme variables - using design system tokens */
    --tci-primary-color: var(--color-primary);
    --tci-success-color: var(--color-success);
    --tci-error-color: var(--color-error);
    --tci-warning-color: var(--color-warning);
    --tci-info-color: var(--color-info);
    
    /* Surface colors - using design system surfaces */
    --tci-surface: var(--color-surface);
    --tci-surface-light: var(--color-surface-light);
    --tci-surface-medium: var(--color-surface-medium);
    --tci-surface-dark: var(--color-surface-dark);
    
    /* Text colors - using design system text colors */
    --tci-text-primary: var(--color-text-primary);
    --tci-text-secondary: var(--color-text-secondary);
    --tci-text-muted: var(--color-text-muted);
    --tci-text-disabled: var(--color-text-disabled);
    --tci-text-high-contrast: var(--color-text-high-contrast);
    
    /* Border and shadow - using design system tokens */
    --tci-border-color: var(--color-border);
    --tci-border-light: var(--color-border-light);
    --tci-border-medium: var(--color-border-medium);
    --tci-border-focus: var(--color-border-focus);
    --tci-shadow-sm: var(--shadow-sm);
    --tci-shadow-md: var(--shadow-md);
    --tci-shadow-lg: var(--shadow-lg);
    --tci-shadow-glow: var(--shadow-glow);
    
    /* Spacing - using design system spacing scale */
    --tci-spacing-xs: var(--spacing-xs);
    --tci-spacing-sm: var(--spacing-sm);
    --tci-spacing-md: var(--spacing-md);
    --tci-spacing-lg: var(--spacing-lg);
    --tci-spacing-xl: var(--spacing-xl);
    --tci-spacing-interactive-min: var(--spacing-interactive-min);
    --tci-spacing-interactive-safe: var(--spacing-interactive-safe);
    
    /* Border radius - using design system radius scale */
    --tci-radius-xs: var(--border-radius-xs);
    --tci-radius-sm: var(--border-radius-sm);
    --tci-radius-md: var(--border-radius-md);
    --tci-radius-lg: var(--border-radius-lg);
    --tci-radius-xl: var(--border-radius-xl);
    --tci-radius-full: var(--border-radius-full);
    
    /* Transitions - using design system transitions */
    --tci-transition-fast: var(--transition-fast);
    --tci-transition-normal: var(--transition-normal);
    --tci-transition-slow: var(--transition-slow);
    --tci-transition-colors: var(--transition-colors);
    --tci-transition-transform: var(--transition-transform);
    --tci-transition-all: var(--transition-all);
    
    /* Typography - using design system typography */
    --tci-font-family: var(--font-family-primary);
    --tci-font-size-xs: var(--font-size-xs);
    --tci-font-size-sm: var(--font-size-sm);
    --tci-font-size-base: var(--font-size-base);
    --tci-font-size-lg: var(--font-size-lg);
    --tci-font-weight-normal: var(--font-weight-normal);
    --tci-font-weight-medium: var(--font-weight-medium);
    --tci-font-weight-semibold: var(--font-weight-semibold);
    --tci-line-height-tight: var(--line-height-tight);
    --tci-line-height-normal: var(--line-height-normal);
    
    /* Z-index layers - using design system z-index scale */
    --tci-z-dropdown: var(--z-index-dropdown);
    --tci-z-modal: var(--z-index-modal);
    --tci-z-tooltip: var(--z-index-tooltip);
    --tci-z-popover: var(--z-index-popover);
    
    /* Touch targets - using design system touch targets */
    --tci-touch-target-min: var(--touch-target-min);
    --tci-input-height: var(--input-height);
    
    /* Admin-specific overrides for better integration */
    --tci-admin-surface: var(--admin-surface-primary, var(--color-surface));
    --tci-admin-surface-elevated: var(--admin-surface-elevated, var(--color-surface-light));
    --tci-admin-hover-bg: var(--admin-hover-bg, var(--color-primary-100));
    --tci-admin-active-bg: var(--admin-active-bg, var(--color-primary-200));
    --tci-admin-focus-ring: var(--admin-focus-ring, 0 0 0 2px var(--color-primary-200));
    
    /* Category-specific colors using design system semantic colors */
    --tci-category-bg: var(--color-category-bg, var(--color-primary-100));
    --tci-category-text: var(--color-category-text, var(--color-text-primary));
    --tci-category-border: var(--color-category-border, var(--color-primary-300));
    
    /* Badge colors using design system badge tokens */
    --tci-badge-primary-bg: var(--color-badge-primary-bg, var(--color-primary));
    --tci-badge-primary-text: var(--color-badge-primary-text, var(--color-text-on-primary));
    --tci-badge-secondary-bg: var(--color-badge-secondary-bg, var(--color-secondary));
    --tci-badge-secondary-text: var(--color-badge-secondary-text, var(--color-text-on-secondary));
    --tci-badge-accent-bg: var(--color-badge-accent-bg, var(--color-accent));
    --tci-badge-accent-text: var(--color-badge-accent-text, var(--color-text-on-accent));
}

/* Main Container - fully integrated with admin design system */
.tag-category-input {
    position: relative;
    width: 100%;
    font-family: var(--tci-font-family);
    font-size: var(--tci-font-size-base);
    line-height: var(--tci-line-height-normal);
    
    /* Design system integration with admin focus styles */
    --focus-color: var(--tci-border-focus);
    --focus-shadow: var(--tci-admin-focus-ring);
    --focus-outline: 2px solid var(--focus-color);
}

/* Disabled state using design system disabled styles */
.tag-category-input[data-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(0.3);
}

/* Loading state with design system colors */
.tag-category-input.loading {
    position: relative;
}

.tag-category-input.loading::before {
    content: attr(data-loading-message);
    position: absolute;
    top: calc(-1 * var(--tci-spacing-xl));
    left: 0;
    font-size: var(--tci-font-size-xs);
    color: var(--tci-primary-color);
    background: var(--tci-admin-surface-elevated);
    padding: var(--tci-spacing-xs) var(--tci-spacing-sm);
    border-radius: var(--tci-radius-xs);
    border: 1px solid var(--tci-border-light);
    z-index: var(--tci-z-tooltip);
    animation: loadingMessageFade var(--animation-duration-normal) ease-out;
    backdrop-filter: var(--glass-backdrop-filter);
    box-shadow: var(--tci-shadow-sm);
}

/* Enhanced loading animation using design system timing */
@keyframes loadingMessageFade {
    from { 
        opacity: 0; 
        transform: translateY(calc(-1 * var(--tci-spacing-xs))); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Input Container - following admin form input patterns */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    min-height: var(--tci-input-height);
    padding: var(--spacing-input-padding);
    border: 1px solid var(--tci-border-medium);
    border-radius: var(--tci-radius-sm);
    background-color: var(--tci-admin-surface);
    cursor: text;
    transition: var(--tci-transition-colors), 
                box-shadow var(--tci-transition-normal);
    box-shadow: var(--tci-shadow-sm);
    font-family: var(--tci-font-family);
    
    /* Ensure proper spacing between tags and input */
    gap: var(--tci-spacing-xs);
}

/* Hover state using admin design system hover patterns */
.tag-input-container:hover {
    border-color: var(--tci-border-focus);
    box-shadow: var(--tci-shadow-md);
    background-color: var(--tci-admin-hover-bg);
}

/* Focus state using admin focus ring pattern */
.tag-input-container:focus-within {
    border-color: var(--tci-border-focus);
    box-shadow: var(--tci-admin-focus-ring);
    outline: none;
    background-color: var(--tci-admin-surface);
}

/* Error state using design system semantic colors */
.tag-input-container.error-state {
    border-color: var(--tci-error-color);
    box-shadow: 0 0 0 2px var(--color-error-light);
    background-color: var(--color-error-light);
}

/* Success state using design system semantic colors */
.tag-input-container.success-state {
    border-color: var(--tci-success-color);
    box-shadow: 0 0 0 2px var(--color-success-light);
    background-color: var(--color-success-light);
}

/* Warning state for completeness */
.tag-input-container.warning-state {
    border-color: var(--tci-warning-color);
    box-shadow: 0 0 0 2px var(--color-warning-light);
    background-color: var(--color-warning-light);
}

/* Info state for completeness */
.tag-input-container.info-state {
    border-color: var(--tci-info-color);
    box-shadow: 0 0 0 2px var(--color-info-light);
    background-color: var(--color-info-light);
}

/* Selected Tags Container - using design system spacing */
.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tci-spacing-xs);
    flex: 0 0 auto;
}

/* Category Tags - using design system badge patterns and cosmic theme */
.category-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--tci-spacing-xs) var(--tci-spacing-sm);
    background: var(--gradient-primary); /* Using cosmic theme gradient */
    color: var(--tci-badge-primary-text);
    border-radius: var(--tci-radius-full);
    font-size: var(--tci-font-size-sm);
    font-weight: var(--tci-font-weight-medium);
    line-height: var(--tci-line-height-tight);
    max-width: 200px;
    min-height: var(--tci-spacing-lg); /* Ensure minimum touch target */
    transition: var(--tci-transition-all);
    animation: tagSlideIn var(--animation-duration-normal) ease-out;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    box-shadow: var(--tci-shadow-sm);
    
    /* Ensure proper text contrast */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Hover state using cosmic theme hover effects */
.category-tag:hover {
    background: var(--gradient-secondary); /* Alternate cosmic gradient on hover */
    transform: translateY(-1px);
    box-shadow: var(--tci-shadow-glow);
    border-color: var(--tci-primary-color);
}

/* Category Color Theme Support - integrated with design system */
.category-tag[data-color-theme] {
    background: var(--category-color, var(--gradient-primary));
    color: var(--category-text-color, var(--tci-badge-primary-text));
}

.category-tag[data-color-theme]:hover {
    background: var(--category-color-hover, var(--gradient-secondary));
    box-shadow: var(--tci-shadow-glow);
    transform: translateY(-1px);
}

/* Dynamic category color themes - using cosmic theme colors and design system patterns */
.category-tag[data-color-theme="#FF6B6B"] {
    --category-color: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    --category-color-hover: linear-gradient(135deg, var(--color-secondary-dark) 0%, #C0392B 100%);
    --category-text-color: var(--color-text-on-secondary);
}

.category-tag[data-color-theme="#4ECDC4"] {
    --category-color: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --category-color-hover: linear-gradient(135deg, var(--color-primary-dark) 0%, #26C6DA 100%);
    --category-text-color: var(--color-text-on-primary);
}

.category-tag[data-color-theme="#45B7D1"] {
    --category-color: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    --category-color-hover: linear-gradient(135deg, var(--color-accent-dark) 0%, #1976D2 100%);
    --category-text-color: var(--color-text-on-accent);
}

.category-tag[data-color-theme="#96CEB4"] {
    --category-color: linear-gradient(135deg, var(--color-success) 0%, #4CAF50 100%);
    --category-color-hover: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    --category-text-color: var(--color-success-text);
}

.category-tag[data-color-theme="#FFEAA7"] {
    --category-color: linear-gradient(135deg, var(--color-warning) 0%, #FFC107 100%);
    --category-color-hover: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
    --category-text-color: var(--color-warning-text);
}

.category-tag[data-color-theme="#DDA0DD"] {
    --category-color: linear-gradient(135deg, #DDA0DD 0%, #9C27B0 100%);
    --category-color-hover: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
    --category-text-color: #ffffff;
}

.category-tag[data-color-theme="#F39C12"] {
    --category-color: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
    --category-color-hover: linear-gradient(135deg, #E67E22 0%, #D35400 100%);
    --category-text-color: #ffffff;
}

.category-tag[data-color-theme="#E74C3C"] {
    --category-color: linear-gradient(135deg, var(--color-error) 0%, #C0392B 100%);
    --category-color-hover: linear-gradient(135deg, #C0392B 0%, #A93226 100%);
    --category-text-color: var(--color-error-text);
}

/* Generic color theme support with design system fallbacks */
.category-tag[data-color-theme*="#"] {
    background: var(--category-color);
    color: var(--category-text-color);
}

.category-tag[data-color-theme*="#"]:hover {
    background: var(--category-color-hover);
    box-shadow: var(--tci-shadow-glow);
}

.category-tag.highlight-animation {
    animation: tagHighlight 0.6s ease-out;
}

.category-tag.removing {
    animation: tagRemove 0.3s ease-out forwards;
}

.category-tag.bounce-in {
    animation: tagBounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.category-tag.shake {
    animation: tagShake 0.5s ease-in-out;
}

.category-tag.pulse {
    animation: tagPulse 1s ease-in-out infinite;
}

.category-tag.error-state {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    animation: tagShake 0.5s ease-in-out;
}

.category-tag.success-state {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    animation: tagPulse 0.6s ease-out;
}

@keyframes tagHighlight {
    0% { 
        background: linear-gradient(135deg, #00a32a 0%, #4ade80 100%);
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 163, 42, 0.4);
    }
    100% { 
        background: var(--category-color, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
        transform: scale(1);
        box-shadow: 0 2px 8px var(--category-shadow, rgba(102, 126, 234, 0.3));
    }
}

@keyframes tagRemove {
    0% { 
        opacity: 1;
        transform: scale(1) rotateZ(0deg);
        max-width: 200px;
        margin-right: 4px;
    }
    50% {
        opacity: 0.5;
        transform: scale(0.9) rotateZ(-5deg);
        max-width: 200px;
        margin-right: 4px;
    }
    100% { 
        opacity: 0;
        transform: scale(0.7) rotateZ(-10deg);
        max-width: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

@keyframes tagBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(-20px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1) translateY(-5px);
    }
    70% {
        transform: scale(0.95) translateY(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes tagShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes tagPulse {
    0% { 
        transform: scale(1);
        box-shadow: 0 2px 8px var(--category-shadow, rgba(102, 126, 234, 0.3));
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 4px 16px var(--category-shadow, rgba(102, 126, 234, 0.5));
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 2px 8px var(--category-shadow, rgba(102, 126, 234, 0.3));
    }
}

.category-tag .tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 4px;
}

/* Tag Remove Button */
.tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.tag-remove:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.tag-remove:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 1px;
}

.tag-remove:active {
    transform: scale(0.95);
}

/* Text Input - following admin form input patterns */
.tag-input {
    flex: 1 1 auto;
    min-width: 120px;
    padding: var(--tci-spacing-xs) var(--tci-spacing-xs);
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--tci-font-size-base);
    font-family: var(--tci-font-family);
    line-height: var(--tci-line-height-normal);
    color: var(--tci-text-primary);
    transition: var(--tci-transition-colors);
    min-height: calc(var(--tci-input-height) - var(--tci-spacing-md)); /* Account for container padding */
}

/* Placeholder styling using design system muted text */
.tag-input::placeholder {
    color: var(--tci-text-muted);
    transition: var(--tci-transition-colors);
    font-style: italic;
}

/* Focus state for better accessibility */
.tag-input:focus {
    color: var(--tci-text-high-contrast);
}

/* Disabled state using design system disabled colors */
.tag-input:disabled {
    color: var(--tci-text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Loading state with design system colors and timing */
.tag-input.loading {
    background: linear-gradient(90deg, 
        transparent, 
        var(--tci-primary-color)20, 
        transparent
    );
    background-size: 200% 100%;
    animation: inputLoading var(--animation-duration-very-slow) infinite;
}

/* Enhanced loading animation using design system timing */
@keyframes inputLoading {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Suggestions Dropdown - using admin design system dropdown patterns */
.suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--tci-z-dropdown);
    margin-top: var(--tci-spacing-xs);
    background: var(--tci-admin-surface-elevated);
    border: 1px solid var(--tci-border-medium);
    border-radius: var(--tci-radius-md);
    box-shadow: var(--tci-shadow-lg);
    max-height: 300px;
    overflow: hidden;
    animation: dropdownSlideIn var(--animation-duration-normal) ease-out;
    backdrop-filter: var(--glass-backdrop-filter);
    
    /* Ensure proper contrast and visibility */
    color: var(--tci-text-primary);
}

/* Suggestions list with design system scrollbar styling */
.suggestions-list {
    max-height: 300px;
    overflow-y: auto;
    
    /* Custom scrollbar for better integration */
    scrollbar-width: thin;
    scrollbar-color: var(--tci-primary-color) var(--tci-surface-dark);
}

.suggestions-list::-webkit-scrollbar {
    width: 8px;
}

.suggestions-list::-webkit-scrollbar-track {
    background: var(--tci-surface-dark);
    border-radius: var(--tci-radius-xs);
}

.suggestions-list::-webkit-scrollbar-thumb {
    background: var(--tci-primary-color);
    border-radius: var(--tci-radius-xs);
}

.suggestions-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-light);
}

/* Suggestion Items - using admin design system interactive patterns */
.suggestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tci-spacing-md) var(--tci-spacing-lg);
    cursor: pointer;
    border-bottom: 1px solid var(--tci-border-color);
    transition: var(--tci-transition-all);
    position: relative;
    min-height: var(--tci-touch-target-min);
    
    /* Ensure proper text color */
    color: var(--tci-text-primary);
}

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

/* Hover state using admin hover patterns */
.suggestion-item:hover,
.suggestion-item.focused {
    background-color: var(--tci-admin-hover-bg);
    transform: translateX(2px);
    color: var(--tci-text-high-contrast);
}

/* Focused state using admin focus patterns */
.suggestion-item.focused {
    background-color: var(--color-primary-100);
    border-left: 3px solid var(--tci-primary-color);
    box-shadow: inset 3px 0 0 var(--tci-primary-color);
}

/* Active state for better interaction feedback */
.suggestion-item:active {
    background-color: var(--tci-admin-active-bg);
    transform: translateX(1px);
}

.suggestion-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.suggestion-color-preview {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.suggestion-color-preview[data-color-theme] {
    background: var(--preview-color, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
}

/* Color preview themes */
.suggestion-color-preview[data-color-theme="#FF6B6B"] {
    --preview-color: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
}

.suggestion-color-preview[data-color-theme="#4ECDC4"] {
    --preview-color: linear-gradient(135deg, #4ECDC4 0%, #26C6DA 100%);
}

.suggestion-color-preview[data-color-theme="#45B7D1"] {
    --preview-color: linear-gradient(135deg, #45B7D1 0%, #2196F3 100%);
}

.suggestion-color-preview[data-color-theme="#96CEB4"] {
    --preview-color: linear-gradient(135deg, #96CEB4 0%, #4CAF50 100%);
}

.suggestion-color-preview[data-color-theme="#FFEAA7"] {
    --preview-color: linear-gradient(135deg, #FFEAA7 0%, #FFC107 100%);
}

.suggestion-color-preview[data-color-theme="#DDA0DD"] {
    --preview-color: linear-gradient(135deg, #DDA0DD 0%, #9C27B0 100%);
}

.suggestion-color-preview[data-color-theme="#F39C12"] {
    --preview-color: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
}

.suggestion-color-preview[data-color-theme="#E74C3C"] {
    --preview-color: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
}

.suggestion-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.suggestion-name {
    font-size: 14px;
    color: #1d2327;
    font-weight: 500;
    line-height: 1.2;
}

.suggestion-description {
    font-size: 12px;
    color: #646970;
    line-height: 1.3;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.suggestion-count {
    font-size: 12px;
    color: #646970;
    font-weight: normal;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

.suggestion-usage {
    font-size: 10px;
    color: #8c8f94;
    font-style: italic;
}

/* Create New Category Item */
.suggestion-item.create-new {
    background-color: #f0f6fc;
    border-left: 3px solid #2271b1;
    flex-direction: column;
    align-items: flex-start;
}

.suggestion-item.create-new:hover,
.suggestion-item.create-new.focused {
    background-color: #e7f3ff;
}

.suggestion-item.create-new .suggestion-name {
    color: #2271b1;
    font-weight: 600;
}

.suggestion-item.create-new.valid .suggestion-name {
    color: #2271b1;
}

.suggestion-item.create-new.invalid {
    background-color: #fcf0f1;
    border-left-color: #d63638;
    cursor: not-allowed;
}

.suggestion-item.create-new.invalid .suggestion-name {
    color: #d63638;
}

.suggestion-item.create-new.invalid:hover,
.suggestion-item.create-new.invalid.focused {
    background-color: #fcf0f1;
}

.suggestion-error {
    font-size: 12px;
    color: #d63638;
    margin-top: 4px;
    font-weight: normal;
}

.suggestion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #2271b1;
    color: #ffffff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.suggestion-item.create-new.invalid .suggestion-icon {
    background: #d63638;
}

/* Enhanced Loading States */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    color: #646970;
    font-size: 14px;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(34, 113, 177, 0.2);
    border-top: 3px solid #2271b1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: 13px;
    color: #646970;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}

/* Skeleton loading for suggestions */
.suggestion-skeleton {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(90deg, #f0f0f1 25%, #e0e0e1 50%, #f0f0f1 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

.skeleton-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-line {
    height: 12px;
    background: linear-gradient(90deg, #f0f0f1 25%, #e0e0e1 50%, #f0f0f1 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeletonShimmer 1.5s infinite;
}

.skeleton-line.primary {
    width: 70%;
    height: 14px;
}

.skeleton-line.secondary {
    width: 45%;
    height: 10px;
}

.skeleton-count {
    width: 40px;
    height: 16px;
    background: linear-gradient(90deg, #f0f0f1 25%, #e0e0e1 50%, #f0f0f1 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes skeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Progressive loading states */
.tag-category-input.initial-load .loading-indicator {
    padding: 32px 16px;
}

.tag-category-input.initial-load .loading-text::after {
    content: '...';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* Search loading state */
.tag-input.searching {
    background: linear-gradient(90deg, transparent, rgba(34, 113, 177, 0.1), transparent);
    background-size: 200% 100%;
    animation: searchShimmer 1.5s infinite;
}

@keyframes searchShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Performance optimization classes */
.tag-category-input.optimized .suggestion-item {
    will-change: transform, background-color;
    contain: layout style paint;
}

.tag-category-input.optimized .category-tag {
    will-change: transform, opacity;
    contain: layout style paint;
}

.tag-category-input.optimized .suggestions-dropdown {
    will-change: transform, opacity;
    contain: layout style paint;
}

/* GPU acceleration for smooth animations */
.category-tag,
.suggestion-item,
.suggestions-dropdown {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Lazy loading placeholder */
.suggestion-lazy-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: #8c8f94;
    font-size: 13px;
    font-style: italic;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    margin: 4px 0;
}

.suggestion-lazy-placeholder::before {
    content: '⏳';
    margin-right: 8px;
    font-size: 16px;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-track {
    flex: 1;
    height: 4px;
    background: #f0f0f1;
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2271b1, #72aee6);
    border-radius: 2px;
    transition: width 0.3s ease;
    animation: progressShimmer 2s infinite;
}

.progress-text {
    font-size: 11px;
    color: #646970;
    font-weight: 500;
    min-width: 30px;
    text-align: right;
}

@keyframes progressShimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

/* Operation Spinner */
.operation-spinner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(34, 113, 177, 0.1);
    border: 1px solid rgba(34, 113, 177, 0.2);
    border-radius: 4px;
    font-size: 12px;
    color: #2271b1;
    backdrop-filter: blur(4px);
}

.spinner-icon {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(34, 113, 177, 0.3);
    border-top: 1px solid #2271b1;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-text {
    font-weight: 500;
    white-space: nowrap;
}

/* Message Container */
.message-container {
    margin-top: 4px;
}

.message {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    animation: messageSlideIn 0.3s ease-out;
    position: relative;
    gap: 8px;
}

.message.animated {
    animation: messageSlideIn 0.3s ease-out, messagePulse 0.6s ease-out;
}

.message-icon {
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.message-text {
    flex: 1;
}

.message-action {
    padding: 4px 8px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.message-action:hover {
    background: currentColor;
    color: white;
}

.message-dismiss {
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    color: inherit;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.message-dismiss:hover {
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

/* Error Message */
.message.error {
    background-color: #fcf0f1;
    border-left: 3px solid #d63638;
    color: #d63638;
    box-shadow: 0 2px 8px rgba(214, 54, 56, 0.1);
}

.message.error .message-icon {
    color: #d63638;
}

/* Success Message */
.message.success {
    background-color: #f0f9ff;
    border-left: 3px solid #00a32a;
    color: #00a32a;
    box-shadow: 0 2px 8px rgba(0, 163, 42, 0.1);
}

.message.success .message-icon {
    color: #00a32a;
}

/* Info Message */
.message.info {
    background-color: #f0f6fc;
    border-left: 3px solid #2271b1;
    color: #2271b1;
    box-shadow: 0 2px 8px rgba(34, 113, 177, 0.1);
}

.message.info .message-icon {
    color: #2271b1;
}

/* Screen Reader Only - using design system accessibility utilities */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */

@media (prefers-contrast: high) {
    .tag-input-container {
        border-width: 2px;
        border-color: var(--tci-text-primary);
        background-color: var(--color-background);
    }
    
    .tag-input-container:focus-within {
        border-color: var(--tci-primary-color);
        box-shadow: 0 0 0 3px var(--tci-primary-color);
    }
    
    .category-tag {
        background: var(--tci-text-primary) !important;
        color: var(--color-background) !important;
        border: 2px solid var(--tci-text-primary);
        font-weight: var(--tci-font-weight-semibold);
    }
    
    .category-tag:hover {
        background: var(--tci-primary-color) !important;
        color: var(--color-background) !important;
        border-color: var(--tci-primary-color);
    }
    
    .suggestion-item {
        border-bottom-width: 2px;
        border-bottom-color: var(--tci-text-primary);
    }
    
    .suggestion-item:hover,
    .suggestion-item.focused {
        background-color: var(--tci-text-primary);
        color: var(--color-background);
    }
    
    .suggestions-dropdown {
        border-width: 2px;
        border-color: var(--tci-text-primary);
        background-color: var(--color-background);
    }
}

/* ===== DARK THEME SUPPORT ===== */

@media (prefers-color-scheme: dark) {
    .tag-category-input {
        /* Dark theme already handled by design system variables */
        /* Additional dark theme specific adjustments if needed */
    }
    
    .tag-input-container {
        background-color: var(--color-background-light);
        border-color: var(--tci-border-light);
    }
    
    .tag-input-container:hover {
        background-color: var(--color-surface);
    }
    
    .suggestions-dropdown {
        background-color: var(--color-background-light);
        border-color: var(--tci-border-light);
    }
    
    .suggestion-item:hover,
    .suggestion-item.focused {
        background-color: var(--color-surface);
    }
}

/* ===== LIGHT THEME SUPPORT ===== */

@media (prefers-color-scheme: light) {
    /* Light theme adjustments if needed - most handled by design system */
    .tag-input-container {
        background-color: #ffffff;
        border-color: #c3c4c7;
        color: #1d2327;
    }
    
    .tag-input {
        color: #1d2327;
    }
    
    .tag-input::placeholder {
        color: #646970;
    }
    
    .suggestions-dropdown {
        background-color: #ffffff;
        border-color: #c3c4c7;
        color: #1d2327;
    }
    
    .suggestion-item {
        color: #1d2327;
    }
    
    .suggestion-item:hover,
    .suggestion-item.focused {
        background-color: #f6f7f7;
        color: #1d2327;
    }
}

/* ===== ANIMATIONS - using design system timing ===== */

@keyframes tagSlideIn {
    from {
        opacity: 0;
        transform: translateX(calc(-1 * var(--tci-spacing-sm))) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(calc(-1 * var(--tci-spacing-sm)));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(calc(-1 * var(--tci-spacing-sm)));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes messagePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* ===== REDUCED MOTION SUPPORT ===== */

@media (prefers-reduced-motion: reduce) {
    /* Disable all animations and transitions for users who prefer reduced motion */
    .tag-category-input *,
    .tag-category-input *::before,
    .tag-category-input *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Remove transform animations */
    .category-tag:hover,
    .suggestion-item:hover,
    .suggestion-item.focused {
        transform: none !important;
    }
    
    /* Keep essential focus indicators but remove motion */
    .tag-input-container:focus-within {
        transition: none;
    }
    
    .suggestion-item.focused {
        transform: none;
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Enhanced focus indicators for keyboard navigation */
.tag-category-input *:focus-visible {
    outline: 2px solid var(--tci-primary-color);
    outline-offset: 2px;
    border-radius: var(--tci-radius-xs);
}

/* Ensure interactive elements have proper focus states */
.tag-remove:focus-visible {
    outline: 2px solid var(--color-background);
    outline-offset: 1px;
    background-color: rgba(255, 255, 255, 0.9);
}

.suggestion-item:focus-visible {
    outline: 2px solid var(--tci-primary-color);
    outline-offset: -2px;
}

/* High contrast focus indicators */
@media (prefers-contrast: high) {
    .tag-category-input *:focus-visible {
        outline-width: 3px;
        outline-color: var(--tci-text-primary);
    }
    
    .tag-remove:focus-visible {
        outline-color: var(--color-background);
        background-color: var(--tci-text-primary);
    }
}

/* Responsive Design */

/* Tablet styles */
@media (max-width: 1024px) and (min-width: 769px) {
    .tag-input-container {
        min-height: 42px;
        padding: 6px 10px;
    }
    
    .category-tag {
        font-size: 13px;
        padding: 5px 9px;
        max-width: 180px;
    }
    
    .suggestion-item {
        padding: 14px 16px;
    }
    
    .suggestion-color-preview {
        width: 14px;
        height: 14px;
    }
    
    .suggestions-dropdown {
        max-height: 280px;
    }
}

/* Mobile landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .tag-input-container {
        min-height: 40px;
        padding: 5px 10px;
    }
    
    .category-tag {
        font-size: 12px;
        padding: 4px 8px;
        margin: 1px;
    }
    
    .suggestions-dropdown {
        max-height: 200px; /* Reduced for landscape */
    }
    
    .suggestion-item {
        padding: 10px 14px;
    }
}

/* Mobile portrait */
@media (max-width: 768px) and (orientation: portrait) {
    .tag-input-container {
        min-height: 48px;
        padding: 8px 12px;
        border-radius: 8px;
    }
    
    .category-tag {
        font-size: 13px;
        padding: 6px 10px;
        margin: 2px;
        border-radius: 14px;
    }
    
    .tag-remove {
        width: 18px;
        height: 18px;
        font-size: 12px;
    }
    
    .tag-input {
        font-size: 16px; /* Prevent zoom on iOS */
        min-width: 120px;
        padding: 8px 4px;
    }
    
    .suggestion-item {
        padding: 16px 18px;
        min-height: 56px; /* Better touch targets */
    }
    
    .suggestion-color-preview {
        width: 18px;
        height: 18px;
    }
    
    .suggestion-name {
        font-size: 15px;
    }
    
    .suggestion-description {
        font-size: 13px;
        max-width: 200px;
    }
    
    .suggestion-count {
        font-size: 13px;
        padding: 3px 8px;
    }
    
    .suggestions-dropdown {
        margin-top: 10px;
        border-radius: 8px;
        max-height: 300px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .tag-input-container {
        min-height: 50px;
        padding: 10px 14px;
    }
    
    .category-tag {
        max-width: 140px;
        font-size: 12px;
        padding: 6px 9px;
        margin: 2px 1px;
    }
    
    .tag-input {
        min-width: 100px;
        font-size: 16px;
    }
    
    .selected-tags {
        gap: 3px;
        margin-right: 6px;
    }
    
    .suggestion-item {
        padding: 18px 16px;
        min-height: 60px;
    }
    
    .suggestion-content {
        gap: 10px;
    }
    
    .suggestion-text {
        gap: 3px;
    }
    
    .suggestion-description {
        max-width: 150px;
    }
    
    .suggestions-dropdown {
        margin-top: 12px;
        max-height: 250px;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    .tag-input-container {
        padding: 8px 10px;
    }
    
    .category-tag {
        max-width: 120px;
        font-size: 11px;
        padding: 5px 8px;
    }
    
    .tag-input {
        min-width: 80px;
        font-size: 16px;
    }
    
    .suggestion-item {
        padding: 16px 12px;
    }
    
    .suggestion-color-preview {
        width: 16px;
        height: 16px;
    }
    
    .suggestion-name {
        font-size: 14px;
    }
    
    .suggestion-description {
        display: none; /* Hide descriptions on very small screens */
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .tag-remove {
        width: 24px;
        height: 24px;
        font-size: 14px;
        margin-left: 6px;
    }
    
    .suggestion-item {
        min-height: 48px;
        padding: 12px 16px;
    }
    
    .category-tag {
        padding: 8px 12px;
        margin: 3px 2px;
    }
    
    .tag-input-container {
        min-height: 48px;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .tag-input-container {
        border-width: 2px;
        border-color: #000000;
    }
    
    .tag-input-container:focus-within {
        border-color: #0073aa;
        box-shadow: 0 0 0 2px #0073aa;
    }
    
    .category-tag {
        background: #000000;
        color: #ffffff;
        border: 1px solid #ffffff;
    }
    
    .suggestion-item:hover,
    .suggestion-item.focused {
        background-color: #000000;
        color: #ffffff;
    }
}

/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
    .tag-input-container {
        background-color: #1e1e1e;
        border-color: #3c434a;
        color: #ffffff;
    }
    
    .tag-input-container:hover {
        border-color: #646970;
    }
    
    .tag-input-container:focus-within {
        border-color: #72aee6;
        box-shadow: 0 0 0 1px #72aee6;
    }
    
    .tag-input {
        color: #ffffff;
    }
    
    .tag-input::placeholder {
        color: #8c8f94;
    }
    
    .suggestions-dropdown {
        background: #1e1e1e;
        border-color: #3c434a;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .suggestion-item {
        border-bottom-color: #3c434a;
    }
    
    .suggestion-item:hover,
    .suggestion-item.focused {
        background-color: #2c3338;
    }
    
    .suggestion-name {
        color: #ffffff;
    }
    
    .suggestion-count {
        color: #8c8f94;
    }
    
    .suggestion-item.create-new {
        background-color: #1a2332;
        border-left-color: #72aee6;
    }
    
    .suggestion-item.create-new:hover,
    .suggestion-item.create-new.focused {
        background-color: #2c3338;
    }
    
    .suggestion-item.create-new .suggestion-name {
        color: #72aee6;
    }
    
    .suggestion-icon {
        background: #72aee6;
    }
    
    .loading-indicator {
        color: #8c8f94;
    }
    
    .loading-spinner {
        border-color: #3c434a;
        border-top-color: #72aee6;
    }
    
    .message.error {
        background-color: #2a1a1b;
        border-left-color: #f87171;
        color: #f87171;
    }
    
    .message.success {
        background-color: #1a2e1a;
        border-left-color: #4ade80;
        color: #4ade80;
    }
    
    .suggestion-item.create-new.invalid {
        background-color: #2a1a1b;
        border-left-color: #f87171;
    }
    
    .suggestion-item.create-new.invalid .suggestion-name {
        color: #f87171;
    }
    
    .suggestion-error {
        color: #f87171;
    }
    
    .suggestion-item.create-new.invalid .suggestion-icon {
        background: #f87171;
    }
}

/* Enhanced Accessibility Features */

/* Focus management and indicators */
.tag-category-input {
    --focus-color: #2271b1;
    --focus-shadow: 0 0 0 2px rgba(34, 113, 177, 0.3);
    --focus-outline: 2px solid var(--focus-color);
}

.tag-category-input *:focus {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

.tag-category-input *:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus indicators */
.tag-input-container:focus-within {
    border-color: var(--focus-color);
    box-shadow: var(--focus-shadow);
    position: relative;
}

.tag-input-container:focus-within::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid var(--focus-color);
    border-radius: 8px;
    pointer-events: none;
    opacity: 0.5;
}

.tag-input:focus {
    outline: none; /* Handled by container */
}

.tag-remove:focus {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 1px;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.suggestion-item:focus {
    background-color: #e7f3ff;
    outline: 2px solid var(--focus-color);
    outline-offset: -2px;
    z-index: 1;
}

/* Keyboard navigation indicators */
.tag-category-input[data-keyboard-navigation="true"] .suggestion-item.focused {
    background-color: #e7f3ff;
    border-left: 4px solid var(--focus-color);
    transform: translateX(2px);
}

.tag-category-input[data-keyboard-navigation="true"] .category-tag.focused {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    transform: scale(1.05);
}

/* Screen reader enhancements */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-announcement {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ARIA live regions */
.tag-category-input [aria-live] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Skip links for keyboard users */
.skip-to-suggestions {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-to-suggestions:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 8px 12px;
    background: var(--focus-color);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1000;
}

/* Enhanced contrast for accessibility */
.tag-category-input.high-contrast {
    --focus-color: #000000;
    --focus-shadow: 0 0 0 3px #000000;
}

.tag-category-input.high-contrast .tag-input-container {
    border-width: 3px;
    border-color: #000000;
}

.tag-category-input.high-contrast .category-tag {
    border: 2px solid #000000;
    font-weight: 600;
}

.tag-category-input.high-contrast .suggestion-item {
    border-bottom: 2px solid #000000;
}

/* Motion preferences */
.tag-category-input.reduce-motion * {
    transition: none !important;
    animation: none !important;
}

.tag-category-input.reduce-motion .category-tag {
    transform: none !important;
}

.tag-category-input.reduce-motion .suggestion-item {
    transform: none !important;
}

/* Voice control support */
.tag-category-input[data-voice-control="true"] .category-tag::before {
    content: attr(data-voice-label);
    position: absolute;
    left: -10000px;
}

.tag-category-input[data-voice-control="true"] .suggestion-item::before {
    content: "Option " counter(suggestion-counter) ": ";
    counter-increment: suggestion-counter;
    position: absolute;
    left: -10000px;
}

/* Touch accessibility */
@media (hover: none) and (pointer: coarse) {
    .tag-remove {
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
    }
    
    .suggestion-item {
        min-height: 44px;
        padding: 12px 16px;
    }
    
    .tag-category-input:focus-within .tag-input-container::after {
        border-width: 3px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .category-tag,
    .tag-remove,
    .suggestion-item,
    .suggestions-dropdown {
        transition: none;
        animation: none;
    }
    
    .loading-spinner {
        animation: none;
        border-top-color: #2271b1;
    }
}

/* ===== UPLOAD FORM INTEGRATION STYLES ===== */

/* Upload form specific container styling */
.upload-form .tag-category-input {
    margin-bottom: 0;
}

.upload-form .tag-input-container {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: white;
    min-height: 48px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.upload-form .tag-input-container:hover {
    border-color: rgba(78, 205, 196, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

.upload-form .tag-input-container:focus-within {
    border-color: #4ecdc4;
    box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
    background: rgba(255, 255, 255, 0.15);
}

/* Upload form tag styling with cosmic theme */
.upload-form .category-tag {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    color: white;
    border: none;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.upload-form .category-tag:hover {
    background: linear-gradient(45deg, #ff5252, #26c6da);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.upload-form .tag-remove {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    border: none;
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: bold;
}

.upload-form .tag-remove:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Upload form input styling */
.upload-form .tag-input {
    color: white;
    background: transparent;
    font-size: 16px;
    min-width: 140px;
}

.upload-form .tag-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Upload form suggestions dropdown */
.upload-form .suggestions-dropdown {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    margin-top: 8px;
}

.upload-form .suggestion-item {
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 14px 16px;
}

.upload-form .suggestion-item:hover,
.upload-form .suggestion-item.focused {
    background: rgba(78, 205, 196, 0.2);
}

.upload-form .suggestion-name {
    color: white;
    font-weight: 500;
}

.upload-form .suggestion-count {
    color: rgba(255, 255, 255, 0.7);
}

.upload-form .suggestion-item.create-new {
    background: rgba(255, 107, 107, 0.1);
    border-left: 3px solid #ff6b6b;
}

.upload-form .suggestion-item.create-new:hover,
.upload-form .suggestion-item.create-new.focused {
    background: rgba(255, 107, 107, 0.2);
}

.upload-form .suggestion-item.create-new .suggestion-name {
    color: #ff6b6b;
    font-weight: 600;
}

.upload-form .suggestion-icon {
    background: #ff6b6b;
    color: white;
}

/* Upload form loading states */
.upload-form .loading-indicator {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.8);
    padding: 16px;
    border-radius: 8px;
}

.upload-form .loading-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #4ecdc4;
}

.upload-form .loading-text {
    color: rgba(255, 255, 255, 0.8);
}

/* Upload form messages */
.upload-form .message {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    color: white;
    margin-top: 8px;
}

.upload-form .message.error {
    background: rgba(255, 107, 107, 0.2);
    border-left-color: #ff6b6b;
    color: #ff6b6b;
}

.upload-form .message.success {
    background: rgba(78, 205, 196, 0.2);
    border-left-color: #4ecdc4;
    color: #4ecdc4;
}

/* Form group integration */
.upload-form .form-group {
    position: relative;
}

.upload-form .form-group label {
    color: #4ecdc4;
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
}

/* Variable height accommodation */
.upload-form .tag-category-input {
    min-height: 48px;
    transition: height 0.3s ease;
}

.upload-form .tag-input-container {
    min-height: 48px;
    max-height: none;
    overflow: visible;
}

/* When tags wrap to multiple lines */
.upload-form .selected-tags {
    max-width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

/* Ensure input field remains accessible when tags wrap */
.upload-form .tag-input {
    flex: 1 1 100%;
    min-width: 100%;
    margin-top: 4px;
}

/* When there are selected tags, adjust input positioning */
.upload-form .selected-tags:not(:empty) + .tag-input {
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== RESPONSIVE UPLOAD FORM STYLES ===== */

@media (max-width: 768px) {
    .upload-form .tag-input-container {
        min-height: 52px;
        padding: 10px 14px;
    }
    
    .upload-form .category-tag {
        font-size: 14px;
        padding: 8px 14px;
        margin: 2px;
    }
    
    .upload-form .tag-input {
        font-size: 16px; /* Prevent zoom on iOS */
        min-width: 120px;
    }
    
    .upload-form .suggestion-item {
        padding: 16px 18px;
        font-size: 16px;
    }
    
    .upload-form .suggestions-dropdown {
        margin-top: 12px;
    }
    
    /* Adjust for mobile touch targets */
    .upload-form .tag-remove {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .upload-form .category-tag {
        max-width: 180px;
        font-size: 13px;
    }
    
    .upload-form .tag-input {
        min-width: 100px;
        font-size: 16px;
    }
    
    .upload-form .selected-tags {
        gap: 4px;
    }
    
    /* Stack tags more efficiently on small screens */
    .upload-form .tag-input-container {
        padding: 8px 10px;
    }
}

/* Tablet landscape optimizations */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .upload-form .tag-input-container {
        min-height: 50px;
        padding: 10px 16px;
    }
    
    .upload-form .category-tag {
        font-size: 14px;
        padding: 6px 12px;
    }
    
    .upload-form .suggestion-item {
        padding: 14px 16px;
    }
}

/* Mobile landscape optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    .upload-form .tag-input-container {
        min-height: 44px;
        padding: 8px 12px;
    }
    
    .upload-form .category-tag {
        font-size: 13px;
        padding: 5px 10px;
        margin: 2px;
    }
    
    .upload-form .suggestions-dropdown {
        max-height: 200px; /* Reduced for landscape */
    }
    
    .upload-form .suggestion-item {
        padding: 12px 14px;
    }
}

/* ===== UPLOAD FORM ERROR STATES ===== */

.upload-form .tag-category-input.error .tag-input-container {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.3);
    background: rgba(255, 107, 107, 0.1);
}

.upload-form .tag-category-input.error .tag-input-container:focus-within {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.4);
}

/* ===== UPLOAD FORM SUCCESS STATES ===== */

.upload-form .tag-category-input.success .tag-input-container {
    border-color: #4ecdc4;
    box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.3);
}

/* ===== UPLOAD FORM LOADING STATES ===== */

.upload-form .tag-category-input.loading .tag-input-container {
    position: relative;
    overflow: hidden;
}

.upload-form .tag-category-input.loading .tag-input-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.2), transparent);
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% { 
        left: -100%; 
        transform: translateX(0);
    }
    100% { 
        left: 100%; 
        transform: translateX(0);
    }
}

/* ===== UPLOAD FORM LOADING AND ERROR STATES ===== */

/* Loading overlay for upload form */
.upload-form .tag-category-input-loading {
    position: relative;
}

.upload-form .tag-category-input-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    border-radius: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-form .tag-category-input-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(78, 205, 196, 0.3);
    border-top: 2px solid #4ecdc4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 11;
}

/* Error state styling for upload form */
.upload-form .form-group.has-error .tag-input-container {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.3);
    background: rgba(255, 107, 107, 0.1);
}

.upload-form .form-group.has-error .form-help {
    color: #ff6b6b;
    font-weight: 500;
}

.upload-form .form-error {
    color: #ff6b6b;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 107, 107, 0.1);
    border-left: 3px solid #ff6b6b;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upload-form .form-error::before {
    content: '⚠';
    font-weight: bold;
    flex-shrink: 0;
}

/* Success state styling for upload form */
.upload-form .form-group.has-success .tag-input-container {
    border-color: #4ecdc4;
    box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.3);
}

.upload-form .form-success {
    color: #4ecdc4;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(78, 205, 196, 0.1);
    border-left: 3px solid #4ecdc4;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upload-form .form-success::before {
    content: '✓';
    font-weight: bold;
    flex-shrink: 0;
}

/* Category validation feedback */
.upload-form .category-validation {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upload-form .category-validation.valid {
    color: #4ecdc4;
}

.upload-form .category-validation.invalid {
    color: #ff6b6b;
}

.upload-form .category-validation::before {
    content: attr(data-icon);
    font-weight: bold;
    flex-shrink: 0;
}

/* Progress indicator for category operations */
.upload-form .category-progress {
    margin-top: 0.5rem;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.upload-form .category-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #4ecdc4, transparent);
    animation: progress-slide 1.5s infinite;
}

@keyframes progress-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ===== UPLOAD FORM ACCESSIBILITY ENHANCEMENTS ===== */

.upload-form .tag-category-input [aria-live] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Screen reader announcements for upload form */
.upload-form .sr-announcement {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Focus management for upload form */
.upload-form .tag-category-input:focus-within {
    outline: 2px solid #4ecdc4;
    outline-offset: 2px;
}

/* Keyboard navigation indicators */
.upload-form .tag-category-input[data-keyboard-active="true"] .tag-input-container {
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.4);
}

/* High contrast mode for upload form */
@media (prefers-contrast: high) {
    .upload-form .tag-input-container {
        background: #000000;
        border: 2px solid #ffffff;
        color: #ffffff;
    }
    
    .upload-form .category-tag {
        background: #ffffff;
        color: #000000;
        border: 2px solid #000000;
    }
    
    .upload-form .suggestions-dropdown {
        background: #000000;
        border: 2px solid #ffffff;
    }
    
    .upload-form .suggestion-item:hover,
    .upload-form .suggestion-item.focused {
        background: #ffffff;
        color: #000000;
    }
}

/* Dark theme adjustments for upload form */
@media (prefers-color-scheme: dark) {
    .upload-form .tag-input-container {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .upload-form .tag-input-container:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(78, 205, 196, 0.4);
    }
    
    .upload-form .tag-input-container:focus-within {
        background: rgba(255, 255, 255, 0.08);
        border-color: #4ecdc4;
        box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.3);
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .tag-category-input {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .tag-input-container {
        border: 1px solid #000000 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        min-height: auto !important;
        padding: 4px 6px !important;
    }
    
    .category-tag {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
        box-shadow: none !important;
        font-size: 11px !important;
        padding: 2px 6px !important;
        margin: 1px !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    .tag-remove {
        display: none !important;
    }
    
    .suggestions-dropdown {
        display: none !important;
    }
    
    .loading-indicator,
    .message-container {
        display: none !important;
    }
    
    .tag-input {
        color: #000000 !important;
        background: transparent !important;
        font-size: 11px !important;
    }
    
    /* Print category list */
    .tag-category-input::after {
        content: "Categories: " attr(data-selected-categories);
        display: block;
        font-size: 10px;
        color: #666666;
        margin-top: 4px;
        font-style: italic;
    }
}

/* ===== COMPONENT PERFORMANCE OPTIMIZATIONS ===== */

/* Optimize rendering performance */
.tag-category-input.performance-mode {
    contain: layout style paint;
}

.tag-category-input.performance-mode .category-tag {
    contain: layout style paint;
    will-change: transform, opacity;
}

.tag-category-input.performance-mode .suggestion-item {
    contain: layout style paint;
    will-change: transform, background-color;
}

.tag-category-input.performance-mode .suggestions-dropdown {
    contain: layout style paint;
    will-change: transform, opacity;
}

/* Reduce repaints during animations */
.category-tag.animating {
    will-change: transform, opacity, background;
}

.suggestion-item.animating {
    will-change: transform, background-color;
}

/* Memory optimization for large lists */
.suggestions-container.large-list {
    contain: strict;
    content-visibility: auto;
}

.suggestions-container.large-list .suggestion-item {
    contain: layout style paint;
}

/* ===== COMPONENT STATE CLASSES ===== */

/* Component states for external control */
.tag-category-input.state-loading {
    pointer-events: none;
    opacity: 0.7;
}

.tag-category-input.state-error .tag-input-container {
    border-color: var(--tci-error-color);
    animation: shake 0.5s ease-in-out;
}

.tag-category-input.state-success .tag-input-container {
    border-color: var(--tci-success-color);
    animation: pulse 0.6s ease-out;
}

.tag-category-input.state-disabled {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(50%);
}

/* Validation states */
.tag-category-input.validation-required:not(.has-selection) .tag-input-container {
    border-color: var(--tci-warning-color);
}

.tag-category-input.validation-required:not(.has-selection) .tag-input::placeholder {
    color: var(--tci-warning-color);
}

.tag-category-input.has-selection {
    --validation-state: valid;
}

/* Theme variants */
.tag-category-input.theme-compact {
    --tci-spacing-xs: 2px;
    --tci-spacing-sm: 4px;
    --tci-spacing-md: 6px;
}

.tag-category-input.theme-compact .tag-input-container {
    min-height: 32px;
    padding: 2px 6px;
}

.tag-category-input.theme-compact .category-tag {
    font-size: 11px;
    padding: 2px 6px;
    margin: 1px;
}

.tag-category-input.theme-large {
    --tci-spacing-xs: 6px;
    --tci-spacing-sm: 12px;
    --tci-spacing-md: 18px;
}

.tag-category-input.theme-large .tag-input-container {
    min-height: 52px;
    padding: 8px 14px;
}

.tag-category-input.theme-large .category-tag {
    font-size: 15px;
    padding: 8px 14px;
    margin: 3px;
}

/* ===== UTILITY CLASSES ===== */

/* Visibility utilities */
.tag-category-input .hidden {
    display: none !important;
}

.tag-category-input .invisible {
    visibility: hidden !important;
}

.tag-category-input .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Animation utilities */
.tag-category-input .no-animation * {
    animation: none !important;
    transition: none !important;
}

.tag-category-input .fast-animation * {
    animation-duration: 0.1s !important;
    transition-duration: 0.1s !important;
}

/* Debug utilities */
.tag-category-input.debug {
    outline: 2px dashed red;
}

.tag-category-input.debug * {
    outline: 1px solid rgba(255, 0, 0, 0.3);
}

/* ===== VIRTUAL SCROLLING STYLES ===== */

/* Virtual scroll container */
.suggestions-container {
    position: relative;
    overflow-y: auto;
    max-height: 320px; /* Default max height */
}

.suggestions-container.virtual-scroll-enabled {
    height: 320px; /* Fixed height when virtual scrolling is enabled */
    overflow-y: auto;
}

/* Virtual scroll spacers */
.virtual-scroll-spacer-top,
.virtual-scroll-spacer-bottom {
    width: 100%;
    pointer-events: none;
    background: transparent;
}

/* Suggestion items with fixed height for virtual scrolling */
.suggestions-container.virtual-scroll-enabled .suggestion-item {
    height: 40px; /* Fixed height for virtual scrolling calculations */
    min-height: 40px;
    max-height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}

/* Ensure text doesn't overflow in virtual scroll mode */
.suggestions-container.virtual-scroll-enabled .suggestion-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.suggestions-container.virtual-scroll-enabled .suggestion-count {
    flex-shrink: 0;
    margin-left: 8px;
}

/* Loading state for lazy-loaded details */
.suggestion-count.loading {
    color: #8c8f94;
    font-style: italic;
    animation: pulse 1.5s ease-in-out infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* Performance optimization: GPU acceleration for smooth scrolling */
.suggestions-container {
    transform: translateZ(0);
    will-change: scroll-position;
}

.suggestion-item {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Scrollbar styling for virtual scroll container */
.suggestions-container::-webkit-scrollbar {
    width: 8px;
}

.suggestions-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.suggestions-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.suggestions-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Firefox scrollbar styling */
.suggestions-container {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Virtual scroll performance indicators (development only) */
.suggestions-container[data-debug="true"]::before {
    content: 'Virtual Scroll: ' attr(data-visible-items) ' / ' attr(data-total-items);
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 0 0 0 4px;
    z-index: 1000;
    pointer-events: none;
}

/* ===== PERFORMANCE OPTIMIZATION STYLES ===== */

/* Reduce repaints during scrolling */
.suggestions-dropdown {
    contain: layout style paint;
}

.suggestion-item {
    contain: layout style;
}

/* Optimize animations for performance */
@media (prefers-reduced-motion: no-preference) {
    .suggestion-item {
        transition: background-color 0.1s ease;
    }
    
    .category-tag {
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
}

/* Memory optimization: limit concurrent animations */
.tag-category-input {
    animation-fill-mode: both;
}

/* ===== LARGE DATASET OPTIMIZATIONS ===== */

/* Styles for handling large category lists (>100 items) */
.tag-category-input[data-large-dataset="true"] .suggestions-container {
    height: 280px; /* Slightly smaller for large datasets */
}

.tag-category-input[data-large-dataset="true"] .suggestion-item {
    padding: 10px 16px; /* Slightly more compact */
    height: 36px;
    min-height: 36px;
    max-height: 36px;
}

.tag-category-input[data-large-dataset="true"] .suggestion-name {
    font-size: 13px;
}

.tag-category-input[data-large-dataset="true"] .suggestion-count {
    font-size: 11px;
}

/* Search performance indicator */
.tag-category-input[data-search-time] .tag-input-container::after {
    content: attr(data-search-time) 'ms';
    position: absolute;
    top: -20px;
    right: 0;
    font-size: 10px;
    color: #8c8f94;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tag-category-input[data-search-time][data-show-performance="true"] .tag-input-container::after {
    opacity: 1;
}

/* ===== MOBILE VIRTUAL SCROLLING OPTIMIZATIONS ===== */

@media (max-width: 768px) {
    .suggestions-container.virtual-scroll-enabled {
        height: 240px; /* Smaller on mobile */
    }
    
    .suggestions-container.virtual-scroll-enabled .suggestion-item {
        height: 44px; /* Larger touch targets on mobile */
        min-height: 44px;
        max-height: 44px;
        padding: 12px 16px;
    }
    
    /* Optimize scrolling performance on mobile */
    .suggestions-container {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS FOR VIRTUAL SCROLLING ===== */

/* Screen reader announcements for virtual scroll */
.suggestions-container[aria-live] {
    position: relative;
}

.suggestions-container::after {
    content: attr(data-sr-announcement);
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Focus management in virtual scroll */
.suggestions-container.virtual-scroll-enabled .suggestion-item:focus {
    position: relative;
    z-index: 1;
    outline: 2px solid #2271b1;
    outline-offset: -2px;
}

/* High contrast mode for virtual scrolling */
@media (prefers-contrast: high) {
    .suggestions-container::-webkit-scrollbar-thumb {
        background: #000000;
        border: 1px solid #ffffff;
    }
    
    .suggestions-container::-webkit-scrollbar-track {
        background: #ffffff;
        border: 1px solid #000000;
    }
}

/* Dark theme for virtual scrolling */
@media (prefers-color-scheme: dark) {
    .suggestions-container::-webkit-scrollbar-track {
        background: #2c3338;
    }
    
    .suggestions-container::-webkit-scrollbar-thumb {
        background: #646970;
    }
    
    .suggestions-container::-webkit-scrollbar-thumb:hover {
        background: #8c8f94;
    }
    
    .suggestions-container {
        scrollbar-color: #646970 #2c3338;
    }
    
    .suggestion-count.loading {
        color: #8c8f94;
    }
}