/* static/css/social.css */

.feed-wrapper { max-width: 640px; margin: 40px auto; padding: 0 16px; }
.feed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.feed-header h1 { font-size: 1.6rem; font-weight: 900; margin: 0; color: var(--tbg-text); }
.feed-list { display: flex; flex-direction: column; gap: 16px; }

.post-card { background: var(--bg-card); border-radius: var(--tbg-radius-md); padding: 20px; border: 1px solid var(--tbg-border); transition: var(--tbg-transition); }
.post-card:hover { border-color: var(--neon-mint); box-shadow: var(--tbg-shadow-hover); }
.post-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.post-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #79FFC0, #21F28B); color: #03150B; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; overflow: hidden; text-decoration: none; }
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }

.post-meta { display: flex; flex-direction: column; flex: 1; }
.post-author { font-weight: 800; color: var(--tbg-text); text-decoration: none; font-size: 0.95rem; transition: color .18s ease; }
.post-author:hover { color: var(--neon-mint); }
.post-time { color: var(--tbg-text-muted); font-size: 0.8rem; }

.post-team-tag { font-size: 0.75rem; background: rgba(33, 242, 139, .14); color: var(--neon-mint); padding: 4px 10px; border-radius: var(--tbg-radius-pill); font-weight: 700; border: 1px solid rgba(121, 255, 192, .16); }
.post-text { font-size: 0.95rem; line-height: 1.6; color: var(--tbg-text); margin-bottom: 14px; word-wrap: break-word; }
.post-text p { margin: 0 0 8px; }

.post-image { border-radius: var(--tbg-radius-sm); overflow: hidden; margin-bottom: 14px; border: 1px solid var(--tbg-border); }
.post-image img { width: 100%; height: auto; display: block; }

.post-footer { display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--tbg-border); }
.post-action { color: var(--tbg-text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 600; padding: 4px 8px; border-radius: var(--tbg-radius-sm); transition: var(--tbg-transition); }
.post-action:hover { background: rgba(33, 242, 139, .09); color: var(--neon-mint); }

/* Composer */
.composer-card { background: var(--bg-card); border-radius: var(--tbg-radius-md); padding: 16px; border: 1px solid var(--tbg-border); margin-bottom: 20px; }
.composer-top { display: flex; gap: 12px; align-items: flex-start; }
.composer-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #79FFC0, #21F28B); color: #03150B; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; overflow: hidden; }
.composer-avatar img { width: 100%; height: 100%; object-fit: cover; }

.composer-form { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.composer-textarea { width: 100%; border: none; outline: none; font-family: inherit; font-size: 0.95rem; resize: vertical; min-height: 48px; padding: 8px 0; background: transparent; color: var(--tbg-text); }
.composer-textarea::placeholder { color: var(--tbg-text-muted); }

.composer-extras { display: flex; gap: 8px; flex-wrap: wrap; }
.composer-input-small { flex: 1; min-width: 140px; padding: 8px 12px; border: 1px solid var(--tbg-border); border-radius: var(--tbg-radius-sm); font-size: 0.85rem; font-family: inherit; background: #050F0A; color: var(--tbg-text); }
.composer-input-small:focus { outline: none; border-color: var(--neon-mint); box-shadow: 0 0 0 3px rgba(33, 242, 139, .11); }

.composer-actions { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--tbg-border); }
.composer-file-label { cursor: pointer; position: relative; }
.composer-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.composer-file-btn { display: inline-block; padding: 6px 12px; background: rgba(9, 29, 19, .72); border: 1px solid var(--tbg-border); color: var(--tbg-text); border-radius: var(--tbg-radius-sm); font-size: 0.85rem; font-weight: 600; transition: var(--tbg-transition); }
.composer-file-btn:hover { border-color: var(--neon-mint); color: var(--neon-mint); }
.composer-filename { font-size: 0.75rem; color: var(--neon-mint); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.composer-submit { margin-left: auto; padding: 8px 24px; font-size: 0.9rem; background: linear-gradient(135deg, #79FFC0 0%, #21F28B 52%, #10C875 100%); color: #03150B; border: 1px solid rgba(174, 255, 213, .72); font-weight: 750; }

/* Reactions */
.post-actions { display: flex; gap: 16px; align-items: center; padding-top: 12px; border-top: 1px solid var(--tbg-border); margin-top: 12px; }
.reaction-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.reaction-btn { background: transparent; border: 1px solid transparent; border-radius: var(--tbg-radius-pill); padding: 4px 8px; font-size: 1rem; cursor: pointer; transition: var(--tbg-transition); filter: grayscale(100%) opacity(0.6); }
.reaction-btn:hover { background: rgba(33, 242, 139, .09); filter: grayscale(0%) opacity(1); border-color: rgba(121, 255, 192, .16); }
.reaction-btn.is-active { background: rgba(33, 242, 139, .15); border-color: var(--neon-mint); filter: none; }
.reaction-total { margin-left: 4px; font-size: 0.8rem; color: var(--tbg-text-muted); font-weight: 700; }

/* Comments */
.comments-section { margin-top: 32px; background: linear-gradient(150deg, #0A1912, #060E0A); border-radius: var(--tbg-radius-md); padding: 24px; border: 1px solid rgba(139, 255, 190, .12); }
.comments-section h2 { margin: 0 0 16px; font-size: 1.1rem; font-weight: 800; color: var(--tbg-text); }
.comment-card { background: linear-gradient(145deg, #10271B, #09140F); border: 1px solid rgba(139, 255, 190, .09); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #79FFC0, #21F28B); color: #03150B; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; flex-shrink: 0; overflow: hidden; }
.comment-author { font-weight: 800; font-size: 0.85rem; color: var(--tbg-text); }
.comment-content { font-size: 0.9rem; line-height: 1.5; color: var(--tbg-text); padding-left: 42px; }

@media (max-width: 768px) {
    .feed-wrapper { margin: 16px auto; padding: 0 12px; }
    .feed-header { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
    .feed-header h1 { font-size: 1.3rem; }
    .post-card { padding: 14px; border-radius: var(--tbg-radius-sm); }
    .post-header { gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
    .post-avatar { width: 36px; height: 36px; font-size: 1rem; }
    .post-author { font-size: 0.9rem; }
    .post-time { font-size: 0.75rem; }
    .post-team-tag { font-size: 0.7rem; padding: 3px 8px; }
    .post-text { font-size: 0.9rem; line-height: 1.5; margin-bottom: 10px; }
    .post-footer { padding-top: 10px; gap: 12px; }
    .post-action { font-size: 0.8rem; }
    .empty-feed { padding: 40px 16px; }
    .comments-section { padding: 16px; border-radius: var(--tbg-radius-sm); }
    .comment-content { padding-left: 0; font-size: 0.85rem; }
    .reaction-btn { font-size: 0.9rem; padding: 3px 6px; }
}