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