feat(app): integrate Jamendo API and enhance UI components

- Added Jamendo API client ID to the environment configuration for music search.
- Updated pnpm lock file to include new dependencies for enhanced functionality.
- Integrated Plyr library for improved media playback experience.
- Refactored ChatHeader, ChatInput, and ChatMessage components to utilize new styles and improve user interaction.
- Enhanced CSS styles for path-glass elements to align with the new design system.

Made-with: Cursor

packages/app/src/components/chat/ChatHeader.vue

@@ -1,6 +1,7 @@
 <template>
   <div
-    class="glass-strong rounded-t-2xl flex items-center justify-between px-4 py-3 relative z-20 border-t-0 border-x-0"
+    ref="headerRef"
+    class="path-glass-card rounded-t-2xl rounded-b-none flex items-center justify-between px-4 py-3 relative z-[60] shrink-0 border-t-0 border-x-0"
     :class="isDark ? '!border-b-white/10' : '!border-b-black/8'"
   >
     <div class="flex items-center gap-3 min-w-0 flex-1">
@@ -10,6 +11,7 @@
       </div>
       <div class="min-w-0 flex-1 relative">
         <button
+          ref="chatListTriggerRef"
           class="w-full text-left group/btn"
           :class="conversationList.length > 0 ? 'cursor-pointer' : ''"
           @click="conversationList.length > 0 && (showChatList = !showChatList)"
@@ -21,6 +23,7 @@
                :class="isDark ? 'text-white/40' : 'text-gray-400'">{{ conversationId }}</p>
           <span class="text-[10px]" :class="isDark ? 'text-white/20' : 'text-gray-300'">·</span>
             <button
+              ref="modelPickerTriggerRef"
               class="text-[10px] text-accent/70 hover:text-accent transition-colors truncate"
               @click.stop="showModelPicker = !showModelPicker; showChatList = false"
             >
@@ -28,19 +31,14 @@
             </button>
           </div>
         </button>
-        <Transition name="picker">
-          <div
-            v-if="showChatList && conversationList.length > 0"
-            class="contents"
-          >
+        <Teleport to="body">
+          <div v-if="showChatList && conversationList.length > 0" class="fixed inset-0 z-[9998]" aria-hidden="true" @click="showChatList = false" />
+          <Transition name="picker">
             <div
-              class="fixed inset-0 z-40"
-              aria-hidden="true"
-              @click="showChatList = false"
-            />
-            <div
-              class="absolute left-0 right-0 top-full z-50 mt-1 p-2 max-h-48 overflow-y-auto animate-fade-up-fast shadow-2xl rounded-xl"
+              v-if="showChatList && conversationList.length > 0"
+              class="fixed z-[9999] mt-1 p-2 max-h-48 overflow-y-auto animate-fade-up-fast shadow-2xl rounded-xl min-w-[200px]"
               :class="isDark ? 'bg-[#161618] border border-white/10' : 'bg-white border border-black/10'"
+              :style="chatListDropdownStyle"
               @click.stop
             >
               <p class="text-[10px] font-semibold uppercase tracking-wider mb-2 px-1"
@@ -59,8 +57,8 @@
                 {{ c.title || 'Untitled' }}
               </button>
             </div>
-          </div>
-        </Transition>
+          </Transition>
+        </Teleport>
       </div>
     </div>
 
@@ -125,11 +123,15 @@
       </button>
     </div>
 
-    <Transition name="picker">
-      <div
-        v-if="showModelPicker"
-        class="absolute left-0 right-0 top-full z-50 mx-3 mt-1 glass-card p-3 space-y-3 animate-fade-up-fast shadow-2xl"
-      >
+    <Teleport to="body">
+      <div v-if="showModelPicker" class="fixed inset-0 z-[9998]" aria-hidden="true" @click="showModelPicker = false" />
+      <Transition name="picker">
+        <div
+          v-if="showModelPicker"
+          class="fixed z-[9999] path-glass-card p-3 space-y-3 animate-fade-up-fast shadow-2xl min-w-[220px]"
+          :style="modelPickerDropdownStyle"
+          @click.stop
+        >
         <div v-for="provider in availableProviders" :key="provider.id">
           <p class="text-[10px] font-semibold uppercase tracking-wider mb-1.5 px-1"
              :class="isDark ? 'text-white/40' : 'text-gray-400'">
@@ -152,12 +154,13 @@
           </div>
         </div>
       </div>
-    </Transition>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 import { useChatStore } from '@/stores/chat'
 import { useAI } from '@/composables/useAI'
 import { useTheme } from '@/composables/useTheme'
@@ -180,6 +183,43 @@ const { isDark, toggleTheme } = useTheme()
 const chatStore = useChatStore()
 const showModelPicker = ref(false)
 const showChatList = ref(false)
+const headerRef = ref<HTMLElement | null>(null)
+const chatListTriggerRef = ref<HTMLElement | null>(null)
+const modelPickerTriggerRef = ref<HTMLElement | null>(null)
+const chatListDropdownStyle = ref<Record<string, string>>({})
+const modelPickerDropdownStyle = ref<Record<string, string>>({})
+
+function updateChatListPosition() {
+  nextTick(() => {
+    const el = chatListTriggerRef.value
+    if (el) {
+      const r = el.getBoundingClientRect()
+      chatListDropdownStyle.value = {
+        top: `${r.bottom + 4}px`,
+        left: `${r.left}px`,
+        width: `${Math.max(r.width, 200)}px`,
+      }
+    }
+  })
+}
+
+function updateModelPickerPosition() {
+  nextTick(() => {
+    const el = modelPickerTriggerRef.value
+    if (el) {
+      const r = el.getBoundingClientRect()
+      modelPickerDropdownStyle.value = {
+        top: `${r.bottom + 4}px`,
+        right: 'auto',
+        left: `${r.left}px`,
+        width: `${Math.max(r.width + 24, 220)}px`,
+      }
+    }
+  })
+}
+
+watch(showChatList, (v) => { if (v) updateChatListPosition() })
+watch(showModelPicker, (v) => { if (v) updateModelPickerPosition() })
 
 const conversationList = computed(() => chatStore.conversationList)
 const activeConversationId = computed(() => chatStore.activeConversationId)

packages/app/src/components/chat/ChatInput.vue

@@ -1,7 +1,7 @@
 <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"
+      class="path-glass-bubble rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300"
       :class="focused
         ? isDark
           ? 'border-white/30'
@@ -24,7 +24,7 @@
       />
       <button
         :disabled="!canSend"
-        class="shrink-0 glass-button glass-button-sm rounded-xl px-3 transition-all duration-200"
+        class="shrink-0 path-glass-button path-glass-button-sm rounded-xl px-3 transition-all duration-200"
         :class="canSend
           ? 'hover:opacity-80 active:scale-95'
           : 'opacity-30 cursor-not-allowed'"

packages/app/src/components/chat/ChatMessage.vue

@@ -73,8 +73,8 @@ const isUser = computed(() => props.message.role === 'user')
 
 const bubbleClasses = computed(() =>
   isUser.value
-    ? 'glass-strong rounded-br-md'
-    : 'glass-card rounded-bl-md'
+    ? 'path-glass-bubble-user rounded-br-md rounded-2xl'
+    : 'path-glass-bubble rounded-bl-md rounded-2xl'
 )
 
 const inlineFilms = computed(() => {

packages/app/src/components/chat/ChatWindow.vue

@@ -12,12 +12,12 @@
 
     <div
       ref="messageListRef"
-      class="flex-1 overflow-y-auto scrollbar-hide p-4 space-y-3"
+      class="relative z-0 flex-1 min-h-0 overflow-y-auto scrollbar-hide p-4 space-y-3"
     >
       <div v-if="messages.length === 0" class="flex items-center justify-center h-full">
         <div class="text-center space-y-3 animate-fade-up">
-          <div class="w-16 h-16 rounded-2xl glass flex items-center justify-center mx-auto">
-            <span class="text-2xl" :class="isDark ? 'text-[#fafafa]' : 'text-gray-800'">✦</span>
+          <div class="w-16 h-16 rounded-2xl path-glass-card flex items-center justify-center mx-auto overflow-hidden">
+            <img src="/icon.svg" alt="AIUI" class="w-10 h-10 object-contain" />
           </div>
           <p class="text-sm" :class="isDark ? 'text-white/30' : 'text-gray-400'">
             Start a conversation

packages/app/src/components/chat/StreamingDots.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex justify-start animate-fade-up-fast">
-    <div class="glass-card rounded-2xl rounded-bl-md px-4 py-3">
+    <div class="path-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/content/ContentPanel.vue

@@ -2,7 +2,7 @@
   <Transition name="panel">
     <aside
       v-if="panelOpen"
-      class="glass-card overflow-hidden flex flex-col"
+      class="path-glass-card overflow-hidden flex flex-col"
       :class="isMobile
         ? 'fixed inset-0 z-30'
         : 'w-80 xl:w-96 shrink-0'"

packages/app/src/components/content/SongDetail.vue

@@ -18,10 +18,20 @@
       <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
 
       <button
-        class="absolute top-3 left-3 p-2 rounded-lg backdrop-blur-md transition-colors bg-black/30 text-white/80 hover:bg-black/50"
+        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-20 h-20 rounded-full flex items-center justify-center path-glass-icon hover:scale-105 active:scale-95 transition-all duration-200 z-10"
+        title="Play"
+        @click="onPlay"
+      >
+        <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M8 5v14l11-7L8 5z" />
+        </svg>
+      </button>
+
+      <button
+        class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
         @click="$emit('back')"
       >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
         </svg>
       </button>
@@ -49,13 +59,26 @@
         </span>
       </div>
 
+      <div v-if="wavlakeChartUrl" class="rounded-xl overflow-hidden border"
+           :class="isDark ? 'border-white/10' : 'border-black/8'">
+        <h4 class="text-xs font-semibold mb-2 px-3 pt-3"
+            :class="isDark ? 'text-white/50' : 'text-gray-500'">Discover on Wavlake</h4>
+        <iframe
+          :src="wavlakeChartUrl"
+          class="w-full h-[380px] border-0"
+          loading="lazy"
+          title="Wavlake chart"
+        />
+      </div>
+
       <div>
         <h4 class="text-xs font-semibold mb-2"
             :class="isDark ? 'text-white/50' : 'text-gray-500'">Listen on</h4>
         <div class="space-y-2">
           <a
-            v-if="youtubeSearchUrl"
-            :href="youtubeSearchUrl"
+            v-for="link in listenLinks"
+            :key="link.url"
+            :href="link.url"
             target="_blank"
             rel="noopener"
             class="flex items-center justify-between p-3 rounded-xl transition-colors"
@@ -64,12 +87,12 @@
               : 'bg-black/3 hover:bg-black/5'"
           >
             <div class="flex items-center gap-2.5">
-              <span class="text-sm">▶️</span>
+              <span class="text-sm">{{ link.icon }}</span>
               <div>
                 <p class="text-xs font-medium"
-                   :class="isDark ? 'text-white/80' : 'text-gray-800'">YouTube (free)</p>
-                <p class="text-[10px]"
-                   :class="isDark ? 'text-white/30' : 'text-gray-400'">Search for this song</p>
+                   :class="isDark ? 'text-white/80' : 'text-gray-800'">{{ link.name }}</p>
+                <p v-if="link.desc" class="text-[10px]"
+                   :class="isDark ? 'text-white/30' : 'text-gray-400'">{{ link.desc }}</p>
               </div>
             </div>
             <svg class="w-4 h-4" :class="isDark ? 'text-white/30' : 'text-gray-400'"
@@ -109,14 +132,47 @@ import { ref, computed, onMounted } from 'vue'
 import type { Song } from '@aiui/core/types/content'
 import { useTheme } from '@/composables/useTheme'
 import { generateSongCoverFallback, fetchMusicCover } from '@/composables/useImageFallback'
+import { usePlayer } from '@/composables/usePlayer'
+import { mapToWavlakeGenre } from '@/utils/wavlakeGenres'
 
 const props = defineProps<{ song: Song }>()
+const { play } = usePlayer()
+
+function onPlay() {
+  play(props.song)
+}
 defineEmits<{ back: [] }>()
 
 const { isDark } = useTheme()
 const coverFailed = ref(false)
 const fetchedCover = ref<string | null>(null)
 
+const q = computed(() =>
+  `${props.song.title} ${props.song.artist}`.trim().replace(/\s+/g, '+'),
+)
+
+const listenLinks = computed(() => {
+  const links: { name: string; url: string; icon: string; desc?: string }[] = [
+    { name: 'Internet Archive', url: `https://archive.org/search?query=${q.value}`, icon: '🏛️', desc: 'Free, open archive' },
+    { name: 'Bandcamp', url: `https://bandcamp.com/search?q=${q.value}`, icon: '📦', desc: 'Artist-first' },
+    { name: 'SoundCloud', url: `https://soundcloud.com/search?q=${q.value}`, icon: '☁️', desc: 'Indie & remixes' },
+    { name: 'Wavlake', url: `https://wavlake.com/`, icon: '⚡', desc: 'Lightning, indie discovery' },
+    { name: 'Odysee', url: `https://odysee.com/$/search?q=${q.value}`, icon: '🔗', desc: 'Decentralized' },
+    { name: 'Jamendo', url: `https://www.jamendo.com/search?q=${q.value}`, icon: '🎵', desc: 'Royalty-free' },
+  ]
+  return links
+})
+
+const wavlakeGenre = computed(() =>
+  mapToWavlakeGenre(props.song.genres ?? []),
+)
+
+const wavlakeChartUrl = computed(() => {
+  const genre = wavlakeGenre.value
+  if (!genre) return null
+  return `https://embed.wavlake.com/chart?days=21&limit=10&genre=${encodeURIComponent(genre)}`
+})
+
 const coverSrc = computed(() => {
   if (coverFailed.value) return null
   return props.song.coverUrl || fetchedCover.value
@@ -126,11 +182,6 @@ const fallbackCover = computed(() =>
   generateSongCoverFallback(props.song.title, props.song.artist)
 )
 
-const youtubeSearchUrl = computed(() => {
-  const q = `${props.song.title} ${props.song.artist}`.trim()
-  return q ? `https://www.youtube.com/results?search_query=${encodeURIComponent(q)}` : null
-})
-
 function formatDuration(sec: number): string {
   const m = Math.floor(sec / 60)
   const s = sec % 60
@@ -143,6 +194,12 @@ function sourceIcon(type: string): string {
     youtube: '▶️',
     'apple-music': '🍎',
     bandcamp: '📦',
+    soundcloud: '☁️',
+    wavlake: '⚡',
+    internet_archive: '🏛️',
+    jamendo: '🎵',
+    odysee: '🔗',
+    funkwhale: '🐋',
   }
   return icons[type] ?? '🎵'
 }

packages/app/src/components/content/SongGrid.vue

@@ -48,8 +48,19 @@
           class="group flex flex-col items-stretch text-left w-full"
           @click="$emit('selectSong', song)"
         >
-          <div class="cover-card flex-1 min-h-0">
+          <div class="cover-card flex-1 min-h-0 relative">
             <div class="aspect-square relative w-full overflow-hidden rounded-[10px]">
+              <button
+                class="absolute inset-0 flex items-center justify-center z-10 backdrop-blur-sm bg-black/30 opacity-0 group-hover:opacity-100 transition-all duration-200"
+                title="Play"
+                @click.stop="onPlayClick(song)"
+              >
+                <span class="w-16 h-16 rounded-full flex items-center justify-center path-glass-icon">
+                  <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M8 5v14l11-7L8 5z" />
+                  </svg>
+                </span>
+              </button>
               <img
                 v-if="coverSrc(song)"
                 :src="coverSrc(song)!"
@@ -103,6 +114,7 @@
 import { ref, computed, reactive, onMounted, watch } from 'vue'
 import type { Song } from '@aiui/core/types/content'
 import { useTheme } from '@/composables/useTheme'
+import { usePlayer } from '@/composables/usePlayer'
 import { generateSongCoverFallback, fetchMusicCover } from '@/composables/useImageFallback'
 
 const props = withDefaults(defineProps<{
@@ -115,6 +127,7 @@ const props = withDefaults(defineProps<{
 defineEmits<{ selectSong: [song: Song] }>()
 
 const { isDark } = useTheme()
+const { play } = usePlayer()
 const search = ref('')
 const activeGenre = ref<string | null>(null)
 const failedCovers = ref<Set<string>>(new Set())
@@ -135,6 +148,10 @@ function onCoverError(song: Song) {
   failedCovers.value = new Set(failedCovers.value)
 }
 
+function onPlayClick(song: Song) {
+  play(song)
+}
+
 function fetchCoversFor(songs: Song[]) {
   for (const song of songs) {
     if (song.coverUrl || fetchedCovers.has(song.id)) continue

packages/app/src/components/player/PlayerBar.vue

@@ -0,0 +1,164 @@
+<template>
+  <Transition name="player-slide">
+    <div
+      v-if="hasTrack"
+      class="fixed bottom-0 left-0 right-0 z-50 flex items-center gap-4 px-4 py-3 path-glass-card rounded-none border-t-0 border-x-0 shadow-2xl"
+    >
+      <!-- Plyr container: YouTube requires min 200x200px. Kept off-screen but sized. -->
+      <div
+        ref="plyrContainerRef"
+        class="absolute left-[-9999px] w-[320px] h-[180px] overflow-hidden"
+        aria-hidden="true"
+      />
+
+      <div class="flex items-center gap-3 min-w-0 flex-1 max-w-[280px]">
+        <div
+          class="w-12 h-12 rounded-lg overflow-hidden shrink-0 flex items-center justify-center path-glass-icon"
+        >
+          <img
+            v-if="coverUrl"
+            :src="coverUrl"
+            :alt="currentSong!.title"
+            class="w-full h-full object-cover"
+          />
+          <span v-else class="text-lg">🎵</span>
+        </div>
+        <div class="min-w-0">
+          <p class="text-sm font-semibold truncate"
+             :class="isDark ? 'text-white/90' : 'text-gray-900'">
+            {{ currentSong!.title }}
+          </p>
+          <p class="text-xs truncate" :class="isDark ? 'text-white/50' : 'text-gray-500'">
+            {{ currentSong!.artist }}
+          </p>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-1 flex-1 max-w-xl mx-4">
+        <div class="flex items-center gap-2">
+          <button
+            class="w-12 h-12 rounded-full flex items-center justify-center glass-button shrink-0 transition-all hover:scale-105 active:scale-95"
+            @click="toggle"
+          >
+            <svg v-if="isLoading" class="w-5 h-5 animate-spin" :class="isDark ? 'text-white/90' : 'text-gray-800'" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            <svg v-else-if="isPlaying" class="w-5 h-5" :class="isDark ? 'text-white/90' : 'text-gray-800'" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+            </svg>
+            <svg v-else class="w-5 h-5" :class="isDark ? 'text-white/90' : 'text-gray-800'" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M8 5v14l11-7L8 5z" />
+            </svg>
+          </button>
+          <span class="text-[10px] font-mono tabular-nums"
+                :class="isDark ? 'text-white/40' : 'text-gray-400'">
+            {{ formatTime(currentTime) }}
+          </span>
+          <div
+            class="flex-1 h-1.5 rounded-full cursor-pointer group"
+            :class="isDark ? 'bg-white/15' : 'bg-black/10'"
+            @click="onScrubberClick"
+          >
+            <div
+              class="h-full rounded-full transition-all duration-150 group-hover:h-2 bg-accent"
+              :style="{ width: `${progress}%` }"
+            />
+          </div>
+          <span class="text-[10px] font-mono tabular-nums"
+                :class="isDark ? 'text-white/40' : 'text-gray-400'">
+            {{ formatTime(duration) }}
+          </span>
+        </div>
+        <p v-if="error" class="text-[10px] text-red-400">{{ error }}</p>
+      </div>
+
+      <button
+        class="w-9 h-9 rounded-xl flex items-center justify-center path-glass-button path-glass-button-sm shrink-0 transition-all hover:scale-105"
+        @click="clear"
+        title="Close player"
+      >
+        <svg class="w-4 h-4" :class="isDark ? 'text-white/70' : 'text-gray-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { useTheme } from '@/composables/useTheme'
+import { usePlayer } from '@/composables/usePlayer'
+import { generateSongCoverFallback, fetchMusicCover } from '@/composables/useImageFallback'
+
+const { isDark } = useTheme()
+const {
+  currentSong,
+  hasTrack,
+  isPlaying,
+  isLoading,
+  error,
+  currentTime,
+  duration,
+  progress,
+  toggle,
+  seek,
+  clear,
+  setContainer,
+} = usePlayer()
+
+const plyrContainerRef = ref<HTMLDivElement | null>(null)
+const fetchedCover = ref<string | null>(null)
+
+const coverUrl = computed(() => {
+  const song = currentSong.value
+  if (!song) return null
+  return song.coverUrl || fetchedCover.value
+})
+
+function formatTime(sec: number): string {
+  const m = Math.floor(sec / 60)
+  const s = Math.floor(sec % 60)
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+function onScrubberClick(e: MouseEvent) {
+  const el = e.currentTarget as HTMLElement
+  const rect = el.getBoundingClientRect()
+  const percent = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100))
+  seek(percent)
+}
+
+onMounted(async () => {
+  await nextTick()
+  setContainer(plyrContainerRef.value)
+})
+
+watch(
+  () => plyrContainerRef.value,
+  (el) => setContainer(el),
+  { flush: 'post' },
+)
+
+watch(currentSong, (song) => {
+  fetchedCover.value = null
+  if (song && !song.coverUrl) {
+    fetchMusicCover(song.title, song.artist).then((url) => {
+      if (url) fetchedCover.value = url
+    })
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.player-slide-enter-active,
+.player-slide-leave-active {
+  transition: transform 0.25s ease, opacity 0.2s ease;
+}
+.player-slide-enter-from,
+.player-slide-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+</style>

packages/app/src/components/widget/WidgetFab.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="fixed z-50 w-14 h-14 rounded-full glass-button flex items-center justify-center
+    class="fixed z-50 w-14 h-14 rounded-full path-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)' }"

packages/app/src/components/widget/WidgetModal.vue

@@ -7,7 +7,7 @@
         :class="[positionClasses, currentTheme]"
       >
         <div
-          class="w-[380px] h-[600px] md:w-[420px] md:h-[640px] glass-card overflow-hidden"
+          class="w-[380px] h-[600px] md:w-[420px] md:h-[640px] path-glass-card overflow-hidden"
           :style="isDark
             ? 'box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(247, 147, 26, 0.06)'
             : 'box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 40px rgba(247, 147, 26, 0.04)'"