[akammohammadpouri]

Summary

This PR resolves typography regressions introduced in #172 across Gemini and Claude, restores proper RTL list marker positioning inside ChatGPT Canvas (ProseMirror), preserves Gemini's native list markers/counters, and aligns Claude English text with its authentic native typography:

1. Gemini Conversation Sidebar, Tooltips & Native List Markers:

• In #172, adding [class*="icon" i] * excluded all children of elements whose class contained icon. Because Angular Material MDC wraps conversation list items in <a class="... mdc-list-item--with-leading-icon ...">, all conversation titles (.title-text, .gds-emphasized-body-s) and their hover tooltips were stripped of FontARA font.
• Refined the icon exclusion to word-boundary icon components and guarded classes (:not([class*="-with-"])) so MDC containers are no longer misidentified as icons.
• Replaced [style*="font-"] * with :is([style*="font-family" i], [style*="font:" i]) * so inline font metrics (font-size, --font-scale, etc.) no longer strip readable text.
• Preserved Native Gemini List Markers: Scoped legacy list marker resets with :not(.md-content *). Gemini modern UI (.md-content) renders custom hollow SVG circle bullets (○) on ul > li::before and numbered counters (1., 2.) on ol > li::before. Scoping ensures these native markers and compact padding remain intact while applying direction: rtl and text-align: right to Persian list items.

2. Claude Messages, Markdown Previews & English Font Fallbacks:

• Replaced broad [style*="font-"] * matching with :is([style*="font-family" i], [style*="font:" i]) so Claude's --_prose-font-body custom property is preserved.
• Added Claude Design System conversation rows ([data-row-main-button], [data-roving-item], .dframe-fade-label) to ensure sidebar conversation titles receive the UI font fallback.
• Aligned English Typography Fallbacks: Connected --fontara-claude-message-fallback directly to Claude's dynamic body font variables (var(--_prose-font-body, var(--font-claude-response, var(--cds-font-voice)))) and fixed font names to match Claude's kebab-case @font-face definitions ("anthropic-serif", "anthropic-sans"). English text now seamlessly renders using Claude's authentic native typography (identical to extension-off state), while Persian text uses FontARA.

3. ChatGPT Canvas RTL List Markers:

• In ProseMirror Canvas, list items wrap their content in <p dir="rtl"> or <p dir="auto">. Updated writing block list styles to apply direction: rtl !important; padding-inline: 1.5rem 0 !important; to ul/ol:is([dir="rtl"], :has([dir="rtl"]), :has(p[dir="auto"])).
• In site-adapters.ts, ensured that when a child paragraph inside a list item becomes RTL, both the parent <li> and <ul>/<ol> roots receive and track dir="rtl".

---

Verification

• Automated browser suite:
  • Gemini sidebar items, hover tooltips, and chat paragraphs with inline styles.
  • Claude Prose containers with --_prose-font-body, Markdown text, and sidebar roving buttons.
  • ChatGPT Canvas ProseMirror nested lists verifying right-aligned markers (direction: rtl, padding-right: 24px, padding-left: 0px).
• All checks passed:
  • pnpm typecheck passed (0 errors, no deprecated APIs).
  • node --import tsx --test tests/unit/site-css.test.ts tests/unit/rtl-support.test.ts passed (19/19 tests).
  • Biome linting and formatting clean across all modified files.
  • pnpm build:all passed with inject/index.js comfortably within budget (167,736 / 167,936 bytes — 200 bytes under budget).