From 18aaa0ee7b73f60cfac3a404c492bbd02bfb7d0f Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 19 Feb 2026 15:25:18 -0600
Subject: [PATCH] feat: BackgroundPixelArt component, idle chrome mode, and
 absolute overlay layout

- Extract ocean pixel art into dedicated BackgroundPixelArt.vue with 5 animated layers
- Make titlebar, chat-header, and user-input position absolute overlays
- Add idle mode: chrome fades out on mouse leave, messages fill entire window
- Add fade-to-black edges on background for page blend
---
 .../components/FloatingTranscriptDebug.vue    | 295 ++++++++++++------
 .../transcript-debug/BackgroundPixelArt.vue   | 161 ++++++++++
 .../transcript-debug/PermissionApproval.vue   |  20 +-
 .../transcript-debug/PlanApproval.vue         |  20 +-
 .../src/components/transcript-debug/index.ts  |   1 +
 5 files changed, 373 insertions(+), 124 deletions(-)
 create mode 100644 frontend/src/components/transcript-debug/BackgroundPixelArt.vue

diff --git a/frontend/src/components/FloatingTranscriptDebug.vue b/frontend/src/components/FloatingTranscriptDebug.vue
index c931494..935a817 100644
--- a/frontend/src/components/FloatingTranscriptDebug.vue
+++ b/frontend/src/components/FloatingTranscriptDebug.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { useTranscriptDebug } from '@/composables/transcript-debug'
-import { ChatContainer } from '@/components/transcript-debug'
+import { ChatContainer, BackgroundPixelArt } from '@/components/transcript-debug'
 import type { AgentName } from '@/types/transcript-debug'
 
 const props = defineProps<{
@@ -46,6 +46,18 @@ const agents: { id: AgentName; label: string }[] = [
 const showSelector = ref(false)
 let initialized = false
 
+// ============================================================================
+// CHROME VISIBILITY (idle mode: hide UI chrome when not interacting)
+// ============================================================================
+
+const isHovered = ref(false)
+const isFocusWithin = ref(false)
+
+const showChrome = computed(() =>
+  isHovered.value || isFocusWithin.value || isDragging.value ||
+  isResizing.value || showSelector.value || isDraggingSheet.value
+)
+
 // ============================================================================
 // DRAG STATE
 // ============================================================================
@@ -302,9 +314,14 @@ onBeforeUnmount(() => {
           dragging: isDragging,
           resizing: isResizing,
           mobile: isMobile,
-          'sheet-dragging': isDraggingSheet
+          'sheet-dragging': isDraggingSheet,
+          'chrome-visible': showChrome
         }"
         :style="windowStyle"
+        @mouseenter="isHovered = true"
+        @mouseleave="isHovered = false"
+        @focusin="isFocusWithin = true"
+        @focusout="isFocusWithin = false"
       >
         <div class="glass">
           <!-- Mobile drag handle -->
@@ -391,6 +408,7 @@ onBeforeUnmount(() => {
 
           <!-- Content -->
           <div class="content">
+            <BackgroundPixelArt />
             <ChatContainer
               v-if="conversation"
               :conversation="conversation"
@@ -438,23 +456,109 @@ onBeforeUnmount(() => {
     0 16px 56px rgba(0,0,0,0.6),
     0 4px 16px rgba(0,0,0,0.4);
   overflow: hidden;
+  transition: border-color 0.35s ease, box-shadow 0.35s ease;
 }
 
-/* ── Titlebar ── */
+/* ══════════════════════════════════════════════════════════════════════════
+   IDLE MODE: When not hovering/focused, hide all chrome.
+   Only the messages + ocean background fill the entire window.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+/* Transition all chrome elements smoothly */
+.titlebar,
+.error-bar,
+.selector-overlay,
+.resize-handle {
+  transition: opacity 0.35s ease, max-height 0.35s ease, padding 0.35s ease;
+}
+
+/* Idle: slide titlebar up and fade out */
+.aero-win:not(.chrome-visible) .titlebar {
+  opacity: 0;
+  transform: translateY(-100%);
+  pointer-events: none;
+}
+
+/* Idle: hide error bar */
+.aero-win:not(.chrome-visible) .error-bar {
+  opacity: 0;
+  max-height: 0;
+  padding: 0;
+  border-bottom-width: 0;
+  overflow: hidden;
+}
+
+/* Idle: hide resize handle */
+.aero-win:not(.chrome-visible) .resize-handle {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Idle: hide selector overlay */
+.aero-win:not(.chrome-visible) .selector-overlay {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Idle: slide chat-header up past titlebar and fade out */
+.aero-win:not(.chrome-visible) .content :deep(.chat-header) {
+  opacity: 0 !important;
+  transform: translateY(-150%) !important;
+  pointer-events: none !important;
+}
+
+/* Idle: slide user-input down and fade out */
+.aero-win:not(.chrome-visible) .content :deep(.user-input) {
+  opacity: 0 !important;
+  transform: translateY(100%) !important;
+  pointer-events: none !important;
+}
+
+/* Idle: also hide selection bar */
+.aero-win:not(.chrome-visible) .content :deep(.selection-bar) {
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+/* Idle: softer glass border */
+.aero-win:not(.chrome-visible) .glass {
+  border-color: rgba(255,255,255,0.02);
+  box-shadow:
+    0 0 0 1px rgba(0,0,0,0.3),
+    0 8px 32px rgba(0,0,0,0.4);
+}
+
+/* Smooth transitions for chrome show/hide */
+.content :deep(.chat-header) {
+  transition: opacity 0.35s ease, transform 0.35s ease !important;
+}
+
+.content :deep(.user-input) {
+  transition: opacity 0.35s ease, transform 0.35s ease !important;
+}
+
+/* ── Titlebar: absolute overlay at top of .glass ── */
 .titlebar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 28px;
   padding: 0 5px 0 8px;
   background:
-    /* Pixel art: Minecraft-style dirt/grass block */
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Crect width='24' height='24' fill='%23866043' opacity='0.35'/%3E%3Crect y='0' width='24' height='4' fill='%2355a630' opacity='0.45'/%3E%3Crect x='0' y='4' width='2' height='2' fill='%2355a630' opacity='0.35'/%3E%3Crect x='6' y='4' width='4' height='2' fill='%2355a630' opacity='0.3'/%3E%3Crect x='16' y='4' width='2' height='2' fill='%2355a630' opacity='0.35'/%3E%3Crect x='20' y='4' width='4' height='2' fill='%2355a630' opacity='0.25'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%2367c23a' opacity='0.3'/%3E%3Crect x='8' y='0' width='2' height='2' fill='%2367c23a' opacity='0.35'/%3E%3Crect x='14' y='2' width='4' height='2' fill='%2367c23a' opacity='0.25'/%3E%3Crect x='4' y='8' width='2' height='2' fill='%23724b32' opacity='0.3'/%3E%3Crect x='10' y='10' width='4' height='2' fill='%23966b4a' opacity='0.25'/%3E%3Crect x='18' y='8' width='2' height='4' fill='%23724b32' opacity='0.25'/%3E%3Crect x='2' y='14' width='2' height='2' fill='%23966b4a' opacity='0.2'/%3E%3Crect x='12' y='16' width='2' height='2' fill='%23724b32' opacity='0.25'/%3E%3Crect x='8' y='20' width='4' height='2' fill='%23966b4a' opacity='0.2'/%3E%3Crect x='20' y='18' width='2' height='2' fill='%23724b32' opacity='0.2'/%3E%3C/svg%3E") no-repeat calc(100% - 6px) center / 22px 22px,
-    rgba(255,255,255,0.02);
+    /* Pixel art sea surface: sky, moon, waves, fish, bubbles */
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='120' height='12' fill='%230a1628' opacity='0.5'/%3E%3Crect x='0' y='12' width='120' height='16' fill='%230c2d4a' opacity='0.45'/%3E%3Crect x='8' y='3' width='1' height='1' fill='white' opacity='0.3'/%3E%3Crect x='25' y='5' width='1' height='1' fill='white' opacity='0.22'/%3E%3Crect x='45' y='2' width='1' height='1' fill='white' opacity='0.18'/%3E%3Crect x='70' y='4' width='1' height='1' fill='white' opacity='0.28'/%3E%3Crect x='95' y='6' width='1' height='1' fill='white' opacity='0.22'/%3E%3Crect x='110' y='3' width='1' height='1' fill='white' opacity='0.18'/%3E%3Crect x='36' y='7' width='1' height='1' fill='%23fde68a' opacity='0.15'/%3E%3Crect x='85' y='2' width='3' height='3' fill='%23fef3c7' opacity='0.3'/%3E%3Crect x='86' y='1' width='2' height='1' fill='%23fef3c7' opacity='0.2'/%3E%3Crect x='86' y='5' width='2' height='1' fill='%23fde68a' opacity='0.15'/%3E%3Crect x='50' y='4' width='4' height='2' fill='%23475569' opacity='0.15'/%3E%3Crect x='51' y='3' width='2' height='1' fill='%23475569' opacity='0.1'/%3E%3Crect x='8' y='10' width='4' height='2' fill='%2322d3ee' opacity='0.3'/%3E%3Crect x='12' y='11' width='10' height='2' fill='%230ea5e9' opacity='0.25'/%3E%3Crect x='22' y='10' width='6' height='2' fill='%2322d3ee' opacity='0.3'/%3E%3Crect x='28' y='11' width='12' height='2' fill='%230ea5e9' opacity='0.25'/%3E%3Crect x='40' y='10' width='4' height='2' fill='%2322d3ee' opacity='0.3'/%3E%3Crect x='44' y='11' width='14' height='2' fill='%230ea5e9' opacity='0.25'/%3E%3Crect x='58' y='10' width='6' height='2' fill='%2322d3ee' opacity='0.3'/%3E%3Crect x='64' y='11' width='10' height='2' fill='%230ea5e9' opacity='0.25'/%3E%3Crect x='74' y='10' width='4' height='2' fill='%2322d3ee' opacity='0.3'/%3E%3Crect x='78' y='11' width='12' height='2' fill='%230ea5e9' opacity='0.25'/%3E%3Crect x='90' y='10' width='6' height='2' fill='%2322d3ee' opacity='0.3'/%3E%3Crect x='96' y='11' width='14' height='2' fill='%230ea5e9' opacity='0.25'/%3E%3Crect x='110' y='10' width='4' height='2' fill='%2322d3ee' opacity='0.3'/%3E%3Crect x='114' y='11' width='6' height='2' fill='%230ea5e9' opacity='0.25'/%3E%3Crect x='0' y='11' width='8' height='2' fill='%230ea5e9' opacity='0.25'/%3E%3Crect x='8' y='10' width='2' height='1' fill='white' opacity='0.12'/%3E%3Crect x='22' y='10' width='2' height='1' fill='white' opacity='0.1'/%3E%3Crect x='40' y='10' width='2' height='1' fill='white' opacity='0.12'/%3E%3Crect x='58' y='10' width='2' height='1' fill='white' opacity='0.1'/%3E%3Crect x='74' y='10' width='2' height='1' fill='white' opacity='0.12'/%3E%3Crect x='90' y='10' width='2' height='1' fill='white' opacity='0.1'/%3E%3Crect x='110' y='10' width='2' height='1' fill='white' opacity='0.12'/%3E%3Crect x='0' y='14' width='120' height='2' fill='%230369a1' opacity='0.18'/%3E%3Crect x='0' y='18' width='120' height='2' fill='%23075985' opacity='0.12'/%3E%3Crect x='0' y='22' width='120' height='2' fill='%230c4a6e' opacity='0.08'/%3E%3Crect x='15' y='16' width='3' height='1' fill='%23f97316' opacity='0.3'/%3E%3Crect x='14' y='16' width='1' height='1' fill='%23fb923c' opacity='0.2'/%3E%3Crect x='55' y='20' width='3' height='1' fill='%23818cf8' opacity='0.22'/%3E%3Crect x='58' y='20' width='1' height='1' fill='%23a78bfa' opacity='0.15'/%3E%3Crect x='100' y='17' width='3' height='1' fill='%2322c55e' opacity='0.22'/%3E%3Crect x='99' y='17' width='1' height='1' fill='%234ade80' opacity='0.15'/%3E%3Crect x='30' y='15' width='1' height='1' fill='white' opacity='0.1'/%3E%3Crect x='65' y='22' width='1' height='1' fill='white' opacity='0.08'/%3E%3Crect x='82' y='14' width='1' height='1' fill='white' opacity='0.1'/%3E%3C/svg%3E") repeat-x left top / auto 100%,
+    rgba(0, 8, 20, 0.3);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   border-bottom: 1px solid rgba(255,255,255,0.04);
   cursor: grab;
   user-select: none;
-  flex-shrink: 0;
+  transition: opacity 0.35s ease, transform 0.35s ease;
 }
 
 .aero-win.dragging .titlebar { cursor: grabbing; }
@@ -665,93 +769,40 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   position: relative;
-  isolation: isolate;
-  /* Pixel art animated ocean floor */
-  background:
-    /* Subtle light rays from surface */
-    repeating-linear-gradient(
-      -25deg,
-      transparent 0px,
-      transparent 60px,
-      rgba(103, 232, 249, 0.018) 60px,
-      rgba(103, 232, 249, 0.018) 63px,
-      transparent 63px,
-      transparent 180px
-    ),
-    /* Water depth gradient */
-    linear-gradient(
-      180deg,
-      rgba(0, 8, 28, 0.96) 0%,
-      rgba(0, 18, 48, 0.94) 20%,
-      rgba(0, 30, 60, 0.92) 40%,
-      rgba(2, 45, 72, 0.88) 60%,
-      rgba(5, 55, 70, 0.85) 75%,
-      rgba(12, 58, 58, 0.82) 88%,
-      rgba(30, 55, 40, 0.78) 100%
-    ),
-    /* Pixel art sea floor: sand, seaweed, coral, rocks, starfish, shell */
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120' shape-rendering='crispEdges'%3E%3Crect x='0' y='88' width='240' height='32' fill='%23c2a060' opacity='0.6'/%3E%3Crect x='0' y='86' width='240' height='4' fill='%23d4b878' opacity='0.5'/%3E%3Crect x='10' y='92' width='20' height='2' fill='%23a89048' opacity='0.3'/%3E%3Crect x='50' y='96' width='16' height='2' fill='%23b8a060' opacity='0.25'/%3E%3Crect x='90' y='94' width='24' height='2' fill='%23a89048' opacity='0.3'/%3E%3Crect x='140' y='98' width='20' height='2' fill='%23b8a060' opacity='0.25'/%3E%3Crect x='190' y='92' width='18' height='2' fill='%23a89048' opacity='0.28'/%3E%3Crect x='15' y='80' width='12' height='8' fill='%23475569' opacity='0.55'/%3E%3Crect x='17' y='78' width='8' height='4' fill='%2364748b' opacity='0.45'/%3E%3Crect x='19' y='76' width='4' height='4' fill='%23718096' opacity='0.35'/%3E%3Crect x='45' y='48' width='2' height='40' fill='%2316a34a' opacity='0.55'/%3E%3Crect x='47' y='44' width='2' height='12' fill='%2322c55e' opacity='0.5'/%3E%3Crect x='43' y='52' width='2' height='8' fill='%2315803d' opacity='0.45'/%3E%3Crect x='49' y='40' width='2' height='8' fill='%2322c55e' opacity='0.4'/%3E%3Crect x='41' y='56' width='2' height='6' fill='%2316a34a' opacity='0.35'/%3E%3Crect x='75' y='72' width='2' height='16' fill='%23f87171' opacity='0.5'/%3E%3Crect x='73' y='68' width='2' height='8' fill='%23fb7185' opacity='0.45'/%3E%3Crect x='77' y='70' width='2' height='6' fill='%23f472b6' opacity='0.4'/%3E%3Crect x='71' y='66' width='2' height='4' fill='%23f87171' opacity='0.35'/%3E%3Crect x='79' y='68' width='2' height='4' fill='%23fb7185' opacity='0.35'/%3E%3Crect x='69' y='68' width='2' height='2' fill='%23f472b6' opacity='0.3'/%3E%3Crect x='81' y='70' width='2' height='2' fill='%23f87171' opacity='0.3'/%3E%3Crect x='105' y='62' width='2' height='26' fill='%2322c55e' opacity='0.5'/%3E%3Crect x='107' y='58' width='2' height='10' fill='%2316a34a' opacity='0.45'/%3E%3Crect x='103' y='66' width='2' height='6' fill='%2315803d' opacity='0.4'/%3E%3Crect x='125' y='86' width='2' height='8' fill='%23f97316' opacity='0.5'/%3E%3Crect x='121' y='88' width='10' height='2' fill='%23f97316' opacity='0.5'/%3E%3Crect x='123' y='84' width='2' height='2' fill='%23fb923c' opacity='0.4'/%3E%3Crect x='129' y='84' width='2' height='2' fill='%23fb923c' opacity='0.4'/%3E%3Crect x='121' y='92' width='2' height='2' fill='%23fb923c' opacity='0.4'/%3E%3Crect x='131' y='92' width='2' height='2' fill='%23fb923c' opacity='0.4'/%3E%3Crect x='150' y='50' width='2' height='38' fill='%2316a34a' opacity='0.5'/%3E%3Crect x='152' y='46' width='2' height='10' fill='%2322c55e' opacity='0.45'/%3E%3Crect x='148' y='54' width='2' height='8' fill='%2315803d' opacity='0.4'/%3E%3Crect x='154' y='42' width='2' height='8' fill='%2322c55e' opacity='0.35'/%3E%3Crect x='180' y='76' width='2' height='12' fill='%23818cf8' opacity='0.45'/%3E%3Crect x='178' y='72' width='2' height='6' fill='%23a78bfa' opacity='0.4'/%3E%3Crect x='182' y='74' width='2' height='4' fill='%23c084fc' opacity='0.35'/%3E%3Crect x='176' y='74' width='2' height='2' fill='%23818cf8' opacity='0.3'/%3E%3Crect x='184' y='76' width='2' height='2' fill='%23a78bfa' opacity='0.3'/%3E%3Crect x='210' y='86' width='6' height='4' fill='%23fef3c7' opacity='0.4'/%3E%3Crect x='212' y='84' width='4' height='2' fill='%23fde68a' opacity='0.35'/%3E%3Crect x='214' y='82' width='2' height='2' fill='%23fef3c7' opacity='0.3'/%3E%3Crect x='220' y='82' width='10' height='6' fill='%23475569' opacity='0.5'/%3E%3Crect x='222' y='80' width='6' height='4' fill='%2364748b' opacity='0.4'/%3E%3Crect x='35' y='90' width='2' height='2' fill='%2364748b' opacity='0.3'/%3E%3Crect x='60' y='92' width='2' height='2' fill='%2364748b' opacity='0.25'/%3E%3Crect x='95' y='90' width='2' height='2' fill='%23475569' opacity='0.3'/%3E%3Crect x='160' y='92' width='2' height='2' fill='%2364748b' opacity='0.25'/%3E%3Crect x='200' y='90' width='2' height='2' fill='%23475569' opacity='0.28'/%3E%3C/svg%3E") repeat-x bottom center / 240px 120px;
+  /* Background handled by BackgroundPixelArt component */
 }
 
-/* Animated bubbles rising through the water */
-.content::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: -1;
-  background:
-    /* Bubble layer 1 - larger, slower */
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='200' viewBox='0 0 80 200' shape-rendering='crispEdges'%3E%3Crect x='20' y='30' width='4' height='4' fill='%2367e8f9' opacity='0.22'/%3E%3Crect x='60' y='90' width='4' height='4' fill='%2367e8f9' opacity='0.18'/%3E%3Crect x='35' y='150' width='4' height='4' fill='%2367e8f9' opacity='0.24'/%3E%3Crect x='50' y='20' width='2' height='2' fill='white' opacity='0.16'/%3E%3Crect x='10' y='70' width='2' height='2' fill='white' opacity='0.13'/%3E%3Crect x='70' y='130' width='2' height='2' fill='white' opacity='0.16'/%3E%3Crect x='25' y='180' width='2' height='2' fill='white' opacity='0.13'/%3E%3Crect x='40' y='50' width='2' height='2' fill='%2367e8f9' opacity='0.1'/%3E%3Crect x='5' y='110' width='2' height='2' fill='%2367e8f9' opacity='0.09'/%3E%3Crect x='55' y='170' width='2' height='2' fill='white' opacity='0.11'/%3E%3C/svg%3E") repeat / 80px 200px,
-    /* Bubble layer 2 - smaller, different rhythm */
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='280' viewBox='0 0 100 280' shape-rendering='crispEdges'%3E%3Crect x='30' y='40' width='4' height='4' fill='%2367e8f9' opacity='0.16'/%3E%3Crect x='75' y='110' width='2' height='2' fill='white' opacity='0.13'/%3E%3Crect x='15' y='180' width='4' height='4' fill='%2367e8f9' opacity='0.2'/%3E%3Crect x='55' y='240' width='2' height='2' fill='white' opacity='0.11'/%3E%3Crect x='85' y='60' width='2' height='2' fill='%2367e8f9' opacity='0.1'/%3E%3Crect x='45' y='150' width='2' height='2' fill='white' opacity='0.13'/%3E%3Crect x='10' y='260' width='2' height='2' fill='%2367e8f9' opacity='0.09'/%3E%3Crect x='65' y='20' width='2' height='2' fill='white' opacity='0.11'/%3E%3C/svg%3E") repeat / 100px 280px;
-  animation: sea-bubbles 14s linear infinite, water-sway 8s ease-in-out infinite alternate;
-}
-
-/* Animated pixel art fish swimming across */
-.content::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: -1;
-  background:
-    /* Fish 1: orange tropical fish (right-facing, swims left→right) */
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' shape-rendering='crispEdges'%3E%3Crect x='0' y='1' width='2' height='2' fill='%23f97316' opacity='0.6'/%3E%3Crect x='0' y='7' width='2' height='2' fill='%23f97316' opacity='0.6'/%3E%3Crect x='2' y='2' width='2' height='6' fill='%23fb923c' opacity='0.6'/%3E%3Crect x='4' y='1' width='8' height='8' fill='%23f97316' opacity='0.55'/%3E%3Crect x='7' y='1' width='2' height='8' fill='%23fef3c7' opacity='0.4'/%3E%3Crect x='5' y='0' width='4' height='1' fill='%23fb923c' opacity='0.4'/%3E%3Crect x='5' y='9' width='4' height='1' fill='%23fb923c' opacity='0.4'/%3E%3Crect x='10' y='3' width='2' height='2' fill='%23000' opacity='0.5'/%3E%3Crect x='11' y='3' width='1' height='1' fill='white' opacity='0.4'/%3E%3Crect x='12' y='5' width='2' height='1' fill='%23000' opacity='0.3'/%3E%3C/svg%3E") no-repeat / 32px 20px,
-    /* Fish 2: blue fish (left-facing, swims right→left) */
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' shape-rendering='crispEdges'%3E%3Crect x='10' y='1' width='2' height='2' fill='%236366f1' opacity='0.5'/%3E%3Crect x='10' y='5' width='2' height='2' fill='%236366f1' opacity='0.5'/%3E%3Crect x='8' y='2' width='2' height='4' fill='%23818cf8' opacity='0.5'/%3E%3Crect x='2' y='1' width='6' height='6' fill='%236366f1' opacity='0.45'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23000' opacity='0.4'/%3E%3Crect x='2' y='2' width='1' height='1' fill='white' opacity='0.3'/%3E%3Crect x='4' y='0' width='3' height='1' fill='%23818cf8' opacity='0.35'/%3E%3C/svg%3E") no-repeat / 24px 16px;
-  animation: fish-swim 20s linear infinite;
-}
-
-@keyframes sea-bubbles {
-  from { background-position: 0 0, 40px 0; }
-  to { background-position: 0 -200px, 0 -280px; }
-}
-
-@keyframes water-sway {
-  from { transform: translateX(-3px); }
-  to { transform: translateX(3px); }
-}
-
-@keyframes fish-swim {
-  0% { background-position: -40px 25%, calc(100% + 30px) 55%; }
-  100% { background-position: calc(100% + 40px) 30%, -30px 50%; }
-}
-
-/* Override ChatContainer backgrounds for black transparency */
+/* Override ChatContainer backgrounds: glass-transparent */
 .content :deep(.chat-container) {
-  background: transparent;
-  border: none;
-  border-radius: 0;
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0 !important;
+  position: relative;
+  z-index: 1;
+  flex: 1 !important;
+  min-height: 0 !important;
 }
 
+/* Chat header: absolute overlay below titlebar, floats over messages */
 .content :deep(.chat-header) {
-  background: rgba(255,255,255,0.02);
-  border-bottom: 1px solid rgba(255,255,255,0.04);
+  position: absolute !important;
+  top: 28px !important;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 3 !important;
+  background: rgba(0, 6, 18, 0.5) !important;
+  backdrop-filter: blur(8px) !important;
+  -webkit-backdrop-filter: blur(8px) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
+  padding: 0.3rem 0.6rem !important;
 }
 
+/* Messages: fill entire container, pad top/bottom for overlaid titlebar+header / input */
 .content :deep(.messages-scroll) {
-  background: transparent;
+  background: transparent !important;
+  padding-top: 5rem !important;
+  padding-bottom: 3.5rem !important;
+  flex: 1 !important;
 }
 
 .content :deep(.chat-title-row) {
@@ -807,28 +858,70 @@ onBeforeUnmount(() => {
   color: #c7d2fe;
 }
 
-/* UserInput dark overrides with LED strip pixel art */
-.content :deep(.user-input-area),
-.content :deep(.input-wrapper) {
+/* Pixel art scrollbar */
+.content :deep(.messages-scroll)::-webkit-scrollbar {
+  width: 8px;
+}
+
+.content :deep(.messages-scroll)::-webkit-scrollbar-track {
   background:
-    /* Pixel LED strip: row of colored square LEDs */
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='6' viewBox='0 0 200 6' shape-rendering='crispEdges'%3E%3Crect x='4' y='1' width='4' height='4' fill='%23ef4444' opacity='0.25'/%3E%3Crect x='12' y='1' width='4' height='4' fill='%23f97316' opacity='0.22'/%3E%3Crect x='20' y='1' width='4' height='4' fill='%23eab308' opacity='0.25'/%3E%3Crect x='28' y='1' width='4' height='4' fill='%2322c55e' opacity='0.25'/%3E%3Crect x='36' y='1' width='4' height='4' fill='%2306b6d4' opacity='0.22'/%3E%3Crect x='44' y='1' width='4' height='4' fill='%236366f1' opacity='0.25'/%3E%3Crect x='52' y='1' width='4' height='4' fill='%23a855f7' opacity='0.22'/%3E%3Crect x='60' y='1' width='4' height='4' fill='%23ec4899' opacity='0.2'/%3E%3Crect x='68' y='1' width='4' height='4' fill='%23ef4444' opacity='0.18'/%3E%3Crect x='76' y='1' width='4' height='4' fill='%23f97316' opacity='0.2'/%3E%3Crect x='84' y='1' width='4' height='4' fill='%23eab308' opacity='0.22'/%3E%3Crect x='92' y='1' width='4' height='4' fill='%2322c55e' opacity='0.2'/%3E%3Crect x='100' y='1' width='4' height='4' fill='%2306b6d4' opacity='0.18'/%3E%3Crect x='108' y='1' width='4' height='4' fill='%236366f1' opacity='0.22'/%3E%3Crect x='116' y='1' width='4' height='4' fill='%23a855f7' opacity='0.2'/%3E%3Crect x='124' y='1' width='4' height='4' fill='%23ec4899' opacity='0.18'/%3E%3Crect x='132' y='1' width='4' height='4' fill='%23ef4444' opacity='0.15'/%3E%3Crect x='140' y='1' width='4' height='4' fill='%23f97316' opacity='0.18'/%3E%3Crect x='148' y='1' width='4' height='4' fill='%23eab308' opacity='0.2'/%3E%3Crect x='156' y='1' width='4' height='4' fill='%2322c55e' opacity='0.18'/%3E%3Crect x='164' y='1' width='4' height='4' fill='%2306b6d4' opacity='0.15'/%3E%3Crect x='172' y='1' width='4' height='4' fill='%236366f1' opacity='0.18'/%3E%3Crect x='180' y='1' width='4' height='4' fill='%23a855f7' opacity='0.15'/%3E%3Crect x='188' y='1' width='4' height='4' fill='%23ec4899' opacity='0.12'/%3E%3C/svg%3E") repeat-x left top;
-  border-top-color: rgba(255,255,255,0.04);
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='8' height='8' fill='%230c2d4a' opacity='0.4'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23075985' opacity='0.15'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23075985' opacity='0.1'/%3E%3C/svg%3E") repeat;
 }
 
-.content :deep(.user-input-area textarea),
-.content :deep(.input-wrapper textarea) {
-  background: rgba(255,255,255,0.03);
-  border-color: rgba(255,255,255,0.06);
+.content :deep(.messages-scroll)::-webkit-scrollbar-thumb {
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16' viewBox='0 0 8 16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='8' height='16' fill='%230ea5e9' opacity='0.3'/%3E%3Crect x='2' y='2' width='4' height='2' fill='%2322d3ee' opacity='0.25'/%3E%3Crect x='2' y='6' width='4' height='2' fill='%2367e8f9' opacity='0.2'/%3E%3Crect x='2' y='10' width='4' height='2' fill='%2322d3ee' opacity='0.25'/%3E%3Crect x='2' y='14' width='4' height='2' fill='%2367e8f9' opacity='0.15'/%3E%3C/svg%3E") repeat;
+  border: 1px solid rgba(14, 165, 233, 0.15);
+}
+
+.content :deep(.messages-scroll)::-webkit-scrollbar-thumb:hover {
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16' viewBox='0 0 8 16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='8' height='16' fill='%230ea5e9' opacity='0.45'/%3E%3Crect x='2' y='2' width='4' height='2' fill='%2322d3ee' opacity='0.35'/%3E%3Crect x='2' y='6' width='4' height='2' fill='%2367e8f9' opacity='0.3'/%3E%3Crect x='2' y='10' width='4' height='2' fill='%2322d3ee' opacity='0.35'/%3E%3Crect x='2' y='14' width='4' height='2' fill='%2367e8f9' opacity='0.25'/%3E%3C/svg%3E") repeat;
+  border-color: rgba(14, 165, 233, 0.3);
+}
+
+/* UserInput: absolute overlay at bottom, floats over messages */
+.content :deep(.user-input) {
+  position: absolute !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 3 !important;
+  background: rgba(0, 6, 18, 0.5) !important;
+  backdrop-filter: blur(8px) !important;
+  -webkit-backdrop-filter: blur(8px) !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
+  padding: 0.3rem 0.5rem !important;
+}
+
+/* Dark overlay on input-container so text is readable */
+.content :deep(.input-container) {
+  background: rgba(0, 6, 18, 0.8) !important;
+  border-color: rgba(14, 165, 233, 0.1) !important;
+  border-radius: 0 !important;
+  padding: 0.3rem 0.4rem !important;
+}
+
+.content :deep(.input-container:focus-within) {
+  border-color: rgba(14, 165, 233, 0.25) !important;
+  background: rgba(0, 6, 18, 0.85) !important;
+}
+
+.content :deep(.input-field) {
   color: rgba(255,255,255,0.85);
-  border-radius: 0;
   font-family: 'Courier New', monospace;
+  font-size: 12px;
 }
 
-.content :deep(.user-input-area textarea:focus),
-.content :deep(.input-wrapper textarea:focus) {
-  border-color: rgba(99, 102, 241, 0.3);
-  background: rgba(255,255,255,0.05);
+.content :deep(.send-btn) {
+  background: rgba(14, 165, 233, 0.2);
+  border-radius: 0;
+  width: 26px;
+  height: 26px;
+}
+
+.content :deep(.send-btn:hover:not(:disabled)) {
+  background: rgba(14, 165, 233, 0.35);
 }
 
 /* Selection bar */
@@ -862,6 +955,8 @@ onBeforeUnmount(() => {
   flex: 1;
   gap: 8px;
   color: rgba(255,255,255,0.3);
+  position: relative;
+  z-index: 1;
 }
 
 .empty-state svg {
diff --git a/frontend/src/components/transcript-debug/BackgroundPixelArt.vue b/frontend/src/components/transcript-debug/BackgroundPixelArt.vue
new file mode 100644
index 0000000..7ec1e5d
--- /dev/null
+++ b/frontend/src/components/transcript-debug/BackgroundPixelArt.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="ocean-bg">
+    <div class="water-gradient" />
+    <div class="light-rays" />
+    <div class="sea-floor" />
+    <div class="bubble-layer" />
+    <div class="fish-layer" />
+  </div>
+</template>
+
+<style scoped>
+/* ============================================================================
+   PIXEL ART OCEAN BACKGROUND - Animated underwater scene
+   Layers (back to front): gradient → light rays → sea floor → bubbles → fish
+   ============================================================================ */
+
+.ocean-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+/* Fade to black at top and bottom edges */
+.ocean-bg::before,
+.ocean-bg::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.ocean-bg::before {
+  top: 0;
+  height: 25%;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
+}
+
+.ocean-bg::after {
+  bottom: 0;
+  height: 25%;
+  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
+}
+
+.ocean-bg > div {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* ── Layer 1: Water depth gradient ── */
+.water-gradient {
+  background: linear-gradient(
+    180deg,
+    rgba(0, 6, 22, 0.97) 0%,
+    rgba(0, 12, 35, 0.95) 10%,
+    rgba(0, 20, 52, 0.93) 22%,
+    rgba(0, 30, 65, 0.90) 35%,
+    rgba(2, 42, 75, 0.87) 48%,
+    rgba(4, 52, 78, 0.84) 60%,
+    rgba(6, 58, 72, 0.82) 72%,
+    rgba(10, 55, 58, 0.80) 82%,
+    rgba(18, 50, 45, 0.78) 90%,
+    rgba(28, 48, 35, 0.76) 100%
+  );
+}
+
+/* ── Layer 2: Light rays from surface ── */
+.light-rays {
+  background:
+    repeating-linear-gradient(
+      -20deg,
+      transparent 0px,
+      transparent 80px,
+      rgba(103, 232, 249, 0.02) 80px,
+      rgba(103, 232, 249, 0.025) 84px,
+      transparent 84px,
+      transparent 200px
+    ),
+    repeating-linear-gradient(
+      -35deg,
+      transparent 0px,
+      transparent 120px,
+      rgba(56, 189, 248, 0.015) 120px,
+      rgba(56, 189, 248, 0.02) 123px,
+      transparent 123px,
+      transparent 300px
+    );
+  animation: light-pulse 10s ease-in-out infinite alternate;
+}
+
+/* ── Layer 3: Sea floor (pixel art SVG, repeat-x at bottom) ── */
+.sea-floor {
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='160' viewBox='0 0 480 160' shape-rendering='crispEdges'%3E%3Crect x='0' y='120' width='480' height='40' fill='%23c2a060' opacity='0.55'/%3E%3Crect x='0' y='116' width='480' height='6' fill='%23d4b878' opacity='0.45'/%3E%3Crect x='0' y='114' width='480' height='4' fill='%23b89850' opacity='0.25'/%3E%3Crect x='15' y='124' width='30' height='2' fill='%23a89048' opacity='0.25'/%3E%3Crect x='80' y='128' width='20' height='2' fill='%23b8a060' opacity='0.2'/%3E%3Crect x='140' y='126' width='35' height='2' fill='%23a89048' opacity='0.25'/%3E%3Crect x='220' y='130' width='25' height='2' fill='%23b8a060' opacity='0.2'/%3E%3Crect x='290' y='124' width='30' height='2' fill='%23a89048' opacity='0.22'/%3E%3Crect x='360' y='128' width='22' height='2' fill='%23b8a060' opacity='0.2'/%3E%3Crect x='420' y='126' width='28' height='2' fill='%23a89048' opacity='0.22'/%3E%3Crect x='20' y='106' width='16' height='10' fill='%23475569' opacity='0.5'/%3E%3Crect x='22' y='104' width='12' height='4' fill='%2364748b' opacity='0.4'/%3E%3Crect x='24' y='102' width='6' height='4' fill='%23718096' opacity='0.3'/%3E%3Crect x='340' y='108' width='14' height='8' fill='%23475569' opacity='0.45'/%3E%3Crect x='342' y='106' width='10' height='4' fill='%2364748b' opacity='0.35'/%3E%3Crect x='344' y='104' width='4' height='4' fill='%23718096' opacity='0.25'/%3E%3Crect x='200' y='110' width='10' height='6' fill='%23475569' opacity='0.4'/%3E%3Crect x='202' y='108' width='6' height='4' fill='%2364748b' opacity='0.3'/%3E%3Crect x='55' y='70' width='2' height='46' fill='%2316a34a' opacity='0.55'/%3E%3Crect x='57' y='64' width='2' height='14' fill='%2322c55e' opacity='0.5'/%3E%3Crect x='53' y='74' width='2' height='10' fill='%2315803d' opacity='0.45'/%3E%3Crect x='59' y='60' width='2' height='10' fill='%2322c55e' opacity='0.4'/%3E%3Crect x='51' y='78' width='2' height='8' fill='%2316a34a' opacity='0.35'/%3E%3Crect x='61' y='56' width='2' height='8' fill='%234ade80' opacity='0.3'/%3E%3Crect x='160' y='68' width='2' height='48' fill='%2322c55e' opacity='0.5'/%3E%3Crect x='162' y='62' width='2' height='12' fill='%2316a34a' opacity='0.45'/%3E%3Crect x='158' y='72' width='2' height='8' fill='%2315803d' opacity='0.4'/%3E%3Crect x='164' y='58' width='2' height='10' fill='%2322c55e' opacity='0.35'/%3E%3Crect x='156' y='76' width='2' height='6' fill='%2316a34a' opacity='0.3'/%3E%3Crect x='280' y='74' width='2' height='42' fill='%2316a34a' opacity='0.5'/%3E%3Crect x='282' y='68' width='2' height='12' fill='%2322c55e' opacity='0.45'/%3E%3Crect x='278' y='78' width='2' height='8' fill='%2315803d' opacity='0.4'/%3E%3Crect x='284' y='64' width='2' height='8' fill='%234ade80' opacity='0.3'/%3E%3Crect x='400' y='72' width='2' height='44' fill='%2322c55e' opacity='0.48'/%3E%3Crect x='402' y='66' width='2' height='12' fill='%2316a34a' opacity='0.42'/%3E%3Crect x='398' y='76' width='2' height='8' fill='%2315803d' opacity='0.38'/%3E%3Crect x='404' y='62' width='2' height='10' fill='%234ade80' opacity='0.28'/%3E%3Crect x='396' y='80' width='2' height='6' fill='%2316a34a' opacity='0.25'/%3E%3Crect x='90' y='90' width='2' height='26' fill='%23f87171' opacity='0.5'/%3E%3Crect x='88' y='84' width='2' height='10' fill='%23fb7185' opacity='0.45'/%3E%3Crect x='92' y='86' width='2' height='8' fill='%23f472b6' opacity='0.4'/%3E%3Crect x='86' y='86' width='2' height='6' fill='%23f87171' opacity='0.35'/%3E%3Crect x='94' y='88' width='2' height='4' fill='%23fb7185' opacity='0.32'/%3E%3Crect x='84' y='88' width='2' height='4' fill='%23f472b6' opacity='0.28'/%3E%3Crect x='96' y='90' width='2' height='2' fill='%23fda4af' opacity='0.25'/%3E%3Crect x='89' y='82' width='2' height='2' fill='%23fda4af' opacity='0.22'/%3E%3Crect x='240' y='92' width='2' height='24' fill='%23fb7185' opacity='0.48'/%3E%3Crect x='238' y='86' width='2' height='10' fill='%23f87171' opacity='0.42'/%3E%3Crect x='242' y='88' width='2' height='6' fill='%23f472b6' opacity='0.38'/%3E%3Crect x='236' y='88' width='2' height='4' fill='%23fb7185' opacity='0.3'/%3E%3Crect x='244' y='90' width='2' height='4' fill='%23fda4af' opacity='0.28'/%3E%3Crect x='234' y='90' width='2' height='2' fill='%23f87171' opacity='0.22'/%3E%3Crect x='440' y='94' width='2' height='22' fill='%23f87171' opacity='0.45'/%3E%3Crect x='438' y='88' width='2' height='8' fill='%23fb7185' opacity='0.4'/%3E%3Crect x='442' y='90' width='2' height='6' fill='%23f472b6' opacity='0.35'/%3E%3Crect x='436' y='90' width='2' height='4' fill='%23f87171' opacity='0.28'/%3E%3Crect x='444' y='92' width='2' height='4' fill='%23fda4af' opacity='0.25'/%3E%3Crect x='120' y='94' width='2' height='22' fill='%23818cf8' opacity='0.45'/%3E%3Crect x='118' y='88' width='2' height='8' fill='%23a78bfa' opacity='0.4'/%3E%3Crect x='122' y='90' width='2' height='6' fill='%23c084fc' opacity='0.35'/%3E%3Crect x='116' y='90' width='2' height='4' fill='%23818cf8' opacity='0.3'/%3E%3Crect x='124' y='92' width='2' height='4' fill='%23a78bfa' opacity='0.25'/%3E%3Crect x='119' y='86' width='2' height='2' fill='%23c4b5fd' opacity='0.2'/%3E%3Crect x='320' y='92' width='2' height='24' fill='%23a78bfa' opacity='0.42'/%3E%3Crect x='318' y='86' width='2' height='8' fill='%23818cf8' opacity='0.38'/%3E%3Crect x='322' y='88' width='2' height='6' fill='%23c084fc' opacity='0.32'/%3E%3Crect x='316' y='88' width='2' height='4' fill='%23a78bfa' opacity='0.25'/%3E%3Crect x='324' y='90' width='2' height='4' fill='%23c4b5fd' opacity='0.22'/%3E%3Crect x='370' y='90' width='2' height='26' fill='%2306b6d4' opacity='0.45'/%3E%3Crect x='368' y='84' width='2' height='8' fill='%2322d3ee' opacity='0.4'/%3E%3Crect x='372' y='86' width='2' height='6' fill='%2367e8f9' opacity='0.35'/%3E%3Crect x='366' y='86' width='2' height='4' fill='%2306b6d4' opacity='0.28'/%3E%3Crect x='374' y='88' width='2' height='4' fill='%2322d3ee' opacity='0.25'/%3E%3Crect x='369' y='82' width='2' height='2' fill='%2367e8f9' opacity='0.2'/%3E%3Crect x='180' y='110' width='2' height='8' fill='%23f97316' opacity='0.5'/%3E%3Crect x='176' y='112' width='10' height='2' fill='%23f97316' opacity='0.5'/%3E%3Crect x='174' y='110' width='2' height='2' fill='%23fb923c' opacity='0.38'/%3E%3Crect x='186' y='110' width='2' height='2' fill='%23fb923c' opacity='0.38'/%3E%3Crect x='178' y='108' width='2' height='2' fill='%23fb923c' opacity='0.3'/%3E%3Crect x='184' y='108' width='2' height='2' fill='%23fb923c' opacity='0.3'/%3E%3Crect x='176' y='116' width='2' height='2' fill='%23fb923c' opacity='0.3'/%3E%3Crect x='186' y='116' width='2' height='2' fill='%23fb923c' opacity='0.3'/%3E%3Crect x='420' y='112' width='2' height='6' fill='%23f97316' opacity='0.42'/%3E%3Crect x='417' y='114' width='8' height='2' fill='%23f97316' opacity='0.42'/%3E%3Crect x='416' y='112' width='2' height='2' fill='%23fb923c' opacity='0.3'/%3E%3Crect x='425' y='112' width='2' height='2' fill='%23fb923c' opacity='0.3'/%3E%3Crect x='260' y='112' width='8' height='4' fill='%23fef3c7' opacity='0.35'/%3E%3Crect x='262' y='110' width='6' height='2' fill='%23fde68a' opacity='0.3'/%3E%3Crect x='264' y='108' width='2' height='2' fill='%23fef3c7' opacity='0.25'/%3E%3Crect x='261' y='114' width='2' height='2' fill='%23fbbf24' opacity='0.2'/%3E%3Crect x='267' y='114' width='2' height='2' fill='%23fbbf24' opacity='0.2'/%3E%3Crect x='264' y='112' width='2' height='2' fill='white' opacity='0.18'/%3E%3Crect x='460' y='112' width='6' height='4' fill='%23fef3c7' opacity='0.3'/%3E%3Crect x='462' y='110' width='4' height='2' fill='%23fde68a' opacity='0.25'/%3E%3Crect x='463' y='112' width='2' height='2' fill='white' opacity='0.15'/%3E%3Crect x='40' y='118' width='2' height='2' fill='%2364748b' opacity='0.25'/%3E%3Crect x='75' y='120' width='2' height='2' fill='%2364748b' opacity='0.2'/%3E%3Crect x='110' y='118' width='2' height='2' fill='%23475569' opacity='0.25'/%3E%3Crect x='150' y='120' width='2' height='2' fill='%2364748b' opacity='0.2'/%3E%3Crect x='215' y='118' width='2' height='2' fill='%23475569' opacity='0.22'/%3E%3Crect x='265' y='120' width='2' height='2' fill='%2364748b' opacity='0.18'/%3E%3Crect x='310' y='118' width='2' height='2' fill='%23475569' opacity='0.22'/%3E%3Crect x='355' y='120' width='2' height='2' fill='%2364748b' opacity='0.18'/%3E%3Crect x='385' y='118' width='2' height='2' fill='%23475569' opacity='0.2'/%3E%3Crect x='450' y='120' width='2' height='2' fill='%2364748b' opacity='0.18'/%3E%3C/svg%3E") repeat-x bottom center / 480px 160px;
+}
+
+/* ── Layer 4: Animated bubbles (3 layers at different speeds) ── */
+.bubble-layer {
+  background:
+    /* Large bubbles - slow rise */
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='220' viewBox='0 0 90 220' shape-rendering='crispEdges'%3E%3Crect x='22' y='30' width='4' height='4' fill='%2367e8f9' opacity='0.22'/%3E%3Crect x='65' y='95' width='4' height='4' fill='%2367e8f9' opacity='0.18'/%3E%3Crect x='38' y='160' width='4' height='4' fill='%2367e8f9' opacity='0.24'/%3E%3Crect x='10' y='200' width='4' height='4' fill='%2367e8f9' opacity='0.16'/%3E%3Crect x='75' y='50' width='4' height='4' fill='%2367e8f9' opacity='0.14'/%3E%3C/svg%3E") repeat / 90px 220px,
+    /* Medium bubbles - medium rise */
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='300' viewBox='0 0 110 300' shape-rendering='crispEdges'%3E%3Crect x='30' y='40' width='2' height='2' fill='white' opacity='0.16'/%3E%3Crect x='80' y='120' width='2' height='2' fill='white' opacity='0.13'/%3E%3Crect x='15' y='190' width='2' height='2' fill='white' opacity='0.16'/%3E%3Crect x='60' y='260' width='2' height='2' fill='white' opacity='0.12'/%3E%3Crect x='95' y='70' width='2' height='2' fill='white' opacity='0.14'/%3E%3Crect x='45' y='160' width='2' height='2' fill='white' opacity='0.1'/%3E%3C/svg%3E") repeat / 110px 300px,
+    /* Tiny bubbles - fast rise */
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='160' viewBox='0 0 70 160' shape-rendering='crispEdges'%3E%3Crect x='15' y='20' width='2' height='2' fill='%2367e8f9' opacity='0.1'/%3E%3Crect x='50' y='60' width='2' height='2' fill='%2367e8f9' opacity='0.08'/%3E%3Crect x='30' y='100' width='2' height='2' fill='white' opacity='0.09'/%3E%3Crect x='60' y='140' width='2' height='2' fill='%2367e8f9' opacity='0.07'/%3E%3Crect x='8' y='80' width='2' height='2' fill='white' opacity='0.08'/%3E%3C/svg%3E") repeat / 70px 160px;
+  animation: sea-bubbles 16s linear infinite, water-sway 10s ease-in-out infinite alternate;
+}
+
+/* ── Layer 5: Animated fish swimming ── */
+.fish-layer {
+  background:
+    /* Fish 1: orange tropical (right-facing, swims left→right) */
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' shape-rendering='crispEdges'%3E%3Crect x='0' y='1' width='2' height='2' fill='%23f97316' opacity='0.65'/%3E%3Crect x='0' y='7' width='2' height='2' fill='%23f97316' opacity='0.65'/%3E%3Crect x='2' y='2' width='2' height='6' fill='%23fb923c' opacity='0.65'/%3E%3Crect x='4' y='1' width='8' height='8' fill='%23f97316' opacity='0.6'/%3E%3Crect x='7' y='1' width='2' height='8' fill='%23fef3c7' opacity='0.45'/%3E%3Crect x='5' y='0' width='4' height='1' fill='%23fb923c' opacity='0.45'/%3E%3Crect x='5' y='9' width='4' height='1' fill='%23fb923c' opacity='0.45'/%3E%3Crect x='10' y='3' width='2' height='2' fill='%23000' opacity='0.55'/%3E%3Crect x='11' y='3' width='1' height='1' fill='white' opacity='0.45'/%3E%3Crect x='12' y='5' width='2' height='1' fill='%23000' opacity='0.3'/%3E%3C/svg%3E") no-repeat / 32px 20px,
+    /* Fish 2: blue fish (left-facing, swims right→left) */
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' shape-rendering='crispEdges'%3E%3Crect x='10' y='1' width='2' height='2' fill='%236366f1' opacity='0.55'/%3E%3Crect x='10' y='5' width='2' height='2' fill='%236366f1' opacity='0.55'/%3E%3Crect x='8' y='2' width='2' height='4' fill='%23818cf8' opacity='0.55'/%3E%3Crect x='2' y='1' width='6' height='6' fill='%236366f1' opacity='0.5'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23000' opacity='0.45'/%3E%3Crect x='2' y='2' width='1' height='1' fill='white' opacity='0.35'/%3E%3Crect x='4' y='0' width='3' height='1' fill='%23818cf8' opacity='0.4'/%3E%3C/svg%3E") no-repeat / 24px 16px;
+  animation: fish-swim 22s linear infinite;
+}
+
+/* Fish layer ::before = additional green fish with offset timing */
+.fish-layer::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' shape-rendering='crispEdges'%3E%3Crect x='0' y='1' width='2' height='1' fill='%2322c55e' opacity='0.5'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%2322c55e' opacity='0.5'/%3E%3Crect x='2' y='1' width='1' height='4' fill='%234ade80' opacity='0.5'/%3E%3Crect x='3' y='0' width='5' height='6' fill='%2322c55e' opacity='0.45'/%3E%3Crect x='6' y='1' width='2' height='2' fill='%23000' opacity='0.4'/%3E%3Crect x='7' y='1' width='1' height='1' fill='white' opacity='0.3'/%3E%3Crect x='8' y='3' width='2' height='1' fill='%23000' opacity='0.25'/%3E%3C/svg%3E") no-repeat / 20px 12px;
+  animation: fish-swim-alt 28s linear infinite;
+}
+
+/* ── Keyframes ── */
+
+@keyframes sea-bubbles {
+  from { background-position: 0 0, 30px 0, 10px 0; }
+  to { background-position: 0 -220px, 0 -300px, -15px -160px; }
+}
+
+@keyframes water-sway {
+  from { transform: translateX(-3px); }
+  to { transform: translateX(3px); }
+}
+
+@keyframes fish-swim {
+  0% { background-position: -40px 22%, calc(100% + 30px) 52%; }
+  100% { background-position: calc(100% + 40px) 28%, -30px 48%; }
+}
+
+@keyframes fish-swim-alt {
+  0% { background-position: -25px 68%; }
+  100% { background-position: calc(100% + 25px) 62%; }
+}
+
+@keyframes light-pulse {
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.7; }
+}
+</style>
diff --git a/frontend/src/components/transcript-debug/PermissionApproval.vue b/frontend/src/components/transcript-debug/PermissionApproval.vue
index 650b93f..a9c759b 100644
--- a/frontend/src/components/transcript-debug/PermissionApproval.vue
+++ b/frontend/src/components/transcript-debug/PermissionApproval.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import type { HooksApprovalPermissionRequest } from '@/types/hooks-approval'
+import MarkdownContent from './MarkdownContent.vue'
+import { ensureStyles } from '@/utils/markdown'
 
 const props = defineProps<{
   request: HooksApprovalPermissionRequest
@@ -123,6 +125,8 @@ function handleFreeResponse() {
   }
 }
 
+onMounted(ensureStyles)
+
 // ── Common ──
 function formatInput(inp: unknown): string {
   if (!inp) return ''
@@ -159,7 +163,7 @@ function elapsed(): string {
     </div>
     <div class="card-body">
       <div v-if="planText" class="plan-text">
-        <pre class="plan-pre">{{ planText }}</pre>
+        <MarkdownContent :content="planText" />
       </div>
       <div v-else class="plan-empty">Claude is waiting for plan approval</div>
       <Transition name="expand">
@@ -409,19 +413,13 @@ function elapsed(): string {
 }
 
 /* ── Plan body ── */
-.plan-text { max-height: 250px; overflow-y: auto; }
-.plan-pre {
-  margin: 0;
+.plan-text {
+  max-height: 300px;
+  overflow-y: auto;
   padding: 0.5rem;
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: 6px;
-  font-size: 12px;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  color: var(--text-secondary);
-  white-space: pre-wrap;
-  word-break: break-word;
-  line-height: 1.5;
 }
 .plan-empty { font-size: 13px; color: var(--text-muted); font-style: italic; padding: 0.5rem 0; }
 
diff --git a/frontend/src/components/transcript-debug/PlanApproval.vue b/frontend/src/components/transcript-debug/PlanApproval.vue
index b699397..556a4fb 100644
--- a/frontend/src/components/transcript-debug/PlanApproval.vue
+++ b/frontend/src/components/transcript-debug/PlanApproval.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import type { HooksApprovalPlanRequest } from '@/types/hooks-approval'
+import MarkdownContent from './MarkdownContent.vue'
+import { ensureStyles } from '@/utils/markdown'
 
 const props = defineProps<{
   request: HooksApprovalPlanRequest
@@ -20,6 +22,8 @@ function elapsed(): string {
   return `${Math.floor(s / 60)}m ${s % 60}s ago`
 }
 
+onMounted(ensureStyles)
+
 function handleEdit() {
   if (!showEditor.value) {
     showEditor.value = true
@@ -46,7 +50,7 @@ function handleEdit() {
 
     <div class="card-body">
       <div v-if="request.lastAssistantText" class="plan-text">
-        <pre class="plan-pre">{{ request.lastAssistantText }}</pre>
+        <MarkdownContent :content="request.lastAssistantText" />
       </div>
       <div v-else class="plan-empty">
         Claude is waiting for plan approval
@@ -134,22 +138,12 @@ function handleEdit() {
 }
 
 .plan-text {
-  max-height: 250px;
+  max-height: 300px;
   overflow-y: auto;
-}
-
-.plan-pre {
-  margin: 0;
   padding: 0.5rem;
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: 6px;
-  font-size: 12px;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  color: var(--text-secondary);
-  white-space: pre-wrap;
-  word-break: break-word;
-  line-height: 1.5;
 }
 
 .plan-empty {
diff --git a/frontend/src/components/transcript-debug/index.ts b/frontend/src/components/transcript-debug/index.ts
index 5878fbb..192d4d9 100644
--- a/frontend/src/components/transcript-debug/index.ts
+++ b/frontend/src/components/transcript-debug/index.ts
@@ -11,3 +11,4 @@ export { default as SystemMessage } from './SystemMessage.vue'
 export { default as UserInput } from './UserInput.vue'
 export { default as PermissionApproval } from './PermissionApproval.vue'
 export { default as PlanApproval } from './PlanApproval.vue'
+export { default as BackgroundPixelArt } from './BackgroundPixelArt.vue'