/* ==========================================================================
   Doberman Comments — лента комментариев под записью
   Минимализм: линии вместо карточек, чёрно-белые кнопки-«таблетки», акцент только на фокусе и лайке.
   Токены — в base.css. Селекторы с #dc-comments перебивают стили статьи (.ab-prose) без !important.
   ========================================================================== */

#dc-comments {
    max-width: none;
    margin: clamp(56px, 8vw, 96px) 0 0;
    padding: 0 0 8px;
    background: none;
    scroll-margin-top: 96px;
}
.admin-bar #dc-comments { scroll-margin-top: 128px; }

/* Состояния: до проверки сессии форму не показываем (без «прыжка» вёрстки) */
#dc-comments .dc-compose,
#dc-comments .dc-user-bar { display: none; }
#dc-comments[data-state="user"]    .dc-compose  { display: block; }
#dc-comments[data-state="user"]    .dc-user-bar { display: flex; }
#dc-comments[data-state="user"]    .dc-auth     { display: none; }
#dc-comments[data-state="loading"] .dc-auth     { visibility: hidden; }

/* ── Заголовок ──────────────────────────────────────────────────────── */
#dc-comments .dc-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
#dc-comments .dc-title {
    margin: 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -.035em; font-weight: 700; color: var(--dc-tx);
}
#dc-comments .dc-count { margin-left: 8px; font-size: .55em; font-weight: 500; letter-spacing: 0; color: var(--dc-mu); font-variant-numeric: tabular-nums; vertical-align: .35em; }

#dc-comments .dc-user-bar { align-items: center; gap: 10px; font-size: 14px; min-width: 0; }
#dc-comments .dc-user-name { font-weight: 500; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dc-comments .dc-user-bar .dc-btn { height: 32px; padding: 0 14px; font-size: 13px; }
#dc-comments .dc-profile-link {
    color: var(--dc-mu); font-size: 13px; text-decoration: underline; text-decoration-color: var(--dc-ln); text-underline-offset: 3px;
}
#dc-comments .dc-profile-link:hover { color: var(--dc-tx); text-decoration-color: currentColor; }

#dc-comments .dc-badge {
    display: inline-flex; align-items: center; height: 18px; padding: 0 8px; margin-left: 8px;
    border: 1px solid var(--dc-ln); border-radius: 999px;
    font-size: 11px; font-weight: 500; line-height: 1; color: var(--dc-mu); vertical-align: middle;
}

/* ── Вход (email → код) ─────────────────────────────────────────────── */
#dc-comments .dc-auth { margin: 24px 0 4px; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--dc-ln); border-radius: 24px; }
#dc-comments .dc-auth__step { display: none; }
#dc-comments .dc-auth__step.is-active { display: block; }
#dc-comments .dc-auth__label { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
#dc-comments .dc-auth__hint  { margin: 6px 0 16px; font-size: 14px; color: var(--dc-mu); }
#dc-comments .dc-auth__hint strong { color: var(--dc-tx); font-weight: 500; overflow-wrap: anywhere; }
#dc-comments .dc-auth__row   { display: flex; gap: 8px; align-items: stretch; }
#dc-comments .dc-auth__row .dc-input { flex: 1 1 0; min-width: 0; }
#dc-comments .dc-auth__row .dc-btn   { flex: none; height: 44px; }
#dc-comments .dc-auth__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }

/* ── Форма комментария ──────────────────────────────────────────────── */
#dc-comments .dc-compose { margin: 24px 0 4px; }
#dc-comments .dc-compose__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
#dc-comments .dc-compose__note { flex: 1; margin: 0; font-size: 12px; line-height: 1.45; color: var(--dc-mu); }
#dc-comments .dc-char-count { font-size: 12px; color: var(--dc-mu); font-variant-numeric: tabular-nums; }
#dc-comments .dc-char-count.is-over { color: var(--dc-err); }
#dc-comments .dc-notice:empty { display: none; }

/* ── Лента ──────────────────────────────────────────────────────────── */
#dc-comments .dc-list { margin-top: 20px; }

#dc-comments .dc-comment,
#dc-comments .dc-reply { --av: 36px; --ind: 48px; }
#dc-comments .dc-reply { --av: 28px; --ind: 40px; }

#dc-comments .dc-comment { padding: 22px 0; border-top: 1px solid var(--dc-ln); transition: opacity .3s; }

#dc-comments .dc-comment__head { display: grid; grid-template-columns: var(--av) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
#dc-comments .dc-comment__avatar { --s: var(--av); }
#dc-comments .dc-comment__name { display: flex; align-items: center; flex-wrap: wrap; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
#dc-comments .dc-comment__name-text { overflow-wrap: anywhere; }
#dc-comments .dc-comment__date { font-size: 13px; line-height: 1.3; color: var(--dc-mu); }

#dc-comments .dc-comment__body {
    margin: 8px 0 0 var(--ind); font-size: 16px; line-height: 1.6; color: var(--dc-tx); overflow-wrap: anywhere;
}
#dc-comments .dc-reply .dc-comment__body { font-size: 15px; }

#dc-comments .dc-comment__actions { display: flex; align-items: center; gap: 2px; margin: 8px 0 0 calc(var(--ind) - 10px); }
#dc-comments .dc-btn--action {
    height: 30px; padding: 0 10px; gap: 6px; border: 0; font-size: 13px; color: var(--dc-mu);
    font-variant-numeric: tabular-nums;
}
#dc-comments .dc-btn--action:not(:disabled):hover { background: var(--dc-ln); color: var(--dc-tx); }
#dc-comments .dc-btn--action.is-liked { color: var(--dc-ac); }
#dc-comments .dc-btn--action svg { flex: none; }

#dc-comments .dc-btn--delete {
    width: 30px; height: 30px; padding: 0; border: 0; color: var(--dc-mu); opacity: 0;
}
#dc-comments .dc-comment__head:hover .dc-btn--delete,
#dc-comments .dc-btn--delete:focus-visible { opacity: 1; }
#dc-comments .dc-btn--delete:hover { background: var(--dc-ln); color: var(--dc-err); }
@media (hover: none) { #dc-comments .dc-btn--delete { opacity: 1; } }

/* Ответы: один уровень, тонкая линия слева */
#dc-comments .dc-replies { margin: 10px 0 0 calc(var(--ind) - 6px); padding-left: 18px; border-left: 1px solid var(--dc-ln); }
#dc-comments .dc-replies:empty { display: none; }
#dc-comments .dc-reply { padding: 14px 0 4px; }
#dc-comments .dc-reply + .dc-reply { margin-top: 6px; }

#dc-comments .dc-reply-form { display: none; margin: 12px 0 0 var(--ind); }
#dc-comments .dc-reply-form.is-open { display: block; }
#dc-comments .dc-reply-form__footer { display: flex; gap: 8px; margin-top: 8px; }

/* ── Низ ленты ──────────────────────────────────────────────────────── */
#dc-comments .dc-list__footer { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
#dc-comments .dc-spinner { display: none; width: 18px; height: 18px; margin: 14px auto; border: 2px solid var(--dc-ln); border-top-color: var(--dc-tx); border-radius: 50%; animation: dc-spin .7s linear infinite; }
#dc-comments .dc-spinner.is-active { display: block; }
@keyframes dc-spin { to { transform: rotate(360deg); } }

#dc-comments .dc-empty { padding: 32px 0 24px; border-top: 1px solid var(--dc-ln); text-align: center; font-size: 15px; color: var(--dc-mu); }
#dc-comments .dc-empty--error { color: var(--dc-err); }

/* ── Телефон ────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    #dc-comments .dc-auth__row { flex-direction: column; }
    #dc-comments .dc-auth__row .dc-input { flex: none; }
    #dc-comments .dc-auth__row .dc-btn { width: 100%; }
    #dc-comments .dc-comment,
    #dc-comments .dc-reply { --ind: 0px; }
    #dc-comments .dc-comment__actions { margin-left: -10px; }
    #dc-comments .dc-replies { margin-left: 4px; padding-left: 14px; }
    #dc-comments .dc-compose__footer { flex-wrap: wrap; }
}

#dc-comments .dc-user-avatar { --s: 28px; }
#dc-comments .dc-anchor { display: block; position: relative; top: -96px; height: 0; visibility: hidden; }