From 9659236bc274da19d090fd8a2d48dc2c6f92574b Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Thu, 3 Jul 2025 14:52:09 -0400
Subject: [PATCH] fix: add theme-aware styling to modal textareas for blog
 sites

- Fix main chat input textarea in openUncloseaiEmbeddedModal (line 3837)
- Fix TTS modal textarea with conditional styling (line 4070)
- Fix translation modal textarea with conditional styling (line 4417)
- All textareas now use rgba glassmorphism when USE_CUSTOM_STYLING=false
- Should resolve white-on-white text issue in blog dark mode
---
 src/ui.js | 43 +++++++++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/ui.js b/src/ui.js
index cba3d5d..d137b70 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -3840,6 +3840,11 @@ Format: Start with "Greetings! I'm Hermes..." and make it sound natural and enga
       min-height: 44px;
       max-height: 120px;
       resize: vertical;
+      background: rgba(255,255,255,0.1);
+      color: inherit;
+      border: 1px solid rgba(128,128,128,0.3);
+      border-radius: 8px;
+      backdrop-filter: blur(10px);
     `;
 	}
 
@@ -4063,8 +4068,23 @@ export function openTTSModal() {
 	header.appendChild(closeButton);
 
 	const textArea = document.createElement("textarea");
-	textArea.style.width = "100%";
-	textArea.style.height = "240px";
+	if (USE_CUSTOM_STYLING) {
+		textArea.style.cssText = `
+			width: 100%;
+			height: 240px;
+		`;
+	} else {
+		textArea.style.cssText = `
+			width: 100%;
+			height: 240px;
+			background: rgba(255,255,255,0.1);
+			color: inherit;
+			border: 1px solid rgba(128,128,128,0.3);
+			border-radius: 8px;
+			backdrop-filter: blur(10px);
+			padding: 0.5rem;
+		`;
+	}
 	textArea.placeholder = getUIText("ttsPlaceholder");
 	article.appendChild(textArea);
 
@@ -4395,8 +4415,23 @@ export function openTranslateModal() {
 
 	// Custom text content
 	const textArea = document.createElement("textarea");
-	textArea.style.width = "100%";
-	textArea.style.height = "150px";
+	if (USE_CUSTOM_STYLING) {
+		textArea.style.cssText = `
+			width: 100%;
+			height: 150px;
+		`;
+	} else {
+		textArea.style.cssText = `
+			width: 100%;
+			height: 150px;
+			background: rgba(255,255,255,0.1);
+			color: inherit;
+			border: 1px solid rgba(128,128,128,0.3);
+			border-radius: 8px;
+			backdrop-filter: blur(10px);
+			padding: 0.5rem;
+		`;
+	}
 	textArea.placeholder = getUIText("translatePlaceholder");
 	customContent.appendChild(textArea);