From 6419528ae19bb6f7ef8fe63baa17dfa04ce80603 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Thu, 10 Jul 2025 19:05:53 -0400
Subject: [PATCH] fix: theme-aware styling for copy button, logo, and chat box
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove copy button background, add light mode styling with white bg
- Ensure modal title stays white across themes
- Set chat box to off-white (#f8f9fa) for light mode, dark (#1a1a1a) for dark mode

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/uncloseai-modal-builtin.css | 17 ++++++++++++++++-
 src/uncloseai-modal-pico.css    | 17 ++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css
index 43ed010..dc6a27b 100644
--- a/src/uncloseai-modal-builtin.css
+++ b/src/uncloseai-modal-builtin.css
@@ -804,7 +804,7 @@ dialog#tts-modal {
   position: absolute;
   bottom: 8px;
   right: 8px;
-  background: rgba(0, 0, 0, 0.9);
+  background: none;
   color: white;
   border: none;
   padding: 4px 8px;
@@ -823,6 +823,13 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
 
+/* Light theme copy button */
+dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
+  background: rgba(255, 255, 255, 0.9);
+  color: #333;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
 .uncloseai-code-copy-btn:hover {
   opacity: 1;
 }
@@ -899,6 +906,14 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
   display: grid;
   grid-template-columns: 1fr;
   gap: 12px;
+  background: #f8f9fa;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+/* Dark theme chat box */
+dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
+  background: #1a1a1a;
 }
 
 /* Settings panel */
diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css
index 4a3f7cb..f0755ca 100644
--- a/src/uncloseai-modal-pico.css
+++ b/src/uncloseai-modal-pico.css
@@ -860,7 +860,7 @@ dialog#tts-modal::backdrop {
   position: absolute;
   bottom: 8px;
   right: 8px;
-  background: rgba(0, 0, 0, 0.9);
+  background: none;
   color: white;
   border: none;
   padding: 4px 8px;
@@ -879,6 +879,13 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
 
+/* Light theme copy button */
+dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
+  background: rgba(255, 255, 255, 0.9);
+  color: #333;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
 .uncloseai-code-copy-btn:hover {
   opacity: 1;
 }
@@ -954,6 +961,14 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-code-copy-btn {
   display: grid !important;
   grid-template-columns: 1fr !important;
   gap: 12px !important;
+  background: #f8f9fa !important;
+  padding: 16px !important;
+  border-radius: 8px !important;
+}
+
+/* Dark theme chat box */
+dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
+  background: #1a1a1a !important;
 }
 
 /* Settings panel */