.user-autocomplete { position: relative; width: 100%; } .user-autocomplete__input-wrapper { position: relative; } .user-autocomplete__input { width: 100%; padding: 0.625rem 2.5rem 0.625rem 0.75rem; border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--bg-tertiary); color: var(--text-primary); font-size: 0.875rem; } .user-autocomplete__input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); } .user-autocomplete__spinner { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid var(--border-primary); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } .user-autocomplete__dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; padding: 0.25rem; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 100; max-height: 240px; overflow-y: auto; list-style: none; } .user-autocomplete__option { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.1s; } .user-autocomplete__option:hover, .user-autocomplete__option.selected { background: var(--bg-hover); } .user-autocomplete__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; flex-shrink: 0; } .user-autocomplete__user-info { display: flex; flex-direction: column; min-width: 0; } .user-autocomplete__username { font-weight: 500; color: var(--text-primary); } .user-autocomplete__admin-badge { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.025em; }