/* Лайк и комментарии статей — общие для article.php и DevBlog (разметка: article_engagement.php) */
/* ===== Лайк статьи ===== */
.art-like-bar { display: flex; align-items: center; gap: .9rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.07); }
.art-like-btn {
    display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
    background: rgba(26,42,58,.55); border: 1px solid rgba(212,175,55,.22); color: #cdd6f4;
    border-radius: 999px; padding: .6rem 1.2rem; font-size: .95rem; font-weight: 600;
    transition: transform .15s ease, border-color .2s, background .2s, color .2s; user-select: none;
}
.art-like-btn i { font-size: 1.05rem; color: #f38ba8; transition: transform .2s ease; }
.art-like-btn:hover { border-color: rgba(243,139,168,.55); transform: translateY(-1px); }
.art-like-btn.liked { background: rgba(243,139,168,.14); border-color: rgba(243,139,168,.6); color: #f9c9d6; }
.art-like-btn.pop i { animation: likePop .38s ease; }
@keyframes likePop { 0%{transform:scale(1);} 40%{transform:scale(1.45);} 100%{transform:scale(1);} }
.art-like-count { min-width: 1ch; text-align: left; }
.art-like-hint { font-size: .82rem; color: #6c7086; }

/* ===== Комментарии ===== */
.comments { margin-top: 3rem; }
.comments-title { font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--primary-gold); margin-bottom: 1.2rem; display: flex; align-items: center; gap: .5rem; }
.comments-title .cnt { font-size: .9rem; color: #6c7086; font-family: inherit; }

.comment-form { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 2rem; }
.comment-form textarea {
    width: 100%; min-height: 92px; resize: vertical; box-sizing: border-box;
    background: rgba(10,14,23,.6); border: 1px solid rgba(138,109,255,.25); border-radius: 12px;
    padding: .8rem 1rem; color: #cdd6f4; font-family: inherit; font-size: .95rem; line-height: 1.55;
    transition: border-color .2s;
}
.comment-form textarea:focus { outline: none; border-color: rgba(212,175,55,.55); }
.comment-form-row { display: flex; align-items: center; gap: .8rem; }
.comment-submit {
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
    background: linear-gradient(92deg, var(--primary-gold), #c99c33); color: #1a1a2e; font-weight: 700;
    border: none; border-radius: 10px; padding: .6rem 1.3rem; font-size: .9rem; font-family: inherit;
    transition: opacity .2s, transform .15s;
}
.comment-submit:hover { transform: translateY(-1px); }
.comment-submit:disabled { opacity: .5; cursor: default; transform: none; }
.comment-form-hint { font-size: .82rem; color: #6c7086; }
.comment-reply-to { font-size: .82rem; color: #cba6f7; display: flex; align-items: center; gap: .5rem; }
.comment-reply-to button { background: none; border: none; color: #6c7086; cursor: pointer; font-size: .82rem; }
.comment-reply-to button:hover { color: #f38ba8; }

.comment-login-prompt {
    background: rgba(138,109,255,.07); border: 1px solid rgba(138,109,255,.2); border-radius: 12px;
    padding: 1rem 1.2rem; color: #a6adc8; font-size: .92rem; margin-bottom: 2rem;
}
.comment-login-prompt a { color: #cba6f7; text-decoration: none; font-weight: 600; }
.comment-login-prompt a:hover { text-decoration: underline; }

.comment-list { display: flex; flex-direction: column; gap: 1.1rem; }
.comment { display: flex; gap: .85rem; }
.comment.reply { margin-left: 2.6rem; }
.comment-avatar {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-weight: 700;
    background: linear-gradient(135deg, rgba(138,109,255,.3), rgba(212,175,55,.25)); color: #e6c75a; font-size: 1rem;
    border: 1px solid rgba(212,175,55,.25);
}
.comment-body { flex: 1; min-width: 0; background: rgba(26,42,58,.45); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: .75rem 1rem; }
.comment-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
.comment-author { font-weight: 700; color: #e3e8f5; font-size: .92rem; }
.comment-time { font-size: .76rem; color: #6c7086; }
.comment-reply-mention { color: #cba6f7; font-size: .82rem; }
.comment-text { color: #cdd6f4; font-size: .95rem; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.comment-text.deleted { color: #6c7086; font-style: italic; }
.comment-actions { display: flex; gap: 1rem; margin-top: .5rem; }
.comment-actions button { background: none; border: none; cursor: pointer; color: #6c7086; font-size: .8rem; padding: 0; transition: color .2s; }
.comment-actions button:hover { color: var(--primary-gold); }
.comment-actions button.del:hover { color: #f38ba8; }
.comment.pending .comment-body { border-style: dashed; border-color: rgba(249,226,175,.4); background: rgba(249,226,175,.05); }
.comment-pending { font-size: .72rem; font-weight: 700; color: #f9e2af; border: 1px solid rgba(249,226,175,.4); border-radius: 6px; padding: .08rem .45rem; display: inline-flex; align-items: center; gap: .3rem; }
.comment-target { box-shadow: 0 0 0 2px rgba(212,175,55,.4); border-radius: 12px; transition: box-shadow 1.2s ease; }
.comments-empty { color: #6c7086; font-size: .92rem; padding: .5rem 0; }
@media (max-width: 600px) { .comment.reply { margin-left: 1.1rem; } }