From 88e211c87d1dda793e4e9d5ee0a44e5a4b30e5b1 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Mon, 2 Mar 2026 14:26:22 +0000
Subject: [PATCH] refactor(ui): port exact Archy glassmorphism system

Replace all glass morphism CSS with exact Archy definitions from
neode-ui/src/style.css. Every container and button class now matches
Archy pixel-for-pixel:

- glass: rgba(0,0,0,0.35), blur(18px), border rgba(255,255,255,0.18)
- glass-strong: same bg, blur(24px)
- glass-card: rgba(0,0,0,0.65), blur(18px), border-radius 1rem
- glass-button: 48px height, rgba(0,0,0,0.6), blur(18px)
- glass-button-sm: compact variant
- gradient-button: primary CTA with gradient intensification on hover
- gradient-card, gradient-card-dark, gradient-border-container
- toast-glass, nav-tab-active with CSS mask gradient border
- Archy inset highlight: inset 0 1px 0 rgba(255,255,255,0.22)
- Archy focus glow: blue box-shadow, no outline
- Archy scrollbar: gradient thumb, hidden variant
- Archy animations: fadeUpIn 900ms cubic-bezier(0.22, 1, 0.36, 1)

Updated design rules (02-tailwind-styling.mdc, 03-design-system.mdc)
to reference Archy as canonical source. Added archy-glass-system.md
to Coding Rules Project.

Made-with: Cursor
---
 .cursor/rules/02-tailwind-styling.mdc         | 110 ++++---
 .cursor/rules/03-design-system.mdc            | 135 ++++++---
 .../app/src/components/chat/ChatHeader.vue    |  13 +-
 .../app/src/components/chat/ChatInput.vue     |  13 +-
 .../app/src/components/chat/ChatMessage.vue   |  14 +-
 .../app/src/components/chat/StreamingDots.vue |   4 +-
 .../app/src/components/widget/WidgetFab.vue   |   6 +-
 .../app/src/components/widget/WidgetModal.vue |   4 +-
 packages/app/src/pages/ChatPage.vue           |  28 +-
 packages/app/src/styles/main.css              | 280 +++++++++++++-----
 10 files changed, 405 insertions(+), 202 deletions(-)

diff --git a/.cursor/rules/02-tailwind-styling.mdc b/.cursor/rules/02-tailwind-styling.mdc
index fc122072..eeb2e0c8 100644
--- a/.cursor/rules/02-tailwind-styling.mdc
+++ b/.cursor/rules/02-tailwind-styling.mdc
@@ -1,17 +1,21 @@
 ---
-description: Tailwind CSS utility-first styling conventions for AIUI
+description: Tailwind CSS utility-first styling conventions for AIUI, ported from Archy
 globs: "**/*.vue,**/*.css,**/*.ts"
 alwaysApply: false
 ---
 
 # Tailwind CSS Styling
 
+## Source of Truth
+All glass morphism, container, and button patterns originate from the Archy project (`/Projects/Archy/neode-ui/src/style.css`). When in doubt, match Archy exactly.
+
 ## Utility-First
 Use Tailwind utilities directly in templates. Extract to component classes only when a pattern repeats 3+ times.
 
 ## 4px Spacing Grid
-All spacing follows a 4px base grid:
-- 1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 8 = 32px, 12 = 48px, 16 = 64px
+```
+1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 7 = 28px, 8 = 32px
+```
 
 ## Typography Scale
 ```
@@ -27,52 +31,82 @@ text-4xl   = 36px  (hero headings)
 
 Font weights: `font-normal` (body), `font-medium` (emphasis), `font-semibold` (headings/buttons), `font-bold` (strong emphasis).
 
-## Border Radius
-- `rounded-md` (6px) — inputs
-- `rounded-lg` (8px) — buttons, standard cards
-- `rounded-2xl` (16px) — modern cards, modals
-- `rounded-full` — pills, avatars
+## Glass Morphism (from Archy)
 
-## Shadows
-- `shadow-sm` — subtle elevation
-- `shadow-md` — standard card
-- `shadow-lg` — modal, dropdown
-- `shadow-xl` — hero card
+### Containers (exact Archy values)
+- `.glass` — base: `bg: rgba(0,0,0,0.35)`, `blur(18px)`, `border: 1px solid rgba(255,255,255,0.18)`, `shadow: 0 8px 24px rgba(0,0,0,0.45)`
+- `.glass-strong` — stronger blur: same bg but `blur(24px)`
+- `.glass-card` — primary card: `bg: rgba(0,0,0,0.65)`, `blur(18px)`, `border-radius: 1rem`, same border/shadow
+- `.gradient-card` — gradient: `linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.8) 100%)`
+- `.gradient-card-dark` — dark gradient: `linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.9) 100%)`
+- `.gradient-border-container` — gradient border with inner glass, `border-radius: 1.5rem`
+- `.toast-glass` — `border-radius: 0.75rem`, same glass as `.glass-card`
 
-## Glass Morphism
-For cards over complex backgrounds:
+### Buttons (exact Archy values)
+- `.glass-button` — 48px height, `bg: rgba(0,0,0,0.6)`, `blur(18px)`, border `rgba(255,255,255,0.18)`, `color: rgba(255,255,255,0.9)`
+- `.glass-button-sm` — compact variant (auto height, `py-1.5 px-3`)
+- `.gradient-button` — primary action: `linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.8) 100%)`, border `rgba(255,255,255,0.2)`, intensifies on hover
+
+### Icon / Ghost buttons (Archy pattern)
 ```html
-<div class="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl">
+<button class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors">
 ```
-Never use glass morphism on body text containers or form inputs.
+Touch target: minimum 44x44px via padding.
+
+### Active Navigation
+`.nav-tab-active` — `bg: rgba(0,0,0,0.35)`, inset highlight, gradient border via CSS mask `::before`
+
+### Usage Rules
+- ✅ Cards, panels, modals, sidebars
+- ✅ Navigation bars, headers (fixed positioning)
+- ✅ Hover states, buttons
+- ❌ Body text containers (readability)
+- ❌ Form input fields (confusing UX)
+
+## Inset Highlight
+The signature Archy inset glow:
+```css
+box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
+```
+Apply to headers, selected cards, active nav items.
+
+## Border — No Separators Between Sections
+Per Archy theme rules: no borders between sidebar and content, or header and content. Only subtle `rgba(255,255,255,0.06-0.08)` borders for internal dividers.
+
+## Gradient Text
+```html
+<h1 class="gradient-text">Title</h1>
+```
+`linear-gradient(to right, #ffffff, #9ca3af)` with `background-clip: text`.
+
+## Focus States — Gamepad/Keyboard Glow
+All focusable elements get a blue glow (no outline):
+```css
+*:focus-visible {
+  outline: none;
+  box-shadow: 0 0 16px rgba(120, 180, 255, 0.2), 0 0 32px rgba(100, 160, 255, 0.1);
+}
+```
+
+## Scrollbar
+- `.custom-scrollbar` — gradient thumb (`rgba(255,255,255,0.3)` to `0.1`), dark track
+- `.scrollbar-hide` — hidden scrollbar, keeps scroll functionality
 
 ## Responsive — Mobile First
-Always write base styles for mobile, enhance with breakpoints:
+Base styles for mobile, enhance with breakpoints:
 ```html
 <div class="text-base md:text-lg lg:text-xl p-4 md:p-6 lg:p-8">
 ```
 Breakpoints: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `2xl` (1536px).
 
-## Dark Mode
-Use CSS custom properties for theme switching. Both Tailwind `dark:` and custom theme classes supported:
+## Hover States (from Archy)
 ```html
-<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+<div class="transition-all duration-300 hover:bg-white/10 hover:text-white">
 ```
+Interactive card lift: `hover:translateY(-2px)` with intensified shadow.
 
-## Gradients for Hierarchy
-Use gradients strategically for emphasis, not decoration:
-```html
-<h2 class="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
-```
-
-## Hover States
-All interactive elements need immediate visual feedback (< 100ms):
-```html
-<button class="transition-colors duration-200 hover:bg-primary-dark">
-```
-
-## Focus States
-Always visible focus for accessibility:
-```html
-<button class="focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
-```
+## Animations (Archy timings)
+- `animate-fade-up` — 900ms `cubic-bezier(0.22, 1, 0.36, 1)` with 120ms delay
+- `animate-fade-up-fast` — 400ms, no delay (for chat messages)
+- `animate-fade-in` — 500ms ease
+- `animate-scale-in` — 250ms for modals/popups
diff --git a/.cursor/rules/03-design-system.mdc b/.cursor/rules/03-design-system.mdc
index 631ec6d1..38a10ef7 100644
--- a/.cursor/rules/03-design-system.mdc
+++ b/.cursor/rules/03-design-system.mdc
@@ -1,74 +1,119 @@
 ---
-description: Design system foundations - colors, typography, spacing, component patterns
+description: Design system foundations - glassmorphism from Archy, colors, typography, spacing
 globs: "**/*.vue,**/*.css,**/*.ts"
 alwaysApply: false
 ---
 
 # Design System
 
+All glass morphism, container, and button patterns are ported from the Archy project and must match exactly.
+
+## Glass Morphism Hierarchy (from Archy)
+
+### Glass Intensity Levels
+| Class | Background | Blur | Use Case |
+|-------|-----------|------|----------|
+| `.glass` | `rgba(0,0,0,0.35)` | 18px | Sidebar, panels, inputs |
+| `.glass-strong` | `rgba(0,0,0,0.35)` | 24px | Headers, message bubbles (user) |
+| `.glass-card` | `rgba(0,0,0,0.65)` | 18px | Primary cards, modals, main containers |
+| `.gradient-card` | gradient white→black | 18px | Feature cards |
+| `.gradient-card-dark` | gradient black→black | 18px | Dark feature cards |
+
+All share: `border: 1px solid rgba(255,255,255,0.18)`, `box-shadow: 0 8px 24px rgba(0,0,0,0.45)`.
+
+### Button Hierarchy (from Archy)
+| Class | Purpose | Details |
+|-------|---------|---------|
+| `.glass-button` | Default | 48px height, `rgba(0,0,0,0.6)`, blur 18px |
+| `.glass-button-sm` | Compact | Auto height, smaller padding |
+| `.gradient-button` | Primary action | Gradient bg, intensifies on hover |
+| Ghost | Icon/text actions | `p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10` |
+
+### Inset Highlight
+Signature Archy top-edge glow on focused/active elements:
+```css
+box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
+```
+
+### Gradient Border (CSS mask technique)
+For premium-feel borders on selected cards and active nav:
+```css
+::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+```
+
 ## Design Tokens
 
 ### Color Palette
-Semantic color tokens defined by purpose, not appearance:
-- `primary` — main brand actions (#606060 / configurable)
+Semantic color tokens defined by purpose:
+- `primary` — main brand actions (#606060)
 - `accent` — highlight, Bitcoin orange (#F7931A)
 - `success` — positive states (#10B981)
 - `error` — negative states (#EF4444)
 - `warning` — caution states (#F59E0B)
 - `info` — informational (#3B82F6)
-- Neutrals: gray-50 through gray-900
+
+### Glass Tokens (from Archy Tailwind config)
+- `glass-dark`: `rgba(0, 0, 0, 0.35)`
+- `glass-darker`: `rgba(0, 0, 0, 0.6)`
+- `glass-border`: `rgba(255, 255, 255, 0.18)`
+- `glass-highlight`: `rgba(255, 255, 255, 0.22)`
+
+### Shadows
+- `shadow-glass`: `0 8px 24px rgba(0, 0, 0, 0.45)`
+- `shadow-glass-sm`: `0 6px 18px rgba(0, 0, 0, 0.35)`
+- `shadow-glass-inset`: `inset 0 1px 0 rgba(255, 255, 255, 0.22)`
 
 ### Typography
-- Display font: Geometric sans-serif (Space Grotesk, Inter Display)
-- Body font: Clean sans-serif (Inter, system-ui)
+- Body font: Inter, system-ui (AIUI default)
 - Mono font: Menlo, Monaco, Courier New
-- Use single font family with weight variations for simplicity
+- Text opacity scale: `text-white/25` (placeholders), `text-white/40` (muted), `text-white/60` (secondary), `text-white/70` (interactive default), `text-white/80` (body), `text-white/90` (emphasis), `text-white/96` (headings), `text-white` (active/selected)
 
 ### Spacing
-All spacing on 4px grid. Common patterns:
-- Component padding: `p-4` (16px) to `p-6` (24px)
-- Section spacing: `py-12` (48px) to `py-16` (64px)
-- Element gaps: `gap-4` (16px) default
+4px grid: `4, 8, 12, 16, 20, 24, 28, 32` px.
 
-### Shadows & Glows
-```css
-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08)
-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.1)
-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.15)
-```
+### Border Radius
+- `rounded-lg` (8px) — buttons, nav items, inputs
+- `rounded-xl` (12px) — toasts, small cards
+- `rounded-2xl` (16px) — main cards, modals
+- `rounded-3xl` (24px) — bottom sheets
+- `rounded-full` — pills, avatars, FABs
+- `1rem` (16px) — `.glass-card` default
 
 ## Component Patterns
 
-### Buttons
-- Primary: solid background, white text, `rounded-lg`, `font-semibold`
-- Secondary: border only, primary text, fill on hover
-- Ghost: text only, subtle background on hover
-- Icon: `p-2 rounded-md`, minimum 44x44px touch target
-- Sizes: sm (`px-4 py-2`), md (`px-6 py-3`), lg (`px-8 py-4`)
-
 ### Cards
-- Background: white/dark with `rounded-2xl` (16px radius)
-- Padding: `p-6`
-- Shadow: `shadow-card` default, `shadow-elevated` on hover
-- Interactive cards get `hover:shadow-lg transition-shadow duration-300 cursor-pointer`
+Use `.glass-card` with additional padding:
+```html
+<div class="glass-card p-6">Content</div>
+```
 
-### Form Elements
-- Inputs: `min-h-[44px]` touch target, `text-base` (prevents iOS zoom), `rounded-lg`
-- Labels: `text-sm font-semibold text-gray-700 mb-2`
-- Error text: `text-sm text-error mt-1`
-- Focus: `focus:border-primary focus:ring-2 focus:ring-primary/50`
-
-### Badges
-- Status badges: `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium`
-- Color variants: success (green-100/green-800), warning (yellow-100/yellow-800), error (red-100/red-800)
+### Modals
+```html
+<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
+  <div class="glass-card p-6 max-w-md w-full">...</div>
+</div>
+```
 
 ### Icons
-- SVG preferred, using Lucide Icons
-- Sizes: xs (16px), sm (20px), md (24px), lg (32px), xl (48px)
-- Always use `currentColor` for stroke/fill
-- Icon-only buttons must have `aria-label`
+- SVG, using `currentColor`
+- Sizes: 16px, 20px, 24px, 32px
+- Icon-only buttons: `p-2 rounded-lg` (reaches 44px touch target with 24px icon)
+- Must have `aria-label`
 
-## Layout Patterns
-- Standard container: `max-w-7xl mx-auto px-4 md:px-6`
-- Reading container: `max-w-3xl mx-auto px-4 md:px-6`
-- Sidebar + content: `grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-6`
+## Theme Architecture
+- Base background: `#0a0a0a` (near-black)
+- No separator borders between sidebar/header/content
+- Header, sidebar, root share same visual weight
+- CSS-based themes with reactive Vue state
+- `localStorage` persistence
diff --git a/packages/app/src/components/chat/ChatHeader.vue b/packages/app/src/components/chat/ChatHeader.vue
index 2daefa2d..e1f4d0fd 100644
--- a/packages/app/src/components/chat/ChatHeader.vue
+++ b/packages/app/src/components/chat/ChatHeader.vue
@@ -1,18 +1,19 @@
 <template>
-  <div class="glass-subtle rounded-t-2xl flex items-center justify-between px-4 py-3">
+  <div class="glass-strong rounded-t-2xl flex items-center justify-between px-4 py-3"
+       style="border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);">
     <div class="flex items-center gap-3 min-w-0">
       <div class="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center shrink-0">
         <span class="text-accent text-sm font-bold">AI</span>
       </div>
       <div class="min-w-0">
-        <h2 class="text-sm font-semibold text-white truncate">{{ title }}</h2>
-        <p class="text-[10px] text-white/40 truncate">{{ conversationId }}</p>
+        <h2 class="text-sm font-semibold text-white/96 truncate">{{ title }}</h2>
+        <p class="text-[10px] text-white/40 truncate font-mono">{{ conversationId }}</p>
       </div>
     </div>
 
     <div class="flex items-center gap-1">
       <button
-        class="p-2 rounded-lg text-white/40 hover:text-white/80 hover:bg-white/5 transition-all duration-200"
+        class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
         :title="side === 'right' ? 'Move panel to left' : 'Move panel to right'"
         aria-label="Switch panel side"
         @click="$emit('switchSide')"
@@ -24,7 +25,7 @@
       </button>
 
       <button
-        class="p-2 rounded-lg text-white/40 hover:text-white/80 hover:bg-white/5 transition-all duration-200"
+        class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
         aria-label="New conversation"
         @click="$emit('newChat')"
       >
@@ -35,7 +36,7 @@
 
       <button
         v-if="showClose"
-        class="p-2 rounded-lg text-white/40 hover:text-white/80 hover:bg-white/5 transition-all duration-200"
+        class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
         aria-label="Close"
         @click="$emit('close')"
       >
diff --git a/packages/app/src/components/chat/ChatInput.vue b/packages/app/src/components/chat/ChatInput.vue
index 5d04b132..4beb4365 100644
--- a/packages/app/src/components/chat/ChatInput.vue
+++ b/packages/app/src/components/chat/ChatInput.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="p-3 md:p-4">
     <div
-      class="glass rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300 inner-glow"
-      :class="isFocused ? 'border-white/20 glow-soft' : ''"
+      class="glass rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300"
+      :class="isFocused ? 'border-glass-highlight' : ''"
+      :style="isFocused ? 'box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22)' : ''"
     >
       <textarea
         ref="textareaRef"
         v-model="text"
         rows="1"
         :placeholder="placeholder"
-        class="flex-1 resize-none bg-transparent text-sm text-white outline-none placeholder:text-white/30 min-h-[24px] max-h-[120px]"
+        class="flex-1 resize-none bg-transparent text-sm text-white/90 outline-none placeholder:text-white/25 min-h-[24px] max-h-[120px]"
         @focus="isFocused = true"
         @blur="isFocused = false"
         @keydown.enter.exact.prevent="send"
@@ -17,10 +18,10 @@
       />
       <button
         :disabled="!canSend"
-        class="shrink-0 w-9 h-9 flex items-center justify-center rounded-xl transition-all duration-200"
+        class="shrink-0 glass-button glass-button-sm rounded-xl px-3 transition-all duration-200"
         :class="canSend
-          ? 'bg-accent text-white hover:bg-accent-hover active:scale-90'
-          : 'bg-white/5 text-white/20 cursor-not-allowed'"
+          ? 'hover:bg-white/15 active:scale-95'
+          : 'opacity-30 cursor-not-allowed'"
         aria-label="Send message"
         @click="send"
       >
diff --git a/packages/app/src/components/chat/ChatMessage.vue b/packages/app/src/components/chat/ChatMessage.vue
index 277edaaf..dd084a8b 100644
--- a/packages/app/src/components/chat/ChatMessage.vue
+++ b/packages/app/src/components/chat/ChatMessage.vue
@@ -1,17 +1,17 @@
 <template>
   <div
-    class="flex animate-fade-up"
+    class="flex animate-fade-up-fast"
     :class="isUser ? 'justify-end' : 'justify-start'"
     :style="{ animationDelay: `${index * 30}ms` }"
   >
     <div
-      class="max-w-[85%] md:max-w-[70%] rounded-2xl px-4 py-3 transition-all duration-200"
+      class="max-w-[85%] md:max-w-[70%] rounded-2xl px-4 py-3 transition-all duration-300"
       :class="bubbleClasses"
     >
-      <p class="text-sm leading-relaxed whitespace-pre-wrap break-words">{{ message.content }}</p>
+      <p class="text-sm leading-relaxed whitespace-pre-wrap break-words text-white/90">{{ message.content }}</p>
       <div class="flex items-center gap-2 mt-1.5">
-        <span class="text-[10px] opacity-40 select-none">{{ formattedTime }}</span>
-        <span v-if="isUser && message.status" class="text-[10px] opacity-30">
+        <span class="text-[10px] text-white/30 select-none">{{ formattedTime }}</span>
+        <span v-if="isUser && message.status" class="text-[10px] text-white/20">
           {{ message.status === 'sent' ? '✓' : message.status === 'delivered' ? '✓✓' : '' }}
         </span>
       </div>
@@ -32,8 +32,8 @@ const isUser = computed(() => props.message.role === 'user')
 
 const bubbleClasses = computed(() =>
   isUser.value
-    ? 'glass-strong text-white rounded-br-md'
-    : 'glass-dark text-gray-100 rounded-bl-md'
+    ? 'glass-strong rounded-br-md'
+    : 'glass-card rounded-bl-md'
 )
 
 const formattedTime = computed(() => {
diff --git a/packages/app/src/components/chat/StreamingDots.vue b/packages/app/src/components/chat/StreamingDots.vue
index 4eadf523..52ff67a9 100644
--- a/packages/app/src/components/chat/StreamingDots.vue
+++ b/packages/app/src/components/chat/StreamingDots.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex justify-start animate-fade-up">
-    <div class="glass-dark rounded-2xl rounded-bl-md px-4 py-3">
+  <div class="flex justify-start animate-fade-up-fast">
+    <div class="glass-card rounded-2xl rounded-bl-md px-4 py-3">
       <div class="flex items-center gap-1.5">
         <span
           v-for="i in 3"
diff --git a/packages/app/src/components/widget/WidgetFab.vue b/packages/app/src/components/widget/WidgetFab.vue
index ce6d5655..898314f6 100644
--- a/packages/app/src/components/widget/WidgetFab.vue
+++ b/packages/app/src/components/widget/WidgetFab.vue
@@ -1,9 +1,9 @@
 <template>
   <button
-    class="fixed z-50 w-14 h-14 rounded-full glass-strong flex items-center justify-center
-           shadow-lg hover:shadow-xl transition-all duration-300
-           hover:scale-105 active:scale-95 glow-accent"
+    class="fixed z-50 w-14 h-14 rounded-full glass-button flex items-center justify-center
+           transition-all duration-300 hover:scale-105 active:scale-95"
     :class="positionClasses"
+    :style="{ boxShadow: '0 8px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(247, 147, 26, 0.15)' }"
     :aria-label="isOpen ? 'Close AIUI' : 'Open AIUI'"
     @click="$emit('toggle')"
   >
diff --git a/packages/app/src/components/widget/WidgetModal.vue b/packages/app/src/components/widget/WidgetModal.vue
index 02144a37..1729311d 100644
--- a/packages/app/src/components/widget/WidgetModal.vue
+++ b/packages/app/src/components/widget/WidgetModal.vue
@@ -7,8 +7,8 @@
         :class="positionClasses"
       >
         <div
-          class="w-[380px] h-[600px] md:w-[420px] md:h-[640px] rounded-2xl overflow-hidden shadow-2xl"
-          :style="{ boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(247, 147, 26, 0.08)' }"
+          class="w-[380px] h-[600px] md:w-[420px] md:h-[640px] glass-card overflow-hidden"
+          :style="{ boxShadow: '0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(247, 147, 26, 0.06)' }"
         >
           <ChatWindow
             variant="modal"
diff --git a/packages/app/src/pages/ChatPage.vue b/packages/app/src/pages/ChatPage.vue
index a723fe2c..7fb43d45 100644
--- a/packages/app/src/pages/ChatPage.vue
+++ b/packages/app/src/pages/ChatPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full flex flex-col bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 relative overflow-hidden">
+  <div class="h-full flex flex-col bg-[#0a0a0a] relative overflow-hidden">
     <div class="absolute inset-0 pointer-events-none">
       <div class="absolute top-[-20%] left-[-10%] w-[500px] h-[500px] rounded-full bg-accent/5 blur-[120px]" />
       <div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-info/5 blur-[120px]" />
@@ -10,10 +10,11 @@
         v-if="showSidebar"
         class="hidden lg:flex w-64 xl:w-72 shrink-0 flex-col glass rounded-2xl overflow-hidden"
       >
-        <div class="p-4 flex items-center justify-between">
+        <div class="p-4 flex items-center justify-between"
+             style="border-bottom: 1px solid rgba(255, 255, 255, 0.08);">
           <h1 class="text-lg font-bold gradient-text">AIUI</h1>
           <button
-            class="p-2 rounded-lg text-white/40 hover:text-white hover:bg-white/5 transition-all"
+            class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
             aria-label="New chat"
             @click="chatStore.createConversation()"
           >
@@ -23,14 +24,14 @@
           </button>
         </div>
 
-        <div class="flex-1 overflow-y-auto scrollbar-thin px-2 pb-2 space-y-1">
+        <div class="flex-1 overflow-y-auto scrollbar-hide px-2 pb-2 space-y-1 pt-2">
           <button
             v-for="conv in conversations"
             :key="conv.id"
-            class="w-full text-left px-3 py-2.5 rounded-xl text-sm transition-all duration-200 truncate"
+            class="w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all duration-200 truncate"
             :class="conv.id === chatStore.activeConversationId
-              ? 'glass-strong text-white'
-              : 'text-white/50 hover:text-white/80 hover:bg-white/5'"
+              ? 'nav-tab-active'
+              : 'text-white/60 hover:text-white hover:bg-white/10'"
             @click="chatStore.setActiveConversation(conv.id)"
           >
             {{ conv.title }}
@@ -44,7 +45,7 @@
           </p>
         </div>
 
-        <div class="p-3 border-t border-white/5">
+        <div class="p-3" style="border-top: 1px solid rgba(255, 255, 255, 0.06);">
           <div class="flex items-center gap-2 px-2 py-1.5 rounded-lg text-[11px] text-white/25">
             <span class="w-1.5 h-1.5 rounded-full bg-success animate-pulse" />
             <span>OpenRouter connected</span>
@@ -52,21 +53,12 @@
         </div>
       </aside>
 
-      <main class="flex-1 min-w-0 flex flex-col glass rounded-2xl overflow-hidden">
+      <main class="flex-1 min-w-0 flex flex-col glass-card overflow-hidden">
         <ChatWindow
           :side="panelSide"
           @switch-side="chatStore.switchSide()"
         />
       </main>
-
-      <aside
-        v-if="false"
-        class="hidden xl:flex w-80 shrink-0 flex-col glass rounded-2xl overflow-hidden"
-      >
-        <div class="p-4 text-center text-white/20 text-sm">
-          Content panel (coming soon)
-        </div>
-      </aside>
     </div>
   </div>
 </template>
diff --git a/packages/app/src/styles/main.css b/packages/app/src/styles/main.css
index 312422a7..72f4ce00 100644
--- a/packages/app/src/styles/main.css
+++ b/packages/app/src/styles/main.css
@@ -13,13 +13,13 @@
   --color-warning: #F59E0B;
   --color-info: #3B82F6;
 
-  --color-glass-bg: rgba(255, 255, 255, 0.08);
-  --color-glass-border: rgba(255, 255, 255, 0.12);
-  --color-glass-bg-hover: rgba(255, 255, 255, 0.14);
-  --color-glass-border-hover: rgba(255, 255, 255, 0.22);
+  --color-glass-dark: rgba(0, 0, 0, 0.35);
+  --color-glass-darker: rgba(0, 0, 0, 0.6);
+  --color-glass-border: rgba(255, 255, 255, 0.18);
+  --color-glass-highlight: rgba(255, 255, 255, 0.22);
 
-  --color-glass-bg-light: rgba(255, 255, 255, 0.65);
-  --color-glass-border-light: rgba(255, 255, 255, 0.45);
+  --shadow-glass: 0 8px 24px rgba(0, 0, 0, 0.45);
+  --shadow-glass-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
 
   --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
   --font-mono: 'Menlo', 'Monaco', 'Courier New', monospace;
@@ -31,60 +31,155 @@ html {
 
 body {
   overscroll-behavior: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.glass {
-  background: var(--color-glass-bg);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--color-glass-border);
+/* ===== GLASSMORPHISM — ported from Archy ===== */
+
+@layer components {
+  .glass {
+    background-color: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  }
+
+  .glass-strong {
+    background-color: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  }
+
+  .glass-card {
+    background-color: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+    border-radius: 1rem;
+    overflow-x: hidden;
+    overflow-y: visible;
+  }
+
+  .glass-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 48px;
+    min-height: 48px;
+    padding-block: 0 !important;
+    line-height: 48px;
+    background-color: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .glass-button-sm {
+    min-height: 0 !important;
+    height: auto !important;
+    line-height: inherit;
+    padding-block: 0.375rem !important;
+    padding-inline: 0.75rem;
+  }
+
+  .gradient-card {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+    border-radius: 1rem;
+  }
+
+  .gradient-card-dark {
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.9) 100%);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+    border-radius: 1rem;
+  }
+
+  .gradient-button {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.8) 100%);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.95);
+    transition: all 0.3s ease;
+  }
+
+  .gradient-button:hover {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%);
+    border-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+  }
+
+  .gradient-border-container {
+    position: relative;
+    border-radius: 1.5rem;
+    padding: 4px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.6) 100%);
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
+  }
+
+  .gradient-border-container-inner {
+    background: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    border-radius: 1.25rem;
+  }
+
+  .toast-glass {
+    background-color: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+    border-radius: 0.75rem;
+  }
+
+  .nav-tab-active {
+    position: relative;
+    background: rgba(0, 0, 0, 0.35) !important;
+    box-shadow:
+      0 6px 16px rgba(0, 0, 0, 0.6),
+      inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
+    color: rgba(255, 255, 255, 1) !important;
+    font-weight: 600 !important;
+  }
+
+  .nav-tab-active::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 2px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
 }
 
-.glass-subtle {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+/* ===== FOCUS STATES — gamepad/keyboard glow ===== */
+
+*:focus-visible {
+  outline: none;
+  box-shadow: 0 0 16px rgba(120, 180, 255, 0.2), 0 0 32px rgba(100, 160, 255, 0.1);
+  transition: box-shadow 0.2s ease;
 }
 
-.glass-strong {
-  background: rgba(255, 255, 255, 0.15);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.18);
-}
-
-.glass-light {
-  background: var(--color-glass-bg-light);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--color-glass-border-light);
-}
-
-.glass-dark {
-  background: rgba(0, 0, 0, 0.45);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.glass:hover {
-  background: var(--color-glass-bg-hover);
-  border-color: var(--color-glass-border-hover);
-}
-
-.glow-accent {
-  box-shadow: 0 0 20px rgba(247, 147, 26, 0.15),
-              0 0 40px rgba(247, 147, 26, 0.05);
-}
-
-.glow-soft {
-  box-shadow: 0 0 20px rgba(255, 255, 255, 0.06);
-}
-
-.inner-glow {
-  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06);
-}
+/* ===== GRADIENT TEXT ===== */
 
 .gradient-text {
   background: linear-gradient(to right, #ffffff, #9ca3af);
@@ -93,9 +188,52 @@ body {
   color: transparent;
 }
 
-@keyframes fadeSlideUp {
-  from { opacity: 0; transform: translateY(12px); }
-  to { opacity: 1; transform: translateY(0); }
+/* ===== SCROLLBAR — Archy custom gradient scrollbar ===== */
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
+  border-radius: 10px;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* ===== ANIMATIONS — Archy timings ===== */
+
+@keyframes fadeUpIn {
+  0% {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 @keyframes scaleIn {
@@ -109,7 +247,15 @@ body {
 }
 
 .animate-fade-up {
-  animation: fadeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation: fadeUpIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
+}
+
+.animate-fade-up-fast {
+  animation: fadeUpIn 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.5s ease forwards;
 }
 
 .animate-scale-in {
@@ -120,23 +266,7 @@ body {
   animation: pulseGlow 2s ease-in-out infinite;
 }
 
-.scrollbar-thin {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
-}
-
-.scrollbar-thin::-webkit-scrollbar {
-  width: 4px;
-}
-
-.scrollbar-thin::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.scrollbar-thin::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 2px;
-}
+/* ===== REDUCED MOTION ===== */
 
 @media (prefers-reduced-motion: reduce) {
   * {