diff --git a/src/app.css b/src/app.css
index d6ec46b..6eb18a3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -14,6 +14,13 @@
   --text-tertiary: #6b7280;
   --border-color: #2a2a4a;
 
+  /* Trans pride colors */
+  --trans-blue: #5bcefa;
+  --trans-pink: #f5a9b8;
+  --trans-white: #ffffff;
+  --trans-gradient: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 50%, var(--trans-white) 100%);
+  --trans-gradient-vibrant: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 35%, var(--trans-white) 50%, var(--trans-pink) 65%, var(--trans-blue) 100%);
+
   /* Terminal specific colors */
   --terminal-user: #22d3ee;
   --terminal-tool: #c084fc;
@@ -44,6 +51,13 @@
   --text-tertiary: #9ca3af;
   --border-color: #d0d0e0;
 
+  /* Trans pride colors */
+  --trans-blue: #5bcefa;
+  --trans-pink: #f5a9b8;
+  --trans-white: #ffffff;
+  --trans-gradient: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 50%, var(--trans-white) 100%);
+  --trans-gradient-vibrant: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 35%, var(--trans-white) 50%, var(--trans-pink) 65%, var(--trans-blue) 100%);
+
   /* Terminal specific colors */
   --terminal-user: #0891b2;
   --terminal-tool: #7c3aed;
@@ -74,6 +88,13 @@
   --text-tertiary: #b0b0b0;
   --border-color: #ffffff;
 
+  /* Trans pride colors (high contrast) */
+  --trans-blue: #00d4ff;
+  --trans-pink: #ff99cc;
+  --trans-white: #ffffff;
+  --trans-gradient: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 50%, var(--trans-white) 100%);
+  --trans-gradient-vibrant: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 35%, var(--trans-white) 50%, var(--trans-pink) 65%, var(--trans-blue) 100%);
+
   /* Terminal specific colors - bright and saturated */
   --terminal-user: #00ffff;
   --terminal-tool: #ff00ff;
@@ -131,3 +152,46 @@ body {
   background: var(--accent-primary);
   color: var(--text-primary);
 }
+
+/* Trans gradient button - primary action buttons */
+.btn-trans-gradient {
+  background: var(--trans-gradient-vibrant) !important;
+  border: none !important;
+  color: #1a1a2e !important;
+  font-weight: 600;
+  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
+  transition: all 0.2s ease;
+}
+
+.btn-trans-gradient:hover:not(:disabled) {
+  filter: brightness(1.1);
+  box-shadow: 0 0 20px rgba(91, 206, 250, 0.4), 0 0 30px rgba(245, 169, 184, 0.3);
+}
+
+.btn-trans-gradient:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  filter: grayscale(0.3);
+}
+
+/* Trans gradient focus border for inputs */
+.input-trans-focus {
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.input-trans-focus:focus {
+  border-color: var(--trans-pink) !important;
+  box-shadow: 0 0 0 1px var(--trans-blue), 0 0 12px rgba(91, 206, 250, 0.3), 0 0 20px rgba(245, 169, 184, 0.2) !important;
+  outline: none !important;
+}
+
+/* Trans gradient hover for icon buttons */
+.icon-trans-hover {
+  transition: all 0.2s ease;
+}
+
+.icon-trans-hover:hover {
+  color: var(--trans-pink) !important;
+  filter: drop-shadow(0 0 6px rgba(91, 206, 250, 0.5)) drop-shadow(0 0 10px rgba(245, 169, 184, 0.4));
+}
diff --git a/src/lib/components/AnimeGirl.svelte b/src/lib/components/AnimeGirl.svelte
index 58c0c50..4d848e7 100644
--- a/src/lib/components/AnimeGirl.svelte
+++ b/src/lib/components/AnimeGirl.svelte
@@ -35,33 +35,13 @@
     }
   }
 
-  function getBackgroundGlow(): string {
-    switch (currentState) {
-      case "thinking":
-        return "shadow-thinking";
-      case "typing":
-        return "shadow-typing";
-      case "searching":
-        return "shadow-searching";
-      case "coding":
-        return "shadow-coding";
-      case "mcp":
-        return "shadow-mcp";
-      case "success":
-        return "shadow-success";
-      case "error":
-        return "shadow-error";
-      default:
-        return "";
-    }
-  }
-</script>
+  </script>
 
 <div
   class="anime-girl-container flex flex-col items-center justify-between h-full p-4 overflow-hidden"
 >
   <div
-    class="character-frame relative {getBackgroundGlow()} flex-1 flex items-center justify-center min-h-0"
+    class="character-frame relative flex-1 flex items-center justify-center min-h-0"
   >
     <div class="sprite-container {getAnimationClass()} h-full flex items-center justify-center">
       <img
@@ -97,37 +77,12 @@
 </div>
 
 <style>
+  .anime-girl-container {
+    transition: all 0.3s ease;
+  }
+
   .character-frame {
-    border-radius: 50%;
-    transition: box-shadow 0.3s ease;
-  }
-
-  .shadow-thinking {
-    box-shadow: 0 0 30px rgba(147, 51, 234, 0.5);
-  }
-
-  .shadow-typing {
-    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
-  }
-
-  .shadow-searching {
-    box-shadow: 0 0 30px rgba(234, 179, 8, 0.5);
-  }
-
-  .shadow-coding {
-    box-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
-  }
-
-  .shadow-mcp {
-    box-shadow: 0 0 30px rgba(236, 72, 153, 0.5);
-  }
-
-  .shadow-success {
-    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
-  }
-
-  .shadow-error {
-    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
+    transition: all 0.3s ease;
   }
 
   @keyframes idle-bob {
diff --git a/src/lib/components/ConfigSidebar.svelte b/src/lib/components/ConfigSidebar.svelte
index 4d66b31..335bad9 100644
--- a/src/lib/components/ConfigSidebar.svelte
+++ b/src/lib/components/ConfigSidebar.svelte
@@ -386,7 +386,7 @@
         <button
           onclick={addCustomTool}
           disabled={!newToolName.trim()}
-          class="px-3 py-1.5 text-sm bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)] text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          class="btn-trans-gradient px-3 py-1.5 text-sm rounded-lg"
         >
           Add
         </button>
@@ -569,7 +569,7 @@
       <button
         onclick={handleSave}
         disabled={isSaving}
-        class="w-full py-3 bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)] text-white font-medium rounded-lg transition-colors disabled:opacity-50"
+        class="btn-trans-gradient w-full py-3 font-medium rounded-lg"
       >
         {isSaving ? "Saving..." : "Save Settings"}
       </button>
diff --git a/src/lib/components/GitPanel.svelte b/src/lib/components/GitPanel.svelte
index adf4377..e4cbd61 100644
--- a/src/lib/components/GitPanel.svelte
+++ b/src/lib/components/GitPanel.svelte
@@ -414,7 +414,7 @@
                   <button
                     on:click={stageAll}
                     disabled={actionInProgress}
-                    class="stage-all-btn"
+                    class="btn-trans-gradient stage-all-btn"
                     title="Stage all"
                   >
                     Stage All
@@ -495,7 +495,7 @@
                 <button
                   on:click={commit}
                   disabled={actionInProgress || !commitMessage.trim()}
-                  class="commit-btn"
+                  class="btn-trans-gradient commit-btn"
                 >
                   Commit
                 </button>
@@ -512,11 +512,11 @@
                       placeholder="New branch name..."
                       on:keydown={(e) => e.key === "Enter" && createBranch()}
                     />
-                    <button on:click={createBranch} disabled={actionInProgress}>Create</button>
+                    <button on:click={createBranch} disabled={actionInProgress} class="btn-trans-gradient">Create</button>
                     <button on:click={() => (showBranchInput = false)}>Cancel</button>
                   </div>
                 {:else}
-                  <button on:click={() => (showBranchInput = true)} class="new-branch-btn">
+                  <button on:click={() => (showBranchInput = true)} class="btn-trans-gradient new-branch-btn">
                     ➕ New Branch
                   </button>
                 {/if}
@@ -812,16 +812,9 @@
   .stage-all-btn {
     font-size: 0.75rem;
     padding: 0.2rem 0.5rem;
-    background: var(--accent-primary);
-    color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
-    transition: background 0.2s;
-  }
-
-  .stage-all-btn:hover:not(:disabled) {
-    background: var(--accent-secondary);
   }
 
   .file-list {
@@ -893,24 +886,11 @@
   }
 
   .commit-btn {
-    background: var(--accent-primary);
-    color: white;
     border: none;
     padding: 0.5rem 1rem;
     border-radius: 8px;
     cursor: pointer;
     font-weight: 600;
-    transition: all 0.2s;
-  }
-
-  .commit-btn:hover:not(:disabled) {
-    background: var(--accent-secondary);
-    transform: scale(1.02);
-  }
-
-  .commit-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
   }
 
   .branch-section h3 {
@@ -924,17 +904,10 @@
   }
 
   .new-branch-btn {
-    background: var(--accent-primary);
-    color: white;
     border: none;
     padding: 0.5rem 1rem;
     border-radius: 8px;
     cursor: pointer;
-    transition: background 0.2s;
-  }
-
-  .new-branch-btn:hover {
-    background: var(--accent-secondary);
   }
 
   .new-branch-input {
@@ -959,13 +932,7 @@
   }
 
   .new-branch-input button:first-of-type {
-    background: var(--accent-primary);
-    color: white;
-    transition: background 0.2s;
-  }
-
-  .new-branch-input button:first-of-type:hover:not(:disabled) {
-    background: var(--accent-secondary);
+    /* Styling handled by btn-trans-gradient class */
   }
 
   .new-branch-input button:last-of-type {
diff --git a/src/lib/components/InputBar.svelte b/src/lib/components/InputBar.svelte
index 2b6b099..346f826 100644
--- a/src/lib/components/InputBar.svelte
+++ b/src/lib/components/InputBar.svelte
@@ -811,8 +811,7 @@ User: ${formattedMessage}`;
         style="height: {textareaHeight}px; font-size: var(--terminal-font-size, 14px);"
         class="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-color)]
              rounded-lg text-[var(--text-primary)] placeholder-gray-500 resize-none
-             focus:outline-none focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]
-             disabled:opacity-50 disabled:cursor-not-allowed"
+             input-trans-focus disabled:opacity-50 disabled:cursor-not-allowed"
       ></textarea>
     </div>
 
@@ -838,7 +837,7 @@ User: ${formattedMessage}`;
         <button
           type="button"
           onclick={handleInterrupt}
-          class="send-button bg-red-600 hover:bg-red-700"
+          class="send-button btn-trans-gradient"
           title="Interrupt the current response (Ctrl+C)"
         >
           <span class="font-bold">■</span> Stop
@@ -849,7 +848,7 @@ User: ${formattedMessage}`;
           disabled={!isConnected ||
             isSubmitting ||
             (!inputValue.trim() && attachments.length === 0)}
-          class="send-button bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)]
+          class="send-button trans-gradient-button
                disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {#if isSubmitting}
@@ -1033,4 +1032,17 @@ User: ${formattedMessage}`;
   .send-button:active:not(:disabled) {
     transform: scale(0.95);
   }
+
+  .trans-gradient-button {
+    background: var(--trans-gradient-vibrant);
+    border: none;
+    color: #1a1a2e;
+    font-weight: 600;
+    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
+  }
+
+  .trans-gradient-button:hover:not(:disabled) {
+    filter: brightness(1.1);
+    box-shadow: 0 0 20px rgba(91, 206, 250, 0.4), 0 0 30px rgba(245, 169, 184, 0.3);
+  }
 </style>
diff --git a/src/lib/components/QuickActionsPanel.svelte b/src/lib/components/QuickActionsPanel.svelte
index 34328fe..e1d6526 100644
--- a/src/lib/components/QuickActionsPanel.svelte
+++ b/src/lib/components/QuickActionsPanel.svelte
@@ -163,7 +163,7 @@
         {#if !editingAction && !isCreating}
           <button
             onclick={handleStartCreate}
-            class="px-3 py-1.5 text-sm font-medium bg-[var(--accent-primary)] text-white rounded hover:bg-[var(--accent-primary)]/80 transition-colors flex items-center gap-2"
+            class="px-3 py-1.5 text-sm font-medium btn-trans-gradient rounded flex items-center gap-2"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -262,7 +262,7 @@
             <button
               onclick={handleSave}
               disabled={!editName.trim() || !editPrompt.trim()}
-              class="px-4 py-2 text-sm font-medium bg-[var(--accent-primary)] text-white rounded-lg hover:bg-[var(--accent-primary)]/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              class="px-4 py-2 text-sm font-medium btn-trans-gradient rounded-lg"
             >
               {isCreating ? "Create" : "Save"}
             </button>
@@ -293,7 +293,7 @@
             <p class="text-[var(--text-secondary)]">No quick actions available</p>
             <button
               onclick={handleStartCreate}
-              class="mt-4 px-4 py-2 text-sm font-medium bg-[var(--accent-primary)] text-white rounded-lg hover:bg-[var(--accent-primary)]/80 transition-colors"
+              class="mt-4 px-4 py-2 text-sm font-medium btn-trans-gradient rounded-lg"
             >
               Create your first action
             </button>
diff --git a/src/lib/components/SessionHistoryPanel.svelte b/src/lib/components/SessionHistoryPanel.svelte
index 4d0642e..9c782b1 100644
--- a/src/lib/components/SessionHistoryPanel.svelte
+++ b/src/lib/components/SessionHistoryPanel.svelte
@@ -335,7 +335,7 @@
                   >
                     <button
                       onclick={() => handleResumeSession(session)}
-                      class="px-3 py-1.5 text-xs font-medium bg-[var(--accent-primary)] text-white rounded hover:bg-[var(--accent-primary)]/80 transition-colors"
+                      class="btn-trans-gradient px-3 py-1.5 text-xs font-medium rounded"
                       title="Resume this session"
                     >
                       Resume
diff --git a/src/lib/components/SnippetLibraryPanel.svelte b/src/lib/components/SnippetLibraryPanel.svelte
index b55b14e..ca45369 100644
--- a/src/lib/components/SnippetLibraryPanel.svelte
+++ b/src/lib/components/SnippetLibraryPanel.svelte
@@ -146,7 +146,7 @@
         {#if !editingSnippet && !isCreating}
           <button
             onclick={handleStartCreate}
-            class="px-3 py-1.5 text-sm font-medium bg-[var(--accent-primary)] text-white rounded hover:bg-[var(--accent-primary)]/80 transition-colors flex items-center gap-2"
+            class="btn-trans-gradient px-3 py-1.5 text-sm font-medium rounded flex items-center gap-2"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -257,7 +257,7 @@
             <button
               onclick={handleSave}
               disabled={!editName.trim() || !editContent.trim()}
-              class="px-4 py-2 text-sm font-medium bg-[var(--accent-primary)] text-white rounded-lg hover:bg-[var(--accent-primary)]/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              class="btn-trans-gradient px-4 py-2 text-sm font-medium rounded-lg"
             >
               {isCreating ? "Create" : "Save"}
             </button>
@@ -319,7 +319,7 @@
               <p class="text-[var(--text-secondary)]">No snippets in this category</p>
               <button
                 onclick={handleStartCreate}
-                class="mt-4 px-4 py-2 text-sm font-medium bg-[var(--accent-primary)] text-white rounded-lg hover:bg-[var(--accent-primary)]/80 transition-colors"
+                class="btn-trans-gradient mt-4 px-4 py-2 text-sm font-medium rounded-lg"
               >
                 Create your first snippet
               </button>
@@ -350,7 +350,7 @@
                     >
                       <button
                         onclick={() => handleInsert(snippet)}
-                        class="px-3 py-1.5 text-xs font-medium bg-[var(--accent-primary)] text-white rounded hover:bg-[var(--accent-primary)]/80 transition-colors"
+                        class="btn-trans-gradient px-3 py-1.5 text-xs font-medium rounded"
                         title="Insert this snippet"
                       >
                         Insert
diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
index 533d6d8..bf85829 100644
--- a/src/lib/components/StatusBar.svelte
+++ b/src/lib/components/StatusBar.svelte
@@ -209,7 +209,7 @@
   <div class="flex items-center gap-3">
     <button
       onclick={toggleAchievements}
-      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors relative"
+      class="p-1 text-gray-500 icon-trans-hover relative"
       title="Achievements"
     >
       <span class="text-lg">🏆</span>
@@ -223,7 +223,7 @@
     </button>
     <button
       onclick={() => (showSessionHistory = true)}
-      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
+      class="p-1 text-gray-500 icon-trans-hover"
       title="Session History"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -237,7 +237,7 @@
     </button>
     <button
       onclick={() => (showGitPanel = true)}
-      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
+      class="p-1 text-gray-500 icon-trans-hover"
       title="Git Panel"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -251,8 +251,8 @@
     </button>
     <button
       onclick={() => (showStats = !showStats)}
-      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors {showStats
-        ? 'text-[var(--accent-primary)]'
+      class="p-1 text-gray-500 icon-trans-hover {showStats
+        ? 'text-[var(--trans-pink)]'
         : ''}"
       title="Usage Stats"
     >
@@ -267,7 +267,7 @@
     </button>
     <button
       onclick={configStore.openSidebar}
-      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
+      class="p-1 text-gray-500 icon-trans-hover"
       title="Settings"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -287,7 +287,7 @@
     </button>
     <button
       onclick={() => openUrl(DONATE_URL)}
-      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
+      class="p-1 text-gray-500 icon-trans-hover"
       title="Support our work"
     >
       <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -298,7 +298,7 @@
     </button>
     <button
       onclick={() => (showAbout = true)}
-      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
+      class="p-1 text-gray-500 icon-trans-hover"
       title="About Hikari Desktop"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -312,7 +312,7 @@
     </button>
     <button
       onclick={() => (showKeyboardShortcuts = true)}
-      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
+      class="p-1 text-gray-500 icon-trans-hover"
       title="Keyboard Shortcuts"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -332,7 +332,7 @@
     </button>
     <button
       onclick={() => (showHelp = true)}
-      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
+      class="p-1 text-gray-500 icon-trans-hover"
       title="Help"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -346,7 +346,7 @@
     </button>
     <button
       onclick={() => openUrl(DISCORD_URL)}
-      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
+      class="p-1 text-gray-500 icon-trans-hover"
       title="Join our Discord"
     >
       <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
diff --git a/src/lib/components/UpdateNotification.svelte b/src/lib/components/UpdateNotification.svelte
index ca2bd2b..b9982e6 100644
--- a/src/lib/components/UpdateNotification.svelte
+++ b/src/lib/components/UpdateNotification.svelte
@@ -55,7 +55,7 @@
         <div class="flex gap-2">
           <button
             onclick={openRelease}
-            class="px-3 py-1.5 bg-[var(--accent-primary)] text-white rounded text-sm hover:brightness-110 transition-all"
+            class="btn-trans-gradient px-3 py-1.5 rounded text-sm"
           >
             View Release
           </button>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 00d2494..3c22695 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -13,6 +13,8 @@
   import InputBar from "$lib/components/InputBar.svelte";
   import StatusBar from "$lib/components/StatusBar.svelte";
   import AnimeGirl from "$lib/components/AnimeGirl.svelte";
+  import { characterState } from "$lib/stores/character";
+  import type { CharacterState } from "$lib/types/states";
   import PermissionModal from "$lib/components/PermissionModal.svelte";
   import UserQuestionModal from "$lib/components/UserQuestionModal.svelte";
   import ConfigSidebar from "$lib/components/ConfigSidebar.svelte";
@@ -23,6 +25,32 @@
   let initialized = false;
   let updateNotification: UpdateNotification;
   let achievementPanelOpen = $state(false);
+  let currentCharacterState: CharacterState = $state("idle");
+
+  characterState.subscribe((state) => {
+    currentCharacterState = state;
+  });
+
+  function getPanelGlowClass(): string {
+    switch (currentCharacterState) {
+      case "thinking":
+        return "panel-glow-thinking";
+      case "typing":
+        return "panel-glow-typing";
+      case "searching":
+        return "panel-glow-searching";
+      case "coding":
+        return "panel-glow-coding";
+      case "mcp":
+        return "panel-glow-mcp";
+      case "success":
+        return "panel-glow-success";
+      case "error":
+        return "panel-glow-error";
+      default:
+        return "";
+    }
+  }
 
   // Resizable panel state
   let panelWidth = $state(320); // Default width in pixels
@@ -190,7 +218,7 @@
   <main class="flex-1 flex overflow-hidden">
     <!-- Left panel: Character display -->
     <div
-      class="character-panel flex flex-col items-center justify-center bg-[var(--bg-secondary)]/50"
+      class="character-panel {getPanelGlowClass()} flex flex-col items-center justify-center bg-[var(--bg-secondary)]/50"
       style="width: {panelWidth}px; min-width: {MIN_PANEL_WIDTH}px; max-width: {MAX_PANEL_WIDTH}px;"
     >
       <AnimeGirl />
@@ -235,6 +263,158 @@
 
   .character-panel {
     background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
+    transition: all 0.5s ease;
+    position: relative;
+  }
+
+  .character-panel::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    padding: 3px;
+    background: transparent;
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    pointer-events: none;
+  }
+
+  /* Trans pride gradient glow effects for the character panel */
+  .panel-glow-thinking {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--bg-secondary) 85%, #9333ea) 0%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 50%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 100%
+    );
+    box-shadow:
+      inset 0 0 60px rgba(147, 51, 234, 0.15),
+      inset 0 0 100px rgba(91, 206, 250, 0.1),
+      0 0 40px rgba(91, 206, 250, 0.2),
+      0 0 80px rgba(245, 169, 184, 0.15);
+  }
+
+  .panel-glow-thinking::before {
+    background: linear-gradient(180deg, #9333ea, var(--trans-blue), var(--trans-pink));
+    opacity: 1;
+  }
+
+  .panel-glow-typing {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--bg-secondary) 85%, #3b82f6) 0%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 50%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 100%
+    );
+    box-shadow:
+      inset 0 0 60px rgba(59, 130, 246, 0.15),
+      inset 0 0 100px rgba(91, 206, 250, 0.15),
+      0 0 40px rgba(91, 206, 250, 0.25),
+      0 0 80px rgba(245, 169, 184, 0.15);
+  }
+
+  .panel-glow-typing::before {
+    background: linear-gradient(180deg, #3b82f6, var(--trans-blue), var(--trans-pink));
+    opacity: 1;
+  }
+
+  .panel-glow-searching {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--bg-secondary) 85%, #eab308) 0%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 50%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 100%
+    );
+    box-shadow:
+      inset 0 0 60px rgba(234, 179, 8, 0.15),
+      inset 0 0 100px rgba(91, 206, 250, 0.1),
+      0 0 40px rgba(91, 206, 250, 0.2),
+      0 0 80px rgba(245, 169, 184, 0.15);
+  }
+
+  .panel-glow-searching::before {
+    background: linear-gradient(180deg, #eab308, var(--trans-blue), var(--trans-pink));
+    opacity: 1;
+  }
+
+  .panel-glow-coding {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--bg-secondary) 85%, #22c55e) 0%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 50%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 100%
+    );
+    box-shadow:
+      inset 0 0 60px rgba(34, 197, 94, 0.15),
+      inset 0 0 100px rgba(91, 206, 250, 0.1),
+      0 0 40px rgba(91, 206, 250, 0.2),
+      0 0 80px rgba(245, 169, 184, 0.15);
+  }
+
+  .panel-glow-coding::before {
+    background: linear-gradient(180deg, #22c55e, var(--trans-blue), var(--trans-pink));
+    opacity: 1;
+  }
+
+  .panel-glow-mcp {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--bg-secondary) 80%, var(--trans-blue)) 0%,
+      color-mix(in srgb, var(--bg-primary) 85%, var(--trans-pink)) 50%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 100%
+    );
+    box-shadow:
+      inset 0 0 80px rgba(91, 206, 250, 0.2),
+      inset 0 0 120px rgba(245, 169, 184, 0.15),
+      0 0 60px rgba(91, 206, 250, 0.3),
+      0 0 100px rgba(245, 169, 184, 0.2);
+  }
+
+  .panel-glow-mcp::before {
+    background: var(--trans-gradient-vibrant);
+    opacity: 1;
+  }
+
+  .panel-glow-success {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--bg-secondary) 85%, #10b981) 0%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 50%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 100%
+    );
+    box-shadow:
+      inset 0 0 60px rgba(16, 185, 129, 0.15),
+      inset 0 0 100px rgba(91, 206, 250, 0.1),
+      0 0 40px rgba(91, 206, 250, 0.2),
+      0 0 80px rgba(245, 169, 184, 0.15);
+  }
+
+  .panel-glow-success::before {
+    background: linear-gradient(180deg, #10b981, var(--trans-blue), var(--trans-pink));
+    opacity: 1;
+  }
+
+  .panel-glow-error {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--bg-secondary) 80%, #ef4444) 0%,
+      color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 50%,
+      color-mix(in srgb, var(--bg-primary) 95%, var(--trans-blue)) 100%
+    );
+    box-shadow:
+      inset 0 0 60px rgba(239, 68, 68, 0.2),
+      inset 0 0 100px rgba(245, 169, 184, 0.1),
+      0 0 40px rgba(245, 169, 184, 0.2),
+      0 0 80px rgba(239, 68, 68, 0.15);
+  }
+
+  .panel-glow-error::before {
+    background: linear-gradient(180deg, #ef4444, var(--trans-pink), var(--trans-blue));
+    opacity: 1;
   }
 
   .resize-handle:hover,