@if (_isMinimized)
{
    <div class="minimized-dock d-flex align-center justify-center"
         @onclick="@ToggleMinimized">
        <MudIconButton Icon="@GetPlayIcon()"
                       Color="Color.Primary" 
                       Size="Size.Large"
                       Class="minimized-button"
                       OnClick="@ToggleMinimized"/>
    </div>
}
else 
{
    <div class="player-outer-container d-flex flex-column">
        <MudContainer MaxWidth="MaxWidth.Large" Class="player-inner-container">
            <div class="player-backdrop pa-3">
            
                @if (_isDesktop)
                {
                    @* Desktop Layout *@
                    <div class="d-flex align-center gap-3">
                        <div class="controls-left d-flex flex-column align-center gap-2">
                            <div class="d-flex align-center gap-1">
                                <PlayerControls IsPlaying="IsPlaying"
                                                IsLoaded="IsLoaded"
                                                TogglePlayPause="@TogglePlayPause"
                                                Stop="@Stop"/>
                                @if (IsLoading && !IsStreaming)
                                {
                                    <MudProgressCircular Color="Color.Tertiary"
                                                         Size="Size.Small"
                                                         Max="1D"
                                                         Value="@LoadProgress"
                                                         Indeterminate="@(LoadProgress == 0)"/>
                                }
                            </div>
                            <TimestampLabel CurrentTime="DisplayTime" Duration="Duration"/>
                        </div>

                        <div class="d-flex flex-column flex-grow-1">
                            <div class="seekbar-flex mx-3"
                                 @onpointerdown="OnSeekStart"
                                 @onpointerup="@(() => OnSeekEnd(_seekPosition))"
                                 @onpointerleave="@(() => { if (_isSeeking) OnSeekEnd(_seekPosition); })">
                                <MudSlider T="double"
                                           Min="0"
                                           Max="@(Duration ?? 0D)"
                                           Step="0.1"
                                           Value="@DisplayTime"
                                           ValueChanged="@OnSeekChange"
                                           Immediate="true"
                                           Disabled="@(!CanSeek)"/>
                            </div>
                            <SpectrumVisualizer />
                        </div>

                        <div class="volume-right">
                            <VolumeControls Volume="@Volume" VolumeChanged="@OnVolumeChange"/>
                        </div>
                    </div>
                }
                else
                {
                    @* Mobile Layout *@
                    <div>
                        <div class="d-flex align-center justify-space-between mb-3">
                            <div class="d-flex align-center gap-2">
                                <PlayerControls IsPlaying="IsPlaying"
                                                IsLoaded="IsLoaded"
                                                TogglePlayPause="@TogglePlayPause"
                                                Stop="@Stop"/>
                                @if (IsLoading && !IsStreaming)
                                {
                                    <MudProgressCircular Color="Color.Tertiary"
                                                         Size="Size.Small"
                                                         Max="1D"
                                                         Value="@LoadProgress"
                                                         Indeterminate="@(LoadProgress == 0)"/>
                                }
                            </div>
                            <TimestampLabel CurrentTime="DisplayTime" Duration="Duration"/>
                            <VolumeControls Volume="@Volume" VolumeChanged="@OnVolumeChange"/>
                        </div>

                        <div class="d-flex flex-column flex-grow-1">
                            <div @onpointerdown="OnSeekStart"
                                @onpointerup="@(() => OnSeekEnd(_seekPosition))"
                                @onpointerleave="@(() => { if (_isSeeking) OnSeekEnd(_seekPosition); })">
                                <MudSlider T="double"
                                        Min="0"
                                        Max="@(Duration ?? 0D)"
                                        Step="0.1"
                                        Value="@DisplayTime"
                                        ValueChanged="@OnSeekChange"
                                        Immediate="true"
                                        Disabled="@(!CanSeek)"/>
                            </div>
                            <SpectrumVisualizer />
                        </div>
                    </div>
                }

                @* Control Buttons - positioned absolutely like original *@
                <div class="player-controls d-flex align-center justify-center gap-1">
                    <MudIconButton Icon="@Icons.Material.Filled.Minimize"
                                   Color="Color.Secondary"
                                   Size="Size.Small"
                                   OnClick="@ToggleMinimized"/>
                    <MudIconButton Icon="@Icons.Material.Filled.Close"
                                   Color="Color.Secondary"
                                   Size="Size.Small"
                                   OnClick="@Close"/>
                </div>
            </div>
        </MudContainer>
            
        @if (!string.IsNullOrEmpty(ErrorMessage))
        {
            <MudAlert Severity="Severity.Error" 
                      ShowCloseIcon="true" 
                      CloseIconClicked="ClearError" 
                      Class="ma-2">
                @ErrorMessage
            </MudAlert>
        }
    </div>
    
    @* Spacer to prevent content overlap *@
    <div class="player-spacer"></div>
}