/* Временный слой связи не участвует в потоке дерева и не добавляет отступов. */
html:root body #viewer-comments-list.comment-relation-host {
    position: relative !important;
    --relation-ink: var(--theme-accent, #8b5cf6);
    --relation-surface: var(--theme-surface-panel, #fff);
    --relation-marker-size: 24px;
}
html:root body #viewer-comments-list .comment-relation-overlay {
    position: absolute !important; inset: 0 !important; margin: 0 !important;
    pointer-events: none !important; z-index: 21; overflow: visible;
}
html:root body #viewer-comments-list .comment-relation-overlay[hidden] { display: none !important; }
html:root body #viewer-comments-list .comment-relation-overlay svg {
    position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
}
html:root body #viewer-comments-list .comment-relation-overlay path {
    fill: none; stroke: var(--relation-ink); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 2px var(--relation-surface));
}
html:root body #viewer-comments-list .comment-relation-marker {
    position: absolute !important; transform: translate(-50%, -50%) !important;
    width: var(--relation-marker-size) !important; height: var(--relation-marker-size) !important;
    min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
    display: grid !important; place-items: center; border-radius: 50% !important;
    border: 2px solid var(--relation-ink) !important; background: var(--relation-surface) !important;
    color: var(--relation-ink) !important; font: 700 12px/1 system-ui !important;
    pointer-events: auto !important; cursor: pointer; box-shadow: 0 0 4px var(--relation-ink);
}
html:root body #viewer-comments-list .comment-relation-avatar-active {
    outline: 2px solid var(--relation-ink) !important; outline-offset: 2px;
    border-radius: 11px !important; box-shadow: 0 0 7px color-mix(in srgb, var(--relation-ink) 50%, transparent) !important;
}
html:root body #viewer-comments-list .comment-relation-toggle {
    background: transparent !important; color: var(--thread-accent, var(--theme-accent)) !important;
    border: 0 !important; min-height: 32px; height:32px; padding: 4px !important;
    display: inline-flex; width: 32px; align-items:center; justify-content:center; flex-shrink:0;
    font: 650 11px/1.4 system-ui !important; white-space: nowrap; cursor: pointer;
}
html:root body #viewer-comments-list .comment-relation-toggle[aria-pressed="true"] {
    background: color-mix(in srgb, var(--relation-ink) 14%, transparent) !important; border-radius: 9px;
}
html:root body #viewer-comments-list :is(.comment-relation-marker, .comment-relation-toggle):focus-visible {
    outline: 2px solid var(--theme-text-main, currentColor) !important; outline-offset: 3px;
}
html:root body .comment-relation-status {
    font: 500 12px/1.5 system-ui; color: var(--theme-text-main, inherit); white-space: normal;
}
html:root body .comment-relation-status[hidden] { display: none !important; }
html:root body .comment-relation-status button { color: var(--theme-accent); margin-left: 8px; text-decoration: underline; }
/* Закреплённая шапка закрывает проходящий под ней временный слой. */
html:root body #viewer-comments-block:has(> .comment-relation-host) > .viewer-comments-head { z-index: 30 !important; }
@media (max-width: 600px) {
    html:root body #viewer-comments-list.comment-relation-host { --relation-marker-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    html:root body #viewer-comments-list :is(.comment-relation-marker, .comment-relation-avatar-active, .comment-relation-toggle) {
        animation: none !important; transition: none !important;
    }
}

/* Обе оценки получают только подтверждённые сервером счётчики. */
html:root body #viewer-comments-list .comment-dislike-btn {display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 6px;background:transparent!important;border:0;color:var(--theme-text-muted);font:700 11px/1.4 system-ui;cursor:pointer}
html:root body #viewer-comments-list [data-comment-reaction].comment-reaction-active {color:#ef4444!important}
html:root body #viewer-comments-list [data-comment-reaction]:disabled {opacity:.5;cursor:progress}
html:root body #viewer-comments-list .comment-dislike-btn:focus-visible {outline:2px solid var(--theme-accent);outline-offset:2px}
html:root body #viewer-comments-list .comment-pair-actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
@media(max-width:600px){
 html:root body #viewer-comments-list.comment-tree-v278{--thread-step:32px!important}
 html:root body #viewer-comments-list#viewer-comments-list#viewer-comments-list#viewer-comments-list.comment-tree-v278 .comment-thread-group>.comment-thread-branch>.comment-node::before{width:calc(var(--thread-step) - var(--thread-avatar)/2 - 7px)!important}
}

/* Имя/логин и время больше не спорят за одну строку на узком экране. */
html:root body #viewer-comments-list .comment-author-meta{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;min-width:0;flex:1}
html:root body #viewer-comments-list .comment-author-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%}
html:root body #viewer-comments-list .comment-time{display:block!important;position:static!important;margin:0!important}