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
2026-02-19 15:25:18 -06:00
parent c8e8e50fd6
commit 18aaa0ee7b
5 changed files with 373 additions and 124 deletions
--- 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 {