/* ==========================================
   INLINE COMMENT BOX (home feed)
========================================== */

.inline-comment-box{
    display:none;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--border);
}

.inline-comment-box.open{
    display:block;
    animation:fadeUp .3s ease;
}

.inline-comment-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:280px;
    overflow-y:auto;
    margin-bottom:14px;
    padding-right:4px;
}

.inline-comment-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.inline-comment-item img{
    width:32px;
    height:32px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.inline-comment-body{
    flex:1;
    background:rgba(255,255,255,.4);
    border-radius:12px;
    padding:10px 14px;
}

html[data-theme="dark"] .inline-comment-body{
    background:rgba(255,255,255,.04);
}

.inline-comment-body h5{
    font-size:12.5px;
    font-weight:700;
    color:var(--ink);
}

.inline-comment-body h5 span{
    font-weight:500;
    color:var(--ink-faint);
    font-size:11px;
    margin-left:6px;
}

.inline-comment-body p{
    font-size:12.5px;
    color:var(--ink-soft);
    margin-top:4px;
    line-height:1.5;
}

.inline-empty-note{
    font-size:12.5px;
    color:var(--ink-faint);
    text-align:center;
    padding:10px 0;
}

.inline-comment-form{
    display:flex;
    align-items:center;
    gap:10px;
}

.inline-comment-form img{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.inline-comment-form input{
    flex:1;
    height:40px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.5);
    border-radius:12px;
    padding:0 14px;
    font-size:13px;
    font-family:inherit;
    color:var(--ink);
    outline:none;
}

html[data-theme="dark"] .inline-comment-form input{
    background:rgba(255,255,255,.05);
}

.inline-comment-form input:focus{
    border-color:var(--primary);
}

.inline-comment-form button{
    width:40px;
    height:40px;
    border:none;
    border-radius:12px;
    background:var(--primary);
    color:#fff;
    cursor:pointer;
    flex-shrink:0;
}

.inline-comment-form button:hover{
    background:var(--primary-dark);
}



/* ==========================================
   LIKE BUTTON — pop animation
========================================== */

.like-btn.liked{
    background:var(--primary-soft) !important;
    color:var(--primary) !important;
}

.like-btn.liked i{
    color:var(--primary);
}

@keyframes likePop{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.25); }
    100%{ transform:scale(1); }
}

.like-btn.like-pop i{
    animation:likePop .3s ease;
}