diff --git a/index.html b/index.html
index cf07c36..5ff653f 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,7 @@
     <button id="podcast-toggle" class="chat-toggle-btn" aria-label="Start podcast of SOUL.md" title="Play SOUL.md as audio" style="margin-left: 8px; background-color: var(--color-accent); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
       🎧
     </button>
+    <div id="podcast-error" style="display: none; position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(255, 0, 0, 0.8); color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px;"></div>
     <button id="timelapse-btn" class="chat-toggle-btn" aria-label="Start time-lapse replay" title="Time-lapse: replay today&#39;s activity in 30s [L]">
       ⏩
     </button>
diff --git a/style.css b/style.css
index 0ebc7b3..ca07b5d 100644
--- a/style.css
+++ b/style.css
@@ -111,7 +111,11 @@ canvas {
   font-size: 12px;
   cursor: pointer;
   font-family: var(--font-body);
-  transition: background-color 0.2s ease;
+  transition: background-color 0.3s ease;
+}
+
+#podcast-toggle.active {
+  background-color: #0066cc;
 }
 
 #podcast-toggle:disabled {