Improve `CSS` selectors to full support non-English languages

[itsmartashub]

Description

Currently, the extension's styling relies heavily on English-language placeholders and aria-labels as CSS selectors due to ChatGPT's extensive use of TailwindCSS classes that are often shared across different elements.
This makes it challenging to reliably target specific elements across different language settings.

Current Challenges

• Many elements share identical TailwindCSS classes, making unique targeting difficult
• Current selectors depend on English-language text in:
  • placeholders
  • aria-labels
  • labels
  • ...etc.
• Non-English users may experience inconsistent styling

Technical Scope

• Need to identify and catalog all language-dependent selectors
• Find alternative, language-agnostic ways to target elements:
  • DOM structure patterns
  • Unique class combinations
  • Data attributes (if available)
  • Element hierarchy
  • Parent-child relationships

Implementation Considerations

• Large-scale refactoring required
• Need to maintain current styling quality for English while adding multilingual support
• Testing needed across multiple languages
• Potential performance impact of more complex selectors
• Backward compatibility concerns

Impact

• Improved internationalization support
• More reliable element targeting
• Better user experience for non-English users
• More maintainable codebase long-term

Notes

• Time-intensive task due to extensive codebase changes
• May need to coordinate with OpenAI's DOM structure updates
• Consider implementing in phases to manage scope