/* ClubOS — finition des fils de commentaires. */
.blog-comment-replies-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--bs-primary, #0d6efd);
    font-size: .78rem;
    font-weight: 700;
    margin: .25rem 0 .2rem 2.65rem;
    padding: .25rem .35rem;
    border-radius: .45rem;
}
.blog-comment-replies-toggle:hover,
.blog-comment-replies-toggle:focus-visible { background: rgba(13,110,253,.09); outline: none; }
.blog-comment-pinned-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-left: .35rem;
    color: #845400;
    font-size: .68rem;
    font-weight: 800;
    vertical-align: middle;
}
.club-comment-mention-popup {
    position: absolute;
    z-index: 2147483000;
    left: .5rem;
    right: .5rem;
    bottom: calc(100% + .35rem);
    max-height: 18rem;
    overflow: auto;
    padding: .35rem;
    border: 1px solid rgba(15, 23, 42, .16);
    border-radius: .8rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
}
.post-display-comment-composer-row,
.blog-comment-inline-editor,
.blog-comment-form { position: relative; }
.club-comment-mention-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: .5rem .6rem;
    border-radius: .6rem;
}
.club-comment-mention-option:hover,
.club-comment-mention-option:focus-visible,
.club-comment-mention-option.is-active { background: rgba(13,110,253,.10); outline: none; }
.club-comment-mention-option img,
.club-comment-mention-initial {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    background: #e8eef8;
    font-weight: 800;
}
.club-comment-purge-dialog {
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 1rem;
    color: var(--bs-body-color, #172033);
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 28px 90px rgba(0,0,0,.32);
}
.club-comment-purge-dialog::backdrop { background: rgba(15,23,42,.62); }
.club-comment-purge-card header,
.club-comment-purge-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(15,23,42,.12);
}
.club-comment-purge-card footer { justify-content: flex-end; border-top: 1px solid rgba(15,23,42,.12); border-bottom: 0; }
.club-comment-purge-card h2 { margin: 0; font-size: 1.2rem; }
.club-comment-purge-card small { color: #b42318; font-weight: 800; letter-spacing: .08em; }
.club-comment-dialog-close { border: 0; border-radius: 50%; width: 2.35rem; height: 2.35rem; font-size: 1.65rem; background: rgba(100,116,139,.14); }
.club-comment-purge-body { padding: 1.15rem 1.2rem; }
.club-comment-purge-body label { display: grid; gap: .4rem; font-weight: 700; }
.club-comment-purge-body textarea { width: 100%; border: 1px solid rgba(100,116,139,.45); border-radius: .65rem; padding: .7rem; resize: vertical; }
.club-comment-purge-error { margin-top: .6rem; color: #b42318; font-size: .86rem; font-weight: 700; }
.blog-modal-comments-filter { min-width: 10.5rem; }
@media (max-width: 640px) {
    .blog-comment-replies-toggle { margin-left: 2.2rem; }
    .club-comment-mention-popup { left: 0; right: 0; }
}
.blog-comment-mention { color: var(--bs-primary, #0d6efd); font-weight: 750; text-decoration: none; }
.blog-comment-mention:hover { text-decoration: underline; }

/* Flux continu des commentaires et menu d’actions dans la top layer. */
.blog-comments-stream-sentinel,
.blog-comments-stream-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3.25rem;
    margin: .75rem 0 .25rem;
    color: var(--bs-secondary-color, #64748b);
    font-size: .82rem;
    text-align: center;
}
.blog-comments-stream-sentinel { cursor: pointer; border-radius: .75rem; }
.blog-comments-stream-sentinel:hover { background: rgba(13,110,253,.06); }
.blog-comments-stream-spinner {
    width: 1rem; height: 1rem; border-radius: 50%;
    border: 2px solid rgba(100,116,139,.25); border-top-color: var(--bs-primary, #0d6efd);
    animation: club-comment-stream-spin .75s linear infinite;
}
@keyframes club-comment-stream-spin { to { transform: rotate(360deg); } }
.blog-comment-actions-menu[popover] {
    position: fixed !important;
    z-index: 2147483647 !important;
    margin: 0 !important;
    max-height: min(70vh, 28rem);
    overflow: auto;
    inset: auto;
    box-shadow: 0 24px 70px rgba(15,23,42,.34);
}
.blog-comment-actions-menu[popover]::backdrop { background: transparent; }

/* 8.2 — visibilité personnelle/modération et composants ClubUI. */
.blog-comment-actions-menu.club-ui-menu {
    display: block;
    z-index: var(--club-ui-layer-menu, 2147482000) !important;
}
.blog-comment-actions-menu.club-ui-menu[hidden] { display: none !important; }
.blog-modal-comment-item.is-hidden-comment > .blog-modal-comment-main .blog-modal-comment-bubble {
    border: 1px dashed rgba(100,116,139,.55);
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 86%, #94a3b8 14%);
}
.blog-modal-comment-item.is-hidden-context { opacity: .72; }
.blog-comment-hidden-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-left: .35rem;
    padding: .12rem .4rem;
    border-radius: 999px;
    background: rgba(100,116,139,.14);
    color: var(--bs-secondary-color, #64748b);
    font-size: .72rem;
    font-weight: 700;
    cursor: help;
}
.blog-comment-hide-scope-dialog { width: min(92vw, 620px); }
.blog-comment-hide-choice {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .9rem;
    margin-bottom: .75rem;
    border: 1px solid rgba(148,163,184,.34);
    border-radius: .85rem;
    cursor: pointer;
}
.blog-comment-hide-choice:has(input:checked) {
    border-color: var(--bs-primary, #0d6efd);
    background: rgba(13,110,253,.07);
}
.blog-comment-hide-choice input { margin-top: .25rem; }
.blog-comment-hide-choice span { display: grid; gap: .25rem; }
.blog-comment-hide-choice small { color: var(--bs-secondary-color, #64748b); line-height: 1.4; }
.js-comment-unhide-action { color: var(--bs-primary, #0d6efd) !important; }
@media (pointer: coarse), (max-width: 768px) {
    .blog-comment-actions-menu-trigger,
    .js-comment-unhide-action,
    .blog-modal-comment-actions button { min-height: 44px; }
}


/* AU.4 — @Alex explicite : réponse privée au demandeur, jamais un commentaire social autonome. */
.club-alex-interaction { margin-top:.65rem; padding:.65rem .75rem; border:1px solid var(--bs-border-color, #d9dde3); border-radius:.75rem; background:rgba(127,127,127,.06); max-width:48rem; }
.club-alex-interaction__head { font-size:.83rem; font-weight:700; margin-bottom:.3rem; }
.club-alex-interaction__privacy, .club-alex-interaction__note { font-weight:400; opacity:.68; }
.club-alex-interaction__body { font-size:.9rem; line-height:1.4; overflow-wrap:anywhere; }
.club-alex-interaction__note { font-size:.72rem; margin-top:.35rem; }
.club-alex-interaction--failed .club-alex-interaction__body { opacity:.76; }
.club-alex-interaction__spinner { display:inline-block; width:.7rem; height:.7rem; border:.12rem solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-.06rem; animation:clubAlexSpin .8s linear infinite; }
@keyframes clubAlexSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .club-alex-interaction__spinner { animation:none; } }

/* Club Alex Borg 9.8.0AV.1 — provenance visible des réponses sociales d'agents IA. */
.blog-comment-ai-indicator {
    margin-left: .2rem;
    vertical-align: .02em;
}
.blog-modal-comment-bubble .blog-comment-ai-indicator,
.card .blog-comment-ai-indicator {
    font-size: .58rem;
}


/* AV.1 R3 — profondeur visuelle bornée des fils.
 * La hiérarchie logique reste complète, mais à partir du 3e niveau visuel
 * on cesse d'ajouter un retrait horizontal. Les réponses profondes gardent
 * ainsi une largeur lisible sur mobile et desktop.
 */
.c-node.blog-modal-comment-item.is-visual-depth-capped > .c-group {
    --comment-rail-width: 0px;
    padding-left: 0;
}
.c-node.blog-modal-comment-item.is-visual-depth-capped > .c-group > svg.c-rails {
    display: none;
}
.c-node.blog-modal-comment-item.is-visual-depth-capped > .c-group > .c-item {
    padding-left: 0;
}