/* ============================================================
   REPLY FORM TOGGLE FIX
   Add this CSS to commentMenu.css or style.css
   ============================================================ */

/* =============================================================
   CRITICAL: Override the sticky bottom positioning for reply forms
   The original CSS has: position: sticky; bottom: 0;
   This causes reply forms to appear at bottom of screen
   ============================================================= */

/* Reply forms should NOT be sticky - position them inline below Reply button */
.itemContainer .commentForm,
.itemContainer .commentForm.comment-form-container {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    z-index: 1 !important;
}

/* When form is visible (hidden class removed), show as flex */
.itemContainer .commentForm:not(.hidden),
.itemContainer .commentForm.comment-form-container:not(.hidden) {
    display: flex !important;
}

/* For replies inside repliesSection */
.repliesSection .itemContainer .commentForm,
.repliesSection .commentForm.comment-form-container {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
}

/* Keep the main header comment form sticky at bottom */
.commentSection > .header .commentForm,
.commentSection .header .commentForm {
    position: sticky !important;
    bottom: 0 !important;
    display: flex !important;
}