/* ============================================================================
 * NeonWave — couche finale (chargée en dernier).
 * Regroupe ici les corrections transverses au lieu d'empiler des surcharges
 * dans chaque feuille : en-tête artiste, liens d'artistes, avatars.
 * ========================================================================== */

:root {
    --nw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --nw-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --nw-text: #f4f5f7;
    --nw-text-2: rgba(244, 245, 247, 0.64);
    --nw-text-3: rgba(244, 245, 247, 0.42);
    --nw-line: rgba(255, 255, 255, 0.08);
    --nw-line-strong: rgba(255, 255, 255, 0.14);
    --nw-surface: rgba(255, 255, 255, 0.035);
    --nw-surface-2: rgba(255, 255, 255, 0.06);
    --nw-accent: #7c8cff;
    --nw-accent-ink: #0b0d1a;
    --nw-danger: #ff7a85;
    --nw-ok: #4ade80;
}

/* ── 1. En-tête de la page artiste (façon Spotify) ──────────────────────────
 * Comme Spotify quand l'artiste n'a pas de bannière : une carte compacte sur le fond flouté
 * de la page, photo ronde à gauche, puis nom, badge vérifié et abonnés en bas à droite.
 * (Les photos d'artistes sont des portraits carrés : étirées en bannière, elles devenaient floues.)
 * --ah-r/g/b (couleur de la photo, Music.applyArtistHeroColor) ne sert plus qu'à un reflet discret. */
.nw-artist { --ah-r: 64; --ah-g: 70; --ah-b: 92; }
.nw-ah {
    position: relative; isolation: isolate; overflow: hidden;
    margin: 16px clamp(12px, 2vw, 20px) 0; padding: 16px;
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(120% 140% at 0% 50%, rgba(var(--ah-r), var(--ah-g), var(--ah-b), 0.22), transparent 60%),
        rgba(16, 17, 22, 0.55);
    -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4);
    transition: background 600ms ease;
}
.nw-ah-inner { display: flex; align-items: flex-end; gap: 24px; animation: nwAhIn 480ms var(--nw-ease-out) both; }
@keyframes nwAhIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nw-ah-avatar {
    width: clamp(140px, 17vw, 230px); aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; overflow: hidden;
    background: rgba(0, 0, 0, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.nw-ah-avatar img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block;
    opacity: 0; transform: scale(1.03); transition: opacity 420ms ease, transform 600ms var(--nw-ease-out);
}
.nw-ah-avatar.is-loaded img { opacity: 1; transform: none; }
.nw-ah-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 14px; }
.nw-ah-name {
    margin: 0; color: #fff; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2;
    font-size: 16px; overflow-wrap: anywhere;
}
.nw-ah-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #fff; }
.nw-ah-badge svg { width: 22px; height: 22px; flex-shrink: 0; }
.nw-ah-badge svg path:first-child { fill: #4cb3ff; }
.nw-ah-badge svg .tick { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nw-ah-meta { margin: 6px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.82); }
.nw-ah-meta span { margin: 0 4px; opacity: 0.7; }

/* Barre d'actions sous la carte */
.nw-ah-actions { display: flex; align-items: center; gap: 22px; padding: 24px clamp(20px, 3vw, 36px) 12px; }
.nw-ah-play {
    width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
    background: var(--clr-primary, #5b9aff); color: #000; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 160ms var(--nw-ease-out), filter 160ms ease;
}
.nw-ah-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 2px; }
.nw-ah-play:hover:not(:disabled) { transform: scale(1.05); filter: brightness(1.08); }
.nw-ah-play:active:not(:disabled) { transform: scale(0.97); }
.nw-ah-play:disabled { opacity: 0.5; cursor: default; }
.nw-ah-icon {
    width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: rgba(255, 255, 255, 0.7);
    display: grid; place-items: center; cursor: pointer; transition: color 160ms ease, transform 160ms ease;
}
.nw-ah-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nw-ah-icon:hover:not(:disabled) { color: #fff; transform: scale(1.06); }
.nw-ah-icon.is-on { color: var(--clr-primary, #5b9aff); }
.nw-ah-icon:disabled { opacity: 0.4; cursor: default; }
body .nw-artist .nw-ah-actions .nw-ah-follow {
    height: 32px !important; min-height: 32px !important; padding: 0 15px !important; border-radius: 500px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important; background: transparent !important; color: #fff !important;
    font: 700 14px/1 Inter, "Segoe UI", sans-serif !important; letter-spacing: 0.01em; cursor: pointer;
    box-shadow: none !important; transition: border-color 160ms ease, transform 160ms ease !important;
}
body .nw-artist .nw-ah-actions .nw-ah-follow:hover { border-color: #fff !important; transform: scale(1.04); }
.nw-ah-play:focus-visible, .nw-ah-icon:focus-visible, .nw-ah-follow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* La page espace ses blocs (gap 26px) : on gère l'espacement ici. */
body .nw-artist.artist-profile-shell { gap: 0 !important; }
.nw-artist > .artist-profile-section { position: relative; margin-top: 26px; }
.nw-artist > .nw-ah-actions + .artist-profile-section { margin-top: 8px; }

@media (max-width: 640px) {
    .nw-ah-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .nw-ah-copy { padding-bottom: 0; }
    .nw-ah-avatar { width: 150px; }
}

/* ── 2. Liens d'artistes : un lien par artiste, même dans les feats ───────── */
/* Les liens suivent leur conteneur : sur une ligne avec « … » dans les listes de titres (nowrap),
   sur plusieurs lignes là où le conteneur le permet (lecteur plein écran, en-tête d'album). */
.artist-links { display: inline; white-space: inherit; }
.track-row-meta .artist-links, .track-row-copy .artist-links, .np-queue-artist .artist-links { white-space: nowrap; }
.artist-sep { color: inherit; opacity: 0.9; }
.artist-link {
    cursor: pointer; pointer-events: auto; position: relative; z-index: 1;
    color: inherit; text-decoration: none; border-radius: 3px;
    transition: color 160ms ease;
}
.artist-link:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.artist-link:focus-visible { outline: 2px solid var(--nw-accent); outline-offset: 2px; text-decoration: none; }
.sp-pl-artists { font-weight: 700; }
.sp-pl-artists .artist-link { color: #fff; }
/* Lecteur plein écran (Spicy) : les noms restent lisibles et cliquables au-dessus de la vidéo */
.spl-artist { position: relative; z-index: 3; pointer-events: auto; }
.spl-artist .artist-link:hover { color: #fff !important; }

/* ── 3. Avatars d'artistes : ronds, nets, sans filtre ni voile ───────────── */
.artist-circle-avatar, .mu-artist-img {
    aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50%;
    background: #1a1a20;
}
.artist-circle-avatar img, .mu-artist-img img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
    filter: none; opacity: 1; mix-blend-mode: normal;
    image-rendering: auto;
}
.nw-wow .artist-card::before, .nw-wow .artist-card::after { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
    .nw-ah-inner, .nw-ah-avatar img { animation: none; transition: none; }
}

/* ── 4. Carte « À suivre » du panneau En lecture ───────────────────────────
 * Trois feuilles se contredisaient : neon-lucid encadrait AUSSI la liste intérieure (boîte
 * dans la boîte), npv.css donnait à la carte un fond --background-highlight (bande bleutée)
 * et un survol coloré. Comme la carte native de Spotify (que Spicy Lyrics garde telle quelle) :
 * même verre que la carte des paroles, en-tête, lignes de titres sans cadre, survol discret. */
body .now-playing-panel #npQueueBox,
body .now-playing-panel #npQueueBox:hover {
    margin-top: 16px !important; padding: 12px 6px 6px !important; border-radius: 12px !important;
    border: var(--default-border, 1px solid rgba(255, 255, 255, 0.1)) !important;
    background: rgba(0, 0, 0, 0.32) !important; box-shadow: none !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.6) !important; backdrop-filter: blur(24px) saturate(1.6) !important;
}
body .now-playing-panel #npQueueBox .np-box-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px 8px; margin: 0; }
body .now-playing-panel #npQueueBox .np-box-title { font-size: 16px; font-weight: 700 !important; color: #fff; text-transform: none; letter-spacing: 0; }
body .now-playing-panel #npQueueBox .np-box-action {
    height: 28px; padding: 0 12px; border-radius: 500px; font-size: 12.5px; font-weight: 700;
    background: transparent !important; border: 0 !important; color: rgba(255, 255, 255, 0.7) !important;
}
body .now-playing-panel #npQueueBox .np-box-action:hover { color: #fff !important; text-decoration: underline; }
body .now-playing-panel #npQueueBox .np-queue-preview,
body .now-playing-panel #npQueueBox .np-queue-preview:hover {
    border: 0 !important; border-radius: 0 !important; background: none !important; padding: 0 !important;
    display: flex; flex-direction: column; gap: 2px;
}
body .now-playing-panel #npQueueBox .np-queue-item {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 6px 8px; border-radius: 8px !important; background: transparent; border: 0;
    transition: background 160ms ease;
}
body .now-playing-panel #npQueueBox .np-queue-item:hover { background: rgba(255, 255, 255, 0.08); }
body .now-playing-panel #npQueueBox .np-queue-thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
body .now-playing-panel #npQueueBox .np-queue-title { font-size: 14px; font-weight: 600; color: #fff; }
body .now-playing-panel #npQueueBox .np-queue-artist { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }
body .now-playing-panel #npQueueBox .np-queue-status { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
body .now-playing-panel #npQueueBox .np-queue-item:first-child .np-queue-status { color: var(--clr-primary, #8fb8ff); }
body .now-playing-panel #npQueueBox .np-queue-empty { padding: 4px 10px 8px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }

/* ── 5. Panneau « En lecture » façon Spicy Lyrics ───────────────────────────
 * Sans Canvas vidéo : pochette en carte arrondie + fond animé (la pochette déformée par
 * Kawarp, js/npv-bg.js) derrière tout le panneau, assombri et saturé comme Spicy
 * (brightness .6 / saturate 2.65). Avec Canvas vidéo : la vidéo reste en fond. */
.now-playing-panel .np-dyn-bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    border-radius: inherit; display: none;
    filter: brightness(0.6) saturate(2.65);
}
.now-playing-panel.np-mode-cover .np-dyn-bg { display: block; }
/* secours sans WebGL / avant chargement : la pochette très floutée */
.now-playing-panel .np-dyn-bg::before {
    content: ""; position: absolute; inset: -20%; background: var(--np-cover, none) center / cover no-repeat;
    filter: blur(60px); transform: scale(1.2); opacity: 1; transition: opacity 600ms ease;
}
.now-playing-panel .np-dyn-bg.is-ready::before { opacity: 0; }
.now-playing-panel .np-dyn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 600ms ease; }
.now-playing-panel .np-dyn-bg.is-ready .np-dyn-canvas { opacity: 1; }
/* en mode pochette, l'ancien fond (pochette étirée sur tout le panneau) disparaît */
body .now-playing-panel.np-mode-cover .np-video-bg { display: none !important; }
body .now-playing-panel .np-scroll { position: relative; z-index: 1; }

/* Carte pochette */
.now-playing-panel .np-cover-card { display: none; }
body .now-playing-panel.np-mode-cover .np-cover-card {
    display: block; position: relative; width: 100%; aspect-ratio: 1; margin: 4px 0 18px;
    border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.25);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.now-playing-panel .np-cover-card img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: 0; transform: scale(1.02); transition: opacity 420ms ease, transform 600ms var(--nw-ease-out);
}
.now-playing-panel .np-cover-card.is-loaded img { opacity: 1; transform: none; }
/* le titre se place sous la pochette (et non plus en bas d'une vidéo plein panneau) */
body .now-playing-panel.np-mode-cover #npStage.np-stage { margin-top: 0 !important; }

@media (prefers-reduced-motion: reduce) {
    .now-playing-panel .np-dyn-canvas { display: none; }
    .now-playing-panel .np-dyn-bg.is-ready::before { opacity: 1; }
}

/* Ancienne lueur colorée du panneau (neon-wow) : dessinée sur 78 % de la hauteur, elle
   s'arrêtait net juste au-dessus de la carte des paroles (coupure horizontale visible avec
   une pochette comme avec un Canvas). Le fond animé fournit déjà la couleur. */
.nw-wow .now-playing-panel::after, body .now-playing-panel::after { display: none !important; }

/* ── 6. Paroles absentes / commandes du plein écran ─────────────────────── */
/* Panneau : pas de paroles pour ce titre -> la carte disparaît (pas de bloc vide). */
body .now-playing-panel.np-no-lyrics #npLyricsPanel { display: none !important; }

/* Plein écran : vrai message au lieu de « Recherche des paroles… » à l'infini */
.spl-page .spl-empty {
    min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    text-align: center; color: rgba(255, 255, 255, 0.85); animation: nwAhIn 500ms var(--nw-ease-out) both;
}
.spl-page .spl-empty svg { width: 44px; height: 44px; fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.spl-page .spl-empty strong { font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.spl-page .spl-empty span { font-size: 15px; color: rgba(255, 255, 255, 0.6); }
.spl-page .spl-empty.is-loading { flex-direction: row; gap: 12px; font-size: 18px; font-weight: 600; }
.spl-page .spl-dots { display: inline-flex; gap: 6px; }
.spl-page .spl-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); animation: splDot 1.1s ease-in-out infinite; }
.spl-page .spl-dots i:nth-child(2) { animation-delay: 0.15s; }
.spl-page .spl-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes splDot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

/* Plein écran, mode Canvas : les temps sous la barre avaient position:absolute sans place
   réservée, la rangée de boutons venait les toucher. On réserve leur hauteur et on aère. */
.spl-page.has-video-bg .spl-timeline { margin-top: 20px; padding-bottom: 26px; }
.spl-page.has-video-bg .spl-timeline .spl-time { top: 16px; font-size: 12.5px; color: rgba(255, 255, 255, 0.75); }
.spl-page.has-video-bg .spl-media { margin-top: 22px; gap: 26px; }
.spl-page.has-video-bg .spl-controls { gap: 28px; }
.spl-page.has-video-bg .spl-volume { margin-left: 30px; }

/* Badge d'abonnement (Réglages > Compte) */
#settingsPlanRow[hidden] { display: none; }
.st-plan-badge {
    flex-shrink: 0; padding: 5px 12px; border-radius: 500px; font-size: 12px; font-weight: 900; letter-spacing: .04em;
    background: rgba(255, 255, 255, .1); color: #fff; white-space: nowrap;
}
.st-plan-badge[data-plan="founder"] { background: linear-gradient(90deg, #5b9aff, #a98bff); color: #000; }
.st-plan-badge[data-plan="lifetime"] { background: #fff; color: #000; }