/* Mizuki Music Player Styles for WordPress */

:root {
    --hue: 60;
    --radius-large: 1rem;
    --primary: oklch(0.70 0.14 var(--hue));
    --card-bg: white;
    --card-bg-transparent: rgba(255, 255, 255, 0.8);
    --btn-content: oklch(0.55 0.12 var(--hue));
    --btn-regular-bg: oklch(0.95 0.025 var(--hue));
    --btn-regular-bg-hover: oklch(0.9 0.05 var(--hue));
    --btn-regular-bg-active: oklch(0.85 0.08 var(--hue));
    --btn-plain-bg-hover: oklch(0.95 0.025 var(--hue));
    --btn-plain-bg-active: oklch(0.98 0.01 var(--hue));
    --float-panel-bg: white;
    --line-divider: rgba(0, 0, 0, 0.08);
    --content-meta: rgba(0, 0, 0, 0.7);
    --page-bg: oklch(0.95 0.01 var(--hue));
}

/* Dark mode variables if theme supports it */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: oklch(0.75 0.14 var(--hue));
        --card-bg: oklch(0.23 0.015 var(--hue));
        --card-bg-transparent: rgba(23, 23, 23, 0.8);
        --btn-content: oklch(0.75 0.1 var(--hue));
        --btn-regular-bg: oklch(0.33 0.035 var(--hue));
        --btn-regular-bg-hover: oklch(0.38 0.04 var(--hue));
        --btn-regular-bg-active: oklch(0.43 0.045 var(--hue));
        --btn-plain-bg-hover: oklch(0.30 0.035 var(--hue));
        --btn-plain-bg-active: oklch(0.27 0.025 var(--hue));
        --float-panel-bg: oklch(0.19 0.015 var(--hue));
        --line-divider: rgba(255, 255, 255, 0.08);
        --content-meta: rgba(255, 255, 255, 0.6);
        --page-bg: oklch(0.16 0.014 var(--hue));
    }
}

/* Common Classes */
.music-player .card-base {
    border-radius: var(--radius-large);
    overflow: hidden;
    background: var(--card-bg);
    transition: colors 150ms;
}

.music-player .btn-plain {
    transition: all 150ms;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.75);
}
@media (prefers-color-scheme: dark) {
    .music-player .btn-plain {
        color: rgba(255, 255, 255, 0.75);
    }
}
.music-player .btn-plain:hover {
    color: var(--primary);
    background: var(--btn-plain-bg-hover);
}
.music-player .btn-plain:active {
    background: var(--btn-plain-bg-active);
}

.music-player .btn-regular {
    transition: all 150ms;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-regular-bg);
    border: none;
    cursor: pointer;
    color: var(--btn-content);
}
.music-player .btn-regular:hover {
    background: var(--btn-regular-bg-hover);
}
.music-player .btn-regular:active {
    background: var(--btn-regular-bg-active);
}

.music-player .text-90 { color: rgba(0, 0, 0, 0.9); }
.music-player .text-75 { color: rgba(0, 0, 0, 0.75); }
.music-player .text-50 { color: rgba(0, 0, 0, 0.5); }
.music-player .text-30 { color: rgba(0, 0, 0, 0.3); }

@media (prefers-color-scheme: dark) {
    .music-player .text-90 { color: rgba(255, 255, 255, 0.9); }
    .music-player .text-75 { color: rgba(255, 255, 255, 0.75); }
    .music-player .text-50 { color: rgba(255, 255, 255, 0.5); }
    .music-player .text-30 { color: rgba(255, 255, 255, 0.3); }
}

/* Component Styles */
.music-player {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    max-width: 20rem;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.orb-player {
    width: 3rem;
    height: 3rem;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.orb-player:hover { transform: scale(1.1); }
.orb-player:active { transform: scale(0.95); }

.mini-player {
    width: 17.5rem;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.expanded-player {
    width: 20rem;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 20;
}

.mini-player.opacity-0, .expanded-player.opacity-0 {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    pointer-events: none;
}

.cover-container {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.cover-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: spin-continuous 3s linear infinite;
    animation-play-state: paused;
}
.cover-container img.spinning {
    animation-play-state: running;
}

@keyframes spin-continuous {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.playlist-panel {
    background: var(--float-panel-bg);
    border-radius: var(--radius-large);
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    width: 20rem;
    max-height: 24rem;
    overflow: hidden;
    z-index: 10000;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.playlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--line-divider);
}

.playlist-content {
    overflow-y: auto;
    flex: 1;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: background 150ms;
}
.playlist-item:hover { background: var(--btn-plain-bg-hover); }
.playlist-item.active { background: var(--btn-plain-bg-active); color: var(--primary); }

.progress-bar, .volume-bar {
    height: 0.5rem;
    background: var(--btn-regular-bg);
    border-radius: 9999px;
    cursor: pointer;
    position: relative;
}
.progress-inner, .volume-inner {
    height: 100%;
    background: var(--primary);
    border-radius: 9999px;
    transition: width 100ms;
}

/* Utilities */
.hidden { 
    display: none !important; 
}
.hidden-fade {
    opacity: 0 !important;
    transform: scale(0) !important;
    pointer-events: none !important;
}
.opacity-0 { opacity: 0; pointer-events: none; }
.scale-95 { transform: scale(0.95); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Transitions */
.animate-slide-up {
    animation: slide-up 0.3s ease-out;
}
@keyframes slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .music-player {
        max-width: 280px;
        bottom: 0.5rem;
        right: 0.5rem;
    }
    .mini-player, .expanded-player, .playlist-panel {
        width: calc(100vw - 1rem);
    }
}

.spinning {
    animation: spin-continuous 3s linear infinite;
}

.error-toast {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    background: #ef4444;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10001;
    animation: slide-up 0.3s ease-out;
}