/* --- Music player glass card --- */
/* Premium look inspired by Apple Music: cover art floats on top of a
   blurred, desaturated scaled-up copy of itself, with our Swiss
   glassmorphism layered on top so each song gets its own atmosphere
   but every card feels part of the same design language. */

.music-card {
    /* Base glass is applied inline from GLASS_BG etc. in musicPlayer.js */
    color: #f1f5f9;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 268px;
    box-sizing: border-box;
    /* Chat bubble inherits `white-space-collapse: preserve` (from tailwind or
       somewhere upstream), which keeps the leading newline + indent from the
       innerHTML template literal as a visible ~50px whitespace text node
       above .music-card-inner. Overriding normal here collapses that so the
       inner panel starts flush at the top of the card. */
    white-space: normal;
}

.music-card.has-cover-bg::before {
    /* Atmospheric background: blurred cover scaled to fill,
       pinned below the glass layer. Saturate+brighten to give "alive" feel. */
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--music-cover-url);
    background-size: cover;
    background-position: center;
    filter: blur(42px) saturate(1.35) brightness(0.85);
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.music-card.has-cover-bg::after {
    /* Dark glass veil on top of the blurred bg so text stays readable */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,0.25) 0%, rgba(15,23,42,0.55) 100%);
    z-index: 0;
    pointer-events: none;
}

.music-card-inner {
    position: relative;
    z-index: 1;
    /* Flex row is simpler to reason about than grid for this fixed-size,
       single-row layout. Cover on the left at 240×240, body flexes to fill
       remaining width with the same 240px height. */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.music-cover {
    width: 240px;
    height: 240px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, rgba(129,140,248,0.2), rgba(236,72,153,0.2));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.music-playing .music-cover {
    /* Subtle lift while playing — hints at "alive" without being distracting */
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(236, 72, 153, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.music-cover-placeholder,
.music-cover-img {
    /* Absolute-fill inside .music-cover so the image never picks up its
       intrinsic dimensions or any layout quirk that would leave whitespace
       above and clip the bottom of the picture. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.music-cover-placeholder {
    background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(236,72,153,0.25), rgba(139,92,246,0.25));
    background-size: 200% 200%;
    animation: music-cover-breathe 4s ease-in-out infinite;
}

@keyframes music-cover-breathe {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 100% 100%; }
}

.music-cover-img {
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: opacity 0.5s ease;
}

.music-cover-fallback .music-cover-placeholder {
    background: linear-gradient(135deg, rgba(129,140,248,0.4), rgba(236,72,153,0.4));
}

/* Body flexes to fill remaining width; height matches cover (240px) via
   parent's align-items:stretch. Column flex packs title at top, controls
   at bottom of that 240px slot. Anything exceeding clips via overflow. */
.music-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.music-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.3;
}

.music-filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.music-mode-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 8px;
    background: rgba(236, 72, 153, 0.18);
    border: 1px solid rgba(236, 72, 153, 0.35);
    color: #fbcfe8;
    flex-shrink: 0;
}

/* Karaoke display: same slot shows the song description when idle and the
   currently-sung lyric line during playback. Smooth cross-fade between the
   two modes keeps the layout from jumping. prev/next lines provide context
   above and below the active line for pacing. */
.music-karaoke {
    position: relative;
    /* Fixed-ish height so the 3-lane karaoke (prev / active / next) always
       fits the same vertical space — prevents card from jiggling when active
       line changes. Sized to leave room for waveform+controls in 220px. */
    height: 68px;
    font-size: 13px;
    line-height: 1.35;
}
.music-karaoke-caption,
.music-karaoke-line {
    position: absolute;
    left: 0;
    right: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-karaoke-caption {
    top: 0;
    max-height: 68px;
    white-space: normal;
    font-style: italic;
    color: rgba(255, 255, 255, 0.72);
    opacity: 1;
    font-size: 12px;
    /* Four-line clamp — still fits the 68px slot, allows a richer description */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.music-karaoke-line { opacity: 0; pointer-events: none; }
.music-karaoke-prev {
    top: 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}
.music-karaoke-current {
    top: 22px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-shadow: 0 0 14px rgba(236, 72, 153, 0.55), 0 0 4px rgba(255, 255, 255, 0.35);
}
.music-karaoke-next {
    top: 50px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}
/* During playback: fade caption out, lyric lines in */
.music-card.karaoke-singing .music-karaoke-caption { opacity: 0; pointer-events: none; }
.music-card.karaoke-singing .music-karaoke-prev { opacity: 0.5; }
.music-card.karaoke-singing .music-karaoke-current { opacity: 1; pointer-events: auto; transform: translateY(0); }
.music-card.karaoke-singing .music-karaoke-next { opacity: 0.5; }
/* Gentle pulse on the active line synced with a beat feel */
.music-card.karaoke-singing .music-karaoke-current {
    animation: music-karaoke-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes music-karaoke-pulse {
    0%   { text-shadow: 0 0 10px rgba(236, 72, 153, 0.35), 0 0 3px rgba(255, 255, 255, 0.25); }
    100% { text-shadow: 0 0 18px rgba(236, 72, 153, 0.7), 0 0 6px rgba(255, 255, 255, 0.45); }
}

.music-waveform {
    width: 100%;
    height: 44px;
    display: block;
    cursor: pointer;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease;
}
.music-waveform:hover {
    background: rgba(0, 0, 0, 0.22);
}

.music-times {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.music-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.music-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.music-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}
.music-btn:active {
    transform: scale(0.96);
}
.music-btn-play {
    width: 44px;
    height: 44px;
    font-size: 15px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.35), rgba(129, 140, 248, 0.35));
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
}
.music-btn-play:hover {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.5), rgba(129, 140, 248, 0.5));
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.4);
}

/* Lyrics scroller */
.music-lyrics {
    margin-top: 12px;
    max-height: 180px;
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 13px;
    line-height: 1.6;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.music-lyrics::-webkit-scrollbar { width: 4px; }
.music-lyrics::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; }

.music-lyric-line {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
    padding: 3px 0;
    cursor: pointer;
}
.music-lyric-line:hover {
    color: rgba(255, 255, 255, 0.8);
}
.music-lyric-line.active {
    color: #fff;
    font-weight: 600;
    transform: translateX(4px);
    text-shadow: 0 0 12px rgba(236, 72, 153, 0.55);
}

/* Mobile — stack cover on top, controls comfortable, full width */
@media (max-width: 640px) {
    /* Mobile: stack cover on top, body below. Desktop-only 268px card
       height is released so the card grows to fit both sections. */
    .music-card {
        height: auto;
    }
    .music-card-inner {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }
    .music-cover {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: 320px;
        margin: 0 auto;
    }
    .music-body {
        /* Body takes natural height in stacked layout */
        width: 100%;
    }
    .music-title {
        font-size: 14px;
    }
    .music-waveform {
        height: 48px;
    }
    .music-btn {
        width: 40px;
        height: 40px;
    }
    .music-btn-play {
        width: 48px;
        height: 48px;
    }
}

/* Multi-track grid layout */
.gen-music-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
    margin: 8px 0;
}
@media (min-width: 900px) {
    .gen-music-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* In the grid, cards stack internally (cover on top) to fit the narrower column */
    .gen-music-grid .music-card-inner {
        grid-template-columns: 1fr;
    }
    .gen-music-grid .music-cover {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Placeholder (loading) state — matches glass card with animated shimmer */
.gen-music-placeholder {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    min-height: 200px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.85);
    animation: musicgen-glass-breathe 8s ease-in-out infinite;
}

.musicgen-label {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes musicgen-glass-breathe {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 100% 100%; }
}