feat: refactor all modal styles to dedicated CSS files

- Create uncloseai-modal-builtin.css for blog versions
- Create uncloseai-modal-pico.css for PicoCSS override
- Add conditional CSS loading to all modal JavaScript files
- Remove inline styles from main modal, translate modal, TTS modal, and widget library
- Fix modal full-screen issue on large displays with proper PicoCSS overrides
- Maintain mobile-first responsive design (≤480px full screen)
- Support both USE_CUSTOM_STYLING modes for maximum compatibility

src/tts-modal.js

@@ -7,6 +7,16 @@ import { handleTTS, downloadAudio, generateTitleForTTS } from "./tts.js";
 const USE_CUSTOM_STYLING = window.UNCLOSEAI_CUSTOM_STYLING !== false;
 
 export function openTTSModal() {
+	// Load appropriate CSS based on whether we're using PicoCSS or built-in styles
+	const cssFile = USE_CUSTOM_STYLING ? 'uncloseai-modal-pico.css' : 'uncloseai-modal-builtin.css';
+	
+	if (!document.querySelector(`link[href*="${cssFile}"]`)) {
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = `./src/${cssFile}`;
+		document.head.appendChild(link);
+	}
+
 	// Ensure ChunkFive font is loaded
 	initializeChunkFiveFont();