Migrate desktop AudioPlayerBar to MudBlazor theme surface

DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css

@@ -1,7 +1,8 @@
-/* Preserve key visual styles while simplifying layout */
+/* Geometry, positioning, and animation only.
+   Colour, surface, and elevation come from MudBlazor theme props. */
 
-/* Player outer container - fixed positioning */
-.player-outer-container {
+/* Fixed dock to the viewport bottom */
+.player-dock {
     position: fixed;
     bottom: 0;
     left: 0;
@@ -11,115 +12,39 @@
     margin: 0;
 }
 
-/* Player inner container */
 .player-inner-container {
     padding: 1rem;
     padding-bottom: 1.5rem;
 }
 
-/* Custom backdrop blur container */
-.player-backdrop {
+/* The visible surface is a MudPaper; scoped CSS only sets geometry + a hairline accent */
+.player-surface {
     position: relative;
-    background: var(--deepdrft-theme-background-gray);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    border-radius: 1rem;
-    border: 2px solid var(--deepdrft-theme-primary);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    color: inherit;
-    transition: all 0.3s ease;
+    border-radius: 16px;
+    border: 1px solid var(--mud-palette-primary);
     overflow: hidden;
     margin-bottom: 1rem;
 }
 
-/* Charleston (Light Mode) - Iron frame effect */
-:global(.deepdrft-theme-light) .player-backdrop {
-    background: color-mix(in srgb, var(--charleston-cream) 92%, transparent);
-    border: 2px solid var(--charleston-iron);
-    box-shadow: 0 4px 20px color-mix(in srgb, var(--charleston-iron) 20%, transparent),
-                inset 0 0 0 1px color-mix(in srgb, var(--charleston-iron) 5%, transparent);
-    color: var(--charleston-iron);
-}
-
-/* Lowcountry (Dark Mode) - Warm sunset glow effect */
-:global(.deepdrft-theme-dark) .player-backdrop {
-    background: color-mix(in srgb, var(--lowcountry-night) 88%, transparent);
-    border: 1px solid color-mix(in srgb, var(--lowcountry-coral) 50%, transparent);
-    box-shadow: 0 0 20px color-mix(in srgb, var(--lowcountry-coral) 25%, transparent),
-                0 0 40px color-mix(in srgb, var(--lowcountry-twilight) 15%, transparent),
-                0 4px 20px rgba(0, 0, 0, 0.4);
-    color: var(--lowcountry-moonlight);
-}
-
-/* Control buttons positioning */
-.player-controls {
+/* Minimize / close cluster, pinned top-right of the surface */
+.player-surface ::deep .player-window-controls {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
 }
 
-/* Minimized floating dock with gradient */
+/* Minimized floating dock — positioning + hover only; colour from MudFab */
 .minimized-dock {
     position: fixed;
     bottom: 60px;
     right: 60px;
     z-index: 1300;
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    cursor: pointer;
-    background: linear-gradient(135deg,
-        var(--deepdrft-theme-primary) 0%,
-        var(--deepdrft-theme-secondary) 50%,
-        var(--deepdrft-theme-tertiary) 100%
-    );
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    border: 2px solid var(--deepdrft-theme-secondary);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    transition: all 0.3s ease;
-}
-
-/* Charleston (Light Mode) - Iron dock */
-:global(.deepdrft-theme-light) .minimized-dock {
-    background: linear-gradient(135deg, var(--charleston-iron) 0%, var(--charleston-rose) 50%, var(--charleston-gold) 100%);
-    border: 2px solid var(--charleston-iron);
-    box-shadow: 0 4px 15px color-mix(in srgb, var(--charleston-iron) 40%, transparent);
-}
-
-/* Lowcountry (Dark Mode) - Warm sunset dock */
-:global(.deepdrft-theme-dark) .minimized-dock {
-    background: linear-gradient(135deg, var(--lowcountry-coral) 0%, var(--lowcountry-twilight) 50%, var(--lowcountry-gold) 100%);
-    border: 2px solid color-mix(in srgb, var(--lowcountry-coral) 60%, transparent);
-    box-shadow: 0 0 20px color-mix(in srgb, var(--lowcountry-coral) 40%, transparent),
-                0 0 40px color-mix(in srgb, var(--lowcountry-twilight) 20%, transparent);
 }
 
 .minimized-dock:hover {
     transform: scale(1.1);
 }
 
-:global(.deepdrft-theme-light) .minimized-dock:hover {
-    box-shadow: 0 6px 20px color-mix(in srgb, var(--charleston-iron) 50%, transparent);
-}
-
-:global(.deepdrft-theme-dark) .minimized-dock:hover {
-    box-shadow: 0 0 30px color-mix(in srgb, var(--lowcountry-coral) 50%, transparent),
-                0 0 50px color-mix(in srgb, var(--lowcountry-twilight) 30%, transparent);
-}
-
-/* Minimized button styles */
-.minimized-button {
-    border-radius: 50% !important;
-    background: transparent !important;
-    color: white !important;
-    transition: all 0.3s ease !important;
-    box-shadow: none !important;
-    border: none !important;
-    width: 48px !important;
-    height: 48px !important;
-}
-
 /* Spacer to prevent content overlap */
 .player-spacer {
     height: 140px;
@@ -127,50 +52,22 @@
     flex-shrink: 0;
 }
 
-/* Essential layout adjustments only */
-.controls-left {
-    min-width: 200px;
-}
-
-.seekbar-visualizer-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.seekbar-flex {
-    flex: 1;
-}
-
-.volume-right {
-    /*min-width: 140px;*/
-}
-
-/* Mobile responsive adjustments */
 @media (max-width: 768px) {
     .minimized-dock {
         bottom: 15px;
         right: 15px;
-        width: 56px;
-        height: 56px;
     }
-    
-    .minimized-button {
-        width: 44px !important;
-        height: 44px !important;
-    }
-    
+
     .player-inner-container {
         padding: 0.75rem;
         padding-bottom: 1.25rem;
     }
-    
-    .player-backdrop {
-        border-radius: 1rem;
+
+    .player-surface {
         margin-bottom: 1.25rem;
     }
-    
+
     .player-spacer {
         height: 160px;
     }
-}
+}