/* Comment Menu Styles - 3-Dots Menu - FIXED MOBILE BLOCKING ISSUE */

/* Container for the 3-dots menu - inside #likeButton, above like button */
.comment-menu-container {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
    pointer-events: none;  /* CRITICAL: Don't block clicks when hidden */
}

/* When visible, allow pointer events */
.comment-menu-container:hover,
.itemContainer:hover .comment-menu-container {
    pointer-events: auto !important;
}

/* Show 3-dots on hover of comment */
.itemContainer:hover .comment-menu-container {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Keep menu visible when hovering over it */
.comment-menu-container:hover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Stack dots above like button */
#likeButton {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* The 3-dots button */
.comment-dots-btn {
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 4px 8px !important;
    color: #606060 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transition: background-color 0.2s ease;
    border-radius: 2px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 30px !important;
    min-height: 30px !important;
}

.comment-dots-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.comment-dots-btn .dots {
    display: block;
    letter-spacing: 1px;
    user-select: none;
}

.comment-dots-btn .dots {
    margin-top: 0 !important;
    margin-right: 0 !important;
}

/* The popup menu */
.comment-menu-popup {
    display: none !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-100%) !important;
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    min-width: 120px !important;
    z-index: 1000 !important;
    margin-bottom: -20px !important;
}



/* Show popup when active */
.comment-menu-popup.show {
    z-index: 200000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Delete button in popup */
.comment-menu-delete {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    width: 100% !important;
    padding: 10px 16px !important;
    background: none !important;
    border: none !important;
    text-align: left !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #e0e0e0 !important;
    transition: background-color 0.2s ease;
}

.comment-menu-delete:hover {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}

.comment-menu-delete i {
    color: #aaa !important;
    font-size: 14px !important;
}

/* Admin delete button - same style as regular delete */
.comment-menu-delete.comment-admin-delete {
    white-space: nowrap !important;
}

/* Report link in popup */
.comment-menu-report {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    width: 100% !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    color: #333 !important;
    transition: background-color 0.2s ease;
}

.comment-menu-report:hover {
    background-color: #f5f5f5 !important;
}

.comment-menu-report i {
    color: #ff9800 !important;
    font-size: 14px !important;
}

/* Make sure commentHeader is positioned relatively */
.commentHeader {
    position: relative !important;
    padding-right: 40px !important;
}

/* Adjust mainContainer to accommodate the button */
.mainContainer {
    position: relative !important;
}

/* For nested comments (replies), ensure proper alignment */
.comment[style*="padding-left: 65px"] .comment-menu-container {
    right: 0 !important;
}

/* Mobile adjustments - KEEP HIDDEN to avoid blocking */
@media (max-width: 768px) {
    /* IMPORTANT: Keep 3-dots HIDDEN on mobile to avoid blocking comment buttons */
    .comment-menu-container {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    /* Only show when actively hovering/tapping the comment header */
    .commentHeader:active .comment-menu-container,
    .commentHeader:focus-within .comment-menu-container {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    .comment-dots-btn {
        font-size: 16px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    .comment-menu-popup {
        min-width: 100px !important;
    }
    
    .comment-menu-delete,
    .comment-menu-report {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

/* Ensure Font Awesome icons are loaded */
.comment-menu-delete i.fas.fa-trash-alt::before {
    content: "🗑️";
    font-family: inherit;
    font-style: normal;
}

.comment-menu-report i.fas.fa-flag::before {
    content: "🚩";
    font-family: inherit;
    font-style: normal;
}


/*=================================================
=            3-dots for reply comments            =
===================================================*/

/* Extend hover area to the right using pseudo-element */
.repliesSection .commentHeader::after {
    content: '' !important;
    position: absolute !important;
    right: -100px !important;
    top: 0 !important;
    width: 100px !important;
    height: 100% !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Container at right: 0 (normal position) */
.repliesSection .comment-menu-container {
    position: absolute !important;
    right: 0 !important;  
    top: 0 !important;
    z-index: 10 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Position dots at fixed location from right edge */
.repliesSection .comment-dots-btn .dots {
    margin-top: -20px !important;
    margin-right: 0 !important;
}

/* Position popup aligned with dots */
.repliesSection .comment-menu-popup {
    right: 0 !important;
}

/* Fix: Position the container at a fixed distance from the right edge of the comment */
.repliesSection .comment-menu-container {
    right: -40px !important;
}

/* HOVER - Show on hover */
.repliesSection .commentHeader:hover .comment-menu-container {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.repliesSection .comment-menu-container:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* CRITICAL FIX: When popup is open, keep container visible - MUST COME LAST */
/* DEBUG: Force popup to be visible and centered */
.repliesSection .comment-menu-popup.show {
    z-index: 200000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: red !important;  /* Make it RED so you can see it */
    right: 0 !important;  /* Try positioning at right: 0 instead of -92px */
    z-index: 9999 !important;
}

/* Keep container visible when popup is showing - HIGHEST PRIORITY */
.repliesSection .comment-menu-container:has(.comment-menu-popup.show) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
}


/* CRITICAL: Keep container visible when menu is open */
.repliesSection .comment-menu-container.menu-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
}


  .repliesSection .itemContainer .controls #likeButton .comment-dots-btn .dots {
      position: relative !important;
      top: -67px !important;    /* move up */
      left: -14px !important;   /* move left */
  }


/*=====  End of 3-dots for reply comments  ======*/


/* Force hide all 3-dots when modal is closed - HIGHER SPECIFICITY */
body.comment-modal-closed .comment-menu-container,
body.comment-modal-closed .comment-menu-container .comment-dots-btn,
body.comment-modal-closed .comment-menu-container .comment-dots-btn .dots {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;  /* Nuclear option */
}

/* Force hide reply 3-dots specifically */
body.comment-modal-closed .repliesSection .comment-menu-container,
body.comment-modal-closed .repliesSection .comment-dots-btn,
body.comment-modal-closed .repliesSection .comment-dots-btn .dots {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}


/*===========================================
=    OVERRIDE style.css - Like Button Area  =
===========================================*/

/* Make itemContainer relative for absolute positioning */
.itemContainer {
    position: relative !important;
}

/* Position #likeButton to right edge, vertically stacked */
.itemContainer .controls #likeButton {
    position: absolute !important;
    left: 260px !important;
    top: 0 !important;
    transform: translateY(5px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-left: 0 !important;
}

/* Remove margin-left from like button image */
.itemContainer .controls button img {
    margin-left: 0 !important;
}

/* Fix likes count - remove absolute positioning */
.itemContainer .controls .likesCount {
    margin-left: 0 !important;
    position: relative !important;
    bottom: 0 !important;
}

/* Reply section like button */
.repliesSection .itemContainer .controls button img {
    margin-left: 0 !important;
}

.itemContainer .controls .likesCount {
    margin-right: 35px !important;
    margin-top: -15px !important;
}

#likeButton .comment-menu-container .comment-dots-btn .dots {
    transform: translate(-118px, 0) !important;
    z-index: 9999 !important;
}

/*=====  End of OVERRIDE style.css  ======*/



/*=================================================================
=            FIX FOR REPLY LIKE BUTTON AND 3-DOTS MENU            =
=================================================================*/

/* Reset positioning for replies - override all previous rules */
.repliesSection .itemContainer .controls #likeButton {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: 0 !important;
    transform: none !important;
    margin-left: 0 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Make like button visible and clickable in replies */
.repliesSection .itemContainer .controls #likeButton .likeButton,
.repliesSection .itemContainer .controls #likeButton button.likeButton {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    padding: 5px !important;
}

/* Like button image - no margin offset */
.repliesSection .itemContainer .controls #likeButton .likeButton img {
    margin-left: 0 !important;
    height: 16px !important;
    width: auto !important;
    margin-top: -45px !important;
    margin-left: 10px !important;
}

/* Likes count visible in replies */
.repliesSection .itemContainer .controls #likeButton .likesCount {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #888 !important;
    font-size: 12px !important;
    margin-left: -20px !important;
    margin-right: 0 !important;
    margin-top: -50px !important;
    position: relative !important;
}

/* 3-dots menu container in replies */
.repliesSection .itemContainer .controls #likeButton .comment-menu-container {
    display: inline-block !important;
    position: relative !important;
    margin-right: 10px !important;
}

/* 3-dots button in replies */
.repliesSection .itemContainer .controls #likeButton .comment-dots-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 3-dots text position - no crazy transforms */
.repliesSection .itemContainer .controls #likeButton .comment-dots-btn .dots {
    transform: none !important;
}

/* Show 3-dots on hover for replies */
.repliesSection .itemContainer:hover .comment-menu-container {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* GLOBAL FIX: Ensure 3-dots popup is visible everywhere */
.comment-menu-popup.show,
.popup-content .comment-menu-popup.show,
#panel-content .comment-menu-popup.show,
.repliesSection .comment-menu-popup.show {
    display: block !important;
    z-index: 200001 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: #2a2a2a !important;
}

/* Ensure Delete/Report buttons are visible */
.comment-menu-popup.show .comment-menu-delete,
.comment-menu-popup.show .comment-menu-report,
.comment-menu-popup.show a {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    color: #e0e0e0 !important;
}

.comment-menu-popup.show .comment-menu-delete:hover,
.comment-menu-popup.show .comment-menu-report:hover {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}

/* REPLY FORM TOGGLE FIX */
.comments .itemContainer .commentForm { display: none !important; }

/* REPLY FORM TOGGLE FIX - FORCE HIDE ALL REPLY FORMS */
.comments .itemContainer .commentForm,
.comments .itemContainer .commentForm.comment-form-container,
.commentSection .comments .commentForm,
#panel-content .comments .itemContainer .commentForm,
.popup-content .comments .itemContainer .commentForm,
.itemContainer > .commentForm,
.itemContainer .comment-form-container {
    display: none !important;
    visibility: hidden !important;
}

/* When reply form is active/open, show it */
.comments .itemContainer .commentForm.reply-form-open,
.itemContainer .commentForm.reply-form-open,
.commentForm.comment-form-container.reply-form-open {
    display: flex !important;
    visibility: visible !important;
}

/* FORCE SHOW reply form when open - match specificity of hide rules */
#panel-content .comments .itemContainer .commentForm.reply-form-open,
.popup-content .comments .itemContainer .commentForm.reply-form-open,
.comments .itemContainer .commentForm.comment-form-container.reply-form-open,
.commentSection .comments .commentForm.reply-form-open,
.itemContainer > .commentForm.reply-form-open,
.itemContainer .comment-form-container.reply-form-open {
    display: flex !important;
    visibility: visible !important;
    position: relative !important;
    bottom: auto !important;
    margin-top: 10px !important;
}

/* Extend reply comment text width to the right */
.repliesSection .comment .body,
.repliesSection .itemContainer .comment .body,
.commentSection .repliesSection .comment .body {
    max-width: 100% !important;
    width: 100% !important;
}


/* Reduce comment modal header margins */
#panel-content .commentSection .header,
.comments-panel .commentSection .header,
.popup-overlay .commentSection .header,
.popup-content .commentSection .header {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

#panel-content .commentCount,
.comments-panel .commentCount,
.popup-overlay .commentCount,
.popup-content .commentCount {
    margin-bottom: 0px !important;
}


/* Add space between header and first comment */
#panel-content .comments > .itemContainer:first-child,
.comments-panel .comments > .itemContainer:first-child,
.popup-overlay .comments > .itemContainer:first-child,
.popup-content .comments > .itemContainer:first-child {
    margin-top: 32px !important;  /* Adjust this value */
}


.repliesSection .comment-menu-popup.show,
.popup-overlay .repliesSection .comment-menu-popup.show,
.popup-content .repliesSection .comment-menu-popup.show {
    margin-bottom: 58px !important;
    left: auto !important;
    right: auto !important;
    margin-left: 223px !important;  /* Move right - increase for further right */
}


/* Move 3-dots, like button, and like count down for replies */
.repliesSection .itemContainer .controls {
    margin-top: 15px !important;  /* Increase for more down */
}


/* Move Reply button up for replies */
.repliesSection .itemContainer .controls #replyButton {
    margin-top: -25px !important;  /* Make more negative to move higher up */
}


/* Reduce space between Reply button and input box */
.repliesSection .itemContainer .controls {
    margin-bottom: -35px !important;
}


/* Remove border-top from comment form, i.e., from both reply and original comment input box */
.comments-panel .commentForm,
#panel-content .commentForm,
#panel-content .commentSection .commentForm,
.popup-content .commentForm {
    border-top: none !important;
}
 
#panel-content .comments .itemContainer .commentForm.reply-form-open, .popup-content .comments .itemContainer .commentForm.reply-form-open, .comments .itemContainer .commentForm.comment-form-container.reply-form-open, .commentSection .comments .commentForm.reply-form-open, .itemContainer > .commentForm.reply-form-open, .itemContainer .comment-form-container.reply-form-open {
    margin-bottom: 30px !important;
    padding-bottom: 0px !important;
}


/* Reduce space between REPLY button and input box for ORIGINAL comment only */
.comments > .itemContainer > .controls {
    margin-bottom: -25px !important;
}

.comments > .itemContainer > .commentForm.reply-form-open,
.comments > .itemContainer > .comment-form-container.reply-form-open {
    margin-top: -20px !important;
}


/* Reduces the space below input box. */
.comment-form-container > button {
    margin-left: 50px !important;
    margin-right: 0 !important;
    margin-bottom: -15px !important;
}




  /* Move reply input box to the right to align with REPLY button */
  .repliesSection .itemContainer .commentForm.reply-form-open,
  .repliesSection .commentForm.comment-form-container.reply-form-open {
      margin-left: 65px !important;
  }



  /* Override min-width on reply textarea */
  .repliesSection .commentForm textarea,
  .repliesSection .commentForm .textarea-wrapper,
  .repliesSection .commentForm.reply-form-open textarea,
  .repliesSection .commentForm.reply-form-open .textarea-wrapper {
      min-width: 0 !important;
      width: 280px !important;
  }


/* Position send button inside reply input box */
.repliesSection .commentForm.reply-form-open {
    position: relative !important;
}

.repliesSection .commentForm.reply-form-open .postComment {
    position: absolute !important;
    right: 60px !important;
    top: 85% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}


/* Move reply input box to the right for ORIGINAL comment only */
.comments > .itemContainer > .commentForm.reply-form-open,
.comments > .itemContainer > .comment-form-container.reply-form-open {
    margin-left: 38px !important;
}


/* Move send button down for original comment reply input box */
.comments > .itemContainer > .commentForm.reply-form-open .postComment,
.comments > .itemContainer > .comment-form-container.reply-form-open .postComment {
    margin-top: 2px !important;
    transform: translateX(-3px) !important;
}


/* Ensure View more replies button is clickable */
.viewMoreReplies {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}


/* Fix reply emoji picker overflow - position below instead of above */
.repliesSection .emoji-picker-popup-reply,
.commentForm .emoji-picker-popup-reply,
.comment-form-container .emoji-picker-popup-reply {
    position: absolute !important;
    bottom: auto !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    z-index: 10000 !important;
}


/* Close comment modal button */
.close-comment-modal {
    position: absolute;
    top: -5px;
    right: 3px;
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 5px 10px;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.close-comment-modal:hover {
    opacity: 1;
}
.commentSection .header {
    position: relative;
}