/* Dark Space Theme with #00ffa3 Accents */
.gglobal-player {
    position: fixed;
    bottom: 75px;
    left: var(--space-md, 1rem);
    right: var(--space-md, 1rem);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
    backdrop-filter: blur(var(--glass-blur, 8px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 8px));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
    border-radius: var(--radius-lg, 1.25rem);
    box-shadow: var(--glass-elevation, 0 10px 40px rgba(0,0,0,0.6));
    z-index: 1000;
    transition: transform var(--transition, 0.28s ease), opacity 0.2s ease;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: var(--text-light, #e6eef0); /* Default text color for the player */
    transform: translateY(0);
    padding: var(--space-xs, 0.5rem);
}

.gglobal-player.minimized {
    /* This transform is still useful for the minimize/maximize functionality */
    /* On desktop, it might just show a small bar */
    transform: translateY(calc(100% - 60px)); /* Adjust 60px based on desired minimized height */
}

.gplayer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 0.75rem);
}

.gplayer-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.75rem);
}

.gbeat-info {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 0.5rem);
}

.gplayer-cover {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm, 0.375rem);
    object-fit: cover;
}

.gplayer-cover-placeholder {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm, 0.375rem);
    background: linear-gradient(180deg, rgba(15,52,96,0.9), rgba(8,28,60,0.9));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #9aa3aa); /* Muted color for placeholder icon */
    font-size: 22px;
}

.gbeat-details {
    display: flex;
    flex-direction: column;
    /* Allow text to wrap on smaller spaces */
    min-width: 0; /* Needed for text-overflow to work in flex items */
    flex-grow: 1; /* Allow details to take available space */
    margin-right: var(--space-sm, 0.75rem);
}

.gbeat-title {
    font-weight: 700;
    color: var(--accent-color, #00ffa3); /* Accent color for title */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
}

.gproducer-name {
    font-size: 0.875rem;
    color: #cfcfcf; /* Lighter grey for producer name */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gplayer-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.75rem);
    flex-grow: 1;
    justify-content: center;
}

.gplay-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark, #00cc84));
    color: #071523; /* Dark text on accent button */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.12s var(--transition, ease), box-shadow 0.12s ease;
    border: none;
    font-size: 1.15em;
    flex-shrink: 0; /* Prevent shrinking */
    box-shadow: 0 12px 40px color-mix(in srgb, var(--accent-color) 12%, black 88%);
}

.gplay-button:hover {
    transform: scale(1.06);
    box-shadow: 0 18px 50px color-mix(in srgb, var(--accent-color) 16%, black 84%);
}

.gprogress-container {
    flex: 1;
    margin: 0 1rem;
    min-width: 100px; /* Ensure a minimum width */
}

.gprogress-bar {
    height: 8px;
    background: linear-gradient(90deg, rgba(83,52,131,0.08), rgba(10,10,26,0.04));
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.gprogress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-dark, #00cc84));
    border-radius: 8px;
    width: 0;
    transition: width 0.12s linear;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color) 8%, black 92%);
}

.gtime-display {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-muted, #9aa3aa); /* Lighter grey for time display */
    margin-top: var(--space-xxs, 0.25rem);
}

.gplayer-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gvolume-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gvolume-button {
    color: var(--text-light, #e6eef0); /* Light grey for volume button */
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    font-size: 1.1em;
    padding: var(--space-xxs, 0.25rem);
}

.gvolume-button:hover {
    color: var(--accent-color);
}

.gvolume-slider {
    width: 90px;
    height: 6px;
    background: linear-gradient(90deg, rgba(83,52,131,0.12), rgba(10,10,26,0.06));
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.gvolume-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ffa3, #00cc84);
    border-radius: 6px;
    width: 100%;
}

.gspeed-container {
    position: relative;
}

.gspeed-button {
    color: #e0e0e0; /* Light grey for speed button */
    cursor: pointer;
    transition: color 0.2s;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: none;
    border: none;
    font-size: 1em;
}

.gspeed-button:hover {
    color: #00ffa3; /* Accent color on hover */
    background: #0f3460; /* Darker background on hover */
}

.gspeed-options {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: #16213e; /* Dark background for options */
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    z-index: 10;
    display: none;
}

.gspeed-options button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    color: #e0e0e0; /* Light grey text */
    transition: all 0.2s;
    border-radius: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
}

.gspeed-options button:hover {
    background: #0f3460; /* Darker background on hover */
    color: #00ffa3; /* Accent color on hover */
}

.gminimize-button {
    color: #e0e0e0; /* Light grey for minimize button */
    cursor: pointer;
    transition: color 0.2s;
    padding: 0.5rem;
    background: none;
    border: none;
    font-size: 1.2em;
}

.gminimize-button:hover {
    color: #00ffa3; /* Accent color on hover */
}

.hidden {
    display: none !important;
}

/* Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
    .gglobal-player {
        /* Base styles for mobile player */
        height: auto; /* Height is determined by content when minimized */
        /* Transform for minimized state is handled by the .minimized class */
        transition: transform 0.3s ease;
    }

    /* Mobile Minimized State */
    .gglobal-player.minimized {
        /* Ensure transform correctly hides the full player but keeps the bar visible */
        transform: translateY(calc(100% - 60px));
    }

    /* Mobile Maximized State - modal covering ~90% of the viewport */
    .gglobal-player.maximized {
        position: fixed;
        top: 5vh;
        left: 5vw;
        right: 5vw;
        bottom: 5vh;
        height: auto;
        max-height: 90svh;
        transform: translateY(0);
        /* Glassy modal surface */
        background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
        backdrop-filter: blur(calc(var(--glass-blur, 8px) * 1.25));
        -webkit-backdrop-filter: blur(calc(var(--glass-blur, 8px) * 1.25));
        color: var(--text-light, #e6eef0);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        padding: calc(var(--space-sm, 0.75rem));
        border-radius: var(--radius-lg, 1.25rem);
        box-shadow: 0 30px 80px rgba(0,0,0,0.75);
        border: 1px solid rgba(255,255,255,0.04);
        overflow: hidden;
    }

    .gglobal-player.maximized .gplayer-content {
        flex-direction: column;
        height: 100%;
        width: 100%;
        max-width: none;
        padding: 0;
        box-sizing: border-box;
        justify-content: flex-start;
        gap: var(--space-md, 1rem);
        overflow: auto; /* allow scrolling if content exceeds modal */
        -webkit-overflow-scrolling: touch;
    }

    .gglobal-player.maximized .gplayer-info {
        flex-direction: column;
        flex: 1; /* Allows info to take up available space */
        justify-content: center;
        margin-bottom: 20px;
        gap: 20px;
    }

    .gglobal-player.maximized .gbeat-info {
        flex-direction: column;
        gap: 15px;
    }

    .gglobal-player.maximized .gplayer-cover,
    .gglobal-player.maximized .gplayer-cover-placeholder {
        width: 250px;
        height: 250px;
    }

    .gglobal-player.maximized .gbeat-details {
        align-items: center;
    }

    .gglobal-player.maximized .gbeat-title {
        font-size: 1.5em;
        white-space: normal; /* Allow title to wrap in fullscreen */
        text-align: center;
        color: #00ffa3; /* Accent color for title in fullscreen */
    }

    .gglobal-player.maximized .gproducer-name {
        font-size: 1em;
        white-space: normal; /* Allow producer name to wrap in fullscreen */
        text-align: center;
        color: #cfcfcf; /* Lighter grey */
    }

    .gglobal-player.maximized .gplayer-controls {
        flex-direction: column;
        flex-grow: 0;
        width: 100%;
        margin-bottom: 20px;
    }

     .gglobal-player.maximized .gplay-button {
         width: 60px;
         height: 60px;
         font-size: 2em;
         background: #00ffa3; /* Accent color */
         color: #16213e; /* Dark text */
     }

    .gglobal-player.maximized .gprogress-container {
        width: 100%;
        margin: 20px 0;
    }

    .gglobal-player.maximized .gtime-display {
        font-size: 1em;
        margin-top: 5px;
        color: #cfcfcf; /* Lighter grey */
    }

    .gglobal-player.maximized .gplayer-actions {
        flex-direction: column;
        gap: 20px;
    }

    .gglobal-player.maximized .gvolume-container {
        width: 100%;
        justify-content: center;
    }

    .gglobal-player.maximized .gvolume-slider {
        width: 150px;
        background: #533483; /* Muted background */
    }
     .gglobal-player.maximized .gvolume-fill {
         background: #00ffa3; /* Accent color */
     }


    .gglobal-player.maximized .gspeed-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

     .gglobal-player.maximized .gspeed-options {
         bottom: auto;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         right: auto;
         background: #16213e; /* Dark background */
     }
     .gglobal-player.maximized .gspeed-options button {
         color: #e0e0e0; /* Light text */
     }
     .gglobal-player.maximized .gspeed-options button:hover {
         background: #0f3460; /* Darker background */
         color: #00ffa3; /* Accent color */
     }


    .gglobal-player.maximized .gminimize-button {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.5em;
        color: #e0e0e0; /* Light grey */
    }

    /* Styles to hide elements in the mobile minimized state */
    .gglobal-player.minimized .gplayer-actions {
        display: none;
    }

    /* Adjust content layout for mobile minimized */
    .gglobal-player.minimized .gplayer-content {
        padding: 0.5rem 1rem; /* Reduced padding for minimized bar */
        justify-content: flex-start; /* Align items to the start */
        gap: 1rem; /* Space between visible elements */
    }

    .gglobal-player.minimized .gplayer-info {
        flex-direction: row; /* Ensure info is horizontal */
        gap: 0.75rem; /* Reduced gap */
        flex-grow: 1; /* Allow info to take available space */
        overflow: hidden; /* Hide overflowing text */
    }

     .gglobal-player.minimized .gbeat-info {
         flex-direction: row; /* Keep beat info horizontal */
         gap: 0.75rem;
     }

    .gglobal-player.minimized .gplayer-cover,
    .gglobal-player.minimized .gplayer-cover-placeholder {
        width: 40px; /* Smaller artwork in minimized state */
        height: 40px;
    }

    .gglobal-player.minimized .gplay-button {
        width: 40px; /* Smaller play button in minimized state */
        height: 40px;
        font-size: 1em; /* Smaller icon */
        margin-left: auto; /* Push play button to the right */
    }

     /* Ensure the minimize button is visible in both states on mobile */
     .gglobal-player .gminimize-button {
         display: block; /* Ensure it's displayed */
     }
}

/* Ensure minimize button is hidden on larger screens */
@media (min-width: 769px) {
    .gglobal-player .gminimize-button {
        display: none;
    }
}