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

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')"
       >

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"
       >

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(() => {

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"

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')"
   >

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"