fix: enforce modal text colors to prevent white-on-white text issues

- Add enforceModalTextColors() function with high CSS specificity
- Use !important declarations to override blog CSS
- Force dark text (#212529) on inputs, buttons, and general content
- Keep white text on user messages for proper contrast
- Add user-message class to user messages for targeted styling
- Prevents unreadable white text on white backgrounds on blog

src/ui-themes.js

@@ -51,9 +51,14 @@ export function getThemeColors(theme = detectCurrentTheme()) {
 
 		// Text colors
 		primaryText: "#212529",
-		secondaryText: "#495057",
+		secondaryText: "#495057", 
 		mutedText: "#6c757d",
 
+		// Input specific colors
+		inputBackground: "#ffffff",
+		inputText: "#212529",
+		inputBorder: "#ced4da",
+
 		// Borders and dividers
 		borderColor: "#dee2e6",
 		dividerColor: "#e9ecef",
@@ -90,3 +95,41 @@ export function initializeChunkFiveFont() {
 	`;
 	document.head.appendChild(fontFaceStyle);
 }
+
+// Force text colors with high specificity to override blog CSS
+export function enforceModalTextColors() {
+	if (document.getElementById('uncloseai-text-override')) return; // Already added
+	
+	const textOverrideStyle = document.createElement("style");
+	textOverrideStyle.id = 'uncloseai-text-override';
+	textOverrideStyle.textContent = `
+		/* High specificity overrides for uncloseai modal text colors */
+		#uncloseai-embedded-modal,
+		#uncloseai-embedded-modal *,
+		dialog#uncloseai-embedded-modal,
+		dialog#uncloseai-embedded-modal * {
+			color: #212529 !important;
+		}
+		
+		/* Input field text colors */
+		#uncloseai-embedded-modal input,
+		#uncloseai-embedded-modal textarea,
+		#uncloseai-embedded-modal select,
+		#uncloseai-embedded-modal option {
+			color: #212529 !important;
+			background: #ffffff !important;
+		}
+		
+		/* Button text colors */
+		#uncloseai-embedded-modal button {
+			color: #212529 !important;
+		}
+		
+		/* User message text (keep white for contrast) */
+		#uncloseai-embedded-modal .user-message,
+		#uncloseai-embedded-modal .user-message * {
+			color: #ffffff !important;
+		}
+	`;
+	document.head.appendChild(textOverrideStyle);
+}

src/uncloseai-embed-modal.js

@@ -8,6 +8,7 @@ import {
 	detectCurrentTheme,
 	getThemeColors,
 	initializeChunkFiveFont,
+	enforceModalTextColors,
 } from "./ui-themes.js";
 import {
 	getUIText,
@@ -166,8 +167,9 @@ function refreshModalUI() {
 }
 
 async function openUncloseaiEmbeddedModalNew() {
-	// Ensure ChunkFive font is loaded
+	// Ensure ChunkFive font is loaded and text colors are enforced
 	initializeChunkFiveFont();
+	enforceModalTextColors();
 
 	// Get theme colors
 	const theme = detectCurrentTheme();
@@ -1191,6 +1193,7 @@ async function openUncloseaiEmbeddedModalNew() {
 
 		// Add user message
 		const userMsg = document.createElement("div");
+		userMsg.className = "user-message";
 		userMsg.style.cssText = `
 			align-self: flex-end;
 			background: ${colors.userMessageBg};
@@ -1821,6 +1824,7 @@ You have complete knowledge of this page content and can reference any details,
 					);
 					if (msg.role === "user") {
 						const userMsg = document.createElement("div");
+						userMsg.className = "user-message";
 						userMsg.style.cssText = `
 							align-self: flex-end;
 							background: ${colors.userMessageBg};