/* ClubOS 9.8.0N — parité sociale Blog/Musique et stabilité responsive. */

/* Barre sociale des commentaires Musique : même contrat visuel que le lecteur Blog. */
body.music-page-shell .music-comment-social-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: calc(100% - var(--c-avatar-size) - 8px);
    margin: .1rem 0 0 calc(var(--c-avatar-size) + 8px);
    padding: 2px 0 6px;
}
body.music-page-shell .music-comment-social-toolbar .music-comment-reaction-wrap { flex: 0 0 auto; }
body.music-page-shell .music-comment-social-tool,
body.music-page-shell .music-comment-social-reaction-types {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 30px;
    padding: 4px 7px;
    border: 0;
    border-radius: 9px;
    color: #55657a;
    background: transparent;
    font: inherit;
    font-size: .79rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color 130ms ease, background-color 130ms ease, transform 130ms ease;
}
body.music-page-shell .music-comment-social-tool:hover,
body.music-page-shell .music-comment-social-tool:focus-visible,
body.music-page-shell .music-comment-social-reaction-types:hover,
body.music-page-shell .music-comment-social-reaction-types:focus-visible {
    color: #1d4ed8;
    background: rgba(37,99,235,.07);
    outline: none;
}
body.music-page-shell .music-comment-social-tool:active { transform: translateY(1px); }
body.music-page-shell .music-comment-social-tool.is-active { color:#2563eb; }
body.music-page-shell .music-comment-social-tool strong {
    color: inherit;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
body.music-page-shell .music-comment-social-tool__icon,
body.music-page-shell .music-comment-social-icon {
    display:inline-flex; align-items:center; justify-content:center; min-width:18px; min-height:18px;
}
body.music-page-shell .music-social-like-svg,
body.music-page-shell .music-comment-social-svg {
    width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
}
body.music-page-shell .music-social-like-svg.is-filled { fill:currentColor; stroke-width:1.45; }
body.music-page-shell .music-comment-social-emoji,
body.music-page-shell .music-social-reaction-emoji { font-size:1rem; line-height:1; }
body.music-page-shell .music-comment-social-reaction-types { margin-left:auto; padding-inline:5px; cursor:default; }
body.music-page-shell .music-comment-social-reaction-types .music-comment-reaction-summary { gap:0; }
body.music-page-shell .music-comment-social-reaction-types .music-comment-reaction-summary > strong { display:none; }
body.music-page-shell .music-comment-social-reaction-types .music-comment-reaction-summary__icons { display:inline-flex; align-items:center; padding:0; letter-spacing:0; }
body.music-page-shell .music-comment-social-reaction-types .music-comment-reaction-summary__icons > span {
    display:inline-grid; place-items:center; width:19px; height:19px; margin-left:-3px; border-radius:50%; font-size:.72rem; background:#fff; box-shadow:0 0 0 1.5px #fff;
}
body.music-page-shell .music-comment-social-reaction-types .music-comment-reaction-summary__icons > span:first-child { margin-left:0; }
body.music-page-shell .music-comment-reaction-picker { max-width:min(290px, calc(100vw - 24px)); }
body.music-page-shell .music-comment-reaction-choice.is-active { outline:2px solid #2563eb; outline-offset:1px; background:rgba(37,99,235,.1); }

/* Réaction piste : neutre = pouce contour ; like = pouce bleu rempli ; autres = emoji choisi. */
body.music-page-shell .music-btn-like:not(.is-active) { color:#55657a; border-color:var(--site-border); background:transparent; }
body.music-page-shell .music-btn-like.is-active { color:#2563eb; }
body.music-page-shell .music-track-action-icon .music-social-like-svg { width:18px; height:18px; }
body.music-page-shell .music-mobile-track-quick-reaction-icon { display:inline-flex; align-items:center; justify-content:center; min-width:18px; min-height:18px; font-size:1rem; line-height:1; }
body.music-page-shell .music-mobile-track-quick-reaction-icon .music-mobile-svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
body.music-page-shell .music-mobile-track-quick-reaction-icon .music-mobile-svg.is-filled { fill:currentColor; stroke-width:1.45; }
body.music-page-shell .music-mobile-track-quick-action.is-like:not(.is-active) { color:#55657a; }
body.music-page-shell .music-mobile-track-quick-action.is-like.is-active { color:#2563eb; }

/* Desktop : la table doit tenir dans sa carte sans ascenseur horizontal. */
@media (min-width:768px) {
    body.music-page-shell .music-track-table-wrap { overflow-x:visible !important; max-width:100%; }
    body.music-page-shell .music-track-table { width:100% !important; max-width:100%; table-layout:fixed !important; }
    body.music-page-shell .music-track-table .music-track-cover-cell { width:62px; }
    body.music-page-shell .music-track-table .music-track-number-cell { width:58px; }
    body.music-page-shell .music-track-table .music-track-duration-cell { width:80px; }
    body.music-page-shell .music-track-table .music-track-actions-cell { width:250px !important; }
    body.music-page-shell .music-track-table .music-track-title-cell { min-width:0 !important; overflow:hidden; text-overflow:ellipsis; }
    body.music-page-shell .music-track-table .music-track-actions { flex-wrap:wrap !important; justify-content:flex-end; gap:.28rem !important; }
}

/* Mobile : zéro défilement horizontal et composeur strictement dans le flux. */
@media (max-width:767.98px) {
    /* Ne jamais transformer la page Musique elle-même en surface gestuelle bloquée. */
    body.music-page-shell { overflow-y:visible; touch-action:auto; }
    body.music-page-shell #site-shell-root,
    body.music-page-shell #site-shell-main,
    body.music-page-shell #site-shell-content,
    body.music-page-shell #music-shell-content { max-width:100%; overflow-x:clip; }
    body.music-page-shell #music-shell-content,
    body.music-page-shell .music-shell-main,
    body.music-page-shell .music-track-table-wrap,
    body.music-page-shell .music-track-table,
    body.music-page-shell .music-track-table tbody,
    body.music-page-shell .music-track-row,
    body.music-page-shell .music-track-comments-row,
    body.music-page-shell .music-track-comments-row > td,
    body.music-page-shell .music-track-comments,
    body.music-page-shell .music-comment-thread,
    body.music-page-shell .music-comment-item,
    body.music-page-shell .music-comment-main,
    body.music-page-shell .music-comment-bubble,
    body.music-page-shell .music-comment-composer,
    body.music-page-shell .music-comment-reply-form {
        min-width:0 !important; max-width:100% !important; box-sizing:border-box !important;
    }
    body.music-page-shell .music-track-table-wrap { overflow-x:clip !important; width:100% !important; }
    body.music-page-shell .music-track-table { width:100% !important; max-width:100% !important; }
    body.music-page-shell .music-track-row { width:100% !important; }
    body.music-page-shell .music-track-comments-row { width:100% !important; }
    body.music-page-shell .music-track-comments-row > td { width:100% !important; padding-inline:.45rem !important; }
    body.music-page-shell .music-track-reaction-wrap--mobile-quick .music-track-reaction-picker {
        left:auto !important; right:0 !important; transform:translate(0,5px) scale(.96) !important;
    }
    body.music-page-shell .music-track-reaction-wrap--mobile-quick.is-open .music-track-reaction-picker,
    body.music-page-shell .music-track-reaction-wrap--mobile-quick:focus-within .music-track-reaction-picker {
        transform:translate(0,0) scale(1) !important;
    }
    body.music-page-shell .music-comment-reaction-picker { left:0 !important; right:auto !important; }
    body.music-page-shell .music-comment-composer {
        position:static !important; z-index:auto !important; inset:auto !important; bottom:auto !important;
        width:100% !important; margin:.55rem 0 0 !important; padding:.5rem !important;
        box-shadow:none !important; backdrop-filter:none !important; transform:none !important;
    }
    body.music-page-shell .music-comment-composer__main,
    body.music-page-shell .music-comment-composer__field,
    body.music-page-shell .music-comment-composer__tools,
    body.music-page-shell .music-comment-composer__secondary,
    body.music-page-shell .music-comment-composer .js-track-comment-content { min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; }
    body.music-page-shell .music-comment-composer__tools,
    body.music-page-shell .music-comment-composer__secondary { flex-wrap:wrap !important; }
    body.music-page-shell .music-comment-reply-form { width:calc(100% - var(--c-avatar-size) - 8px) !important; }
    body.music-page-shell .music-comment-social-toolbar {
        width:calc(100% - var(--c-avatar-size) - 8px); gap:3px;
    }
    body.music-page-shell .music-comment-social-tool,
    body.music-page-shell .music-comment-social-reaction-types { min-height:28px; padding:3px 5px; font-size:.73rem; }
    body.music-page-shell .music-social-like-svg,
    body.music-page-shell .music-comment-social-svg { width:17px; height:17px; flex-basis:17px; }
}

:root[data-theme="dark"] body.music-page-shell .music-comment-social-tool,
:root[data-theme="dark"] body.music-page-shell .music-comment-social-reaction-types { color:#b6c3d7; }
:root[data-theme="dark"] body.music-page-shell .music-comment-social-tool:hover,
:root[data-theme="dark"] body.music-page-shell .music-comment-social-tool:focus-visible { color:#bfdbfe; background:rgba(96,165,250,.13); }
:root[data-theme="dark"] body.music-page-shell .music-comment-social-tool.is-active { color:#60a5fa; }
:root[data-theme="dark"] body.music-page-shell .music-comment-social-reaction-types .music-comment-reaction-summary__icons > span { background:#111a2c; box-shadow:0 0 0 1.5px #111a2c; }

/* Raffinement du bouton piste / lecteur mobile : pas de pastille héritée rouge/jaune. */
body.music-page-shell .music-btn-like,
body.music-page-shell .music-btn-like:not(.is-active),
body.music-page-shell .music-btn-like.is-active {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.music-page-shell .music-mobile-track-quick-action.is-like.is-active {
    background: rgba(37,99,235,.07) !important;
    color: #2563eb !important;
}
body.music-page-shell .music-mobile-player-action[data-source-id="global-player-like"] .music-mobile-svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.music-page-shell .music-mobile-player-action[data-source-id="global-player-like"] .music-mobile-svg.is-filled {
    fill: currentColor;
    stroke-width: 1.45;
}


/* ClubOS 9.8.0P — player desktop: marqueurs commentaires + picker réactions robuste. */
@media (min-width: 768px) {
    /* Les commentaires horodatés ne doivent plus devenir des bandes verticales qui masquent la waveform. */
    :is(body.music-page-shell, body.music-player-persistent) .global-music-player__markers {
        overflow: visible;
    }
    :is(body.music-page-shell, body.music-player-persistent) .global-music-player__marker {
        top: auto !important;
        bottom: -5px !important;
        width: 20px !important;
        height: 20px !important;
        display: grid !important;
        place-items: center;
        overflow: hidden;
        border: 2px solid var(--music-surface, var(--site-surface, #fff)) !important;
        border-radius: 50% !important;
        background: var(--music-accent, var(--site-accent, #0f8278)) !important;
        color: #fff !important;
        box-shadow: 0 1px 5px rgba(15, 23, 42, .28);
        transform: translateX(-50%) !important;
        z-index: 5;
        font-size: .58rem;
        font-weight: 850;
    }
    :is(body.music-page-shell, body.music-player-persistent) .global-music-player__marker img {
        width: 100% !important;
        height: 100% !important;
        display: block;
        object-fit: cover;
        border-radius: inherit;
    }
    :is(body.music-page-shell, body.music-player-persistent) .global-music-player__marker:hover,
    :is(body.music-page-shell, body.music-player-persistent) .global-music-player__marker:focus-visible {
        z-index: 12;
        transform: translateX(-50%) scale(1.16) !important;
        outline: 2px solid color-mix(in srgb, var(--music-accent, #0f8278) 35%, transparent);
        outline-offset: 1px;
    }

    /* Pas de trou mort entre le bouton et le picker : on peut réellement monter la souris dessus. */
    body.music-page-shell .music-track-reaction-picker {
        bottom: calc(100% - 2px);
        z-index: 12000;
    }

    /* ClubOS 9.8.0S — le dock droit clippe son contenu avec overflow:hidden.
       Un z-index supérieur ne peut pas traverser ce clipping : on recentre donc
       la palette à l'intérieur du dock, avec assez de marge à droite pour les 6 réactions. */
    body.music-page-shell .global-music-player[data-display-mode="dock-right"] .music-track-reaction-wrap--global {
        z-index: 12010;
    }
    body.music-page-shell .global-music-player[data-display-mode="dock-right"] .music-track-reaction-wrap--global .music-track-reaction-picker {
        left: 50%;
        right: auto;
        width: max-content;
        max-width: none;
        z-index: 32000;
        transform: translate(-40%, 5px) scale(.96);
    }
    body.music-page-shell .global-music-player[data-display-mode="dock-right"] .music-track-reaction-wrap--global.is-open .music-track-reaction-picker,
    body.music-page-shell .global-music-player[data-display-mode="dock-right"] .music-track-reaction-wrap--global:focus-within .music-track-reaction-picker,
    body.music-page-shell .global-music-player[data-display-mode="dock-right"] .music-track-reaction-wrap--global:hover .music-track-reaction-picker {
        transform: translate(-40%, 0) scale(1);
    }
}