/* ============================================================
   video_watch.css — /video/{id} watch page styling
   (post.php-এর comment-section CSS pattern reused + নতুন
   watch-page-নির্দিষ্ট styles)
   ============================================================ */

/* ── Header + title (single line, truncated with … — works in both
   full-page load and the videos.php overlay, unlike page-only <style>) ── */
.post-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}
.post-page-title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 8px;
}
.single-post-container {
    padding-bottom: 24px;
}

/* ── Header spacing + sticky video (works for both full-page load
   and the videos.php AJAX overlay, since .top-bar is position:fixed
   relative to the viewport in both cases) ── */
#video-watch-body {
    padding-top: 60px; /* .top-bar height — video starts right below header, never behind it */
}
.watch-page-video {
    position: sticky;
    top: 60px;      /* header height — video stays pinned here while scrolling, like YouTube */
    z-index: 900;   /* below header's 1000, above scrolling content underneath */
    background: var(--bg-body, #0f111a);
}

/* ── Comment section (mirrors post.php) ── */
.comments-section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    margin-top: 16px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
.comment-card { padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.comment-card:last-child { border-bottom: none; }
.comment-header { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.comment-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.comment-user-name { font-size:13.5px; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:4px; }
.comment-body { font-size:13px; color:var(--text-primary); line-height:1.45; padding-left:44px; word-break:break-word; }
.comment-meta { font-size:11px; color:var(--text-muted); padding-left:44px; margin-top:4px; display:flex; align-items:center; gap:12px; }
.comment-meta a { color:var(--text-muted); font-weight:500; }
.comment-meta a:hover { color:var(--primary); }
.comment-input-area {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 13.5px;
    outline: none;
    width: 100%;
    resize: none;
    font-family: inherit;
    transition: border-color 0.2s;
    height: 42px;
    max-height: 120px;
}
.comment-input-area:focus { border-color: var(--primary); }
.comment-submit-btn {
    background: var(--primary);
    border: none;
    color: #0f111a;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.nested-replies-list {
    margin-left: 30px;
    margin-top: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.reply-card { padding: 4px 0; }
.reply-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; }
.reply-body { font-size:12.5px; color:var(--text-primary); line-height:1.45; padding-left:36px; word-break:break-word; }
.reply-meta { font-size:10.5px; color:var(--text-muted); padding-left:36px; margin-top:2px; }

/* ── Watch page video block ── */
.watch-page-video {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 0;
}
.watch-page-video .video-thumbnail-img,
.watch-page-video .video-iframe,
.watch-page-video video {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    object-fit: cover;
    border: none;
}
.watch-thumb { display:block; position:relative; }
.video-source-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Caption bar (YouTube-style one-line → expand) ── */
.watch-caption-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 14px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}
.watch-caption-line { display:flex; gap:10px; align-items:center; overflow:hidden; }
.watch-views-inline { color: var(--text-muted); font-size:12.5px; white-space:nowrap; }
.watch-caption-oneline { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.watch-caption-full p { margin-top:6px; line-height:1.5; word-break:break-word; }

/* ── Actions row ── */
.watch-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}
.watch-actions-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.watch-actions-left .action-btn {
    display:flex; align-items:center; gap:6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}
.watch-actions-left .action-btn.liked { color: var(--primary); border-color: var(--primary); }
.watch-actions-left .action-btn.disliked { color: var(--danger,#e0245e); border-color: var(--danger,#e0245e); }
.watch-actions-left .action-btn.saved { color: var(--primary); }

/* ── Uploader row ── */
.watch-uploader-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.watch-uploader-row .avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; }
.watch-uploader-info { flex:1; min-width:0; }
.watch-uploader-name { font-weight:600; font-size:14px; color:var(--text-primary); display:flex; align-items:center; gap:6px; text-decoration:none; }
.watch-follow-btn {
    background: var(--primary);
    color: #0f111a;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.watch-follow-btn.following { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); }

/* ── Related videos ── */
.related-videos-section { margin-top: 6px; }
.related-video-row {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    text-decoration: none;
    color: inherit;
}
.related-video-thumb {
    width: 140px;
    min-width: 140px;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
.related-video-thumb img { width:100%; height:100%; object-fit:cover; }
.related-video-meta { min-width:0; }
.related-video-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-video-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* ── Collapsed comments bar (YouTube-style) ── */
.comments-collapsed-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
}
.comments-collapsed-count {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text-primary);
    white-space: nowrap;
}
.comments-collapsed-preview {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--text-muted);
}
.comments-collapsed-arrow {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}