/* =============================================
   Channel Feed
   - Container, scrollbar, empty state
   - Post cards (header, text, media, reactions)
   - Load-more button
   ============================================= */

/* ─── Channel feed container ─── */

.channel-container {
    flex: 1; overflow-y: auto; padding: 20px 24px;
    display: none; flex-direction: column; gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}
.channel-container.visible { display: flex; }
#channelPosts {
    display: flex; flex-direction: column; gap: 24px;
    align-items: center;
}
.channel-container::-webkit-scrollbar { width: 6px; }
.channel-container::-webkit-scrollbar-track { background: transparent; }
.channel-container::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

.channel-empty {
    text-align: center; color: var(--text-muted); padding: 60px 20px;
    font-size: 14px;
}

/* ─── Channel post ─── */

.channel-post {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 24px;
    animation: fadeIn 0.2s ease;
    max-width: 800px; width: 100%;
    align-self: center;
}
.channel-post .post-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.channel-post .post-author {
    font-size: 13px; font-weight: 600; color: var(--blue);
}
.channel-post .post-time {
    font-size: 11px; color: var(--text-muted);
}
.channel-post .post-text {
    font-size: 14px; line-height: 1.6; white-space: pre-wrap;
    word-break: break-word; margin-bottom: 10px;
}
.channel-post .post-media {
    margin-bottom: 10px; text-align: center;
}
.channel-post .post-media img {
    max-width: 100%; max-height: 400px; border-radius: 8px;
    cursor: pointer; display: block; margin: 0 auto;
}
.channel-post .post-media .file-download {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--blue); text-decoration: none; font-size: 13px;
}
.channel-post .post-media .file-download:hover {
    border-color: var(--blue);
}
/* ─── Video: fixed placeholder, no preload ─── */
.channel-post .post-media.video-wrap {
    position: relative;
    width: 100%; aspect-ratio: 16/9;
    background: #111; border-radius: 8px;
    overflow: hidden; cursor: pointer;
}
.channel-post .post-media.video-wrap::before {
    content: '▶';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 48px; color: rgba(255,255,255,0.7);
    z-index: 1; pointer-events: none;
    transition: opacity 0.2s;
}
.channel-post .post-media.video-wrap.playing::before {
    opacity: 0;
}
.channel-post .post-media.video-wrap video {
    width: 100%; height: 100%; border-radius: 8px;
    display: block; object-fit: contain; background: #111;
}
.channel-post .post-reactions {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.reaction-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 16px;
    font-size: 14px; cursor: pointer;
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text-secondary); transition: all var(--transition);
    font-family: inherit;
}
.reaction-btn:hover { border-color: var(--blue); color: var(--text-primary); }
.reaction-btn.active {
    background: var(--blue-glow); border-color: var(--blue);
    color: var(--blue);
}
.reaction-btn .reaction-count {
    font-size: 12px; font-weight: 600;
}
.reaction-btn.loading {
    opacity: 0.5; pointer-events: none;
}

/* ─── Load more button ─── */

.channel-load-more {
    align-self: center; padding: 10px 28px;
    background: rgba(59,158,223,0.08); border: 1px solid rgba(59,158,223,0.2);
    border-radius: var(--radius-sm); color: var(--blue);
    cursor: pointer; font-size: 13px; font-family: inherit;
    font-weight: 500; transition: all var(--transition);
}
.channel-load-more:hover { background: rgba(59,158,223,0.15); border-color: var(--blue); }