feature: Mobile Menu & Style Polish

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

@@ -46,8 +46,8 @@
 /* Minimized floating dock — positioning + hover only; colour from MudFab */
 .minimized-dock {
     position: fixed;
-    bottom: 60px;
-    right: 60px;
+    bottom: 30px;
+    right: 30px;
     z-index: 1300;
 }
 
@@ -56,7 +56,7 @@
 }
 
 @media (max-width: 768px) {
-    ::deep .minimized-dock {
+    .minimized-dock {
         bottom: 15px;
         right: 15px;
     }

DeepDrftPublic.Client/Controls/PlayStateIcon.razor

@@ -1,21 +1,22 @@
 @namespace DeepDrftPublic.Client.Controls
-
-@if (!RendererInfo.IsInteractive)
-{
-    @* Interactive runtime (WASM, or Server on first visit) not attached yet — the prerendered
-       button has no wired click handler, so clicks would vanish. Show a spinner in its place
-       until the component hydrates, at which point it re-renders into the live button. *@
-    <MudProgressCircular Color="Color"
-                         Size="Size"
-                         Indeterminate="true"
-                         Class="mud-icon-button" />
-}
-else
-{
-    <MudIconButton Icon="@Icon"
-                   Color="Color"
-                   Size="Size"
-                   Disabled="@Disabled"
-                   OnClick="@OnToggle"
-                   Class="xxxx"/>
-}
+<div class="icon-container">
+    @if (!RendererInfo.IsInteractive)
+    {
+        @* Interactive runtime (WASM, or Server on first visit) not attached yet — the prerendered
+           button has no wired click handler, so clicks would vanish. Show a spinner in its place
+           until the component hydrates, at which point it re-renders into the live button. *@
+        <MudProgressCircular Color="Color"
+                             Size="Size"
+                             Indeterminate="true"
+                             Class="mud-icon-button" />
+    }
+    else
+    {
+        
+        <MudIconButton Icon="@Icon"
+                       Color="Color"
+                       Size="Size"
+                       Disabled="@Disabled"
+                       OnClick="@OnToggle"/>
+    }
+</div>

DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css

@@ -1,7 +1,14 @@
-::deep .xxxx {
-    background-color: var(--deepdrft-muted)
+.icon-container {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    background-color: var(--deepdrft-soft);
+    border-radius: 50%;
+    height: 60px;
+    width: 60px;
+    transition: background-color 1s ease-in-out;
 }
 
-::deep .xxxx:hover {
-    background-color: color-mix(var(--deepdrft-muted), var(--deepdrft-navy));
+.icon-container:hover {
+    background-color: color-mix(var(--deepdrft-soft), var(--deepdrft-navy-mid) 25%);
 }