/* interact.css — 点赞 / 评论（跟随 theme.css 的白色简约 + 绿色主题） */

/* ---------- 点赞按钮（页脚站点点赞 & 文章点赞共用） ---------- */
.like-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line,#e8ecef);background:#fff;color:var(--text,#374151);
  border-radius:99px;padding:5px 14px 5px 11px;font:inherit;font-size:.88rem;line-height:1.5;cursor:pointer;vertical-align:middle;
  transition:border-color .2s,background .2s,color .2s,transform .15s,box-shadow .2s}
.like-btn:hover{border-color:var(--g-l,#a7d7a9);background:var(--g-soft2,#f4fbf6);color:var(--g-d,#1e8a39)}
.like-btn:active{transform:scale(.96)}
.like-btn:disabled{opacity:.6;cursor:wait}
.like-btn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:transform .25s,fill .2s,stroke .2s}
.like-btn.liked{border-color:#f5b6bf;background:#fff1f3;color:#e5484d}
.like-btn.liked svg{fill:#e5484d;stroke:#e5484d}
.like-btn.pop svg{animation:likePop .45s cubic-bezier(.2,1.6,.4,1)}
.like-btn .n{font-variant-numeric:tabular-nums;min-width:1ch}
@keyframes likePop{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(-8deg)}100%{transform:scale(1)}}

footer .like-btn{margin-left:10px;padding:2px 11px 2px 9px;font-size:.82rem;color:#555}
footer .like-btn.liked{color:#e5484d}

/* ---------- 文章底部互动区 ---------- */
.interact-wrap{margin-top:40px}
.article-like-bar{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 0 8px}
.article-like-bar .like-btn{padding:10px 26px 10px 22px;font-size:1rem;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.article-like-bar .like-btn svg{width:22px;height:22px}
.article-like-bar .tip{font-size:.82rem;color:var(--muted,#6b7280)}

/* ---------- 评论 ---------- */
.cm-box{margin-top:30px;background:var(--card,#fff);border:1px solid var(--line,#e8ecef);border-radius:var(--r,18px);padding:24px 26px;box-shadow:var(--sh,none)}
.cm-title{display:flex;align-items:baseline;gap:10px;margin:0 0 18px;font-size:1.15rem;color:var(--ink,#111827);font-weight:650}
.cm-title small{font-size:.85rem;color:var(--muted,#6b7280);font-weight:400}
.cm-form{display:grid;gap:12px}
.cm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cm-form input[type=text],.cm-form input[type=email],.cm-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--line,#e8ecef);background:#fff;
  border-radius:12px;padding:10px 14px;font:inherit;font-size:.95rem;color:var(--ink,#111827);outline:none;transition:border-color .2s,box-shadow .2s}
.cm-form textarea{min-height:110px;resize:vertical;line-height:1.7}
.cm-form input:focus,.cm-form textarea:focus{border-color:var(--g,#28a745);box-shadow:0 0 0 3px rgba(40,167,69,.14)}
.cm-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.cm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cm-foot .hint{font-size:.8rem;color:var(--faint,#9ca3af)}
.cm-submit{border:0;background:var(--g,#28a745);color:#fff;font:inherit;font-weight:600;font-size:.95rem;padding:9px 24px;border-radius:12px;cursor:pointer;transition:background .2s,transform .15s}
.cm-submit:hover{background:var(--g-d,#1e8a39)}.cm-submit:active{transform:scale(.97)}.cm-submit:disabled{opacity:.6;cursor:wait}
.cm-replying{display:none;align-items:center;gap:8px;font-size:.85rem;background:var(--g-soft,#eaf7ed);color:var(--g-d,#1e8a39);padding:6px 12px;border-radius:10px;width:max-content;max-width:100%}
.cm-replying.on{display:flex}
.cm-replying button{border:0;background:none;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0 2px}
.cm-list{margin-top:26px;display:grid;gap:0}
.cm-item{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line2,#f0f3f5)}
.cm-item:first-child{border-top:0;padding-top:4px}
.cm-avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-size:1rem;user-select:none}
.cm-main{flex:1;min-width:0}
.cm-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem;color:var(--muted,#6b7280)}
.cm-meta b{color:var(--ink,#111827);font-weight:600;font-size:.95rem;word-break:break-all}
.cm-badge{background:var(--g,#28a745);color:#fff;border-radius:6px;padding:0 7px;font-size:.72rem;line-height:1.6}
.cm-text{margin:6px 0 4px;white-space:pre-wrap;word-break:break-word;color:var(--text,#374151);line-height:1.75}
.cm-reply-btn{border:0;background:none;color:var(--muted,#6b7280);font:inherit;font-size:.82rem;cursor:pointer;padding:0}
.cm-reply-btn:hover{color:var(--g-d,#1e8a39)}
.cm-replies{margin-top:10px;background:var(--bg,#f6f8f7);border-radius:14px;padding:2px 16px}
.cm-replies .cm-item{padding:14px 0}
.cm-replies .cm-avatar{width:32px;height:32px;font-size:.85rem}
.cm-empty{text-align:center;color:var(--faint,#9ca3af);padding:26px 0 8px}
.cm-more{display:block;margin:12px auto 0;border:1px solid var(--line,#e8ecef);background:#fff;border-radius:99px;padding:7px 22px;font:inherit;font-size:.88rem;color:var(--text,#374151);cursor:pointer}
.cm-more:hover{border-color:var(--g-l,#a7d7a9);color:var(--g-d,#1e8a39)}
.cm-closed{color:var(--muted,#6b7280);text-align:center;padding:10px 0}
@media(max-width:640px){.cm-box{padding:18px 16px}.cm-row{grid-template-columns:1fr}.cm-item{gap:10px}}