From c14cf5e07fdf86f2c8ebfbe68f51030afdc2f330 Mon Sep 17 00:00:00 2001
From: Hackall <36754621+hackall360@users.noreply.github.com>
Date: Sun, 14 Sep 2025 23:43:05 -0700
Subject: [PATCH 1/2] Respect selected theme for transient UI elements

---
 index.html           |  34 ++--
 js/chat/chat-core.js |  22 ++-
 js/ui/simple.js      | 387 +++++++++++++++++++++++--------------------
 3 files changed, 237 insertions(+), 206 deletions(-)

diff --git a/index.html b/index.html
index 59219ef..44552e4 100644
--- a/index.html
+++ b/index.html
@@ -443,21 +443,25 @@ <h3 class="modal-title">Voice Chat</h3>
       </div>
     </div>
     <script>
-      function copyToClipboard(text) {
-        navigator.clipboard.writeText(text).then(() => {
-          const popup = document.createElement("div");
-          popup.textContent = "Address copied. Thank you!";
-          popup.style.position = "fixed";
-          popup.style.bottom = "20px";
-          popup.style.left = "50%";
-          popup.style.transform = "translateX(-50%)";
-          popup.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
-          popup.style.color = "#fff";
-          popup.style.padding = "10px 20px";
-          popup.style.borderRadius = "5px";
-          popup.style.zIndex = "9999";
-          document.body.appendChild(popup);
-          setTimeout(() => {
+      function copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(() => {
+          const popup = document.createElement("div");
+          popup.textContent = "Address copied. Thank you!";
+          popup.style.position = "fixed";
+          popup.style.bottom = "20px";
+          popup.style.left = "50%";
+          popup.style.transform = "translateX(-50%)";
+          const bodyStyles = getComputedStyle(document.body);
+          const bgMatch = bodyStyles.backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+          popup.style.backgroundColor = bgMatch
+            ? `rgba(${bgMatch[1]}, ${bgMatch[2]}, ${bgMatch[3]}, 0.85)`
+            : bodyStyles.backgroundColor;
+          popup.style.color = bodyStyles.color;
+          popup.style.padding = "10px 20px";
+          popup.style.borderRadius = "5px";
+          popup.style.zIndex = "9999";
+          document.body.appendChild(popup);
+          setTimeout(() => {
             popup.style.opacity = "0";
             setTimeout(() => popup.remove(), 500);
           }, 2000);
diff --git a/js/chat/chat-core.js b/js/chat/chat-core.js
index 333d801..c807637 100644
--- a/js/chat/chat-core.js
+++ b/js/chat/chat-core.js
@@ -1016,15 +1016,19 @@ document.addEventListener("DOMContentLoaded", () => {
             toast.id = "toast-notification";
             toast.style.position = "fixed";
             toast.style.top = "5%";
-            toast.style.left = "50%";
-            toast.style.transform = "translateX(-50%)";
-            toast.style.backgroundColor = "rgba(0,0,0,0.7)";
-            toast.style.color = "#fff";
-            toast.style.padding = "10px 20px";
-            toast.style.borderRadius = "5px";
-            toast.style.zIndex = "9999";
-            toast.style.transition = "opacity 0.3s";
-            document.body.appendChild(toast);
+            toast.style.left = "50%";
+            toast.style.transform = "translateX(-50%)";
+            const bodyStyles = getComputedStyle(document.body);
+            const bgMatch = bodyStyles.backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+            toast.style.backgroundColor = bgMatch
+                ? `rgba(${bgMatch[1]}, ${bgMatch[2]}, ${bgMatch[3]}, 0.7)`
+                : bodyStyles.backgroundColor;
+            toast.style.color = bodyStyles.color;
+            toast.style.padding = "10px 20px";
+            toast.style.borderRadius = "5px";
+            toast.style.zIndex = "9999";
+            toast.style.transition = "opacity 0.3s";
+            document.body.appendChild(toast);
         }
         toast.textContent = message;
         toast.style.opacity = "1";
diff --git a/js/ui/simple.js b/js/ui/simple.js
index e2928ed..d39cb0f 100644
--- a/js/ui/simple.js
+++ b/js/ui/simple.js
@@ -1,185 +1,208 @@
-document.addEventListener("DOMContentLoaded", () => {
-    const style = document.createElement("style");
-    style.textContent = `
-        #simple-mode-modal {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background-color: #121212;
-            color: #ffffff;
-            z-index: 10000;
-            display: flex;
-            flex-direction: column;
-        }
-        .simple-header {
-            padding: 10px;
-            background-color: #1e1e1e;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .simple-header h2 {
-            margin: 0;
-            font-size: 1.2rem;
-        }
-        .simple-chat-box {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-        }
-        .simple-input-container {
-            display: flex;
-            padding: 12px 15px;
-            background: #1e1e1e;
-            align-items: center;
-        }
-        .simple-input {
-            flex-grow: 1;
-            background: #333333;
-            color: #ffffff;
-            border: 1px solid #555555;
-            border-radius: 20px;
-            font-size: 14px;
-            padding: 12px 15px;
-            resize: none;
-            overflow-y: auto;
-            min-height: 50px;
-            max-height: 120px;
-            transition: box-shadow 0.2s ease;
-        }
-        .simple-input:focus {
-            outline: none;
-            box-shadow: 0 0 0 2px rgba(100,100,100,0.3);
-        }
-        .simple-send-btn {
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            margin-left: 10px;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 1rem;
-            width: 40px;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-        }
-        .simple-send-btn:hover {
-            transform: scale(1.05);
-            background: #45a049;
-        }
-        .simple-send-btn:disabled {
-            background: #555555;
-            cursor: not-allowed;
-            opacity: 0.6;
-        }
-        .simple-message {
-            margin: 12px 0;
-            padding: 12px 16px;
-            border-radius: 18px;
-            animation: fadeIn 0.3s ease;
-            word-break: break-word;
-            clear: both;
-            max-width: 70%;
-            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(8px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .simple-user-message {
-            background-color: #333333;
-            color: #ffffff;
-            float: right;
-            border-bottom-right-radius: 6px;
-            max-width: 40%;
-            margin-right: 10px;
-        }
-        .simple-ai-message {
-            background-color: #444444;
-            color: #ffffff;
-            float: left;
-            border-bottom-left-radius: 6px;
-            max-width: 60%;
-            margin-left: 10px;
-        }
-        .simple-message-actions {
-            display: flex;
-            gap: 8px;
-            margin-top: 8px;
-            flex-wrap: wrap;
-        }
-        .simple-action-btn {
-            background: #555555;
-            border: none;
-            border-radius: 15px;
-            padding: 6px 12px;
-            font-size: 12px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            color: #ffffff;
-            min-width: 80px;
-            text-align: center;
-        }
-        .simple-action-btn:hover {
-            background: #666666;
-        }
-        .simple-message-text {
-            width: 100%;
-            overflow-wrap: break-word;
-            word-wrap: break-word;
-            word-break: break-word;
-        }
-        .simple-ai-image-container {
-            position: relative;
-            margin: 10px 0;
-            max-width: 100%;
-            border-radius: 8px;
-            overflow: hidden;
-        }
-        .simple-ai-image-loading {
-            background-color: rgba(0,0,0,0.1);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            min-height: 200px;
-            width: 512px;
-            height: 512px;
-            border-radius: 8px;
-        }
-        .simple-loading-spinner {
-            border: 4px solid rgba(0,0,0,0.1);
-            border-radius: 50%;
-            border-top: 4px solid #666666;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .simple-image-button-container {
-            display: flex;
-            gap: 5px;
-            margin-top: 5px;
-            flex-wrap: wrap;
-            z-index: 10;
-        }
-        .simple-ai-generated-image {
-            position: relative;
-            z-index: 1;
-            display: block;
-            max-width: 100%;
-            border-radius: 8px;
-        }
-    `;
-    document.head.appendChild(style);
+document.addEventListener("DOMContentLoaded", () => {
+    const rootStyles = getComputedStyle(document.body);
+    const baseBg = rootStyles.backgroundColor;
+    const baseText = rootStyles.color;
+    function shade(color, amount) {
+        const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (!m) return color;
+        let [r, g, b] = m.slice(1).map(Number);
+        r = Math.min(255, Math.max(0, r + amount));
+        g = Math.min(255, Math.max(0, g + amount));
+        b = Math.min(255, Math.max(0, b + amount));
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+    const headerBg = shade(baseBg, -20);
+    const inputBg = shade(baseBg, -40);
+    const borderColor = shade(baseBg, -60);
+    const userBg = shade(baseBg, -40);
+    const aiBg = shade(baseBg, -20);
+    const actionBtnBg = shade(baseBg, -60);
+    const actionBtnHoverBg = shade(baseBg, -40);
+    const actionBtnDisabledBg = shade(baseBg, -80);
+    const spinnerBaseMatch = baseText.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    const spinnerBase = spinnerBaseMatch ? `rgba(${spinnerBaseMatch[1]}, ${spinnerBaseMatch[2]}, ${spinnerBaseMatch[3]}, 0.1)` : "rgba(0,0,0,0.1)";
+    const spinnerTop = shade(baseText, -40);
+    const style = document.createElement("style");
+    style.textContent = `
+        #simple-mode-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background-color: ${baseBg};
+            color: ${baseText};
+            z-index: 10000;
+            display: flex;
+            flex-direction: column;
+        }
+        .simple-header {
+            padding: 10px;
+            background-color: ${headerBg};
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .simple-header h2 {
+            margin: 0;
+            font-size: 1.2rem;
+        }
+        .simple-chat-box {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+        }
+        .simple-input-container {
+            display: flex;
+            padding: 12px 15px;
+            background: ${headerBg};
+            align-items: center;
+        }
+        .simple-input {
+            flex-grow: 1;
+            background: ${inputBg};
+            color: ${baseText};
+            border: 1px solid ${borderColor};
+            border-radius: 20px;
+            font-size: 14px;
+            padding: 12px 15px;
+            resize: none;
+            overflow-y: auto;
+            min-height: 50px;
+            max-height: 120px;
+            transition: box-shadow 0.2s ease;
+        }
+        .simple-input:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px ${shade(borderColor, 40)};
+        }
+        .simple-send-btn {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            margin-left: 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1rem;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s ease;
+        }
+        .simple-send-btn:hover {
+            transform: scale(1.05);
+            background: #45a049;
+        }
+        .simple-send-btn:disabled {
+            background: ${actionBtnDisabledBg};
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
+        .simple-message {
+            margin: 12px 0;
+            padding: 12px 16px;
+            border-radius: 18px;
+            animation: fadeIn 0.3s ease;
+            word-break: break-word;
+            clear: both;
+            max-width: 70%;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .simple-user-message {
+            background-color: ${userBg};
+            color: ${baseText};
+            float: right;
+            border-bottom-right-radius: 6px;
+            max-width: 40%;
+            margin-right: 10px;
+        }
+        .simple-ai-message {
+            background-color: ${aiBg};
+            color: ${baseText};
+            float: left;
+            border-bottom-left-radius: 6px;
+            max-width: 60%;
+            margin-left: 10px;
+        }
+        .simple-message-actions {
+            display: flex;
+            gap: 8px;
+            margin-top: 8px;
+            flex-wrap: wrap;
+        }
+        .simple-action-btn {
+            background: ${actionBtnBg};
+            border: none;
+            border-radius: 15px;
+            padding: 6px 12px;
+            font-size: 12px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            color: ${baseText};
+            min-width: 80px;
+            text-align: center;
+        }
+        .simple-action-btn:hover {
+            background: ${actionBtnHoverBg};
+        }
+        .simple-message-text {
+            width: 100%;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            word-break: break-word;
+        }
+        .simple-ai-image-container {
+            position: relative;
+            margin: 10px 0;
+            max-width: 100%;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .simple-ai-image-loading {
+            background-color: ${spinnerBase};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 200px;
+            width: 512px;
+            height: 512px;
+            border-radius: 8px;
+        }
+        .simple-loading-spinner {
+            border: 4px solid ${spinnerBase};
+            border-radius: 50%;
+            border-top: 4px solid ${spinnerTop};
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .simple-image-button-container {
+            display: flex;
+            gap: 5px;
+            margin-top: 5px;
+            flex-wrap: wrap;
+            z-index: 10;
+        }
+        .simple-ai-generated-image {
+            position: relative;
+            z-index: 1;
+            display: block;
+            max-width: 100%;
+            border-radius: 8px;
+        }
+    `;
+    document.head.appendChild(style);
 
     function openSimpleMode() {
         const existingModal = document.getElementById("simple-mode-modal");

From 4f68c926dec0a7fe689a09aa666f0a278f25d668 Mon Sep 17 00:00:00 2001
From: Hackall <36754621+hackall360@users.noreply.github.com>
Date: Sun, 14 Sep 2025 23:51:50 -0700
Subject: [PATCH 2/2] Move inline styles to stylesheet

---
 index.html       | 26 ++++++++++----------------
 js/ui/styles.css | 20 ++++++++++++++++++++
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 44552e4..6f019dc 100644
--- a/index.html
+++ b/index.html
@@ -63,9 +63,9 @@
     </script>
   </head>
   <body>
-    <div id="screensaver-container" class="screensaver hidden">
-      <img id="screensaver-image1" alt="Screensaver Image" style="opacity: 0;">
-      <img id="screensaver-image2" alt="Screensaver Image" style="opacity: 0;">
+    <div id="screensaver-container" class="screensaver hidden">
+      <img id="screensaver-image1" alt="Screensaver Image">
+      <img id="screensaver-image2" alt="Screensaver Image">
       <div id="screensaver-thumbnails-wrapper" class="screensaver-thumbnails-wrapper">
         <button id="screensaver-thumb-left" class="thumb-nav" aria-label="Scroll thumbnails left">&#9664;</button>
         <div id="screensaver-thumbnails" class="screensaver-thumbnails">
@@ -436,10 +436,10 @@ <h3 class="modal-title">Voice Settings</h3>
           <h3 class="modal-title">Voice Chat</h3>
           <button id="voice-chat-modal-close" class="close-btn" title="Close Voice Chat Window">×</button>
         </div>
-        <div class="modal-body">
-          <img id="voice-chat-image" src="" alt="Conversation Image" style="max-width: 100%; border-radius: 8px;">
-          <p>Listening to your voice... Speak naturally, and I'll respond after pauses.</p>
-        </div>
+        <div class="modal-body">
+          <img id="voice-chat-image" src="" alt="Conversation Image">
+          <p>Listening to your voice... Speak naturally, and I'll respond after pauses.</p>
+        </div>
       </div>
     </div>
     <script>
@@ -447,23 +447,17 @@ <h3 class="modal-title">Voice Chat</h3>
         navigator.clipboard.writeText(text).then(() => {
           const popup = document.createElement("div");
           popup.textContent = "Address copied. Thank you!";
-          popup.style.position = "fixed";
-          popup.style.bottom = "20px";
-          popup.style.left = "50%";
-          popup.style.transform = "translateX(-50%)";
+          popup.className = "clipboard-popup";
           const bodyStyles = getComputedStyle(document.body);
           const bgMatch = bodyStyles.backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
           popup.style.backgroundColor = bgMatch
             ? `rgba(${bgMatch[1]}, ${bgMatch[2]}, ${bgMatch[3]}, 0.85)`
             : bodyStyles.backgroundColor;
           popup.style.color = bodyStyles.color;
-          popup.style.padding = "10px 20px";
-          popup.style.borderRadius = "5px";
-          popup.style.zIndex = "9999";
           document.body.appendChild(popup);
           setTimeout(() => {
-            popup.style.opacity = "0";
-            setTimeout(() => popup.remove(), 500);
+            popup.style.opacity = "0";
+            setTimeout(() => popup.remove(), 500);
           }, 2000);
         }).catch((err) => {
           console.error("Failed to copy: ", err);
diff --git a/js/ui/styles.css b/js/ui/styles.css
index fdb5916..f10ad89 100644
--- a/js/ui/styles.css
+++ b/js/ui/styles.css
@@ -962,3 +962,23 @@ body {
   pointer-events: none;
 }
 
+#screensaver-image1,
+#screensaver-image2 {
+  opacity: 0;
+}
+
+#voice-chat-image {
+  max-width: 100%;
+  border-radius: 8px;
+}
+
+.clipboard-popup {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px 20px;
+  border-radius: 5px;
+  z-index: 9999;
+}
+