/* --- SWIPER SETUP --- */

.shorts-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.video-section {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: transform 0.3s ease;
}

.video-card-wrapper {
    position: relative;
    /* Explicit width (not just max-width) so the box has a definite size
       from layout alone. Without it, a <video> child happens to have a
       default intrinsic width that keeps this from collapsing, but an
       .image-carousel of position:absolute <img> slides contributes no
       intrinsic width at all and the wrapper collapses to 0. This is a
       fixed portrait frame for every reel — video or photo, any aspect
       ratio — with object-fit:contain letterboxing non-matching media
       in black rather than resizing the box to fit. */
    width: 100%;
    max-width: 450px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.video-card {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    overflow: hidden;
    border-radius: 25px;
    transition: box-shadow 0.3s ease;
}

.video-card:hover {
    box-shadow: 0 0 8px 1px rgba(255, 215, 0, 0.12), 0 0 16px 3px rgba(255, 195, 0, 0.07);
}

/* object-fit:contain (not cover) so a landscape video letterboxes in
   black against .video-card's own black background instead of the card
   itself resizing to a short/wide box — every reel in the vertical feed
   keeps the same fixed portrait frame, matching how mixed-orientation
   photo carousels are handled just below. */
.video-card video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* --- IMAGE CAROUSEL (photo-type reels) --- */

.image-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
}

/* object-fit:contain (not cover) so a reel mixing portrait and landscape
   photos never crops — the fixed portrait frame (.video-card-wrapper's
   plain CSS size, no longer resized per photo) stays constant across the
   whole carousel, and any photo whose own aspect ratio doesn't match it
   just letterboxes against this black background instead. */
.carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;
}

/* Lives inside .video-overlay-info now, right above .uploader-info (the
   name row) — in normal flow rather than absolutely positioned, so it
   always sits just above the name regardless of how tall the caption
   underneath ends up being. Still horizontally centered (cross-axis). */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    transition: background 0.2s ease, transform 0.2s ease;
}

.carousel-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* "01/10" page counter — sits over the photo itself (top-right), separate
   from the dot progress row which lives down by the name row now. */
.carousel-counter {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 15;
    background: rgba(255, 255, 255, 0.92);
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.carousel-counter-current {
    color: #000;
}

.carousel-counter-total {
    color: rgba(0, 0, 0, 0.55);
}

/* No visible arrow buttons on the photo carousel — the cursor itself
   becomes the prev/next hint on hover (toggled via .hover-prev/.hover-next
   in the mousemove handler), a plain 50/50 split of the image with no
   middle/neutral zone. Each is a dark circle + white chevron baked into
   the cursor image itself so it reads the same as the old buttons did. */
.image-carousel.hover-prev {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><circle cx='17' cy='17' r='16' fill='rgba(0,0,0,0.55)'/><path d='M19 10l-7 7 7 7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") 17 17, pointer;
}

.image-carousel.hover-next {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><circle cx='17' cy='17' r='16' fill='rgba(0,0,0,0.55)'/><path d='M15 10l7 7-7 7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") 17 17, pointer;
}

.following_acc {
    background: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #000 !important;
}

.video-overlay-top {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
}

.no-comments {
    text-align: center;
    margin-top: 50px;
}

.no-comments span {
    font-size: 14px;
}

.video-overlay-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Right padding only needs to clear the action-icon column's actual
       width (~34px icon + 15px right offset), not the old 90px reserve —
       the extra space was starving the name/caption row for no reason. */
    padding: 20px 60px 10px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: white;
    z-index: 10;
    box-sizing: border-box;
}

/* Like/comment/share column lives beside the portrait card rather than
   overlaid on top of the video — a sibling of .video-card inside
   .video-card-wrapper. Every reel now keeps the same fixed portrait
   frame (no more per-media resizing), so `left: 100%` always lands at
   the same constant right edge regardless of the media's own aspect
   ratio — no separate "short card" case needed anymore. */
.video-overlay-actions {
    position: absolute;
    bottom: 70px;
    left: 100%;
    margin-left: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 10;
}

/* Below ~768px there's no room beside the card for a floating column —
   fall back to the classic overlaid-on-video placement. */
@media (max-width: 768px) {
    .video-overlay-actions {
        left: auto;
        right: 15px;
        margin-left: 0;
    }
}

.uploader-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    min-width: 0;
}

.uploader-info img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid white;
    flex-shrink: 0;
}

.uploader-info .username {
    font-weight: bold;
    font-size: 12.5px;
    /* Intrinsic width: size to the name's own content instead of
       flex-growing to fill the row, so the follow button sits right next
       to the name (Name -> space -> Follow) instead of being pushed to
       the far edge. min-width:0 + ellipsis still protect against a name
       that's too long for the row on narrow viewports. */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.6);
}

.follow-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.follow-btn.following {
    background: white;
    color: black;
    border-color: white;
}

.video-description {
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.4;
    max-width: 90%;
    color: white;
    margin-top: 0;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.action-item span {
    margin-top: 4px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.6);
}

.action-item .icon-circle svg {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

.like-btn .icon-circle svg {
    width: 34px;
    height: 34px;
}

.toggle-comments-btn .icon-circle svg,
.share-btn .icon-circle svg {
    width: 24px;
    height: 24px;
}

.control-btn {
    background: transparent;
    border: none;
    cursor: pointer;
}

.navigation-buttons {
    /* The video card is a fixed max-width:450px box (see
       .video-card-wrapper) regardless of whether the uploaded reel itself
       is portrait or landscape — object-fit:cover always crops it to fill
       that same box. So anchoring off that known half-width (225px) keeps
       these buttons a constant, non-overlapping gap to the right of the
       card on every viewport, instead of the old `right: 29%` (a
       viewport-relative percentage that had no fixed relationship to the
       card's actual edge and would drift into overlapping the reel's own
       like/comment/share icon column on wider or narrower screens).
       The +78px (rather than the card's own +28px) also clears the
       like/comment/share column, which now floats beside the card
       (~68px wide including its 18px margin) instead of overlaying it. */
    position: absolute;
    left: calc(50% + 225px + 78px);
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 50;
}

/* Below ~1426px wide, the comments sidebar (400px, right-anchored) reaches
   far enough left to sit directly under the centered video card's own
   nav-arrows/Add-reel column. Rather than shrinking the sidebar (which
   barely helps — it would need to lose well over 100px to actually clear
   that column) shift the video + nav rail into the mostly-empty
   letterboxing space on their left while the sidebar's open. */
@media (min-width: 769px) {
    .shorts-container.comments-open .video-section {
        transform: translateX(-180px);
    }

    .shorts-container.comments-open .navigation-buttons {
        transform: translateY(-50%) translateX(-180px);
    }
}

.nav-btn {
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s, filter 0.3s ease;
}

.nav-btn:hover {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 195, 0, 0.3));
}

.nav-btn:active {
    transform: scale(0.9);
}

/* "Add reel" — a floating white circle button pinned to the bottom of the
   viewport, independent of any single reel slide. Icon-only (no label),
   with the same gold glow-on-hover as the up/down nav arrows for a
   consistent "interactive control" language across the page. */

.add-reel-fab {
    /* Same left offset as .btn-back-reels (top-left) so the two form a
       matching pair on the left edge — Back at the top, Add reel at the
       bottom. */
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.add-reel-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, filter 0.3s ease;
}

.add-reel-label {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.6);
}

.add-reel-fab:hover .add-reel-circle {
    transform: scale(1.06);
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 195, 0, 0.3));
}

.add-reel-fab:active .add-reel-circle {
    transform: scale(0.95);
}

.volume-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 50%;
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
}

.volume-btn svg {
    width: 26px;
    height: 26px;
}


/* ===PROGRESS BAR CSS === */

.video-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 50;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0px;
}

.video-progress-track {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    transition: height 0.2s ease, background 0.2s ease;
}

.video-progress-fill {
    height: 100%;
    width: 0%;
    background-color: white;
    position: relative;
}

.video-progress-fill::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%) scale(0);
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}


/* === HOVER & DRAGGING STATES === */

.video-progress-container:hover .video-progress-track,
.video-progress-container.is-dragging .video-progress-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.35);
}

.video-progress-container:hover .video-progress-fill::after,
.video-progress-container.is-dragging .video-progress-fill::after {
    transform: translate(50%, -50%) scale(1);
}


/* SIDEBAR STYLES */

.comments-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    background-color: #121212;
    border-left: 1px solid #333;
    z-index: 100;
    /* Animation Logic */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.comments-sidebar.active {
    transform: translateX(0);
    /* Slides in */
}


/* Sidebar Content Styles */

.sidebar-header {
    padding: 15px;
    border-bottom: 1px solid #333;
    background: #222328;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Same padding as .sidebar-header (the close-icon row above) so the
       name row below lines up with it instead of sitting 5px narrower. */
    padding: 15px;
    color: #fff;
    background: #222328;
}

.sidebar-post-info {
    margin-bottom: 20px;
}

.post-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
}

.post-user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.post-user-name-wrap {
    /* A plain flex item that owns the width calculation. Line-clamping
       (display:-webkit-box) is applied on the span inside instead of on
       this element directly — mixing -webkit-box with flex-item sizing
       on the same element makes the browser miscompute its width, which
       is what was causing the name to clamp/ellipsis well before it
       actually needed 2 lines. Explicit width:100% backs up flex-grow
       so it reliably fills the row out to the sidebar's edge. */
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

.post-comment-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 14px;
}

.post-comment-user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.hashtags-comment {
    font-weight: 600;
    color: white;
}

.hashtag {
    font-weight: bold;
    color: white;
}


/* "More" and "Less" buttons */

.toggle-text-btn {
    font-weight: 700;
    color: #ccc;
    cursor: pointer;
    margin-left: 5px;
}

.toggle-text-btn:hover {
    text-decoration: underline;
    color: white;
}

.sidebar-divider {
    border: 0;
    border-top: 1px solid #a0a0a0;
    margin: 15px 0;
}


/* ---  COMMENT STYLES --- */

.comment-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    animation: fadeIn 0.3s ease;
    max-width: 100%;
    min-width: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment-row.is-reply {
    margin-left: 25px;
    width: calc(100% - 25px);
}

.comment-row.is-reply img {
    width: 24px;
    height: 24px;
}

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

.comment-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

.comment-username {
    font-size: 13px;
    font-weight: 600;
    color: #e0e0e0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.comment-time {
    font-size: 11px;
    color: #888;
}

.comment-text {
    font-size: 14px;
    color: white;
    margin-bottom: 6px;
    line-height: 1.3;
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.comment-footer {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    cursor: pointer;
}

.comment-footer:hover {
    color: #ccc;
    text-decoration: underline;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-top: 4px;
    min-width: 24px;
}

.comment-like-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 3px;
}

.comment-remove-btn {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.comment-like-count {
    font-size: 11px;
    color: #888;
    padding-right: 10px;
    padding-bottom: 1px;
}


/* Red Heart for Liked State */

.comment-like-btn.liked svg path {
    fill: #fe2c55;
    stroke: none;
}

.comment-body .user {
    color: #999;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 4px;
    display: block;
}

.comment-body p {
    font-size: 13px;
    line-height: 1.4;
}

.comment-input-area {
    padding: 15px;
    border-top: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #222328;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25), 0 -4px 4px 0 rgba(0, 0, 0, 0.25);
}

.comment-input-area input {
    flex: 1;
    background: #333;
    border: none;
    padding: 10px;
    border-radius: 20px;
    color: white;
    outline: none;
}

.send-btn {
    background: none;
    border: none;
    color: #00d2ff;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-user span {
    color: #a7a7a7;
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.reels-credit {
    display: flex;
    gap: 6px;
    align-items: center;
}

.reels-credit a {
    color: #a7a7a7;
    text-align: center;
    font-family: Lato;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}


/* --- ANIMATIONS & INTERACTIONS --- */

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s;
    z-index: 10;
}

.video-card.paused .play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.like-btn.liked .heart-icon {
    fill: #fe2c55;
    stroke: #fe2c55;
    animation: heartBounce 0.3s ease-in-out;
}


/* Style untuk Loader */

.video-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    z-index: 5;
    animation: spin 1s linear infinite;
    display: none;
    pointer-events: none;
}

.video-loader.active {
    display: block;
}


/* Animasi Pusing */

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.replies-list {
    display: none;
    margin-top: 10px;
}

.replies-list.active {
    display: block;
}

.view-replies-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 0;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.view-replies-btn:hover {
    color: #fff;
}

.view-replies-btn::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 1px;
    background-color: #999;
}

.comment-footer.reply-active {
    font-weight: bold;
}

@media (max-width: 768px) {
    .navigation-buttons {
        display: none !important;
    }
    #commentsSidebar {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 80vh;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
        z-index: 1000;
    }
    #commentsSidebar.active {
        transform: translateY(0);
    }
    #commentsList {
        height: calc(100% - 120px);
        overflow-y: auto;
    }
    #commentsSidebar::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background-color: #ddd;
        border-radius: 2px;
    }
}

.comment-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    /* adjust if needed */
    width: 100%;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
}