diff --git a/components/MusicControls.client.vue b/components/MusicControls.client.vue
index 000a77d..5e88f67 100644
--- a/components/MusicControls.client.vue
+++ b/components/MusicControls.client.vue
@@ -238,7 +238,7 @@ onMounted(() => {
 <style scoped>
 .music-controls {
   position: fixed;
-  bottom: 80px;
+  bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   backdrop-filter: blur(40px);
@@ -252,7 +252,11 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: min-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+              max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+              border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+              bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .music-controls.collapsed {
@@ -260,7 +264,7 @@ onMounted(() => {
   max-width: 450px;
   padding: 12px 16px;
   border-radius: 16px;
-  bottom: -10px;
+  bottom: 2px;
 }
 
 /* Collapsed State Styles */
@@ -307,9 +311,7 @@ onMounted(() => {
   flex-shrink: 0;
 }
 
-.music-controls {
-  position: relative;
-}
+/* .music-controls is fixed earlier; avoid overriding with relative */
 
 .collapse-btn-compact {
   position: absolute;
@@ -568,6 +570,12 @@ onMounted(() => {
   .music-controls.collapsed {
     padding: 10px 12px;
     border-radius: 12px;
+    bottom: 2px;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    width: calc(100% - 40px);
+    max-width: 450px;
   }
   
   .collapsed-track-name {
@@ -664,4 +672,4 @@ onMounted(() => {
     gap: 4px;
   }
 }
-</style>
\ No newline at end of file
+</style>