/* Extracted from social.php */
/* ── Social page layout ────────────────────────────────────────────────────── */
.social-container { max-width: 680px; padding-top: 2rem; padding-bottom: 3rem; }
.social-create-box { padding: 1.25rem; margin-bottom: 1.5rem; }
.social-create-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.social-create-label { color: var(--text-secondary); font-size: .9rem; }
.social-create-box textarea {
    width: 100%; background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; padding: .75rem;
    font-size: .95rem; font-family: inherit; resize: vertical;
    box-sizing: border-box; transition: border-color .2s;
}
.social-create-box textarea:focus { outline: none; border-color: var(--primary); }
.social-create-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: .75rem; margin-top: .6rem;
}
.char-counter { font-size: .82rem; color: var(--text-muted); }

/* ── Post card ─────────────────────────────────────────────────────────────── */
.social-post {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 1.1rem 1.25rem; margin-bottom: .85rem;
    transition: border-color .2s;
}
.social-post:hover { border-color: var(--primary, #ff5a4f); }
.social-post-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.social-post-meta { display: flex; flex-direction: column; gap: .15rem; }
.social-avatar-link { display: flex; flex-shrink: 0; }
.social-avatar-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.social-avatar-placeholder {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--primary, #ff5a4f); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem; flex-shrink: 0;
}
.social-avatar-xs { width: 28px !important; height: 28px !important; font-size: .8rem !important; }
.social-avatar-sm .social-avatar-img,
.social-avatar-sm .social-avatar-placeholder { width: 32px; height: 32px; font-size: .85rem; }
.social-username { font-weight: 600; color: var(--text); font-size: .95rem; text-decoration: none; }
.social-username:hover { color: var(--primary, #ff5a4f); }
.social-username-sm { font-size: .85rem; }
.social-time { font-size: .8rem; color: var(--text-muted); }
.social-post-content { color: var(--text); line-height: 1.55; margin: 0 0 .85rem; white-space: pre-wrap; word-break: break-word; }
.social-post-footer { display: flex; align-items: center; gap: .75rem; }
.like-btn, .toggle-post-comments {
    background: none; border: 1px solid var(--border); border-radius: 20px;
    color: var(--text-secondary); padding: .3rem .75rem; font-size: .85rem;
    cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: .3rem;
}
.like-btn:hover, .toggle-post-comments:hover { border-color: var(--primary, #ff5a4f); color: var(--text); }
.like-btn.liked { border-color: #e74c3c; color: #e74c3c; }
.load-more-wrap { text-align: center; margin-top: 1.25rem; }
.load-more-btn {
    background: var(--surface-raised, var(--surface)); border: 1px solid var(--border);
    color: var(--text-secondary); border-radius: 8px; padding: .6rem 1.5rem;
    cursor: pointer; font-size: .9rem; transition: all .2s;
}
.load-more-btn:hover { border-color: var(--primary, #ff5a4f); color: var(--text); }
.load-more-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Comments ──────────────────────────────────────────────────────────────── */
.post-comments-section {
    margin-top: .85rem; border-top: 1px solid var(--border); padding-top: .85rem;
}
.post-comment { display: flex; gap: .6rem; margin-bottom: .7rem; align-items: flex-start; }
.post-comment-body { flex: 1; }
.post-comment-text { color: var(--text); font-size: .9rem; margin: .25rem 0 0; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.post-comment-form { display: flex; gap: .5rem; margin-top: .6rem; }
.post-comment-form input[type=text] {
    flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); padding: .4rem .7rem; font-size: .88rem; font-family: inherit;
}
.post-comment-form input[type=text]:focus { outline: none; border-color: var(--primary); }
.social-loading, .social-no-comments { font-size: .85rem; color: var(--text-muted); padding: .4rem 0; }
.social-login-prompt { padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }